updated build add update delete

frontend/pages/people/add/form.tsx

@@ -37,7 +37,7 @@ const PeopleForm = ({ refetchTable }: { refetchTable: () => void }) => {
 
     const mutation = useAddPeopleMutation();
 
-    function onSubmit(values: PeopleAdd) { mutation.mutate({ data: values }); setTimeout(() => refetchTable(), 400) };
+    function onSubmit(values: PeopleAdd) { mutation.mutate({ data: values, refetchTable }) };
 
     return (
         <Form {...form}>

frontend/pages/people/add/page.tsx

@@ -10,14 +10,11 @@ const PageAddPerson = () => {
     const [sort, setSort] = useState({ createdAt: 'desc' });
     const [filters, setFilters] = useState({});
 
-    const { data, isLoading, error, refetch } = useGraphQlPeopleList({ limit, skip: (page - 1) * limit, sort, filters });
+    const { data, isFetching, isLoading, error, refetch } = useGraphQlPeopleList({ limit, skip: (page - 1) * limit, sort, filters });
 
     return (
         <>
-            <PeopleDataTableAdd
-                data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit}
-                onPageChange={setPage} onPageSizeChange={setLimit} refetchTable={refetch}
-            />
+            <PeopleDataTableAdd data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={setPage} onPageSizeChange={setLimit} refetchTable={refetch} tableIsLoading={isLoading || isFetching} />
             <PeopleForm refetchTable={refetch} />
         </>
     )

frontend/pages/people/add/queries.tsx

@@ -3,7 +3,7 @@ import { useMutation } from '@tanstack/react-query'
 import { PeopleAdd } from './types'
 import { toISOIfNotZ } from '@/lib/utils';
 
-const fetchGraphQlPeopleAdd = async (record: PeopleAdd): Promise<{ data: PeopleAdd | null; status: number }> => {
+const fetchGraphQlPeopleAdd = async (record: PeopleAdd, refetchTable: () => void): Promise<{ data: PeopleAdd | null; status: number }> => {
     console.log('Fetching test data from local API');
     record.birthDate = toISOIfNotZ(record.birthDate || "");
     record.expiryStarts = toISOIfNotZ(record.expiryStarts || "");
@@ -11,14 +11,14 @@ const fetchGraphQlPeopleAdd = async (record: PeopleAdd): Promise<{ data: PeopleA
     try {
         const res = await fetch('/api/people/add', { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify(record) });
         if (!res.ok) { const errorText = await res.text(); console.error('Test data API error:', errorText); throw new Error(`API error: ${res.status} ${res.statusText}`) }
-        const data = await res.json();
+        const data = await res.json(); refetchTable();
         return { data: data.data, status: res.status }
     } catch (error) { console.error('Error fetching test data:', error); throw error }
 };
 
 export function useAddPeopleMutation() {
     return useMutation({
-        mutationFn: ({ data }: { data: PeopleAdd }) => fetchGraphQlPeopleAdd(data),
+        mutationFn: ({ data, refetchTable }: { data: PeopleAdd, refetchTable: () => void }) => fetchGraphQlPeopleAdd(data, refetchTable),
         onSuccess: () => { console.log("People created successfully") },
         onError: (error) => { console.error("Create people failed:", error) },
     })

frontend/pages/people/add/table/columns.tsx

@@ -48,20 +48,63 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
             cell: ({ getValue }) => (<div className="font-mono text-xs bg-muted px-2 py-1 rounded break-all">{String(getValue())}</div>),
         },
         {
-            accessorKey: "type",
-            header: "Type",
+            accessorKey: "firstName",
+            header: "First Name",
         },
         {
-            accessorKey: "token",
-            header: "Token",
+            accessorKey: "surname",
+            header: "Surname",
         },
         {
-            accessorKey: "typeToken",
-            header: "Type Token",
+            accessorKey: "middleName",
+            header: "Middle Name",
         },
         {
-            accessorKey: "description",
-            header: "Description",
+            accessorKey: "sexCode",
+            header: "Sex",
+        },
+        {
+            accessorKey: "personRef",
+            header: "Person Ref",
+        },
+        {
+            accessorKey: "personTag",
+            header: "Person Tag",
+        },
+        {
+            accessorKey: "fatherName",
+            header: "Father Name",
+        },
+        {
+            accessorKey: "motherName",
+            header: "Mother Name",
+        },
+        {
+            accessorKey: "countryCode",
+            header: "Country",
+        },
+        {
+            accessorKey: "nationalIdentityId",
+            header: "National ID",
+        },
+        {
+            accessorKey: "birthPlace",
+            header: "Birth Place",
+        },
+        {
+            accessorKey: "active",
+            header: "Active",
+            cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
+        },
+        {
+            accessorKey: "isConfirmed",
+            header: "Confirmed",
+            cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
+        },
+        {
+            accessorKey: "birthDate",
+            header: "Birth Date",
+            cell: ({ getValue }) => dateToLocaleString(getValue() as string),
         },
         {
             accessorKey: "createdAt",
@@ -89,7 +132,7 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
             cell: ({ row }) => {
                 return (
                     <div>
-                        <Button className="bg-amber-400 text-black border-amber-400" variant="outline" size="sm" onClick={() => { router.push(`/build-types/update?uuid=${row.original.uuid}`) }}>
+                        <Button className="bg-amber-400 text-black border-amber-400" variant="outline" size="sm" onClick={() => { router.push(`/people/update?uuid=${row.original.uuid}`) }}>
                             <Pencil />
                         </Button>
                         <Button className="bg-red-700 text-white border-red-700 mx-4" variant="outline" size="sm" onClick={() => { deleteHandler(row.original.uuid || "") }}>

frontend/pages/people/add/table/data-table.tsx

@@ -71,6 +71,7 @@ import { getColumns, DraggableRow } from "./columns"
 import { useRouter } from "next/navigation"
 import { Home } from "lucide-react"
 import { useDeleteUserMutation } from "@/pages/users/queries"
+import { TableSkeleton } from "@/components/skeletons/tableSkeleton"
 
 export function PeopleDataTableAdd({
     data,
@@ -80,6 +81,7 @@ export function PeopleDataTableAdd({
     onPageChange,
     onPageSizeChange,
     refetchTable,
+    tableIsLoading
 }: {
     data: schemaType[],
     totalCount: number,
@@ -87,7 +89,8 @@ export function PeopleDataTableAdd({
     pageSize: number,
     onPageChange: (page: number) => void,
     onPageSizeChange: (size: number) => void,
-    refetchTable: () => void
+    refetchTable: () => void,
+    tableIsLoading: boolean
 }) {
 
     const router = useRouter();
@@ -100,7 +103,7 @@ export function PeopleDataTableAdd({
     const dataIds = React.useMemo<UniqueIdentifier[]>(() => data?.map(({ _id }) => _id) || [], [data])
 
     const deleteMutation = useDeleteUserMutation()
-    const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id }); setTimeout(() => { refetchTable() }, 400) }
+    const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id, refetchTable }) }
     const columns = getColumns(router, deleteHandler);
     const pagination = React.useMemo(() => ({ pageIndex: currentPage - 1, pageSize: pageSize, }), [currentPage, pageSize])
     const totalPages = Math.ceil(totalCount / pageSize)
@@ -201,11 +204,9 @@ export function PeopleDataTableAdd({
                                 ))}
                             </TableHeader>
                             <TableBody className="**:data-[slot=table-cell]:first:w-8">
-                                {table.getRowModel().rows?.length ? (<SortableContext items={dataIds} strategy={verticalListSortingStrategy} >
-                                    {table.getRowModel().rows.map((row) => <DraggableRow key={row.id} row={row} />)}
-                                </SortableContext>) : (
-                                    <TableRow><TableCell colSpan={columns.length} className="h-24 text-center">No results.</TableCell></TableRow>
-                                )}
+                                {tableIsLoading ?
+                                    <TableSkeleton columnCount={table.getAllColumns().length} rowCount={pageSize} hasActions={true} /> :
+                                    <SortableContext items={dataIds} strategy={verticalListSortingStrategy}>{table.getRowModel().rows.map(row => <DraggableRow key={row.id} row={row} />)}</SortableContext>}
                             </TableBody>
                         </Table>
                     </DndContext>