#

vincentlu

2025-08-11 8a4755489c7c20bf21f481b272f87bc29a2d36c7

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

@@ -10,6 +10,15 @@
import WifiIcon from '@mui/icons-material/Wifi';
import request from '@/utils/request';
import { Box, Typography, LinearProgress, Stack } from '@mui/material';
import NbChart from "./NbChart";

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();
@@ -77,35 +86,101 @@
        })
    }, [])

    const recentOrders = [
        {
            date: "2025-08-10T12:23:56.959Z",
            total: 138.94
        },
        {
            date: "2025-08-03T07:45:00.304Z",
            total: 214.66
        },
        {
            date: "2025-07-28T00:20:10.968Z",
            total: 68.19
        },
        {
            date: "2025-07-22T20:39:00.293Z",
            total: 36.56
        },
        {
            date: "2025-07-16T17:40:24.791Z",
            total: 100.82
        },
    ]

    return (
        <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>
        <>
            <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}>
                        {/* <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;