ristoo/privatedocs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: sidebar & header okay, started home

Browse Source
This commit is contained in:
Ruben 2025-04-01 23:01:27 +01:00
parent ea04c954b0
commit d3a8fb56ba
7 changed files with 319 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/admin/home/page.tsx
View File

@ -12,16 +12,16 @@ import Image from "next/image"
import { Modal } from "#/components/modal"
import { useState } from "react"
export default function HomePage () {
export default function HomePage() {
const {data: session, status} = useSession()
const { data: session, status } = useSession()
const queryClient = useQueryClient()
const [open, setOpen] = useState(false);
const [selectedId, setSelectedId] = useState<string | null>(null);
console.log("Session = ", session)
const { data: companies, refetch, isLoading} = useQuery({
const { data: companies, refetch, isLoading } = useQuery({
enabled: status === 'authenticated',
queryKey: ["companies"],
queryFn: async () => {
@ -34,7 +34,7 @@ export default function HomePage () {
}
)
if(response.data) {
if (response.data) {
return response.data.data as Company[]
}
} catch (error) {
@ -54,7 +54,7 @@ export default function HomePage () {
}
)
if(response.status === 200 || response.status === 201) {
if (response.status === 200 || response.status === 201) {
console.log('Suppresion réussie !')
setOpen(false)
}
@ -85,7 +85,7 @@ export default function HomePage () {
cell: ({ row }) => {
const value = String(row.original.owner.first_name) + " " + String(row.original.owner.last_name)
const initials = String(row.original.owner.first_name[0]) + String(row.original.owner.last_name[0])
return(
return (
<div className="flex space-x-2 items-center">
<div className="flex items-center justify-center bg-[#DCDCFE] text-[#246BFD] w-10 h-10 rounded-full">
{initials}
@ -107,8 +107,7 @@ export default function HomePage () {
return (
<p
className={`rounded-full px-2 py-1 font-medium text-sm w-20 h-6 text-center
${
status === "active" ? "bg-[#ECF9E8] text-[#49C91E]" :
${status === "active" ? "bg-[#ECF9E8] text-[#49C91E]" :
status === "inactive" ? "bg-[#E7EBF3] text-[#9FA8BC]" :
status === "pending" ? "bg-[#EAF7FC] text-[#30B2EA]" :
status === "blocked" ? "bg-[#FDEBE8] text-[#F33F19]" :
@ -190,13 +189,13 @@ export default function HomePage () {
);
},
},
]
]
return(
<div className="space-y-10">
return (
<div className="r-p-m-0">
<Statistics />
<p className="font-bold text-xl">Dernières organisations actives</p>
<p className="fw-bold fs-5">Dernières organisations actives</p>
<Table
columns={columns}

4
src/app/admin/layout.tsx
View File

@ -24,12 +24,12 @@ export default function Dashboard({ children }: { children: ReactNode }) {
<div className="r-flex-between">
<Sidebar />
<main className="flex-grow-1 min-w-0 pt-md-1 pt-sm-5">
<div className="flex-grow-1">
<Header/>
<div className="main px-[44px] py-[64px] ">
{children}
</div>
</main>
</div>
</div >
)
}

14
src/app/globals.css
View File

@ -31,14 +31,24 @@
}
body {
background: var(--background);
color: var(--foreground);
background: var(--background)!important;
color: var(--foreground)!important;
font-family: Urbanist, sans-serif !important;
}
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none!important;
color: inherit!important;
}
ul, li{
/* margin: 0!important; */
}
.input-form {
width: 100%;
padding: 12px;

81
src/assets/css/admin.css
View File

@ -1,10 +1,28 @@
/* Header */
.sidebar-holder, .sidebar{
min-width: 78px;
max-width: 90px;
height: 100vh;
}
.header{
padding: 20px 44px;
height: max-content;
align-items: center;
/* border: solid; */
}
/* Sidebar */
.sidebar {
padding-top: 25px;
border-right: 1px solid var(--cinder);
position: fixed;
}
.nav-menu{
padding-top: 160px;
}
.nav-item .nav-home {
margin-bottom: -10px;
}
@ -29,33 +47,60 @@
margin-top: -11px;
margin-bottom: -11px;
}
.logout{
bottom: 40px;
left: 28px;
}
/* Border */
.icon-border {
border: 1px solid var(--cinder);
height: max-content;
border: 1px solid var(--bluegray);
padding: 8px;
border-radius: 12px;
cursor: pointer;
}
.dropdown-toggle{
align-items: center!important;
}
.dropdown-menu {
width: max-content;
background-color: var(--background);
border: none!important;
border-radius: 8px;
box-shadow: 0 0 24px #0000001A;
box-shadow: 0 0 24px #0000001A!important;
}
.dropdown-item a {
width: max-content;
.dropdown-menu{
right: 0px!important;
}
.r-dropdown-item a {
width: 100%;
padding: 10px 20px;
margin: 0!important;
display: flex;
justify-content: space-between;
justify-content: start;
align-items: center;
gap: 10px;
}
.r-dropdown-item a:hover {
background-color: var(--cinder);
}
.dropdown-toggle::after{
content: unset!important;
}
.transition-300{
transition: transform .3s ;
}
/* Main */
.main{
padding: 64px 44px;
}
.p-container {
height: 100vh;
border: 1px solid var(--gray);
@ -102,6 +147,30 @@
display: none!important;
}
/* Home Page */
.stats{
padding: 24px 27px;
display: flex;
flex-wrap: nowrap;
border: 1px!important;
border: 1px solid var(--primary)!important;
border-radius: 14px;
}
.sqaurre-bg{
width: 54px;
height: 54px;
padding: 10px;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
background: var(--bluegray);
}
@media (max-width: 640px) {
.header, .main{

41
src/components/admin/adminHeader.tsx
View File

@ -12,38 +12,49 @@ export default function AdminHeader() {
return (
<>
<nav className="header r-flex-between items-center px-[44px] py-[20px] ">
<p className="name text-[26px]">Bienvenue, <span>Ken B.</span> </p>
<div className="r-flex-between justify-center items-center r-gap-12">
{/* <ProfilePicture /> */}
<nav className="header r-flex-between align-items-center ">
<p className="r-m-0 name fs-4 fw-medium">Bienvenue, <span>Ken B.</span> </p>
<div className="r-flex-between justify-content-center align-items-center r-gap-12">
<div className="header-desktop">
<Theme />
</div>
<button type="button" className="icon-border header-desktop">
<Image src={icons.notificationsIcon} alt="Notifications" />
</button>
<div className="relative">
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
<DropdownMenu.Trigger asChild>
<div className="r-flex-between justify-center items-center r-gap-12 cursor-pointer">
<div className="dropdown">
<div className="r-flex-between dropdown-toggle justify-center items-center r-gap-12 cursor-pointer" data-bs-toggle="dropdown" aria-expanded="false">
<button type="button" className="icon-borderd mobile scale-120" >
<Image src={icons.arrowLeft} alt="options" className={`transition-transform duration-300 ${open ? "scale-x-[-1]" : ""}`} />
<Image src={icons.arrowLeft} alt="options" className={`transition-300 transition-transform duration-300 ${open ? " " : ""}`} />
</button>
<Image src={icons.profilePicture} alt="ProfilePicture" />
<button className="IconButton header-desktop" aria-label="Customise options">
<Image src={icons.arrowUp} alt="arrowUp" className={`transition-transform duration-300 ${open ? "scale-y-[-1]" : ""}`} />
<Image src={icons.arrowUp} alt="arrowUp" className={`transition-300 transition-transform duration-300 ${open ? "" : ""}`} />
</button>
</div>
<ul className="dropdown-menu">
<li className="r-dropdown-item text-[14px]">
<Link href="#" className="d-flex align-items-center ">
<Image src={icons.userIcon} alt="Profil" />
Profil
</Link>
</li>
<li className="r-dropdown-item text-[14px]">
<Link href="#" className="d-flex align-items-center r-danger ">
<Image src={icons.logoutRed} alt="Deconnexion" />
Déconnexion
</Link>
</li>
</ul>
</div>
<div className="position-relative">
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
<DropdownMenu.Trigger asChild>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content className="DropdownMenuContent dropdown-menu r-flex-column r-secondary" sideOffset={0} side="bottom" align="end" >
<DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
<Link href="#" className="d-flex items-start ">
<Image src={icons.userIcon} alt="Profil" />
Profil
</Link>
</DropdownMenu.Item>
{/* <DropdownMenu.Item className="DropdownMenuItem dropdown-item flex items-center content-center text-[14px] mobile">
<Theme />

6
src/components/admin/sidebar.tsx
View File

@ -19,8 +19,8 @@ export default function Sidebar() {
return (
<>
<div className={` ${ mobileVisible? "mobile-flex" : "mobile-none" } sidebar-holder min-w-[78px] max-w-[90px] h-[100vh] relative `}>
<div className="sidebar r-m-0 d-flex flex-column pt-[25px] max-w-[90px] h-[100vh] ">
<div className={` ${ mobileVisible? "mobile-flex" : "mobile-none" } sidebar-holder position-relative `}>
<div className="sidebar r-m-0 d-flex flex-column ">
<div className="logo r-flex-center px-[19px] ">
<Image src={icons.logo} alt="Logo" className="scale-95" />
</div>
@ -29,7 +29,7 @@ export default function Sidebar() {
<NavItem link="/admin/organizations" iconSrc={icons.companiesIcon} label="Organizations" isActive={pathname.startsWith("/admin/organizations")} />
<NavItem link="/admin/admins" iconSrc={icons.userGroup} label="Admins" isActive={pathname.startsWith("/admin/admins")} />
</div>
<div className="logout absolute bottom-[40px] left-[28px]">
<div className="logout position-absolute bottom-[40px] left-[28px]">
<Link href="/login" className="cursor-pointer">
<Image src={icons.logout} alt="Logout" />
</Link>

18
src/components/stats.tsx
View File

@ -9,7 +9,7 @@ export default function Statistics() {
const { data: session, status } = useSession();
const { data: stats, isLoading} = useQuery({
const { data: stats, isLoading } = useQuery({
enabled: status === 'authenticated',
queryKey: ["stats", session?.user.access_token],
queryFn: async () => {
@ -22,7 +22,7 @@ export default function Statistics() {
}
)
if(response.data) {
if (response.data) {
return response.data as Stats
}
} catch (error) {
@ -41,13 +41,13 @@ export default function Statistics() {
return(
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
return (
<div className="r-flex-between r-gap-24">
{statsData.map(({ id, title, value, icon }) => (
<div key={id} className="w-full">
<div className="flex items-center rounded-xl border-2 border-blue-500 p-4 space-x-3">
<div key={id} className="w-25">
<div className="stats flex items-center rounded-xl border-2 border-blue-500 r-gap-12">
<div
className="flex items-center justify-center rounded-lg bg-[#E9F0FF] bg-opacity-25 p-2"
className="sqaurre-bg d-flex items-center justify-center rounded-lg bg-[#E9F0FF] bg-opacity-25 p-2"
style={{ width: '54px', height: '54px' }}
>
<Image
@ -59,8 +59,8 @@ export default function Statistics() {
/>
</div>
<div className="ml-3">
<p className="text-sm text-gray-500 mb-0">{title}</p>
<p className="font-bold text-2xl mb-0">{ status === "loading" && isLoading ? "Chargement..." : value}</p>
<p className="text-sm text-secondary mb-0">{title}</p>
<p className="fw-bold fs-5 mb-0">{status === "loading" && isLoading ? "Chargement..." : value}</p>
</div>
</div>
</div>