feat: rebate page (#485)

apps/web/src/app/[lang]/app/[type]/template/preview/page.tsx

@@ -310,9 +310,9 @@ const data = [
 function MyDataTable() {
   return (
     <div>
-      <div className="mt-4  flex justify-end-between">
-        <Input placeholder="SIS" />
-        <Button className="mx-9">Calculate</Button>
+      <div className="mt-4 flex justify-end-between">
+        <Input placeholder="SIS" type="number" />
+        <Button className="ml-9">Calculate</Button>
       </div>
       <DataTable
         columnsData={{

apps/web/src/app/[lang]/app/[type]/template/rebate/page.tsx

@@ -74,18 +74,66 @@ function AmountCell({ getValue, row: { index }, column: { id }, table }: any) {
   );
 }
 
+const feescolumns: ColumnDef<Record<string, any>>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        aria-label="Select all"
+        checked={table.getIsAllPageRowsSelected()}
+        onCheckedChange={(value) => {
+          table.toggleAllPageRowsSelected(Boolean(value));
+        }}
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        aria-label="Select row"
+        checked={row.getIsSelected()}
+        onCheckedChange={() => {
+          row.toggleSelected();
+        }}
+      />
+    ),
+  },
+  {
+    accessorKey: "name",
+    header: () => <div className="text-center">Name</div>,
+    cell: (props) => <NameCell {...props} />,
+  },
+  {
+    accessorKey: "amount",
+    header: () => <div className="text-center">Amount</div>,
+    cell: (props) => <AmountCell {...props} />,
+  },
+  {
+    accessorKey: "actions",
+    enableHiding: false,
+    cell: ({ row, table }) => (
+      <Button
+        onClick={() => {
+          table.options.meta?.removeRow(row.index, "actions", null);
+        }}
+        variant="ghost"
+      >
+        <TrashIcon className="w-4 h-4 text-red-500" />
+      </Button>
+    ),
+  },
+];
+
 function SetupCell({ getValue, row: { index }, column: { id }, table }: any) {
-  const initialValue = getValue() as string | undefined;
-  const [value, setValue] = useState<string | undefined>(initialValue);
+  const setupValue = getValue() as string | undefined;
+  const [value, setValue] = useState<string | undefined>(setupValue);
 
   const onChange = (newValue: string): void => {
     setValue(newValue);
     table.options.meta?.updateData(index, id, newValue);
   };
 
   useEffect(() => {
-    setValue(initialValue);
-  }, [initialValue]);
+    setValue(setupValue);
+  }, [setupValue]);
 
   return (
     <Select onValueChange={onChange} value={value}>
@@ -107,17 +155,17 @@ function SetupCell({ getValue, row: { index }, column: { id }, table }: any) {
   );
 }
 
-function PercentCell({ getValue, row: { index }, column: { id }, table }: any) {
-  const initialValue = getValue();
-  const [value, setValue] = useState(initialValue);
+function Fixedfee({ getValue, row: { index }, column: { id }, table }: any) {
+  const fixedFeeValue = getValue();
+  const [value, setValue] = useState(fixedFeeValue);
 
   const onBlur = (): void => {
     table.options.meta?.updateData(index, id, value);
   };
 
   useEffect(() => {
-    setValue(initialValue);
-  }, [initialValue]);
+    setValue(fixedFeeValue);
+  }, [fixedFeeValue]);
 
   return (
     <Input
@@ -131,48 +179,57 @@ function PercentCell({ getValue, row: { index }, column: { id }, table }: any) {
   );
 }
 
-const feescolumns: ColumnDef<Record<string, any>>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        aria-label="Select all"
-        checked={table.getIsAllPageRowsSelected()}
-        onCheckedChange={(value) => {
-          table.toggleAllPageRowsSelected(Boolean(value));
-        }}
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        aria-label="Select row"
-        checked={row.getIsSelected()}
-        onCheckedChange={() => {
-          row.toggleSelected();
-        }}
-      />
-    ),
-  },
-  {
-    accessorKey: "name",
-    header: () => <div className="text-center">Name</div>,
-    cell: (props) => <NameCell {...props} />,
-  },
-  {
-    accessorKey: "amount",
-    header: () => <div className="text-center">Amount</div>,
-    cell: (props) => <AmountCell {...props} />,
-  },
-  {
-    accessorKey: "actions",
-    enableHiding: false,
-    cell: () => (
-      <Button variant="ghost">
-        <TrashIcon className="w-4 h-4 text-red-500" />
-      </Button>
-    ),
-  },
-];
+function Variablefee({ getValue, row: { index }, column: { id }, table }: any) {
+  const variableFeeValue = getValue() as string | undefined;
+  const [value, setValue] = useState<string | undefined>(variableFeeValue);
+
+  const onChange = (newValue: string): void => {
+    setValue(newValue);
+    table.options.meta?.updateData(index, id, newValue);
+  };
+
+  useEffect(() => {
+    setValue(variableFeeValue);
+  }, [variableFeeValue]);
+
+  return (
+    <Select onValueChange={onChange} value={value}>
+      <SelectTrigger className="w-full text-center">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="% of GC">% of GC</SelectItem>
+        <SelectItem value="% of GC without VAT">% of GC without VAT</SelectItem>
+        <SelectItem value="% of VAT">% of VAT</SelectItem>
+        <SelectItem value="% of SIS">% of SIS</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}
+
+function PercentCell({ getValue, row: { index }, column: { id }, table }: any) {
+  const percentValue = getValue();
+  const [value, setValue] = useState(percentValue);
+
+  const onBlur = (): void => {
+    table.options.meta?.updateData(index, id, value);
+  };
+
+  useEffect(() => {
+    setValue(percentValue);
+  }, [percentValue]);
+
+  return (
+    <Input
+      onBlur={onBlur}
+      onChange={(e) => {
+        setValue(e.target.value);
+      }}
+      type="number"
+      value={value as string}
+    />
+  );
+}
 
 const setupcolumns: ColumnDef<Record<string, any>>[] = [
   {
@@ -202,12 +259,12 @@ const setupcolumns: ColumnDef<Record<string, any>>[] = [
   {
     accessorKey: "fixedfee",
     header: () => <div className="text-center">Fixed fee</div>,
-    cell: (props) => <AmountCell {...props} />,
+    cell: (props) => <Fixedfee {...props} />,
   },
   {
     accessorKey: "variablefee",
     header: () => <div className="text-center">Variable fee</div>,
-    cell: (props) => <SetupCell {...props} />,
+    cell: (props) => <Variablefee {...props} />,
   },
   {
     accessorKey: "percent",
@@ -217,8 +274,13 @@ const setupcolumns: ColumnDef<Record<string, any>>[] = [
   {
     accessorKey: "actions",
     enableHiding: false,
-    cell: () => (
-      <Button variant="ghost">
+    cell: ({ row, table }) => (
+      <Button
+        onClick={() => {
+          table.options.meta?.removeRow(row.index, "actions", null);
+        }}
+        variant="ghost"
+      >
         <Trash2Icon className="w-4 h-4 text-red-500" />
       </Button>
     ),
@@ -227,39 +289,44 @@ const setupcolumns: ColumnDef<Record<string, any>>[] = [
 
 function Rebate() {
   const [autoFormData, setAutoFormData] = useState<Record<string, any>>({});
-  const [feesData] = useState(initialFeesData);
-  const [setupData] = useState(initialSetupData);
+  const [feesData, setFeesData] = useState(initialFeesData);
+  const [setupData, setSetupData] = useState(initialSetupData);
 
   const handleFormChange = (newFormData: any): void => {
     setAutoFormData(newFormData);
   };
 
-  const handleSubmit = (): void => {
+  const handleSubmit = () => {
     const filteredFeesData = feesData.filter((row) => !isRowEmpty(row));
     const filteredSetupData = setupData.filter((row) => !isRowEmpty(row));
 
     const payload: any = {
       autoFormData,
+      feesData: filteredFeesData,
+      setupData: filteredSetupData,
     };
-
-    if (filteredFeesData.length > 0) {
-      payload.feesData = filteredFeesData;
-    }
-
-    if (filteredSetupData.length > 0) {
-      payload.setupData = filteredSetupData;
-    }
+    return payload;
   };
 
   const isRowEmpty = (row: any): boolean => {
     return Object.values(row).every((value) => value === "" || value === null);
   };
 
+  const feesHeaders = { name: "", amount: "" };
+
+  const setupHeaders = {
+    refundmethod: "",
+    fixedfee: "",
+    variablefee: "",
+    percent: "",
+  };
+
   return (
     <div className="flex flex-row w-full h-full ">
       <Card className="bg-transparent border-0 shadow-none w-full overflow-auto pb-16 m-0">
         <CardHeader className="text-2xl font-bold flex flex-row gap-2 items-center">
-          <EditIcon className="text-slate-600 w-6" /> Edit Template Information
+          <EditIcon className="text-slate-600 w-6" />
+          Edit Template Information
         </CardHeader>
         <CardContent>
           <div className="px-9 [&>div>form>div]:space-y-4">
@@ -282,12 +349,14 @@ function Rebate() {
             </div>
             <div className="overflow-auto">
               <DataTable
+                Headertable={feesHeaders}
                 columnsData={{
                   type: "Custom",
                   data: feescolumns,
                 }}
                 data={feesData}
                 editable
+                onDataUpdate={() => { setFeesData(initialFeesData); }}
                 showView={false}
               />
             </div>
@@ -300,12 +369,14 @@ function Rebate() {
             </div>
             <div className="overflow-auto">
               <DataTable
+                Headertable={setupHeaders}
                 columnsData={{
                   type: "Custom",
                   data: setupcolumns,
                 }}
                 data={setupData}
                 editable
+                onDataUpdate={() => { setSetupData(initialSetupData); }}
                 showView={false}
               />
             </div>