139 lines
6.5 KiB
JavaScript
139 lines
6.5 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import StatCard from './Components/StatCard';
|
|
import AccountsTable from './Components/AccountsTable';
|
|
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,
|
|
transactions: []
|
|
});
|
|
const [branches, setBranches] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [filterBranch, setFilterBranch] = useState('');
|
|
const [startDate, setStartDate] = useState(() => {
|
|
const d = new Date();
|
|
d.setMonth(d.getMonth() - 1);
|
|
return d.toISOString().split('T')[0];
|
|
});
|
|
const [endDate, setEndDate] = useState(new Date().toISOString().split('T')[0]);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/branches?status=Active')
|
|
.then(res => res.json())
|
|
.then(data => setBranches(data))
|
|
.catch(err => console.error("Error fetching branches:", err));
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
const params = new URLSearchParams({
|
|
branch_id: filterBranch,
|
|
start_date: startDate,
|
|
end_date: endDate
|
|
});
|
|
fetch(`/api/reports/profit?${params}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
setStats({
|
|
total_income: data.total_income,
|
|
total_expense: data.total_expense,
|
|
net_profit: data.net_profit,
|
|
transactions: data.transactions || []
|
|
});
|
|
setLoading(false);
|
|
})
|
|
.catch(err => {
|
|
console.error("Error fetching dashboard stats:", err);
|
|
setLoading(false);
|
|
});
|
|
}, [filterBranch, startDate, endDate]);
|
|
|
|
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
|
|
value={filterBranch}
|
|
onChange={(e) => setFilterBranch(e.target.value)}
|
|
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 value="">All Branches</option>
|
|
{branches.map(b => <option key={b.id} value={b.id}>{b.name}</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 whitespace-nowrap">From</span>
|
|
<input
|
|
type="date"
|
|
value={startDate}
|
|
onChange={(e) => setStartDate(e.target.value)}
|
|
className="bg-transparent border-none p-0 focus:ring-0 text-gray-700 outline-none w-28"
|
|
/>
|
|
<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 whitespace-nowrap">To</span>
|
|
<input
|
|
type="date"
|
|
value={endDate}
|
|
onChange={(e) => setEndDate(e.target.value)}
|
|
className="bg-transparent border-none p-0 focus:ring-0 text-gray-700 outline-none w-28"
|
|
/>
|
|
<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="Aggregated amount of all credits"
|
|
subtitle="Total Credited"
|
|
value={loading ? "..." : formatCurrency(stats.total_income)}
|
|
color="green"
|
|
icon={DollarSign}
|
|
/>
|
|
<StatCard
|
|
title="Aggregated amount of all debits"
|
|
subtitle="Total Debited"
|
|
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">
|
|
<AccountsTable data={stats.transactions} />
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|