fixing manage user & add field customer

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

@@ -15,6 +15,16 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import { ChevronDown } from 'lucide-react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { useUserContext } from '../hooks';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
@@ -25,6 +35,14 @@ import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import clsx from 'clsx';
 
+export interface CustomerProps {
+  id: string;
+  msisdn: string;
+  email: string;
+  fullname: string;
+  username: string;
+}
+
 interface RoleListProps {
   id: string;
   name: string;
@@ -42,7 +60,9 @@ interface CreateUserParams {
   status: string;
 }
 
+const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL = apiConfig.service_dashboard;
+
 type PasswordType = 'password' | 'retype_password';
 
 const AddDialog = () => {
@@ -62,7 +82,8 @@ const AddDialog = () => {
     retype_password: '',
     name: '',
     id_role: '',
-    status: ''
+    status: '',
+    customerid: ''
   };
   const [formField, setFormField] = useState(initialState);
   const [showPassword, setShowPassword] = useState({
@@ -71,6 +92,8 @@ const AddDialog = () => {
   });
 
   const [messagePassword, setMessagePassword] = useState(true);
+  const [open, setOpen] = useState(false);
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [passwordErrors, setPasswordErrors] = useState<string[]>([]);
 
@@ -155,6 +178,23 @@ const AddDialog = () => {
     // console.log('ini data user_role:', response?.data);
   }, []);
 
+  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'
+      });
+
+      setCustomers(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching customer', error);
+    }
+  };
+
   useEffect(() => {
     fetchRoles();
   }, [fetchRoles]);
@@ -162,7 +202,7 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    console.log('Form data before submit:', formField);
+    // console.log('Form data before submit:', formField);
 
     if (
       formField.email.trim() === '' ||
@@ -171,7 +211,8 @@ const AddDialog = () => {
       formField.retype_password.trim() === '' ||
       formField.name.trim() === '' ||
       formField.id_role.trim() === '' ||
-      formField.status.trim() === ''
+      formField.status.trim() === '' ||
+      formField.customerid.trim() === ''
     ) {
       setAlert({ show: true, message: 'Please fill name field.' });
       return;
@@ -196,6 +237,10 @@ const AddDialog = () => {
     }
   }, [showAddDialog]);
 
+  useEffect(() => {
+    getCustomerList([{ id: 'id', desc: false }]);
+  }, []);
+
   const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => {
     event.preventDefault();
     setShowPassword((prev) => ({ ...prev, [key]: !prev[key as PasswordType] }));
@@ -262,6 +307,58 @@ const AddDialog = () => {
                   </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">Customer</label>
+                    <Popover open={open} onOpenChange={setOpen}>
+                      <PopoverTrigger asChild>
+                        <button
+                          type="button"
+                          className="input col-span-5 text-left flex justify-between"
+                          style={{ color: 'inherit' }}
+                        >
+                          <span>
+                            {customers.find((customer) => customer.id === formField.customerid)
+                              ?.username || 'Select Customer'}
+                          </span>
+                          <ChevronDown className="w-4 h-4 opacity-70" />
+                        </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">Email</label>