From 8a3a574a805439fd39e98c86b11ba97c08b01451 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Fri, 9 May 2025 11:42:00 +0700
Subject: [PATCH] fix some sub module in master data

---
 .../master/products/blocks/AddDialog.tsx      | 643 +++++++++---------
 .../products/hooks/ManageProductsContext.tsx  |   2 -
 .../master/provider/blocks/AddDialog.tsx      |   2 +-
 3 files changed, 331 insertions(+), 316 deletions(-)

diff --git a/src/pages/master/products/blocks/AddDialog.tsx b/src/pages/master/products/blocks/AddDialog.tsx
index b2e2851..12c53c2 100644
--- a/src/pages/master/products/blocks/AddDialog.tsx
+++ b/src/pages/master/products/blocks/AddDialog.tsx
@@ -83,18 +83,18 @@ const AddDialog = () => {
   };
   const validateForm = () => {
     const requiredFields = [
-      {key:'name', label: 'Name'},
-      {key:'type', label: 'Type'},
-      {key:'code', label: 'Code'},
-      {key:'description', label: 'Description'},
-      {key:'price_point', label: 'Price Point'},
-      {key:'price_cash', label: 'Price Cash'},
-      {key:'cashback_point', label: 'Cashback Point'},
-      {key:'cashback_cash', label: 'Cashback Cash'},
-      {key:'status', label: 'Status'},
-      {key:'provider', label: 'Provider'},
-      {key:'process_on_third_party', label: 'Process On Third Party'} 
-    ]
+      { key: 'name', label: 'Name' },
+      { key: 'type', label: 'Type' },
+      { key: 'code', label: 'Code' },
+      { key: 'description', label: 'Description' },
+      { key: 'price_point', label: 'Price Point' },
+      { key: 'price_cash', label: 'Price Cash' },
+      { key: 'cashback_point', label: 'Cashback Point' },
+      { key: 'cashback_cash', label: 'Cashback Cash' },
+      { key: 'status', label: 'Status' },
+      { key: 'provider', label: 'Provider' },
+      { key: 'process_on_third_party', label: 'Process On Third Party' }
+    ];
     const newErrors: Record<string, string> = {};
     let isValid = true;
     requiredFields.forEach(({ key, label }) => {
@@ -110,7 +110,7 @@ const AddDialog = () => {
     });
     setErrors(newErrors);
     return isValid;
-  }
+  };
 
   const doCreateProduct = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
@@ -214,317 +214,334 @@ const AddDialog = () => {
               </div>
             )}
 
