update table on manage group

src/pages/groups/Column.tsx

@@ -1,3 +1,4 @@
+import { KeenIcon } from '@/components';
 import { ColumnDef } from '@tanstack/react-table';
 
 export type Group = {
@@ -8,7 +9,7 @@ export type Group = {
   description: string;
 };
 
-export const columns: ColumnDef<Group>[] = [
+export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Group>[] => [
   {
     accessorKey: 'no',
     header: 'ID'
@@ -30,8 +31,19 @@ export const columns: ColumnDef<Group>[] = [
     accessorKey: 'description',
     header: 'Description'
   },
-  // {
-  //   id: 'actions',
-  //   header: 'Actions'
-  // }
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const dataMembers = row.original;
+
+      return (
+        <button
+          className="btn btn-sm btn-icon btn-clear btn-light"
+          onClick={() => handleUpdate(dataMembers)}
+        >
+          <KeenIcon icon="notepad-edit" />
+        </button>
+      );
+    }
+  }
 ];

src/pages/groups/ListToolbar.tsx

@@ -0,0 +1,49 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+
+const ListToolBar = ({ createGroup }: { createGroup: () => void }) => {
+  const { table, reload } = useDataGrid();
+
+  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={createGroup}>
+              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 { ListToolBar };

src/pages/groups/ManageGroups.tsx

@@ -1,5 +1,5 @@
 import { DataTable } from '@/components/ui/DataTable';
-import { columns, Group } from './Column';
+import { getColumns, Group } from './Column';
 import { apiConfig } from '@/config/api.config';
 import axios, { AxiosResponse } from 'axios';
 import { Helmet } from 'react-helmet';
@@ -24,6 +24,8 @@ import CloseIcon from '@mui/icons-material/Close';
 import Divider from '@mui/material/Divider';
 import ConfirmDialog from '@/components/confirm';
 import { toast } from 'sonner';
+import { Container, DataGridProvider } from '@/components';
+import { ListToolBar } from './ListToolbar';
 // import { DialogHeader } from '@/components/ui/dialog';
 // import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 const BASE_URL = apiConfig.service_customer;
@@ -89,9 +91,9 @@ const ManageGroups = () => {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!formData.groupName) return toast.warning(`Group name can not be empty!`)
-    if (!formData.status) return toast.warning(`Status can not be empty!`)
-    if (!formData.description) return toast.warning(`Description can not be empty!`)
+    if (!formData.groupName) return toast.warning(`Group name can not be empty!`);
+    if (!formData.status) return toast.warning(`Status can not be empty!`);
+    if (!formData.description) return toast.warning(`Description can not be empty!`);
     setIsDialogOpen(false);
     setDialogOpen(true);
   };
@@ -134,7 +136,7 @@ const ManageGroups = () => {
           description: formData.description,
           created_at: new Date()
         });
