diff --git a/src/apis/req_list.ts b/src/apis/req_list.ts
index ef06682..c3de6f4 100644
--- a/src/apis/req_list.ts
+++ b/src/apis/req_list.ts
@@ -54,6 +54,7 @@ export const ORDER_UPDATE = "/api/order/update";
 export const ORDER_DEL = "/api/order/del";
 export const ORDER_W_CLIENT = "/api/order/withClientID";
 export const ORDER_SERVICE_W_CLIENT = "/api/order/serviceWithCid";
+export const ORDER_SERVICE_ALL = "/api/order/serviceAll";
 export const ORDER_STATUS = "/api/order/status";
 export const PAYMENT_UPDATE = "/api/order/updatePayments";
 export const INVOICE_ISSUE_UPDATE = "/api/order/updateInvoiceIssue";
diff --git a/src/configs/types.ts b/src/configs/types.ts
index e7acab0..22894e0 100644
--- a/src/configs/types.ts
+++ b/src/configs/types.ts
@@ -1,7 +1,7 @@
 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";
+import { actionReqList, defaultMenuList } from "./utils/router";
 import { roleOptions } from "./utils/staff";
 import { defaultMenuOptions, mOpenOps } from "./utils/modal";
 
@@ -10,7 +10,7 @@ export type Tunivers = {
     units: Tunit[];
 };
 
