member kyc

.gitignore

@@ -23,3 +23,4 @@ dist-ssr
 *.sln
 *.sw?
 **/src/*.js
+yarn.lock

src/components/ui/DataTable.tsx

@@ -23,13 +23,14 @@ import {
 import { useState } from 'react';
 import { Input } from './input';
 import { Button } from './button';
+import { KeenIcon } from '@/components';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger
+  DialogTrigger,
 } from './dialog';
 
 interface DataTableProps<TData, TValue> {
@@ -109,18 +110,18 @@ export function DataTable<TData, TValue>({
                   ))}
                   <TableCell>
                     <div className="space-x-2">
-                      <Button
+                      <button
-                        className="bg-blue-500 text-white px-2 py-1 rounded"
+                        className="btn btn-sm btn-icon btn-clear btn-light"
                         onClick={() => onUpdate(row.original)}>
-                        Update
+                        <KeenIcon icon="notepad-edit" />
-                      </Button>
+                      </button>
                       {
                         onDelete ? (
-                          <Button
+                          <button
-                            className="bg-red-500 text-white px-2 py-1 rounded"
+                          className="btn btn-sm btn-icon btn-clear btn-light"
                           onClick={() => onDelete(row.original)}>
-                            Delete
+                          <KeenIcon icon="trash" />
-                          </Button>
+                        </button>
                         ) : ('')
                       }
                     </div>

src/pages/groups/Column.tsx

@@ -1,8 +1,8 @@
 import { ColumnDef } from '@tanstack/react-table';
 
 export type Group = {
-  id: number;
+  no: number;
-  createdDate: Date;
+  created_at: Date;
   name: string;
   status: string;
   description: string;
@@ -10,13 +10,13 @@ export type Group = {
 
 export const columns: ColumnDef<Group>[] = [
   {
-    accessorKey: 'id',
+    accessorKey: 'no',
     header: 'ID'
   },
   {
-    accessorKey: 'createdDate',
+    accessorKey: 'created_at',
     header: 'Created Date',
-    cell: ({ row }) => new Date(row.original.createdDate).toLocaleDateString()
+    cell: ({ row }) => new Date(row.original.created_at).toLocaleDateString()
   },
   {
     accessorKey: 'name',

src/pages/groups/ManageGroups.tsx

@@ -47,7 +47,12 @@ const ManageGroups = () => {
           order_direction: 'ASC'
         }
       });
-      setDataGroup(groups.data.data.list)
+      let temp = 1
+      let resGroups = groups.data.data.list.map((el: any) => {
+        el.no = temp++
+        return el
+      })
+      setDataGroup(resGroups)
     } catch (error: any) {
       alert(error.message)
       console.log(error);

src/pages/members/kyc/Kyc.tsx

@@ -1,7 +1,14 @@
 import { DataGridInner, TDataGridProps } from '@/components';
+import { DataTable } from '@/components/ui/DataTable';
 import { Table } from '@tanstack/react-table';
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useState, useEffect } from 'react';
 import { ManageKycContextProvider } from './hooks';
+import { columns, initialMember } from '../manage-members/Columns';
+import { useAuthContext } from '@/auth';
+import { apiConfig } from '@/config/api.config';
+import axios from 'axios';
+const BASE_URL = apiConfig.service_customer;
+import CustomerDialog from '../manage-members/CustomerDetailModal';
 
 export interface IDataGridContextProps<TData extends object> {
   props: TDataGridProps<TData>;
@@ -24,16 +31,100 @@ export const useDataGrid = () => {
 
 const Kyc = () => {
   const [loading, setLoading] = useState(false);
+  const [members, setMembers] = useState([]);
+  const [member, setMember] = useState(initialMember);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogType, setDialogType] = useState('');
+  const closeDialog = () => setIsDialogOpen(false);
+  const { getUser } = useAuthContext();
+
+  useEffect(() => {
+    fetchGroups()
+  }, []);
+
+  async function fetchGroups() {
+    try {
+      let groups = await axios.get(`${BASE_URL}/customer/list`, {
+        params: {
+          limit: 10,
+          page: 1,
+          with_deleted: false,
+          order_field: 'fullname',
+          order_direction: 'ASC',
+          // type: "Reguler"
+        }
+      });
+      let temp = 1
+      let resMembers = groups.data.data.list.map((el: any) => {
+        el.no = temp++
+        el.name = el.fullname
+        return el
+      })
+      setMembers(resMembers)
+    } catch (error: any) {
+      alert(error.message)
+      console.log(error);
+    }
+  }
+  
+  const handleUpdate = (data: any) => {
+    setMember(data)
+    setIsDialogOpen(true)
+  }
+
+  async function handleSubmit(data: any) {
+    setDialogType('update')
+    setMember(data)
+    setDialogOpen(true)
+  }
+
+  const handleYes = async () => {
+    let userLogin: any = await getUser();
+    let updateData: any = member;
+    let customerId = member.id;
+    updateData.updated_by = userLogin.data ? userLogin.data.id : ''
+    let today = new Date();
+    updateData.updated_at = today.toString();
+    delete updateData.id;
+    delete updateData.pin;
+    delete updateData.name;
+    delete updateData.longitude;
+    delete updateData.latitude;
+    delete updateData.created_at;
+    delete updateData.no;
+    delete updateData.group_id;
+    delete updateData.group_name;
+    delete updateData.group_description;
+    delete updateData.group_status;
+    delete updateData.group_created_by;
+    delete updateData.group_created_at;
+    delete updateData.group_updated_by;
+    delete updateData.group_updated_at;
+    delete updateData.group_deleted_by;
+    delete updateData.group_deleted_at;
+    try {
+      await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData)
+      await fetchGroups();
+      setIsDialogOpen(false)
+    } catch (error: any) {
+      alert(error.message)
+      setIsDialogOpen(false)
+    }
+  }
 
   return (
     <div>
       <div className="container mx-auto py-5">
+        <CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleSubmit={handleSubmit} initialData={member} viewStats={true}/>
         <h1 className="text-xl font-medium leading-none text-gray-900 mb-7">Manage Member KYC</h1>
-        <ManageKycContextProvider>
+        <DataTable data={members} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
+        
+        {/* <ManageKycContextProvider>
           <div className="grid gap-5 lg:gap-7.5">
             <DataGridInner />
           </div>
-        </ManageKycContextProvider>
+        </ManageKycContextProvider> */}
       </div>
     </div>
   );

