add table for list municipios

src/pages/master/municipios/MunicipiosContent.tsx

@@ -1,32 +1,14 @@
+import { DataGridInner } from '@/components';
 import { ManageMunicipiosProvider } from './hooks/ManageMunicipiosContext';
 import { useManageMunicipiosContext } from './hooks/useManageMunicipiosContext';
 
 const MunicipiosContent = () => {
-  const {
-    municipios,
-    getMunicipiosLists,
-    getMunicipiosByName,
-    createMunicipios,
-    deleteMunicipios,
-    updateMunicipios,
-    restoreMunicipios
-  } = useManageMunicipiosContext();
   return (
     <div>
       <h1>Municipios</h1>
-      <ul>
+      <div className="grid gap-5 lg:gap-7.5">
-        {/* {municipios.map((municipio) => (
+        <DataGridInner />
-          <li key={municipio.id}>
+      </div>
-            {municipio.name}
-            <button onClick={() => updateMunicipios(municipio.id, { name: 'Updated Name' })}>
-              Update
-            </button>
-            <button onClick={() => deleteMunicipios(municipio.id)}>Delete</button>
-            <button onClick={() => restoreMunicipios(municipio.id)}>Restore</button>
-          </li>
-        ))} */}
-      </ul>
-      <button onClick={() => createMunicipios({ name: 'New Municipio' })}>Create Municipio</button>
     </div>
   );
 };

src/pages/master/municipios/blocks/ListToolbar.tsx

