add dropdown menu for type, status, transaction id, and agent

src/pages/master/provider/blocks/AddDialog.tsx

@@ -15,14 +15,46 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+
+export interface CustomerProps {
+  msisdn: string;
+  email: string;
+  fullname: string;
+  username: string;
+}
+
+export interface TransactionProps {
+  id: string;
+  name: string;
+}
+
+const API_URL_CUSTOMER = apiConfig.service_customer;
+const API_URL_MASTERDATA = apiConfig.service_master_data;
+const API_URL_TRANSACTION = apiConfig.service_transaction;
 
-const API_URL = apiConfig.service_master_data;
 const AddDialog = () => {
   const { showAddDialog, handleAddDialog } = useManageProviderContext();
   const { reload } = useDataGrid();
-  const { PostData } = useCallApi();
+  const { PostData, GetData } = useCallApi();
   const parentRef = useRef<any | null>(null);
   const parsedUser = getAuth()?.user;
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -38,6 +70,8 @@ const AddDialog = () => {
     created_at: ''
   };
   const [formField, setFormField] = useState(initialState);
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
+  const [transactions, setTransactions] = useState<TransactionProps[]>([]);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
 
@@ -49,7 +83,7 @@ const AddDialog = () => {
   const doCreateProvider = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    const response = await PostData(`${API_URL}/provider/create`, formField);
+    const response = await PostData(`${API_URL_MASTERDATA}/provider/create`, formField);
 
     if (response?.status) {
       resetForm();
@@ -77,7 +111,7 @@ const AddDialog = () => {
       return;
     }
 
-    doCreateProvider(e);
+    // doCreateProvider(e);
     console.log(formField);
     setAlert({ show: false, message: '' });
   };
@@ -92,6 +126,46 @@ const AddDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    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 getTransactionTypeList = async (sorting: any) => {
+      try {
+        const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+
+        console.log('TRANSACTION TYPE: ', response?.data);
+        setTransactions(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching transaction type', error);
+      }
+    };
+
+    getCustomerList([{ id: 'msisdn', desc: false }]);
+    getTransactionTypeList([{ id: 'name', desc: false }]);
+  }, []);
+
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -142,12 +216,18 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Type<span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className="input"
-                      type="text"
+                    <Select
                       value={formField.type}
-                      onChange={(e) => setFormField({ ...formField, type: e.target.value })}
-                    />
+                      onValueChange={(value) => setFormField({ ...formField, type: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="h2h">H2H</SelectItem>
+                        <SelectItem value="agent">Agent</SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
                 </div>
 
@@ -156,12 +236,18 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Status<span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className="input"
-                      type="text"
+                    <Select
                       value={formField.status}
-                      onChange={(e) => setFormField({ ...formField, status: e.target.value })}
-                    />
+                      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>
 
@@ -170,28 +256,64 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Transaction Type Id<span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className="input"
-                      type="text"
+                    <Select
                       value={formField.transactionTypeId}
-                      onChange={(e) =>
-                        setFormField({ ...formField, transactionTypeId: e.target.value })
+                      onValueChange={(value) =>
+                        setFormField({ ...formField, transactionTypeId: value })
                       }
-                    />
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Transaction Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {transactions.map((transaction) => (
+                          <SelectItem key={transaction.id} value={transaction.id}>
+                            {transaction.name}
+                          </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">
-                      Agent Id<span className="text-red-500">*</span>
+                      Agent Name<span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      value={formField.agentId}
-                      onChange={(e) => setFormField({ ...formField, agentId: e.target.value })}
-                    />
+                    <Popover open={open} onOpenChange={setOpen}>
+                      <PopoverTrigger asChild>
+                        <button type="button" className="input col-span-5 text-left">
+                          {customers.find((customer) => customer.msisdn === formField.agentId)
+                            ?.fullname || 'Select Agent'}
+                        </button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[400px] p-0">
+                        <Command>
+                          <CommandInput placeholder="Search Agent..." />
+                          <CommandList>
+                            <CommandEmpty>No Agent found.</CommandEmpty>
+                            <CommandGroup>
+                              {customers.map((customer) => (
+                                <CommandItem
+                                  key={customer.msisdn}
+                                  value={customer.fullname}
+                                  onSelect={() => {
+                                    setFormField({
+                                      ...formField,
+                                      agentId: customer.msisdn
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {customer.fullname}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                   </div>
                 </div>
 

src/pages/master/provider/blocks/EditDialog.tsx

@@ -15,15 +15,37 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { CustomerProps, TransactionProps } from './AddDialog';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+
+const API_URL_CUSTOMER = apiConfig.service_customer;
+const API_URL_MASTERDATA = apiConfig.service_master_data;
+const API_URL_TRANSACTION = apiConfig.service_transaction;
 
-const API_URL = apiConfig.service_master_data;
 const EditDialog = () => {
-  const { showEditDialog, handleEditDialog, selectedProvider } = useManageProviderContext();
+  const { showEditDialog, handleEditDialog, selectedProvider, provider } =
+    useManageProviderContext();
   const { reload } = useDataGrid();
-  const { PutData } = useCallApi();
+  const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -39,6 +61,8 @@ const EditDialog = () => {
     updated_at: ''
   };
   const [formField, setFormField] = useState(initialState);
+  const [transactions, setTransactions] = useState<TransactionProps[]>([]);
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
 
   const resetForm = () => {
     setFormField(initialState);
@@ -49,7 +73,10 @@ const EditDialog = () => {
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
 
-      const response = await PutData(`${API_URL}/provider/update/${selectedProvider}`, formField);
+      const response = await PutData(
+        `${API_URL_MASTERDATA}/provider/update/${selectedProvider}`,
+        formField
+      );
 
       if (response?.status) {
         resetForm();
@@ -64,6 +91,25 @@ const EditDialog = () => {
     [selectedProvider, formField]
   );
 
+  const doFetchData = useCallback(async () => {
+    if (selectedProvider) {
+      const data = provider.find((item) => item.id === selectedProvider);
+      if (data) {
+        setFormField((prev) => ({
+          ...prev,
+          name: data.name,
+          description: data.description,
+          type: data.type,
+          status: data.status,
+          transactionTypeId: data.transactionTypeId,
+          agentId: data.agentId
+        }));
+      }
+    } else {
+      resetForm();
+    }
+  }, []);
+
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -79,11 +125,17 @@ const EditDialog = () => {
       return;
     }
 
-    doUpdateProvider(e);
+    // doUpdateProvider(e);
     console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
+  useEffect(() => {
+    if (selectedProvider) {
+      doFetchData();
+    }
+  }, [selectedProvider]);
+
   useEffect(() => {
     if (showEditDialog) {
       setFormField({
@@ -94,6 +146,46 @@ const EditDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    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 getTransactionTypeList = async (sorting: any) => {
+      try {
+        const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+
+        console.log('TRANSACTION TYPE: ', response?.data);
+        setTransactions(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching transaction type', error);
+      }
+    };
+
+    getCustomerList([{ id: 'msisdn', desc: false }]);
+    getTransactionTypeList([{ id: 'name', desc: false }]);
+  }, []);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -120,7 +212,9 @@ const EditDialog = () => {
                       className="input"
                       type="text"
                       value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, name: target.value }))
+                      }
                     />
                   </div>
                 </div>
@@ -144,12 +238,18 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Type<span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className="input"
-                      type="text"
+                    <Select
                       value={formField.type}
-                      onChange={(e) => setFormField({ ...formField, type: e.target.value })}
-                    />
+                      onValueChange={(value) => setFormField({ ...formField, type: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="h2h">H2H</SelectItem>
+                        <SelectItem value="agent">Agent</SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
                 </div>
 
@@ -158,12 +258,18 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Status<span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className="input"
-                      type="text"
+                    <Select
                       value={formField.status}
-                      onChange={(e) => setFormField({ ...formField, status: e.target.value })}
-                    />
+                      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>
 
@@ -172,28 +278,64 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Transaction Type Id<span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className="input"
-                      type="text"
+                    <Select
                       value={formField.transactionTypeId}
-                      onChange={(e) =>
-                        setFormField({ ...formField, transactionTypeId: e.target.value })
+                      onValueChange={(value) =>
+                        setFormField({ ...formField, transactionTypeId: value })
                       }
-                    />
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Transaction Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {transactions.map((transaction) => (
+                          <SelectItem key={transaction.id} value={transaction.id}>
+                            {transaction.name}
+                          </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">
-                      Agent Id<span className="text-red-500">*</span>
+                      Agent Name<span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      value={formField.agentId}
-                      onChange={(e) => setFormField({ ...formField, agentId: e.target.value })}
-                    />
+                    <Popover open={open} onOpenChange={setOpen}>
+                      <PopoverTrigger asChild>
+                        <button type="button" className="input col-span-5 text-left">
+                          {customers.find((customer) => customer.msisdn === formField.agentId)
+                            ?.fullname || 'Select Agent'}
+                        </button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[400px] p-0">
+                        <Command>
+                          <CommandInput placeholder="Search Agent..." />
+                          <CommandList>
+                            <CommandEmpty>No Agent found.</CommandEmpty>
+                            <CommandGroup>
+                              {customers.map((customer) => (
+                                <CommandItem
+                                  key={customer.msisdn}
+                                  value={customer.fullname}
+                                  onSelect={() => {
+                                    setFormField({
+                                      ...formField,
+                                      agentId: customer.msisdn
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {customer.fullname}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                   </div>
                 </div>
 

src/pages/master/provider/hooks/ManageProviderContext.tsx

@@ -7,6 +7,7 @@ import { Toaster } from 'sonner';
 import ListToolbar from '../blocks/ListToolbar';
 
 interface ProviderProps {
+  id: string;
   name: string;
   description: string;
   type: string;