wms-master.git - Gitblit

			@@ -1,9 +1,26 @@
			import React, { useState, useRef, useEffect, useMemo } from "react";
			import { useNavigate } from 'react-router-dom';
			import { useTheme } from '@mui/material/styles';
			import { useTranslate, useAuthProvider } from 'react-admin';
			import { useTranslate, useAuthProvider, Title, useNotify } from 'react-admin';
			import { WordEffect } from './WordEffect';
			import { getSystemDicts } from '@/api/auth'
			import Welcome from "./Welcome";
			import CardWithIcon from '../components/CardWithIcon';
			import SensorOccupiedIcon from '@mui/icons-material/SensorOccupied';
			import WifiIcon from '@mui/icons-material/Wifi';
			import request from '@/utils/request';
			import { Box, Typography, LinearProgress, Stack } from '@mui/material';
			import NbChart from "./NbChart";
			import NbList from "./NbList";
			import NbCard from "./NbCard";

			const styles = {
			flex: { display: 'flex' },
			flexColumn: { display: 'flex', flexDirection: 'column' },
			leftCol: { flex: 1, marginRight: '0.5em' },
			rightCol: { flex: 1, marginLeft: '0.5em' },
			singleCol: { marginTop: '1em', marginBottom: '1em' },
			};

			const Dashboard = () => {
			const authProvider = useAuthProvider();
			@@ -22,6 +39,9 @@

			return (
			<>
			<Title title={"menu.dashboard"} />
			<Welcome />
			<DashboardSummaryView />
			<div
			style={{
			boxSizing: 'border-box',
			@@ -34,17 +54,159 @@
			padding: '2rem 1rem',
			}}
			>
			<WordEffect
			{/* <WordEffect
			words={translate('page.welcome.index')}
			color={theme.palette.mode === 'light' ? '#666' : '#eeeeee'}
			/>
			<WordEffect
			words={translate('page.welcome.tech')}
			color={theme.palette.mode === 'light' ? '#666' : '#eeeeee'}
			/>
			/> */}
			</div>
			</>
			)
			}

			const DashboardSummaryView = () => {
			const translate = useTranslate();
			const notify = useNotify();
			const [statistic, setStatistic] = useState(null);

			useEffect(() => {
			request.get('/dashboard/member/statistic', {
			params: {}
			}).then(res => {
			const { code, msg, data } = res.data;
			if (code === 200) {
			setStatistic(data);
			} else {
			// notify(msg, { type: 'error', messageArgs: { _: msg } });
			}
			}).catch((error) => {
			// notify(error.message, { type: 'error', messageArgs: { _: error.message } });
			console.error(error);
			})
			}, [])

			const recentOrders = [
			{
			id: 1,
			name: 'a',
			date: "2025-08-10T12:23:56.959Z",
			total: 138.94
			},
			{
			id: 2,
			name: 'b',
			date: "2025-08-03T07:45:00.304Z",
			total: 214.66
			},
			{
			id: 3,
			name: 'c',
			date: "2025-07-28T00:20:10.968Z",
			total: 68.19
			},
			{
			id: 4,
			name: 'd',
			date: "2025-07-22T20:39:00.293Z",
			total: 36.56
			},
			{
			id: 5,
			name: 'e',
			date: "2025-07-16T17:40:24.791Z",
			total: 100.82
			},
			]

			return (
			<>
			<div style={styles.flex}>
			<div style={styles.leftCol}>
			<div style={styles.flex}>
			<CardWithIcon
			icon={WifiIcon}
			title={translate('page.member.header.onlineMembers')}
			subtitle={`${statistic?.membersOnlineQua}`}
			/>
			<Spacer />
			<CardWithIcon
			icon={SensorOccupiedIcon}
			title={translate('page.member.header.totalMembers')}
			subtitle={`${statistic?.membersTotalQua}`}
			/>
			</div>
			<div style={styles.singleCol}>
			<NbChart orders={recentOrders} />
			</div>
			<div style={styles.singleCol}>
			<NbList orders={recentOrders} />
			</div>
			</div>
			<div style={styles.rightCol}>
			<div style={styles.flex}>
			<NbCard
			icon={WifiIcon}
			title={translate('page.member.header.onlineMembers')}
			subtitle={`${statistic?.membersOnlineQua}`}
			to={{
			pathname: '/task',
			search: JSON.stringify({
			filter: JSON.stringify({ status: 1 }),
			}),
			}}
			list={recentOrders}
			/>
			<Spacer />
			<NbCard
			icon={SensorOccupiedIcon}
			title={translate('page.member.header.totalMembers')}
			subtitle={`${statistic?.membersTotalQua}`}
			to={{
			pathname: '/task',
			search: JSON.stringify({
			filter: JSON.stringify({ status: 1 }),
			}),
			}}
			list={recentOrders}
			/>
			</div>
			</div>
			</div>

			{/* <Box sx={{
			display: 'flex',
			mt: 2,
			gap: 2,
			justifyContent: 'space-between',
			}}>
			<CardWithIcon
			icon={WifiIcon}
			title={translate('page.member.header.onlineMembers')}
			subtitle={`${statistic?.membersOnlineQua}`}
			/>
			<CardWithIcon
			icon={SensorOccupiedIcon}
			title={translate('page.member.header.totalMembers')}
			subtitle={`${statistic?.membersTotalQua}`}
			/>
			<CardWithIcon
			icon={WifiIcon}
			title={translate('page.member.header.onlineMembers')}
			subtitle={`${statistic?.membersOnlineQua}`}
			/>
			<CardWithIcon
			icon={SensorOccupiedIcon}
			title={translate('page.member.header.totalMembers')}
			subtitle={`${statistic?.membersTotalQua}`}
			/>
			</Box > */}
			</>
			)
			}

			const Spacer = () => <span style={{ width: '1em' }} />;

			export default Dashboard;