feat: add delete implementation on table

src/app/(auth)/login/page.tsx

@@ -2,8 +2,48 @@
 
 import Form from "#/components/form/form"
 import { loginSchema } from "#/schema/loginSchema"
+import { useMutation } from "@tanstack/react-query"
+import { signIn } from "next-auth/react"
+import { useRouter } from "next/navigation";
 
 export default function LoginPage() {
+    const router = useRouter()
+
+    const mutation = useMutation({
+        mutationKey: ['login'],
+        mutationFn: async (data: { email: string; password: string }) => {
+            try {
+                const result = await signIn("credentials", {
+                    email: data.email,
+                    password: data.password,
+                    redirect: false,
+                })
+                
+                if (result?.error) {
+                    const errorMessage = result.error.includes("CredentialsSignin") 
+                        ? "Email ou mot de passe incorrect" 
+                        : result.error;
+                    console.error(errorMessage)
+                    throw new Error(result.error)
+                }
+                return result
+            } catch (error: any) {
+                if (error.message.includes("Network Error")) {
+                    console.error("Problème de connexion au serveur");
+                }
+                console.error("Autre = ", error);
+            }
+            
+
+        },
+        onSuccess: () => {
+            router.push('/admin/home')
+        },
+        onError: (error: Error) => {
+            console.error(error.message)
+        },
+    })
+
     return(
         <div>
             <Form
@@ -24,7 +64,7 @@ export default function LoginPage() {
                         showPasswordToggle: true
                     }
                 ]}
-                submit={undefined} 
+                submit={mutation.mutate} 
                 schema={loginSchema}
                 child={<button type="submit" className="btn-auth">Connexion</button>}
              />

src/app/admin/home/page.tsx

@@ -1,129 +1,122 @@
 "use client"
 
+import { icons } from "#/assets/icons"
+import Statistics from "#/components/stats"
 import Table from "#/components/table/table"
+import { Company } from "#/types"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
 import { ColumnDef } from "@tanstack/react-table"
+import axios from "axios"
+import { useSession } from "next-auth/react"
+import Image from "next/image"
 
 
 export default function HomePage () {
-  type Payment = {
-    id: string
-    amount: number
-    status: "pending" | "processing" | "success" | "failed"
-    email: string
-  }
+
+  const {data: session, status} = useSession()
+  const queryClient = useQueryClient()
+
+  console.log("Session = ", session)
+
+  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)
+        }
+    }
+  })
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: async (id: string) => {
+      try {
+        const response = await axios.delete(
+          `https://private-docs-api.intside.co/companies/${id}/`, {
+            headers: {
+                'Authorization': `Bearer ${session?.user.access_token}`
+            }
+        }
+        )
+
+        if(response.status === 200 || response.status === 201) {
+          console.log('Suppresion réussie !')
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["companies"] })
+
+      refetch()
+    }
+  })
+  
 
 
-  const data: Payment[] = [
-    {
-      id: "728ed52f",
-      amount: 100,
-      status: "pending",
-      email: "m@example.com",
-    },
-    {
-      id: "728ed521",
-      amount: 200,
-      status: "pending",
-      email: "j@example.com",
-    },
-    {
-      id: "728ed528",
-      amount: 300,
-      status: "processing",
-      email: "f@example.com",
-    },
-    {
-      id: "728ed52g",
-      amount: 600,
-      status: "success",
-      email: "h@example.com",
-    },
-    {
-      id: "728ed520",
-      amount: 50,
-      status: "failed",
-      email: "k@example.com",
-    },
-    {
-      id: "728ed529",
-      amount: 200,
-      status: "pending",
-      email: "l@example.com",
-    },
-    {
-      id: "728ed526",
-      amount: 150,
-      status: "processing",
-      email: "d@example.com",
-    },
-    {
-      id: "728ed523",
-      amount: 100,
-      status: "success",
-      email: "o@example.com",
-    },
-    {
-      id: "728ed52y",
-      amount: 100,
-      status: "failed",
-      email: "v@example.com",
-    },
-    // ...
-  ]
-
-
-
-  const columns: ColumnDef<Payment>[] = [
-    {
-        id: "select",
-        header: ({ table }) => (
-          <input checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && undefined)
-          } onChange={(value) => table.toggleAllPageRowsSelected(!!value)} type="checkbox" name="" id="" />
-        ),
-        cell: ({ row }) => (
-            <input checked={row.getIsSelected()} onChange={(value) => row.toggleSelected(!!value)} type="checkbox" name="" id="" />
-        ),
-    },
+  const columns: ColumnDef<Company>[] = [
+  {
+    accessorKey: "name",
+    header: "Organisations",
+  },
+  // {
+  //   accessorKey: "Utilisateurs",
+  //   header: "Utilisateurs",
+  // },
+  {
+    header: "Administrateurs",
+    cell: ({ row }) => {
+      const value = String(row.original.owner.first_name) + " " + String(row.original.owner.last_name)
+      return(
+        <p>{value}</p>
+      )
+    }
+  },
+  {
+    accessorKey: "owner.email",
+    header: "Adresse e-mail"
+  },
   {
     accessorKey: "status",
-    header: "Status",
+    header: "Statut"
   },
   {
-    accessorKey: "email",
-    header: ({ column }) => {
+    id: "delete",
+    cell: ({ cell }) => {
+        const id = String(cell.row.original.id)
         return (
-          <p>Email</p>
+          <div className="relative p-2 cursor-pointer"
+            onClick={() => { mutate(id) }}
+          >
+            <Image alt="" src={icons.trash} className="absolute right-2 top-[-50%] transform translate-middle-y hover:text-blue-500" />
+          </div>
         )
-      },
-  },
-  {
-    accessorKey: "amount",
-    header: () => <div className="">Amount</div>,
-    cell: ({ row }) => {
-      const amount = parseFloat(row.getValue("amount"))
-      const formatted = new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: "USD",
-      }).format(amount)
- 
-      return <div className="font-medium">{formatted}</div>
-    },
-    
-  
-
-  },
-  
+    }
+  }
 ]
 
   return(
-    <>
+    <div className="space-y-10">
+      <Statistics />
+
       <Table 
         columns={columns} 
-        data={data} 
+        data={companies || []} 
         pageSize={5}
       />
-    </>
+    </div>
   )
 }

