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';
const DashboardPage: React.FC = () => {
const [stats, setStats] = useState<DashboardStats | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchStats = async () => {
try {
setLoading(true);
const data = await apiService.getDashboardStats();
setStats(data);
} catch (err) {
setError('Failed to load dashboard data');
console.error(err);
} finally {
setLoading(false);
}
};
fetchStats();
}, []);
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 DashboardPage;
