feat: add delete implementation on table

src/app/admin/home/page.tsx

@@ -1,140 +1,108 @@
 "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 { string } from "zod"
+import Image from "next/image"
 
 
 export default function HomePage () {
 
-  const session = useSession()
+  const {data: session, status} = useSession()
+  const queryClient = useQueryClient()
 
   console.log("Session = ", session)
 
-  type Payment = {
+  const { data: companies, refetch, isLoading} = useQuery({
-    id: string
+    enabled: status === 'authenticated',
-    amount: number
+    queryKey: ["companies"],
-    status: "pending" | "processing" | "success" | "failed"
+    queryFn: async () => {
-    email: string
+        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 data: Payment[] = [
+  const { mutate, isPending } = useMutation({
-    {
+    mutationFn: async (id: string) => {
-      id: "728ed52f",
+      try {
-      amount: 100,
+        const response = await axios.delete(
-      status: "pending",
+          `https://private-docs-api.intside.co/companies/${id}/`, {
-      email: "m@example.com",
+            headers: {
-    },
+                'Authorization': `Bearer ${session?.user.access_token}`
-    {
+            }
-      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={(e) => table.toggleAllPageRowsSelected(e.target.checked)} type="checkbox" name="" id="" />
-    //     ),
-    //     cell: ({ row }) => (
-    //         <input checked={row.getIsSelected()} onChange={(e) => row.toggleSelected(e.target.checked)} type="checkbox" name="" id="" />
-    //     ),
-    // },
-  {
-    accessorKey: "status",
-    header: "Statut du paiement",
-    // cell: ({row}) => {
-    //   const value = String(row.getValue("status"))
-    //   return( 
-    //   <div className={`${value === "success" ? "text-green-500" : "text-red-500"}`}>
-    //     {value}
-    //   </div>)
-    // }
-  },
-  {
-    accessorKey: "email",
-    header: ({ }) => {
-        return (
-          <p>Email</p>
         )
-      },
+
-  },
+        if(response.status === 200 || response.status === 201) {
-  {
+          console.log('Suppresion réussie !')
-    accessorKey: "amount",
+        }
-    header: () => <div className="">Amount</div>,
+      } catch (error) {
-    cell: ({ row }) => {
+        console.error(error)
-      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>
     },
-    
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["companies"] })
+
+      refetch()
+    }
+  })
   
 
+
+  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: "id",
+    accessorKey: "owner.email",
+    header: "Adresse e-mail"
+  },
+  {
+    accessorKey: "status",
+    header: "Statut"
+  },
+  {
+    id: "delete",
     cell: ({ cell }) => {
-        const value = String(cell.getValue())
+        const id = String(cell.row.original.id)
         return (
-          <p>{value}</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>
         )
     }
   }
@@ -146,7 +114,7 @@ export default function HomePage () {
 
       <Table 
         columns={columns} 
-        data={data} 
+        data={companies || []} 
         pageSize={5}
       />
     </div>

src/assets/icons/index.ts

@@ -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/types/index.ts

@@ -34,4 +34,19 @@ export interface Stats {
     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
 }