menu crud

src/pages/members/kyc/Kyc.tsx

@@ -8,6 +8,7 @@ import { useAuthContext } from '@/auth';
 import { apiConfig } from '@/config/api.config';
 import ConfirmDialog from '@/components/confirm';
 import axios from 'axios';
+import { toast } from 'sonner';
 const BASE_URL = apiConfig.service_customer;
 import CustomerDialog from '../manage-members/CustomerDetailModal';
 
@@ -128,10 +129,12 @@ const Kyc = () => {
       await fetchGroups();
       setDialogOpen(false)
       setIsDialogOpen(false)
+      toast.success('Success Update Kyc Member');
     } catch (error: any) {
       alert(error.message)
       setDialogOpen(false)
       setIsDialogOpen(false)
+      toast.error(error.message)
     }
   }
 

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

@@ -7,6 +7,7 @@ import CustomerDialog from './CustomerDetailModal';
 import ConfirmDialog from '@/components/confirm';
 import { useAuthContext } from '@/auth';
 import { ScreenLoader } from '@/components';
+import { toast } from 'sonner';
 const BASE_URL = apiConfig.service_customer;
 
 const ManageMembers = () => {
@@ -99,10 +100,12 @@ const ManageMembers = () => {
       await fetchGroups();
       setDialogOpen(false)
       setIsDialogOpen(false)
+      toast.success('Success Update Member');
     } catch (error: any) {
       alert(error.message)
       setDialogOpen(false)
       setIsDialogOpen(false)
+      toast.error(error.message)
     }
   }
 

src/pages/menu/manage-menu/blocks/AddDIalog.tsx

