[rough schedule] detail page update

src/components/RoughScheduleDetail/RoughScheudleDetailView.tsx

@@ -20,8 +20,9 @@ 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/RoughScheduleDetail/DetailInfoCard";
-import ViewByFGDetails from "@/components/RoughScheduleDetail/ViewByFGDetails";
+import ViewByFGDetails, {FGRecord} from "@/components/RoughScheduleDetail/ViewByFGDetails";
 import ViewByBomDetails from "@/components/RoughScheduleDetail/ViewByBomDetails";
+import EditableSearchResults, {Column} from "@/components/SearchResults/EditableSearchResults";
 
 type Props = {
   isEditMode: boolean;
@@ -87,6 +88,79 @@ const RoughScheduleDetailView: React.FC<Props> = ({
     [],
   );
 
+  const fakeRecords = useMemo<FGRecord[]>(
+      () => [
+        { id: 1, code: "PP1080", name: "咖哩汁", lastMonthAvgStock: 100, safetyStock: 900, inStockQty: 1200, productionQty: 600.0,
+          lines: [
+            { id: 1,  code:  "MH0040",  name: "大豆油(1噸/桶)", inStockQty:  54.44 , purchaseQty: 544.4 },
+            { id: 2,  code:  "GI3236",  name: "清水(煮過牛腩)", inStockQty:  317.52 , purchaseQty: 3175.2 },
+            { id: 3,  code:  "MG1700",  name: "STERILTOM 意大利茄粒", inStockQty:  9.00 , purchaseQty: 90 },
+            { id: 4,  code:  "FA0533",  name: "乾蔥茸", inStockQty:  6.04 , purchaseQty: 60.4 },
+            { id: 5,  code:  "FA0210",  name: "薑茸", inStockQty:  6.04 , purchaseQty: 60.4 },
+            { id: 6,  code:  "FA0608",  name: "粗蒜茸", inStockQty:  6.04 , purchaseQty: 60.4 },
+            { id: 7,  code:  "FA0056",  name: "洋蔥肉", inStockQty:  241.98 , purchaseQty: 2419.8 },
+            { id: 8,  code:  "PP1188",  name: "咖喱膽", inStockQty:  36.00 , purchaseQty: 360 },
+            { id: 9,  code:  "PP8001",  name: "咖哩汁箱料粉", inStockQty:  77.42 , purchaseQty: 774.2 },
+            { id: 10, code: "PP1096",   name: "白麵撈", inStockQty:  60.00 , purchaseQty: 600 },
+            { id: 10, code: "NA0476",   name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty:  600.00 , purchaseQty: 6000 },
+          ]
+        },
+        { id: 2, code: "PP1193", name: "蔥油(1磅) ", lastMonthAvgStock: 50, safetyStock: 400, inStockQty: 1322, productionQty: 661,
+          lines: [
+            { id: 2, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 20  },
+            { id: 3, code: "FA0161", name: "洋蔥粒", inStockQty: 0, purchaseQty: 10  }
+          ]
+        },
+      ],
+      []
+  );
+
+  const [pagingController, setPagingController] = useState({
+    pageNum: 1,
+    pageSize: 10,
+    totalCount: 0,
+  })
+
+  const columns = useMemo<Column<any>[]>(
+      () => [
+        {
+          field: "name",
+          label: "name",
+          type: 'read-only',
+        },
+        {
+          field: "code",
+          label: "code",
+          type: 'read-only',
+          // editable: true,
+        },
+        {
+          field: "lastMonthAvgStock",
+          label: "Last Month Average Stock",
+          type: 'read-only',
+          // editable: true,
+        },
+        {
+          field: "safetyStock",
+          label: "Safety Stock",
+          type: 'read-only',
+          // editable: true,
+        },
+        {
+          field: "inStockQty",
+          label: "In Stock Amount",
+          type: 'read-only',
+          // editable: true,
+        },
+        {
+          field: "productionQty",
+          label: "Production Qty",
+          type: 'input',
+        },
+      ],
+      []
+  );
+
   const handleCancel = () => {
     router.replace(`/scheduling/rough`);
   };
@@ -161,6 +235,19 @@ const RoughScheduleDetailView: React.FC<Props> = ({
           </Button>
         </Stack>
 
+        <Typography variant="overline" display="block" marginBlockEnd={1}>
+          Overall
+        </Typography>
+        <EditableSearchResults<FGRecord>
+            items={fakeRecords} // Use the corresponding records for the day
+            isMockUp={true}
+            columns={columns}
+            setPagingController={setPagingController}
+            pagingController={pagingController}
+            isAutoPaging={false}
+            isHideButton={false}
+            isEdit={false}
+        />
         <Tabs value={tabIndex} onChange={handleTabChange} variant="scrollable">
         <Tab label={t("View By Schedule")} iconPosition="end"/>
         <Tab label={t("View By Material")} iconPosition="end" />

src/components/RoughScheduleDetail/ViewByBomDetails.tsx

@@ -61,8 +61,19 @@ const ViewByBomDetails: React.FC<Props> = ({ apiRef, isEdit }) => {
     const fakeRecords = useMemo<FGRecord[][]>(
         () => [
             [
-                { id: 1, code: "mt1", name: "material 1", inStockQty: 10, purchaseQty: 1 },
-                { id: 2, code: "mt2", name: "material 2", inStockQty: 20, purchaseQty: 199 },
+                { id: 1,  code:  "MH0040",  name: "大豆油(1噸/桶)", inStockQty:  54.44 , purchaseQty: 544.4 },
+                { id: 2,  code:  "GI3236",  name: "清水(煮過牛腩)", inStockQty:  317.52 , purchaseQty: 3175.2 },
+                { id: 3,  code:  "MG1700",  name: "STERILTOM 意大利茄粒", inStockQty:  9.00 , purchaseQty: 90 },
+                { id: 4,  code:  "FA0533",  name: "乾蔥茸", inStockQty:  6.04 , purchaseQty: 60.4 },
+                { id: 5,  code:  "FA0210",  name: "薑茸", inStockQty:  6.04 , purchaseQty: 60.4 },
+                { id: 6,  code:  "FA0608",  name: "粗蒜茸", inStockQty:  6.04 , purchaseQty: 60.4 },
+                { id: 7,  code:  "FA0056",  name: "洋蔥肉", inStockQty:  241.98 , purchaseQty: 2419.8 },
+                { id: 8,  code:  "PP1188",  name: "咖喱膽", inStockQty:  36.00 , purchaseQty: 360 },
+                { id: 9,  code:  "PP8001",  name: "咖哩汁箱料粉", inStockQty:  77.42 , purchaseQty: 774.2 },
+                { id: 10, code: "PP1096",   name: "白麵撈", inStockQty:  60.00 , purchaseQty: 600 },
+                { id: 10, code: "NA0476",   name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty:  600.00 , purchaseQty: 6000 },
+                { id: 2, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 20  },
+                { id: 3, code: "FA0161", name: "洋蔥粒", inStockQty: 0, purchaseQty: 10  }
             ],
             [
                 { id: 3, code: "mt3", name: "material 3", inStockQty: 30, purchaseQty: 3 },

src/components/RoughScheduleDetail/ViewByFGDetails.tsx

@@ -99,32 +99,75 @@ const ViewByFGDetails: React.FC<Props> = ({ apiRef, isEdit }) => {
     const fakeRecords = useMemo<FGRecord[][]>(
         () => [
             [
-                { id: 1, code: "fg1", name: "finished good 1", inStockQty: 10, productionQty: 1, lines: [{ id: 1, code: "mt1", name: "material 1", inStockQty: 10, purchaseQty: 1 }] },
-                { id: 2, code: "fg2", name: "finished good 2", inStockQty: 20, productionQty: 199, lines: [{ id: 2, code: "mt2", name: "material 2", inStockQty: 20, purchaseQty: 199 }] },
+                { id: 1, code: "PP1080", name: "咖哩汁", inStockQty: 1200, productionQty: 600.0,
+                    lines: [
+                        { id: 1,  code:  "MH0040", name: "大豆油(1噸/桶)", inStockQty:  54.44 , purchaseQty: 544.4 },
+                        { id: 2,  code:  "GI3236", name: "清水(煮過牛腩)", inStockQty:  317.52 , purchaseQty: 3175.2 },
+                        { id: 3,  code:  "MG1700", name: "STERILTOM 意大利茄粒", inStockQty:  9.00 , purchaseQty: 90 },
+                        { id: 4,  code:  "FA0533", name: "乾蔥茸", inStockQty:  6.04 , purchaseQty: 60.4 },
+                        { id: 5,  code:  "FA0210", name: "薑茸", inStockQty:  6.04 , purchaseQty: 60.4 },
+                        { id: 6,  code:  "FA0608", name: "粗蒜茸", inStockQty:  6.04 , purchaseQty: 60.4 },
+                        { id: 7,  code:  "FA0056", name: "洋蔥肉", inStockQty:  241.98 , purchaseQty: 2419.8 },
+                        { id: 8,  code:  "PP1188", name: "咖喱膽", inStockQty:  36.00 , purchaseQty: 360 },
+                        { id: 9,  code:  "PP8001", name: "咖哩汁箱料粉", inStockQty:  77.42 , purchaseQty: 774.2 },
+                        { id: 10, code: "PP1096", name: "白麵撈", inStockQty:  60.00 , purchaseQty: 600 },
+                        { id: 10, code: "NA0476", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty:  600.00 , purchaseQty: 6000 },
+                    ]
+                },
+                { 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: "fg3", name: "finished good 3", inStockQty: 30, productionQty: 3, lines: [{ id: 3, code: "mt3", name: "material 3", inStockQty: 30, purchaseQty: 3 }] },
-                { id: 4, code: "fg4", name: "finished good 4", inStockQty: 40, productionQty: 499, lines: [{ id: 4, code: "mt4", name: "material 4", inStockQty: 40, purchaseQty: 499 }] },
+                { id: 3, code: "fg3", name: "finished good 3", inStockQty: 30, productionQty: 3,
+                    lines: [{ id: 3, code: "mt3", name: "material 3", inStockQty: 30, purchaseQty: 3 }]
+                },
+                { id: 4, code: "fg4", name: "finished good 4", inStockQty: 40, productionQty: 499,
+                    lines: [{ id: 4, code: "mt4", name: "material 4", inStockQty: 40, purchaseQty: 499 }]
+                },
             ],
             [
-                { id: 5, code: "fg5", name: "finished good 5", inStockQty: 50, productionQty: 5, lines: [{ id: 5, code: "mt5", name: "material 5", inStockQty: 50, purchaseQty: 5 }] },
-                { id: 6, code: "fg6", name: "finished good 6", inStockQty: 60, productionQty: 699, lines: [{ id: 6, code: "mt6", name: "material 6", inStockQty: 60, purchaseQty: 699 }] },
+                { id: 5, code: "fg5", name: "finished good 5", inStockQty: 50, productionQty: 5,
+                    lines: [{ id: 5, code: "mt5", name: "material 5", inStockQty: 50, purchaseQty: 5 }]
+                },
+                { id: 6, code: "fg6", name: "finished good 6", inStockQty: 60, productionQty: 699,
+                    lines: [{ id: 6, code: "mt6", name: "material 6", inStockQty: 60, purchaseQty: 699 }]
+                },
             ],
             [
-                { id: 7, code: "fg7", name: "finished good 7", inStockQty: 70, productionQty: 7, lines: [{ id: 7, code: "mt7", name: "material 7", inStockQty: 70, purchaseQty: 7 }] },
-                { id: 8, code: "fg8", name: "finished good 8", inStockQty: 80, productionQty: 899, lines: [{ id: 8, code: "mt8", name: "material 8", inStockQty: 80, purchaseQty: 899 }] },
+                { id: 7, code: "fg7", name: "finished good 7", inStockQty: 70, productionQty: 7,
+                    lines: [{ id: 7, code: "mt7", name: "material 7", inStockQty: 70, purchaseQty: 7 }]
+                },
+                { id: 8, code: "fg8", name: "finished good 8", inStockQty: 80, productionQty: 899,
+                    lines: [{ id: 8, code: "mt8", name: "material 8", inStockQty: 80, purchaseQty: 899 }]
+                },
             ],
             [
-                { id: 9, code: "fg9", name: "finished good 9", inStockQty: 90, productionQty: 9, lines: [{ id: 9, code: "mt9", name: "material 9", inStockQty: 90, purchaseQty: 9 }] },
-                { id: 10, code: "fg10", name: "finished good 10", inStockQty: 100, productionQty: 999, lines: [{ id: 10, code: "mt10", name: "material 10", inStockQty: 100, purchaseQty: 999 }] },
+                { id: 9, code: "fg9", name: "finished good 9", inStockQty: 90, productionQty: 9,
+                    lines: [{ id: 9, code: "mt9", name: "material 9", inStockQty: 90, purchaseQty: 9 }]
+                },
+                { id: 10, code: "fg10", name: "finished good 10", inStockQty: 100, productionQty: 999,
+                    lines: [{ id: 10, code: "mt10", name: "material 10", inStockQty: 100, purchaseQty: 999 }]
+                },
             ],
             [
-                { id: 11, code: "fg11", name: "finished good 11", inStockQty: 110, productionQty: 11, lines: [{ id: 11, code: "mt11", name: "material 11", inStockQty: 110, purchaseQty: 11 }] },
-                { id: 12, code: "fg12", name: "finished good 12", inStockQty: 120, productionQty: 1299, lines: [{ id: 12, code: "mt12", name: "material 12", inStockQty: 120, purchaseQty: 1299 }] },
+                { id: 11, code: "fg11", name: "finished good 11", inStockQty: 110, productionQty: 11,
+                    lines: [{ id: 11, code: "mt11", name: "material 11", inStockQty: 110, purchaseQty: 11 }]
+                },
+                { id: 12, code: "fg12", name: "finished good 12", inStockQty: 120, productionQty: 1299,
+                    lines: [{ id: 12, code: "mt12", name: "material 12", inStockQty: 120, purchaseQty: 1299 }]
+                },
             ],
             [
-                { id: 13, code: "fg13", name: "finished good 13", inStockQty: 130, productionQty: 13, lines: [{ id: 13, code: "mt13", name: "material 13", inStockQty: 130, purchaseQty: 13 }] },
-                { id: 14, code: "fg14", name: "finished good 14", inStockQty: 140, productionQty: 1499, lines: [{ id: 14, code: "mt14", name: "material 14", inStockQty: 140, purchaseQty: 1499 }] },
+                { id: 13, code: "fg13", name: "finished good 13", inStockQty: 130, productionQty: 13,
+                    lines: [{ id: 13, code: "mt13", name: "material 13", inStockQty: 130, purchaseQty: 13 }]
+                },
+                { id: 14, code: "fg14", name: "finished good 14", inStockQty: 140, productionQty: 1499,
+                    lines: [{ id: 14, code: "mt14", name: "material 14", inStockQty: 140, purchaseQty: 1499 }]
+                },
             ],
         ],
         []

src/components/SearchResults/EditableSearchResults.tsx

@@ -146,7 +146,7 @@ function EditableSearchResults<T extends ResultWithId>({
                                     onClick={() => setOpen(!open)}
                                     >
                                     {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-                                    </IconButton>
+                                </IconButton>
                             </>
                         ) : (
                             <>