member and kyc

src/components/ui/DataTable.tsx

@@ -43,10 +43,10 @@ interface DataTableProps<TData, TValue> {
 export function DataTable<TData, TValue>({
   columns,
   data,
-  createGroup,
+  createData,
   onUpdate,
   onDelete
-}: DataTableProps<TData, TValue> & { createGroup?: () => void }) {
+}: DataTableProps<TData, TValue> & { createData?: () => void }) {
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [sorting, setSorting] = useState<SortingState>([]);
 
@@ -74,12 +74,7 @@ export function DataTable<TData, TValue>({
           onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
           className="max-w-sm"
         />
-
+        {/* <Button onClick={createData} variant="outline" className="h-7.5 text-[0.8rem]">Add Data</Button> */}
-        {createGroup && (
-          <Button variant="outline" onClick={createGroup}>
-            Create Group
-          </Button>
-        )}
       </div>
       <div className="rounded-md border">
         <Table>

src/pages/groups/ManageGroups.tsx

@@ -145,7 +145,7 @@ const ManageGroups = () => {
         onNo={() => setDialogOpen(false)}
       />
         <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Groups</h1>
-        <DataTable data={dataGroup} columns={columns} createGroup={createGroup} onUpdate={handleUpdate} onDelete={handleDelete} />
+        <DataTable data={dataGroup} columns={columns} createData={createGroup} onUpdate={handleUpdate} onDelete={handleDelete} />
         <Dialog open={isDialogOpen} onClose={closeDialog}>
           <DialogContent className="w-[600px]">
             <div className="flex justify-between">

src/pages/members/kyc/Kyc.tsx

@@ -87,8 +87,8 @@ const Kyc = () => {
   }
 
   const handleYes = async () => {
-    let userLogin: any = await getUser();
+    const userLogin: any = await getUser();
-    let updateData: any = member;
+    const updateData: any = member;
     const customerId = member.id;
     updateData.updated_by = userLogin.data ? userLogin.data.id : ''
     let today = new Date();
@@ -100,6 +100,8 @@ const Kyc = () => {
     delete updateData.latitude;
     delete updateData.created_at;
     delete updateData.no;
+    delete updateData.destinationGroup;
+    delete updateData.statusApproval;
     delete updateData.group_id;
     delete updateData.group_name;
     delete updateData.group_description;
@@ -140,7 +142,7 @@ const Kyc = () => {
           onNo={() => setDialogOpen(false)}
         />
         <CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleReject={handleReject}
-        handleSubmit={handleSubmit} initialData={member} viewStats={true}/>
+        handleSubmit={handleSubmit} initialData={member} viewStats={true} page={"kyc"}/>
         <h1 className="text-xl font-medium leading-none text-gray-900 mb-7">Manage Member KYC</h1>
         <DataTable data={members} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
       </div>

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import axios from 'axios';
 import {
   Dialog,
   DialogActions,
@@ -14,21 +15,114 @@ import {
 } from "@mui/material";
 import Divider from '@mui/material/Divider';
 import { initialMember } from "./Columns";
+import { apiConfig } from '@/config/api.config';
+const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
 
-const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject }: any) => {
+const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject, page }: any) => {
   const [formData, setFormData] = useState(initialData || initialMember);
   const [viewOnly, setViewOnly] = useState(viewStats || false);
+  const [municipios, setMunicipios] = useState([]);
+  const [aldeias, setAldeias] = useState([]);
+  const [postoAdm, setPostoAdm] = useState([]);
+  const [sucos, setSucos] = useState([]);
 
   useEffect(() => {
     setFormData(initialData || {}); // Sync formData when initialData changes
+    fetchMasterData()
   }, [initialData]);
 
+  async function fetchMasterData() {
+    try {
+      let getMunicipios = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/list`, {
+        params: {
+          limit: 50,
+          page: 1,
+          with_deleted: false,
+          order_field: 'name',
+          order_direction: 'ASC',
+        }
+      });
+      setMunicipios(getMunicipios.data.data.list)
+      let getPostoAdms = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/list`, {
+        params: {
+          limit: 50,
+          page: 1,
+          with_deleted: false,
+          order_field: 'name',
+          order_direction: 'ASC',
+        }
+      });
+      setPostoAdm(getPostoAdms.data.data.list)
+      let getSucos = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/list`, {
+        params: {
+          limit: 50,
+          page: 1,
+          with_deleted: false,
+          order_field: 'name',
+          order_direction: 'ASC',
+        }
+      });
+      setSucos(getSucos.data.data.list)
+      let getAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/aldeias/list`, {
+        params: {
+          limit: 50,
+          page: 1,
+          with_deleted: false,
+          order_field: 'name',
+          order_direction: 'ASC',
+        }
+      });
+      setAldeias(getAldeias.data.data.list)
+    } catch (error) {
+      console.log(error);
+    }
+  }
 
-  const handleChange = (e: any) => {
+  const handleChange = async (e: any) => {
     const { name, value } = e.target;
+    if (name === 'municipio' || name === 'posto_adms' || name === 'suco') await getMasterAfter(name, value);
     setFormData({ ...formData, [name]: value });
   };
 
+  async function getMasterAfter(name: string, id: any) {
+    if (name === 'municipio') {
+      let getMunicipiosPosto = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/postoadms/${id}`, {
+        params: {
+          limit: 50,
+          page: 1,
+          with_deleted: false,
+          order_field: 'name',
+          order_direction: 'ASC',
+        }
+      });
+      setPostoAdm(getMunicipiosPosto.data.data)
+    }
+    if (name === 'posto_adms') {
+      let getPostoSuco = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/sucos/${id}`, {
+        params: {
+          limit: 50,
+          page: 1,
+          with_deleted: false,
+          order_field: 'name',
+          order_direction: 'ASC',
+        }
+      });
+      setSucos(getPostoSuco.data.data)
+    }
+    if (name === 'suco') {
+      let getSucoAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/aldeias/${id}`, {
+        params: {
+          limit: 50,
+          page: 1,
+          with_deleted: false,
+          order_field: 'name',
+          order_direction: 'ASC',
+        }
+      });
+      setAldeias(getSucoAldeias.data.data)
+    }
+  }
+
   const onSubmit = () => {
     handleSubmit(formData);
     handleClose();
@@ -102,32 +196,44 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
         <FormControl fullWidth margin="dense">
           <InputLabel>Municipio</InputLabel>
           <Select disabled={viewOnly} name="municipio" value={formData.municipio} onChange={handleChange}>
-            <MenuItem value="municipio1">Municipio 1</MenuItem>
+            {
-            <MenuItem value="municipio2">Municipio 2</MenuItem>
+              municipios ? municipios.map((el: any) => (
+                <MenuItem key={el.id} value={el.id}>{el.name}</MenuItem>
+              )) : ""
+            }
           </Select>
         </FormControl>
         
         <FormControl fullWidth margin="dense">
           <InputLabel>Posto</InputLabel>
-          <Select disabled={viewOnly} name="posto_adms" value={formData.posto_adms} onChange={handleChange}>
+          <Select disabled={viewOnly || !formData.municipio} name="posto_adms" value={formData.posto_adms} onChange={handleChange}>
-            <MenuItem value="posto1">Posto 1</MenuItem>
+            {
-            <MenuItem value="posto2">Posto 2</MenuItem>
+              postoAdm ? postoAdm.map((el: any) => (
+                <MenuItem key={el.posto_adms_id || el.id} value={el.posto_adms_id || el.id}>{el.posto_adms_name || el.name}</MenuItem>
+              )) : ""
+            }
           </Select>
         </FormControl>
 
         <FormControl fullWidth margin="dense">
           <InputLabel>Suco</InputLabel>
-          <Select disabled={viewOnly} name="suco" value={formData.suco} onChange={handleChange}>
+          <Select disabled={viewOnly || !formData.posto_adms} name="suco" value={formData.suco} onChange={handleChange}>
-            <MenuItem value="posto1">suco 1</MenuItem>
+            {
-            <MenuItem value="posto2">suco 2</MenuItem>
+              sucos ? sucos.map((el: any) => (
+                <MenuItem key={el.sucos_id || el.id} value={el.sucos_id || el.id}>{el.sucos_name || el.name}</MenuItem>
+              )) : ""
+            }
           </Select>
         </FormControl>
 
         <FormControl fullWidth margin="dense">
           <InputLabel>Aldeia</InputLabel>
-          <Select disabled={viewOnly} name="aldeia" value={formData.aldeia} onChange={handleChange}>
+          <Select disabled={viewOnly || !formData.suco} name="aldeia" value={formData.aldeia} onChange={handleChange}>
-            <MenuItem value="posto1">aldeia 1</MenuItem>
+            {
-            <MenuItem value="posto2">aldeia 2</MenuItem>
+              aldeias ? aldeias.map((el: any) => (
+                <MenuItem key={el.id} value={el.id}>{el.name}</MenuItem>
+              )) : ""
+            }
           </Select>
         </FormControl>
 
@@ -141,12 +247,12 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
         <Button onClick={() => viewOnly ? setViewOnly(false) : setViewOnly(true)} color="secondary">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
         <Button onClick={handleClose} color="secondary">Cancel</Button>
         {
-          formData.isneedapproval == 1 ? (
+          formData.isneedapproval == 1 && page === 'kyc' ? (
             <Button onClick={onReject} color="warning" variant="contained">Reject</Button>
           ) : ('')
         }
         <Button onClick={onSubmit} color="primary" variant="contained">
-          { formData.isneedapproval == 1 ? (`Edit & Approve`) : (`Edit`) }
+          { formData.id ? (formData.isneedapproval == 1 && page === 'kyc' ? (`Edit & Approve`) : (`Edit`)) : ("Create") }
         </Button>
       </DialogActions>
     </Dialog>

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

@@ -6,9 +6,11 @@ import axios from 'axios';
 import CustomerDialog from './CustomerDetailModal';
 import ConfirmDialog from '@/components/confirm';
 import { useAuthContext } from '@/auth';
+import { ScreenLoader } from '@/components';
 const BASE_URL = apiConfig.service_customer;
 
 const ManageMembers = () => {
+  const [loading, setLoading] = useState(false);
   const [members, setMembers] = useState([]);
   const [member, setMember] = useState(initialMember);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -18,7 +20,9 @@ const ManageMembers = () => {
   const { getUser } = useAuthContext();
 
   useEffect(() => {
+    setLoading(true)
     fetchGroups()
+    setLoading(false)
   }, []);
 
   async function fetchGroups() {
@@ -46,20 +50,26 @@ const ManageMembers = () => {
   }
 
   const handleUpdate = (data: any) => {
+    setDialogType('update');
     setMember(data)
     setIsDialogOpen(true)
   }
 
+  function createMember() {
+    setDialogType('create');
+    setMember(initialMember);
+    setIsDialogOpen(true);
+  }
+
   async function handleSubmit(data: any) {
-    setDialogType('update')
     setMember(data)
     setDialogOpen(true)
   }
 
   const handleYes = async () => {
-    let userLogin: any = await getUser();
+    const userLogin: any = await getUser();
-    let updateData: any = member;
+    const updateData: any = member;
-    let customerId = member.id;
+    const customerId = member.id;
     updateData.updated_by = userLogin.data ? userLogin.data.id : ''
     let today = new Date();
     updateData.updated_at = today.toString();
@@ -70,6 +80,8 @@ const ManageMembers = () => {
     delete updateData.latitude;
     delete updateData.created_at;
     delete updateData.no;
+    delete updateData.destinationGroup;
+    delete updateData.statusApproval;
     delete updateData.group_id;
     delete updateData.group_name;
     delete updateData.group_description;
@@ -81,15 +93,20 @@ const ManageMembers = () => {
     delete updateData.group_deleted_by;
     delete updateData.group_deleted_at;
     try {
-      await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData)
+      if (dialogType === 'update') await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData)
+      // if (dialogType === 'create') await axios.post(`${BASE_URL}/customers/create`, member)
       await fetchGroups();
+      setDialogOpen(false)
       setIsDialogOpen(false)
     } catch (error: any) {
       alert(error.message)
+      setDialogOpen(false)
       setIsDialogOpen(false)
     }
   }
 
+  if (loading) return (<ScreenLoader/>)
+
   return (
     <div>
       <div className="container mx-auto p-5">
@@ -97,13 +114,13 @@ const ManageMembers = () => {
         open={dialogOpen}
         onClose={() => setDialogOpen(false)}
         title="Confirm Action"
-        content={`Are you sure you want to `+( dialogType === 'create' ? "create?" : ( dialogType === 'update' ? "update?" : "delete?"))}
+        content={`Are you sure you want to ${dialogType}?`}
         onYes={handleYes}
         onNo={() => setDialogOpen(false)}
       />
         <CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleSubmit={handleSubmit} initialData={member}/>
         <h1 className="text-xl font-medium leading-none text-gray-900">Manage Members</h1>
-        <DataTable data={members} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
+        <DataTable data={members} createData={createMember} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
       </div>
     </div>
   );