diff --git a/src/app/admin/home/page.tsx b/src/app/admin/home/page.tsx index d9dacdb..d7ab0a4 100644 --- a/src/app/admin/home/page.tsx +++ b/src/app/admin/home/page.tsx @@ -12,34 +12,34 @@ 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(null); console.log("Session = ", session) - const { data: companies, refetch, isLoading} = useQuery({ + const { data: companies, refetch, isLoading } = useQuery({ enabled: status === 'authenticated', queryKey: ["companies"], queryFn: async () => { - try { - const response = await axios.get( - 'https://private-docs-api.intside.co/companies', { - headers: { - 'Authorization': `Bearer ${session?.user.access_token}` - } - } - ) - - if(response.data) { - return response.data.data as Company[] - } - } catch (error) { - console.error(error) + try { + const response = await axios.get( + 'https://private-docs-api.intside.co/companies', { + headers: { + 'Authorization': `Bearer ${session?.user.access_token}` + } } + ) + + if (response.data) { + return response.data.data as Company[] + } + } catch (error) { + console.error(error) + } } }) @@ -48,13 +48,13 @@ export default function HomePage () { try { const response = await axios.delete( `https://private-docs-api.intside.co/companies/${id}/`, { - headers: { - 'Authorization': `Bearer ${session?.user.access_token}` - } + headers: { + 'Authorization': `Bearer ${session?.user.access_token}` + } } ) - if(response.status === 200 || response.status === 201) { + if (response.status === 200 || response.status === 201) { console.log('Suppresion réussie !') setOpen(false) } @@ -68,140 +68,139 @@ export default function HomePage () { refetch() } }) - + const columns: ColumnDef[] = [ - { - accessorKey: "name", - header: "Organisations", - }, - { - accessorKey: "total_users", - header: "Utilisateurs", - }, - { - header: "Administrateurs", - 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( -
-
- {initials} -
-

{value}

-
- ) - } - }, - { - accessorKey: "owner.email", - header: "Adresse e-mail" - }, - { - accessorKey: "status", - header: "Statut", - cell: ({ cell }) => { - const status = String(cell.getValue()) - return ( -

- { - status === "active" ? "Actif" : - status === "inactive" ? "Inactif" : - status === "pending" ? "En attente" : - status === "blocked" ? "Bloquée" : - "" - } -

- ) - } - }, - { - id: "delete", - cell: ({ row }) => { - const id = String(row.original.id); - return ( -
- { - if (!isOpen) { - setSelectedId(null); - } - }} - trigger={ -
{ - setSelectedId(id); - }} - > - -
- } - title={ -

- Supprimer cette organisation -

- } - content={ -
-

- Voulez-vous vraiment supprimer l'organisation {row.original.name} ? -

- -
- - -
-
- } - /> -
- ); + { + accessorKey: "name", + header: "Organisations", }, - }, -] + { + accessorKey: "total_users", + header: "Utilisateurs", + }, + { + header: "Administrateurs", + 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 ( +
+
+ {initials} +
+

{value}

+
+ ) + } + }, + { + accessorKey: "owner.email", + header: "Adresse e-mail" + }, + { + accessorKey: "status", + header: "Statut", + cell: ({ cell }) => { + const status = String(cell.getValue()) + return ( +

+ { + status === "active" ? "Actif" : + status === "inactive" ? "Inactif" : + status === "pending" ? "En attente" : + status === "blocked" ? "Bloquée" : + "" + } +

+ ) + } + }, + { + id: "delete", + cell: ({ row }) => { + const id = String(row.original.id); + return ( +
+ { + if (!isOpen) { + setSelectedId(null); + } + }} + trigger={ +
{ + setSelectedId(id); + }} + > + +
+ } + title={ +

+ Supprimer cette organisation +

+ } + content={ +
+

+ Voulez-vous vraiment supprimer l'organisation {row.original.name} ? +

- return( -
+
+ + +
+
+ } + /> +
+ ); + }, + }, + ] + + return ( +
-

Dernières organisations actives

+

Dernières organisations actives

- diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx index b0e69b3..2f4c341 100644 --- a/src/app/admin/layout.tsx +++ b/src/app/admin/layout.tsx @@ -24,12 +24,12 @@ export default function Dashboard({ children }: { children: ReactNode }) {
-
+
{children}
-
+
) } diff --git a/src/app/globals.css b/src/app/globals.css index 0c964dd..323f4b1 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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; diff --git a/src/assets/css/admin.css b/src/assets/css/admin.css index bfe8d39..74c938a 100644 --- a/src/assets/css/admin.css +++ b/src/assets/css/admin.css @@ -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{ diff --git a/src/components/admin/adminHeader.tsx b/src/components/admin/adminHeader.tsx index 1a61bc1..a9c5c66 100644 --- a/src/components/admin/adminHeader.tsx +++ b/src/components/admin/adminHeader.tsx @@ -12,38 +12,49 @@ export default function AdminHeader() { return ( <> -