feat: full CRUD on all pages — clients (add+navigate), client detail (payments tab+pay), invoices (detail+pay+void), payments (detail view), remittances (submit flow), tickets (detail+comments+create), leads (add+status update)

2026-03-25 21:40:30 +08:00
parent 05ed524e47
commit 8ae1e14aee
7 changed files with 1301 additions and 870 deletions
--- a/app/(app)/invoices/page.tsx
+++ b/app/(app)/invoices/page.tsx
@@ -1,170 +1,209 @@
-'use client';
+"use client";

-import { useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { api } from '@/lib/api';
-import { Card, CardContent } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Search, ChevronRight } from 'lucide-react';
-import { format } from 'date-fns';
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { RefreshCw, FileText } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { Table, TableHead, TableBody, TableRow, Th, Td, EmptyState } from "@/components/ui/Table";
+import { Badge } from "@/components/ui/Badge";
+import { Button } from "@/components/ui/Button";
+import { Input } from "@/components/ui/Input";
+import { Modal } from "@/components/ui/Modal";
+import { formatDate, formatCurrency } from "@/lib/utils";
+import api from "@/lib/api";
+import { toast } from "sonner";

 interface Invoice {
-  id: string;
-  invoiceNumber: string;
-  dueDate: string;
-  subtotal: string;
-  lateFee: string;
-  total: string;
-  amountPaid: string;
-  balance: string;
-  status: string;
+  id: string; invoiceNumber: string; clientId: string;
  client?: { firstName: string; lastName: string; accountNumber: string };
+  subtotal: string; lateFee: string; total: string;
+  amountPaid: string; balance: string;
+  status: string; dueDate: string; periodStart?: string; periodEnd?: string; notes?: string;
+  createdAt: string;
 }
+interface InvoicesResponse { data: Invoice[]; total: number; page: number; limit: number; }

