import React, { useState, useEffect } from 'react';
import {
Box,
Card,
CardContent,
Typography,
Grid,
CircularProgress,
Alert,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow
} from '@mui/material';
import {
ShoppingCart,
LocalShipping,
Inventory,
TrendingUp
} from '@mui/icons-material';
import { DashboardStats, Order } from '../types';
import apiService from '../services/api';
interface DashboardProps {
stats: DashboardStats | null;
loading: boolean;
error: string | null;
}
const Dashboard: React.FC<DashboardProps> = ({ stats, loading, error }) => {
if (loading) {
return (
<Box display="flex" justifyContent="center" alignItems="center" height="400px">
<CircularProgress />
</Box>
);
}
if (error) {
return <Alert severity="error">{error}</Alert>;
}
if (!stats) {
return <Alert severity="warning">No data available</Alert>;
}
return (
<Box>
<Typography variant="h4" gutterBottom>
Dashboard
</Typography>
<Grid container spacing={3}>
<Grid item xs={12} md={3}>
<Card>
<CardContent>
<Box display="flex" alignItems="center">
<ShoppingCart color="primary" style={{ fontSize: 40, marginRight: 16 }} />
<div>
<Typography color="textSecondary" gutterBottom>
Total Orders
</Typography>
<Typography variant="h5">
{stats.totalOrders}
</Typography>
</div>
</Box>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={3}>
<Card>
<CardContent>
<Box display="flex" alignItems="center">
<LocalShipping color="secondary" style={{ fontSize: 40, marginRight: 16 }} />
<div>
<Typography color="textSecondary" gutterBottom>
Pending Shipments
</Typography>
<Typography variant="h5">
{stats.pendingShipments}
</Typography>
</div>
</Box>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={3}>
<Card>
<CardContent>
<Box display="flex" alignItems="center">
<Inventory color="error" style={{ fontSize: 40, marginRight: 16 }} />
<div>
<Typography color="textSecondary" gutterBottom>
Low Stock Items
</Typography>
<Typography variant="h5">
{stats.lowStockItems}
</Typography>
</div>
</Box>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={3}>
<Card>
<CardContent>
<Box display="flex" alignItems="center">
<TrendingUp color="success" style={{ fontSize: 40, marginRight: 16 }} />
<div>
<Typography color="textSecondary" gutterBottom>
Revenue
</Typography>
<Typography variant="h5">
${stats.revenue.toFixed(2)}
</Typography>
</div>
</Box>
</CardContent>
</Card>
</Grid>
</Grid>
<Box mt={4}>
<Typography variant="h6" gutterBottom>
Recent Orders
</Typography>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Order #</TableCell>
<TableCell>Status</TableCell>
<TableCell>Date</TableCell>
</TableRow>
</TableHead>
<TableBody>
{stats.recentOrders.map((order) => (
<TableRow key={order.id}>
<TableCell>{order.number}</TableCell>
<TableCell>{order.status}</TableCell>
<TableCell>{new Date(order.created_at).toLocaleDateString()}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
</Box>
);
};
export default Dashboard;