@@ -0,0 +1,57 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext';
+import { Button } from '@/components/ui/button';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+  const { handleAddDialog } = useManageMunicipiosContext();
+
+  return (
+    <div className="card-header flex-wrap gap-2 border-b-0 px-5">
+      <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
+        <div className="flex justify-between w-full items-center">
+          <div className="flex w-[50%] gap-3 items-center">
+            <label className="input input-sm w-1/3">
+              <KeenIcon icon="magnifier" />
+              <input
+                type="text"
+                placeholder="Search users"
+                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                onChange={(event) =>
+                  table.getColumn('name')?.setFilterValue(event.target.value)
+                }
+              />
+            </label>
+            <DefaultTooltip title={'Filter'} placement={'top'}>
+              <Button
+                variant="outline"
+                className="h-7.5 disabled:bg-gray-400"
+                // disabled={isLoading}
+                // onClick={handleFilterData}
+              >
+                {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
+                <KeenIcon icon="filter" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+          <div className="flex gap-3 items-center">
+            <Button
+              variant="outline"
+              className="h-7.5 text-[0.8rem]"
+              onClick={() => handleAddDialog(true)}
+            >
+              Add Data
+            </Button>
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListToolbar;

src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx

@@ -1,20 +1,53 @@
+import { DataGridColumnHeader, DataGridProvider } from '@/components';
+import { Toaster } from '@/components/ui/sonner';
 import { apiConfig } from '@/config/api.config';
+import { ColumnDef } from '@tanstack/react-table';
 import axios from 'axios';
-import React, { createContext, useEffect, useState } from 'react';
+import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallApi } from '@/hooks';
+import ListToolbar from '../blocks/ListToolbar';
 
 interface MunicipiosProps {
   id: number;
   name: string;
 }
 
+interface ContextProps {
+  showEditDialog: boolean;
+  handleEditDialog: (show: boolean, selected_user: string | null) => void;
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  showDeleteDialog: boolean;
+  handleDeleteDialog: (show: boolean, selected_user: string | null) => void;
+  selectedMunicipios: string | null;
+  getMunicipiosLists: (
+    limit: number,
+    page: number,
+    with_deleted: boolean,
+    order_field: any,
+    order_direction: any
+  ) => Promise<{ data: MunicipiosProps[]; totalCount: number } | undefined>;
+}
+
+const initialProps: ContextProps = {
+  showEditDialog: false,
+  handleEditDialog: () => {},
+  showAddDialog: false,
+  handleAddDialog: () => {},
+  showDeleteDialog: false,
+  handleDeleteDialog: () => {},
+  selectedMunicipios: null,
+  getMunicipiosLists: async () => ({ data: [], totalCount: 0 })
+};
+
 interface MunicipiosContext {
   municipios: MunicipiosProps[];
   getMunicipiosLists: (
     limit: number,
     page: number,
     with_deleted: boolean,
-    order_field: string,
+    order_field: any,
-    order_direction: 'ASC' | 'DESC'
+    order_direction: any
   ) => Promise<void>;
   getMunicipiosByName: (name: string) => Promise<void>;
   createMunicipios: (data: Partial<MunicipiosProps>) => Promise<void>;
@@ -23,31 +56,72 @@ interface MunicipiosContext {
   restoreMunicipios: (id: number) => Promise<void>;
 }
 
-const ManageMunicipiosContext = createContext<MunicipiosContext | undefined>(undefined);
+const ManageMunicipiosContext = createContext<ContextProps>(initialProps);
 const API_URL = apiConfig.service_master_data;
 
 const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [selectedMunicipios, setSelectedMunicipios] = useState<string | null>(null);
   const [municipios, setMunicipios] = useState<MunicipiosProps[]>([]);
+  const { GetData } = useCallApi();
 
-  const getMunicipiosLists = async (
+  const handleAddDialog = useCallback((show: boolean) => {
-    limit: number,
+    setShowAddDialog(show);
-    page: number,
+  }, []);
-    with_deleted: boolean,
+
-    order_field: string,
+  const handleEditDialog = useCallback((show: boolean, selected_municipios: string | null) => {
-    order_direction: 'ASC' | 'DESC'
+    setSelectedMunicipios(show ? selected_municipios : null);
-  ) => {
+    setShowEditDialog(show);
+  }, []);
+
+  const handleDeleteDialog = useCallback((show: boolean, selected_municipios: string | null) => {
+    setSelectedMunicipios(show ? selected_municipios : null);
+    setShowDeleteDialog(show);
+  }, []);
+
+  const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+      {
+        accessorFn: (row) => row.id,
+        id: 'id',
+        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[100px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.name,
+        id: 'name',
+        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      }
+    ],
+    [handleEditDialog, handleDeleteDialog]
+  );
+
+  const getMunicipiosLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
       const response = await axios.get(`${API_URL}/municipios/list`, {
         params: {
-          limit: limit,
+          limit,
-          page: page,
+          page: 1,
-          with_deleted: with_deleted,
+          with_deleted: false,
-          order_field: order_field,
+          order_field: sorting[0].id,
-          order_direction: order_direction
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
         }
       });
-      setMunicipios(response.data);
+      console.log(response.data);
-      console.log(municipios);
+      return { data: response?.data.data.list, totalCount: response?.data.total_count };
     } catch (error) {
       console.error('Error fetching municipios', error);
     }
@@ -66,7 +140,7 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
   const createMunicipios = async (data: Partial<MunicipiosProps>) => {
     try {
       await axios.post(`${API_URL}/municipios/create`, data);
-      getMunicipiosLists(10, 1, false, 'name', 'ASC');
+      // getMunicipiosLists(10, 1, false, 'name', 'ASC');
     } catch (error) {
       console.error('Error creating municipios', error);
     }
@@ -75,7 +149,7 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
   const updateMunicipios = async (id: number, data: Partial<MunicipiosProps>) => {
     try {
       await axios.put(`${API_URL}/update/${id}`, data);
-      getMunicipiosLists(10, 1, false, 'name', 'ASC');
+      // getMunicipiosLists(10, 1, false, 'name', 'ASC');
     } catch (error) {
       console.error('Error updating municipios', error);
     }
@@ -84,7 +158,7 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
   const deleteMunicipios = async (id: number, hardDelete?: boolean) => {
     try {
       await axios.delete(`${API_URL}/delete/${id}/${hardDelete}`);
-      getMunicipiosLists(10, 1, false, 'name', 'ASC');
+      // getMunicipiosLists(10, 1, false, 'name', 'ASC');
     } catch (error) {
       console.error('Error deleting municipios', error);
     }
@@ -93,29 +167,44 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
   const restoreMunicipios = async (id: number) => {
     try {
       await axios.put(`${API_URL}/restore/${id}`);
-      getMunicipiosLists(10, 1, false, 'name', 'ASC');
+      // getMunicipiosLists(10, 1, false, 'name', 'ASC');
     } catch (error) {
       console.error('Error restoring municipios', error);
     }
   };
 
-  useEffect(() => {
+  // useEffect(() => {
-    getMunicipiosLists(10, 1, false, 'name', 'ASC');
+  //   getMunicipiosLists(10, 1, false, 'name', 'ASC');
-  }, []);
+  // }, []);
   console.log(municipios);
   return (
     <ManageMunicipiosContext.Provider
       value={{
-        municipios,
+        showAddDialog,
-        getMunicipiosLists,
+        handleAddDialog,
-        getMunicipiosByName,
+        showDeleteDialog,
-        createMunicipios,
+        handleDeleteDialog,
-        updateMunicipios,
+        showEditDialog,
-        deleteMunicipios,
+        handleEditDialog,
-        restoreMunicipios
+        selectedMunicipios,
+        getMunicipiosLists
       }}
     >
-      {children}
+      <Toaster expand visibleToasts={9} duration={3000} />
+
+      <DataGridProvider
+        columns={columns}
+        pagination={{ size: 10 }}
+        toolbar={<ListToolbar />}
+        layout={{ card: true }}
+        sorting={[{ id: 'id', desc: false }]}
+        serverSide={true}
+        onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+          getMunicipiosLists(pageIndex, pageSize, sorting, columnFilters)
+        }
+      >
+        {children}
+      </DataGridProvider>
     </ManageMunicipiosContext.Provider>
   );
 };