From a6aa86a9fa0fe32a08ee9880fb82bc6f59b4ca76 Mon Sep 17 00:00:00 2001 From: "cyril.tsui" Date: Fri, 23 May 2025 10:22:17 +0800 Subject: [PATCH] update for mock up. ppt v8 --- .../scheduling/detail/edit/not-found.tsx | 17 + .../(main)/scheduling/detail/edit/page.tsx | 47 ++ .../(main)/settings/qcItem/edit/not-found.tsx | 2 +- src/components/Breadcrumb/Breadcrumb.tsx | 1 + .../DetailSchedule/DetailScheduleLoading.tsx | 40 + .../DetailScheduleSearchView.tsx | 202 +++++ .../DetailSchedule/DetailScheduleWrapper.tsx | 16 + src/components/DetailSchedule/index.ts | 1 + .../DetailScheduleDetail/DetailInfoCard.tsx | 112 +++ .../DetailScheduleDetailWrapper.tsx | 38 + .../DetailScheudleDetailView.tsx | 216 ++++++ .../DetailScheduleDetail/ViewByBomDetails.tsx | 556 ++++++++++++++ .../DetailScheduleDetail/ViewByFGDetails.tsx | 709 ++++++++++++++++++ src/components/DetailScheduleDetail/index.ts | 1 + .../RoughScheduleDetail/DetailInfoCard.tsx | 2 +- .../RoughScheduleDetail/ViewByBomDetails.tsx | 35 +- .../RoughScheduleDetail/ViewByFGDetails.tsx | 12 +- src/components/SearchBox/SearchBox.tsx | 2 +- .../SearchResults/EditableSearchResults.tsx | 14 +- .../SearchResults/TempInputGridForMockUp.tsx | 35 +- 20 files changed, 2040 insertions(+), 18 deletions(-) create mode 100644 src/app/(main)/scheduling/detail/edit/not-found.tsx create mode 100644 src/app/(main)/scheduling/detail/edit/page.tsx create mode 100644 src/components/DetailSchedule/DetailScheduleLoading.tsx create mode 100644 src/components/DetailSchedule/DetailScheduleSearchView.tsx create mode 100644 src/components/DetailSchedule/DetailScheduleWrapper.tsx create mode 100644 src/components/DetailSchedule/index.ts create mode 100644 src/components/DetailScheduleDetail/DetailInfoCard.tsx create mode 100644 src/components/DetailScheduleDetail/DetailScheduleDetailWrapper.tsx create mode 100644 src/components/DetailScheduleDetail/DetailScheudleDetailView.tsx create mode 100644 src/components/DetailScheduleDetail/ViewByBomDetails.tsx create mode 100644 src/components/DetailScheduleDetail/ViewByFGDetails.tsx create mode 100644 src/components/DetailScheduleDetail/index.ts diff --git a/src/app/(main)/scheduling/detail/edit/not-found.tsx b/src/app/(main)/scheduling/detail/edit/not-found.tsx new file mode 100644 index 0000000..34de267 --- /dev/null +++ b/src/app/(main)/scheduling/detail/edit/not-found.tsx @@ -0,0 +1,17 @@ +import { getServerI18n } from "@/i18n"; +import { Stack, Typography, Link } from "@mui/material"; +import NextLink from "next/link"; + +export default async function NotFound() { + const { t } = await getServerI18n("qcItem", "common"); + + return ( + + {t("Not Found")} + {t("The edit detail scheduling page was not found!")} + + {t("Return to all detail scheduling")} + + + ); +} diff --git a/src/app/(main)/scheduling/detail/edit/page.tsx b/src/app/(main)/scheduling/detail/edit/page.tsx new file mode 100644 index 0000000..d596030 --- /dev/null +++ b/src/app/(main)/scheduling/detail/edit/page.tsx @@ -0,0 +1,47 @@ +import { Metadata } from "next"; +import { getServerI18n, I18nProvider } from "@/i18n"; +import Typography from "@mui/material/Typography"; +import { fetchQcItemDetails, preloadQcItem } from "@/app/api/settings/qcItem"; +import QcItemSave from "@/components/QcItemSave"; +import { isArray } from "lodash"; +import { notFound } from "next/navigation"; +import { ServerFetchError } from "@/app/utils/fetchUtil"; +import DetailScheduleDetail from "@/components/DetailScheduleDetail"; + +export const metadata: Metadata = { + title: "Qc Item", +}; + +interface Props { + searchParams: { [key: string]: string | string[] | undefined }; +} + +const DetailScheduling: React.FC = async ({ searchParams }) => { + const { t } = await getServerI18n("schedule") + + const id = searchParams["id"] + + if (!id || isArray(id)) { + notFound() + } + + // try { + // await fetchQcItemDetails(id) + // } catch (e) { + // if (e instanceof ServerFetchError && (e.response?.status === 404 || e.response?.status === 400)) { + // console.log(e) + // notFound(); + // } + // } + + return <> + + {t("FG Production Schedule")} + + + + + ; +}; + +export default DetailScheduling; \ No newline at end of file diff --git a/src/app/(main)/settings/qcItem/edit/not-found.tsx b/src/app/(main)/settings/qcItem/edit/not-found.tsx index 84e23e1..ef2b2be 100644 --- a/src/app/(main)/settings/qcItem/edit/not-found.tsx +++ b/src/app/(main)/settings/qcItem/edit/not-found.tsx @@ -9,7 +9,7 @@ export default async function NotFound() { {t("Not Found")} {t("The edit qc item page was not found!")} - + {t("Return to all qc items")} diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx index 3593335..24c3688 100644 --- a/src/components/Breadcrumb/Breadcrumb.tsx +++ b/src/components/Breadcrumb/Breadcrumb.tsx @@ -17,6 +17,7 @@ const pathToLabelMap: { [path: string]: string } = { "/scheduling/rough": "Demand Forecast", "/scheduling/rough/edit": "FG & Material Demand Forecast Detail", "/scheduling/detail": "Detail Scheduling", + "/scheduling/detail/edit": "FG Production Schedule", }; const Breadcrumb = () => { diff --git a/src/components/DetailSchedule/DetailScheduleLoading.tsx b/src/components/DetailSchedule/DetailScheduleLoading.tsx new file mode 100644 index 0000000..eb5ae41 --- /dev/null +++ b/src/components/DetailSchedule/DetailScheduleLoading.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 DetailScheduleLoading: React.FC = () => { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default DetailScheduleLoading; diff --git a/src/components/DetailSchedule/DetailScheduleSearchView.tsx b/src/components/DetailSchedule/DetailScheduleSearchView.tsx new file mode 100644 index 0000000..9ab167b --- /dev/null +++ b/src/components/DetailSchedule/DetailScheduleSearchView.tsx @@ -0,0 +1,202 @@ +"use client"; + +import React, {useCallback, useEffect, useMemo, useState} from "react"; +import SearchBox, { Criterion } from "../SearchBox"; +import { ItemsResult} from "@/app/api/settings/item"; +import SearchResults, { Column } from "../SearchResults"; +import { EditNote } from "@mui/icons-material"; +import { useRouter, useSearchParams } from "next/navigation"; +import { GridDeleteIcon } from "@mui/x-data-grid"; +import { TypeEnum } from "@/app/utils/typeEnum"; +import axios from "axios"; +import {BASE_API_URL, NEXT_PUBLIC_API_URL} from "@/config/api"; +import { useTranslation } from "react-i18next"; +import axiosInstance from "@/app/(main)/axios/axiosInstance"; +import Qs from 'qs'; +import EditableSearchResults from "@/components/SearchResults/EditableSearchResults"; // Make sure to import Qs + +// may need move to "index" or "actions" +type RecordStructure = { + id: number, + scheduledPeriod: string, + scheduledAt: string, + productCount: number, +}; + +type Props = { + records: RecordStructure[]; +}; + +type SearchQuery = Partial>; +type SearchParamNames = keyof SearchQuery; + +const DSOverview: React.FC = ({ records }) => { + const [filteredItems, setFilteredItems] = useState(records ?? []); + const { t } = useTranslation("items"); + const router = useRouter(); + const [filterObj, setFilterObj] = useState({}); + const [tempSelectedValue, setTempSelectedValue] = useState({}); + const [pagingController, setPagingController] = useState({ + pageNum: 1, + pageSize: 10, + totalCount: 0, + }) + + const [mode, redirPath] = useMemo(() => { + // var typeId = TypeEnum.CONSUMABLE_ID + let title = ""; + const mode = "Search"; + let redirPath = ""; + title = "Product"; + redirPath = "/scheduling/detail"; + return [mode, redirPath]; + }, []); + + const searchCriteria: Criterion[] = useMemo( + () => + [ + { label: t("Schedule Period"), paramName: "scheduledPeriod", type: "dateRange" }, + { label: t("Scheduled At"), paramName: "scheduledAt", type: "dateRange" }, + { label: t("Product Count"), paramName: "productCount", type: "text" }, + ] + , + [t, records] + ); + + // const onDetailClick = useCallback( + // (item: ItemsResult) => { + // router.push(`/settings/items/edit?id=${item.id}`); + // }, + // [router] + // ); + + const onDeleteClick = useCallback( + (item: ItemsResult) => {}, + [router] + ); + + const onDetailClick = (record: any) => { + console.log("[debug] record", record); + router.push(`/scheduling/detail/edit?id=${record.id}`); + + } + + const columns = useMemo[]>( + () => [ + { + name: "id", + label: t("Details"), + onClick: (record)=>onDetailClick(record), + buttonIcon: , + }, + { + name: "scheduledPeriod", + label: "Demand Forecast Period", + }, + { + name: "scheduledAt", + label: t("Scheduled At"), + }, + { + name: "productCount", + label: t("Product Count(s)"), + }, + // { + // name: "action", + // label: t(""), + // buttonIcon: , + // onClick: onDeleteClick, + // }, + ], + [filteredItems] + ); + + useEffect(() => { + refetchData(filterObj); + + }, [filterObj, pagingController.pageNum, pagingController.pageSize]); + + const refetchData = async (filterObj: SearchQuery | null) => { + + const authHeader = axiosInstance.defaults.headers['Authorization']; + if (!authHeader) { + return; // Exit the function if the token is not set + } + + const params ={ + pageNum: pagingController.pageNum, + pageSize: pagingController.pageSize, + ...filterObj, + ...tempSelectedValue, + } + + try { + const response = await axiosInstance.get(`${NEXT_PUBLIC_API_URL}/items/getRecordByPage`, { + params, + paramsSerializer: (params) => { + return Qs.stringify(params, { arrayFormat: 'repeat' }); + }, + }); + //setFilteredItems(response.data.records); + setFilteredItems([ + { + id: 1, + scheduledPeriod: "2025-05-11 to 2025-05-17", + scheduledAt: "2025-05-07", + productCount: 13, + }, + { + id: 2, + scheduledPeriod: "2025-05-18 to 2025-05-24", + scheduledAt: "2025-05-14", + productCount: 15, + }, + { + id: 3, + scheduledPeriod: "2025-05-25 to 2025-05-31", + scheduledAt: "2025-05-21", + productCount: 13, + }, + ]) + setPagingController({ + ...pagingController, + totalCount: response.data.total + }) + return response; // Return the data from the response + } catch (error) { + console.error('Error fetching items:', error); + throw error; // Rethrow the error for further handling + } + }; + + const onReset = useCallback(() => { + //setFilteredItems(items ?? []); + setFilterObj({}); + setTempSelectedValue({}); + refetchData(null); + }, [records]); + + return ( + <> + { + setFilterObj({ + ...query + }) + }} + onReset={onReset} + /> + + items={filteredItems} + columns={columns} + setPagingController={setPagingController} + pagingController={pagingController} + isAutoPaging={false} + // hasCollapse={false} + /> + + ); +}; + +export default DSOverview; diff --git a/src/components/DetailSchedule/DetailScheduleWrapper.tsx b/src/components/DetailSchedule/DetailScheduleWrapper.tsx new file mode 100644 index 0000000..e1a6c7f --- /dev/null +++ b/src/components/DetailSchedule/DetailScheduleWrapper.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import {DetailScheduleLoading} from "./DetailScheduleLoading"; +import DSOverview from "./DetailScheduleSearchView"; + +interface SubComponents { + Loading: typeof DetailScheduleLoading; +} + +const DetailScheduleWrapper: React.FC & SubComponents = async () => { + + return ; +}; + +DetailScheduleWrapper.Loading = DetailScheduleLoading; + +export default DetailScheduleWrapper; diff --git a/src/components/DetailSchedule/index.ts b/src/components/DetailSchedule/index.ts new file mode 100644 index 0000000..a9ce973 --- /dev/null +++ b/src/components/DetailSchedule/index.ts @@ -0,0 +1 @@ +export { default } from "./DetailScheduleWrapper"; \ No newline at end of file diff --git a/src/components/DetailScheduleDetail/DetailInfoCard.tsx b/src/components/DetailScheduleDetail/DetailInfoCard.tsx new file mode 100644 index 0000000..f830358 --- /dev/null +++ b/src/components/DetailScheduleDetail/DetailInfoCard.tsx @@ -0,0 +1,112 @@ +"use client"; +import { + Box, + Card, + CardContent, + Grid, + Stack, + TextField, + Typography, +} from "@mui/material"; +import { Controller, useFormContext } from "react-hook-form"; +import { useTranslation } from "react-i18next"; +import InputDataGrid from "../InputDataGrid"; +import { useCallback, useEffect, useMemo, useState } from "react"; +import { GridColDef, GridRowModel } from "@mui/x-data-grid"; +import { InputDataGridProps, TableRow } from "../InputDataGrid/InputDataGrid"; +import { TypeEnum } from "@/app/utils/typeEnum"; +import { CreateItemInputs } from "@/app/api/settings/item/actions"; +import { NumberInputProps } from "@/components/CreateItem/NumberInputProps"; +import { integerFormatter } from "@/app/utils/formatUtil"; +import { SaveDetailSchedule } from "./DetailScheudleDetailView"; + +// temp interface input + +type Props = { + recordDetails: SaveDetailSchedule; + isEditing: boolean; +}; + +const DetailInfoCard: React.FC = ({ recordDetails, isEditing }) => { + const { + t, + i18n: { language }, + } = useTranslation(); + + const { + control, + register, + formState: { errors, defaultValues, touchedFields }, + } = useFormContext(); + + const [details, setDetails] = useState(null); + + useEffect(() => { + console.log("[debug] record details", recordDetails) + setDetails(recordDetails); + }, [recordDetails]) + + useEffect(() => { + console.log("[debug] isEdit", isEditing) + }, [isEditing]) + + return ( + + + + {/* + {t("Schedule Detail")} + */} + + + + + + + + + ( + + )} + /> + + + + + + ); +}; +export default DetailInfoCard; diff --git a/src/components/DetailScheduleDetail/DetailScheduleDetailWrapper.tsx b/src/components/DetailScheduleDetail/DetailScheduleDetailWrapper.tsx new file mode 100644 index 0000000..34652d2 --- /dev/null +++ b/src/components/DetailScheduleDetail/DetailScheduleDetailWrapper.tsx @@ -0,0 +1,38 @@ +import { CreateItemInputs } from "@/app/api/settings/item/actions"; +import { fetchItem } from "@/app/api/settings/item"; +import GeneralLoading from "@/components/General/GeneralLoading"; +import DetailScheduleDetailView from "@/components/DetailScheduleDetail/DetailScheudleDetailView"; + +interface SubComponents { + Loading: typeof GeneralLoading; +} + +type EditDetailScheduleDetailProps = { + id?: string | number +} + +type Props = EditDetailScheduleDetailProps + +const DetailScheduleDetailWrapper: React.FC & SubComponents = async ({ + id +}) => { + + const defaultValues = { + id: 1, + productionDate: "2025-05-07", + totalJobOrders: 13, + totalProductionQty: 21000, + } + + return ( + + ); +}; + +DetailScheduleDetailWrapper.Loading = GeneralLoading; + +export default DetailScheduleDetailWrapper; diff --git a/src/components/DetailScheduleDetail/DetailScheudleDetailView.tsx b/src/components/DetailScheduleDetail/DetailScheudleDetailView.tsx new file mode 100644 index 0000000..9728f45 --- /dev/null +++ b/src/components/DetailScheduleDetail/DetailScheudleDetailView.tsx @@ -0,0 +1,216 @@ +"use client"; + +import { useCallback, useEffect, useMemo, useState } from "react"; +import { useRouter, useSearchParams } from "next/navigation"; +import { useTranslation } from "react-i18next"; +import { + SaveDetailSchedule, + saveItem, +} from "@/app/api/settings/item/actions"; +import { + FormProvider, + SubmitErrorHandler, + SubmitHandler, + useForm, +} from "react-hook-form"; +import { deleteDialog } from "../Swal/CustomAlerts"; +import { Box, Button, Grid, Link, Stack, Tab, Tabs, TabsProps, Typography } from "@mui/material"; +import { Add, Check, Close, EditNote } from "@mui/icons-material"; +import { ItemQc, ItemsResult } from "@/app/api/settings/item"; +import { useGridApiRef } from "@mui/x-data-grid"; +import ProductDetails from "@/components/CreateItem/ProductDetails"; +import DetailInfoCard from "@/components/DetailScheduleDetail/DetailInfoCard"; +import ViewByFGDetails, { FGRecord } from "@/components/DetailScheduleDetail/ViewByFGDetails"; +import ViewByBomDetails from "@/components/DetailScheduleDetail/ViewByBomDetails"; +import EditableSearchResults, { Column } from "@/components/SearchResults/EditableSearchResults"; + +// temp interface input +export interface SaveDetailSchedule { + id: number, + productionDate: string, + totalJobOrders: number, + totalProductionQty: number +} + +type Props = { + isEditMode: boolean; + // type: TypeEnum; + defaultValues: Partial | undefined; + qcChecks: ItemQc[] +}; + +const DetailScheduleDetailView: React.FC = ({ + isEditMode, + // type, + defaultValues, + // qcChecks +}) => { + // console.log(type) + const apiRef = useGridApiRef(); + const params = useSearchParams() + console.log(params.get("id")) + const [serverError, setServerError] = useState(""); + const [tabIndex, setTabIndex] = useState(0); + const { t } = useTranslation("schedule") + const router = useRouter(); + const [isEdit, setIsEdit] = useState(false); + //const title = "Demand Forecast Detail" + const [mode, redirPath] = useMemo(() => { + // var typeId = TypeEnum.CONSUMABLE_ID + let title = ""; + let mode = ""; + let redirPath = ""; + // if (type === TypeEnum.MATERIAL) { + // typeId = TypeEnum.MATERIAL_ID + // title = "Material"; + // redirPath = "/settings/material"; + // } + // if (type === TypeEnum.PRODUCT) { + // typeId = TypeEnum.PRODUCT_ID + title = "Product"; + redirPath = "scheduling/detail/edit"; + // } + // if (type === TypeEnum.BYPRODUCT) { + // typeId = TypeEnum.BYPRODUCT_ID + // title = "By-Product"; + // redirPath = "/settings/byProduct"; + // } + if (isEditMode) { + mode = "Edit"; + } else { + mode = "Create"; + } + return [mode, redirPath]; + }, [isEditMode]); + // console.log(typeId) + const formProps = useForm({ + defaultValues: defaultValues ? defaultValues : { + id: 1, + productionDate: "2025-05-07", + totalJobOrders: 13, + totalProductionQty: 21000, + }, + }); + const errors = formProps.formState.errors; + + const handleTabChange = useCallback>( + (_e, newValue) => { + setTabIndex(newValue); + }, + [], + ); + + + + const [pagingController, setPagingController] = useState({ + pageNum: 1, + pageSize: 10, + totalCount: 0, + }) + + + const handleCancel = () => { + router.replace(`/scheduling/Detail`); + }; + + const onSubmit = useCallback>( + async (data, event) => { + const hasErrors = false; + console.log(errors) + // console.log(apiRef.current.getCellValue(2, "lowerLimit")) + // apiRef.current. + try { + if (hasErrors) { + setServerError(t("An error has occurred. Please try again later.")); + return false; + } + } catch (e) { + // backend error + setServerError(t("An error has occurred. Please try again later.")); + console.log(e); + } + }, + [apiRef, router, t] + ); + + // multiple tabs + const onSubmitError = useCallback>( + (errors) => { }, + [] + ); + + const onClickEdit = () => { + setIsEdit(!isEdit) + } + + return ( + <> + + + {/**/} + {/* */} + {/* {t(`${mode} ${title}`)}*/} + {/* */} + {/**/} + + + + + + + {/* + + + */} + {serverError && ( + + {serverError} + + )} + {/* {tabIndex === 0 && } */} + + {/* {tabIndex === 1 && } */} + + + + + + + + ); +}; +export default DetailScheduleDetailView; diff --git a/src/components/DetailScheduleDetail/ViewByBomDetails.tsx b/src/components/DetailScheduleDetail/ViewByBomDetails.tsx new file mode 100644 index 0000000..05df248 --- /dev/null +++ b/src/components/DetailScheduleDetail/ViewByBomDetails.tsx @@ -0,0 +1,556 @@ +"use client"; + +import { CreateItemInputs } from "@/app/api/settings/item/actions"; +import { + GridColDef, + GridRowModel, + GridRenderEditCellParams, + GridEditInputCell, + GridRowSelectionModel, + useGridApiRef, +} from "@mui/x-data-grid"; +import {MutableRefObject, useCallback, useEffect, useMemo, useState} from "react"; +import { useFormContext } from "react-hook-form"; +import { useTranslation } from "react-i18next"; +import InputDataGrid, { TableRow } from "../InputDataGrid/InputDataGrid"; +import {Box, Grid, Tooltip, Typography} from "@mui/material"; +import { ItemQc } from "@/app/api/settings/item"; +import { QcChecksInputs } from "@/app/api/settings/qcCheck/actions"; +import { GridApiCommunity } from "@mui/x-data-grid/internals"; +import { RiceBowl } from "@mui/icons-material"; +import EditableSearchResults, {Column} from "@/components/SearchResults/EditableSearchResults"; +import { decimalFormatter } from "@/app/utils/formatUtil"; +import { GridRenderCellParams } from "@mui/x-data-grid"; + +type Props = { + apiRef: MutableRefObject +}; +type EntryError = + | { + [field in keyof QcChecksInputs]?: string; +} + | undefined; + +export type FGRecord = { + id: string | number + code: string; + name: string; + inStockQty: number; + purchaseQty: number; +} + +export type FGOverallRecord = { + id: string | number + code: string; + name: string; + type: string; + inStockQty: number; + purchaseQty: number; + purchaseQty1: number; + purchaseQty2: number; + purchaseQty3: number; + purchaseQty4: number; + purchaseQty5: number; + purchaseQty6: number; + purchaseQty7: number; + overallPurchaseQty: number; +} + +const ViewByBomDetails: React.FC = ({ apiRef, isEdit }) => { + const { + t, + i18n: { language }, + } = useTranslation("schedule"); + + const { + formState: { errors, defaultValues, touchedFields }, + } = useFormContext(); +// const apiRef = useGridApiRef(); + + const dayPeriod = [ + '2025-05-11', + '2025-05-12', + '2025-05-13', + '2025-05-14', + '2025-05-15', + '2025-05-16', + '2025-05-17', + ]; + + const fakeRecords = useMemo( + () => [ + [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 54.44 , purchaseQty: 972.12 }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52 , purchaseQty: 3175.2 }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00 , purchaseQty: 90 }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04 , purchaseQty: 60.4 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 6.04 , purchaseQty: 66.45 }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 6.04 , purchaseQty: 78.55 }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98 , purchaseQty: 2419.8 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00 , purchaseQty: 0 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42 , purchaseQty: 774.2 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00 , purchaseQty: 0 }, + { id: 11, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00 , purchaseQty: 6000 }, + { id: 12, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 972.12 }, + { id: 13, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 28.15 }, + { id: 14, code: "MG1288", type: "Material", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 15, code: "MG0066", type: "Material", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + { id: 16, code: "MH0040", type: "Material", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 }, + ], + [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 54.44 , purchaseQty: 972.12 }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52 , purchaseQty: 3175.2 }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00 , purchaseQty: 90 }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04 , purchaseQty: 60.4 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 6.04 , purchaseQty: 66.45 }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 6.04 , purchaseQty: 78.55 }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98 , purchaseQty: 2419.8 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00 , purchaseQty: 0 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42 , purchaseQty: 774.2 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00 , purchaseQty: 0 }, + { id: 11, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00 , purchaseQty: 6000 }, + { id: 12, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 972.12 }, + { id: 13, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 28.15 }, + { id: 14, code: "MG1288", type: "Material", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 15, code: "MG0066", type: "Material", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + { id: 16, code: "MH0040", type: "Material", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 }, + ], + [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 54.44 , purchaseQty: 972.12 }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52 , purchaseQty: 3175.2 }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00 , purchaseQty: 90 }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04 , purchaseQty: 60.4 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 6.04 , purchaseQty: 66.45 }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 6.04 , purchaseQty: 78.55 }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98 , purchaseQty: 2419.8 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00 , purchaseQty: 0 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42 , purchaseQty: 774.2 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00 , purchaseQty: 0 }, + { id: 11, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00 , purchaseQty: 6000 }, + { id: 12, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 972.12 }, + { id: 13, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 28.15 }, + { id: 14, code: "MG1288", type: "Material", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 15, code: "MG0066", type: "Material", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + { id: 16, code: "MH0040", type: "Material", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 }, + ], + [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 54.44 , purchaseQty: 972.12 }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52 , purchaseQty: 3175.2 }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00 , purchaseQty: 90 }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04 , purchaseQty: 60.4 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 6.04 , purchaseQty: 66.45 }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 6.04 , purchaseQty: 78.55 }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98 , purchaseQty: 2419.8 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00 , purchaseQty: 0 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42 , purchaseQty: 774.2 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00 , purchaseQty: 0 }, + { id: 11, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00 , purchaseQty: 6000 }, + { id: 12, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 972.12 }, + { id: 13, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 28.15 }, + { id: 14, code: "MG1288", type: "Material", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 15, code: "MG0066", type: "Material", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + { id: 16, code: "MH0040", type: "Material", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 }, + ], + [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 54.44 , purchaseQty: 972.12 }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52 , purchaseQty: 3175.2 }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00 , purchaseQty: 90 }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04 , purchaseQty: 60.4 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 6.04 , purchaseQty: 66.45 }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 6.04 , purchaseQty: 78.55 }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98 , purchaseQty: 2419.8 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00 , purchaseQty: 0 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42 , purchaseQty: 774.2 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00 , purchaseQty: 0 }, + { id: 11, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00 , purchaseQty: 6000 }, + { id: 12, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 972.12 }, + { id: 13, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 28.15 }, + { id: 14, code: "MG1288", type: "Material", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 15, code: "MG0066", type: "Material", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + { id: 16, code: "MH0040", type: "Material", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 }, + ], + [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 54.44 , purchaseQty: 972.12 }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52 , purchaseQty: 3175.2 }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00 , purchaseQty: 90 }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04 , purchaseQty: 60.4 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 6.04 , purchaseQty: 66.45 }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 6.04 , purchaseQty: 78.55 }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98 , purchaseQty: 2419.8 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00 , purchaseQty: 0 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42 , purchaseQty: 774.2 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00 , purchaseQty: 0 }, + { id: 11, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00 , purchaseQty: 6000 }, + { id: 12, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 972.12 }, + { id: 13, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 28.15 }, + { id: 14, code: "MG1288", type: "Material", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 15, code: "MG0066", type: "Material", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + { id: 16, code: "MH0040", type: "Material", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 }, + ], + [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 54.44 , purchaseQty: 972.12 }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52 , purchaseQty: 3175.2 }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00 , purchaseQty: 90 }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04 , purchaseQty: 60.4 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 6.04 , purchaseQty: 66.45 }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 6.04 , purchaseQty: 78.55 }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98 , purchaseQty: 2419.8 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00 , purchaseQty: 0 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42 , purchaseQty: 774.2 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00 , purchaseQty: 0 }, + { id: 11, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00 , purchaseQty: 6000 }, + { id: 12, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 972.12 }, + { id: 13, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 28.15 }, + { id: 14, code: "MG1288", type: "Material", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 15, code: "MG0066", type: "Material", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + { id: 16, code: "MH0040", type: "Material", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 }, + ], + ], + [] + ); + + const fakeOverallRecords = useMemo( + () => [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 54.44 , + purchaseQty1: 972.12, purchaseQty2: 972.12, purchaseQty3: 972.12, + purchaseQty4: 972.12, purchaseQty5: 972.12, purchaseQty6: 972.12, + purchaseQty7: 972.12, overallPurchaseQty: 6804.84 + }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52 , + purchaseQty1: 3175.2, purchaseQty2: 3175.2, purchaseQty3: 3175.2, + purchaseQty4: 3175.2, purchaseQty5: 3175.2, purchaseQty6: 3175.2, + purchaseQty7: 3175.2, overallPurchaseQty: 22226.4 + }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00 , + purchaseQty1: 90, purchaseQty2: 90, purchaseQty3: 90, + purchaseQty4: 90, purchaseQty5: 90, purchaseQty6: 90, + purchaseQty7: 90, overallPurchaseQty: 630 + }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04 , + purchaseQty1: 60.4, purchaseQty2: 60.4, purchaseQty3: 60.4, + purchaseQty4: 60.4, purchaseQty5: 60.4, purchaseQty6: 60.4, + purchaseQty7: 60.4, overallPurchaseQty: 422.8 + }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 6.04 , + purchaseQty1: 66.45, purchaseQty2: 66.45, purchaseQty3: 66.45, + purchaseQty4: 66.45, purchaseQty5: 66.45, purchaseQty6: 66.45, + purchaseQty7: 66.45, overallPurchaseQty: 465.15 + }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 6.04 , + purchaseQty1: 78.55, purchaseQty2: 78.55, purchaseQty3: 78.55, + purchaseQty4: 78.55, purchaseQty5: 78.55, purchaseQty6: 78.55, + purchaseQty7: 78.55, overallPurchaseQty: 549.85 + }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98 , purchaseQty: 2419.8 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00 , purchaseQty: 0 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42 , purchaseQty: 774.2 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00 , purchaseQty: 0 }, + { id: 11, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00 , purchaseQty: 6000 }, + { id: 12, code: "MH0040",type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 972.12 }, + { id: 13, code: "FA0161",type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 28.15 }, + { id: 14, code: "MG1288", type: "Material",name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 15, code: "MG0066", type: "Material",name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + { id: 16, code: "MH0040", type: "Material",name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 }, + ], + [] + ); + + const [pagingController, setPagingController] = useState([ + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + ]) + + const updatePagingController = (updatedObj) => { + setPagingController((prevState) => { + return prevState.map((item, index) => { + if (index === updatedObj?.index){ + return { + ...item, + pageNum: item.pageNum, + pageSize: item.pageSize, + totalCount: item.totalCount, + }; + } + else + return item + }); + }); + }; + + const overallColumns = useMemo[]>( + () => [ + { + field: "code", + label: "code", + type: 'read-only', + // editable: true, + }, + { + field: "name", + label: t("name"), + type: 'read-only', + }, + { + field: "type", + label: "type", + type: 'read-only', + // editable: true, + }, + { + field: "inStockQty", + label: t("Available Qty"), + type: 'read-only', + style: { + textAlign: "right", + }, + renderCell: (row: FGOverallRecord) => { + if (typeof(row.inStockQty) == "number") { + return decimalFormatter.format(row.inStockQty) + } + return row.inStockQty + } + // editable: true, + }, + { + field: "overallPurchaseQty", + label: t("Total Demand Qty"), + type: 'read-only', + style: { + textAlign: "right", + }, + renderCell: (row: FGOverallRecord) => { + if (typeof(row.overallPurchaseQty) == "number") { + return decimalFormatter.format(row.overallPurchaseQty) + } + return row.overallPurchaseQty + } + }, + { + field: "purchaseQty1", + label: t("Demand Qty (Day1)"), + type: 'read-only', + style: { + textAlign: "right", + }, + renderCell: (row: FGOverallRecord) => { + if (typeof(row.purchaseQty1) == "number") { + return decimalFormatter.format(row.purchaseQty1) + } + return row.purchaseQty1 + } + }, + { + field: "purchaseQty2", + label: t("Demand Qty (Day2)"), + type: 'read-only', + style: { + textAlign: "right", + }, + renderCell: (row: FGOverallRecord) => { + if (typeof(row.purchaseQty2) == "number") { + return decimalFormatter.format(row.purchaseQty2) + } + return row.purchaseQty2 + } + }, + { + field: "purchaseQty3", + label: t("Demand Qty (Day3)"), + type: 'read-only', + style: { + textAlign: "right", + }, + renderCell: (row: FGOverallRecord) => { + if (typeof(row.purchaseQty3) == "number") { + return decimalFormatter.format(row.purchaseQty3) + } + return row.purchaseQty3 + } + }, + { + field: "purchaseQty4", + label: t("Demand Qty (Day4)"), + type: 'read-only', + style: { + textAlign: "right", + }, + renderCell: (row: FGOverallRecord) => { + if (typeof(row.purchaseQty4) == "number") { + return decimalFormatter.format(row.purchaseQty4) + } + return row.purchaseQty4 + } + },{ + field: "purchaseQty5", + label: t("Demand Qty (Day5)"), + type: 'read-only', + style: { + textAlign: "right", + }, + renderCell: (row: FGOverallRecord) => { + if (typeof(row.purchaseQty5) == "number") { + return decimalFormatter.format(row.purchaseQty5) + } + return row.purchaseQty5 + } + }, + { + field: "purchaseQty6", + label: t("Demand Qty (Day6)"), + type: 'read-only', + style: { + textAlign: "right", + }, + renderCell: (row: FGOverallRecord) => { + if (typeof(row.purchaseQty6) == "number") { + return decimalFormatter.format(row.purchaseQty6) + } + return row.purchaseQty6 + } + }, + { + field: "purchaseQty7", + label: t("Demand Qty (Day7)"), + type: 'read-only', + style: { + textAlign: "right", + }, + renderCell: (row: FGOverallRecord) => { + if (typeof(row.purchaseQty7) == "number") { + return decimalFormatter.format(row.purchaseQty7) + } + return row.purchaseQty7 + } + }, + ], + [] + ); + + const columns = useMemo[]>( + () => [ + { + field: "code", + label: "code", + type: 'read-only', + // editable: true, + }, + { + field: "name", + label: "name", + type: 'read-only', + }, + { + field: "type", + label: "type", + type: 'read-only', + }, + { + field: "inStockQty", + label: "Available Qty", + type: 'read-only', + // editable: true, + style: { + textAlign: "right", + }, + renderCell: (row: FGRecord) => { + if (typeof(row.inStockQty) == "number") { + return decimalFormatter.format(row.inStockQty) + } + return row.inStockQty + } + }, + { + field: "purchaseQty", + label: "Demand Qty", + type: 'read-only', + style: { + textAlign: "right", + }, + renderCell: (row: FGRecord) => { + if (typeof(row.purchaseQty) == "number") { + return decimalFormatter.format(row.purchaseQty) + } + return row.purchaseQty + } + }, + ], + [] + ); + + return ( + + + + {t("Material Demand List (7 Days)")} + + + index={7} + items={fakeOverallRecords} + isMockUp={true} + columns={overallColumns} + setPagingController={updatePagingController} + pagingController={pagingController[7]} + isAutoPaging={true} + isEditable={false} + isEdit={false} + /> + + {dayPeriod.map((date, index) => ( + + + {`${t("Material Demand Date")}: ${date}`} + + + index={index} + items={fakeRecords[index]} // Use the corresponding records for the day + columns={columns} + setPagingController={updatePagingController} + pagingController={pagingController[index]} + isAutoPaging={true} + isEditable={false} + isEdit={isEdit} + /> + + ))} + + ); +}; +export default ViewByBomDetails; diff --git a/src/components/DetailScheduleDetail/ViewByFGDetails.tsx b/src/components/DetailScheduleDetail/ViewByFGDetails.tsx new file mode 100644 index 0000000..f706291 --- /dev/null +++ b/src/components/DetailScheduleDetail/ViewByFGDetails.tsx @@ -0,0 +1,709 @@ +"use client"; + +import { CreateItemInputs } from "@/app/api/settings/item/actions"; +import { + GridColDef, + GridRowModel, + GridRenderEditCellParams, + GridEditInputCell, + GridRowSelectionModel, + useGridApiRef, +} from "@mui/x-data-grid"; +import { MutableRefObject, useCallback, useMemo, useState } from "react"; +import { useFormContext } from "react-hook-form"; +import { useTranslation } from "react-i18next"; +import InputDataGrid, { TableRow } from "../InputDataGrid/InputDataGrid"; +import { Box, Grid, Tooltip, Typography } from "@mui/material"; +import { ItemQc } from "@/app/api/settings/item"; +import { QcChecksInputs } from "@/app/api/settings/qcCheck/actions"; +import { GridApiCommunity } from "@mui/x-data-grid/internals"; +import { RiceBowl } from "@mui/icons-material"; +import EditableSearchResults, { Column } from "@/components/SearchResults/EditableSearchResults"; +import { decimalFormatter, integerFormatter } from "@/app/utils/formatUtil"; + +type Props = { + apiRef: MutableRefObject + isEdit: Boolean +}; +type EntryError = + | { + [field in keyof QcChecksInputs]?: string; + } + | undefined; + +export type FGRecord = { + id: string | number + code: string; + name: string; + inStockQty: number; + productionQty?: number; + purchaseQty?: number +} + + +const ViewByFGDetails: React.FC = ({ apiRef, isEdit }) => { + const { + t, + i18n: { language }, + } = useTranslation(); + + const { + formState: { errors, defaultValues, touchedFields }, + } = useFormContext(); + // const apiRef = useGridApiRef(); + + const dayPeriod = [ + '2025-05-07', + // '2025-05-12', + // '2025-05-13', + // '2025-05-14', + // '2025-05-15', + // '2025-05-16', + // '2025-05-17', + ]; + + const fakeRecordLine = useMemo( + () => [ + [ + { id: 1, code: "mt1", name: "material 1", inStockQty: 10, purchaseQty: 1 }, + { id: 2, code: "mt2", name: "material 2", inStockQty: 20, purchaseQty: 199 }, + ], + [ + { id: 3, code: "mt3", name: "material 3", inStockQty: 30, purchaseQty: 3 }, + { id: 4, code: "mt4", name: "material 4", inStockQty: 40, purchaseQty: 499 }, + ], + [ + { id: 5, code: "mt5", name: "material 5", inStockQty: 50, purchaseQty: 5 }, + { id: 6, code: "mt6", name: "material 6", inStockQty: 60, purchaseQty: 699 }, + ], + [ + { id: 7, code: "mt7", name: "material 7", inStockQty: 70, purchaseQty: 7 }, + { id: 8, code: "mt8", name: "material 8", inStockQty: 80, purchaseQty: 899 }, + ], + [ + { id: 9, code: "mt9", name: "material 9", inStockQty: 90, purchaseQty: 9 }, + { id: 10, code: "mt10", name: "material 10", inStockQty: 100, purchaseQty: 999 }, + ], + [ + { id: 11, code: "mt11", name: "material 11", inStockQty: 110, purchaseQty: 11 }, + { id: 12, code: "mt12", name: "material 12", inStockQty: 120, purchaseQty: 1299 }, + ], + [ + { id: 13, code: "mt13", name: "material 13", inStockQty: 130, purchaseQty: 13 }, + { id: 14, code: "mt14", name: "material 14", inStockQty: 140, purchaseQty: 1499 }, + ], + ], + [] + ); + + + const fakeRecords = useMemo( + () => [ + [ + { + id: 1, jobNo: "JO20250507001", priority: 85, code: "PP1193", type: "FG", name: "蔥油(1磅) ", inStockQty: 1322, productionQty: 661, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 100, purchaseQty: 20 }, + { id: 2, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 80, purchaseQty: 10 } + ] + }, + { + id: 2, jobNo: "JO20250507002", priority: 80, code: " PP1096", type: "FG", name: "白麵撈", inStockQty: 1040, productionQty: 520, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 1000, purchaseQty: 190.00 }, + { id: 1, code: "MH0040", type: "Material", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 1000, purchaseQty: 250.00 }, + { id: 2, code: "FA0161", type: "Material", name: "蔥油", inStockQty: 1322, purchaseQty: 0 }, + ] + }, + { + id: 3, jobNo: "JO20250507003", priority: 35, code: "PP1080", type: "FG", name: "咖哩汁", inStockQty: 2400, productionQty: 1200.0, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 108.88 }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52, purchaseQty: 635.04 }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00, purchaseQty: 18.00 }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04, purchaseQty: 12.08 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 0, purchaseQty: 12.08 }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 0, purchaseQty: 12.08 }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98, purchaseQty: 483.96 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00, purchaseQty: 72.00 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42, purchaseQty: 154.84 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00, purchaseQty: 120.00 }, + { id: 10, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00, purchaseQty: 200.0 }, + ] + }, + { + id: 4, jobNo: "JO20250507004", priority: 20, code: " PP1188", type: "FG", name: "咖喱膽", inStockQty: 1016.2, productionQty: 508.1, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 217.72 }, + { id: 2, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 18.15 }, + { id: 3, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 0, purchaseQty: 18.15 }, + { id: 4, code: "MG1288", type: "Material", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 0, purchaseQty: 6.05 }, + { id: 6, code: "MG0066", type: "Material", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + ] + }, + ], + [ + { + id: 1, code: "PP1080", type: "FG", name: "咖哩汁", inStockQty: 2400, productionQty: 1200.0, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 108.88 }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52, purchaseQty: 635.04 }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00, purchaseQty: 18.00 }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04, purchaseQty: 12.08 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 0, purchaseQty: 12.08 }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 0, purchaseQty: 12.08 }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98, purchaseQty: 483.96 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00, purchaseQty: 72.00 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42, purchaseQty: 154.84 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00, purchaseQty: 120.00 }, + { id: 10, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00, purchaseQty: 200.0 }, + ] + }, + { + id: 2, code: "PP1193", type: "FG", name: "蔥油(1磅) ", inStockQty: 1322, productionQty: 661, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 20 }, + { id: 2, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 10 } + ] + }, + { + id: 3, code: " PP1188", type: "FG", name: "咖喱膽", inStockQty: 1016.2, productionQty: 508.1, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 217.72 }, + { id: 2, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 18.15 }, + { id: 3, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 0, purchaseQty: 18.15 }, + { id: 4, code: "MG1288", type: "Material", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 0, purchaseQty: 6.05 }, + { id: 6, code: "MG0066", type: "Material", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + ] + }, + { + id: 4, code: " PP1096", type: "FG", name: "白麵撈", inStockQty: 1040, productionQty: 520, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 190.00 }, + { id: 1, code: "MH0040", type: "Material", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 }, + { id: 2, code: "FA0161", type: "Material", name: "蔥油", inStockQty: 1322, purchaseQty: 0 }, + ] + }, + ], + [ + { + id: 1, code: "PP1080", type: "FG", name: "咖哩汁", inStockQty: 2400, productionQty: 1200.0, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 108.88 }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52, purchaseQty: 635.04 }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00, purchaseQty: 18.00 }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04, purchaseQty: 12.08 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 0, purchaseQty: 12.08 }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 0, purchaseQty: 12.08 }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98, purchaseQty: 483.96 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00, purchaseQty: 72.00 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42, purchaseQty: 154.84 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00, purchaseQty: 120.00 }, + { id: 10, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00, purchaseQty: 200.0 }, + ] + }, + { + id: 2, code: "PP1193", type: "FG", name: "蔥油(1磅) ", inStockQty: 1322, productionQty: 661, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 20 }, + { id: 2, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 10 } + ] + }, + { + id: 3, code: " PP1188", type: "FG", name: "咖喱膽", inStockQty: 1016.2, productionQty: 508.1, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 217.72 }, + { id: 2, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 18.15 }, + { id: 3, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 0, purchaseQty: 18.15 }, + { id: 4, code: "MG1288", type: "Material", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 0, purchaseQty: 6.05 }, + { id: 6, code: "MG0066", type: "Material", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + ] + }, + { + id: 4, code: " PP1096", type: "FG", name: "白麵撈", inStockQty: 1040, productionQty: 520, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 190.00 }, + { id: 1, code: "MH0040", type: "Material", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 }, + { id: 2, code: "FA0161", type: "Material", name: "蔥油", inStockQty: 1322, purchaseQty: 0 }, + ] + }, + ], + [ + { + id: 1, code: "PP1080", type: "FG", name: "咖哩汁", inStockQty: 2400, productionQty: 1200.0, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 108.88 }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52, purchaseQty: 635.04 }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00, purchaseQty: 18.00 }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04, purchaseQty: 12.08 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 0, purchaseQty: 12.08 }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 0, purchaseQty: 12.08 }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98, purchaseQty: 483.96 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00, purchaseQty: 72.00 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42, purchaseQty: 154.84 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00, purchaseQty: 120.00 }, + { id: 10, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00, purchaseQty: 200.0 }, + ] + }, + { + id: 2, code: "PP1193", type: "FG", name: "蔥油(1磅) ", inStockQty: 1322, productionQty: 661, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 20 }, + { id: 2, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 10 } + ] + }, + { + id: 3, code: " PP1188", type: "FG", name: "咖喱膽", inStockQty: 1016.2, productionQty: 508.1, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 217.72 }, + { id: 2, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 18.15 }, + { id: 3, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 0, purchaseQty: 18.15 }, + { id: 4, code: "MG1288", type: "Material", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 0, purchaseQty: 6.05 }, + { id: 6, code: "MG0066", type: "Material", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + ] + }, + { + id: 4, code: " PP1096", type: "FG", name: "白麵撈", inStockQty: 1040, productionQty: 520, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 190.00 }, + { id: 1, code: "MH0040", type: "Material", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 }, + { id: 2, code: "FA0161", type: "Material", name: "蔥油", inStockQty: 1322, purchaseQty: 0 }, + ] + }, + ], + [ + { + id: 1, code: "PP1080", name: "咖哩汁", inStockQty: 2400, productionQty: 1200.0, + lines: [ + { id: 1, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 108.88 }, + { id: 2, code: "GI3236", name: "清水(煮過牛腩)", inStockQty: 317.52, purchaseQty: 635.04 }, + { id: 3, code: "MG1700", name: "STERILTOM 意大利茄粒", inStockQty: 9.00, purchaseQty: 18.00 }, + { id: 4, code: "FA0533", name: "乾蔥茸", inStockQty: 6.04, purchaseQty: 12.08 }, + { id: 5, code: "FA0210", name: "薑茸", inStockQty: 0, purchaseQty: 12.08 }, + { id: 6, code: "FA0608", name: "粗蒜茸", inStockQty: 0, purchaseQty: 12.08 }, + { id: 7, code: "FA0056", name: "洋蔥肉", inStockQty: 241.98, purchaseQty: 483.96 }, + { id: 8, code: "PP1188", name: "咖喱膽", inStockQty: 36.00, purchaseQty: 72.00 }, + { id: 9, code: "PP8001", name: "咖哩汁箱料粉", inStockQty: 77.42, purchaseQty: 154.84 }, + { id: 10, code: "PP1096", name: "白麵撈", inStockQty: 60.00, purchaseQty: 120.00 }, + { id: 10, code: "NA0476", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00, purchaseQty: 200.00 }, + ] + }, + { + id: 2, code: "PP1193", name: "蔥油(1磅) ", inStockQty: 1322, productionQty: 661, + lines: [ + { id: 1, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 20 }, + { id: 2, code: "FA0161", name: "洋蔥粒", inStockQty: 0, purchaseQty: 10 } + ] + }, + { + id: 3, code: " PP1188", name: "咖喱膽", inStockQty: 1016.2, productionQty: 508.1, + lines: [ + { id: 1, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 217.72 }, + { id: 2, code: "FA0161", name: "洋蔥粒", inStockQty: 0, purchaseQty: 18.15 }, + { id: 3, code: "FA0608", name: "粗蒜茸", inStockQty: 0, purchaseQty: 18.15 }, + { id: 4, code: "MG1288", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 5, code: "FA0210", name: "薑茸", inStockQty: 0, purchaseQty: 6.05 }, + { id: 6, code: "MG0066", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + ] + }, + { + id: 4, code: " PP1096", name: "白麵撈", inStockQty: 1040, productionQty: 520, + lines: [ + { id: 1, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 190.00 }, + { id: 1, code: "MH0040", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 }, + { id: 2, code: "FA0161", name: "蔥油", inStockQty: 1322, purchaseQty: 0 }, + ] + }, + ], + [ + { + id: 1, code: "PP1080", type: "FG", name: "咖哩汁", inStockQty: 2400, productionQty: 1200.0, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 108.88 }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52, purchaseQty: 635.04 }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00, purchaseQty: 18.00 }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04, purchaseQty: 12.08 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 0, purchaseQty: 12.08 }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 0, purchaseQty: 12.08 }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98, purchaseQty: 483.96 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00, purchaseQty: 72.00 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42, purchaseQty: 154.84 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00, purchaseQty: 120.00 }, + { id: 10, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00, purchaseQty: 200.0 }, + ] + }, + { + id: 2, code: "PP1193", type: "FG", name: "蔥油(1磅) ", inStockQty: 1322, productionQty: 661, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 20 }, + { id: 2, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 10 } + ] + }, + { + id: 3, code: " PP1188", type: "FG", name: "咖喱膽", inStockQty: 1016.2, productionQty: 508.1, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 217.72 }, + { id: 2, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 18.15 }, + { id: 3, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 0, purchaseQty: 18.15 }, + { id: 4, code: "MG1288", type: "Material", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 0, purchaseQty: 6.05 }, + { id: 6, code: "MG0066", type: "Material", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + ] + }, + { + id: 4, code: " PP1096", type: "FG", name: "白麵撈", inStockQty: 1040, productionQty: 520, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 190.00 }, + { id: 1, code: "MH0040", type: "Material", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 }, + { id: 2, code: "FA0161", type: "Material", name: "蔥油", inStockQty: 1322, purchaseQty: 0 }, + ] + }, + ], + [ + { + id: 1, code: "PP1080", type: "FG", name: "咖哩汁", inStockQty: 2400, productionQty: 1200.0, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 108.88 }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52, purchaseQty: 635.04 }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00, purchaseQty: 18.00 }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04, purchaseQty: 12.08 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 0, purchaseQty: 12.08 }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 0, purchaseQty: 12.08 }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98, purchaseQty: 483.96 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00, purchaseQty: 72.00 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42, purchaseQty: 154.84 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00, purchaseQty: 120.00 }, + { id: 10, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00, purchaseQty: 200.0 }, + ] + }, + { + id: 2, code: "PP1193", type: "FG", name: "蔥油(1磅) ", inStockQty: 1322, productionQty: 661, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 20 }, + { id: 2, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 10 } + ] + }, + { + id: 3, code: " PP1188", type: "FG", name: "咖喱膽", inStockQty: 1016.2, productionQty: 508.1, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 217.72 }, + { id: 2, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 18.15 }, + { id: 3, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 0, purchaseQty: 18.15 }, + { id: 4, code: "MG1288", type: "Material", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 0, purchaseQty: 6.05 }, + { id: 6, code: "MG0066", type: "Material", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 }, + ] + }, + { + id: 4, code: " PP1096", type: "FG", name: "白麵撈", inStockQty: 1040, productionQty: 520, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 190.00 }, + { id: 1, code: "MH0040", type: "Material", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 }, + { id: 2, code: "FA0161", type: "Material", name: "蔥油", inStockQty: 1322, purchaseQty: 0 }, + ] + }, + ], + ], + [] + ); + + const [pagingController, setPagingController] = useState([ + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + { + pageNum: 1, + pageSize: 10, + totalCount: 0, + }, + ]) + + const updatePagingController = (updatedObj) => { + setPagingController((prevState) => { + return prevState.map((item, index) => { + if (index === updatedObj?.index) { + return { + ...item, + pageNum: item.pageNum, + pageSize: item.pageSize, + totalCount: item.totalCount, + }; + } + else + return item + }); + }); + }; + + const columns = useMemo[]>( + () => [ + { + field: "jobNo", + label: "Job No.", + type: 'read-only', + // editable: true, + }, + { + field: "code", + label: "code", + type: 'read-only', + // editable: true, + }, + { + field: "name", + label: "name", + type: 'read-only', + }, + { + field: "type", + label: "type", + type: 'read-only', + // editable: true, + }, + // { + // field: "inStockQty", + // label: "Available Qty", + // type: 'read-only', + // style: { + // textAlign: "right", + // }, + // // editable: true, + // renderCell: (row: FGRecord) => { + // if (typeof (row.inStockQty) == "number") { + // return decimalFormatter.format(row.inStockQty) + // } + // return row.inStockQty + // } + // }, + { + field: "productionQty", + label: "Demand Qty", + type: 'input', + style: { + textAlign: "right", + }, + renderCell: (row: FGRecord) => { + if (typeof (row.productionQty) == "number") { + return decimalFormatter.format(row.productionQty ?? 0) + } + return row.productionQty + } + }, + { + field: "priority", + label: "Production Priority", + type: 'read-only', + style: { + textAlign: "right", + }, + // editable: true, + }, + ], + [] + ); + + const overallColumns = useMemo[]>( + () => [ + { + field: "code", + label: "code", + type: 'read-only', + // editable: true, + }, + { + field: "name", + label: "name", + type: 'read-only', + }, + { + field: "type", + label: "type", + type: 'read-only', + // editable: true, + }, + { + field: "lastMonthAvgStock", + label: "Last Month Average Stock", + type: 'read-only', + style: { + textAlign: "right", + }, + renderCell: (row: FGRecord) => { + if (typeof (row.lastMonthAvgStock) == "number") { + return decimalFormatter.format(row.lastMonthAvgStock) + } + return row.lastMonthAvgStock + } + // editable: true, + }, + { + field: "safetyStock", + label: "Safety Stock", + type: 'read-only', + style: { + textAlign: "right", + }, + renderCell: (row: FGRecord) => { + if (typeof (row.safetyStock) == "number") { + return decimalFormatter.format(row.safetyStock) + } + return row.safetyStock + } + // editable: true, + }, + { + field: "inStockQty", + label: "Available Qty", + type: 'read-only', + style: { + textAlign: "right", + }, + renderCell: (row: FGRecord) => { + if (typeof (row.inStockQty) == "number") { + return decimalFormatter.format(row.inStockQty) + } + return row.inStockQty + } + // editable: true, + }, + { + field: "productionQty", + label: "Demand Qty (7 Days)", + type: 'read-only', + style: { + textAlign: "right", + }, + renderCell: (row: FGRecord) => { + if (typeof (row.productionQty) == "number") { + return decimalFormatter.format(row.productionQty) + } + return row.productionQty + } + }, + ], + [] + ); + + const fakeOverallRecords = useMemo( + () => [ + { + id: 1, jobNo: "JO20250507001", priority: 20, code: "PP1193", type: "FG", name: "蔥油(1磅) ", lastMonthAvgStock: 1320, safetyStock: 1322, inStockQty: 1322, productionQty: 4627, + lines: [ + { id: 2, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 20 * 7 }, + { id: 3, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 10 * 7 } + ] + }, + { + id: 2, jobNo: "JO20250507002", priority: 25, code: " PP1096", type: "FG", name: "白麵撈", lastMonthAvgStock: 1040, safetyStock: 1040, inStockQty: 1040, productionQty: 3640, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 190.00 * 7 }, + { id: 1, code: "MH0040", type: "Material", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 * 7 }, + { id: 2, code: "FA0161", type: "Material", name: "蔥油", inStockQty: 1322, purchaseQty: 0 }, + ] + }, + { + id: 3, jobNo: "JO20250507003", priority: 70, code: "PP1080", type: "FG", name: "咖哩汁", lastMonthAvgStock: 2400, safetyStock: 2400, inStockQty: 2400, productionQty: 8400.0 * 7, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 54.44, purchaseQty: 544.4 * 7 }, + { id: 2, code: "GI3236", type: "Material", name: "清水(煮過牛腩)", inStockQty: 317.52, purchaseQty: 3175.2 * 7 }, + { id: 3, code: "MG1700", type: "Material", name: "STERILTOM 意大利茄粒", inStockQty: 9.00, purchaseQty: 90 * 7 }, + { id: 4, code: "FA0533", type: "Material", name: "乾蔥茸", inStockQty: 6.04, purchaseQty: 60.4 * 7 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 6.04, purchaseQty: 60.4 * 7 }, + { id: 6, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 6.04, purchaseQty: 60.4 * 7 }, + { id: 7, code: "FA0056", type: "Material", name: "洋蔥肉", inStockQty: 241.98, purchaseQty: 2419.8 * 7 }, + { id: 8, code: "PP1188", type: "Material", name: "咖喱膽", inStockQty: 36.00, purchaseQty: 360 * 7 }, + { id: 9, code: "PP8001", type: "Material", name: "咖哩汁箱料粉", inStockQty: 77.42, purchaseQty: 774.2 * 7 }, + { id: 10, code: "PP1096", type: "Material", name: "白麵撈", inStockQty: 60.00, purchaseQty: 600 * 7 }, + { id: 10, code: "NA0476", type: "Material", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00, purchaseQty: 6000 * 7 }, + ] + }, + { + id: 4, jobNo: "JO20250507004", priority: 80, code: " PP1188", type: "FG", name: "咖喱膽", lastMonthAvgStock: 1017, safetyStock: 1017, inStockQty: 1016.2, productionQty: 3556.7, + lines: [ + { id: 1, code: "MH0040", type: "Material", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 217.72 * 7 }, + { id: 2, code: "FA0161", type: "Material", name: "洋蔥粒", inStockQty: 0, purchaseQty: 18.15 * 7 }, + { id: 3, code: "FA0608", type: "Material", name: "粗蒜茸", inStockQty: 0, purchaseQty: 18.15 * 7 }, + { id: 4, code: "MG1288", type: "Material", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 * 7 }, + { id: 5, code: "FA0210", type: "Material", name: "薑茸", inStockQty: 0, purchaseQty: 6.05 * 7 }, + { id: 6, code: "MG0066", type: "Material", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 * 7 }, + ] + }, + ], + [] + ); + + return ( + + {/* + + {t("FG Demand List (7 Days)")} + + + index={7} + items={fakeOverallRecords} + columns={overallColumns} + setPagingController={updatePagingController} + pagingController={pagingController[7]} + isAutoPaging={false} + isEditable={false} + isEdit={isEdit} + hasCollapse={true} + /> + */} + {dayPeriod.map((date, index) => ( + + {/* + {`${t("FG Demand Date")}: ${date}`} + */} + + items={fakeRecords[index]} // Use the corresponding records for the day + columns={columns} + setPagingController={updatePagingController} + pagingController={pagingController[index]} + isAutoPaging={false} + isEditable={true} + isEdit={isEdit} + hasCollapse={true} + /> + + ))} + + ); +}; +export default ViewByFGDetails; diff --git a/src/components/DetailScheduleDetail/index.ts b/src/components/DetailScheduleDetail/index.ts new file mode 100644 index 0000000..3769580 --- /dev/null +++ b/src/components/DetailScheduleDetail/index.ts @@ -0,0 +1 @@ +export { default } from "./DetailScheduleDetailWrapper"; \ No newline at end of file diff --git a/src/components/RoughScheduleDetail/DetailInfoCard.tsx b/src/components/RoughScheduleDetail/DetailInfoCard.tsx index 773a12b..7f6e769 100644 --- a/src/components/RoughScheduleDetail/DetailInfoCard.tsx +++ b/src/components/RoughScheduleDetail/DetailInfoCard.tsx @@ -82,7 +82,7 @@ const DetailInfoCard: React.FC = ({ recordDetails, isEditing}) => { = ({ apiRef, isEdit }) => { field: "inStockQty", label: t("Available Qty"), type: 'read-only', + style: { + textAlign: "right", + }, renderCell: (row: FGOverallRecord) => { if (typeof(row.inStockQty) == "number") { return decimalFormatter.format(row.inStockQty) @@ -350,6 +353,9 @@ const ViewByBomDetails: React.FC = ({ apiRef, isEdit }) => { field: "overallPurchaseQty", label: t("Total Demand Qty"), type: 'read-only', + style: { + textAlign: "right", + }, renderCell: (row: FGOverallRecord) => { if (typeof(row.overallPurchaseQty) == "number") { return decimalFormatter.format(row.overallPurchaseQty) @@ -361,6 +367,9 @@ const ViewByBomDetails: React.FC = ({ apiRef, isEdit }) => { field: "purchaseQty1", label: t("Demand Qty (Day1)"), type: 'read-only', + style: { + textAlign: "right", + }, renderCell: (row: FGOverallRecord) => { if (typeof(row.purchaseQty1) == "number") { return decimalFormatter.format(row.purchaseQty1) @@ -372,6 +381,9 @@ const ViewByBomDetails: React.FC = ({ apiRef, isEdit }) => { field: "purchaseQty2", label: t("Demand Qty (Day2)"), type: 'read-only', + style: { + textAlign: "right", + }, renderCell: (row: FGOverallRecord) => { if (typeof(row.purchaseQty2) == "number") { return decimalFormatter.format(row.purchaseQty2) @@ -383,6 +395,9 @@ const ViewByBomDetails: React.FC = ({ apiRef, isEdit }) => { field: "purchaseQty3", label: t("Demand Qty (Day3)"), type: 'read-only', + style: { + textAlign: "right", + }, renderCell: (row: FGOverallRecord) => { if (typeof(row.purchaseQty3) == "number") { return decimalFormatter.format(row.purchaseQty3) @@ -394,6 +409,9 @@ const ViewByBomDetails: React.FC = ({ apiRef, isEdit }) => { field: "purchaseQty4", label: t("Demand Qty (Day4)"), type: 'read-only', + style: { + textAlign: "right", + }, renderCell: (row: FGOverallRecord) => { if (typeof(row.purchaseQty4) == "number") { return decimalFormatter.format(row.purchaseQty4) @@ -404,6 +422,9 @@ const ViewByBomDetails: React.FC = ({ apiRef, isEdit }) => { field: "purchaseQty5", label: t("Demand Qty (Day5)"), type: 'read-only', + style: { + textAlign: "right", + }, renderCell: (row: FGOverallRecord) => { if (typeof(row.purchaseQty5) == "number") { return decimalFormatter.format(row.purchaseQty5) @@ -415,6 +436,9 @@ const ViewByBomDetails: React.FC = ({ apiRef, isEdit }) => { field: "purchaseQty6", label: t("Demand Qty (Day6)"), type: 'read-only', + style: { + textAlign: "right", + }, renderCell: (row: FGOverallRecord) => { if (typeof(row.purchaseQty6) == "number") { return decimalFormatter.format(row.purchaseQty6) @@ -426,6 +450,9 @@ const ViewByBomDetails: React.FC = ({ apiRef, isEdit }) => { field: "purchaseQty7", label: t("Demand Qty (Day7)"), type: 'read-only', + style: { + textAlign: "right", + }, renderCell: (row: FGOverallRecord) => { if (typeof(row.purchaseQty7) == "number") { return decimalFormatter.format(row.purchaseQty7) @@ -460,6 +487,9 @@ const ViewByBomDetails: React.FC = ({ apiRef, isEdit }) => { label: "Available Qty", type: 'read-only', // editable: true, + style: { + textAlign: "right", + }, renderCell: (row: FGRecord) => { if (typeof(row.inStockQty) == "number") { return decimalFormatter.format(row.inStockQty) @@ -469,8 +499,11 @@ const ViewByBomDetails: React.FC = ({ apiRef, isEdit }) => { }, { field: "purchaseQty", - label: "Purchase Qty", + label: "Demand Qty", type: 'read-only', + style: { + textAlign: "right", + }, renderCell: (row: FGRecord) => { if (typeof(row.purchaseQty) == "number") { return decimalFormatter.format(row.purchaseQty) diff --git a/src/components/RoughScheduleDetail/ViewByFGDetails.tsx b/src/components/RoughScheduleDetail/ViewByFGDetails.tsx index 8624834..a692f2b 100644 --- a/src/components/RoughScheduleDetail/ViewByFGDetails.tsx +++ b/src/components/RoughScheduleDetail/ViewByFGDetails.tsx @@ -466,6 +466,9 @@ const ViewByFGDetails: React.FC = ({ apiRef, isEdit }) => { field: "inStockQty", label: "Available Qty", type: 'read-only', + style: { + textAlign: "right", + }, // editable: true, renderCell: (row: FGRecord) => { if (typeof(row.inStockQty) == "number") { @@ -478,6 +481,9 @@ const ViewByFGDetails: React.FC = ({ apiRef, isEdit }) => { field: "productionQty", label: "Demand Qty", type: 'input', + style: { + textAlign: "right", + }, renderCell: (row: FGRecord) => { if (typeof(row.productionQty) == "number") { return decimalFormatter.format(row.productionQty ?? 0) @@ -513,7 +519,7 @@ const ViewByFGDetails: React.FC = ({ apiRef, isEdit }) => { label: "Last Month Average Stock", type: 'read-only', style: { - textAlign: "center", + textAlign: "right", }, renderCell: (row: FGRecord) => { if (typeof(row.lastMonthAvgStock) == "number") { @@ -528,7 +534,7 @@ const ViewByFGDetails: React.FC = ({ apiRef, isEdit }) => { label: "Safety Stock", type: 'read-only', style: { - textAlign: "center", + textAlign: "right", }, renderCell: (row: FGRecord) => { if (typeof(row.safetyStock) == "number") { @@ -543,7 +549,7 @@ const ViewByFGDetails: React.FC = ({ apiRef, isEdit }) => { label: "Available Qty", type: 'read-only', style: { - textAlign: "center", + textAlign: "right", }, renderCell: (row: FGRecord) => { if (typeof(row.inStockQty) == "number") { diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx index 23fc2f7..560c6f9 100644 --- a/src/components/SearchBox/SearchBox.tsx +++ b/src/components/SearchBox/SearchBox.tsx @@ -30,7 +30,7 @@ interface BaseCriterion { paramName2?: T; options?: T[]; filterObj?: T; - handleSelectionChange: (selectedOptions: T[]) => void; + handleSelectionChange?: (selectedOptions: T[]) => void; } interface TextCriterion extends BaseCriterion { diff --git a/src/components/SearchResults/EditableSearchResults.tsx b/src/components/SearchResults/EditableSearchResults.tsx index cd191a4..797f7a1 100644 --- a/src/components/SearchResults/EditableSearchResults.tsx +++ b/src/components/SearchResults/EditableSearchResults.tsx @@ -16,11 +16,12 @@ import CancelIcon from "@mui/icons-material/Close"; import DeleteIcon from "@mui/icons-material/Delete"; import TextField from "@mui/material/TextField"; import MultiSelect from "@/components/SearchBox/MultiSelect"; -import { Collapse } from "@mui/material"; +import { Collapse, Typography } from "@mui/material"; import TempInputGridForMockUp from "./TempInputGridForMockUp"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; import { decimalFormatter, integerFormatter } from "@/app/utils/formatUtil"; +import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'; export interface ResultWithId { id: string | number; @@ -131,6 +132,11 @@ function EditableSearchResults({ return ( <> + + + + + { (isEditable || hasCollapse) && {(editingRowId === row.id) ? ( @@ -152,6 +158,7 @@ function EditableSearchResults({ onClick={() => setOpen(!open)} > {open ? : } + View BoM } @@ -176,6 +183,7 @@ function EditableSearchResults({ onClick={() => setOpen(!open)} > {open ? : } + View BoM } @@ -183,7 +191,6 @@ function EditableSearchResults({ } {columns.map((column, idx) => { - console.log(column) const columnName = column.field; return ( @@ -227,7 +234,7 @@ function EditableSearchResults({ :
isEdit && handleEditClick(row.id as number)}> - {row[columnName] as String} + {row[columnName] as String}
)} @@ -265,6 +272,7 @@ function EditableSearchResults({ + Release {(isEditable || hasCollapse) && Actions} {/* Action Column Header */} {columns.map((column, idx) => ( diff --git a/src/components/SearchResults/TempInputGridForMockUp.tsx b/src/components/SearchResults/TempInputGridForMockUp.tsx index f406aa6..ed6d5a1 100644 --- a/src/components/SearchResults/TempInputGridForMockUp.tsx +++ b/src/components/SearchResults/TempInputGridForMockUp.tsx @@ -22,7 +22,7 @@ import { } from "react"; import StyledDataGrid from "../StyledDataGrid"; import { GridColDef } from "@mui/x-data-grid"; -import { Box, Button, Grid, Typography } from "@mui/material"; +import { Box, Button, Grid, Icon, Typography } from "@mui/material"; import { useTranslation } from "react-i18next"; import { Add } from "@mui/icons-material"; import SaveIcon from "@mui/icons-material/Save"; @@ -36,6 +36,7 @@ import PlayArrowIcon from "@mui/icons-material/PlayArrow"; import { createStockInLine, testFetch } from "@/app/api/po/actions"; import { useSearchParams } from "next/navigation"; import { decimalFormatter, stockInLineStatusMap } from "@/app/utils/formatUtil"; +import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; interface ResultWithId { id: number; @@ -184,6 +185,8 @@ function TempInputGridForMockUp({ stockInLine }: Props) { flex: 0.5, type: "number", editable: true, + align: "right", + headerAlign: "right", renderCell: (row) => { return decimalFormatter.format(row.value) } @@ -194,10 +197,26 @@ function TempInputGridForMockUp({ stockInLine }: Props) { headerName: "Demand Qty", flex: 0.5, editable: true, + align: "right", + headerAlign: "right", renderCell: (row) => { return decimalFormatter.format(row.value) } }, + { + field: "status", + headerName: "status", + flex: 0.5, + editable: true, + align: "center", + headerAlign: "center", + renderCell: () => { + return + } + }, // { // field: "actions", // type: "actions", @@ -398,13 +417,13 @@ function TempInputGridForMockUp({ stockInLine }: Props) { } return classname; }} - // slots={{ - // footer: FooterToolbar, - // noRowsOverlay: NoRowsOverlay, - // }} - // slotProps={{ - // footer: { child: footer }, - // }} + // slots={{ + // footer: FooterToolbar, + // noRowsOverlay: NoRowsOverlay, + // }} + // slotProps={{ + // footer: { child: footer }, + // }} /> );