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

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">
-                      <NativeSelect
-                        defaultValue={30}
-                        value={formField.id_parent}
-                        onChange={(e: any) => setFormField({ ...formField, id_parent: e.target.value })}
-                        inputProps={{
-                          name: 'id_parent',
-                          id: 'uncontrolled-native',
-                        }}
-                      >
-                      <option value={''}>As Parent</option>
-                      {
-                        parents ? parents.map((el: any) => (
-                          <option key={el.id} value={el.id}>{el.name}</option>
-                        )) : ''
-                      }
-                      </NativeSelect>
-                    </FormControl>
+                    <Select
+                      value={formField.id_parent}
+                      onValueChange={(value) => setFormField({ ...formField, id_parent: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select As Parent" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {parents.map((parent: any) => (
+                          <SelectItem key={parent.id} value={parent.id}>
+                            {parent.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </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">
-                      <NativeSelect
-                        defaultValue={30}
-                        value={formField.status}
-                        onChange={(e: any) => setFormField({ ...formField, status: e.target.value })}
-                        inputProps={{
-                          name: 'status',
-                          id: 'uncontrolled-native',
-                        }}
-                      >
-                        <option value={''}>Select</option>
-                        <option value={"Y"}>Active</option>
-                        <option value={"N"}>Inactive</option>
-                      </NativeSelect>
-                    </FormControl>
+                    <Select
+                      value={formField.status}
+                      onValueChange={(value) => setFormField({ ...formField, status: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
                 </div>