imp: preset services

src/configs/columnDefs/defOrderService.tsx

@@ -56,54 +56,39 @@ const useOrderServiceColumnsDef = () => {
             },
         },
         {
-            id: "createdDate",
-            header: i18n.t("label.createdDate"),
-            accessorKey: "created_date",
+            header: i18n.t("label.serviceType"),
+            accessorKey: "service_type",
             cell: (info: CellContext<TorderService, unknown>) => {
                 return (
-                    <span>{dateFormat(info.getValue() as string, "au")}</span>
+                    <span className="text-wrap">{info.getValue<string>()}</span>
                 );
             },
         },
         {
-            id: "expiredDate",
-            header: i18n.t("label.expiredDate"),
-            accessorKey: "expiry_date",
-            cell: (info: CellContext<TorderService, unknown>) => {
-                return <span>{formExpiryDate(info.getValue() as string)}</span>;
-            },
-        },
-        {
-            header: i18n.t("label.qty"),
-            accessorKey: "qty",
+            header: i18n.t("label.productName"),
+            accessorKey: "product_name",
             cell: (info: CellContext<TorderService, unknown>) => {
-                return <span>{info.getValue<number>()}</span>;
-            },
-            filterFn: rangeFilterFn,
-            meta: {
-                filterVariant: "range",
+                return (
+                    <span className="text-wrap">{info.getValue<string>()}</span>
+                );
             },
         },
         {
-            header: i18n.t("label.unit"),
-            accessorKey: "unit",
+            id: "createdDate",
+            header: i18n.t("label.createdDate"),
+            accessorKey: "created_date",
             cell: (info: CellContext<TorderService, unknown>) => {
-                return <span>{info.getValue<number>()}</span>;
-            },
-            filterFn: rangeFilterFn,
-            meta: {
-                filterVariant: "range",
+                return (
+                    <span>{dateFormat(info.getValue() as string, "au")}</span>
+                );
             },
         },
         {
-            header: i18n.t("label.uPrice"),
-            accessorKey: "unit_price",
+            id: "expiredDate",
+            header: i18n.t("label.expiredDate"),
+            accessorKey: "expiry_date",
             cell: (info: CellContext<TorderService, unknown>) => {
-                return <span>{formMoney(info.getValue<number>())}</span>;
-            },
-            filterFn: rangeFilterFn,
-            meta: {
-                filterVariant: "range",
+                return <span>{formExpiryDate(info.getValue() as string)}</span>;
             },
         },
         {

src/configs/columnDefs/defUniList.tsx

@@ -23,6 +23,20 @@ export const serviceListColDefs = [
             return <span>{info.getValue()}</span>;
         },
     },
