update: client service table display

src/apis/api_services.ts

@@ -0,0 +1,31 @@
+import apis from "./axios";
+import { SERVICE_ALL, SERVICE_W_CLIENT } from "./req_list";
+import { RES_STATUS } from "@/configs/types";
+
+export const serviceAll = async () => {
+    try {
+        const response = await apis.get(SERVICE_ALL);
+        return response.data;
+    } catch (err: unknown) {
+        console.log("-> retrieve all service error: ", err);
+        return {
+            status: RES_STATUS.FAILED,
+            msg: "failed in retrieving all services",
+            data: "",
+        };
+    }
+};
+
+export const serviceWClient = async (cid: string) => {
+    try {
+        const response = await apis.post(SERVICE_W_CLIENT, { cid });
+        return response.data;
+    } catch (err: unknown) {
+        console.log("-> retrieve client services error: ", err);
+        return {
+            status: RES_STATUS.FAILED,
+            msg: "failed in retrieving client services",
+            data: "",
+        };
+    }
+};

src/apis/index.ts

@@ -5,6 +5,7 @@ import * as API_ORDER from "./api_orders";
 import * as API_STAFF from "./api_staff";
 import * as API_PAYSLIP from "./api_payslip";
 import * as API_CHART from "./api_chart";
+import * as API_SERVICE from "./api_services";
 
 export {
     API_ADMIN,
@@ -14,4 +15,5 @@ export {
     API_ORDER,
     API_STAFF,
     API_PAYSLIP,
+    API_SERVICE,
 };

src/apis/req_list.ts

@@ -58,6 +58,10 @@ export const PAYMENT_UPDATE = "/api/order/updatePayments";
 export const INVOICE_ISSUE_UPDATE = "/api/order/updateInvoiceIssue";
 export const ORDER_ALL_ARRANGEMENT = "/api/order/all_arrangement";
 
+// Service
+export const SERVICE_ALL = "/api/service/all";
+export const SERVICE_W_CLIENT = "/api/service/withClientID";
+
 // Assist
 export const SETTING_UNI_ALL = "/api/setting/uni_all";
 export const SETTING_UNI_ADD = "/api/setting/uni_add";

src/components/table/tableBtn/OrderStatusBtn.tsx

@@ -24,9 +24,9 @@ const OrderStatusBtn: FC<Tprops> = ({ mLabel, data }) => {
     const submit = useSubmit();
     const currentRouter = useRouterStore((state) => state.currentRouter);
 
-    const handleClick = async (oid: string, status: string) => {
+    const handleClick = async (cid: string, oid: string, status: string) => {
         submit(
-            { req: "orderStatus", oid, status },
+            { req: "orderStatus", cid, oid, status },
             {
                 method: "PUT",
                 action:
@@ -49,7 +49,7 @@ const OrderStatusBtn: FC<Tprops> = ({ mLabel, data }) => {
                 <div
                     onClick={() => {
                         //e.preventDefault();
-                        handleClick(data.oid, item);
+                        handleClick(data.fk_cid, data.oid, item);
                     }}
                     className="flex w-full items-center rounded-md px-2 text-md font-bold"
                 >

src/components/table/tableBtn/ServiceStatusBtn.tsx

@@ -0,0 +1,74 @@
+import type { FC, ReactNode } from "react";
+import { useSubmit } from "react-router-dom";
+import { useRouterStore } from "@/configs/zustore";
+import { capFirstLetter, genAction } from "@/lib/literals";
+import { ORDER_STATUS } from "@/configs/utils/setting";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    // DropdownMenuLabel,
+    // DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { statusColor } from "@/configs/utils/color";
+import { TclientService } from "@/configs/schema/serviceSchema";
+
+type Tprops = {
+    mLabel: ReactNode | string;
+    data: TclientService;
+};
+
+// this menu btn group component is highly designed for order status change usage
+const ServiceStatusBtn: FC<Tprops> = ({ mLabel, data }) => {
+    const submit = useSubmit();
+    const currentRouter = useRouterStore((state) => state.currentRouter);
+
+    const handleClick = async (csid: string, status: string) => {
+        submit(
+            { req: "ServiceStatus", csid, status },
+            {
+                method: "PUT",
+                action:
+                    currentRouter === "client"
+                        ? genAction(currentRouter, data.fk_cid)
+                        : genAction(currentRouter),
+            }
+        );
+    };
+
+    const menuContent = ORDER_STATUS.map((item, index) => {
+        if (item.toLocaleLowerCase() === data.status.toLocaleLowerCase())
+            return;
+
+        return (
+            <DropdownMenuItem
+                key={index}
+                className={`${statusColor[item].text} ${statusColor[item].fbg} ${statusColor[item].ftext}`}
+            >
+                <div
+                    onClick={() => {
+                        //e.preventDefault();
+                        handleClick(data.csid, item);
+                    }}
+                    className="flex w-full items-center rounded-md px-2 text-md font-bold"
+                >
+                    {capFirstLetter(item)}
+                </div>
+            </DropdownMenuItem>
+        );
+    }).filter((item) => item !== null && item !== undefined);
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger className="outline-none ring-0 cursor-pointer">
+                {mLabel}
+            </DropdownMenuTrigger>
+            {menuContent ? (
+                <DropdownMenuContent>{menuContent}</DropdownMenuContent>
+            ) : null}
+        </DropdownMenu>
+    );
+};
+
+export default ServiceStatusBtn;

src/configs/atoms/atOrderWithClient.ts

@@ -1,10 +1,12 @@
 import { atom } from "jotai";
 import {
-    TorderService,
     TorderWithClient,
     orderWithClientSchema,
 } from "@/configs/schema/orderSchema";
-import { orderServiceSchema } from "../schema/orderServiceSchema";
+import {
+    orderServiceSchema,
+    TorderService,
+} from "../schema/orderServiceSchema";
 
 const atOrderWithClient = atom<TorderWithClient>(
     orderWithClientSchema.parse({})

src/configs/columnDefs/defClientService.tsx

@@ -0,0 +1,98 @@
+import { ColumnDef, CellContext } from "@tanstack/react-table";
+import i18n from "@/configs/i18n";
+import { TclientService } from "../schema/serviceSchema";
+import ServiceStatusBtn from "@/components/table/tableBtn/ServiceStatusBtn";
+import { StatusBadge } from "@/components/Badge";
+import { TstatusColor } from "../types";
+import { dateFormat } from "@/lib/time";
+
+const useClientServiceColumnsDef = () => {
+    const clientServiceColumns: ColumnDef<TclientService>[] = [
+        /* {
+            id: "Menu",
+            header: i18n.t("label.menu"),
+        }, */
+
+        {
+            id: "csid",
+            header: i18n.t("label.serviceID"),
+            accessorKey: "csid",
+            cell: (info: CellContext<TclientService, unknown>) => (
+                <span className="text-wrap">{info.getValue<string>()}</span>
+            ),
+        },
+        {
+            id: "title",
+            header: i18n.t("label.title"),
+            accessorKey: "title",
+            cell: (info: CellContext<TclientService, unknown>) => (
+                <span className="text-wrap">{info.getValue<string>()}</span>
+            ),
+        },
+        {
+            id: "type",
+            header: i18n.t("label.serviceType"),
+            accessorKey: "service_type",
+            cell: (info: CellContext<TclientService, unknown>) => (
+                <span className="text-wrap">{info.getValue<string>()}</span>
+            ),
+        },
+        {
+            id: "productName",
+            header: i18n.t("label.productName"),
+            accessorKey: "product_name",
+            cell: (info: CellContext<TclientService, unknown>) => (
+                <span className="text-wrap">{info.getValue<string>()}</span>
+            ),
+        },
+        {
+            id: "serviceStatus",
+            header: i18n.t("label.status"),
+            accessorKey: "status",
+            cell: (info: CellContext<TclientService, unknown>) => {
+                return (
+                    <ServiceStatusBtn
+                        mLabel={
+                            <StatusBadge
+                                value={info.getValue() as TstatusColor}
+                            />
+                        }
+                        data={info.row.original as TclientService}
+                    />
+                );
+            },
+            meta: {
+                filterVariant: "select",
+            },
+        },
+        {
+            id: "createdDate",
+            header: i18n.t("label.createdDate"),
+            accessorKey: "created_date",
+            cell: (info: CellContext<TclientService, unknown>) => (
+                <span className="text-wrap">
+                    {dateFormat(info.getValue<string>(), "au")}
+                </span>
+            ),
+        },
+        {
+            id: "expiryDate",
+            header: i18n.t("label.expiredDate"),
+            accessorKey: "expiry_date",
+            cell: (info: CellContext<TclientService, unknown>) => (
+                <span className="text-wrap">{info.getValue<string>()}</span>
+            ),
+        },
+        {
+            id: "note",
+            header: i18n.t("label.note"),
+            accessorKey: "note",
+            cell: (info: CellContext<TclientService, unknown>) => (
+                <span className="text-wrap">{info.getValue<string>()}</span>
+            ),
+        },
+    ];
+    return clientServiceColumns;
+};
+
+export default useClientServiceColumnsDef;

src/configs/columnDefs/defOrderDesc.tsx

@@ -1,8 +1,8 @@
 import { ColumnDef, CellContext } from "@tanstack/react-table";
 import i18n from "@/configs/i18n";
-import { TorderService } from "@/configs/schema/orderSchema";
 import { rangeFilterFn } from "./filterFn";
 import { formMoney } from "@/lib/literals";
+import { TorderService } from "../schema/orderServiceSchema";
 
 const useOrderDescColumnsDef = () => {
     const orderDescColumns: ColumnDef<TorderService>[] = [

src/configs/i18n/scriptEn.ts

@@ -210,7 +210,6 @@ const en = {
             net: "NET",
             newIssueDate: "New Issue Date",
             none: "None",
-            noContent: "No Content",
             openMenu: "Open Menu",
             orders: "Orders",
             orderDesc: "Order Description",
@@ -261,6 +260,7 @@ const en = {
             switch: "Switch",
             scheduleDate: "Schedule Date",
             service: "Service",
+            serviceID: "Service ID",
             services: "Services",
             serviceType: "Service Type",
             staff: "Staff",
@@ -317,6 +317,7 @@ const en = {
         tips: {
             noAssignedStaff: "No Assigned Staff",
             noOrder: "No Order",
+            noContent: "No Content",
             noServices: "No Service",
             noPayments: "No Payment",
             noPayslips: "No Payslip",

src/configs/schema/orderSchema.ts

@@ -80,7 +80,6 @@ export const orderWithClientSchema = plainOrderSchema.extend({
 
 export type TorderWithClient = z.infer<typeof orderWithClientSchema>;
 export type TorderForm = z.infer<typeof orderFormSchema>;
-export type TorderService = z.infer<typeof orderServiceSchema>;
 export type TorderPayment = z.infer<typeof orderPaymentSchema>;
 export type TorderAbstract = z.infer<typeof orderAbstractSchema>;
 export type Tpayment = {

src/configs/schema/serviceSchema.ts

@@ -0,0 +1,17 @@
+import { z } from "zod";
+import { ORDER_STATUS } from "../utils/setting";
+
+export const serviceSchema = z.object({
+    csid: z.string().default(""),
+    fk_cid: z.string().default(""),
+    title: z.string().trim().default(""),
+    service_type: z.string().trim().default(""),
+    product_name: z.string().trim().default(""),
+    status: z.string().default(ORDER_STATUS[0]), // pending
+    created_date: z.string().datetime().nullable().default(null),
+    expiry_date: z.string().datetime().nullable().default(null),
+    archive: z.boolean().default(false),
+    note: z.string().trim().default(""),
+});
+
+export type TclientService = z.infer<typeof serviceSchema>;

src/configs/utils/setting.ts

@@ -14,6 +14,22 @@ export const ORDER_STATUS = [
     "completed",
 ] as const;
 
+// shared with service status
+export const orderStatusList = [
+    { name: ORDER_STATUS[0] }, // pending
+    { name: ORDER_STATUS[1] }, // ongoing
+    { name: ORDER_STATUS[2] }, // cancelled
+    { name: ORDER_STATUS[3] }, // completed
+];
+
+export const SERVICE_TYPE = ["OOP", "CTM", "SUB"] as const;
+
+export const serviceTypeList = [
+    { name: SERVICE_TYPE[0] }, // OOP
+    { name: SERVICE_TYPE[1] }, // CTM
+    { name: SERVICE_TYPE[2] }, // SUB
+];
+
 // the value in this array must be the same as the value in statusColor keys
 export const WL_STATUS = [
     "pending",

src/pageComponents/cards/OrderDescCard.tsx

@@ -1,9 +1,9 @@
 import type { FC } from "react";
-import { TorderService } from "@/configs/schema/orderSchema";
 import { useTranslation } from "react-i18next";
 import Card from "@/components/Card";
 import { linearLargeBG } from "@/configs/utils/color";
 import { Btext } from "@/components/Btext";
+import { TorderService } from "@/configs/schema/orderServiceSchema";
 
 type Tprops = {
     data: TorderService[];

src/pageComponents/modals/mOrderForm/Form/FormContent.tsx

@@ -13,12 +13,13 @@ import {
     UseFormReturn,
     useWatch,
 } from "react-hook-form";
-import { TorderForm, TorderService } from "@/configs/schema/orderSchema";
+import { TorderForm } from "@/configs/schema/orderSchema";
 import { toastError } from "@/lib/toaster";
 import { atOrderWithClient } from "@/configs/atoms";
 import { useAtom } from "jotai";
 import { useRouterStore } from "@/configs/zustore";
 import { genAction } from "@/lib/literals";
+import { TorderService } from "@/configs/schema/orderServiceSchema";
 
 type Tprops = {
     register: UseFormReturn<TorderForm>["register"];

src/pageComponents/modals/mOrderForm/Form/RightColumn.tsx

@@ -7,10 +7,11 @@ import {
     UseFieldArraySwap,
     UseFormReturn,
 } from "react-hook-form";
-import { TorderForm, TorderService } from "@/configs/schema/orderSchema";
+import { TorderForm } from "@/configs/schema/orderSchema";
 import AppendNewService from "./AppendNewService";
 import { SubmitBtn } from "@/components/form";
 import { useNavigation } from "react-router-dom";
+import { TorderService } from "@/configs/schema/orderServiceSchema";
 
 type Tprops = {
     register: UseFormReturn<TorderForm>["register"];