src/pages/members/manage-members/Columns.tsx

@@ -61,6 +61,20 @@ export const columns: ColumnDef<Members>[] = [
       );
     }
   },
+  {
+    accessorKey: 'group_name',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Group
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
   {
     accessorKey: 'email',
     header: ({ column }) => {

src/pages/members/manage-members/CustomerDetailModal.tsx

@@ -15,8 +15,9 @@ import {
 import Divider from '@mui/material/Divider';
 import { initialMember } from "./Columns";
 
-const CustomerDialog = ({ open, handleClose, handleSubmit, initialData }: any) => {
+const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats }: any) => {
   const [formData, setFormData] = useState(initialData || initialMember);
+  const [viewOnly, setViewOnly] = useState(viewStats || false);
 
   useEffect(() => {
     setFormData(initialData || {}); // Sync formData when initialData changes
@@ -42,36 +43,37 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData }: any) =
 
   return (
     <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
-    <DialogTitle>Customer Form</DialogTitle>
+    <DialogTitle>Customer Form ({viewStats ? 'View' : 'Edit'})</DialogTitle>
     <DialogContent>
     <div className="flex justify-between">
       <Typography sx={{color:'grey'}}>Customer Data</Typography>
       <Typography sx={{color:'grey'}} display="flex" justifyContent="flex-end">Created: {generateDate(formData.created_at, 'datetime')}</Typography>
     </div>
-      <TextField fullWidth margin="dense" label="Full Name" name="fullname" value={formData.fullname} onChange={handleChange} />
+      <TextField disabled={viewOnly} fullWidth margin="dense" label="Full Name" name="fullname" value={formData.fullname} onChange={handleChange} />
-      <TextField fullWidth margin="dense" label="Email" name="email" value={formData.email} onChange={handleChange} />
+      <TextField disabled={viewOnly} fullWidth margin="dense" label="Email" name="email" value={formData.email} onChange={handleChange} />
-      <TextField type="file" fullWidth margin="dense" label="Photo" name="photouser" value={formData.photouser} onChange={handleChange} />
+      <TextField disabled fullWidth margin="dense" label="Group" name="group" value={formData.group_name} onChange={handleChange} />
-      <TextField fullWidth margin="dense" label="Username" name="username" value={formData.username} onChange={handleChange} />
+      <TextField disabled={viewOnly} type="file" fullWidth margin="dense" label="Photo" name="photouser" value={formData.photouser} onChange={handleChange} />
-      <TextField fullWidth margin="dense" label="MSISDN" name="msisdn" value={formData.msisdn} onChange={handleChange} />
+      <TextField disabled={viewOnly} fullWidth margin="dense" label="Username" name="username" value={formData.username} onChange={handleChange} />
-      <TextField fullWidth margin="dense" label="Address" name="address" value={formData.address} onChange={handleChange} />
+      <TextField disabled={viewOnly} fullWidth margin="dense" label="MSISDN" name="msisdn" value={formData.msisdn} onChange={handleChange} />
-      <TextField fullWidth margin="dense" label="Nationality" name="nationality" value={formData.nationality} onChange={handleChange} />
+      <TextField disabled={viewOnly} fullWidth margin="dense" label="Address" name="address" value={formData.address} onChange={handleChange} />
-      <TextField fullWidth margin="dense" label="Date of Birth" name="date_birth" type="date" value={generateDate(formData.date_birth, null)} onChange={handleChange} InputLabelProps={{ shrink: true }} />
+      <TextField disabled={viewOnly} fullWidth margin="dense" label="Nationality" name="nationality" value={formData.nationality} onChange={handleChange} />
+      <TextField disabled={viewOnly} fullWidth margin="dense" label="Date of Birth" name="date_birth" type="date" value={generateDate(formData.date_birth, null)} onChange={handleChange} InputLabelProps={{ shrink: true }} />
       <FormControl fullWidth margin="dense">
         <InputLabel>Gender</InputLabel>
-        <Select name="gender" value={formData.gender} onChange={handleChange}>
+        <Select disabled={viewOnly} name="gender" value={formData.gender} onChange={handleChange}>
           <MenuItem value="M">Male</MenuItem>
           <MenuItem value="F">Female</MenuItem>
         </Select>
       </FormControl>
-      <TextField fullWidth margin="dense" label="Identity Type" name="identity_type" value={formData.identity_type} onChange={handleChange} />
+      <TextField disabled={viewOnly} fullWidth margin="dense" label="Identity Type" name="identity_type" value={formData.identity_type} onChange={handleChange} />
-      <TextField fullWidth margin="dense" label="Identity Number" name="identity_number" value={formData.identity_number} onChange={handleChange} />
+      <TextField disabled={viewOnly} fullWidth margin="dense" label="Identity Number" name="identity_number" value={formData.identity_number} onChange={handleChange} />
-      <TextField type="number" fullWidth margin="dense" label="License Number" name="license_number" value={formData.license_number} onChange={handleChange} />
+      <TextField disabled={viewOnly} type="number" fullWidth margin="dense" label="License Number" name="license_number" value={formData.license_number} onChange={handleChange} />
-      <TextField fullWidth margin="dense" label="Profession" name="profession" value={formData.profession} onChange={handleChange} />
+      <TextField disabled={viewOnly} fullWidth margin="dense" label="Profession" name="profession" value={formData.profession} onChange={handleChange} />
       {/* <TextField fullWidth margin="dense" label="Password" name="password" type="password" value={formData.password} onChange={handleChange} /> */}
       {/* <TextField fullWidth margin="dense" label="PIN" name="pin" value={formData.pin} onChange={handleChange} /> */}
       <FormControl fullWidth margin="dense">
         <InputLabel>Status</InputLabel>
-        <Select name="status" value={formData.status} onChange={handleChange}>
+        <Select disabled={viewOnly} name="status" value={formData.status} onChange={handleChange}>
           <MenuItem value="Y">Active</MenuItem>
           <MenuItem value="N">Inactive</MenuItem>
         </Select>
@@ -79,7 +81,7 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData }: any) =
       
       <FormControl fullWidth margin="dense">
         <InputLabel>Municipio</InputLabel>
-        <Select name="municipio" value={formData.municipio} onChange={handleChange}>
+        <Select disabled={viewOnly} name="municipio" value={formData.municipio} onChange={handleChange}>
           <MenuItem value="municipio1">Municipio 1</MenuItem>
           <MenuItem value="municipio2">Municipio 2</MenuItem>
         </Select>
@@ -87,7 +89,7 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData }: any) =
       
       <FormControl fullWidth margin="dense">
         <InputLabel>Posto</InputLabel>
-        <Select name="posto_adms" value={formData.posto_adms} onChange={handleChange}>
+        <Select disabled={viewOnly} name="posto_adms" value={formData.posto_adms} onChange={handleChange}>
           <MenuItem value="posto1">Posto 1</MenuItem>
           <MenuItem value="posto2">Posto 2</MenuItem>
         </Select>
@@ -95,7 +97,7 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData }: any) =
 
       <FormControl fullWidth margin="dense">
         <InputLabel>Suco</InputLabel>
