imp: chart for order payment preview

BigSillyTiger · Apr 23, 2024 · 4c02323 · 4c02323
1 parent cb72859
commit 4c02323
Show file tree

Hide file tree

Showing 40 changed files with 474 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>SRC Landscaping</title>
     </head>
-    <body class="h-full overflow-hidden bg-slate-50">
+    <body class="h-full overflow-hidden bg-slate-100">
         <!-- template requirements body class style -->
         <div id="root"></div>
         <script type="module" src="/src/main.tsx"></script>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
         "@types/uuid": "^9.0.8",
         "axios": "^1.6.8",
         "big.js": "^6.2.1",
+        "chart.js": "^4.4.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "date-fns": "^3.6.0",
@@ -42,6 +43,7 @@
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-calendar": "^4.8.0",
+        "react-chartjs-2": "^5.2.0",
         "react-day-picker": "^8.10.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.51.1",

diff --git a/src/apis/api_chart.ts b/src/apis/api_chart.ts
@@ -0,0 +1,15 @@
+import apis from "./axios";
+import { CT_ORDER_PAYMENT } from "./req_list";
+
+export const chartOrderPayment = async (): Promise<Tresponse> => {
+    try {
+        const response = await apis.get(CT_ORDER_PAYMENT);
+        return response.data;
+    } catch (error) {
+        return {
+            status: 400,
+            msg: "failed in retrieving all work logs",
+            data: "",
+        };
+    }
+};
diff --git a/src/apis/index.ts b/src/apis/index.ts
@@ -5,9 +5,11 @@ import * as API_ORDER from "./api_orders";
 import * as API_STAFF from "./api_staff";
 import * as API_WORKLOGS from "./api_worklogs";
 import * as API_PAYSLIP from "./api_payslip";
