fixing manage user & add field customer

src/pages/settings/user/manage-user/blocks/EditDialog.tsx

@@ -6,7 +6,15 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select';
-
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import {
   Dialog,
   DialogBody,
@@ -15,6 +23,7 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog';
+import { CustomerProps } from './AddDialog';
 import { useUserContext } from '../hooks';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
@@ -30,6 +39,7 @@ interface RoleListProps {
   status: string;
 }
 
+const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL = apiConfig.service_dashboard;
 
 const initialState = {
@@ -37,7 +47,8 @@ const initialState = {
   username: '',
   email: '',
   id_role: '',
-  status: ''
+  status: '',
+  customerid: ''
 };
 
 const EditDialog = () => {
@@ -45,7 +56,9 @@ const EditDialog = () => {
   const { showEditDialog, selectedUser, handleEditDialog } = useUserContext();
   const { reload } = useDataGrid();
   const { GetData, PutData } = useCallApi();
+  const [open, setOpen] = useState(false);
   const [roles, setRoles] = useState<RoleListProps[]>([]);
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -109,9 +122,27 @@ const EditDialog = () => {
     }
   }, []);
 
+  const getCustomerList = async (sorting: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('CUSTOMER: ', response?.data);
+      setCustomers(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching customer', error);
+    }
+  };
+
   const doFetchUserData = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL}/user/detail/${id}`, { id });
-    // console.log('User detail response:', response);
+    console.log('User detail response:', response?.data);
 
     if (response?.status) {
       setFormField((prev) => ({
@@ -120,8 +151,10 @@ const EditDialog = () => {
         username: response.data.username,
         email: response.data.email,
         id_role: response.data.idRole,
-        status: response.data.status
+        status: response.data.status,
+        customerid: response.data.customerid
       }));
+      console.log('Customer ID dari user detail:', response.data.customerid);
     } else {
       setFormField((prev) => ({
         ...prev,
@@ -129,7 +162,8 @@ const EditDialog = () => {
         username: '',
         email: '',
         id_role: '0',
-        status: ''
+        status: '',
+        customerid: ''
       }));
     }
     // console.log('Fetched ID Role:', response?.data.id_role);
@@ -141,6 +175,10 @@ const EditDialog = () => {
     }
   }, [selectedUser]);
 
+  useEffect(() => {
+    getCustomerList([{ id: 'id', desc: false }]);
+  }, []);
+
   useEffect(() => {
     if (showEditDialog === false) {
       resetForm();
@@ -192,6 +230,55 @@ const EditDialog = () => {
             )}
             <form onSubmit={doUpdateUser}>
               <div className="card-body grid gap-5 p-0">
+                <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">Customer</label>
+                    <Popover open={open} onOpenChange={setOpen}>
+                      <PopoverTrigger asChild>
+                        <button
+                          type="button"
+                          className="input col-span-5 text-left"
+                          style={{ color: 'inherit' }}
+                        >
+                          {customers.find((customer) => customer.id === formField.customerid)
+                            ?.username || 'Select Customer'}
+                        </button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[400px] p-0">
+                        <Command>
+                          <CommandInput placeholder="Search Customer..." />
+                          <CommandList
+                            className="max-h-[300px] overflow-y-auto"
+                            style={{ touchAction: 'pan-y' }}
+                            onWheel={(e) => {
+                              e.currentTarget.scrollTop += e.deltaY;
+                            }}
+                          >
+                            <CommandEmpty>No Customer found.</CommandEmpty>
+                            <CommandGroup>
+                              {customers.map((customer) => (
+                                <CommandItem
+                                  key={customer.id}
+                                  value={customer.username}
+                                  onSelect={() => {
+                                    setFormField({
+                                      ...formField,
+                                      customerid: customer.id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {customer.username}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+                  </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">Name</label>