-        <Select name="suco" value={formData.suco} onChange={handleChange}>
+        <Select disabled={viewOnly} name="suco" value={formData.suco} onChange={handleChange}>
           <MenuItem value="posto1">suco 1</MenuItem>
           <MenuItem value="posto2">suco 2</MenuItem>
         </Select>
@@ -103,7 +105,7 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData }: any) =
 
       <FormControl fullWidth margin="dense">
         <InputLabel>Aldeia</InputLabel>
-        <Select name="aldeia" value={formData.aldeia} onChange={handleChange}>
+        <Select disabled={viewOnly} name="aldeia" value={formData.aldeia} onChange={handleChange}>
           <MenuItem value="posto1">aldeia 1</MenuItem>
           <MenuItem value="posto2">aldeia 2</MenuItem>
         </Select>
@@ -111,9 +113,9 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData }: any) =
       
       <Divider className="pt-7"/>
       <Typography sx={{color:'grey'}}>Bank</Typography>
-      <TextField fullWidth margin="dense" label="Bank Name" name="bank_name" value={formData.bank_name} onChange={handleChange} />
+      <TextField disabled={viewOnly} fullWidth margin="dense" label="Bank Name" name="bank_name" value={formData.bank_name} onChange={handleChange} />
-      <TextField fullWidth margin="dense" label="Bank Account" name="bank_account" value={formData.bank_account} onChange={handleChange} />
+      <TextField disabled={viewOnly} fullWidth margin="dense" label="Bank Account" name="bank_account" value={formData.bank_account} onChange={handleChange} />
-      <TextField fullWidth margin="dense" label="iBank Number" name="ibank_number" value={formData.ibank_number} onChange={handleChange} />
+      <TextField disabled={viewOnly} fullWidth margin="dense" label="iBank Number" name="ibank_number" value={formData.ibank_number} onChange={handleChange} />
     </DialogContent>
     <DialogActions>
       <Button onClick={handleClose} color="secondary">Cancel</Button>

