| @@ -24,10 +24,8 @@ import { | |||||
| import { useTranslation } from 'react-i18next'; | import { useTranslation } from 'react-i18next'; | ||||
| import dayjs from 'dayjs'; | import dayjs from 'dayjs'; | ||||
| // Placeholder interface - to be defined when implementing details | |||||
| interface GoodsReceiptStatusItem { | interface GoodsReceiptStatusItem { | ||||
| id: string; | id: string; | ||||
| // Add fields as needed when implementing | |||||
| } | } | ||||
| const GoodsReceiptStatus: React.FC = () => { | const GoodsReceiptStatus: React.FC = () => { | ||||
| @@ -38,18 +36,13 @@ const GoodsReceiptStatus: React.FC = () => { | |||||
| const [currentTime, setCurrentTime] = useState<dayjs.Dayjs | null>(null); | const [currentTime, setCurrentTime] = useState<dayjs.Dayjs | null>(null); | ||||
| const [isClient, setIsClient] = useState<boolean>(false); | const [isClient, setIsClient] = useState<boolean>(false); | ||||
| // Set client flag and time on mount | |||||
| useEffect(() => { | useEffect(() => { | ||||
| setIsClient(true); | setIsClient(true); | ||||
| setCurrentTime(dayjs()); | setCurrentTime(dayjs()); | ||||
| }, []); | }, []); | ||||
| // Load data from API - placeholder for now | |||||
| const loadData = useCallback(async () => { | const loadData = useCallback(async () => { | ||||
| try { | try { | ||||
| // TODO: Implement API call when ready | |||||
| // const result = await fetchGoodsReceiptStatusClient(); | |||||
| // setData(result); | |||||
| setData([]); | setData([]); | ||||
| } catch (error) { | } catch (error) { | ||||
| console.error('Error fetching goods receipt status:', error); | console.error('Error fetching goods receipt status:', error); | ||||
| @@ -58,42 +51,34 @@ const GoodsReceiptStatus: React.FC = () => { | |||||
| } | } | ||||
| }, []); | }, []); | ||||
| // Initial load and auto-refresh every 5 minutes | |||||
| useEffect(() => { | useEffect(() => { | ||||
| loadData(); | loadData(); | ||||
| const refreshInterval = setInterval(() => { | const refreshInterval = setInterval(() => { | ||||
| loadData(); | loadData(); | ||||
| }, 5 * 60 * 1000); // 5 minutes | |||||
| }, 5 * 60 * 1000); | |||||
| return () => clearInterval(refreshInterval); | return () => clearInterval(refreshInterval); | ||||
| }, [loadData]); | }, [loadData]); | ||||
| // Update current time every 1 minute | |||||
| useEffect(() => { | useEffect(() => { | ||||
| if (!isClient) return; | if (!isClient) return; | ||||
| const timeInterval = setInterval(() => { | const timeInterval = setInterval(() => { | ||||
| setCurrentTime(dayjs()); | setCurrentTime(dayjs()); | ||||
| }, 60 * 1000); // 1 minute | |||||
| }, 60 * 1000); | |||||
| return () => clearInterval(timeInterval); | return () => clearInterval(timeInterval); | ||||
| }, [isClient]); | }, [isClient]); | ||||
| // Filter data by selected filter | |||||
| const filteredData = useMemo(() => { | const filteredData = useMemo(() => { | ||||
| if (!selectedFilter) return data; | if (!selectedFilter) return data; | ||||
| return data.filter(item => true); // TODO: Implement filter logic | |||||
| return data.filter(item => true); | |||||
| }, [data, selectedFilter]); | }, [data, selectedFilter]); | ||||
| return ( | return ( | ||||
| <Card sx={{ mb: 2 }}> | <Card sx={{ mb: 2 }}> | ||||
| <CardContent> | <CardContent> | ||||
| {/* Title */} | |||||
| <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}> | |||||
| {t("Goods Receipt Status")} | |||||
| </Typography> | |||||
| {/* Filter */} | {/* Filter */} | ||||
| <Stack direction="row" spacing={2} sx={{ mb: 3 }}> | <Stack direction="row" spacing={2} sx={{ mb: 3 }}> | ||||
| <FormControl sx={{ minWidth: 150 }} size="small"> | <FormControl sx={{ minWidth: 150 }} size="small"> | ||||