+    {
+        header: i18n.t("label.serviceType"),
+        accessorKey: "service_type",
+        cell: (info: Cell<{ id: string }, string>) => {
+            return <span>{info.getValue()}</span>;
+        },
+    },
+    {
+        header: i18n.t("label.productName"),
+        accessorKey: "product_name",
+        cell: (info: Cell<{ id: string }, string>) => {
+            return <span>{info.getValue()}</span>;
+        },
+    },
     {
         header: i18n.t("label.unit"),
         accessorKey: "unit",

src/configs/schema/orderServiceSchema.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { ORDER_STATUS } from "../utils/setting";
+import { ORDER_STATUS, PRODUCT_NAME, SERVICE_TYPE } from "../utils/setting";
 
 export const orderServiceSchema = z.object({
     osid: z.string().default(""),
@@ -17,8 +17,8 @@ export const orderServiceSchema = z.object({
     net: z.number().default(0),
     created_date: z.string().datetime().nullable().default(null),
     expiry_date: z.string().default("none"),
-    service_type: z.string().trim().default(""),
-    product_name: z.string().trim().default(""),
+    service_type: z.string().trim().default(SERVICE_TYPE[0]), // OOP
+    product_name: z.string().trim().default(PRODUCT_NAME[0]), // product 1
 });
 
 export type TorderService = z.infer<typeof orderServiceSchema>;

src/configs/schema/settingSchema.ts

@@ -1,10 +1,13 @@
 import { z } from "zod";
+import { PRODUCT_NAME, SERVICE_TYPE } from "../utils/setting";
 
 export const serviceSchema = z.object({
     id: z.number().default(0),
     service: z.string().trim().default(""),
     unit: z.string().trim().default(""),
     unit_price: z.number().min(0).default(0),
+    service_type: z.string().trim().default(SERVICE_TYPE[0]), // OOP
+    product_name: z.string().trim().default(PRODUCT_NAME[0]), // product 1
 });
 
 export const unitSchema = z.object({

src/configs/types.ts

@@ -1,4 +1,4 @@
-import { ORDER_STATUS, WL_STATUS } from "@/configs/utils/setting";
+import { ORDER_STATUS, SERVICE_TYPE, WL_STATUS } from "@/configs/utils/setting";
 import { Tservice, Tunit } from "./schema/settingSchema";
 import { statusColor, timeBtnStyleMap } from "./utils/color";
 import { actionReqList, menuList } from "./utils/router";
@@ -73,3 +73,5 @@ export type TmenuOptions = Partial<typeof defaultMenuOptions>;
 export type TitemContent = { title: string; content: JSX.Element };
 
 export type TctPayment = { [year: string]: { [month: string]: number } };
+
+export type TserviceType = (typeof SERVICE_TYPE)[number];

src/configs/utils/setting.ts

@@ -23,6 +23,9 @@ export const orderStatusList = [
     { name: ORDER_STATUS[3] }, // completed
 ];
 
+// test data
+export const PRODUCT_NAME = ["Product1", "Product2", "Product3"] as const;
+
 export const SERVICE_TYPE = ["OOP", "CTM", "SUB"] as const;
 
 export const serviceTypeList = [

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

@@ -8,6 +8,7 @@ import { calGst } from "@/lib/calculations";
 import { TorderForm } from "@/configs/schema/orderSchema";
 import { UseFieldArrayAppend } from "react-hook-form";
 import { Nbtn } from "@/components/btns";
+import { ORDER_STATUS } from "@/configs/utils/setting";
 
 type Tprops = {
     append: UseFieldArrayAppend<TorderForm, "order_services">;
@@ -22,26 +23,18 @@ const AppendNewService: FC<Tprops> = ({ append }) => {
     const setDefaultService = (value: string) => {
         let service = uniData?.services
             ? uniData.services.find((item: Tservice) => item.service === value)
-            : ({
-                  service: value,
-                  unit: "",
-                  unit_price: 0,
-              } as Partial<Tservice>);
+            : uniData.services[0];
 
         if (service === undefined) {
-            service = {
-                service: value,
-                unit: "",
-                unit_price: 0,
-            } as Partial<Tservice>;
+            service = uniData.services[0];
         }
 
         setServiceDesc({
             osid: "",
             ranking: 0,
             fk_cid: clientOrder.fk_cid,
             fk_oid: clientOrder.oid,
-            status: "pending",
+            status: ORDER_STATUS[0], // pending
             title: service.service as string,
             taxable: true,
             note: "",
@@ -52,8 +45,8 @@ const AppendNewService: FC<Tprops> = ({ append }) => {
             net: service.unit_price as number,
             created_date: "",
             expiry_date: "none",
-            service_type: "",
-            product_name: "",
+            service_type: service.service_type,
+            product_name: service.product_name,
         });
     };
 

src/pageComponents/modals/mOrderForm/Form/ServiceItem/ServiceDetails.tsx

@@ -2,7 +2,11 @@ import DataList from "@/components/dataList";
 import Label from "@/components/Label";
 import { Input } from "@/components/ui/input";
 import { TorderForm } from "@/configs/schema/orderSchema";
-import { orderStatusList, serviceTypeList } from "@/configs/utils/setting";
+import {
+    orderStatusList,
+    PRODUCT_NAME,
+    serviceTypeList,
+} from "@/configs/utils/setting";
 import type { FC } from "react";
 import { UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -15,19 +19,23 @@ type Tprops = {
 const ServiceDetails: FC<Tprops> = ({ index, register }) => {
     const { t } = useTranslation();
 
-    const serviceName = {
-        types: [{ name: "N1" }, { name: "N2" }, { name: "N3" }],
+    const productName = {
+        types: [
+            { name: PRODUCT_NAME[0] },
+            { name: PRODUCT_NAME[1] },
+            { name: PRODUCT_NAME[2] },
+        ],
     };
 
     const sTypeList = (
         <DataList id={"serviceTypeList"} name={"name"} data={serviceTypeList} />
     );
 
-    const productNameList = serviceName ? (
+    const productNameList = productName ? (
         <DataList
             id={"productNameList"}
             name={"name"}
-            data={serviceName.types}
+            data={productName.types}
         />
     ) : null;
 

src/pageComponents/modals/mUniForm.tsx

@@ -26,6 +26,8 @@ const MUniForm: FC<Tprops> = memo(({ unitList, serviceList }) => {
     // service
     const [service, setService] = useState("");
     const [unit, setUnit] = useState("");
+    const [serviceType, setServiceType] = useState("OOP");
+    const [productName, setProductName] = useState("Product");
     const [unitPrice, setUnitPrice] = useState(0);
     // unit
     const [unitName, setUnitName] = useState("");
@@ -52,6 +54,8 @@ const MUniForm: FC<Tprops> = memo(({ unitList, serviceList }) => {
             setService(uniData.service);
             setUnit(uniData.unit);
             setUnitPrice(uniData.unit_price);
+            setServiceType(uniData.service_type);
+            setProductName(uniData.product_name);
         } else {
             setUnitName(uniData.unit_name);
         }
@@ -136,6 +140,52 @@ const MUniForm: FC<Tprops> = memo(({ unitList, serviceList }) => {
                             />
                         </div>
                     </div>
+                    {/* service type */}
+                    <div className="sm:col-span-3">
+                        <label
+                            htmlFor="serviceType"
+                            className="block text-sm font-medium leading-6 text-gray-900"
+                        >
+                            {t("label.serviceType")}
+                        </label>
+                        <div className="mt-1">
+                            <input
+                                {...register("service_type")}
+                                type="text"
+                                id="serviceType"
+                                required
+                                className="outline-none h-9 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 pl-2"
+                                value={serviceType}
+                                onChange={(e) => {
+                                    e.preventDefault();
+                                    setServiceType(e.target.value);
+                                }}
+                            />
+                        </div>
+                    </div>
+                    {/* product name */}
+                    <div className="sm:col-span-3">
+                        <label
+                            htmlFor="productName"
+                            className="block text-sm font-medium leading-6 text-gray-900"
+                        >
+                            {t("label.productName")}
+                        </label>
+                        <div className="mt-1">
+                            <input
+                                {...register("product_name")}
+                                type="text"
+                                id="productName"
+                                required
+                                className="outline-none h-9 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 pl-2"
+                                value={productName}
+                                onChange={(e) => {
+                                    e.preventDefault();
+                                    setProductName(e.target.value);
+                                }}
+                            />
+                        </div>
+                    </div>
                     <div className="sm:col-span-3">
                         <label
                             htmlFor="unit"

src/pages/client/MainContent.tsx

@@ -23,6 +23,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import ClientOrderContent from "./ClientOrderContent";
 import ClientServiceContent from "./ClientServiceContent";
 import { TorderService } from "@/configs/schema/orderServiceSchema";
+import {
+    PRODUCT_NAME,
+    SERVICE_STATUS,
+    SERVICE_TYPE,
+} from "@/configs/utils/setting";
 
 const MainContent: FC = () => {
     const { t } = useTranslation();
@@ -74,12 +79,13 @@ const MainContent: FC = () => {
         setCompany(company);
         setLogo(logo);
         if (uniData) {
+            // this is the default append service data
             setUniData(uniData);
             setOrderService({
                 osid: "",
                 fk_cid: clientOrder.fk_cid,
                 fk_oid: clientOrder.oid,
-                status: t("label.pending"),
+                status: SERVICE_STATUS[0], // pending
                 ranking: 0,
                 title: uniData?.services?.length
                     ? (uniData.services[0].service as string)
@@ -103,8 +109,12 @@ const MainContent: FC = () => {
                     : 0,
                 created_date: "",
                 expiry_date: "none",
-                service_type: "",
-                product_name: "",
+                service_type: uniData?.services.length
+                    ? (uniData.services[0].service_type as string)
+                    : SERVICE_TYPE[0], // OOP
+                product_name: uniData?.services.length
+                    ? (uniData.services[0].product_name as string)
+                    : PRODUCT_NAME[0], // product 1
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps

src/pages/setting/uni.tsx

@@ -53,12 +53,7 @@ const Uni: FC<Tprops> = ({ services, units }) => {
                             search={true}
                             data={services}
                             columns={
-                                serviceListColDefs as ColumnDef<{
-                                    id: number;
-                                    unit: string;
-                                    unit_price: number;
-                                    service: string;
-                                }>[]
+                                serviceListColDefs as ColumnDef<Tservice>[]
                             }
                             setData={setSUinitData}
                             menuOptions={{ edit: true, del: true }}

src/routerAccFns/actions/settingAction.ts

@@ -14,6 +14,8 @@ export const settingAction = async ({
                   service: data.get("service") as string,
                   unit: data.get("unit") as string,
                   unit_price: Number(data.get("unit_price")),
+                  service_type: data.get("service_type") as string,
+                  product_name: data.get("product_name") as string,
               }
             : { unit_name: data.get("unit_name") as string }; // unit
         const result = await API_SETTING.uniAdd(temp);
@@ -33,6 +35,8 @@ export const settingAction = async ({
                   service: data.get("service") as string,
                   unit: data.get("unit") as string,
                   unit_price: Number(data.get("unit_price")),
+                  service_type: data.get("service_type") as string,
+                  product_name: data.get("product_name") as string,
               }
             : {
                   id: Number(data.get("id")),