diff --git a/src/components/DashboardPage/DashboardPage.tsx b/src/components/DashboardPage/DashboardPage.tsx index d417a8a..840adcd 100644 --- a/src/components/DashboardPage/DashboardPage.tsx +++ b/src/components/DashboardPage/DashboardPage.tsx @@ -18,6 +18,7 @@ import CollapsibleCard from "../CollapsibleCard"; import { EscalationResult } from "@/app/api/escalation"; import EscalationLogTable from "./escalation/EscalationLogTable"; import { TruckScheduleDashboard } from "./truckSchedule"; +import { GoodsReceiptStatus } from "./goodsReceiptStatus"; type Props = { // iqc: IQCItems[] | undefined escalationLogs: EscalationResult[] @@ -50,20 +51,28 @@ const DashboardPage: React.FC = ({ + + + + + + + 0 ? getPendingLog().length : t("No")})`} showFilter={true} filterText={t("show completed logs")} - // defaultOpen={getPendingLog().length > 0} // TODO Fix default not opening + > - + {/* Hidden: Progress chart - not in use currently */} + {/* @@ -79,9 +88,10 @@ const DashboardPage: React.FC = ({ - + */} - + {/* Hidden: Warehouse status - not in use currently */} + {/* @@ -95,31 +105,10 @@ const DashboardPage: React.FC = ({ - {/* - - - - - - - - - - - - */} - + */} ); diff --git a/src/components/DashboardPage/goodsReceiptStatus/GoodsReceiptStatus.tsx b/src/components/DashboardPage/goodsReceiptStatus/GoodsReceiptStatus.tsx new file mode 100644 index 0000000..e4ef370 --- /dev/null +++ b/src/components/DashboardPage/goodsReceiptStatus/GoodsReceiptStatus.tsx @@ -0,0 +1,178 @@ +"use client"; + +import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'; +import { + Box, + Typography, + FormControl, + InputLabel, + Select, + MenuItem, + Card, + CardContent, + Stack, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Paper, + CircularProgress, + Chip +} from '@mui/material'; +import { useTranslation } from 'react-i18next'; +import dayjs from 'dayjs'; + +// Placeholder interface - to be defined when implementing details +interface GoodsReceiptStatusItem { + id: string; + // Add fields as needed when implementing +} + +const GoodsReceiptStatus: React.FC = () => { + const { t } = useTranslation("dashboard"); + const [selectedFilter, setSelectedFilter] = useState(""); + const [data, setData] = useState([]); + const [loading, setLoading] = useState(false); + const [currentTime, setCurrentTime] = useState(null); + const [isClient, setIsClient] = useState(false); + + // Set client flag and time on mount + useEffect(() => { + setIsClient(true); + setCurrentTime(dayjs()); + }, []); + + // Load data from API - placeholder for now + const loadData = useCallback(async () => { + try { + // TODO: Implement API call when ready + // const result = await fetchGoodsReceiptStatusClient(); + // setData(result); + setData([]); + } catch (error) { + console.error('Error fetching goods receipt status:', error); + } finally { + setLoading(false); + } + }, []); + + // Initial load and auto-refresh every 5 minutes + useEffect(() => { + loadData(); + + const refreshInterval = setInterval(() => { + loadData(); + }, 5 * 60 * 1000); // 5 minutes + + return () => clearInterval(refreshInterval); + }, [loadData]); + + // Update current time every 1 minute + useEffect(() => { + if (!isClient) return; + + const timeInterval = setInterval(() => { + setCurrentTime(dayjs()); + }, 60 * 1000); // 1 minute + + return () => clearInterval(timeInterval); + }, [isClient]); + + // Filter data by selected filter + const filteredData = useMemo(() => { + if (!selectedFilter) return data; + return data.filter(item => true); // TODO: Implement filter logic + }, [data, selectedFilter]); + + return ( + + + {/* Title */} + + {t("Goods Receipt Status")} + + + {/* Filter */} + + + + {t("Filter")} + + + + + + {t("Auto-refresh every 5 minutes")} | {t("Last updated")}: {isClient && currentTime ? currentTime.format('HH:mm:ss') : '--:--:--'} + + + + {/* Table */} + + {loading ? ( + + + + ) : ( + + + + + {t("Column 1")} + {t("Column 2")} + {t("Column 3")} + {/* TODO: Add table columns when implementing */} + + + + {filteredData.length === 0 ? ( + + + + {t("No data available")} + + + + ) : ( + filteredData.map((row, index) => ( + + + {/* TODO: Add table cell content when implementing */} + - + + + - + + + - + + + )) + )} + +
+
+ )} +
+
+
+ ); +}; + +export default GoodsReceiptStatus; diff --git a/src/components/DashboardPage/goodsReceiptStatus/index.ts b/src/components/DashboardPage/goodsReceiptStatus/index.ts new file mode 100644 index 0000000..22142f8 --- /dev/null +++ b/src/components/DashboardPage/goodsReceiptStatus/index.ts @@ -0,0 +1 @@ +export { default as GoodsReceiptStatus } from './GoodsReceiptStatus'; diff --git a/src/i18n/en/dashboard.json b/src/i18n/en/dashboard.json index a6d2c2b..7d5f025 100644 --- a/src/i18n/en/dashboard.json +++ b/src/i18n/en/dashboard.json @@ -72,5 +72,12 @@ "Tickets Completed": "Tickets Completed", "Last Ticket End": "Last Ticket End", "Pick Time (min)": "Pick Time (min)", - "No truck schedules available for today": "No truck schedules available for today" + "No truck schedules available for today": "No truck schedules available for today", + "Goods Receipt Status": "Goods Receipt Status", + "Filter": "Filter", + "All": "All", + "Column 1": "Column 1", + "Column 2": "Column 2", + "Column 3": "Column 3", + "No data available": "No data available" } diff --git a/src/i18n/zh/dashboard.json b/src/i18n/zh/dashboard.json index 9464706..6fdfaec 100644 --- a/src/i18n/zh/dashboard.json +++ b/src/i18n/zh/dashboard.json @@ -72,5 +72,12 @@ "Tickets Completed": "已完成成品出倉單", "Last Ticket End": "末單結束時間", "Pick Time (min)": "揀貨時間(分鐘)", - "No truck schedules available for today": "今日無車輛調度計劃" + "No truck schedules available for today": "今日無車輛調度計劃", + "Goods Receipt Status": "貨物接收狀態", + "Filter": "篩選", + "All": "全部", + "Column 1": "欄位1", + "Column 2": "欄位2", + "Column 3": "欄位3", + "No data available": "暫無資料" }