import React, { useState, useEffect } from 'react';
import { Box, Typography, CircularProgress, Alert } from '@mui/material';
import Dashboard from '../components/Dashboard';
import { DashboardStats } 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);
setError(null);
const data = await apiService.getDashboardStats();
setStats(data);
} catch (err) {
setError('Failed to load dashboard data');
console.error(err);
} finally {
setLoading(false);
}
};
fetchStats();
}, []);
return (
<Box>
<Typography variant="h4" gutterBottom>
Dashboard
</Typography>
<Dashboard stats={stats} loading={loading} error={error} />
</Box>
);
};
export default DashboardPage;