src/app/api/auth/[...nextauth]/route.ts

@@ -13,7 +13,7 @@ const handler = NextAuth({
             async authorize(credentials) {
                 try {
                     const response = await axios.post(
-                        'private-docs-api.intside.co/users/login/',
+                        'https://private-docs-api.intside.co/users/login/',
                         {
                             email: credentials?.email,
                             password: credentials?.password,

src/app/layout.tsx

@@ -3,6 +3,8 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import NextTopLoader from "nextjs-toploader";
 import "../assets/css/ruben-ui.css"
+import { AuthProvider } from "#/components/provider/authProvider";
+import { QueryClientProvide } from "#/components/provider/queryClient";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,6 +18,7 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  
   return (
     <html lang="en">
       <head>
@@ -23,8 +26,12 @@ export default function RootLayout({
         <link rel="favicon.svg" href="/favicon.svg" />
       </head>
       <body className={inter.className}>
-        <NextTopLoader color="#246BFD" shadow="0" />
-        {children}
+        <AuthProvider>
+          <QueryClientProvide>
+            <NextTopLoader color="#246BFD" shadow="0" />
+            {children}
+          </QueryClientProvide>
+        </AuthProvider>
       </body>
     </html>
   );

src/assets/icons/index.ts

@@ -23,7 +23,7 @@ import messagesIcon from "./message.svg"
 import homeIcon from "./NavItem.svg"
 import companiesIcon from "./buildings.svg"
 import arrowLeft from "./arrowLeft.svg"
-import arrowRight from "./arrowLeft.svg"
+import arrowRight from "./arrowRight.svg"
 import filesIcon from "./ph_files.svg"
 import pdfIcon from "./prime_file-pdf.svg"
 import wordIcon from "./prime_file-word.svg"
@@ -39,6 +39,7 @@ import starIcon from "./star.svg"
 import arrowUp from "./Vector.svg"
 import sunIcon from "./sun.svg"
 import moonIcon from "./moon.svg"
+import trash from "./trash.svg"
 
 
 export const icons = {
@@ -82,7 +83,8 @@ export const icons = {
   starIcon,
   arrowUp,
   sunIcon,
-  moonIcon  
+  moonIcon  ,
+  trash
 }
 
 

src/assets/icons/trash.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 5.98001C17.67 5.65001 14.32 5.48001 10.98 5.48001C9 5.48001 7.02 5.58001 5.04 5.78001L3 5.98001" stroke="#9FA8BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.5 4.97L8.72 3.66C8.88 2.71 9 2 10.69 2H13.31C15 2 15.13 2.75 15.28 3.67L15.5 4.97" stroke="#9FA8BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.8499 9.14001L18.1999 19.21C18.0899 20.78 17.9999 22 15.2099 22H8.7899C5.9999 22 5.9099 20.78 5.7999 19.21L5.1499 9.14001" stroke="#9FA8BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.3301 16.5H13.6601" stroke="#9FA8BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5 12.5H14.5" stroke="#9FA8BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/form/form.tsx

@@ -37,6 +37,7 @@ export default function Form({
             setErrors(newErrors)
         } else {
             setErrors({})
+            submit(result.data)
         }
     }
 

src/components/provider/authProvider.tsx

@@ -0,0 +1,7 @@
+'use client'
+import { SessionProvider } from "next-auth/react";
+import { ReactNode } from "react";
+
+export function AuthProvider({ children }: Readonly<{ children: ReactNode }>) {
+  return <SessionProvider>{children}</SessionProvider>;
+}

src/components/provider/queryClient.tsx

@@ -0,0 +1,14 @@
+"use client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { ReactNode } from "react";
+
+export function QueryClientProvide({
+  children,
+}: Readonly<{ children: ReactNode }>) {
+  const queryClient = new QueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

src/components/stats.tsx

@@ -0,0 +1,70 @@
+import Image from "next/image"
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { useSession } from "next-auth/react";
+import { icons } from "#/assets/icons";
+import { Stats, StatsType, } from "#/types";
+
+export default function Statistics() {
+
+    const { data: session, status } = useSession();
+
+    const { data: stats, isLoading} = useQuery({
+        enabled: status === 'authenticated',
+        queryKey: ["stats", session?.user.access_token],
+        queryFn: async () => {
+            try {
+                const response = await axios.get(
+                    'https://private-docs-api.intside.co/statistics', {
+                        headers: {
+                            'Authorization': `Bearer ${session?.user.access_token}`
+                        }
+                    }
+                )
+
+                if(response.data) {
+                    return response.data as Stats
+                }  
+            } catch (error: any) {
+                console.error(error)
+            }
+        }
+    })
+
+    const statsData: StatsType[] = [
+        { id: 1, title: 'Organisations', value: stats?.companies, icon: icons.companiesIcon, color: 'blue' },
+        { id: 2, title: 'Utilisateurs', value: stats?.users, icon: icons.userIcon, color: 'blue' },
+        { id: 3, title: 'Documents', value: stats?.documents, icon: icons.docummentTextIcon, color: 'blue' },
+        { id: 4, title: 'Stockage', value: stats?.documents_size, icon: icons.archivesIcon, color: 'blue' }
+      ];
+
+
+
+
+    return(
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {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 
+                            className="flex items-center justify-center rounded-lg bg-[#E9F0FF] bg-opacity-25 p-2"
+                            style={{ width: '54px', height: '54px' }}
+                        >
+                            <Image 
+                                alt={title} 
+                                src={icon} 
+                                width={32} 
+                                height={32} 
+                                className="text-blue-500" 
+                            />
+                        </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>
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    )
+}

src/components/table/table.tsx

@@ -11,6 +11,8 @@ import {
   } from "@tanstack/react-table"
 import { useState } from "react";
 import { clsx, type ClassValue } from "clsx"
+import Image from "next/image";
+import { icons } from "#/assets/icons";
 
   interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[]
@@ -43,6 +45,7 @@ export default function Table<TData, TValue>({
                 pageSize: pageSize,
             }
         },
+        enableRowSelection: true,
         getFilteredRowModel: getFilteredRowModel(),
         onRowSelectionChange: setRowSelection,
         onColumnFiltersChange: setColumnFilters,
@@ -66,9 +69,18 @@ export default function Table<TData, TValue>({
                     <thead className="h-10">
                         {table.getHeaderGroups().map((headerGroup) => (
                             <tr key={headerGroup.id} className="rounded-lg">
+                                <th className="bg-blue-300 p-3 text-start first:rounded-tl-lg">
+                                    <input checked={
+                                        table.getIsAllPageRowsSelected() ||
+                                            (table.getIsSomePageRowsSelected() && undefined)
+                                        } 
+                                        onChange={(e) => table.toggleAllPageRowsSelected(e.target.checked)} 
+                                        type="checkbox" name="" id="" 
+                                    />
+                                </th>
                                 {headerGroup.headers.map((header) => {
                                     return(
-                                        <th key={header.id} className="bg-blue-300 p-3 text-start">
+                                        <th key={header.id} className="bg-blue-300 p-3 text-start last:rounded-tr-lg">
                                             {flexRender(
                                                 header.column.columnDef.header,
                                                 header.getContext()
@@ -83,6 +95,13 @@ export default function Table<TData, TValue>({
                         {table.getRowModel().rows.length ? (
                             table.getRowModel().rows.map((row) => (
                                 <tr key={row.id} className={clsx('hover:bg-gray-300 border-t border-gray-200', { 'bg-gray-300': row.getIsSelected()})}>
+                                    <td className="p-3 text-start">
+                                        <input 
+                                            checked={row.getIsSelected()} 
+                                            onChange={(e) => row.toggleSelected(e.target.checked)} 
+                                            type="checkbox" name="" id="" 
+                                        />
+                                    </td>
                                     {row.getVisibleCells().map((cell) => (
                                         <td key={cell.id} className="p-3 text-start">
                                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -104,11 +123,11 @@ export default function Table<TData, TValue>({
 
             <div className="flex items-center justify-end space-x-2 py-4">
             <button
-                className="border bg-gray-200 shadow-xs hover:bg-gray-300 hover:text-black px-3 py-1 rounded"
+                className="bg-gray-100 shadow-xs hover:bg-gray-300 px-3 py-1 rounded w-9 h-9"
                 onClick={() => table.previousPage()}
                 disabled={!table.getCanPreviousPage()}
             >
-                Précédent
+                <Image alt="" src={icons.arrowLeft} className="hover:text-blue-400"/>
             </button>
 
             <div className="flex space-x-1">
@@ -116,10 +135,10 @@ export default function Table<TData, TValue>({
                     <button
                         key={pageNumber}
                         className={clsx(
-                            "px-3 py-1 rounded",
+                            "px-3 py-1 rounded w-9 h-9",
                             pageNumber === currentPage 
-                                ? "bg-blue-500 text-white" 
-                                : "bg-gray-200 hover:bg-gray-300"
+                                ? "bg-[#E9F0FF] text-blue-400"
+                                : "bg-gray-100 hover:bg-gray-300"
                         )}
                         onClick={() => table.setPageIndex(pageNumber - 1)}
                     >
@@ -129,11 +148,11 @@ export default function Table<TData, TValue>({
             </div>
 
             <button
-                className="border bg-gray-200 shadow-xs hover:bg-gray-300 hover:text-black px-3 py-1 rounded"
+                className="w-9 h-9 bg-gray-100 shadow-xs hover:bg-gray-300 hover:text-black px-3 py-1 rounded"
                 onClick={() => table.nextPage()}
                 disabled={!table.getCanNextPage()}
             >
-                Suivant
+                <Image alt="" src={icons.arrowRight} />
             </button>
         </div>
         </div>

src/types/index.ts

@@ -15,8 +15,38 @@ export interface FloatingLabelInputProps {
 export interface FormProps {
     title?: string,
     fields: FloatingLabelInputProps[],
-    submit: FormEventHandler<HTMLFormElement> | undefined,
+    submit: (param: any) => unknown,
     className: string,
     child: ReactNode,
     schema: ZodSchema
+}
+
+export interface StatsType {
+    id: number;
+    title: string;
+    value: number | undefined;
+    icon: string;
+    color: string;
+}
+  
+export interface Stats {
+    companies: number
+    documents: number
+    users: number
+    documents_size: number
+}
+
+export interface Company {
+    id: string
+    name: string
+    is_premium: boolean
+    status: string
+    owner: Owner
+}
+  
+export interface Owner {
+    id: string
+    first_name: string
+    email: string
+    last_name: string
 }