i18n

src/components/NavigationContent/NavigationContent.tsx

@@ -52,7 +52,7 @@ const NavigationContent: React.FC = () => {
         {
           icon: <RequestQuote />,
           label: "Pick Order",
-          path: "/pickorder",
+          path: "/pickOrder",
         },
         // {
         //   icon: <RequestQuote />,

src/components/Orderstatus/PoSearch.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import { PoResult } from "@/app/api/po";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useRouter, useSearchParams } from "next/navigation";
+import SearchBox, { Criterion } from "../SearchBox";
+import SearchResults, { Column } from "../SearchResults";
+import { EditNote } from "@mui/icons-material";
+import { Button, Grid, Tab, Tabs, TabsProps, Typography } from "@mui/material";
+import QrModal from "../PoDetail/QrModal";
+import { WarehouseResult } from "@/app/api/warehouse";
+import NotificationIcon from "@mui/icons-material/NotificationImportant";
+import { useSession } from "next-auth/react";
+import { defaultPagingController } from "../SearchResults/SearchResults";
+import { fetchPoListClient, testing } from "@/app/api/po/actions";
+import dayjs from "dayjs";
+import { OUTPUT_DATE_FORMAT } from "@/app/utils/formatUtil";
+import arraySupport from "dayjs/plugin/arraySupport";
+dayjs.extend(arraySupport);
+
+type Props = {
+  po: PoResult[];
+  warehouse: WarehouseResult[];
+  totalCount: number;
+};
+type SearchQuery = Partial<Omit<PoResult, "id">>;
+type SearchParamNames = keyof SearchQuery;
+
+// cal offset (pageSize)
+// cal limit (pageSize)
+const PoSearch: React.FC<Props> = ({
+  po,
+  warehouse,
+  totalCount: initTotalCount,
+}) => {
+  const [filteredPo, setFilteredPo] = useState<PoResult[]>(po);
+  const [filterArgs, setFilterArgs] = useState<Record<string, any>>({});
+  const { t } = useTranslation("purchaseOrder");
+  const router = useRouter();
+  const [pagingController, setPagingController] = useState(
+    defaultPagingController
+  );
+  const [totalCount, setTotalCount] = useState(initTotalCount);
+  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(() => {
+    var searchCriteria: Criterion<SearchParamNames>[] = [
+      { label: t("Code"), paramName: "code", type: "text" },
+      {
+        label: t("Status"),
+        paramName: "status",
+        type: "select-labelled",
+        options: [
+          {label: t(`pending`), value: `pending`},
+          {label: t(`receiving`), value: `receiving`},
+          {label: t(`completed`), value: `completed`},
+        ]
+      },
+      {
+        label: t("Escalated"),
+        paramName: "escalated",
+        type: "select",
+        options: [t("Escalated"), t("NotEscalated")],
+      },
+    ];
+    return searchCriteria;
+  }, [t, po]);
+
+  const onDetailClick = useCallback(
+    (po: PoResult) => {
+      router.push(`/po/edit?id=${po.id}`);
+    },
+    [router]
+  );
+
+  const onDeleteClick = useCallback((po: PoResult) => {}, [router]);
+
+  const columns = useMemo<Column<PoResult>[]>(
+    () => [
+      {
+        name: "id",
+        label: t("Details"),
+        onClick: onDetailClick,
+        buttonIcon: <EditNote />,
+      },
+      {
+        name: "code",
+        label: t("Code"),
+      },
+      {
+        name: "orderDate",
+        label: t("OrderDate"),
+        renderCell: (params) => {
+          return dayjs(params.orderDate)
+            // .add(-1, "month")
+            .format(OUTPUT_DATE_FORMAT);
+        },
+      },
+      {
+        name: "supplier",
+        label: t("Supplier"),
+      },
+      {
+        name: "status",
+        label: t("Status"),
+        renderCell: (params) => {
+          return t(`${params.status.toLowerCase()}`);
+        },
+      },
+      {
+        name: "escalated",
+        label: t("Escalated"),
+        renderCell: (params) => {
+          console.log(params.escalated)
+          return params.escalated ? (
+            <NotificationIcon color="warning" />
+          ) : undefined;
+        },
+      },
+    ],
+    [filteredPo]
+  );
+
+  const onReset = useCallback(() => {
+    setFilteredPo(po);
+  }, [po]);
+
+  const [isOpenScanner, setOpenScanner] = useState(false);
+  const onOpenScanner = useCallback(() => {
+    setOpenScanner(true);
+  }, []);
+
+  const onCloseScanner = useCallback(() => {
+    setOpenScanner(false);
+  }, []);
+
+  const newPageFetch = useCallback(
+    async (
+      pagingController: Record<string, number>,
+      filterArgs: Record<string, number>
+    ) => {
+      console.log(pagingController);
+      console.log(filterArgs);
+      const params = {
+        ...pagingController,
+        ...filterArgs,
+      };
+      const res = await fetchPoListClient(params);
+      // const res = await testing(params);
+      if (res) {
+        console.log(res);
+        setFilteredPo(res.records);
+        setTotalCount(res.total);
+      }
+    },
+    [fetchPoListClient]
+  );
+
+  useEffect(() => {
+    newPageFetch(pagingController, filterArgs);
+  }, [newPageFetch, pagingController, filterArgs]);
+  return (
+    <>
+      <Grid container>
+        <Grid item xs={8}>
+          <Typography variant="h4" marginInlineEnd={2}>
+            {t("Purchase Order")}
+          </Typography>
+        </Grid>
+        <Grid item xs={4} display="flex" justifyContent="end" alignItems="end">
+          <QrModal
+            open={isOpenScanner}
+            onClose={onCloseScanner}
+            warehouse={warehouse}
+          />
+          <Button onClick={onOpenScanner}>{t("bind")}</Button>
+        </Grid>
+      </Grid>
+      <>
+        <SearchBox
+          criteria={searchCriteria}
+          onSearch={(query) => {
+            console.log(query)
+            setFilterArgs({ 
+              code: query.code,
+              status: query.status === "All" ? "" : query.status,
+              escalated: query.escalated === 'All' ? undefined : query.escalated === t("Escalated") 
+            });
+            // setFilteredPo((prev) =>
+            //   po.filter((p) => {
+            //     return (
+            //       p.code.toLowerCase().includes(query.code.toLowerCase()) &&
+            //       (query.status === "All" || t(`${p.status.toLowerCase()}`) === query.status) &&
+            //       (query.escalated === "All" || (p.escalated === Boolean((query.escalated) === t("Escalated"))))
+            //     )
+            //   })
+            // );
+          }}
+          onReset={onReset}
+        />
+        <SearchResults<PoResult>
+          items={filteredPo}
+          columns={columns}
+          pagingController={pagingController}
+          setPagingController={setPagingController}
+          totalCount={totalCount}
+          isAutoPaging={false}
+        />
+      </>
+    </>
+  );
+};
+export default PoSearch;

