imp: work arrangement

package.json

@@ -16,6 +16,7 @@
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
+        "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.7",

src/apis/api_orders.ts

@@ -10,6 +10,7 @@ import {
     PAYMENT_UPDATE,
     INVOICE_ISSUE_UPDATE,
     JOB_ASSIGN,
+    ORDER_ALL_ARRANGEMENT,
 } from "./req_list";
 
 export const orderAll = async () => {
@@ -129,7 +130,7 @@ export const updateInvoiceIssue = async (
 export const updateJobAssignment = async (
     data: TwlUnion[]
 ): Promise<Tresponse> => {
-    console.log("-> sending update job assignment req: ", data);
+    //console.log("-> sending update job assignment req: ", data);
     try {
         const response = await apis.post(JOB_ASSIGN, { workLogs: data });
         return response.data;
@@ -141,3 +142,17 @@ export const updateJobAssignment = async (
         };
     }
 };
+
+export const orderAllArrangement = async (): Promise<Tresponse> => {
+    try {
+        const response = await apis.get(ORDER_ALL_ARRANGEMENT);
+        return response.data;
+    } catch (err: unknown) {
+        console.log("-> retrieve all order arrangement error: ", err);
+        return {
+            status: 400,
+            msg: "failed in retrieving all order arrangement",
+            data: "",
+        };
+    }
+};

src/apis/req_list.ts

@@ -53,6 +53,7 @@ export const ORDER_W_CLIENT = "/order/withClientID";
 export const ORDER_STATUS = "/order/status";
 export const PAYMENT_UPDATE = "/order/updatePayments";
 export const INVOICE_ISSUE_UPDATE = "/order/updateInvoiceIssue";
+export const ORDER_ALL_ARRANGEMENT = "/order/all_arrangement";
 
 // Assist
 export const SETTING_UNI_ALL = "/setting/uni_all";

src/components/Badge/NameBadge.tsx

@@ -0,0 +1,32 @@
+import { colorWithStaffUid } from "@/configs/utils/color";
+import type { FC } from "react";
+
+/**
+ * @description badge component,
+ * @param color must contain:
+ *              - bg color / 200
+ *              - text color / 700
+ *              - ring color / 500-600
+ *              - e.g. text-slate-100 bg-lime-500 border-lime-600
+ * @param value badge value / name
+ * @returns
+ */
+type Tprops = {
+    name: string;
+    uid: string;
+};
+
+const NameBadge: FC<Tprops> = ({ name, uid }) => {
+    const color = colorWithStaffUid(uid);
+
+    return (
+        <span
+            className={`rounded-full border-2 font-bold py-1 px-2 
+            ${color.bg} ${color.border} ${color.text}`}
+        >
+            {name}
+        </span>
+    );
+};
+
+export default NameBadge;

src/components/Badge.tsx → src/components/Badge/StatusBadge.tsx

@@ -18,7 +18,7 @@ type Tprops = {
     value: TstatusColor | undefined;
 };
 
-const Badge: FC<Tprops> = ({ value }) => {
+const StatusBadge: FC<Tprops> = ({ value }) => {
     if (!value) {
         return <></>;
     }
@@ -32,4 +32,4 @@ const Badge: FC<Tprops> = ({ value }) => {
     );
 };
 
-export default Badge;
+export default StatusBadge;

src/components/Badge/index.tsx

@@ -0,0 +1,3 @@
+import StatusBadge from "./StatusBadge";
+import NameBadge from "./NameBadge";
+export { StatusBadge, NameBadge };

src/components/HoverTips.tsx

@@ -7,19 +7,30 @@ import {
 } from "@/components/ui/tooltip";
 
 type Tprops = {
-    content: string | ReactNode;
     tipsContent: string | ReactNode;
+    children: ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    delay?: number;
+    sideOffset?: number;
 };
 
-const HoverTips: FC<Tprops> = ({ content, tipsContent }) => {
+const HoverTips: FC<Tprops> = ({
+    children,
+    tipsContent,
+    side = "top",
+    delay = 500,
+    sideOffset = 4,
+}) => {
     return (
         <TooltipProvider>
-            <Tooltip>
+            <Tooltip delayDuration={delay}>
                 <TooltipTrigger>
                     {/* <Button variant="outline">Hover</Button> */}
-                    {content}
+                    {children}
                 </TooltipTrigger>
-                <TooltipContent>{tipsContent}</TooltipContent>
+                <TooltipContent side={side} sideOffset={sideOffset}>
+                    {tipsContent}
+                </TooltipContent>
             </Tooltip>
         </TooltipProvider>
     );

src/components/SingleField.tsx

@@ -1,25 +1,24 @@
-import type { FC, ReactElement } from "react";
+import type { ComponentPropsWithoutRef, FC, ReactElement } from "react";
 
-type Tprops = {
+type Tprops = ComponentPropsWithoutRef<"div"> & {
     label: ReactElement | string;
-    content: ReactElement | string;
     outClass?: string;
     spanClass?: string;
 };
 
 const SingleField: FC<Tprops> = ({
     label,
-    content,
+    children,
     outClass = "",
     spanClass = "",
 }) => {
     return (
         <div className={`flex items-center ${outClass}`}>
-            <div className="size-8 text-indigo-500 inline-flex">
+            <div className="size-8 text-indigo-500 flex justify-center">
                 {label}
                 :&nbsp;
             </div>
-            <span className={`text-md ${spanClass}`}>{content}</span>
+            <span className={`text-md ${spanClass}`}>{children}</span>
         </div>
     );
 };

src/components/ui/separator.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+    React.ElementRef<typeof SeparatorPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+    (
+        { className, orientation = "horizontal", decorative = true, ...props },
+        ref
+    ) => (
+        <SeparatorPrimitive.Root
+            ref={ref}
+            decorative={decorative}
+            orientation={orientation}
+            className={cn(
+                //"shrink-0 bg-borde",
+                "shrink-0 bg-indigo-200",
+                orientation === "horizontal"
+                    ? "h-[1px] w-full"
+                    : "h-full w-[1px]",
+                className
+            )}
+            {...props}
+        />
+    )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

src/configs/columnDefs/defClientOrder.tsx

@@ -2,7 +2,7 @@ import { ColumnDef, CellContext } from "@tanstack/react-table";
 import i18n from "@/configs/i18n";
 import { Torder } from "@/configs/schema/orderSchema";
 import { minusAB } from "@/lib/calculations";
-import Badge from "@/components/Badge";
+import { StatusBadge } from "@/components/Badge";
 import { TstatusColor } from "../types";
 import { dateFormat } from "@/lib/time";
 import { ExpandBtn, OrderStatusBtn } from "@/components/table/tableBtn";
@@ -45,7 +45,7 @@ const clientOrderColumns: ColumnDef<Torder>[] = [
                     return (
                         <OrderStatusBtn
                             mLabel={
-                                <Badge
+                                <StatusBadge
                                     value={info.getValue() as TstatusColor}
                                 />
                             }

src/configs/columnDefs/defOrders.tsx

@@ -4,7 +4,7 @@ import { Torder } from "../schema/orderSchema";
 import { minusAB } from "@/lib/calculations";
 import { dateFormat } from "@/lib/time";
 import { Atel } from "@/components/aLinks";
-import Badge from "@/components/Badge";
+import { StatusBadge } from "@/components/Badge";
 import { TstatusColor } from "../types";
 import { ExpandBtn, OrderStatusBtn } from "@/components/table/tableBtn";
 
@@ -79,7 +79,7 @@ const orderColumns: ColumnDef<Torder>[] = [
                     return (
                         <OrderStatusBtn
                             mLabel={
-                                <Badge
+                                <StatusBadge
                                     value={info.getValue() as TstatusColor}
                                 />
                             }

src/configs/columnDefs/defPayslip.tsx

@@ -1,7 +1,7 @@
 import i18n from "@/configs/i18n";
 import { ColumnDef, CellContext } from "@tanstack/react-table";
 import { Tpayslip } from "../schema/payslipSchema";
-import Badge from "@/components/Badge";
+import { StatusBadge } from "@/components/Badge";
 import { TstatusColor } from "../types";
 import { PSDisplayBtn, PSStatusBtn } from "@/components/table/tableBtn";
 
@@ -45,7 +45,7 @@ const payslipColumns: ColumnDef<Tpayslip>[] = [
         accessorKey: "status",
         cell: (info: CellContext<Tpayslip, unknown>) => (
             <PSStatusBtn
-                mLabel={<Badge value={info.getValue() as TstatusColor} />}
+                mLabel={<StatusBadge value={info.getValue() as TstatusColor} />}
                 data={info.row.original as Tpayslip}
             />
         ),

src/configs/columnDefs/defStaff.tsx

@@ -3,9 +3,6 @@ import i18n from "@/configs/i18n";
 import { TstaffWPayslip } from "../schema/staffSchema";
 import { colorWithStaffUid } from "../utils/color";
 import { BellAlertIcon } from "@heroicons/react/24/solid";
-//import { TstaffRole } from "@/configs/types";
-//import { capFirstLetter } from "@/lib/literals";
-//import { staffColorMap } from "../utils/color";
 import { Atel, Amail } from "@/components/aLinks";
 import { ExpandBtn } from "@/components/table/tableBtn";
 import HoverTips from "@/components/HoverTips";
@@ -25,7 +22,7 @@ const staffColumns: ColumnDef<TstaffWPayslip>[] = [
                     row={info.row}
                     name={
                         <span
-                            className={`${colorWithStaffUid(info.getValue<string>())}`}
+                            className={`${colorWithStaffUid(info.getValue<string>()).text}`}
                         >
                             {info.getValue<string>()}
                         </span>
@@ -45,11 +42,10 @@ const staffColumns: ColumnDef<TstaffWPayslip>[] = [
                         <div className="flex flex-row justify-center items-center">
                             <span>{info.getValue<string>()}</span>
                             <HoverTips
-                                content={
-                                    <BellAlertIcon className="pl-2 size-7 animate-bell-swing text-red-500" />
-                                }
                                 tipsContent={i18n.t("tips.unfinishedPS")}
-                            />
+                            >
+                                <BellAlertIcon className="pl-2 size-7 animate-bell-swing text-red-500" />
+                            </HoverTips>
                         </div>
                     );
                 }
@@ -86,18 +82,6 @@ const staffColumns: ColumnDef<TstaffWPayslip>[] = [
             <span>{info.getValue<string>()}</span>
         ),
     },
-    /* {
-        header: i18n.t("label.role"),
-        accessorKey: "role",
-        cell: (info: CellContext<TstaffWPayslip, unknown>) => {
-            const style = staffColorMap[info.getValue<string>() as TstaffRole];
-            return (
-                <span className={`${style}`}>
-                    {capFirstLetter(info.getValue<string>())}
-                </span>
-            );
-        },
-    }, */
     {
         id: "Menu",
         header: i18n.t("label.menu"),

src/configs/columnDefs/defWorkLogs.tsx

@@ -3,7 +3,7 @@ import i18n from "@/configs/i18n";
 import { TwlTableRow } from "../schema/workSchema";
 import { calWorkTime, dateFormat } from "@/lib/time";
 import { TstatusColor, TtimeBtnStyles } from "@/configs/types";
-import Badge from "@/components/Badge";
+import { StatusBadge } from "@/components/Badge";
 import TimeBtn from "@/pageComponents/TimeBtn";
 import { WLStatusBtn } from "@/components/table/tableBtn";
 import { colorWithStaffUid } from "../utils/color";
@@ -27,7 +27,7 @@ const wlColumns = [
                 accessorKey: "fk_uid",
                 cell: (info: CellContext<TwlTableRow, unknown>) => (
                     <span
-                        className={`${colorWithStaffUid(info.getValue<string>())}`}
+                        className={`${colorWithStaffUid(info.getValue<string>()).text}`}
                     >
                         {info.getValue<string>()}
                     </span>
@@ -133,7 +133,9 @@ const wlColumns = [
                 cell: (info: CellContext<TwlTableRow, unknown>) => (
                     <WLStatusBtn
                         mLabel={
-                            <Badge value={info.getValue() as TstatusColor} />
+                            <StatusBadge
+                                value={info.getValue() as TstatusColor}
+                            />
                         }
                         data={info.row.original as TwlTableRow}
                     />

src/configs/i18n/index.ts

@@ -6,7 +6,7 @@ import en from "./scriptEn";
 i18n.use(initReactI18next) // passes i18n down to react-i18next
     .init({
         resources: { en },
-        debug: true,
+        //debug: true,
         lng: "en", // language to use
         // you can use the i18n.changeLanguage function to change the language manually
         // if you're using a language detector, do not define the lng option