-export type TmenuID = (typeof menuList)[number]["id"];
+export type TmenuID = (typeof defaultMenuList)[number]["id"];
 
 /**
  * @description  modal open option types for all modals
diff --git a/src/configs/utils/router.ts b/src/configs/utils/router.ts
index 795b488..061c882 100644
--- a/src/configs/utils/router.ts
+++ b/src/configs/utils/router.ts
@@ -21,44 +21,55 @@ export const routerPaths = {
     setting: "/setting",
 };
 
-export const menuList = [
+export const MenuItems = {
+    dashboard: "dashboard" as const,
+    clients: "clients" as const,
+    client: "client" as const,
+    orders: "orders" as const,
+    orderServices: "orderServices" as const,
+    calendar: "calendar" as const,
+    staff: "staff" as const,
+    setting: "setting" as const,
+};
+
+export const defaultMenuList = [
     {
-        id: "dashboard",
+        id: MenuItems.dashboard,
         name: "menu.dashboard",
         href: routerPaths.dashboard,
         icon: HomeIcon,
         current: true,
     },
     {
-        id: "clients",
+        id: MenuItems.clients,
         name: "menu.clients",
         href: routerPaths.clients,
         icon: UserGroupIcon,
         current: false,
     },
     {
-        id: "orders",
+        id: MenuItems.orders,
         name: "menu.orders",
         href: routerPaths.orders,
         icon: ClipboardDocumentIcon,
         current: false,
     },
     {
-        id: "calendar",
+        id: MenuItems.calendar,
         name: "menu.calendar",
         href: routerPaths.calendar,
         icon: CalendarIcon,
         current: false,
     },
     {
-        id: "staff",
+        id: MenuItems.staff,
         name: "menu.staff",
         href: routerPaths.staff,
         icon: IdentificationIcon,
         current: false,
     },
     {
-        id: "setting",
+        id: MenuItems.setting,
         name: "menu.setting",
         href: routerPaths.setting,
         icon: WrenchScrewdriverIcon,
diff --git a/src/configs/utils/staff.ts b/src/configs/utils/staff.ts
index c74b5e5..9411368 100644
--- a/src/configs/utils/staff.ts
+++ b/src/configs/utils/staff.ts
@@ -1,5 +1,5 @@
 import { TmenuID, TstaffRole } from "../types";
-import { menuList } from "./router";
+import { defaultMenuList } from "./router";
 
 export type TadminAccess = 0 | 1 | 2;
 
@@ -13,7 +13,7 @@ export const defaultStaffRole: TstaffRole = "employee";
  * @returns
  */
 export const genMenuIDObject = (access: TadminAccess) => {
-    return menuList.reduce(
+    return defaultMenuList.reduce(
         (acc, item) => {
             acc[item.id] = access;
             return acc;
diff --git a/src/pageComponents/mainMenu/mainMenu.tsx b/src/pageComponents/mainMenu/mainMenu.tsx
index 277382a..0889b87 100644
--- a/src/pageComponents/mainMenu/mainMenu.tsx
+++ b/src/pageComponents/mainMenu/mainMenu.tsx
@@ -6,7 +6,7 @@ import type {
 } from "react";
 import MobileMenu from "./mobileMenu";
 
-import { menuList } from "@/configs/utils/router";
+import { defaultMenuList } from "@/configs/utils/router";
 
 import { Menu2 } from "./menu";
 import { Tpermission } from "@/configs/schema/universSchema";
@@ -40,7 +40,7 @@ const MainMenu: FC<Tprops> = ({ open, setOpen }) => {
     const newMenuList = () => {
         //
         const temp = Object.values(
-            menuList.reduce(
+            defaultMenuList.reduce(
                 (acc, item) => {
                     acc[item.id] = user[item.id];
                     return acc;
@@ -48,7 +48,7 @@ const MainMenu: FC<Tprops> = ({ open, setOpen }) => {
                 {} as Record<string, number>
             )
         );
-        return menuList
+        return defaultMenuList
             .filter((_, index) => {
                 // if temp[index] is > 0, then return the menu item => display it
                 // otherwise, return undefined => hide it
diff --git a/src/pageComponents/modals/mStaffForm/Form/AccessTable.tsx b/src/pageComponents/modals/mStaffForm/Form/AccessTable.tsx
index faff419..df6ba71 100644
--- a/src/pageComponents/modals/mStaffForm/Form/AccessTable.tsx
+++ b/src/pageComponents/modals/mStaffForm/Form/AccessTable.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
-import { menuList } from "@/configs/utils/router";
+import { defaultMenuList } from "@/configs/utils/router";
 import { TstaffForm } from "@/configs/schema/staffSchema";
 import { UseFormReturn } from "react-hook-form";
 import { atModalOpen } from "@/configs/atoms";
@@ -20,7 +20,7 @@ const AccessTable: FC<Tprops> = ({ register, watch }) => {
     const setRadioDisable = (page: TmenuID, adminNum: TadminAccess) => {
         return !(watch(page) === adminNum);
     };
-    const newMenuList = menuList.map((item) => ({
+    const newMenuList = defaultMenuList.map((item) => ({
         ...item,
         name: t(item.name),
     }));
diff --git a/src/pages/orders/MainContent.tsx b/src/pages/orders/MainContent.tsx
index 7365f76..dd8257b 100644
--- a/src/pages/orders/MainContent.tsx
+++ b/src/pages/orders/MainContent.tsx
@@ -36,6 +36,7 @@ const MainContent: FC = () => {
     ];
 
     const orderColumns = useOrderColumnsDef();
+    console.log("---> [] all orders: ", orders);
 
     const newOrders = useMemo(() => {
         return orders.map((item) => {
diff --git a/src/pages/staff/ManagerContent.tsx b/src/pages/staff/ManagerContent.tsx
index bdb33d2..6137487 100644
--- a/src/pages/staff/ManagerContent.tsx
+++ b/src/pages/staff/ManagerContent.tsx
@@ -6,19 +6,14 @@ import useStaffColumnsDef from "@/configs/columnDefs/defStaff";
 import { useTranslation } from "react-i18next";
 import SubTable from "./SubTable";
 import { useAsyncValue } from "react-router-dom";
-import { TwlTableRow } from "@/configs/schema/workSchema";
 import { TstaffWPayslip } from "@/configs/schema/staffSchema";
 import { Tbonus, Tpayslip } from "@/configs/schema/payslipSchema";
 import { Tcompany } from "@/configs/schema/settingSchema";
 import { atCompany, atLogo, atModalOpen, atStaff } from "@/configs/atoms";
 import { useAtom } from "jotai";
 import { RESET } from "jotai/utils";
-import {
-    usePayslipStore,
-    useStaffStore,
-    useStaffWLStore,
-} from "@/configs/zustore";
-import { dateFormat, hmsTohm } from "@/lib/time";
+import { usePayslipStore, useStaffStore } from "@/configs/zustore";
+import { dateFormat } from "@/lib/time";
 import { updateBellAlert } from "@/lib/utils";
 import { Nbtn } from "@/components/btns";
 
@@ -29,13 +24,11 @@ const ManagerContent: FC = () => {
     const [, setStaff] = useAtom(atStaff);
     const [, setModalOpen] = useAtom(atModalOpen);
     const setAllStaff = useStaffStore((state) => state.setAllStaff);
-    const setAllStaffWL = useStaffWLStore((state) => state.setAllStaffWL);
     const setAllBonus = usePayslipStore((state) => state.setAllBonus);
     const staffColumns = useStaffColumnsDef();
 
-    const [worklogs, allStaff, allPayslips, allBonus, company, logo] =
+    const [allStaff, allPayslips, allBonus, company, logo] =
         useAsyncValue() as [
-            TwlTableRow[],
             TstaffWPayslip[],
             Tpayslip[],
             Tbonus[],
@@ -43,32 +36,6 @@ const ManagerContent: FC = () => {
             string,
         ];
 
-    const newWorklogs = useMemo(
-        () =>
-            worklogs
-                .sort((a: TwlTableRow, b: TwlTableRow) => {
-                    const dateA = new Date(a.wl_date);
-                    const dateB = new Date(b.wl_date);
-
-                    // Compare dates
-                    if (dateA > dateB) return -1; // Return -1 to indicate dateA comes before dateB
-                    if (dateA < dateB) return 1; // Return 1 to indicate dateA comes after dateB
-                    return 0;
-                })
-                .map((wl: TwlTableRow) => {
-                    return {
-                        ...wl,
-                        // convert the date format stored in mysql: yyyy-mm-dd to au: dd-mm-yyyy
-                        // this format is related to date searching in the table
-                        wl_date: dateFormat(wl.wl_date, "au"),
-                        s_time: hmsTohm(wl.s_time as string),
-                        e_time: hmsTohm(wl.e_time as string),
-                        b_time: hmsTohm(wl.b_time as string),
-                        b_hour: hmsTohm(wl.b_hour as string),
-                    };
-                }),
-        [worklogs]
-    );
     const newAllStaff = useMemo(() => {
         if (!allStaff) return [];
         return allStaff.map((staff) => {
@@ -93,14 +60,13 @@ const ManagerContent: FC = () => {
 
     useEffect(() => {
         setAllStaff(newAllStaff);
-        setAllStaffWL(newWorklogs);
         setAllBonus(allBonus || []);
         setCompany(company);
         setLogo(logo);
         // update bell alert
         updateBellAlert({ unPayslip: allPayslips });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [allBonus, newWorklogs, company, logo, newAllStaff]);
+    }, [allBonus, company, logo, newAllStaff]);
 
     const handleAddNew = (e: MouseEvent | TouchEvent) => {
         e.preventDefault();
diff --git a/src/routerAccFns/actions/orderAction.ts b/src/routerAccFns/actions/orderAction.ts
index da7db23..51c999e 100644
--- a/src/routerAccFns/actions/orderAction.ts
+++ b/src/routerAccFns/actions/orderAction.ts
@@ -20,6 +20,7 @@ export const ordersAction = async ({
         const orData = JSON.parse(data.get("values") as string);
         const order = {
             order: {
+                oid: orData.oid,
                 fk_cid: orData.cid,
                 status: orData.status.toLocaleLowerCase() as string,
                 gst: orData.gst,
diff --git a/src/routerAccFns/loaders/clientPageLoader.ts b/src/routerAccFns/loaders/clientPageLoader.ts
index 21b168b..08a30ea 100644
--- a/src/routerAccFns/loaders/clientPageLoader.ts
+++ b/src/routerAccFns/loaders/clientPageLoader.ts
@@ -1,6 +1,6 @@
 import { API_ADMIN, API_CLIENT, API_SETTING, API_ORDER } from "@/apis";
 import { TorderWithClient } from "@/configs/schema/orderSchema";
-import { menuList } from "@/configs/utils/router";
+import { MenuItems } from "@/configs/utils/router";
 import { routerStore } from "@/configs/zustore";
 import { dateFormat } from "@/lib/time";
 import { LoaderFunctionArgs, defer, redirect } from "react-router-dom";
@@ -14,7 +14,7 @@ export const clientLoader = async ({ request, params }: LoaderFunctionArgs) => {
     const pname = new URL(request.url).pathname;
     routerStore.setState({ currentRouter: "client" });
     try {
-        const result = await API_ADMIN.loaderAccessCheck(menuList[1].id);
+        const result = await API_ADMIN.loaderAccessCheck(MenuItems.clients);
 
         if (!result) {
             return pname
diff --git a/src/routerAccFns/loaders/clientsPageLoader.ts b/src/routerAccFns/loaders/clientsPageLoader.ts
index 1998923..0514f2f 100644
--- a/src/routerAccFns/loaders/clientsPageLoader.ts
+++ b/src/routerAccFns/loaders/clientsPageLoader.ts
@@ -1,5 +1,5 @@
 import { API_ADMIN, API_CLIENT } from "@/apis";
-import { menuList } from "@/configs/utils/router";
+import { MenuItems } from "@/configs/utils/router";
 import { routerStore } from "@/configs/zustore";
 import { defer, LoaderFunctionArgs, redirect } from "react-router-dom";
 
@@ -7,7 +7,7 @@ export const clientsLoader = async ({ request }: LoaderFunctionArgs) => {
     const pname = new URL(request.url).pathname;
     routerStore.setState({ currentRouter: "clients" });
     try {
-        const result = await API_ADMIN.loaderAccessCheck(menuList[1].id);
+        const result = await API_ADMIN.loaderAccessCheck(MenuItems.clients);
 
         if (!result) {
             return pname
diff --git a/src/routerAccFns/loaders/dashboardLoader.ts b/src/routerAccFns/loaders/dashboardLoader.ts
index 059f16b..78993b9 100644
--- a/src/routerAccFns/loaders/dashboardLoader.ts
+++ b/src/routerAccFns/loaders/dashboardLoader.ts
@@ -1,5 +1,5 @@
 import { API_ADMIN } from "@/apis";
-import { menuList } from "@/configs/utils/router";
+import { MenuItems } from "@/configs/utils/router";
 import { routerStore } from "@/configs/zustore";
 import { defer, LoaderFunctionArgs, redirect } from "react-router-dom";
 
@@ -7,7 +7,7 @@ export const dashboardLoader = async ({ request }: LoaderFunctionArgs) => {
     const pname = new URL(request.url).pathname;
     routerStore.setState({ currentRouter: "dashboard" });
     try {
-        const result = await API_ADMIN.loaderAccessCheck(menuList[0].id);
+        const result = await API_ADMIN.loaderAccessCheck(MenuItems.dashboard);
 
         if (!result) {
             return pname
diff --git a/src/routerAccFns/loaders/ordersPageLoader.ts b/src/routerAccFns/loaders/ordersPageLoader.ts
index 23781ec..cd098c7 100644
--- a/src/routerAccFns/loaders/ordersPageLoader.ts
+++ b/src/routerAccFns/loaders/ordersPageLoader.ts
@@ -1,5 +1,5 @@
 import { API_ADMIN, API_SETTING, API_ORDER, API_STAFF } from "@/apis";
-import { menuList } from "@/configs/utils/router";
+import { MenuItems } from "@/configs/utils/router";
 import { routerStore } from "@/configs/zustore";
 import { defer, LoaderFunctionArgs, redirect } from "react-router-dom";
 
@@ -7,7 +7,7 @@ export const ordersLoader = async ({ request }: LoaderFunctionArgs) => {
     const pname = new URL(request.url).pathname;
     routerStore.setState({ currentRouter: "orders" });
     try {
-        const result = await API_ADMIN.loaderAccessCheck(menuList[2].id);
+        const result = await API_ADMIN.loaderAccessCheck(MenuItems.orders);
 
         if (!result) {
             return pname
diff --git a/src/routerAccFns/loaders/settingPageLoader.ts b/src/routerAccFns/loaders/settingPageLoader.ts
index 4dbd331..7f51667 100644
--- a/src/routerAccFns/loaders/settingPageLoader.ts
+++ b/src/routerAccFns/loaders/settingPageLoader.ts
@@ -1,5 +1,5 @@
 import { API_ADMIN, API_SETTING } from "@/apis";
-import { menuList } from "@/configs/utils/router";
+import { MenuItems } from "@/configs/utils/router";
 import { routerStore } from "@/configs/zustore";
 import { defer, LoaderFunctionArgs, redirect } from "react-router-dom";
 
@@ -7,7 +7,7 @@ export const settingLoader = async ({ request }: LoaderFunctionArgs) => {
     const pname = new URL(request.url).pathname;
     routerStore.setState({ currentRouter: "setting" });
     try {
-        const result = await API_ADMIN.loaderAccessCheck(menuList[5].id);
+        const result = await API_ADMIN.loaderAccessCheck(MenuItems.setting);
 
         if (!result) {
             return pname
diff --git a/src/routerAccFns/loaders/staffPageLoader.ts b/src/routerAccFns/loaders/staffPageLoader.ts
index 1f03661..dfc119a 100644
--- a/src/routerAccFns/loaders/staffPageLoader.ts
+++ b/src/routerAccFns/loaders/staffPageLoader.ts
@@ -1,5 +1,5 @@
 import { API_ADMIN, API_PAYSLIP, API_SETTING, API_STAFF } from "@/apis";
-import { menuList } from "@/configs/utils/router";
+import { MenuItems } from "@/configs/utils/router";
 import { routerStore } from "@/configs/zustore";
 import { defer, LoaderFunctionArgs, redirect } from "react-router-dom";
 
@@ -7,7 +7,7 @@ export const staffLoader = async ({ request }: LoaderFunctionArgs) => {
     const pname = new URL(request.url).pathname;
     routerStore.setState({ currentRouter: "staff" });
     try {
-        const result = await API_ADMIN.loaderAccessCheck(menuList[4].id);
+        const result = await API_ADMIN.loaderAccessCheck(MenuItems.staff);
 
         if (!result) {
             return pname