-<form onSubmit={handleSubmit}>
-  <div className="card-body grid gap-5">
-    <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<span className="text-red-500">*</span>
-        </label>
-        <div className="grow flex flex-col">
-          <Input
-            className={`input ${errors.name ? 'border-red-500' : ''}`}
-            type="text"
-            value={formField.name}
-            onChange={(e) => {
-              setFormField({ ...formField, name: e.target.value });
-              if (e.target.value) {
-                setErrors((prev) => ({ ...prev, name: '' }));
-              }
-            }}
-          />
-          {errors.name && <span className="text-red-500 text-xs mt-1">{errors.name}</span>}
-        </div>
-      </div>
-    </div>
+            <form onSubmit={handleSubmit}>
+              <div className="card-body grid gap-5">
+                <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<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
+                      <Input
+                        className={`input ${errors.name ? 'border-red-500' : ''}`}
+                        type="text"
+                        value={formField.name}
+                        onChange={(e) => {
+                          setFormField({ ...formField, name: e.target.value });
+                          if (e.target.value) {
+                            setErrors((prev) => ({ ...prev, name: '' }));
+                          }
+                        }}
+                      />
+                      {errors.name && (
+                        <span className="text-red-500 text-xs mt-1">{errors.name}</span>
+                      )}
+                    </div>
+                  </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>
-        <div className="grow flex flex-col">
-          <Input
-            className={`input ${errors.type ? 'border-red-500' : ''}`}
-            type="text"
-            value={formField.type}
-            onChange={(e) => {
-              setFormField({ ...formField, type: e.target.value });
-              if (e.target.value) {
-                setErrors((prev) => ({ ...prev, type: '' }));
-              }
-            }}
-          />
-          {errors.type && <span className="text-red-500 text-xs mt-1">{errors.type}</span>}
-        </div>
-      </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>
+                    <div className="grow flex flex-col">
+                      <Input
+                        className={`input ${errors.type ? 'border-red-500' : ''}`}
+                        type="text"
+                        value={formField.type}
+                        onChange={(e) => {
+                          setFormField({ ...formField, type: e.target.value });
+                          if (e.target.value) {
+                            setErrors((prev) => ({ ...prev, type: '' }));
+                          }
+                        }}
+                      />
+                      {errors.type && (
+                        <span className="text-red-500 text-xs mt-1">{errors.type}</span>
+                      )}
+                    </div>
+                  </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>
-        <div className="grow flex flex-col">
-          <Input
-            className={`input ${errors.code ? 'border-red-500' : ''}`}
-            type="text"
-            value={formField.code}
-            onChange={(e) => {
-              setFormField({ ...formField, code: e.target.value });
-              if (e.target.value) {
-                setErrors((prev) => ({ ...prev, code: '' }));
-              }
-            }}
-          />
-          {errors.code && <span className="text-red-500 text-xs mt-1">{errors.code}</span>}
-        </div>
-      </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>
+                    <div className="grow flex flex-col">
+                      <Input
+                        className={`input ${errors.code ? 'border-red-500' : ''}`}
+                        type="text"
+                        value={formField.code}
+                        onChange={(e) => {
+                          setFormField({ ...formField, code: e.target.value });
+                          if (e.target.value) {
+                            setErrors((prev) => ({ ...prev, code: '' }));
+                          }
+                        }}
+                      />
+                      {errors.code && (
+                        <span className="text-red-500 text-xs mt-1">{errors.code}</span>
+                      )}
+                    </div>
+                  </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">
-          Description<span className="text-red-500">*</span>
-        </label>
-        <div className="grow flex flex-col">
-          <Input
-            className={`input ${errors.description ? 'border-red-500' : ''}`}
-            type="text"
-            value={formField.description}
-            onChange={(e) => {
-              setFormField({ ...formField, description: e.target.value });
-              if (e.target.value) {
-                setErrors((prev) => ({ ...prev, description: '' }));
-              }
-            }}
-          />
-          {errors.description && (
-            <span className="text-red-500 text-xs mt-1">{errors.description}</span>
-          )}
-        </div>
-      </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">
+                      Description<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
+                      <Input
+                        className={`input ${errors.description ? 'border-red-500' : ''}`}
+                        type="text"
+                        value={formField.description}
+                        onChange={(e) => {
+                          setFormField({ ...formField, description: e.target.value });
+                          if (e.target.value) {
+                            setErrors((prev) => ({ ...prev, description: '' }));
+                          }
+                        }}
+                      />
+                      {errors.description && (
+                        <span className="text-red-500 text-xs mt-1">{errors.description}</span>
+                      )}
+                    </div>
+                  </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">
-          Price Point<span className="text-red-500">*</span>
-        </label>
-        <div className="grow flex flex-col">
-          <NumericFormat
-            className={`input ${errors.price_point ? 'border-red-500' : ''}`}
-            value={formField.price_point ?? ''}
-            thousandSeparator="."
-            decimalSeparator=","
-            allowNegative={false}
-            onValueChange={(values) => {
-              setFormField((prev) => ({
-                ...prev,
-                price_point: values.floatValue !== undefined ? values.floatValue : ''
-              }));
-              if (values.floatValue !== undefined) {
-                setErrors((prev) => ({ ...prev, price_point: '' }));
-              }
-            }}
-            placeholder="Enter Price Point"
-          />
-          {errors.price_point && (
-            <span className="text-red-500 text-xs mt-1">{errors.price_point}</span>
-          )}
-        </div>
-      </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">
+                      Price Point<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
+                      <NumericFormat
+                        className={`input ${errors.price_point ? 'border-red-500' : ''}`}
+                        value={formField.price_point ?? ''}
+                        thousandSeparator="."
+                        decimalSeparator=","
+                        allowNegative={false}
+                        onValueChange={(values) => {
+                          setFormField((prev) => ({
+                            ...prev,
+                            price_point: values.floatValue !== undefined ? values.floatValue : ''
+                          }));
+                          if (values.floatValue !== undefined) {
+                            setErrors((prev) => ({ ...prev, price_point: '' }));
+                          }
+                        }}
+                        placeholder="Enter Price Point"
+                      />
+                      {errors.price_point && (
+                        <span className="text-red-500 text-xs mt-1">{errors.price_point}</span>
+                      )}
+                    </div>
+                  </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">
-          Price Cash<span className="text-red-500">*</span>
-        </label>
-        <div className="grow flex flex-col">
-          <NumericFormat
-            className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
-            value={formField.price_cash ?? ''}
-            thousandSeparator="."
-            decimalSeparator=","
-            allowNegative={false}
-            onValueChange={(values) => {
-              setFormField((prev) => ({
-                ...prev,
-                price_cash: values.floatValue !== undefined ? values.floatValue : ''
-              }));
-              if (values.floatValue !== undefined) {
-                setErrors((prev) => ({ ...prev, price_cash: '' }));
-              }
-            }}
-            placeholder="Enter Price Cash"
-          />
-          {errors.price_cash && (
-            <span className="text-red-500 text-xs mt-1">{errors.price_cash}</span>
-          )}
-        </div>
-      </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">
+                      Price Cash<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
+                      <NumericFormat
+                        className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
+                        value={formField.price_cash ?? ''}
+                        thousandSeparator="."
+                        decimalSeparator=","
+                        allowNegative={false}
+                        onValueChange={(values) => {
+                          setFormField((prev) => ({
+                            ...prev,
+                            price_cash: values.floatValue !== undefined ? values.floatValue : ''
+                          }));
+                          if (values.floatValue !== undefined) {
+                            setErrors((prev) => ({ ...prev, price_cash: '' }));
+                          }
+                        }}
+                        placeholder="Enter Price Cash"
+                      />
+                      {errors.price_cash && (
+                        <span className="text-red-500 text-xs mt-1">{errors.price_cash}</span>
+                      )}
+                    </div>
+                  </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">
-          Cashback Point<span className="text-red-500">*</span>
-        </label>
-        <div className="grow flex flex-col">
-          <NumericFormat
-            className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
-            value={formField.cashback_point ?? ''}
-            thousandSeparator="."
-            decimalSeparator=","
-            allowNegative={false}
-            onValueChange={(values) => {
-              setFormField((prev) => ({
-                ...prev,
-                cashback_point: values.floatValue !== undefined ? values.floatValue : ''
-              }));
-              if (values.floatValue !== undefined) {
-                setErrors((prev) => ({ ...prev, cashback_point: '' }));
-              }
-            }}
-            placeholder="Enter Cashback Point"
-          />
-          {errors.cashback_point && (
-            <span className="text-red-500 text-xs mt-1">{errors.cashback_point}</span>
-          )}
-        </div>
-      </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">
+                      Cashback Point<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
+                      <NumericFormat
+                        className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
+                        value={formField.cashback_point ?? ''}
+                        thousandSeparator="."
+                        decimalSeparator=","
+                        allowNegative={false}
+                        onValueChange={(values) => {
+                          setFormField((prev) => ({
+                            ...prev,
+                            cashback_point: values.floatValue !== undefined ? values.floatValue : ''
+                          }));
+                          if (values.floatValue !== undefined) {
+                            setErrors((prev) => ({ ...prev, cashback_point: '' }));
+                          }
+                        }}
+                        placeholder="Enter Cashback Point"
+                      />
+                      {errors.cashback_point && (
+                        <span className="text-red-500 text-xs mt-1">{errors.cashback_point}</span>
+                      )}
+                    </div>
+                  </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">
-          Cashback Cash<span className="text-red-500">*</span>
-        </label>
-        <div className="grow flex flex-col">
-          <NumericFormat
-            className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
-            value={formField.cashback_cash ?? ''}
-            thousandSeparator="."
-            decimalSeparator=","
-            allowNegative={false}
-            onValueChange={(values) => {
-              setFormField((prev) => ({
-                ...prev,
-                cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
-              }));
-              if (values.floatValue !== undefined) {
-                setErrors((prev) => ({ ...prev, cashback_cash: '' }));
-              }
-            }}
-            placeholder="Enter Cashback Cash"
-          />
-          {errors.cashback_cash && (
-            <span className="text-red-500 text-xs mt-1">{errors.cashback_cash}</span>
-          )}
-        </div>
-      </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">
+                      Cashback Cash<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
+                      <NumericFormat
+                        className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
+                        value={formField.cashback_cash ?? ''}
+                        thousandSeparator="."
+                        decimalSeparator=","
+                        allowNegative={false}
+                        onValueChange={(values) => {
+                          setFormField((prev) => ({
+                            ...prev,
+                            cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
+                          }));
+                          if (values.floatValue !== undefined) {
+                            setErrors((prev) => ({ ...prev, cashback_cash: '' }));
+                          }
+                        }}
+                        placeholder="Enter Cashback Cash"
+                      />
+                      {errors.cashback_cash && (
+                        <span className="text-red-500 text-xs mt-1">{errors.cashback_cash}</span>
+                      )}
+                    </div>
+                  </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">
-          Status<span className="text-red-500">*</span>
-        </label>
-        <div className="grow flex flex-col">
-          <Select
-            value={formField.status}
-            onValueChange={(value) => {
-              setFormField({ ...formField, status: value });
-              setErrors((prev) => ({ ...prev, status: '' }));
-            }}
-          >
-            <SelectTrigger className={`input ${errors.status ? 'border-red-500' : ''}`}>
-              <SelectValue placeholder="Select Status" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="Y">Yes</SelectItem>
-              <SelectItem value="N">No</SelectItem>
-            </SelectContent>
-          </Select>
-          {errors.status && <span className="text-red-500 text-xs mt-1">{errors.status}</span>}
-        </div>
-      </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">
+                      Status<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
+                      <Select
+                        value={formField.status}
+                        onValueChange={(value) => {
+                          setFormField({ ...formField, status: value });
+                          setErrors((prev) => ({ ...prev, status: '' }));
+                        }}
+                      >
+                        <SelectTrigger className={`input ${errors.status ? 'border-red-500' : ''}`}>
+                          <SelectValue placeholder="Select Status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Yes</SelectItem>
+                          <SelectItem value="N">No</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      {errors.status && (
+                        <span className="text-red-500 text-xs mt-1">{errors.status}</span>
+                      )}
+                    </div>
+                  </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">Provider<span className="text-red-500">*</span></label>
-        <div className="grow flex flex-col">
-          <Select
-            value={formField.provider}
-            onValueChange={(value) => {
-              setFormField({ ...formField, provider: value.toString() });
-              setErrors((prev) => ({ ...prev, provider: '' }));
-            }}
-          >
-            <SelectTrigger className={`input ${errors.provider ? 'border-red-500' : ''}`}>
-              <SelectValue placeholder="Select Provider" />
-            </SelectTrigger>
-            <SelectContent>
-              {providers.map((provider) => (
-                <SelectItem
-                  key={provider.provider_id}
-                  value={provider.provider_id.toString()}
-                >
-                  {provider.provider_name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          {errors.provider && <span className="text-red-500 text-xs mt-1">{errors.provider}</span>}
-        </div>
-      </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">
+                      Provider<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
+                      <Select
+                        value={formField.provider}
+                        onValueChange={(value) => {
+                          setFormField({ ...formField, provider: value.toString() });
+                          setErrors((prev) => ({ ...prev, provider: '' }));
+                        }}
+                      >
+                        <SelectTrigger
+                          className={`input ${errors.provider ? 'border-red-500' : ''}`}
+                        >
+                          <SelectValue placeholder="Select Provider" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {providers.map((provider) => (
+                            <SelectItem
+                              key={provider.provider_id}
+                              value={provider.provider_id.toString()}
+                            >
+                              {provider.provider_name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      {errors.provider && (
+                        <span className="text-red-500 text-xs mt-1">{errors.provider}</span>
+                      )}
+                    </div>
+                  </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>
-        <div className="grow flex flex-col">
-          <Select
-            value={formField.process_on_third_party}
-            onValueChange={(value) => {
-              setFormField({ ...formField, process_on_third_party: value });
-              setErrors((prev) => ({ ...prev, process_on_third_party: '' }));
-            }}
-          >
-            <SelectTrigger className={`input ${errors.process_on_third_party ? 'border-red-500' : ''}`}>
-              <SelectValue placeholder="Select Status" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="Y">Yes</SelectItem>
-              <SelectItem value="N">No</SelectItem>
-            </SelectContent>
-          </Select>
-          {errors.process_on_third_party && (
-            <span className="text-red-500 text-xs mt-1">{errors.process_on_third_party}</span>
-          )}
-        </div>
-      </div>
-    </div>
-
-    <div className="flex justify-end gap-5">
-      <Button type="button" variant="outline" onClick={resetForm}>
-        Reset
-      </Button>
-      <Button variant="default" type="submit" disabled={isSubmitting}>
-        {isSubmitting ? (
-          <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
-        ) : (
-          'Create'
-        )}
-      </Button>
-    </div>
-  </div>
-</form>
+                <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>
+                    <div className="grow flex flex-col">
+                      <Select
+                        value={formField.process_on_third_party}
+                        onValueChange={(value) => {
+                          setFormField({ ...formField, process_on_third_party: value });
+                          setErrors((prev) => ({ ...prev, process_on_third_party: '' }));
+                        }}
+                      >
+                        <SelectTrigger
+                          className={`input ${errors.process_on_third_party ? 'border-red-500' : ''}`}
+                        >
+                          <SelectValue placeholder="Select Status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Yes</SelectItem>
+                          <SelectItem value="N">No</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      {errors.process_on_third_party && (
+                        <span className="text-red-500 text-xs mt-1">
+                          {errors.process_on_third_party}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
 
+                <div className="flex justify-end gap-5">
+                  <Button type="button" variant="outline" onClick={resetForm}>
+                    Reset
+                  </Button>
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </form>
           </div>
         </DialogBody>
       </DialogContent>
diff --git a/src/pages/master/products/hooks/ManageProductsContext.tsx b/src/pages/master/products/hooks/ManageProductsContext.tsx
index f785421..2ee7f37 100644
--- a/src/pages/master/products/hooks/ManageProductsContext.tsx
+++ b/src/pages/master/products/hooks/ManageProductsContext.tsx
@@ -273,8 +273,6 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
         getProductsLists
       }}
     >
-      <Toaster expand visibleToasts={9} duration={3000} />
-
       <DataGridProvider
         columns={columns}
         pagination={{ size: 10 }}
diff --git a/src/pages/master/provider/blocks/AddDialog.tsx b/src/pages/master/provider/blocks/AddDialog.tsx
index 028f6ce..cfa72a9 100644
--- a/src/pages/master/provider/blocks/AddDialog.tsx
+++ b/src/pages/master/provider/blocks/AddDialog.tsx
@@ -116,7 +116,7 @@ const AddDialog = () => {
 
   const resetForm = () => {
     setFormField(initialState);
-    setAlert({ show: false, message: '' });
+    setErrors({});
   };
 
   const doCreateProvider = useCallback(