fix: remove Tasks from sidebar, rebuild Reports with KPIs+charts+tables, fix Settings (billing gracePeriod, Users CRUD with create+role+toggle)
This commit is contained in:
Forge
@@ -1,193 +1,262 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '@/lib/api';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend, LineChart, Line, CartesianGrid } from "recharts";
|
||||
import { RefreshCw, TrendingUp, Users, AlertTriangle, DollarSign } from "lucide-react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { Badge } from "@/components/ui/Badge";
|
||||
import { formatCurrency } from "@/lib/utils";
|
||||
import api from "@/lib/api";
|
||||
|
||||
const peso = (v: number) => '₱' + (v ?? 0).toLocaleString('en-PH', { minimumFractionDigits: 2 });
|
||||
const COLORS = ["#0891B2", "#059669", "#F59E0B", "#EF4444", "#8B5CF6", "#EC4899"];
|
||||
|
||||
function KpiCard({ title, value, sub, icon: Icon, color }: { title: string; value: string; sub?: string; icon: any; color: string }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="pt-5">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">{title}</p>
|
||||
<p className="text-2xl font-bold text-gray-900 mt-1">{value}</p>
|
||||
{sub && <p className="text-xs text-gray-400 mt-0.5">{sub}</p>}
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: color + "20" }}>
|
||||
<Icon size={20} style={{ color }} />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ReportsPage() {
|
||||
const [from, setFrom] = useState(() => {
|
||||
const d = new Date();
|
||||
d.setDate(1);
|
||||
return d.toISOString().split('T')[0];
|
||||
});
|
||||
const [to, setTo] = useState(() => new Date().toISOString().split('T')[0]);
|
||||
const today = new Date();
|
||||
const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1).toISOString().split("T")[0];
|
||||
const [from, setFrom] = useState(firstOfMonth);
|
||||
const [to, setTo] = useState(today.toISOString().split("T")[0]);
|
||||
|
||||
const { data: collection, isLoading: collLoading } = useQuery({
|
||||
queryKey: ['reports', 'collection', from, to],
|
||||
const { data: collection = [], isLoading: collLoading, refetch: refetchAll } = useQuery({
|
||||
queryKey: ["reports-collection", from, to],
|
||||
queryFn: async () => {
|
||||
const res = await api.get(`/api/v1/reports/collection?from=${from}&to=${to}`);
|
||||
return res.data as Array<{ collector: string; totalAmount: number; paymentCount: number }>;
|
||||
},
|
||||
});
|
||||
|
||||
const { data: aging, isLoading: agingLoading } = useQuery({
|
||||
queryKey: ['reports', 'aging'],
|
||||
const { data: aging = [] } = useQuery({
|
||||
queryKey: ["reports-aging"],
|
||||
queryFn: async () => {
|
||||
const res = await api.get('/api/v1/reports/aging');
|
||||
const res = await api.get("/api/v1/reports/aging");
|
||||
return res.data as Array<{ bucket: string; invoiceCount: number; totalAmount: number }>;
|
||||
},
|
||||
});
|
||||
|
||||
const { data: subscribers, isLoading: subLoading } = useQuery({
|
||||
queryKey: ['reports', 'subscribers'],
|
||||
const { data: subscribers = [] } = useQuery({
|
||||
queryKey: ["reports-subscribers"],
|
||||
queryFn: async () => {
|
||||
const res = await api.get('/api/v1/reports/subscribers');
|
||||
return res.data as Array<{ plan: string; count: number; revenue: number }>;
|
||||
const res = await api.get("/api/v1/reports/subscribers");
|
||||
return res.data as Array<{ status: string; count: number; area?: string; plan?: string }>;
|
||||
},
|
||||
});
|
||||
|
||||
const { data: revenue, isLoading: revLoading } = useQuery({
|
||||
queryKey: ['reports', 'revenue'],
|
||||
const { data: revenue = [] } = useQuery({
|
||||
queryKey: ["reports-revenue"],
|
||||
queryFn: async () => {
|
||||
const res = await api.get('/api/v1/reports/revenue');
|
||||
return res.data as Array<{ month: string; total: number }>;
|
||||
const res = await api.get("/api/v1/reports/revenue");
|
||||
return (res.data as Array<{ month: string; revenue: number; totalInvoiced: number }>)
|
||||
.filter(r => r.revenue > 0 || r.totalInvoiced > 0)
|
||||
.slice(-12);
|
||||
},
|
||||
});
|
||||
|
||||
// Derived KPIs
|
||||
const totalCollected = collection.reduce((s, c) => s + Number(c.totalAmount), 0);
|
||||
const totalPayments = collection.reduce((s, c) => s + c.paymentCount, 0);
|
||||
const totalOutstanding = aging.reduce((s, a) => s + Number(a.totalAmount), 0);
|
||||
const overdueCount = aging.reduce((s, a) => s + a.invoiceCount, 0);
|
||||
|
||||
// Subscriber summary (status-only rows, no area key)
|
||||
const subByStatus = subscribers.filter(s => !s.area && !s.plan);
|
||||
const activeCount = subByStatus.find(s => s.status === "ACTIVE")?.count ?? 0;
|
||||
const pendingCount = subByStatus.find(s => s.status === "PENDING")?.count ?? 0;
|
||||
const suspendedCount = subByStatus.find(s => s.status === "SUSPENDED")?.count ?? 0;
|
||||
const totalSubs = subByStatus.reduce((s, x) => s + x.count, 0);
|
||||
|
||||
// Subscriber by area (rows with area key)
|
||||
const subByArea = subscribers.filter(s => !!s.area);
|
||||
|
||||
const agingRisk: Record<string, string> = { "0-30": "text-yellow-600", "31-60": "text-orange-600", "61-90": "text-red-500", "90+": "text-red-700" };
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-slate-800">Reports</h1>
|
||||
<p className="text-slate-500 text-sm mt-1">Financial and operational analytics</p>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Reports</h1>
|
||||
<p className="text-sm text-gray-500">Financial and operational analytics</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<label className="text-gray-500">From</label>
|
||||
<input type="date" value={from} onChange={e => setFrom(e.target.value)}
|
||||
className="border rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
<label className="text-gray-500">To</label>
|
||||
<input type="date" value={to} onChange={e => setTo(e.target.value)}
|
||||
className="border rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
</div>
|
||||
<Button onClick={() => refetchAll()} variant="outline" size="sm"><RefreshCw size={14} className="mr-1" />Refresh</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPI Summary */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<KpiCard title="Total Collected" value={formatCurrency(totalCollected)} sub={`${totalPayments} payments`} icon={DollarSign} color="#059669" />
|
||||
<KpiCard title="Active Subscribers" value={String(activeCount)} sub={`${pendingCount} pending · ${suspendedCount} suspended`} icon={Users} color="#0891B2" />
|
||||
<KpiCard title="Outstanding Balance" value={formatCurrency(totalOutstanding)} sub={`${overdueCount} overdue invoices`} icon={AlertTriangle} color="#EF4444" />
|
||||
<KpiCard title="Total Subscribers" value={String(totalSubs)} sub={`across all statuses`} icon={TrendingUp} color="#8B5CF6" />
|
||||
</div>
|
||||
|
||||
{/* Collection Report */}
|
||||
<Card className="border shadow-sm mb-6">
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-3">
|
||||
<CardTitle className="text-base font-semibold text-slate-700">Collection Report</CardTitle>
|
||||
<div className="flex gap-2 items-center">
|
||||
<input type="date" value={from} onChange={(e) => setFrom(e.target.value)}
|
||||
className="border rounded-md px-2 py-1 text-sm text-slate-700" />
|
||||
<span className="text-slate-400 text-sm">to</span>
|
||||
<input type="date" value={to} onChange={(e) => setTo(e.target.value)}
|
||||
className="border rounded-md px-2 py-1 text-sm text-slate-700" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{collLoading ? (
|
||||
<Skeleton className="h-32 w-full" />
|
||||
) : !collection?.length ? (
|
||||
<p className="text-center text-slate-400 py-6">No collections in this period</p>
|
||||
) : (
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left py-2 font-medium text-slate-500">Collector</th>
|
||||
<th className="text-right py-2 font-medium text-slate-500">Payments</th>
|
||||
<th className="text-right py-2 font-medium text-slate-500">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{collection?.map((row, i) => (
|
||||
<tr key={i} className="border-b">
|
||||
<td className="py-2 text-slate-700">{row.collector}</td>
|
||||
<td className="py-2 text-right text-slate-600">{row.paymentCount}</td>
|
||||
<td className="py-2 text-right font-semibold text-slate-800">{peso(row.totalAmount)}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="bg-slate-50">
|
||||
<td className="py-2 font-semibold text-slate-700">Total</td>
|
||||
<td className="py-2 text-right font-semibold text-slate-700">
|
||||
{collection?.reduce((s, r) => s + r.paymentCount, 0)}
|
||||
</td>
|
||||
<td className="py-2 text-right font-semibold text-slate-800">
|
||||
{peso(collection?.reduce((s, r) => s + r.totalAmount, 0) ?? 0)}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
{/* Revenue Trend */}
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base font-semibold text-slate-700">Revenue Trend (12 months)</CardTitle>
|
||||
</CardHeader>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Collection by Collector</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
{revLoading ? <Skeleton className="h-48 w-full" /> : (
|
||||
<ResponsiveContainer width="100%" height={200}>
|
||||
<BarChart data={revenue ?? []}>
|
||||
<XAxis dataKey="month" tick={{ fontSize: 11 }} />
|
||||
<YAxis tick={{ fontSize: 11 }} tickFormatter={(v) => `₱${(v/1000).toFixed(0)}k`} />
|
||||
<Tooltip formatter={(v: any) => peso(v)} />
|
||||
<Bar dataKey="total" fill="#0891B2" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
{collLoading ? <div className="h-40 animate-pulse bg-gray-100 rounded" /> :
|
||||
collection.length === 0 ? <p className="text-sm text-gray-400 py-6 text-center">No collection data for this period</p> : (
|
||||
<>
|
||||
<div className="space-y-2 mb-4">
|
||||
{collection.map((c, i) => (
|
||||
<div key={i} className="flex items-center justify-between py-2 border-b last:border-0">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-800">{c.collector}</p>
|
||||
<p className="text-xs text-gray-400">{c.paymentCount} payments</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-bold text-green-700">{formatCurrency(c.totalAmount)}</p>
|
||||
<p className="text-xs text-gray-400">{totalCollected > 0 ? ((c.totalAmount / totalCollected) * 100).toFixed(1) : 0}%</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex justify-between pt-1 font-semibold text-sm">
|
||||
<span>Total</span>
|
||||
<span className="text-green-700">{formatCurrency(totalCollected)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<ResponsiveContainer width="100%" height={160}>
|
||||
<BarChart data={collection} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
|
||||
<XAxis dataKey="collector" tick={{ fontSize: 11 }} />
|
||||
<YAxis tick={{ fontSize: 11 }} tickFormatter={v => `₱${(v/1000).toFixed(0)}k`} />
|
||||
<Tooltip formatter={(v: any) => formatCurrency(Number(v))} />
|
||||
<Bar dataKey="totalAmount" fill="#0891B2" radius={[4,4,0,0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Aging */}
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base font-semibold text-slate-700">Accounts Receivable Aging</CardTitle>
|
||||
</CardHeader>
|
||||
{/* Aging Report */}
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Accounts Receivable Aging</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
{agingLoading ? <Skeleton className="h-48 w-full" /> : (
|
||||
<div className="space-y-3">
|
||||
{aging?.map((bucket) => (
|
||||
<div key={bucket.bucket} className="flex items-center gap-3">
|
||||
<span className="text-sm text-slate-500 w-16">{bucket.bucket}d</span>
|
||||
<div className="flex-1 bg-slate-100 rounded-full h-3 overflow-hidden">
|
||||
<div
|
||||
className="h-3 rounded-full"
|
||||
style={{
|
||||
width: `${Math.min(100, (bucket.totalAmount / (Math.max(...(aging?.map(b => b.totalAmount) ?? [1])) || 1)) * 100)}%`,
|
||||
backgroundColor: bucket.bucket === '90+' ? '#DC2626' : bucket.bucket === '61-90' ? '#D97706' : '#0891B2',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-slate-700 w-32 text-right">{peso(bucket.totalAmount)}</span>
|
||||
<span className="text-xs text-slate-400 w-16 text-right">{bucket.invoiceCount} inv</span>
|
||||
<div className="space-y-3">
|
||||
{aging.map((a) => (
|
||||
<div key={a.bucket} className="flex items-center justify-between p-3 rounded-lg bg-gray-50">
|
||||
<div>
|
||||
<p className={`text-sm font-semibold ${agingRisk[a.bucket] ?? "text-gray-700"}`}>{a.bucket} days overdue</p>
|
||||
<p className="text-xs text-gray-400">{a.invoiceCount} invoice{a.invoiceCount !== 1 ? "s" : ""}</p>
|
||||
</div>
|
||||
))}
|
||||
{!aging?.some(b => b.totalAmount > 0) && (
|
||||
<p className="text-center text-slate-400 py-6">No overdue invoices 🎉</p>
|
||||
)}
|
||||
<div className="text-right">
|
||||
<p className={`text-base font-bold ${a.totalAmount > 0 ? agingRisk[a.bucket] ?? "text-gray-800" : "text-gray-400"}`}>
|
||||
{formatCurrency(a.totalAmount)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex justify-between px-3 py-2 bg-red-50 rounded-lg font-semibold text-sm">
|
||||
<span className="text-red-700">Total Outstanding</span>
|
||||
<span className="text-red-700">{formatCurrency(totalOutstanding)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Revenue Trend */}
|
||||
{revenue.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Revenue Trend (Monthly)</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={220}>
|
||||
<LineChart data={revenue} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#F1F5F9" />
|
||||
<XAxis dataKey="month" tick={{ fontSize: 11 }} />
|
||||
<YAxis tick={{ fontSize: 11 }} tickFormatter={v => `₱${(v/1000).toFixed(0)}k`} />
|
||||
<Tooltip formatter={(v: any) => formatCurrency(Number(v))} />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="revenue" stroke="#059669" strokeWidth={2} dot={false} name="Collected" />
|
||||
<Line type="monotone" dataKey="totalInvoiced" stroke="#0891B2" strokeWidth={2} dot={false} name="Invoiced" strokeDasharray="4 2" />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Subscribers by Status + Area */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Subscribers by Status</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
{subByStatus.length === 0 ? <p className="text-sm text-gray-400 py-4 text-center">No subscriber data</p> : (
|
||||
<div className="flex gap-6 items-center">
|
||||
<ResponsiveContainer width="50%" height={160}>
|
||||
<PieChart>
|
||||
<Pie data={subByStatus} dataKey="count" nameKey="status" cx="50%" cy="50%" outerRadius={60} label={false}>
|
||||
{subByStatus.map((_, i) => <Cell key={i} fill={COLORS[i % COLORS.length]} />)}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
<div className="space-y-2">
|
||||
{subByStatus.map((s, i) => (
|
||||
<div key={s.status} className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: COLORS[i % COLORS.length] }} />
|
||||
<span className="text-sm text-gray-700">{s.status}</span>
|
||||
<span className="text-sm font-bold text-gray-900 ml-auto">{s.count}</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="border-t pt-1 flex justify-between text-sm font-semibold">
|
||||
<span>Total</span><span>{totalSubs}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Subscribers by Plan */}
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base font-semibold text-slate-700">Subscribers by Plan</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{subLoading ? <Skeleton className="h-32 w-full" /> : (
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left py-2 font-medium text-slate-500">Plan</th>
|
||||
<th className="text-right py-2 font-medium text-slate-500">Subscribers</th>
|
||||
<th className="text-right py-2 font-medium text-slate-500">Monthly Revenue</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(subscribers as any[])?.map((row: any, i: number) => (
|
||||
<tr key={i} className="border-b">
|
||||
<td className="py-2 text-slate-700">{row.plan ?? row.name ?? '—'}</td>
|
||||
<td className="py-2 text-right text-slate-600">{row.count ?? row.subscribers ?? 0}</td>
|
||||
<td className="py-2 text-right font-semibold text-slate-800">
|
||||
{peso(row.revenue ?? row.monthlyRevenue ?? 0)}
|
||||
</td>
|
||||
</tr>
|
||||
{subByArea.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Active Subscribers by Area</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{subByArea.map((a) => (
|
||||
<div key={a.area} className="flex items-center justify-between py-2 border-b last:border-0">
|
||||
<span className="text-sm font-medium text-gray-800">{a.area}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-20 bg-gray-100 rounded-full h-2 overflow-hidden">
|
||||
<div className="h-2 rounded-full bg-blue-500" style={{ width: `${Math.min(100, (a.count / (activeCount || 1)) * 100)}%` }} />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-700 w-6 text-right">{a.count}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user