103 lines
4.8 KiB
JavaScript
103 lines
4.8 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import StatCard from './Components/StatCard';
|
|
import ProfitTable from './Components/ProfitTable';
|
|
import { DollarSign, TrendingDown, TrendingUp, Calendar, ChevronDown } from 'lucide-react';
|
|
|
|
export default function Dashboard() {
|
|
const [stats, setStats] = useState({
|
|
total_income: 0,
|
|
total_expense: 0,
|
|
net_profit: 0
|
|
});
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/reports/profit')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
setStats({
|
|
total_income: data.total_income,
|
|
total_expense: data.total_expense,
|
|
net_profit: data.net_profit
|
|
});
|
|
setLoading(false);
|
|
})
|
|
.catch(err => {
|
|
console.error("Error fetching dashboard stats:", err);
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
const formatCurrency = (val) => {
|
|
if (val === undefined || val === null || isNaN(val)) return 'AED 0.00';
|
|
return new Intl.NumberFormat('en-AE', { style: 'currency', currency: 'AED' }).format(val);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<main className="p-8 max-w-[1600px] mx-auto space-y-8">
|
|
{/* Dashboard Title & Filters */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<h2 className="text-4xl font-extrabold text-gray-900 tracking-tight">Owner Dashboard</h2>
|
|
|
|
<div className="flex items-center gap-3">
|
|
{/* Branch Selector */}
|
|
<div className="relative group">
|
|
<select className="appearance-none pl-4 pr-10 py-2.5 bg-white border border-gray-200 rounded-xl text-sm font-bold text-gray-600 focus:border-red-500/30 focus:ring-4 focus:ring-red-500/5 transition-all outline-none">
|
|
<option>All Branches</option>
|
|
<option>Downtown Gym</option>
|
|
<option>Uptown Fitness</option>
|
|
</select>
|
|
<ChevronDown size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-red-500 transition-all" />
|
|
</div>
|
|
|
|
{/* Date Range */}
|
|
<div className="flex items-center bg-white border border-gray-200 rounded-xl p-1 gap-1">
|
|
<div className="flex items-center gap-2 px-3 py-1.5 text-xs font-bold text-gray-500 border-r border-gray-100">
|
|
<span className="text-gray-400 font-medium">From</span>
|
|
<span>31 - 01 - 2026</span>
|
|
<Calendar size={14} className="text-gray-400" />
|
|
</div>
|
|
<div className="flex items-center gap-2 px-3 py-1.5 text-xs font-bold text-gray-500">
|
|
<span className="text-gray-400 font-medium">To</span>
|
|
<span>02 - 03 - 2026</span>
|
|
<Calendar size={14} className="text-gray-400" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stat Cards Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<StatCard
|
|
title={loading ? "Loading..." : formatCurrency(stats.total_income)}
|
|
subtitle="Total Income"
|
|
value={loading ? "..." : formatCurrency(stats.total_income)}
|
|
color="green"
|
|
icon={DollarSign}
|
|
/>
|
|
<StatCard
|
|
title={loading ? "Loading..." : formatCurrency(stats.total_expense)}
|
|
subtitle="Total Expenses"
|
|
value={loading ? "..." : formatCurrency(stats.total_expense)}
|
|
color="red"
|
|
icon={TrendingDown}
|
|
/>
|
|
<StatCard
|
|
title={loading ? "Loading..." : formatCurrency(stats.net_profit)}
|
|
subtitle="Net Profit"
|
|
value={loading ? "..." : formatCurrency(stats.net_profit)}
|
|
color="blue"
|
|
icon={TrendingUp}
|
|
/>
|
|
</div>
|
|
|
|
{/* Main Content Area */}
|
|
<div className="grid grid-cols-1 gap-8">
|
|
<ProfitTable />
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|