-        toast.success(`Success create group`)
+        toast.success(`Success create group`);
       } else if (dialogType === 'update') {
         await axios.put(`${BASE_URL}/groups/update/${formData.id}`, {
           name: formData.groupName,
@@ -142,14 +144,14 @@ const ManageGroups = () => {
           description: formData.description,
           updated_at: new Date()
         });
-        toast.success(`Success update group`)
+        toast.success(`Success update group`);
       } else if (dialogType === 'delete') {
         await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`);
-        toast.success(`Success delete group`)
+        toast.success(`Success delete group`);
       }
     } catch (error: any) {
       console.log(error);
-      toast.error(error.message)
+      toast.error(error.message);
     } finally {
       await fetchGroups();
       setDialogOpen(false);
@@ -162,19 +164,19 @@ const ManageGroups = () => {
       <Helmet>
         <title>TPAY | Manage Group</title>
       </Helmet>
-      <ConfirmDialog
-        open={dialogOpen}
-        onClose={() => setDialogOpen(false)}
-        title="Confirm Action"
-        content={
-          `Are you sure you want to ` +
-          (dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
-        }
-        onYes={handleYes}
-        onNo={() => setDialogOpen(false)}
-      />
-      <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Groups</h1>
-      <div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
+      <Container>
+        <ConfirmDialog
+          open={dialogOpen}
+          onClose={() => setDialogOpen(false)}
+          title="Confirm Action"
+          content={
+            `Are you sure you want to ` +
+            (dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
+          }
+          onYes={handleYes}
+          onNo={() => setDialogOpen(false)}
+        />
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Groups</h1>
         <Breadcrumbs>
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>
@@ -188,84 +190,101 @@ const ManageGroups = () => {
             <span className="text-sm">Manage Groups</span>
           </Link>
         </Breadcrumbs>
-      </div>
-      <div className="w-full overflow-x-auto px-4">
-        <DataTable
+        {/* <div className="w-full overflow-x-auto px-4"> */}
+        <div className="grid gap-5 lg:gap-7.5 mt-5">
+          {/* <DataTable
           data={dataGroup}
           columns={columns}
           createData={createGroup}
           onUpdate={handleUpdate}
           onDelete={null}
-        />
-      </div>
+          /> */}
+          <DataGridProvider
+            data={dataGroup}
+            columns={getColumns(handleUpdate)}
+            pagination={{ size: 25 }}
+            toolbar={<ListToolBar createGroup={createGroup} />}
+            layout={{ card: true }}
+            sorting={[{ id: 'created_at', desc: true }]}
+            serverSide={false}
+            onRowSelectionChange={(selected, table: any) => {
+              const selectedRow = table.getSelectedRowModel().rows[0];
+              if (selectedRow) handleUpdate(selectedRow.original);
+            }}
+          />
+        </div>
+        {/* </div> */}
 
-      <Dialog open={isDialogOpen} onClose={closeDialog}>
-        <DialogContent className="w-full">
-          <div className="flex justify-between">
-            <DialogTitle>{dialogType==='create'?"Create New Group":"Update Group"}</DialogTitle>
-            <Box display="flex" justifyContent="flex-end">
-              <Button
-                variant="outlined"
-                sx={{ borderColor: 'white', color: 'grey' }}
-                onClick={closeDialog}
-              >
-                <CloseIcon />
-              </Button>
-            </Box>
-          </div>
-          <Divider />
-          <div className="p-5 mt-5">
-            <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
-              <div className="grid grid-cols-4 items-center gap-4 w-full">
-                <label className="form-label text-sm">
-                  <span className="text-red-500">*</span>Group Name:
-                </label>
-                <input
-                  type="text"
-                  name="groupName"
-                  className="input w-full col-span-3"
-                  value={formData.groupName}
-                  onChange={handleChange}
-                />
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4 w-full">
-                <label className="form-label text-sm">
-                  <span className="text-red-500">*</span>Active Status:
-                </label>
-                <FormControl>
-                  <RadioGroup name="status" row value={formData.status} onChange={handleChange}>
-                    <FormControlLabel
-                      value="Y"
-                      checked={formData.status === 'Y'}
-                      control={<Radio />}
-                      label="Yes"
-                    />
-                    <FormControlLabel
-                      value="N"
-                      checked={formData.status === 'N'}
-                      control={<Radio />}
-                      label="No"
-                    />
-                  </RadioGroup>
-                </FormControl>
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4 w-full">
-                <label className="form-label text-sm">
-                  <span className="text-red-500">*</span>Description:
-                </label>
-                <input
-                  type="text"
-                  name="description"
-                  className="input w-full col-span-3"
-                  value={formData.description}
-                  onChange={handleChange}
-                />
-              </div>
-              <Button type="submit">Submit</Button>
-            </form>
-          </div>
-        </DialogContent>
-      </Dialog>
+        <Dialog open={isDialogOpen} onClose={closeDialog}>
+          <DialogContent className="w-full">
+            <div className="flex justify-between">
+              <DialogTitle>
+                {dialogType === 'create' ? 'Create New Group' : 'Update Group'}
+              </DialogTitle>
+              <Box display="flex" justifyContent="flex-end">
+                <Button
+                  variant="outlined"
+                  sx={{ borderColor: 'white', color: 'grey' }}
+                  onClick={closeDialog}
+                >
+                  <CloseIcon />
+                </Button>
+              </Box>
+            </div>
+            <Divider />
+            <div className="p-5 mt-5">
+              <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
+                <div className="grid grid-cols-4 items-center gap-4 w-full">
+                  <label className="form-label text-sm">
+                    <span className="text-red-500">*</span>Group Name:
+                  </label>
+                  <input
+                    type="text"
+                    name="groupName"
+                    className="input w-full col-span-3"
+                    value={formData.groupName}
+                    onChange={handleChange}
+                  />
+                </div>
+                <div className="grid grid-cols-4 items-center gap-4 w-full">
+                  <label className="form-label text-sm">
+                    <span className="text-red-500">*</span>Active Status:
+                  </label>
+                  <FormControl>
+                    <RadioGroup name="status" row value={formData.status} onChange={handleChange}>
+                      <FormControlLabel
+                        value="Y"
+                        checked={formData.status === 'Y'}
+                        control={<Radio />}
+                        label="Yes"
+                      />
+                      <FormControlLabel
+                        value="N"
+                        checked={formData.status === 'N'}
+                        control={<Radio />}
+                        label="No"
+                      />
+                    </RadioGroup>
+                  </FormControl>
+                </div>
+                <div className="grid grid-cols-4 items-center gap-4 w-full">
+                  <label className="form-label text-sm">
+                    <span className="text-red-500">*</span>Description:
+                  </label>
+                  <input
+                    type="text"
+                    name="description"
+                    className="input w-full col-span-3"
+                    value={formData.description}
+                    onChange={handleChange}
+                  />
+                </div>
+                <Button type="submit">Submit</Button>
+              </form>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </Container>
     </>
   );
 };