@@ -12,13 +12,14 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog';
+import { FormControl,NativeSelect } from "@mui/material";
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_dashboard;
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showAddDialog, handleAddDialog } = useManageMenusContext();
+  const { showAddDialog, handleAddDialog, parents } = useManageMenusContext();
   const { reload } = useDataGrid();
   const { PostData } = useCallApi();
   const [alert, setAlert] = useState({
@@ -36,26 +37,7 @@ const AddDialog = () => {
   };
   const [formField, setFormField] = useState(initialState);
 
-  const doCreateMenu = useCallback(
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-
-      const response = await PostData(`${API_URL}/menus/create`, formField);
-
-      if (response?.status) {
-        handleAddDialog(false);
-        resetForm();
-        toast.success('Success Create Menu');
-        reload();
-      } else {
-        toast.error('Failed Create Menu');
-        setAlert({ show: true, message: 'Failed Create Menu' });
-      }
-    },
-    [formField]
-  );
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (
@@ -69,7 +51,17 @@ const AddDialog = () => {
       return;
     }
 
-    doCreateMenu(e);
+    const response = await PostData(`${API_URL}/menus/create`, formField);
+
+    if (response?.status) {
+      handleAddDialog(false);
+      resetForm();
+      toast.success('Success Create Menu');
+      reload();
+    } else {
+      toast.error('Failed Create Menu');
+      setAlert({ show: true, message: 'Failed Create Menu' });
+    }
     console.log(formField);
     setAlert({ show: false, message: '' });
   };
@@ -140,13 +132,24 @@ const AddDialog = () => {
 
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">ID Parent</label>
+                    <label className="form-label flex items-center gap-1 max-w-56">Parent</label>
-                    <Input
+                    <FormControl fullWidth margin="dense">
-                      className="input"
+                      <NativeSelect
-                      type="text"
+                        defaultValue={30}
-                      value={formField.id_parent}
+                        value={formField.id_parent}
-                      onChange={(e) => setFormField({ ...formField, id_parent: e.target.value })}
+                        onChange={(e: any) => setFormField({ ...formField, id_parent: e.target.value })}
-                    />
+                        inputProps={{
+                          name: 'id_parent',
+                          id: 'uncontrolled-native',
+                        }}
+                      >
+                      {
+                        parents ? parents.map((el: any) => (
+                          <option key={el.id} value={el.id}>{el.name}</option>
+                        )) : ''
+                      }
+                      </NativeSelect>
+                    </FormControl>
                   </div>
                 </div>
 
@@ -185,12 +188,20 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Status<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <FormControl fullWidth margin="dense">
-                      className="input"
+                      <NativeSelect
-                      type="text"
+                        defaultValue={30}
-                      value={formField.status}
+                        value={formField.status}
-                      onChange={(e) => setFormField({ ...formField, status: e.target.value })}
+                        onChange={(e: any) => setFormField({ ...formField, status: e.target.value })}
-                    />
+                        inputProps={{
+                          name: 'status',
+                          id: 'uncontrolled-native',
+                        }}
+                      >
+                        <option value={"Y"}>Active</option>
+                        <option value={"N"}>Inactive</option>
+                      </NativeSelect>
+                    </FormControl>
                   </div>
                 </div>
 

src/pages/menu/manage-menu/blocks/DeleteDialog.tsx

@@ -10,7 +10,7 @@ import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_dashboard;
 const DeleteDialog = () => {
-  const { showDeleteDialog, handleDeleteDialog, selectedMenu } = useManageMenusContext();
+  const { showDeleteDialog, handleDeleteDialog, selectedMenu }: any = useManageMenusContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
   const [enforce, setEnforce] = useState(false);
@@ -19,9 +19,9 @@ const DeleteDialog = () => {
     message: ''
   });
 
-  const doDeleteMenu = useCallback(async () => {
+  const doDeleteMenu = async () => {
-    const response = await DeleteData(`${API_URL}/menus/delete/${selectedMenu}/${enforce}`, {
+    const response = await DeleteData(`${API_URL}/menus/delete/${selectedMenu.id}/${enforce}`, {
-      id: selectedMenu
+      id: selectedMenu.id
     });
 
     if (response?.status) {
@@ -33,7 +33,7 @@ const DeleteDialog = () => {
       toast.error('Failed Delete Menu');
       setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
     }
-  }, [selectedMenu, enforce]);
+  };
 
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>

src/pages/menu/manage-menu/blocks/EditDialog.tsx

@@ -2,7 +2,7 @@ import { Alert, useDataGrid } from '@/components';
 import { useManageMenusContext } from '../hooks/useManageMenusContext';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { toast } from 'sonner';
 import {
   Dialog,
@@ -12,12 +12,13 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog';
+import { FormControl,NativeSelect } from "@mui/material";
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-
 const API_URL = apiConfig.service_dashboard;
+
 const EditDialog = () => {
-  const { showEditDialog, handleEditDialog, selectedMenu } = useManageMenusContext();
+  const { showEditDialog, handleEditDialog, selectedMenu, setSelectedMenu, parents }: any = useManageMenusContext();
   const { reload } = useDataGrid();
   const { PutData } = useCallApi();
   const [alert, setAlert] = useState({
@@ -25,6 +26,7 @@ const EditDialog = () => {
     message: ''
   });
   const initialState = {
+    id: '',
     module: '',
     name: '',
     link: '',
@@ -33,13 +35,25 @@ const EditDialog = () => {
     icon: '',
     status: ''
   };
-  const [formField, setFormField] = useState(initialState);
 
-  const doUpdateMenu = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleUpdate = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     
-    const response = await PutData(`${API_URL}/menus/update/${selectedMenu}`, formField);
+    if (
+      selectedMenu.module === '' ||
+      selectedMenu.name === '' ||
+      selectedMenu.link === '' ||
+      selectedMenu.order_number === 0 ||
+      selectedMenu.status === ''
+    ) {
+      setAlert({ show: true, message: 'Please fill in all required fields.' });
+      return;
+    }
 
+    const updateMenu = selectedMenu;
+    if (updateMenu.id_parent === null) updateMenu.id_parent = "";
+    delete updateMenu.parentName    
+    const response = await PutData(`${API_URL}/menus/update/${selectedMenu.id}`, selectedMenu);
     if (response?.status) {
       handleEditDialog(false, null);
       resetForm();
@@ -49,29 +63,11 @@ const EditDialog = () => {
       toast.error('Failed Update Menu');
       setAlert({ show: true, message: 'Failed Update Menu' });
     }
-  }, []);
-
-  const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    if (
-      formField.module === '' ||
-      formField.name === '' ||
-      formField.link === '' ||
-      formField.order_number === 0 ||
-      formField.status === ''
-    ) {
-      setAlert({ show: true, message: 'Please fill in all required fields.' });
-      return;
-    }
-
-    doUpdateMenu(e);
-    console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
   const resetForm = () => {
-    setFormField(initialState);
+    setSelectedMenu(initialState)
     setAlert({ show: false, message: '' });
   };
 
@@ -100,8 +96,8 @@ const EditDialog = () => {
                     <Input
                       className="input"
                       type="text"
-                      value={formField.module}
+                      value={selectedMenu.module}
-                      onChange={(e) => setFormField({ ...formField, module: e.target.value })}
+                      onChange={(e) => setSelectedMenu({ ...selectedMenu, module: e.target.value })}
                     />
                   </div>
                 </div>
@@ -114,8 +110,8 @@ const EditDialog = () => {
                     <Input
                       className="input"
                       type="text"
-                      value={formField.name}
+                      value={selectedMenu.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                      onChange={(e) => setSelectedMenu({ ...selectedMenu, name: e.target.value })}
                     />
                   </div>
                 </div>
@@ -128,8 +124,8 @@ const EditDialog = () => {
                     <Input
                       className="input"
                       type="text"
-                      value={formField.link}
+                      value={selectedMenu.link}
-                      onChange={(e) => setFormField({ ...formField, link: e.target.value })}
+                      onChange={(e) => setSelectedMenu({ ...selectedMenu, link: e.target.value })}
                     />
                   </div>
                 </div>
@@ -137,12 +133,23 @@ const EditDialog = () => {
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                     <label className="form-label flex items-center gap-1 max-w-56">ID Parent</label>
-                    <Input
+                    <FormControl fullWidth margin="dense">
-                      className="input"
+                      <NativeSelect
-                      type="text"
+                        defaultValue={30}
-                      value={formField.id_parent}
+                        value={selectedMenu.id_parent}
-                      onChange={(e) => setFormField({ ...formField, id_parent: e.target.value })}
+                        onChange={(e: any) => setSelectedMenu({ ...selectedMenu, id_parent: e.target.value })}
-                    />
+                        inputProps={{
+                          name: 'id_parent',
+                          id: 'uncontrolled-native',
+                        }}
+                      >
+                      {
+                        parents ? parents.map((el: any) => (
+                          <option key={el.id} value={el.id}>{el.name}</option>
+                        )) : ''
+                      }
+                      </NativeSelect>
+                    </FormControl>
                   </div>
                 </div>
 
@@ -155,10 +162,10 @@ const EditDialog = () => {
                       className="input"
                       type="number"
                       min={0}
-                      value={formField.order_number === 0 ? '' : formField.order_number}
+                      value={selectedMenu.order_number === 0 ? '' : selectedMenu.order_number}
                       onChange={(e) => {
                         const value = parseInt(e.target.value, 10);
-                        setFormField({ ...formField, order_number: isNaN(value) ? 0 : value });
+                        setSelectedMenu({ ...selectedMenu, order_number: isNaN(value) ? 0 : value });
                       }}
                     />
                   </div>
@@ -170,8 +177,8 @@ const EditDialog = () => {
                     <Input
                       className="input"
                       type="text"
-                      value={formField.icon}
+                      value={selectedMenu.icon}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                      onChange={(e) => setSelectedMenu({ ...selectedMenu, icon: e.target.value })}
                     />
                   </div>
                 </div>
@@ -181,12 +188,20 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Status<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <FormControl fullWidth margin="dense">
-                      className="input"
+                      <NativeSelect
-                      type="text"
+                        defaultValue={30}
-                      value={formField.status}
+                        value={selectedMenu.status}
-                      onChange={(e) => setFormField({ ...formField, status: e.target.value })}
+                        onChange={(e) => setSelectedMenu({ ...selectedMenu, status: e.target.value })}
-                    />
+                        inputProps={{
+                          name: 'status',
+                          id: 'uncontrolled-native',
+                        }}
+                      >
+                        <option value={"Y"}>Active</option>
+                        <option value={"N"}>Inactive</option>
+                      </NativeSelect>
+                    </FormControl>
                   </div>
                 </div>
 

src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx

@@ -27,15 +27,26 @@ interface MenuProps {
   status: string;
 }
 
+const initialState = {
+  id: '',
+  module: '',
+  name: '',
+  link: '',
+  id_parent: '',
+  order_number: 0,
+  icon: '',
+  status: ''
+};
+
 interface ContextProps {
   menus: MenuProps[];
   showEditDialog: boolean;
-  handleEditDialog: (show: boolean, selected_postoAdms: string | null) => void;
+  handleEditDialog: (show: boolean, selected_postoAdms: object | null) => void;
   showAddDialog: boolean;
   handleAddDialog: (show: boolean) => void;
   showDeleteDialog: boolean;
-  handleDeleteDialog: (show: boolean, selected_postoAdms: string | null) => void;
+  handleDeleteDialog: (show: boolean, selected_postoAdms: object | null) => void;
-  selectedMenu: string | null;
+  selectedMenu: object | null;
   getMenusLists: (
     limit: number,
     page: number,
@@ -43,6 +54,8 @@ interface ContextProps {
     order_field: any,
     order_direction: any
   ) => Promise<{ data: MenuProps[]; totalCount: number } | undefined>;
+  setSelectedMenu: (data: object) => void;
+  parents: any;
 }
 
 const initialProps: ContextProps = {
@@ -50,11 +63,13 @@ const initialProps: ContextProps = {
   showAddDialog: false,
   handleAddDialog: (show: boolean) => {},
   showEditDialog: false,
-  handleEditDialog: (show: boolean, selected_menu: string | null) => {},
+  handleEditDialog: (show: boolean, selected_menu: object | null) => {},
   showDeleteDialog: false,
-  handleDeleteDialog: (show: boolean, selected_menu: string | null) => {},
+  handleDeleteDialog: (show: boolean, selected_menu: object | null) => {},
-  selectedMenu: null,
+  selectedMenu: initialState,
-  getMenusLists: async () => ({ data: [], totalCount: 0 })
+  getMenusLists: async () => ({ data: [], totalCount: 0 }),
+  setSelectedMenu: (data: object) => {},
+  parents: []
 };
 
 const ManageMenusContext = createContext<ContextProps>(initialProps);
@@ -65,21 +80,22 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [selectedMenu, setSelectedMenu] = useState<string | null>(null);
+  const [selectedMenu, setSelectedMenu] = useState<object | null>(initialState);
+  const [parents, setParents] = useState<any>([]);
   const { GetData } = useCallApi();
 
   const handleAddDialog = useCallback((show: boolean) => {
     setShowAddDialog(show);
   }, []);
 
-  const handleEditDialog = useCallback((show: boolean, selected_menu: string | null) => {
+  const handleEditDialog = useCallback((show: boolean, selected_menu: object | null) => {
+    if (show) setSelectedMenu(selected_menu);
     setShowEditDialog(show);
-    setSelectedMenu(selected_menu);
   }, []);
 
-  const handleDeleteDialog = useCallback((show: boolean, selected_menu: string | null) => {
+  const handleDeleteDialog = useCallback((show: boolean, selected_menu: object | null) => {
+    if (show) setSelectedMenu(selected_menu);
     setShowDeleteDialog(show);
-    setSelectedMenu(selected_menu);
   }, []);
 
   const columns = useMemo<ColumnDef<any>[]>(
@@ -135,13 +151,13 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
             <>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleEditDialog(true, row.id)}
+                onClick={() => handleEditDialog(true, row)}
               >
                 <KeenIcon icon="notepad-edit" />
               </button>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleDeleteDialog(true, row.id)}
+                onClick={() => handleDeleteDialog(true, row)}
               >
                 <KeenIcon icon="trash" />
               </button>
@@ -158,25 +174,27 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
   );
 
   const flattenChildren = (parent: any, parentIdx: number, depth = 0, parentName = '') => {
+    if (parent.link === '/') {
+      if (!parents.find((el: any) => el.id === parent.id)) setParents((el: any) => [...el, { id: parent.id, name: parent.name }]) // GET PARENTS
+    }
     if (!parent.children || parent.children.length === 0) {
       return []; // Jika tidak ada children, kembalikan array kosong
     }
 
     return parent.children.flatMap((child: any, childIdx: number) => {
-      // Jika child masih punya children, lakukan rekursi lebih dalam
       if (child.children && child.children.length > 0) {
         return flattenChildren(child, parentIdx * 100 + childIdx, depth + 1, child.name);
       }
 
-      // Jika ini adalah child terakhir (leaf node), masukkan ke array hasil
       return {
-        id: parentIdx * 100 + childIdx + 1,
+        id: child.id,
         module: parent.module,
         parentName: parentName || parent.name,
         name: child.name,
         link: child.link,
-        id_parent: parent.id_parent,
+        id_parent: child.id_parent,
-        status: parent.status
+        status: parent.status,
+        order_number: parent.order_number
       };
     });
   };
@@ -194,10 +212,8 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
         order_direction: sorting[0].desc ? 'DESC' : 'ASC'
       });
 
-      console.log(response?.data);
       if (!response?.data.list) return { data: [], totalCount: 0 };
 
-      // Gunakan rekursi untuk mencari children paling dalam
       const transformedData = response.data.list.flatMap((row: any, parentIdx: number) =>
         flattenChildren(row, parentIdx)
       );
@@ -205,7 +221,6 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
       const total_count = transformedData.length;
 
       setMenus(transformedData);
-      console.log(menus);
       return { data: transformedData, totalCount: total_count };
     } catch (error) {
       console.error('Error fetching Menus', error);
@@ -224,7 +239,9 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
         showDeleteDialog,
         handleDeleteDialog,
         selectedMenu,
-        getMenusLists
+        getMenusLists,
+        setSelectedMenu,
+        parents
       }}
     >
       <Toaster expand visibleToasts={9} duration={3000} />