src/pages/members/manage-members/ManageMembers.tsx

@@ -1,11 +1,11 @@
 import { DataTable } from '@/components/ui/DataTable';
 import { apiConfig } from '@/config/api.config';
-import { columns, Members } from './Columns';
+import { columns, Members, initialMember } from './Columns';
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 import CustomerDialog from './CustomerDetailModal';
-import { initialMember } from "./Columns";
 import ConfirmDialog from '@/components/confirm';
+import { useAuthContext } from '@/auth';
 const BASE_URL = apiConfig.service_customer;
 
 const ManageMembers = () => {
@@ -15,6 +15,7 @@ const ManageMembers = () => {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
   const closeDialog = () => setIsDialogOpen(false);
+  const { getUser } = useAuthContext();
 
   useEffect(() => {
     fetchGroups()
@@ -29,16 +30,16 @@ const ManageMembers = () => {
           with_deleted: false,
           order_field: 'fullname',
           order_direction: 'ASC',
-          // type: "Reguler"
+          type: "Reguler"
         }
       });
       let temp = 1
-      let resGroups = groups.data.data.list.map((el: any) => {
+      let resMembers = groups.data.data.list.map((el: any) => {
         el.no = temp++
         el.name = el.fullname
         return el
       })
-      setMembers(resGroups)
+      setMembers(resMembers)
     } catch (error: any) {
       alert(error.message)
       console.log(error);
@@ -46,21 +47,43 @@ const ManageMembers = () => {
   }
 
   const handleUpdate = (data: any) => {
-    console.log(data);
     setMember(data)
     setIsDialogOpen(true)
   }
 
   async function handleSubmit(data: any) {
     setDialogType('update')
-    console.log(data);
     setMember(data)
     setDialogOpen(true)
   }
 
   const handleYes = async () => {
+    let userLogin: any = await getUser();
+    let updateData: any = member;
+    let customerId = member.id;
+    updateData.updated_by = userLogin.data ? userLogin.data.id : ''
+    let today = new Date();
+    updateData.updated_at = today.toString();
+    delete updateData.id;
+    delete updateData.pin;
+    delete updateData.name;
+    delete updateData.longitude;
+    delete updateData.latitude;
+    delete updateData.created_at;
+    delete updateData.no;
+    delete updateData.group_id;
+    delete updateData.group_name;
+    delete updateData.group_description;
+    delete updateData.group_status;
+    delete updateData.group_created_by;
+    delete updateData.group_created_at;
+    delete updateData.group_updated_by;
+    delete updateData.group_updated_at;
+    delete updateData.group_deleted_by;
+    delete updateData.group_deleted_at;
     try {
-      await axios.put(`${BASE_URL}/customer/update/${member.id}`, member)
+      await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData)
+      await fetchGroups();
       setIsDialogOpen(false)
     } catch (error: any) {
       alert(error.message)