-interface InvoicesResponse {
-  data: Invoice[];
-  total: number;
-}
-
-const statusColors: Record<string, string> = {
-  SENT: 'bg-blue-100 text-blue-700',
-  PARTIAL: 'bg-yellow-100 text-yellow-700',
-  PAID: 'bg-green-100 text-green-700',
-  OVERDUE: 'bg-red-100 text-red-700',
-  DRAFT: 'bg-gray-100 text-gray-500',
-  VOID: 'bg-gray-100 text-gray-400',
+const statusVariant: Record<string, "success" | "warning" | "danger" | "muted"> = {
+  PAID: "success", PARTIAL: "warning", OVERDUE: "danger",
+  SENT: "muted", DRAFT: "muted", VOID: "muted",
 };

-const peso = (v: string | number) =>
-  '₱' + Number(v ?? 0).toLocaleString('en-PH', { minimumFractionDigits: 2 });
+const statusFilters = ["", "SENT", "PARTIAL", "OVERDUE", "PAID", "VOID"];

 export default function InvoicesPage() {
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState('');
+  const qc = useQueryClient();
+  const [search, setSearch] = useState("");
+  const [statusFilter, setStatusFilter] = useState("");
  const [page, setPage] = useState(1);
+  const [selected, setSelected] = useState<Invoice | null>(null);
+  const [payForm, setPayForm] = useState({ amount: "", channel: "CASH", referenceNumber: "", notes: "" });

-  const { data, isLoading } = useQuery<InvoicesResponse>({
-    queryKey: ['invoices', search, statusFilter, page],
+  const { data, isLoading, refetch } = useQuery<InvoicesResponse>({
+    queryKey: ["invoices", search, statusFilter, page],
    queryFn: async () => {
-      const params = new URLSearchParams({ page: String(page), limit: '20' });
-      if (search) params.set('search', search);
-      if (statusFilter) params.set('status', statusFilter);
-      const res = await api.get(`/api/v1/invoices?${params}`);
+      const params = new URLSearchParams({ page: String(page), limit: "20" });
+      if (search) params.set("search", search);
+      if (statusFilter) params.set("status", statusFilter);
+      const res = await api.get<InvoicesResponse>(`/api/v1/invoices?${params}`);
      return res.data;
    },
-    staleTime: 30_000,
+  });
+
+  const recordPayment = useMutation({
+    mutationFn: async () => {
+      await api.post("/api/v1/payments", {
+        clientId: selected!.clientId, invoiceId: selected!.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!");
+      setSelected(null);
+      setPayForm({ amount: "", channel: "CASH", referenceNumber: "", notes: "" });
+      qc.invalidateQueries({ queryKey: ["invoices"] });
+      refetch();
+    },
+    onError: (e: any) => toast.error(e.response?.data?.message ?? "Payment failed"),
+  });
+
+  const voidInvoice = useMutation({
+    mutationFn: async (id: string) => { await api.patch(`/api/v1/invoices/${id}/void`); },
+    onSuccess: () => { toast.success("Invoice voided"); setSelected(null); qc.invalidateQueries({ queryKey: ["invoices"] }); },
+    onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to void"),
  });

  const invoices = data?.data ?? [];
  const total = data?.total ?? 0;

  return (
-    <div>
-      <div className="flex items-center justify-between mb-6">
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
        <div>
-          <h1 className="text-2xl font-bold text-slate-800">Invoices</h1>
-          <p className="text-slate-500 text-sm mt-1">{total} invoices</p>
+          <h1 className="text-2xl font-bold text-gray-900">Invoices</h1>
+          <p className="text-sm text-gray-500 mt-1">{total} total invoices</p>
        </div>
+        <Button onClick={() => refetch()} variant="outline" size="sm"><RefreshCw size={14} className="mr-1" />Refresh</Button>
      </div>

-      <div className="flex gap-3 mb-4">
-        <div className="relative flex-1">
-          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
-          <Input
-            placeholder="Search by invoice # or client..."
-            className="pl-9"
-            value={search}
-            onChange={(e) => { setSearch(e.target.value); setPage(1); }}
-          />
-        </div>
-        <select
-          className="border rounded-md px-3 py-2 text-sm text-slate-700 bg-white"
-          value={statusFilter}
-          onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}
-        >
-          <option value="">All Statuses</option>
-          {['SENT', 'PARTIAL', 'PAID', 'OVERDUE', 'DRAFT', 'VOID'].map((s) => (
-            <option key={s} value={s}>{s}</option>
-          ))}
-        </select>
-      </div>
-
-      <Card className="border shadow-sm">
-        <CardContent className="p-0">
-          <div className="overflow-x-auto">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b bg-slate-50">
-                  <th className="text-left px-4 py-3 font-medium text-slate-500">Invoice #</th>
-                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Client</th>
-                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden lg:table-cell">Due Date</th>
-                  <th className="text-right px-4 py-3 font-medium text-slate-500">Total</th>
-                  <th className="text-right px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Balance</th>
-                  <th className="text-left px-4 py-3 font-medium text-slate-500">Status</th>
-                  <th className="px-4 py-3"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {isLoading
-                  ? Array.from({ length: 8 }).map((_, i) => (
-                      <tr key={i} className="border-b">
-                        {Array.from({ length: 7 }).map((_, j) => (
-                          <td key={j} className="px-4 py-3"><Skeleton className="h-4 w-20" /></td>
-                        ))}
-                      </tr>
-                    ))
-                  : invoices.map((inv) => (
-                      <tr key={inv.id} className="border-b hover:bg-slate-50 cursor-pointer transition-colors">
-                        <td className="px-4 py-3 font-mono text-xs text-slate-600">{inv.invoiceNumber}</td>
-                        <td className="px-4 py-3 text-slate-700 hidden md:table-cell">
-                          {inv.client
-                            ? `${inv.client.firstName} ${inv.client.lastName}`
-                            : '—'}
-                          <div className="text-xs text-slate-400">{inv.client?.accountNumber}</div>
-                        </td>
-                        <td className="px-4 py-3 text-slate-600 hidden lg:table-cell">
-                          {inv.dueDate ? format(new Date(inv.dueDate), 'MMM d, yyyy') : '—'}
-                        </td>
-                        <td className="px-4 py-3 text-right font-medium text-slate-800">{peso(inv.total)}</td>
-                        <td className="px-4 py-3 text-right text-slate-600 hidden md:table-cell">
-                          {Number(inv.balance) > 0 ? (
-                            <span className="text-red-600 font-medium">{peso(inv.balance)}</span>
-                          ) : (
-                            <span className="text-green-600">Paid</span>
-                          )}
-                        </td>
-                        <td className="px-4 py-3">
-                          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[inv.status] ?? 'bg-gray-100 text-gray-500'}`}>
-                            {inv.status}
-                          </span>
-                        </td>
-                        <td className="px-4 py-3 text-slate-400"><ChevronRight size={16} /></td>
-                      </tr>
-                    ))}
-              </tbody>
-            </table>
+      <Card>
+        <CardHeader>
+          <div className="flex flex-wrap gap-3 items-center">
+            <input className="flex-1 min-w-[200px] border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="Search by client or invoice #..."
+              value={search} onChange={e => { setSearch(e.target.value); setPage(1); }} />
+            <div className="flex gap-2 flex-wrap">
+              {statusFilters.map(s => (
+                <button key={s} onClick={() => { setStatusFilter(s); setPage(1); }}
+                  className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${statusFilter === s ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`}>
+                  {s || "All"}
+                </button>
+              ))}
+            </div>
          </div>
-
-          {!isLoading && invoices.length === 0 && (
-            <div className="text-center py-12 text-slate-400">No invoices found</div>
-          )}
-
+        </CardHeader>
+        <CardContent className="p-0">
+          <Table>
+            <TableHead>
+              <TableRow>
+                <Th>Invoice #</Th><Th>Client</Th><Th>Total</Th><Th>Paid</Th><Th>Balance</Th><Th>Due Date</Th><Th>Status</Th><Th></Th>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {isLoading ? (
+                Array.from({ length: 8 }).map((_, i) => (
+                  <TableRow key={i}><Td colSpan={8}><div className="h-4 bg-gray-100 rounded animate-pulse" /></Td></TableRow>
+                ))
+              ) : invoices.length === 0 ? (
+                <EmptyState colSpan={8} message="No invoices found" icon={<FileText size={24} />} />
+              ) : invoices.map(inv => (
+                <TableRow key={inv.id} onClick={() => setSelected(inv)} className="cursor-pointer hover:bg-blue-50 transition-colors">
+                  <Td className="font-mono text-xs">{inv.invoiceNumber}</Td>
+                  <Td className="font-medium">
+                    {inv.client ? `${inv.client.firstName} ${inv.client.lastName}` : "—"}
+                    <div className="text-xs text-gray-400">{inv.client?.accountNumber}</div>
+                  </Td>
+                  <Td>{formatCurrency(Number(inv.total))}</Td>
+                  <Td className="text-green-700">{formatCurrency(Number(inv.amountPaid))}</Td>
+                  <Td className={Number(inv.balance) > 0 ? "text-red-600 font-medium" : "text-gray-400"}>
+                    {formatCurrency(Number(inv.balance))}
+                  </Td>
+                  <Td className={new Date(inv.dueDate) < new Date() && inv.status !== "PAID" ? "text-red-500" : ""}>
+                    {formatDate(inv.dueDate)}
+                  </Td>
+                  <Td><Badge variant={statusVariant[inv.status] ?? "muted"}>{inv.status}</Badge></Td>
+                  <Td className="text-gray-400 text-xs">View →</Td>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
          {total > 20 && (
-            <div className="flex items-center justify-between px-4 py-3 border-t">
-              <p className="text-sm text-slate-500">
-                Showing {(page - 1) * 20 + 1}–{Math.min(page * 20, total)} of {total}
-              </p>
+            <div className="flex items-center justify-between px-4 py-3 border-t text-sm text-gray-500">
+              <span>Showing {(page - 1) * 20 + 1}–{Math.min(page * 20, total)} of {total}</span>
              <div className="flex gap-2">
-                <button disabled={page === 1} onClick={() => setPage(p => p - 1)}
-                  className="px-3 py-1 text-sm border rounded-md disabled:opacity-40">Prev</button>
-                <button disabled={page * 20 >= total} onClick={() => setPage(p => p + 1)}
-                  className="px-3 py-1 text-sm border rounded-md disabled:opacity-40">Next</button>
+                <button disabled={page === 1} onClick={() => setPage(p => p - 1)} className="px-3 py-1 border rounded-md disabled:opacity-40">Prev</button>
+                <button disabled={page * 20 >= total} onClick={() => setPage(p => p + 1)} className="px-3 py-1 border rounded-md disabled:opacity-40">Next</button>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
+
+      {/* Invoice Detail Modal */}
+      <Modal isOpen={!!selected} onClose={() => setSelected(null)} title={`Invoice ${selected?.invoiceNumber ?? ""}`} className="max-w-lg">
+        {selected && (
+          <div className="space-y-4">
+            <div className="bg-gray-50 rounded-lg p-4 space-y-2 text-sm">
+              <div className="flex justify-between"><span className="text-gray-500">Client</span>
+                <span className="font-medium">{selected.client ? `${selected.client.firstName} ${selected.client.lastName}` : "—"}</span></div>
+              <div className="flex justify-between"><span className="text-gray-500">Period</span>
+                <span>{selected.periodStart ? `${formatDate(selected.periodStart)} – ${formatDate(selected.periodEnd!)}` : "—"}</span></div>
+              <div className="flex justify-between"><span className="text-gray-500">Due Date</span>
+                <span className={new Date(selected.dueDate) < new Date() && selected.status !== "PAID" ? "text-red-500 font-medium" : ""}>
+                  {formatDate(selected.dueDate)}</span></div>
+              <hr />
+              <div className="flex justify-between"><span className="text-gray-500">Subtotal</span><span>{formatCurrency(Number(selected.subtotal))}</span></div>
+              <div className="flex justify-between"><span className="text-gray-500">Late Fee</span><span>{formatCurrency(Number(selected.lateFee))}</span></div>
+              <div className="flex justify-between font-semibold text-base"><span>Total</span><span>{formatCurrency(Number(selected.total))}</span></div>
+              <div className="flex justify-between text-green-700"><span className="text-gray-500">Amount Paid</span><span>{formatCurrency(Number(selected.amountPaid))}</span></div>
+              <div className={`flex justify-between font-bold ${Number(selected.balance) > 0 ? "text-red-600" : "text-green-600"}`}>
+                <span>Balance</span><span>{formatCurrency(Number(selected.balance))}</span></div>
+              <div className="flex justify-between"><span className="text-gray-500">Status</span>
+                <Badge variant={statusVariant[selected.status] ?? "muted"}>{selected.status}</Badge></div>
+            </div>
+
+            {/* Pay form (only for unpaid) */}
+            {["SENT", "PARTIAL", "OVERDUE"].includes(selected.status) && (
+              <div className="border rounded-lg p-4 space-y-3 bg-blue-50">
+                <p className="text-sm font-semibold text-blue-800">Record Payment</p>
+                <Input label="Amount" type="number" value={payForm.amount}
+                  onChange={e => setPayForm(f => ({ ...f, amount: e.target.value }))}
+                  hint={`Balance due: ${formatCurrency(Number(selected.balance))}`} />
+                <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 }))} />
+                <Button className="w-full" onClick={() => recordPayment.mutate()} isLoading={recordPayment.isPending}
+                  disabled={!payForm.amount}>Record Payment</Button>
+              </div>
+            )}
+
+            <div className="flex justify-between pt-1">
+              {selected.status !== "VOID" && selected.status !== "PAID" && (
+                <Button variant="danger" size="sm" onClick={() => voidInvoice.mutate(selected.id)} isLoading={voidInvoice.isPending}>Void Invoice</Button>
+              )}
+              <Button variant="outline" size="sm" onClick={() => setSelected(null)} className="ml-auto">Close</Button>
+            </div>
+          </div>
+        )}
+      </Modal>
    </div>
  );
 }