update field agent to optional on Provider

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

@@ -61,7 +61,17 @@ const AddDialog = () => {
     show: false,
     message: ''
   });
-  const initialState = {
+
+  const initialState: {
+    name: string;
+    description: string;
+    type: string;
+    status: string;
+    transaction_type: string;
+    agent: string;
+    created_by: string;
+    created_at: string;
+  } = {
     name: '',
     description: '',
     type: '',
@@ -71,6 +81,7 @@ const AddDialog = () => {
     created_by: '',
     created_at: ''
   };
+
   const [formField, setFormField] = useState(initialState);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const [transactions, setTransactions] = useState<TransactionProps[]>([]);
@@ -116,8 +127,7 @@ const AddDialog = () => {
       formField.description.trim() === '' ||
       formField.type.trim() === '' ||
       formField.status.trim() === '' ||
-      formField.transaction_type === '' ||
+      formField.transaction_type === ''
-      formField.agent.trim() === ''
     ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
@@ -242,7 +252,7 @@ const AddDialog = () => {
                         <SelectValue placeholder="Select Type" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="h2h">H2H</SelectItem>
+                        <SelectItem value="h2h">Host to Host</SelectItem>
                         <SelectItem value="agent">Agent</SelectItem>
                       </SelectContent>
                     </Select>
@@ -294,6 +304,7 @@ const AddDialog = () => {
                   </div>
                 </div>
 
+                {formField.type === 'agent' ? (
                   <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">
@@ -344,6 +355,16 @@ const AddDialog = () => {
                       </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">
+                        Agent Name<span className="text-red-500">*</span>
+                      </label>
+                      <Input type="text" placeholder="Type Agent Only" readOnly />
+                    </div>
+                  </div>
+                )}
 
                 <div className="flex justify-end gap-5">
                   <Button type="button" variant="outline" onClick={resetForm}>

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

@@ -51,7 +51,17 @@ const EditDialog = () => {
     show: false,
     message: ''
   });
-  const initialState = {
+
+  const initialState: {
+    name: string;
+    description: string;
+    type: string;
+    status: string;
+    transaction_type: string;
+    agent: string;
+    updated_by: string;
+    updated_at: string;
+  } = {
     name: '',
     description: '',
     type: '',
@@ -61,6 +71,7 @@ const EditDialog = () => {
     updated_by: '',
     updated_at: ''
   };
+
   const [formField, setFormField] = useState(initialState);
   const [transactions, setTransactions] = useState<TransactionProps[]>([]);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
@@ -257,7 +268,7 @@ const EditDialog = () => {
                         <SelectValue placeholder="Select Type" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="h2h">H2H</SelectItem>
+                        <SelectItem value="h2h">Host to Host</SelectItem>
                         <SelectItem value="agent">Agent</SelectItem>
                       </SelectContent>
                     </Select>
@@ -309,6 +320,7 @@ const EditDialog = () => {
                   </div>
                 </div>
 
+                {formField.type === 'agent' ? (
                   <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">
@@ -322,7 +334,7 @@ const EditDialog = () => {
                             style={{ color: 'inherit' }}
                           >
                             {customers.find((customer) => customer.id === formField.agent)
-                            ?.fullname || 'Select Agent'}
+                              ?.username || 'Select Agent'}
                           </button>
                         </PopoverTrigger>
                         <PopoverContent className="w-[400px] p-0">
@@ -349,7 +361,7 @@ const EditDialog = () => {
                                       setOpen(false);
                                     }}
                                   >
-                                  {customer.fullname}
+                                    {customer.username}
                                   </CommandItem>
                                 ))}
                               </CommandGroup>
@@ -359,6 +371,16 @@ const EditDialog = () => {
                       </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">
+                        Agent Name<span className="text-red-500">*</span>
+                      </label>
+                      <Input type="text" placeholder="Type Agent Only" readOnly />
+                    </div>
+                  </div>
+                )}
 
                 <div className="flex justify-end">
                   <Button variant="default">Save Changes</Button>