imp: deduction to worklog edit modal

package.json

@@ -16,6 +16,7 @@
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-tabs": "^1.0.4",
         "@react-pdf/renderer": "^3.4.0",
         "@reduxjs/toolkit": "^2.2.1",
         "@tailwindcss/forms": "^0.5.7",
@@ -54,7 +55,6 @@
         "tailwindcss": "^3.4.1",
         "tailwindcss-animate": "^1.0.7",
         "use-react-router-breadcrumbs": "^4.0.1",
-        "uuid": "^9.0.1",
         "vite": "^5.1.6",
         "zod": "^3.22.4",
         "zustand": "^4.5.2"

src/apis/api_worklogs.ts

@@ -1,7 +1,8 @@
-import { TworkLog } from "@/configs/schema/workSchema";
+import { Tdeduction, TworkLog } from "@/configs/schema/workSchema";
 import apis from "./axios";
 import {
     WL_ALL,
+    WL_SINGLE_UPDATE,
     WL_PAUSE_TIMER,
     WL_RESET_TIMER,
     WL_RESUME_TIMER,
@@ -40,6 +41,31 @@ export const wlSingleUpdateHours = async (
     }
 };
 
+/**
+ * @description update work log working hours and deduction
+ * @param data
+ * @param deduction
+ * @returns
+ */
+export const wlSigleUpdate = async (
+    data: Partial<TworkLog>,
+    deduction: Partial<Tdeduction>
+): Promise<Tresponse> => {
+    try {
+        const response = await apis.post(WL_SINGLE_UPDATE, {
+            hourData: data,
+            deduction,
+        });
+        return response.data;
+    } catch (error) {
+        return {
+            status: 400,
+            msg: "failed in updating work log",
+            data: "",
+        };
+    }
+};
+
 export const wlSingleDel = async (wlid: string): Promise<Tresponse> => {
     try {
         const response = await apis.delete(WL_SINGLE_DEL, {
@@ -132,3 +158,25 @@ export const wlStopTimer = async (wlid: string): Promise<Tresponse> => {
         };
     }
 };
+
+/**
+ * @description not used
+ * @param wlid
+ * @param dedunction
+ * @returns
+ */
+export const wlDeductionUpdate = async (
+    wlid: string,
+    dedunction: Partial<Tdeduction>
+): Promise<Tresponse> => {
+    try {
+        const response = await apis.post(WL_SINGLE_UPDATE, dedunction);
+        return response.data;
+    } catch (error) {
+        return {
+            status: 400,
+            msg: "failed in appending deduction",
+            data: "",
+        };
+    }
+};

src/apis/req_list.ts

@@ -32,6 +32,7 @@ export const WL_RESET_TIMER = "/work/reset-timer";
 export const WL_PAUSE_TIMER = "/work/pause-timer";
 export const WL_RESUME_TIMER = "/work/resume-timer";
 export const WL_STOP_TIMER = "/work/stop-timer";
+export const WL_SINGLE_UPDATE = "/work/single-update";
 // Staff
 export const STAFF_ALL = "/staff/all";
 export const STAFF_INFO = "/staff/info";

src/components/table/SwitchWContent.tsx → src/components/table/SubTableSwitch.tsx

@@ -7,7 +7,7 @@ type Tprops = {
     items: { title: string; content: JSX.Element }[];
 };
 
-const ContentWithSwitch: FC<Tprops> = ({ items }) => {
+const SubTableSwitch: FC<Tprops> = ({ items }) => {
     const [isChecked, setIsChecked] = useState(false);
     return (
         <div className="grid grid-cols-8 my-2">
@@ -31,4 +31,4 @@ const ContentWithSwitch: FC<Tprops> = ({ items }) => {
     );
 };
 
-export default ContentWithSwitch;
+export default SubTableSwitch;

src/components/tabs/SdTabs.tsx

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithoutRef, FC } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { TitemContent } from "@/configs/types";
+
+type Tprops = ComponentPropsWithoutRef<"div"> & {
+    defaultV?: string;
+    items: TitemContent[];
+};
+
+const SdTabs: FC<Tprops> = ({ defaultV = "", items, className }) => {
+    const value = defaultV || items[0].title;
+
+    return (
+        <Tabs defaultValue={value} className={`${className}`}>
+            <TabsList className="">
+                <section className="rounded-md bg-indigo-100 text-gray-600">
+                    {items.map((item) => {
+                        return (
+                            <TabsTrigger value={item.title} className="">
+                                {item.title}
+                            </TabsTrigger>
+                        );
+                    })}
+                </section>
+            </TabsList>
+            {items.map((item) => {
+                return (
+                    <TabsContent value={item.title} className="">
+                        {item.content}
+                    </TabsContent>
+                );
+            })}
+        </Tabs>
+    );
+};
+
+export default SdTabs;

src/components/tabs/index.tsx

@@ -0,0 +1,3 @@
+import Tabs from "./tabs";
+import SdTabs from "./SdTabs";
+export { Tabs, SdTabs };

src/components/ui/tabs.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.List>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.List
+        ref={ref}
+        className={cn(
+            "flex h-10 items-center justify-center",
+            //"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+            className
+        )}
+        {...props}
+    />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.Trigger
+        ref={ref}
+        className={cn(
+            "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-md font-bold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-indigo-500 data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=active]:text-slate-50",
+            className
+        )}
+        {...props}
+    />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.Content
+        ref={ref}
+        className={cn(
+            "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            className
+        )}
+        {...props}
+    />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

src/configs/i18n/scriptEn.ts

@@ -275,6 +275,7 @@ const en = {
             npPreUnit: "No Pre-set Unit",
             noSelectedDayRange: "No Selected Day Range",
             noDutyToday: "No Work Assignment Today",
+            noDeduction: "No Deduction",
         },
         toastS: {
             addOrder: "Added A New Order.",

src/configs/schema/payslipSchema.ts

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { deductionSchema } from "./workSchema";
 
 const payslipSchema = z.object({
     psid: z.string().default(""),
@@ -19,18 +20,10 @@ const bonusSchema = z.object({
     amount: z.number().default(0),
 });
 
-const deductionSchema = z.object({
-    fk_psid: z.string().default(""),
-    fk_uid: z.string().default(""),
-    note: z.string().trim().nullable().default(""),
-    amount: z.number().default(0),
-});
-
 const payslipsSchema = payslipSchema.extend({
     bonus: bonusSchema.array().default([]),
     deduction: deductionSchema.array().default([]),
 });
 
 export type Tpayslips = z.infer<typeof payslipsSchema>;
 export type Tbonus = z.infer<typeof bonusSchema>;
-export type Tdedcution = z.infer<typeof deductionSchema>;

src/configs/schema/workSchema.ts

@@ -108,8 +108,16 @@ export const wlTableRowSchema = assignedWorkSchema.extend({
     postcode: z.string().trim().nullable().default(""),
 });
 
+export const deductionSchema = z.object({
+    did: z.string().default(""),
+    fk_wlid: z.string().default(""),
+    note: z.string().trim().nullable().default(""),
+    amount: z.number().default(0),
+});
+
 export type TworkLog = z.infer<typeof workLogSchema>;
 export type TassignedWork = z.infer<typeof assignedWorkSchema>;
 export type TworkLogs = z.infer<typeof workLogsSchema>;
 export type TformWorkLogs = z.infer<typeof formWorkLogs>;
 export type TwlTableRow = z.infer<typeof wlTableRowSchema>;
+export type Tdeduction = z.infer<typeof deductionSchema>;

src/configs/types.ts

@@ -59,3 +59,5 @@ export type TwlStatus = keyof typeof wlStatusColorMap;
 export type TactionReqList = (typeof actionReqList)[keyof typeof actionReqList];
 
 export type TmenuOptions = Partial<typeof defaultMenuOptions>;
+
+export type TitemContent = { title: string; content: JSX.Element };

src/configs/zustore/payslipStore.ts

@@ -2,13 +2,14 @@ import { useStore } from "zustand";
 import { createStore } from "zustand/vanilla";
 import { DateRange } from "react-day-picker";
 import { TwlTableRow } from "../schema/workSchema";
-import { Tbonus, Tdedcution, Tpayslips } from "../schema/payslipSchema";
+import { Tbonus, Tpayslips } from "../schema/payslipSchema";
+import { Tdeduction } from "../schema/workSchema";
 
 type Tstate = {
     dayRange: DateRange;
     staffWL: TwlTableRow[];
     bonus: Partial<Tbonus>[];
-    dedcution: Partial<Tdedcution>[];
+    deduction: Partial<Tdeduction>[];
     payslip: Partial<Tpayslips>;
 };
 
@@ -23,7 +24,7 @@ type Taction = {
     /* deduction */
     setDeductionAmount: (index: number, amount: number) => void;
     setDeductionNote: (index: number, note: string) => void;
-    appendDeduction: (dedcution: Partial<Tdedcution>) => void;
+    appendDeduction: (deduction: Partial<Tdeduction>) => void;
     removeDeduction: (index: number) => void;
 };
 
@@ -32,7 +33,7 @@ export const payslipStore = createStore<Tstate & Taction>((set) => ({
     dayRange: { from: undefined, to: undefined },
     staffWL: [],
     bonus: [],
-    dedcution: [],
+    deduction: [],
     setDayRange: (range: DateRange | undefined) => set({ dayRange: range }),
     setStaffWL: (worklogs: TwlTableRow[]) =>
         set((state) => ({
@@ -62,25 +63,25 @@ export const payslipStore = createStore<Tstate & Taction>((set) => ({
     /* deduction */
     setDeductionAmount: (index: number, amount: number) =>
         set((state) => {
-            const newDeduction = [...state.dedcution];
+            const newDeduction = [...state.deduction];
             newDeduction[index] = { ...newDeduction[index], amount };
-            return { ...state, dedcution: newDeduction };
+            return { ...state, deduction: newDeduction };
         }),
     setDeductionNote: (index: number, note: string) =>
         set((state) => {
-            const newDeduction = [...state.dedcution];
+            const newDeduction = [...state.deduction];
             newDeduction[index] = { ...newDeduction[index], note };
-            return { ...state, dedcution: newDeduction };
+            return { ...state, deduction: newDeduction };
         }),
-    appendDeduction: (dedcution: Partial<Tdedcution>) =>
+    appendDeduction: (deduction: Partial<Tdeduction>) =>
         set((state) => ({
             ...state,
-            dedcution: [...state.dedcution, dedcution],
+            deduction: [...state.deduction, deduction],
         })),
     removeDeduction: (index: number) =>
         set((state) => {
-            const newDeduction = state.dedcution.filter((_, i) => i !== index);
-            return { ...state, dedcution: newDeduction };
+            const newDeduction = state.deduction.filter((_, i) => i !== index);
+            return { ...state, deduction: newDeduction };
         }),
 }));