fix loading page, add delete edit manage menu, search manage user

src/components/data-grid/DataGridContext.tsx

@@ -181,6 +181,7 @@ export const DataGridProvider = <TData extends object>(props: TDataGridProps<TDa
         reload: loadData
       }}
     >
+      {loading && <div className="fixed inset-0 flex items-center justify-center z-50"></div>}
       {props.children ? props.children : <DataGridInner />}
     </DataGridContext.Provider>
   );

src/components/data-grid/DataGridLoader.tsx

@@ -5,10 +5,10 @@ export const DataGridLoader = () => {
   const { props } = useDataGrid();
 
   return (
-    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+    <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-6 min-w-[160px] bg-card text-muted-foreground px-4 py-2 font-medium leading-none text-sm border shadow-sm rounded-md">
       <div className="text-muted-foreground bg-card  flex items-center gap-2 px-4 py-2 font-medium leading-none text-sm border shadow-sm rounded-md">
         <svg
-          className="animate-spin -ml-1 h-5 w-5 text-muted-foreground"
+          className="animate-spin -ml-1 h-5 w-5 text-muted-foreground flex-shrink-0"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"

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

@@ -12,16 +12,22 @@ 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';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
 
 const API_URL = apiConfig.service_dashboard;
 const AddDialog = () => {
-  const parentRef = useRef<any | null>(null);
   const { showAddDialog, handleAddDialog, parents } = useManageMenusContext();
   const { reload } = useDataGrid();
   const { PostData } = useCallApi();
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -51,8 +57,11 @@ const AddDialog = () => {
       return;
     }
 
+    console.log('Data dikirim ke API:', formField);
     const response = await PostData(`${API_URL}/menus/create`, formField);
 
+    console.log('Response from API:', response);
+
     if (response?.status) {
       handleAddDialog(false);
       resetForm();
@@ -67,7 +76,10 @@ const AddDialog = () => {
   };
 
   const resetForm = () => {
-    setFormField(initialState);
+    setFormField({
+      ...initialState,
+      status: formField.status // Pertahankan nilai status terpilih
+    });
     setAlert({ show: false, message: '' });
   };
 
@@ -78,7 +90,7 @@ const AddDialog = () => {
           <DialogTitle>Menu - Create</DialogTitle>
           <DialogDescription></DialogDescription>
         </DialogHeader>
-        <DialogBody ref={parentRef}>
+        <DialogBody className="scrollable">
           <div className="flex flex-col">
             {alert.show && (
               <Alert variant="danger">
@@ -133,24 +145,21 @@ 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">Parent</label>
-                    <FormControl fullWidth margin="dense">
+                    <Select
-                      <NativeSelect
+                      value={formField.id_parent}
-                        defaultValue={30}
+                      onValueChange={(value) => setFormField({ ...formField, id_parent: value })}
-                        value={formField.id_parent}
+                    >
-                        onChange={(e: any) => setFormField({ ...formField, id_parent: e.target.value })}
+                      <SelectTrigger>
-                        inputProps={{
+                        <SelectValue placeholder="Select As Parent" />
-                          name: 'id_parent',
+                      </SelectTrigger>
-                          id: 'uncontrolled-native',
+                      <SelectContent>
-                        }}
+                        {parents.map((parent: any) => (
-                      >
+                          <SelectItem key={parent.id} value={parent.id}>
-                      <option value={''}>As Parent</option>
+                            {parent.name}
-                      {
+                          </SelectItem>
-                        parents ? parents.map((el: any) => (
+                        ))}
-                          <option key={el.id} value={el.id}>{el.name}</option>
+                      </SelectContent>
-                        )) : ''
+                    </Select>
-                      }
-                      </NativeSelect>
-                    </FormControl>
                   </div>
                 </div>
 
@@ -190,21 +199,18 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Status<span className="text-red-500">*</span>
                     </label>
-                    <FormControl fullWidth margin="dense">
+                    <Select
-                      <NativeSelect
+                      value={formField.status}
-                        defaultValue={30}
+                      onValueChange={(value) => setFormField({ ...formField, status: value })}
-                        value={formField.status}
+                    >
-                        onChange={(e: any) => setFormField({ ...formField, status: e.target.value })}
+                      <SelectTrigger>
-                        inputProps={{
+                        <SelectValue placeholder="Select Status" />
-                          name: 'status',
+                      </SelectTrigger>
-                          id: 'uncontrolled-native',
+                      <SelectContent>
-                        }}
+                        <SelectItem value="Y">Active</SelectItem>
-                      >
+                        <SelectItem value="N">Inactive</SelectItem>
-                        <option value={''}>Select</option>
+                      </SelectContent>
-                        <option value={"Y"}>Active</option>
+                    </Select>
-                        <option value={"N"}>Inactive</option>
-                      </NativeSelect>
-                    </FormControl>
                   </div>
                 </div>
 

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

@@ -4,7 +4,14 @@ import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
 import { ChangeEvent, useCallback, useState } from 'react';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
 import { EnforceSwitch } from '@/components/switch';
 import { Button } from '@/components/ui/button';
 
@@ -13,14 +20,13 @@ const DeleteDialog = () => {
   const { showDeleteDialog, handleDeleteDialog, selectedMenu }: any = useManageMenusContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
 
   const doDeleteMenu = async () => {
-    const response = await DeleteData(`${API_URL}/menus/delete/${selectedMenu.id}/${enforce}`, {
+    const response = await DeleteData(`${API_URL}/menus/delete/${selectedMenu.id}/false`, {
       id: selectedMenu.id
     });
 
@@ -44,15 +50,6 @@ const DeleteDialog = () => {
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
             <span className="text-sm">you will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
           </Alert>
           {alert.show && (
             <Alert variant="danger">

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

@@ -12,15 +12,25 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog';
-import { FormControl,NativeSelect } from "@mui/material";
+import { FormControl, NativeSelect } from '@mui/material';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+
 const API_URL = apiConfig.service_dashboard;
 
 const EditDialog = () => {
-  const { showEditDialog, handleEditDialog, selectedMenu, setSelectedMenu, parents }: any = useManageMenusContext();
+  const { showEditDialog, handleEditDialog, selectedMenu, setSelectedMenu, parents }: any =
+    useManageMenusContext();
   const { reload } = useDataGrid();
   const { PutData } = useCallApi();
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -38,11 +48,12 @@ const EditDialog = () => {
 
   const handleUpdate = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    
+
     if (
       selectedMenu.module === '' ||
       selectedMenu.name === '' ||
       selectedMenu.link === '' ||
+      selectedMenu.id_parent === '' ||
       selectedMenu.order_number === 0 ||
       selectedMenu.status === ''
     ) {
@@ -51,8 +62,8 @@ const EditDialog = () => {
     }
 
     const updateMenu = selectedMenu;
-    if (updateMenu.id_parent === null) updateMenu.id_parent = "";
+    if (updateMenu.id_parent === null) updateMenu.id_parent = '';
-    delete updateMenu.parentName    
+    delete updateMenu.parentName;
     const response = await PutData(`${API_URL}/menus/update/${selectedMenu.id}`, selectedMenu);
     if (response?.status) {
       handleEditDialog(false, null);
@@ -67,7 +78,7 @@ const EditDialog = () => {
   };
 
   const resetForm = () => {
-    setSelectedMenu(initialState)
+    setSelectedMenu(initialState);
     setAlert({ show: false, message: '' });
   };
 
@@ -78,7 +89,7 @@ const EditDialog = () => {
           <DialogTitle>Menu - Update</DialogTitle>
           <DialogDescription></DialogDescription>
         </DialogHeader>
-        <DialogBody>
+        <DialogBody className="scrollable">
           <div className="flex flex-col">
             {alert.show && (
               <Alert variant="danger">
@@ -132,24 +143,27 @@ 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>
+                    <label className="form-label flex items-center gap-1 max-w-56">Parent</label>
-                    <FormControl fullWidth margin="dense">
+                    <Select
-                      <NativeSelect
+                      value={selectedMenu.id_parent || ''}
-                        defaultValue={30}
+                      onValueChange={(value) => {
-                        value={selectedMenu.id_parent}
+                        setSelectedMenu({
-                        onChange={(e: any) => setSelectedMenu({ ...selectedMenu, id_parent: e.target.value })}
+                          ...selectedMenu,
-                        inputProps={{
+                          id_parent: value === '' ? null : value
-                          name: 'id_parent',
+                        });
-                          id: 'uncontrolled-native',
+                      }}
-                        }}
+                    >
-                      >
+                      <SelectTrigger>
-                      {
+                        <SelectValue placeholder="Select As Parent" />
-                        parents ? parents.map((el: any) => (
+                      </SelectTrigger>
-                          <option key={el.id} value={el.id}>{el.name}</option>
+                      <SelectContent>
-                        )) : ''
+                        {parents.map((parent: any) => (
-                      }
+                          <SelectItem key={parent.id} value={parent.id}>
-                      </NativeSelect>
+                            {parent.name}
-                    </FormControl>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </div>
                 </div>
 
@@ -165,7 +179,10 @@ const EditDialog = () => {
                       value={selectedMenu.order_number === 0 ? '' : selectedMenu.order_number}
                       onChange={(e) => {
                         const value = parseInt(e.target.value, 10);
-                        setSelectedMenu({ ...selectedMenu, order_number: isNaN(value) ? 0 : value });
+                        setSelectedMenu({
+                          ...selectedMenu,
+                          order_number: isNaN(value) ? 0 : value
+                        });
                       }}
                     />
                   </div>
@@ -184,6 +201,26 @@ const EditDialog = () => {
                 </div>
 
                 <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">
+                      Status<span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={selectedMenu.status}
+                      onValueChange={(value) => setSelectedMenu({ ...selectedMenu, status: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                {/* <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">
                       Status<span className="text-red-500">*</span>
@@ -203,7 +240,7 @@ const EditDialog = () => {
                       </NativeSelect>
                     </FormControl>
                   </div>
-                </div>
+                </div> */}
 
                 <div className="flex justify-end">
                   <Button className="btn btn-primary">Save Changes</Button>

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

@@ -133,12 +133,27 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
         meta: { headerClassName: 'w-[250px]' }
       },
       {
-        accessorFn: (row) => row.status,
+        accessorKey: 'status',
-        id: 'status',
         header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
         enableSorting: false,
         enableHiding: false,
-        meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' }
+        cell: ({ row }) => {
+          const isActive = row.original.status === 'Y';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
+              }`}
+            >
+              {isActive ? 'Active' : 'Inactive'}
+            </span>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
       },
       {
         id: 'actions',
@@ -211,7 +226,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
         link: child.link,
         id_parent: child.id_parent,
         status: child.status,
-        order_number: child.order_number
+        order_number: parent.order_number
       };
     });
 
@@ -242,7 +257,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
       const total_count = transformedData.length;
       const paginatedData = transformedData.slice(page * limit, (page + 1) * limit);
 
-      console.log(response.data);
+      console.log('data', paginatedData);
       // setMenus(transformedData);
       return { data: paginatedData, totalCount: total_count };
     } catch (error) {

src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx

@@ -8,6 +8,8 @@ import { ListToolBar } from '../blocks';
 import { useCallApi } from '@/hooks';
 
 interface ContextProps {
+  showSearchDialog: boolean;
+  handleSearchDialog: (show: boolean) => void;
   showEditDialog: boolean;
   handleEditDialog: (show: boolean, selected_user: string | null) => void;
   showAddDialog: boolean;
@@ -35,6 +37,8 @@ interface RoleListProps {
 }
 
 const initialProps: ContextProps = {
+  showSearchDialog: false,
+  handleSearchDialog: (show: boolean) => {},
   showEditDialog: false,
   handleEditDialog: () => {},
   showAddDialog: false,
@@ -52,6 +56,7 @@ const API_URL = apiConfig.service_dashboard;
 const ManageUserContextProvider = ({ children }: { children: React.ReactNode }) => {
   /* state */
   const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showSearchDialog, setShowSearchDialog] = useState(false);
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [selectedUser, setSelectedUser] = useState<string | null>(null);
@@ -59,6 +64,10 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
   const { GetData } = useCallApi();
 
   /* action */
+  const handleSearchDialog = useCallback((show: boolean) => {
+    setShowSearchDialog(show);
+  }, []);
+
   const handleEditDialog = useCallback((show: boolean, selected_user: string | null) => {
     setSelectedUser(show ? selected_user : null);
     setShowEditDialog(show);
@@ -219,6 +228,8 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
   return (
     <ManageUserContext.Provider
       value={{
+        showSearchDialog,
+        handleSearchDialog,
         showEditDialog,
         handleEditDialog,
         selectedUser,