From 50810f539ce487a69b69c076814e65ad70de7794 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Fri, 21 Mar 2025 09:43:50 +0700
Subject: [PATCH] fix form add type and code field

---
 .../master/products/blocks/AddDialog.tsx      |  42 +++++-
 .../master/products/blocks/EditDialog.tsx     | 138 ++++++++++++++++--
 2 files changed, 160 insertions(+), 20 deletions(-)

diff --git a/src/pages/master/products/blocks/AddDialog.tsx b/src/pages/master/products/blocks/AddDialog.tsx
index 1b8fc20..a854203 100644
--- a/src/pages/master/products/blocks/AddDialog.tsx
+++ b/src/pages/master/products/blocks/AddDialog.tsx
@@ -41,13 +41,15 @@ const AddDialog = () => {
   });
   const initialState = {
     name: '',
+    code: '',
+    type: '',
     description: '',
     price_point: 0,
     price_cash: 0,
     cashback_point: 0,
     cashback_cash: 0,
     status: '',
-    providerId: '',
+    provider: '',
     process_on_third_party: '',
     created_by: '',
     created_at: ''
@@ -91,7 +93,7 @@ const AddDialog = () => {
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
       });
 
-      console.log('PROVIDER: ', response?.data);
+      // console.log('PROVIDER: ', response?.data);
       setProviders(response?.data.list);
     } catch (error) {
       console.error('Error fetching provider', error);
@@ -103,6 +105,8 @@ const AddDialog = () => {
 
     if (
       formField.name.trim() === '' ||
+      formField.type.trim() === '' ||
+      formField.code.trim() === '' ||
       formField.description.trim() === '' ||
       formField.price_point === 0 ||
       formField.price_cash === 0 ||
@@ -148,7 +152,7 @@ const AddDialog = () => {
           <DialogTitle>Product - Create</DialogTitle>
           <DialogDescription></DialogDescription>
         </DialogHeader>
-        <DialogBody ref={parentRef}>
+        <DialogBody ref={parentRef} className='overflow-y-auto'>
           <div className="flex flex-col">
             {alert.show && (
               <Alert variant="danger">
@@ -172,6 +176,34 @@ 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">
+                      Type<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      value={formField.type}
+                      onChange={(e) => setFormField({ ...formField, type: e.target.value })}
+                    />
+                  </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">
+                      Code<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      value={formField.code}
+                      onChange={(e) => setFormField({ ...formField, code: e.target.value })}
+                    />
+                  </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">
@@ -288,9 +320,9 @@ const AddDialog = () => {
                       Provider ID
                     </label>
                     <Select
-                      value={formField.providerId}
+                      value={formField.provider}
                       onValueChange={(value) =>
-                        setFormField({ ...formField, providerId: value.toString() })
+                        setFormField({ ...formField, provider: value.toString() })
                       }
                     >
                       <SelectTrigger>
diff --git a/src/pages/master/products/blocks/EditDialog.tsx b/src/pages/master/products/blocks/EditDialog.tsx
index 06eb7b6..72aa3bb 100644
--- a/src/pages/master/products/blocks/EditDialog.tsx
+++ b/src/pages/master/products/blocks/EditDialog.tsx
@@ -15,6 +15,18 @@ 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';
+
+interface ProviderProps {
+  id: string;
+  name: string;
+}
 
 const API_URL = apiConfig.service_master_data;
 const EditDialog = () => {
@@ -30,17 +42,21 @@ const EditDialog = () => {
   });
   const initialState = {
     name: '',
+    code: '',
+    type: '',
     description: '',
     price_point: 0,
     price_cash: 0,
     cashback_point: 0,
     cashback_cash: 0,
     status: '',
-    providerId: '',
+    provider: '',
+    process_on_third_party: '',
     updated_by: '',
     updated_at: ''
   };
   const [formField, setFormField] = useState(initialState);
+  const [providers, setProviders] = useState<ProviderProps[]>([]);
 
   const resetForm = () => {
     setFormField(initialState);
@@ -66,19 +82,40 @@ const EditDialog = () => {
     [selectedProducts, formField]
   );
 
+  const doFetchProvider = useCallback(async (sorting: any) => {
+    try {
+      const response = await GetData(`${API_URL}/provider/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+      // console.log('PROVIDER: ', response?.data);
+      setProviders(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching provider', error);
+    }
+  }, []);
+
   const doFetchData = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL}/product/getdata/${selectedProducts}`, { id });
+    const response = await GetData(`${API_URL}/product/getdata/${id}`, { id });
+    console.log(response);
 
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
         name: response.data.name,
+        type: response.data.type,
+        code: response.data.code,
         description: response.data.description,
         price_point: response.data.price_point,
         price_cash: response.data.price_cash,
         cashback_point: response.data.cashback_point,
         cashback_cash: response.data.cashback_cash,
-        status: response.data.status
+        status: response.data.status,
+        provider: response.data.provider_id,
+        process_on_third_party: response.data.process_on_third_party
       }));
     } else {
       setFormField(initialState);
@@ -90,6 +127,8 @@ const EditDialog = () => {
 
     if (
       formField.name.trim() === '' ||
+      formField.type.trim() === '' ||
+      formField.code.trim() === '' ||
       formField.description.trim() === '' ||
       formField.price_point === 0 ||
       formField.price_cash === 0 ||
@@ -130,6 +169,10 @@ const EditDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    doFetchProvider([{ 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">
@@ -137,7 +180,7 @@ const EditDialog = () => {
           <DialogTitle>Product - Update</DialogTitle>
           <DialogDescription></DialogDescription>
         </DialogHeader>
-        <DialogBody>
+        <DialogBody className="overflow-y-auto">
           <div className="flex flex-col">
             {alert.show && (
               <Alert variant="danger">
@@ -161,6 +204,34 @@ const EditDialog = () => {
                   </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">
+                      Type<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      value={formField.type}
+                      onChange={(e) => setFormField({ ...formField, type: e.target.value })}
+                    />
+                  </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">
+                      Code<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      value={formField.code}
+                      onChange={(e) => setFormField({ ...formField, code: e.target.value })}
+                    />
+                  </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">
@@ -256,12 +327,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={(e) => setFormField({ ...formField, status: e })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select a Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
                 </div>
 
@@ -270,12 +347,43 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Provider ID
                     </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      value={formField.providerId}
-                      onChange={(e) => setFormField({ ...formField, providerId: e.target.value })}
-                    />
+                    <Select
+                      value={formField.provider}
+                      onValueChange={(e) => setFormField({ ...formField, provider: e })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select a Provider" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {providers.map((provider) => (
+                          <SelectItem key={provider.id} value={provider.id}>
+                            {provider.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">
+                      Process on Third Party<span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={formField.process_on_third_party}
+                      onValueChange={(value) =>
+                        setFormField({ ...formField, process_on_third_party: value })
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Yes</SelectItem>
+                        <SelectItem value="N">No</SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
                 </div>