#

vincentlu

2025-08-11 48b45b5e63f9925c63c951093c4cf596d89683a2

 rsf-admin/src/page/dashboard/index.jsx

@@ -1,8 +1,23 @@
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 { WordEffect } from './WordEffect'
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';

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();
@@ -13,11 +28,17 @@
    useEffect(() => {
        authProvider.checkAuth().catch(() => {
            navigate('/login');
        });
        })
        getSystemDicts().then((data) => {
            localStorage.setItem("sys_dicts", JSON.stringify(data));
        })
    }, [authProvider, navigate]);

    return (
        <>
            <Title title={"menu.dashboard"} />
            <Welcome />
            <DashboardSummaryView />
            <div
                style={{
                    boxSizing: 'border-box',
@@ -43,4 +64,99 @@
    )
}

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);
        })
    }, [])

    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}>
                        {/* <OrderChart orders={recentOrders} /> */}
                    </div>
                    <div style={styles.singleCol}>
                        {/* <PendingOrders orders={pendingOrders} /> */}
                    </div>
                </div>
                <div style={styles.rightCol}>
                    <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>
            </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;