feat: web sprint 250-262 — plans/clients/tickets/audit/profile/settings/leads/reports #26
@@ -1,20 +1,21 @@
|
|||||||
"use client";
|
"use client";
|
||||||
export const dynamic = "force-dynamic";
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend, LineChart, Line, CartesianGrid } from "recharts";
|
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, LineChart, Line, CartesianGrid, Legend } from "recharts";
|
||||||
import { RefreshCw, TrendingUp, Users, AlertTriangle, DollarSign } from "lucide-react";
|
import { RefreshCw, TrendingUp, Users, AlertTriangle, DollarSign, Download } from "lucide-react";
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||||
import { Button } from "@/components/ui/Button";
|
import { Button } from "@/components/ui/Button";
|
||||||
import { Badge } from "@/components/ui/Badge";
|
import { Badge } from "@/components/ui/Badge";
|
||||||
import { formatCurrency } from "@/lib/utils";
|
import { Table, TableHead, TableBody, TableRow, Th, Td, EmptyState } from "@/components/ui/Table";
|
||||||
|
import { formatCurrency, formatDate } from "@/lib/utils";
|
||||||
import api from "@/lib/api";
|
import api from "@/lib/api";
|
||||||
|
|
||||||
const COLORS = ["#0891B2", "#059669", "#F59E0B", "#EF4444", "#8B5CF6", "#EC4899"];
|
const COLORS = ["#0891B2", "#059669", "#F59E0B", "#EF4444", "#8B5CF6", "#EC4899"];
|
||||||
|
|
||||||
|
type Tab = "overview" | "collections" | "tickets";
|
||||||
|
|
||||||
function KpiCard({ title, value, sub, icon: Icon, color }: { title: string; value: string; sub?: string; icon: any; color: string }) {
|
function KpiCard({ title, value, sub, icon: Icon, color }: { title: string; value: string; sub?: string; icon: any; color: string }) {
|
||||||
return (
|
return (
|
||||||
<Card>
|
<Card>
|
||||||
@@ -34,12 +35,26 @@ function KpiCard({ title, value, sub, icon: Icon, color }: { title: string; valu
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function downloadCSV(data: any[], filename: string) {
|
||||||
|
if (!data.length) return;
|
||||||
|
const headers = Object.keys(data[0]);
|
||||||
|
const rows = data.map(row => headers.map(h => JSON.stringify(row[h] ?? "")).join(","));
|
||||||
|
const csv = [headers.join(","), ...rows].join("\n");
|
||||||
|
const blob = new Blob([csv], { type: "text/csv" });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = url; a.download = filename; a.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
|
||||||
export default function ReportsPage() {
|
export default function ReportsPage() {
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1).toISOString().split("T")[0];
|
const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1).toISOString().split("T")[0];
|
||||||
|
const [tab, setTab] = useState<Tab>("overview");
|
||||||
const [from, setFrom] = useState(firstOfMonth);
|
const [from, setFrom] = useState(firstOfMonth);
|
||||||
const [to, setTo] = useState(today.toISOString().split("T")[0]);
|
const [to, setTo] = useState(today.toISOString().split("T")[0]);
|
||||||
|
|
||||||
|
// Overview data
|
||||||
const { data: collection = [], isLoading: collLoading, refetch: refetchAll } = useQuery({
|
const { data: collection = [], isLoading: collLoading, refetch: refetchAll } = useQuery({
|
||||||
queryKey: ["reports-collection", from, to],
|
queryKey: ["reports-collection", from, to],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
@@ -69,29 +84,54 @@ export default function ReportsPage() {
|
|||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const res = await api.get("/api/v1/reports/revenue");
|
const res = await api.get("/api/v1/reports/revenue");
|
||||||
return (res.data as Array<{ month: string; revenue: number; totalInvoiced: number }>)
|
return (res.data as Array<{ month: string; revenue: number; totalInvoiced: number }>)
|
||||||
.filter(r => r.revenue > 0 || r.totalInvoiced > 0)
|
.filter(r => r.revenue > 0 || r.totalInvoiced > 0).slice(-12);
|
||||||
.slice(-12);
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Collections tab data
|
||||||
|
const { data: paymentsData } = useQuery({
|
||||||
|
queryKey: ["reports-payments", from, to],
|
||||||
|
queryFn: async () => {
|
||||||
|
const res = await api.get(`/api/v1/payments?page=1&limit=100`);
|
||||||
|
return (res.data as any)?.data ?? [];
|
||||||
|
},
|
||||||
|
enabled: tab === "collections",
|
||||||
|
});
|
||||||
|
|
||||||
|
// Tickets tab data
|
||||||
|
const { data: ticketsData } = useQuery({
|
||||||
|
queryKey: ["reports-tickets"],
|
||||||
|
queryFn: async () => {
|
||||||
|
const [open, resolved, all] = await Promise.all([
|
||||||
|
api.get("/api/v1/tickets?status=OPEN&limit=100"),
|
||||||
|
api.get("/api/v1/tickets?status=RESOLVED&limit=100"),
|
||||||
|
api.get("/api/v1/tickets?limit=50"),
|
||||||
|
]);
|
||||||
|
return {
|
||||||
|
open: (open.data as any)?.meta?.total ?? (open.data as any)?.data?.length ?? 0,
|
||||||
|
resolved: (resolved.data as any)?.meta?.total ?? (resolved.data as any)?.data?.length ?? 0,
|
||||||
|
list: (all.data as any)?.data ?? [],
|
||||||
|
total: (all.data as any)?.meta?.total ?? 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
enabled: tab === "tickets",
|
||||||
|
});
|
||||||
|
|
||||||
// Derived KPIs
|
// Derived KPIs
|
||||||
const totalCollected = collection.reduce((s, c) => s + Number(c.totalAmount), 0);
|
const totalCollected = collection.reduce((s, c) => s + Number(c.totalAmount), 0);
|
||||||
const totalPayments = collection.reduce((s, c) => s + c.paymentCount, 0);
|
const totalPayments = collection.reduce((s, c) => s + c.paymentCount, 0);
|
||||||
const totalOutstanding = aging.reduce((s, a) => s + Number(a.totalAmount), 0);
|
const totalOutstanding = aging.reduce((s, a) => s + Number(a.totalAmount), 0);
|
||||||
const overdueCount = aging.reduce((s, a) => s + a.invoiceCount, 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 subByStatus = subscribers.filter(s => !s.area && !s.plan);
|
||||||
const activeCount = subByStatus.find(s => s.status === "ACTIVE")?.count ?? 0;
|
const activeCount = subByStatus.find(s => s.status === "ACTIVE")?.count ?? 0;
|
||||||
const pendingCount = subByStatus.find(s => s.status === "PENDING")?.count ?? 0;
|
const pendingCount = subByStatus.find(s => s.status === "PENDING")?.count ?? 0;
|
||||||
const suspendedCount = subByStatus.find(s => s.status === "SUSPENDED")?.count ?? 0;
|
const suspendedCount = subByStatus.find(s => s.status === "SUSPENDED")?.count ?? 0;
|
||||||
const totalSubs = subByStatus.reduce((s, x) => s + x.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 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" };
|
const agingRisk: Record<string, string> = { "0-30": "text-yellow-600", "31-60": "text-orange-600", "61-90": "text-red-500", "90+": "text-red-700" };
|
||||||
|
|
||||||
|
const payments: any[] = paymentsData ?? [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||||
@@ -112,154 +152,198 @@ export default function ReportsPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* KPI Summary */}
|
{/* Tabs */}
|
||||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
<div className="flex border-b border-gray-200">
|
||||||
<KpiCard title="Total Collected" value={formatCurrency(totalCollected)} sub={`${totalPayments} payments`} icon={DollarSign} color="#059669" />
|
{(["overview", "collections", "tickets"] as Tab[]).map(t => (
|
||||||
<KpiCard title="Active Subscribers" value={String(activeCount)} sub={`${pendingCount} pending · ${suspendedCount} suspended`} icon={Users} color="#0891B2" />
|
<button key={t} onClick={() => setTab(t)}
|
||||||
<KpiCard title="Outstanding Balance" value={formatCurrency(totalOutstanding)} sub={`${overdueCount} overdue invoices`} icon={AlertTriangle} color="#EF4444" />
|
className={`px-5 py-2.5 text-sm font-medium border-b-2 capitalize transition-colors ${
|
||||||
<KpiCard title="Total Subscribers" value={String(totalSubs)} sub={`across all statuses`} icon={TrendingUp} color="#8B5CF6" />
|
tab === t ? "border-blue-600 text-blue-600" : "border-transparent text-gray-500 hover:text-gray-700"
|
||||||
|
}`}>
|
||||||
|
{t}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Collection Report */}
|
{/* Overview Tab */}
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
{tab === "overview" && (
|
||||||
<Card>
|
<div className="space-y-6">
|
||||||
<CardHeader><CardTitle>Collection by Collector</CardTitle></CardHeader>
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
<CardContent>
|
<KpiCard title="Total Collected" value={formatCurrency(totalCollected)} sub={`${totalPayments} payments`} icon={DollarSign} color="#059669" />
|
||||||
{collLoading ? <div className="h-40 animate-pulse bg-gray-100 rounded" /> :
|
<KpiCard title="Active Subscribers" value={String(activeCount)} sub={`${pendingCount} pending · ${suspendedCount} suspended`} icon={Users} color="#0891B2" />
|
||||||
collection.length === 0 ? <p className="text-sm text-gray-400 py-6 text-center">No collection data for this period</p> : (
|
<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 className="space-y-2 mb-4">
|
</div>
|
||||||
{collection.map((c, i) => (
|
|
||||||
<div key={i} className="flex items-center justify-between py-2 border-b last:border-0">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
<div>
|
<Card>
|
||||||
<p className="text-sm font-medium text-gray-800">{c.collector}</p>
|
<CardHeader><CardTitle>Collection by Collector</CardTitle></CardHeader>
|
||||||
<p className="text-xs text-gray-400">{c.paymentCount} payments</p>
|
<CardContent>
|
||||||
</div>
|
{collLoading ? <div className="h-40 animate-pulse bg-gray-100 rounded" /> :
|
||||||
<div className="text-right">
|
collection.length === 0 ? <p className="text-sm text-gray-400 py-6 text-center">No collection data for this period</p> : (
|
||||||
<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 className="space-y-2 mb-4">
|
||||||
</div>
|
{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></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>
|
</div>
|
||||||
))}
|
<ResponsiveContainer width="100%" height={160}>
|
||||||
<div className="flex justify-between pt-1 font-semibold text-sm">
|
<BarChart data={collection}><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>
|
||||||
<span>Total</span>
|
</ResponsiveContainer>
|
||||||
<span className="text-green-700">{formatCurrency(totalCollected)}</span>
|
</>
|
||||||
</div>
|
)
|
||||||
</div>
|
}
|
||||||
<ResponsiveContainer width="100%" height={160}>
|
</CardContent>
|
||||||
<BarChart data={collection} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
|
</Card>
|
||||||
<XAxis dataKey="collector" tick={{ fontSize: 11 }} />
|
<Card>
|
||||||
<YAxis tick={{ fontSize: 11 }} tickFormatter={v => `₱${(v/1000).toFixed(0)}k`} />
|
<CardHeader><CardTitle>Accounts Receivable Aging</CardTitle></CardHeader>
|
||||||
<Tooltip formatter={(v: any) => formatCurrency(Number(v))} />
|
<CardContent>
|
||||||
<Bar dataKey="totalAmount" fill="#0891B2" radius={[4,4,0,0]} />
|
<div className="space-y-3">
|
||||||
</BarChart>
|
{aging.map((a) => (
|
||||||
</ResponsiveContainer>
|
<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</p><p className="text-xs text-gray-400">{a.invoiceCount} invoices</p></div>
|
||||||
)
|
<p className={`text-base font-bold ${a.totalAmount > 0 ? agingRisk[a.bucket] ?? "text-gray-800" : "text-gray-400"}`}>{formatCurrency(a.totalAmount)}</p>
|
||||||
}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Aging Report */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader><CardTitle>Accounts Receivable Aging</CardTitle></CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<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>
|
|
||||||
<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>
|
||||||
))}
|
))}
|
||||||
<div className="border-t pt-1 flex justify-between text-sm font-semibold">
|
<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>
|
||||||
<span>Total</span><span>{totalSubs}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</CardContent>
|
||||||
)}
|
</Card>
|
||||||
</CardContent>
|
</div>
|
||||||
</Card>
|
|
||||||
|
|
||||||
{subByArea.length > 0 && (
|
{revenue.length > 0 && (
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader><CardTitle>Active Subscribers by Area</CardTitle></CardHeader>
|
<CardHeader><CardTitle>Revenue Trend (Monthly)</CardTitle></CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className="space-y-2">
|
<ResponsiveContainer width="100%" height={220}>
|
||||||
{subByArea.map((a) => (
|
<LineChart data={revenue} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
|
||||||
<div key={a.area} className="flex items-center justify-between py-2 border-b last:border-0">
|
<CartesianGrid strokeDasharray="3 3" stroke="#F1F5F9" />
|
||||||
<span className="text-sm font-medium text-gray-800">{a.area}</span>
|
<XAxis dataKey="month" tick={{ fontSize: 11 }} /><YAxis tick={{ fontSize: 11 }} tickFormatter={v => `₱${(v/1000).toFixed(0)}k`} />
|
||||||
<div className="flex items-center gap-2">
|
<Tooltip formatter={(v: any) => formatCurrency(Number(v))} /><Legend />
|
||||||
<div className="w-20 bg-gray-100 rounded-full h-2 overflow-hidden">
|
<Line type="monotone" dataKey="revenue" stroke="#059669" strokeWidth={2} dot={false} name="Collected" />
|
||||||
<div className="h-2 rounded-full bg-blue-500" style={{ width: `${Math.min(100, (a.count / (activeCount || 1)) * 100)}%` }} />
|
<Line type="monotone" dataKey="totalInvoiced" stroke="#0891B2" strokeWidth={2} dot={false} name="Invoiced" strokeDasharray="4 2" />
|
||||||
</div>
|
</LineChart>
|
||||||
<span className="text-sm font-bold text-gray-700 w-6 text-right">{a.count}</span>
|
</ResponsiveContainer>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<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}>{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 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>
|
||||||
</div>
|
</div>
|
||||||
))}
|
)}
|
||||||
</div>
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
{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">{a.area}</span>
|
||||||
|
<div className="flex items-center gap-2"><div className="w-20 bg-gray-100 rounded-full h-2"><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 w-6 text-right">{a.count}</span></div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Collections Tab */}
|
||||||
|
{tab === "collections" && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-800">Payment Collections</h2>
|
||||||
|
<Button size="sm" variant="outline" onClick={() => downloadCSV(payments.map(p => ({
|
||||||
|
Date: p.paymentDate ?? p.createdAt,
|
||||||
|
Client: p.client ? `${p.client.firstName} ${p.client.lastName}` : "",
|
||||||
|
Amount: p.amount, Channel: p.channel, Reference: p.referenceNumber ?? "", Notes: p.notes ?? "",
|
||||||
|
})), `collections-${from}-${to}.csv`)}>
|
||||||
|
<Download size={14} className="mr-1" /> Export CSV
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow><Th>Date</Th><Th>Client</Th><Th>Amount</Th><Th>Channel</Th><Th>Reference</Th><Th>Notes</Th></TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{payments.length === 0 ? <EmptyState message="No payments found" /> :
|
||||||
|
payments.map((p: any) => (
|
||||||
|
<TableRow key={p.id}>
|
||||||
|
<Td className="text-xs text-gray-500">{formatDate(p.paymentDate ?? p.createdAt)}</Td>
|
||||||
|
<Td className="font-medium">{p.client ? `${p.client.firstName} ${p.client.lastName}` : "—"}</Td>
|
||||||
|
<Td className="text-green-700 font-medium">{formatCurrency(Number(p.amount))}</Td>
|
||||||
|
<Td><Badge variant="muted">{p.channel}</Badge></Td>
|
||||||
|
<Td className="text-xs text-gray-400">{p.referenceNumber ?? "—"}</Td>
|
||||||
|
<Td className="text-xs text-gray-400 max-w-[120px] truncate">{p.notes ?? "—"}</Td>
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
|
{/* Tickets Tab */}
|
||||||
|
{tab === "tickets" && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{ticketsData && (
|
||||||
|
<>
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<Card><CardContent className="pt-5 text-center"><p className="text-3xl font-bold text-yellow-600">{ticketsData.open}</p><p className="text-sm text-gray-500 mt-1">Open</p></CardContent></Card>
|
||||||
|
<Card><CardContent className="pt-5 text-center"><p className="text-3xl font-bold text-green-600">{ticketsData.resolved}</p><p className="text-sm text-gray-500 mt-1">Resolved</p></CardContent></Card>
|
||||||
|
<Card><CardContent className="pt-5 text-center"><p className="text-3xl font-bold text-blue-600">{ticketsData.total}</p><p className="text-sm text-gray-500 mt-1">Total</p></CardContent></Card>
|
||||||
|
</div>
|
||||||
|
<Card>
|
||||||
|
<CardHeader><CardTitle>Recent Tickets</CardTitle></CardHeader>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow><Th>Subject</Th><Th>Client</Th><Th>Type</Th><Th>Priority</Th><Th>Status</Th><Th>Created</Th></TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{ticketsData.list.length === 0 ? <EmptyState message="No tickets found" /> :
|
||||||
|
ticketsData.list.map((t: any) => (
|
||||||
|
<TableRow key={t.id}>
|
||||||
|
<Td className="font-medium max-w-[180px] truncate">{t.subject}</Td>
|
||||||
|
<Td>{t.client ? `${t.client.firstName} ${t.client.lastName}` : "—"}</Td>
|
||||||
|
<Td><Badge variant="muted">{t.type}</Badge></Td>
|
||||||
|
<Td><Badge variant={t.priority === "HIGH" ? "warning" : "muted"}>{t.priority}</Badge></Td>
|
||||||
|
<Td><Badge variant={t.status === "RESOLVED" ? "success" : t.status === "OPEN" ? "warning" : "muted"}>{t.status}</Badge></Td>
|
||||||
|
<Td className="text-xs text-gray-400">{formatDate(t.createdAt)}</Td>
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user