src/components/Orderstatus/PoSearchLoading.tsx

@@ -0,0 +1,40 @@
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Skeleton from "@mui/material/Skeleton";
+import Stack from "@mui/material/Stack";
+import React from "react";
+
+// Can make this nicer
+export const PoSearchLoading: React.FC = () => {
+  return (
+    <>
+      <Card>
+        <CardContent>
+          <Stack spacing={2}>
+            <Skeleton variant="rounded" height={60} />
+            <Skeleton variant="rounded" height={60} />
+            <Skeleton variant="rounded" height={60} />
+            <Skeleton
+              variant="rounded"
+              height={50}
+              width={100}
+              sx={{ alignSelf: "flex-end" }}
+            />
+          </Stack>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent>
+          <Stack spacing={2}>
+            <Skeleton variant="rounded" height={40} />
+            <Skeleton variant="rounded" height={40} />
+            <Skeleton variant="rounded" height={40} />
+            <Skeleton variant="rounded" height={40} />
+          </Stack>
+        </CardContent>
+      </Card>
+    </>
+  );
+};
+
+export default PoSearchLoading;

src/components/Orderstatus/PoSearchWrapper.tsx

@@ -0,0 +1,53 @@
+import { fetchAllItems } from "@/app/api/settings/item";
+// import ItemsSearch from "./ItemsSearch";
+// import ItemsSearchLoading from "./ItemsSearchLoading";
+import { SearchParams } from "@/app/utils/fetchUtil";
+import { TypeEnum } from "@/app/utils/typeEnum";
+import { notFound } from "next/navigation";
+import PoSearchLoading from "./PoSearchLoading";
+import PoSearch from "./PoSearch";
+import { fetchPoList, PoResult } from "@/app/api/po";
+import dayjs from "dayjs";
+import arraySupport from "dayjs/plugin/arraySupport";
+import { OUTPUT_DATE_FORMAT } from "@/app/utils/formatUtil";
+import { fetchWarehouseList } from "@/app/api/warehouse";
+import { defaultPagingController } from "../SearchResults/SearchResults";
+dayjs.extend(arraySupport);
+
+interface SubComponents {
+  Loading: typeof PoSearchLoading;
+}
+
+type Props = {
+  // type: TypeEnum;
+};
+
+const PoSearchWrapper: React.FC<Props> & SubComponents = async (
+  {
+    // type,
+  }
+) => {
+  // console.log(defaultPagingController)
+  const [
+    po,
+    warehouse,
+  ] = await Promise.all([
+    fetchPoList({
+      "pageNum": 1,
+      "pageSize": 10,
+  }),
+    // fetchPoList(),
+    fetchWarehouseList(),
+  ]);
+  const fixPoDate = po.records.map((p) => {
+    return ({
+      ...p,
+      orderDate: dayjs(p.orderDate).add(-1, "month").format(OUTPUT_DATE_FORMAT)
+    })
+  })
+  return <PoSearch po={fixPoDate} warehouse={warehouse} totalCount={po.total}/>;
+};
+
+PoSearchWrapper.Loading = PoSearchLoading;
+
+export default PoSearchWrapper;

src/components/Orderstatus/index.ts

@@ -0,0 +1 @@
+export { default } from "./PoSearchWrapper";

src/i18n/zh/common.json

@@ -1,6 +1,6 @@
 {
 
-    "dashboard": "儀表板",
+    "dashboard": "資訊展示面板",
     "Edit": "編輯",
 
     "Search Criteria": "搜尋條件",
@@ -15,7 +15,7 @@
     "Add some entries!": "添加條目",
     "Add Record": "新增",
     "Clean Record": "重置",
-    "Dashboard": "儀表板",
+    "Dashboard": "資訊展示面板",
     "Raw Material": "原材料",
     "Delivery": "交貨單",
     "Scheduling": "排程",

src/i18n/zh/dashboard.json

@@ -1,3 +1,4 @@
 {
-    "Dashboard": "儀表板"
-}
+    "Dashboard": "資訊展示面板",
+    "Order status": "訂單狀態"
+}