318 lines
15 KiB
TypeScript
318 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import { ArrowLeft, Wifi, FileText, Ticket, CreditCard, RefreshCw } from "lucide-react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
|
import { Badge } from "@/components/ui/Badge";
|
|
import { Button } from "@/components/ui/Button";
|
|
import { Modal } from "@/components/ui/Modal";
|
|
import { Input } from "@/components/ui/Input";
|
|
import { Table, TableHead, TableBody, TableRow, Th, Td, EmptyState } from "@/components/ui/Table";
|
|
import { formatDate, formatCurrency } from "@/lib/utils";
|
|
import api from "@/lib/api";
|
|
import { toast } from "sonner";
|
|
import type { Client, Subscription, Invoice, Ticket as TicketType, Payment, LegacyPaginatedResponse } from "@/types";
|
|
|
|
type Tab = "profile" | "subscriptions" | "invoices" | "payments" | "tickets";
|
|
|
|
const statusColor: Record<string, "success" | "warning" | "danger" | "muted"> = {
|
|
ACTIVE: "success", active: "success",
|
|
SUSPENDED: "warning", suspended: "warning",
|
|
CANCELLED: "danger", cancelled: "danger",
|
|
DISCONNECTED: "danger",
|
|
PENDING: "muted", pending: "muted",
|
|
};
|
|
|
|
const invColor: Record<string, "success" | "warning" | "danger" | "muted"> = {
|
|
PAID: "success", paid: "success",
|
|
PARTIAL: "warning", partial: "warning",
|
|
OVERDUE: "danger", overdue: "danger",
|
|
SENT: "muted", DRAFT: "muted", VOID: "muted",
|
|
};
|
|
|
|
const channelColors: Record<string, string> = {
|
|
CASH: "bg-green-100 text-green-700",
|
|
GCASH: "bg-blue-100 text-blue-700",
|
|
MAYA: "bg-purple-100 text-purple-700",
|
|
BANK_TRANSFER: "bg-yellow-100 text-yellow-700",
|
|
CHECK: "bg-gray-100 text-gray-700",
|
|
};
|
|
|
|
export default function ClientDetailPage() {
|
|
const { id } = useParams<{ id: string }>();
|
|
const router = useRouter();
|
|
const qc = useQueryClient();
|
|
const [activeTab, setActiveTab] = useState<Tab>("profile");
|
|
const [payInvoice, setPayInvoice] = useState<Invoice | null>(null);
|
|
const [payForm, setPayForm] = useState({ amount: "", channel: "CASH", referenceNumber: "", notes: "" });
|
|
|
|
const { data: client, isLoading, refetch: refetchClient } = useQuery<Client>({
|
|
queryKey: ["client", id],
|
|
queryFn: async () => { const r = await api.get<Client>(`/api/v1/clients/${id}`); return r.data; },
|
|
});
|
|
|
|
const { data: subscriptions, isError: subsError } = useQuery<Subscription[]>({
|
|
queryKey: ["client-subscriptions", id],
|
|
queryFn: async () => { const r = await api.get<{ data: Subscription[] }>(`/api/v1/clients/${id}/subscriptions`); return (r.data as any).data ?? []; },
|
|
enabled: activeTab === "subscriptions",
|
|
});
|
|
|
|
const { data: invoicesData, refetch: refetchInvoices } = useQuery<LegacyPaginatedResponse<Invoice>>({
|
|
queryKey: ["client-invoices", id],
|
|
queryFn: async () => { const r = await api.get<LegacyPaginatedResponse<Invoice>>(`/api/v1/invoices?clientId=${id}&page=1&limit=30`); return r.data; },
|
|
enabled: activeTab === "invoices",
|
|
});
|
|
|
|
const { data: paymentsData } = useQuery<LegacyPaginatedResponse<Payment>>({
|
|
queryKey: ["client-payments", id],
|
|
queryFn: async () => {
|
|
const r = await api.get<LegacyPaginatedResponse<Payment>>(`/api/v1/payments?clientId=${id}&page=1&limit=30`);
|
|
return r.data;
|
|
},
|
|
enabled: activeTab === "payments",
|
|
});
|
|
|
|
const { data: ticketsData } = useQuery<LegacyPaginatedResponse<TicketType>>({
|
|
queryKey: ["client-tickets", id],
|
|
queryFn: async () => { const r = await api.get<LegacyPaginatedResponse<TicketType>>(`/api/v1/tickets?clientId=${id}&page=1&limit=20`); return r.data; },
|
|
enabled: activeTab === "tickets",
|
|
});
|
|
|
|
const recordPayment = useMutation({
|
|
mutationFn: async () => {
|
|
await api.post("/api/v1/payments", {
|
|
clientId: id, invoiceId: payInvoice?.id,
|
|
amount: Number(payForm.amount), channel: payForm.channel,
|
|
referenceNumber: payForm.referenceNumber || undefined,
|
|
notes: payForm.notes || undefined,
|
|
paymentDate: new Date().toISOString(),
|
|
});
|
|
},
|
|
onSuccess: () => {
|
|
toast.success("Payment recorded!");
|
|
setPayInvoice(null);
|
|
setPayForm({ amount: "", channel: "CASH", referenceNumber: "", notes: "" });
|
|
qc.invalidateQueries({ queryKey: ["client-invoices", id] });
|
|
qc.invalidateQueries({ queryKey: ["client-payments", id] });
|
|
refetchInvoices();
|
|
},
|
|
onError: (e: any) => toast.error(e.response?.data?.message ?? "Payment failed"),
|
|
});
|
|
|
|
const tabs = [
|
|
{ key: "profile" as Tab, label: "Profile" },
|
|
{ key: "subscriptions" as Tab, label: "Subscriptions" },
|
|
{ key: "invoices" as Tab, label: "Invoices" },
|
|
{ key: "payments" as Tab, label: "Payments" },
|
|
{ key: "tickets" as Tab, label: "Tickets" },
|
|
];
|
|
|
|
if (isLoading) return (
|
|
<div className="space-y-4">
|
|
<div className="h-8 w-48 animate-pulse bg-gray-200 rounded" />
|
|
<Card><CardContent className="py-10"><div className="h-32 animate-pulse bg-gray-100 rounded-lg" /></CardContent></Card>
|
|
</div>
|
|
);
|
|
|
|
if (!client) return (
|
|
<div className="text-center py-20 text-gray-400">
|
|
<p>Client not found</p>
|
|
<Button variant="secondary" className="mt-4" onClick={() => router.push("/clients")}>Back to Clients</Button>
|
|
</div>
|
|
);
|
|
|
|
const sub = client.subscriptions?.[0];
|
|
const clientStatus = sub?.status ?? (client.isActive ? "ACTIVE" : "INACTIVE");
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3">
|
|
<Button variant="ghost" size="sm" onClick={() => router.push("/clients")}>
|
|
<ArrowLeft className="h-4 w-4 mr-1" /> Back
|
|
</Button>
|
|
<div className="flex-1">
|
|
<h1 className="text-2xl font-bold text-gray-900">{client.firstName} {client.lastName}</h1>
|
|
<p className="text-sm text-gray-500">{client.accountNumber} · {client.area?.name ?? "No area"}</p>
|
|
</div>
|
|
<Badge variant={statusColor[clientStatus] ?? "muted"}>{clientStatus}</Badge>
|
|
<Button size="sm" variant="outline" onClick={() => refetchClient()}><RefreshCw className="h-4 w-4" /></Button>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex border-b border-gray-200 overflow-x-auto">
|
|
{tabs.map(tab => (
|
|
<button key={tab.key} onClick={() => setActiveTab(tab.key)}
|
|
className={`px-4 py-2.5 text-sm font-medium border-b-2 whitespace-nowrap transition-colors ${
|
|
activeTab === tab.key ? "border-blue-600 text-blue-600" : "border-transparent text-gray-500 hover:text-gray-700"
|
|
}`}>{tab.label}</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Profile */}
|
|
{activeTab === "profile" && (
|
|
<Card>
|
|
<CardHeader><CardTitle>Client Profile</CardTitle></CardHeader>
|
|
<CardContent>
|
|
<dl className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{[
|
|
{ label: "Account Number", value: client.accountNumber },
|
|
{ label: "Full Name", value: `${client.firstName} ${client.lastName}` },
|
|
{ label: "Email", value: client.email || "—" },
|
|
{ label: "Phone", value: client.phone },
|
|
{ label: "Address", value: client.address || "—" },
|
|
{ label: "Area", value: client.area?.name || "—" },
|
|
{ label: "Status", value: client.isActive ? "Active" : "Inactive" },
|
|
{ label: "Joined", value: formatDate(client.createdAt) },
|
|
].map(({ label, value }) => (
|
|
<div key={label}>
|
|
<dt className="text-xs font-medium text-gray-400 uppercase tracking-wide">{label}</dt>
|
|
<dd className="mt-0.5 text-sm text-gray-900">{value}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Subscriptions */}
|
|
{activeTab === "subscriptions" && (
|
|
<Card>
|
|
<CardHeader><CardTitle>Subscriptions</CardTitle></CardHeader>
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHead><TableRow><Th>Plan</Th><Th>Type</Th><Th>Status</Th><Th>Start Date</Th><Th>Monthly Rate</Th></TableRow></TableHead>
|
|
<TableBody>
|
|
{!subscriptions || subscriptions.length === 0 ? <EmptyState message="No subscriptions" /> :
|
|
subscriptions.map(sub => (
|
|
<TableRow key={sub.id}>
|
|
<Td className="font-medium">{sub.plan?.name ?? "—"}</Td>
|
|
<Td><Badge variant="muted">{sub.type ?? sub.plan?.type ?? "—"}</Badge></Td>
|
|
<Td><Badge variant={statusColor[sub.status] ?? "muted"}>{sub.status}</Badge></Td>
|
|
<Td>{formatDate(sub.startDate)}</Td>
|
|
<Td>{formatCurrency(Number(sub.monthlyPrice ?? sub.plan?.monthlyPrice ?? 0))}</Td>
|
|
</TableRow>
|
|
))
|
|
}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Invoices */}
|
|
{activeTab === "invoices" && (
|
|
<Card>
|
|
<CardHeader><CardTitle>Invoices</CardTitle></CardHeader>
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHead><TableRow><Th>Invoice #</Th><Th>Total</Th><Th>Balance</Th><Th>Due Date</Th><Th>Status</Th><Th></Th></TableRow></TableHead>
|
|
<TableBody>
|
|
{!invoicesData?.data || invoicesData.data.length === 0 ? <EmptyState message="No invoices" /> :
|
|
invoicesData.data.map((inv: any) => (
|
|
<TableRow key={inv.id}>
|
|
<Td className="font-mono text-xs">{inv.invoiceNumber ?? inv.id.slice(0, 8)}</Td>
|
|
<Td>{formatCurrency(Number(inv.total ?? inv.amount ?? 0))}</Td>
|
|
<Td className={Number(inv.balance) > 0 ? "text-red-600 font-medium" : "text-gray-500"}>
|
|
{formatCurrency(Number(inv.balance ?? 0))}
|
|
</Td>
|
|
<Td>{inv.dueDate ? formatDate(inv.dueDate) : "—"}</Td>
|
|
<Td><Badge variant={invColor[inv.status] ?? "muted"}>{inv.status}</Badge></Td>
|
|
<Td>
|
|
{["SENT", "PARTIAL", "OVERDUE"].includes(inv.status) && (
|
|
<Button size="sm" onClick={() => {
|
|
setPayInvoice(inv);
|
|
setPayForm(f => ({ ...f, amount: String(Number(inv.balance ?? inv.total ?? 0)) }));
|
|
}}>Pay</Button>
|
|
)}
|
|
</Td>
|
|
</TableRow>
|
|
))
|
|
}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Payments */}
|
|
{activeTab === "payments" && (
|
|
<Card>
|
|
<CardHeader><CardTitle>Payment History</CardTitle></CardHeader>
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHead><TableRow><Th>Date</Th><Th>Amount</Th><Th>Channel</Th><Th>Reference</Th><Th>Notes</Th></TableRow></TableHead>
|
|
<TableBody>
|
|
{!paymentsData?.data || paymentsData.data.length === 0 ? <EmptyState message="No payments yet" /> :
|
|
paymentsData.data.map((p: any) => (
|
|
<TableRow key={p.id}>
|
|
<Td className="text-sm">{p.paymentDate ? formatDate(p.paymentDate) : formatDate(p.createdAt)}</Td>
|
|
<Td className="font-medium text-green-700">{formatCurrency(Number(p.amount))}</Td>
|
|
<Td><span className={`px-2 py-0.5 rounded-full text-xs font-medium ${channelColors[p.channel] ?? "bg-gray-100 text-gray-600"}`}>{p.channel}</span></Td>
|
|
<Td className="text-xs text-gray-500">{p.referenceNumber ?? p.orNumber ?? "—"}</Td>
|
|
<Td className="text-xs text-gray-500">{p.notes ?? "—"}</Td>
|
|
</TableRow>
|
|
))
|
|
}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Tickets */}
|
|
{activeTab === "tickets" && (
|
|
<Card>
|
|
<CardHeader><CardTitle>Tickets</CardTitle></CardHeader>
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHead><TableRow><Th>Subject</Th><Th>Type</Th><Th>Priority</Th><Th>Status</Th><Th>Created</Th></TableRow></TableHead>
|
|
<TableBody>
|
|
{!ticketsData?.data || ticketsData.data.length === 0 ? <EmptyState message="No tickets" /> :
|
|
ticketsData.data.map(t => (
|
|
<TableRow key={t.id}>
|
|
<Td className="font-medium">{t.subject}</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>
|
|
)}
|
|
|
|
{/* Pay Invoice Modal */}
|
|
<Modal isOpen={!!payInvoice} onClose={() => setPayInvoice(null)} title={`Record Payment — ${payInvoice?.invoiceNumber ?? ""}`}>
|
|
{payInvoice && (
|
|
<div className="space-y-4">
|
|
<div className="bg-gray-50 rounded-lg p-3 text-sm space-y-1">
|
|
<div className="flex justify-between"><span className="text-gray-500">Invoice Total</span><span className="font-medium">{formatCurrency(Number((payInvoice as any).total ?? payInvoice.amount))}</span></div>
|
|
<div className="flex justify-between"><span className="text-gray-500">Amount Paid</span><span>{formatCurrency(Number((payInvoice as any).amountPaid ?? 0))}</span></div>
|
|
<div className="flex justify-between font-medium text-red-600"><span>Balance Due</span><span>{formatCurrency(Number((payInvoice as any).balance ?? payInvoice.amount))}</span></div>
|
|
</div>
|
|
<Input label="Amount" type="number" value={payForm.amount} onChange={e => setPayForm(f => ({ ...f, amount: e.target.value }))} />
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-sm font-medium text-gray-700">Payment Method</label>
|
|
<select className="border rounded-lg px-3 py-2 text-sm" value={payForm.channel} onChange={e => setPayForm(f => ({ ...f, channel: e.target.value }))}>
|
|
{["CASH","GCASH","MAYA","BANK_TRANSFER","CHECK"].map(c => <option key={c} value={c}>{c}</option>)}
|
|
</select>
|
|
</div>
|
|
<Input label="Reference # (optional)" value={payForm.referenceNumber} onChange={e => setPayForm(f => ({ ...f, referenceNumber: e.target.value }))} />
|
|
<Input label="Notes (optional)" value={payForm.notes} onChange={e => setPayForm(f => ({ ...f, notes: e.target.value }))} />
|
|
<div className="flex justify-end gap-2 pt-1">
|
|
<Button variant="outline" onClick={() => setPayInvoice(null)}>Cancel</Button>
|
|
<Button onClick={() => recordPayment.mutate()} isLoading={recordPayment.isPending} disabled={!payForm.amount}>Record Payment</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|