#

vincentlu

3 天以前 fb93a0da4d477d7bbc00b801a6cc24f15e1ddcf4

#

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

@@ -64,12 +64,12 @@
                                >
                                    <stop
                                        offset="5%"
                                        stopColor="#8884d8"
                                        stopColor="#5091abff"
                                        stopOpacity={0.8}
                                    />
                                    <stop
                                        offset="95%"
                                        stopColor="#8884d8"
                                        stopColor="#5091abff"
                                        stopOpacity={0}
                                    />
                                </linearGradient>
@@ -102,7 +102,7 @@
                            <Area
                                type="monotone"
                                dataKey="total"
                                stroke="#8884d8"
                                stroke="#5091abff"
                                strokeWidth={2}
                                fill="url(#colorUv)"
                            />

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

New file
@@ -0,0 +1,79 @@
import * as React from 'react';
import { useTranslate, useReference } from 'react-admin';
import {
    ListItem,
    ListItemSecondaryAction,
    ListItemAvatar,
    ListItemText,
    Avatar,
    Box,
    ListItemButton,
    Card,
    CardHeader,
    List,
} from '@mui/material';
import { Link } from 'react-router-dom';

const NbList = (props) => {
    const { orders = [] } = props;
    const translate = useTranslate();

    return (
        <Card sx={{ flex: 1 }}>
            <CardHeader title={translate('pos.dashboard.pending_orders')} />
            <List dense={true}>
                {orders.map(record => (
                    <PendingOrder key={record.id} order={record} />
                ))}
            </List>
        </Card>
    );
};

export const PendingOrder = (props) => {
    const { order } = props;
    console.log(order);

    const translate = useTranslate();
    const { referenceRecord: customer, isPending } = useReference({
        reference: 'customers',
        id: order.customer_id,
    });

    return (
        <ListItem disablePadding>
            <ListItemButton component={Link} to={`/orders/${order.id}`}>
                {/* <ListItemAvatar>
                    {isPending ? (
                        <Avatar />
                    ) : (
                        <Avatar
                            src={`${customer?.avatar}?size=32x32`}
                            sx={{ bgcolor: 'background.paper' }}
                            alt={`${customer?.first_name} ${customer?.last_name}`}
                        />
                    )}
                </ListItemAvatar> */}
                <ListItemText
                    primary={new Date(order.date).toLocaleString('en-GB')}
                    secondary={translate('pos.dashboard.order.items', {
                        name: order.name
                    })}
                />
                <ListItemSecondaryAction>
                    <Box
                        component="span"
                        sx={{
                            marginRight: '1em',
                            color: 'text.primary',
                        }}
                    >
                        {order.total}$
                    </Box>
                </ListItemSecondaryAction>
            </ListItemButton>
        </ListItem>
    );
};

export default NbList;

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

@@ -11,6 +11,7 @@
import request from '@/utils/request';
import { Box, Typography, LinearProgress, Stack } from '@mui/material';
import NbChart from "./NbChart";
import NbList from "./NbList";

const styles = {
    flex: { display: 'flex' },
@@ -88,22 +89,32 @@

    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
        },
@@ -130,7 +141,7 @@
                        <NbChart orders={recentOrders} />
                    </div>
                    <div style={styles.singleCol}>
                        {/* <PendingOrders orders={pendingOrders} /> */}
                        <NbList orders={recentOrders} />
                    </div>
                </div>
                <div style={styles.rightCol}>