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

@@ -2,48 +2,8 @@
 
 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
@@ -64,7 +24,7 @@ export default function LoginPage() {
                         showPasswordToggle: true
                     }
                 ]}
-                submit={mutation.mutate} 
+                submit={undefined} 
                 schema={loginSchema}
                 child={<button type="submit" className="btn-auth">Connexion</button>}
              />

src/app/admin/home/page.tsx

@@ -1,122 +1,129 @@
 "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: Payment[] = [
-
+    {
-  const { data: companies, refetch, isLoading} = useQuery({
+      id: "728ed52f",
-    enabled: status === 'authenticated',
+      amount: 100,
-    queryKey: ["companies"],
+      status: "pending",
-    queryFn: async () => {
+      email: "m@example.com",
-        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"] })
+      id: "728ed521",
-
+      amount: 200,
-      refetch()
+      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<Company>[] = [
+
-  {
+  const columns: ColumnDef<Payment>[] = [
-    accessorKey: "name",
+    {
-    header: "Organisations",
+        id: "select",
-  },
+        header: ({ table }) => (
-  // {
+          <input checked={
-  //   accessorKey: "Utilisateurs",
+            table.getIsAllPageRowsSelected() ||
-  //   header: "Utilisateurs",
+            (table.getIsSomePageRowsSelected() && undefined)
-  // },
+          } onChange={(value) => table.toggleAllPageRowsSelected(!!value)} type="checkbox" name="" id="" />
-  {
+        ),
-    header: "Administrateurs",
+        cell: ({ row }) => (
-    cell: ({ row }) => {
+            <input checked={row.getIsSelected()} onChange={(value) => row.toggleSelected(!!value)} type="checkbox" name="" id="" />
-      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: "Statut"
+    header: "Status",
   },
   {
-    id: "delete",
+    accessorKey: "email",
-    cell: ({ cell }) => {
+    header: ({ column }) => {
-        const id = String(cell.row.original.id)
         return (
-          <div className="relative p-2 cursor-pointer"
+          <p>Email</p>
-            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={companies || []} 
+        data={data} 
         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(
-                        'https://private-docs-api.intside.co/users/login/',
+                        'private-docs-api.intside.co/users/login/',
                         {
                             email: credentials?.email,
                             password: credentials?.password,

src/app/layout.tsx

@@ -3,8 +3,6 @@ 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"] });
 
@@ -18,7 +16,6 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  
   return (
     <html lang="en">
       <head>
@@ -26,12 +23,8 @@ export default function RootLayout({
         <link rel="favicon.svg" href="/favicon.svg" />
       </head>
       <body className={inter.className}>
-        <AuthProvider>
+        <NextTopLoader color="#246BFD" shadow="0" />
-          <QueryClientProvide>
+        {children}
-            <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 "./arrowRight.svg"
+import arrowRight from "./arrowLeft.svg"
 import filesIcon from "./ph_files.svg"
 import pdfIcon from "./prime_file-pdf.svg"
 import wordIcon from "./prime_file-word.svg"
@@ -39,7 +39,6 @@ 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 = {
@@ -83,8 +82,7 @@ export const icons = {
   starIcon,
   arrowUp,
   sunIcon,
-  moonIcon  ,
+  moonIcon  
-  trash
 }
 
 

src/assets/icons/trash.svg

@@ -1,7 +0,0 @@
-<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,7 +37,6 @@ export default function Form({
             setErrors(newErrors)
         } else {
             setErrors({})
-            submit(result.data)
         }
     }
 

src/components/provider/authProvider.tsx

@@ -1,7 +0,0 @@
-'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

@@ -1,14 +0,0 @@
-"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

@@ -1,70 +0,0 @@
-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,8 +11,6 @@ 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>[]
@@ -45,7 +43,6 @@ export default function Table<TData, TValue>({
                 pageSize: pageSize,
             }
         },
-        enableRowSelection: true,
         getFilteredRowModel: getFilteredRowModel(),
         onRowSelectionChange: setRowSelection,
         onColumnFiltersChange: setColumnFilters,
@@ -69,18 +66,9 @@ 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 last:rounded-tr-lg">
+                                        <th key={header.id} className="bg-blue-300 p-3 text-start">
                                             {flexRender(
                                                 header.column.columnDef.header,
                                                 header.getContext()
@@ -95,13 +83,6 @@ 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())}
@@ -123,11 +104,11 @@ export default function Table<TData, TValue>({
 
             <div className="flex items-center justify-end space-x-2 py-4">
             <button
-                className="bg-gray-100 shadow-xs hover:bg-gray-300 px-3 py-1 rounded w-9 h-9"
+                className="border bg-gray-200 shadow-xs hover:bg-gray-300 hover:text-black px-3 py-1 rounded"
                 onClick={() => table.previousPage()}
                 disabled={!table.getCanPreviousPage()}
             >
-                <Image alt="" src={icons.arrowLeft} className="hover:text-blue-400"/>
+                Précédent
             </button>
 
             <div className="flex space-x-1">
@@ -135,10 +116,10 @@ export default function Table<TData, TValue>({
                     <button
                         key={pageNumber}
                         className={clsx(
-                            "px-3 py-1 rounded w-9 h-9",
+                            "px-3 py-1 rounded",
                             pageNumber === currentPage 
-                                ? "bg-[#E9F0FF] text-blue-400"
+                                ? "bg-blue-500 text-white" 
-                                : "bg-gray-100 hover:bg-gray-300"
+                                : "bg-gray-200 hover:bg-gray-300"
                         )}
                         onClick={() => table.setPageIndex(pageNumber - 1)}
                     >
@@ -148,11 +129,11 @@ export default function Table<TData, TValue>({
             </div>
 
             <button
-                className="w-9 h-9 bg-gray-100 shadow-xs hover:bg-gray-300 hover:text-black px-3 py-1 rounded"
+                className="border bg-gray-200 shadow-xs hover:bg-gray-300 hover:text-black px-3 py-1 rounded"
                 onClick={() => table.nextPage()}
                 disabled={!table.getCanNextPage()}
             >
-                <Image alt="" src={icons.arrowRight} />
+                Suivant
             </button>
         </div>
         </div>

src/types/index.ts

@@ -15,38 +15,8 @@ export interface FloatingLabelInputProps {
 export interface FormProps {
     title?: string,
     fields: FloatingLabelInputProps[],
-    submit: (param: any) => unknown,
+    submit: FormEventHandler<HTMLFormElement> | undefined,
     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
 }