Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

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

@@ -23,6 +23,7 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { NumericFormat } from 'react-number-format';
 
 interface ProviderProps {
   provider_id: string;
@@ -41,15 +42,29 @@ const EditDialog = () => {
     show: false,
     message: ''
   });
-  const initialState = {
+  const initialState: {
+    name: string;
+    code: string;
+    type: string;
+    description: string;
+    price_point: string | number | null;
+    price_cash: string | number | null;
+    cashback_point: string | number | null;
+    cashback_cash: string | number | null;
+    status: string;
+    provider: string;
+    process_on_third_party: string;
+    updated_by: string;
+    updated_at: string;
+  } = {
     name: '',
     code: '',
     type: '',
     description: '',
-    price_point: 0,
+    price_point: null,
-    price_cash: 0,
+    price_cash: null,
-    cashback_point: 0,
+    cashback_point: null,
-    cashback_cash: 0,
+    cashback_cash: null,
     status: '',
     provider: '',
     process_on_third_party: '',
@@ -139,11 +154,13 @@ const EditDialog = () => {
       formField.type.trim() === '' ||
       formField.code.trim() === '' ||
       formField.description.trim() === '' ||
-      formField.price_point === 0 ||
+      formField.price_point === null ||
-      formField.price_cash === 0 ||
+      formField.price_cash === null ||
-      formField.cashback_point === 0 ||
+      formField.cashback_point === null ||
-      formField.cashback_cash === 0 ||
+      formField.cashback_cash === null ||
-      formField.status === '' ||
+      formField.status.trim() === '' ||
+      formField.provider.trim() === '' ||
+      formField.process_on_third_party.trim() === '' ||
       formField.updated_by.trim() === '' ||
       formField.updated_at.trim() === ''
     ) {
@@ -152,7 +169,7 @@ const EditDialog = () => {
     }
 
     doUpdateProduct(e);
-    console.log(formField);
+    // console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
@@ -260,16 +277,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Price Point<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
+                      value={formField.price_point ?? ''}
-                      min={0}
+                      thousandSeparator="."
-                      step={0.01}
+                      decimalSeparator=","
-                      value={formField.price_point}
+                      allowNegative={false}
-                      onChange={(e) => {
+                      onValueChange={(values) => {
-                        const value = parseFloat(e.target.value);
+                        setFormField((prev) => ({
-                        setFormField({ ...formField, price_point: isNaN(value) ? 0 : value });
+                          ...prev,
+                          price_point: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Price Point"
                     />
                   </div>
                 </div>
@@ -279,16 +299,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Price Cash<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
+                      value={formField.price_cash ?? ''}
-                      min={0}
+                      thousandSeparator="."
-                      step={0.01}
+                      decimalSeparator=","
-                      value={formField.price_cash}
+                      allowNegative={false}
-                      onChange={(e) => {
+                      onValueChange={(values) => {
-                        const value = parseFloat(e.target.value);
+                        setFormField((prev) => ({
-                        setFormField({ ...formField, price_cash: isNaN(value) ? 0 : value });
+                          ...prev,
+                          price_cash: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Price Cash"
                     />
                   </div>
                 </div>
@@ -298,16 +321,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Cashback Point<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
+                      value={formField.cashback_point ?? ''}
-                      min={0}
+                      thousandSeparator="."
-                      step={0.01}
+                      decimalSeparator=","
-                      value={formField.cashback_point}
+                      allowNegative={false}
-                      onChange={(e) => {
+                      onValueChange={(values) => {
-                        const value = parseFloat(e.target.value);
+                        setFormField((prev) => ({
-                        setFormField({ ...formField, cashback_point: isNaN(value) ? 0 : value });
+                          ...prev,
+                          cashback_point: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Cashback Point"
                     />
                   </div>
                 </div>
@@ -317,16 +343,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Cashback Cash<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
+                      value={formField.cashback_cash ?? ''}
-                      min={0}
+                      thousandSeparator="."
-                      step={0.01}
+                      decimalSeparator=","
-                      value={formField.cashback_cash}
+                      allowNegative={false}
-                      onChange={(e) => {
+                      onValueChange={(values) => {
-                        const value = parseFloat(e.target.value);
+                        setFormField((prev) => ({
-                        setFormField({ ...formField, cashback_cash: isNaN(value) ? 0 : value });
+                          ...prev,
+                          cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Cashback Cash"
                     />
                   </div>
                 </div>

src/pages/master/products/hooks/ManageProductsContext.tsx

@@ -72,6 +72,19 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
+      {
+        accessorFn: (row) => row.code,
+        id: 'code',
+        header: ({ column }) => <DataGridColumnHeader title="Code" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[100px]'
+        },
+        filterFn: (row, id, value) => {
+          return row.original.products_name.toLowerCase().includes(value.toLowerCase());
+        }
+      },
       {
         accessorFn: (row) => row.name,
         id: 'name',
@@ -89,12 +102,32 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
         accessorFn: (row) => row.description,
         id: 'description',
         header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: {
           headerClassName: 'w-[250px]'
         }
       },
+      {
+        accessorFn: (row) => row.provider?.name,
+        id: 'provider_name',
+        header: ({ column }) => <DataGridColumnHeader title="Provider Name" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.type,
+        id: 'type',
+        header: ({ column }) => <DataGridColumnHeader title="Type" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[150px]'
+        }
+      },
       {
         accessorFn: (row) => row.price_point,
         id: 'price_point',
@@ -115,6 +148,64 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
           headerClassName: 'w-[100px]'
         }
       },
+      {
+        accessorFn: (row) => row.cashback_point,
+        id: 'cashback_point',
+        header: ({ column }) => <DataGridColumnHeader title="Cashback Point" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[100px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.cashback_cash,
+        id: 'cashback_cash',
+        header: ({ column }) => <DataGridColumnHeader title="Cashback Cash" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[100px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.process_on_third_party,
+        id: 'process_on_third_party',
+        header: ({ column }) => <DataGridColumnHeader title="Third Party" column={column} />,
+        cell: ({ row }) => {
+          const isActive = row.original.process_on_third_party === 'Y';
+
+          return <span>{isActive ? 'Yes' : 'No'}</span>;
+        },
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[100px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.status,
+        id: 'status',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        cell: ({ row }) => {
+          const isActive = row.original.status === 'Y';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
+              }`}
+            >
+              {isActive ? 'Active' : 'Inactive'}
+            </span>
+          );
+        },
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[100px]'
+        }
+      },
       {
         id: 'actions',
         header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
@@ -160,7 +251,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      // console.log(response?.data);
+      console.log(response?.data);
       setProducts(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {