diff --git a/frontend/src/pages/Admin/DashboardPage.jsx b/frontend/src/pages/Admin/DashboardPage.jsx
index 5a51b4c..f0740f2 100644
--- a/frontend/src/pages/Admin/DashboardPage.jsx
+++ b/frontend/src/pages/Admin/DashboardPage.jsx
@@ -1,12 +1,12 @@
import React, { useState, useEffect } from 'react';
import {
- Box,
- Typography,
- Grid,
- Paper,
- Card,
- CardContent,
- CardHeader,
+ Box,
+ Typography,
+ Grid,
+ Paper,
+ Card,
+ CardContent,
+ CardHeader,
List,
ListItem,
ListItemText,
@@ -22,21 +22,17 @@ import {
AttachMoney as MoneyIcon,
Class as CategoryIcon
} from '@mui/icons-material';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link as RouterLink, useNavigate } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import apiClient from '../../services/api';
import { useAdminCategories } from '../../hooks/categoryAdminHooks';
+import { useAdminOrders, useAdminUsers } from '../../hooks/adminHooks';
+import { format } from 'date-fns';
const AdminDashboardPage = () => {
- const [stats, setStats] = useState({
- totalProducts: 0,
- totalUsers: 0,
- totalOrders: 0,
- revenue: 0,
- totalCategories: 0
- });
-
- // Fetch products for the stats
+ const navigate = useNavigate();
+
+ // Fetch data with React Query
const { data: products, isLoading: productsLoading, error: productsError } = useQuery({
queryKey: ['admin-products'],
queryFn: async () => {
@@ -49,38 +45,68 @@ const AdminDashboardPage = () => {
},
});
- // Fetch categories
const { data: categories, isLoading: categoriesLoading } = useAdminCategories();
+ const { data: orders, isLoading: ordersLoading } = useAdminOrders();
+ const { data: users, isLoading: usersLoading } = useAdminUsers();
- const recentOrders = [
- { id: '4532', customer: 'John Doe', date: '2023-04-22', total: 49.99, status: 'Delivered' },
- { id: '4531', customer: 'Jane Smith', date: '2023-04-21', total: 89.95, status: 'Processing' },
- { id: '4530', customer: 'Bob Johnson', date: '2023-04-20', total: 24.99, status: 'Shipped' },
- { id: '4529', customer: 'Alice Brown', date: '2023-04-19', total: 129.99, status: 'Delivered' }
- ];
+ // Calculate total revenue from orders
+ const calculateTotalRevenue = () => {
+ if (!orders || orders.length === 0) return 0;
+ return orders.reduce((sum, order) => {
+ // Only count orders that are completed/paid
+ if (order.payment_completed) {
+ return sum + parseFloat(order.total_amount || 0);
+ }
+ return sum;
+ }, 0);
+ };
- // Update stats when products and categories are loaded
+ // Get recent orders (last 4)
+ const getRecentOrders = () => {
+ if (!orders || orders.length === 0) return [];
+
+ // Sort orders by created_at date (newest first) and take the first 4
+ return orders
+ .sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
+ .slice(0, 4);
+ };
+
+ // Format date
+ const formatDate = (dateString) => {
+ if (!dateString) return '';
+ try {
+ return format(new Date(dateString), 'yyyy-MM-dd');
+ } catch (error) {
+ return dateString;
+ }
+ };
+
+ // Stats state
+ const [stats, setStats] = useState({
+ totalProducts: 0,
+ totalUsers: 0,
+ totalOrders: 0,
+ revenue: 0,
+ totalCategories: 0
+ });
+
+ // Update stats when data is loaded
useEffect(() => {
- if (products) {
- setStats(prev => ({
- ...prev,
- totalProducts: products.length,
- totalUsers: 15,
- totalOrders: 42,
- revenue: 2459.99
- }));
- }
+ const newStats = {
+ totalProducts: products?.length || 0,
+ totalUsers: users?.length || 0,
+ totalOrders: orders?.length || 0,
+ revenue: calculateTotalRevenue(),
+ totalCategories: categories?.length || 0
+ };
+ setStats(newStats);
+ }, [products, categories, orders, users]);
- if (categories) {
- setStats(prev => ({
- ...prev,
- totalCategories: categories.length
- }));
- }
- }, [products, categories]);
+ // Recent orders
+ const recentOrders = getRecentOrders();
// Placeholder for when we add actual API calls
- const isLoading = productsLoading || categoriesLoading;
+ const isLoading = productsLoading || categoriesLoading || ordersLoading || usersLoading;
const error = productsError;
if (isLoading) {
@@ -200,17 +226,23 @@ const AdminDashboardPage = () => {
/>
- {recentOrders.map((order, index) => (
-
-
-
-
- {index < recentOrders.length - 1 && }
-
- ))}
+ {recentOrders.length > 0 ? (
+ recentOrders.map((order, index) => (
+
+
+
+
+ {index < recentOrders.length - 1 && }
+
+ ))
+ ) : (
+
+
+
+ )}
@@ -279,7 +311,11 @@ const AdminDashboardPage = () => {
>
Manage Products
-