+import * as API_CHART from "./api_chart";
 
 export {
     API_ADMIN,
+    API_CHART,
     API_CLIENT,
     API_SETTING,
     API_ORDER,

diff --git a/src/apis/req_list.ts b/src/apis/req_list.ts
@@ -51,7 +51,6 @@ export const ORDER_UPDATE = "/order/update";
 export const ORDER_DEL = "/order/del";
 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";
 
@@ -74,3 +73,9 @@ export const PAYSLIP_STATUS_UPDATE = "/payslip/status-update";
 export const PAYSLIP_ALL = "/payslip/all";
 export const PAYSLIP_ALL_W_UID = "/payslip/all_w_uid";
 export const PAYSLIP_BONUS_ALL = "/payslip/bonus-all";
+
+// Charts - by month or by week
+export const CT_ORDER_PAYMENT = "/charts/order-payment";
+export const CT_ORDER_UNPAID = "/charts/order-unpaid";
+export const CT_ORDER_NEW = "/charts/order-new";
+export const CT_ORDER_UNFINISHED = "/charts/order-unfinished";
diff --git a/src/components/form/Fieldset.tsx → src/components/Fieldset.tsx b/src/components/form/Fieldset.tsx → src/components/Fieldset.tsx
@@ -10,7 +10,7 @@ type Tprops = {
 const Fieldset: FC<Tprops> = ({ sFieldset, sLegend, title, children }) => {
     return (
         <fieldset
-            className={`py-2 border-2 border-indigo-100 rounded-lg ${sFieldset}`}
+            className={`py-2 border-2 border-indigo-100 bg-slate-50 rounded-lg ${sFieldset}`}
         >
             {title && (
                 <legend

diff --git a/src/components/card.tsx b/src/components/card.tsx
@@ -5,7 +5,7 @@ type Tprops = ComponentPropsWithoutRef<"div">;
 const Card: FC<Tprops> = ({ className, children, onClick }) => {
     return (
         <div
-            className={`shadow ring-1 ring-indigo-600 ring-opacity-25 rounded-lg p-3 ${className}`}
+            className={`shadow ring-1 ring-indigo-600 ring-opacity-25 rounded-lg p-3 bg-slate-50 ${className}`}
             onClick={onClick}
         >
             {children}

diff --git a/src/components/modal/modalFrame.tsx b/src/components/modal/modalFrame.tsx
@@ -82,7 +82,7 @@ const ModalFrame: FC<Tprops> = ({
                             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                         >
                             <Dialog.Panel
-                                className={`relative overflow-hidden bg-white text-left shadow-xl transition-all px-4 pb-4 pt-5 sm:my-8 sm:py-3 sm:px-4 ${widthSize(
+                                className={`relative overflow-hidden bg-slate-100 text-left shadow-xl transition-all px-4 pb-4 pt-5 sm:my-8 sm:py-3 sm:px-4 ${widthSize(
                                     mode
                                 )} ${className}`}
                             >

diff --git a/src/configs/i18n/index.ts b/src/configs/i18n/index.ts
@@ -1,11 +1,11 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import en from "./scriptEn";
-import cn from "./scriptCn";
+//import cn from "./scriptCn";
 
 i18n.use(initReactI18next) // passes i18n down to react-i18next
     .init({
-        resources: { en, cn },
+        resources: { en },
         debug: true,
         lng: "en", // language to use
         // you can use the i18n.changeLanguage function to change the language manually

diff --git a/src/configs/i18n/scriptEn.ts b/src/configs/i18n/scriptEn.ts
@@ -191,6 +191,7 @@ const en = {
             manager: "Manager",
             menu: "Menu",
             name: "Name",
+            newOrder: "New Order",
             note: "Note",
             netto: "Netto",
             newIssueDate: "New Issue Date",
@@ -201,6 +202,7 @@ const en = {
             orderInfo: "Order Info",
             orderDate: "Order Date",
             orderDetail: "Order Details",
+            orderPaymentPreview: "Order Payment Preview",
             orderServices: "Order Services Info",
             page: "Page",
             pageAccessSetting: "Page Access Setting",
@@ -264,8 +266,10 @@ const en = {
             totalGst: "Total Gst",
             totalLine: "Line Total",
             totalNetto: "Total Netto",
+            totalOrder: "Total Order",
             totalPay: "Total Pay",
             totalPaid: "Total Paid",
+            totalUnpaid: "Total Unpaid",
             totalWH: "Total Work Hours",
             uid: "UID",
             unit: "Unit",

diff --git a/src/configs/types.ts b/src/configs/types.ts
@@ -69,3 +69,5 @@ export type TactionReqList = (typeof actionReqList)[keyof typeof actionReqList];
 export type TmenuOptions = Partial<typeof defaultMenuOptions>;
 
 export type TitemContent = { title: string; content: JSX.Element };
+
+export type TctPayment = { [year: string]: { [month: string]: number } };
diff --git a/src/configs/zustore/ctPaymentStore.ts b/src/configs/zustore/ctPaymentStore.ts
@@ -0,0 +1,40 @@
+import { useStore } from "zustand";
+import { createStore } from "zustand/vanilla";
+import { TctPayment } from "../types";
+
+type Tstate = {
+    currentYear: string;
+    yearAll: string[];
+    orderAll: TctPayment;
+    paymentAll: TctPayment;
+    unpaidAll: TctPayment;
+};
+
+type Taction = {
+    setCurrentYear: (cy: string) => void;
+    setYearAll: (ya: string[]) => void;
+    setOrderall: (oa: TctPayment) => void;
+    setPamentAll: (pa: TctPayment) => void;
+    setUnpaidAll: (ua: TctPayment) => void;
+};
+
+export const ctPaymentStore = createStore<Tstate & Taction>((set) => ({
+    currentYear: "",
+    yearAll: [],
+    paymentAll: {},
+    orderAll: {},
+    unpaidAll: {},
+    setCurrentYear: (cy: string) =>
+        set((state) => ({ ...state, currentYear: cy })),
+    setYearAll: (ya: string[]) => set((state) => ({ ...state, yearAll: ya })),
+    setPamentAll: (pa: TctPayment) =>
+        set((state) => ({ ...state, paymentAll: pa })),
+    setOrderall: (oa: TctPayment) =>
+        set((state) => ({ ...state, orderAll: oa })),
+    setUnpaidAll: (ua: TctPayment) =>
+        set((state) => ({ ...state, unpaidAll: ua })),
+}));
+
+export const useCtPaymentStore = <T>(
+    selector: (state: Tstate & Taction) => T
+) => useStore(ctPaymentStore, selector);
diff --git a/src/configs/zustore/index.ts b/src/configs/zustore/index.ts
@@ -6,6 +6,7 @@ import { staffWLStore, useStaffWLStore } from "./staffWLStore";
 import { deductStore, useDeductStore } from "./deductStore";
 import { staffStore, useStaffStore } from "./staffStore";
 import { globalAlertStore, useGlobalAlertStore } from "./globalAlertStore";
+import { ctPaymentStore, useCtPaymentStore } from "./ctPaymentStore";
 
 export {
     adminStore,
@@ -24,4 +25,6 @@ export {
     useStaffStore,
     globalAlertStore,
     useGlobalAlertStore,
+    ctPaymentStore,
+    useCtPaymentStore,
 };
diff --git a/src/lib/calculations.ts b/src/lib/calculations.ts
@@ -14,12 +14,6 @@ export const divAB = (x: number, y: number): number => {
     return a.div(b).toNumber();
 };
 
-export const calNetto = (qty: number, price: number): number => {
-    const a = new Big(qty);
-    const b = new Big(price);
-    return a.times(b).toNumber();
-};
-
 export const minusAB = (x: number, y: number): number => {
     const a = new Big(x);
     const b = new Big(y);
@@ -42,3 +36,9 @@ export const convertWorkHour = (wh: string): number => {
     const [hours, minutes] = wh.split(":").map(Number);
     return plusAB(hours, divAB(minutes, 60));
 };
+
+export const calNetto = (qty: number, price: number): number => {
+    const a = new Big(qty);
+    const b = new Big(price);
+    return a.times(b).toNumber();
+};
diff --git a/src/pageComponents/DayPicker/JADayPicker.tsx b/src/pageComponents/DayPicker/JADayPicker.tsx
@@ -44,6 +44,8 @@ const JADayPicker: FC = () => {
                 /* captionLayout="dropdown-buttons"
                 fromYear={2010}
                 toYear={2100} */
+                weekStartsOn={1}
+                firstWeekContainsDate={4}
                 mode="single"
                 required
                 selected={selectedDate}

diff --git a/src/pageComponents/DayPicker/RangedDayPicker.tsx b/src/pageComponents/DayPicker/RangedDayPicker.tsx
@@ -95,7 +95,8 @@ const RangedDayPicker: FC = () => {
                 /* captionLayout="dropdown-buttons"
                 fromYear={2010}
                 toYear={2100} */
-
+                weekStartsOn={1}
+                firstWeekContainsDate={4}
                 fromDate={startD}
                 toDate={endD}
                 mode="range"

diff --git a/src/pageComponents/cards/StaffCard.tsx b/src/pageComponents/cards/StaffCard.tsx
@@ -2,7 +2,7 @@ import type { ComponentPropsWithoutRef } from "react";
 import { Amail, Atel } from "@/components/aLinks";
 import { useTranslation } from "react-i18next";
 import { TwlTableRow } from "@/configs/schema/workSchema";
-import Fieldset from "@/components/form/Fieldset";
+import Fieldset from "@/components/Fieldset";
 import { EnvelopeIcon, PhoneIcon } from "@heroicons/react/24/outline";
 import SingleField from "@/components/SingleField";
 

diff --git a/src/pageComponents/cards/WorkInfoCard.tsx b/src/pageComponents/cards/WorkInfoCard.tsx
@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef } from "react";
 import { useTranslation } from "react-i18next";
 import { TwlTableRow } from "@/configs/schema/workSchema";
-import Fieldset from "@/components/form/Fieldset";
+import Fieldset from "@/components/Fieldset";
 import {
     IdentificationIcon,
     HomeModernIcon,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -69,3 +69,5 @@ export type TactionReqList = (typeof actionReqList)[keyof typeof actionReqList];
		export type TmenuOptions = Partial<typeof defaultMenuOptions>;

		export type TitemContent = { title: string; content: JSX.Element };

		export type TctPayment = { [year: string]: { [month: string]: number } };