kibin/fiberops-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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)

Browse Source
This commit is contained in:
Forge
2026-03-25 21:40:30 +08:00
parent 05ed524e47
commit 8ae1e14aee
7 changed files with 1301 additions and 870 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
app/(app)/payments/page.tsx
View File

@@ -1,136 +1,175 @@
'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 } from 'lucide-react';
import { format } from 'date-fns';
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { RefreshCw, CreditCard } from "lucide-react";
import { Card, CardContent, CardHeader } 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 { Modal } from "@/components/ui/Modal";
import { formatDate, formatCurrency } from "@/lib/utils";
import api from "@/lib/api";
interface Payment {
id: string;
amount: string;
channel: string;
paymentDate: string;
notes: string | null;
id: string; clientId: string;
client?: { firstName: string; lastName: string; accountNumber: string };
invoice?: { invoiceNumber: string; total: string };
invoiceId?: string;
amount: string; channel: string;
referenceNumber?: string; orNumber?: string; notes?: string;
paymentDate?: string; createdAt: string;
recordedBy?: { firstName: string; lastName: string };
invoice?: { invoiceNumber: string };
}
interface PaymentsResponse { data: Payment[]; total: number; page: number; limit: number; }
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-orange-100 text-orange-700',
CHECK: 'bg-gray-100 text-gray-700',
const channelVariant: Record<string, "success" | "warning" | "muted" | "default"> = {
CASH: "success", GCASH: "default", MAYA: "default", BANK_TRANSFER: "warning", CHECK: "muted",
};
const peso = (v: string | number) =>
'₱' + Number(v ?? 0).toLocaleString('en-PH', { minimumFractionDigits: 2 });
const channelFilters = ["", "CASH", "GCASH", "MAYA", "BANK_TRANSFER", "CHECK"];
export default function PaymentsPage() {
const [search, setSearch] = useState('');
const [channelFilter, setChannelFilter] = useState('');
const [search, setSearch] = useState("");
const [channelFilter, setChannelFilter] = useState("");
const [page, setPage] = useState(1);
const [selected, setSelected] = useState<Payment | null>(null);
const { data, isLoading } = useQuery<{ data: Payment[]; total: number }>({
queryKey: ['payments', search, channelFilter, page],
const { data, isLoading, refetch } = useQuery<PaymentsResponse>({
queryKey: ["payments", search, channelFilter, page],
queryFn: async () => {
const params = new URLSearchParams({ page: String(page), limit: '20' });
if (channelFilter) params.set('channel', channelFilter);
const res = await api.get(`/api/v1/payments?${params}`);
const params = new URLSearchParams({ page: String(page), limit: "20" });
if (search) params.set("search", search);
if (channelFilter) params.set("channel", channelFilter);
const res = await api.get<PaymentsResponse>(`/api/v1/payments?${params}`);
return res.data;
},
staleTime: 30_000,
});
const payments = 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">Payments</h1>
<p className="text-slate-500 text-sm mt-1">{total} payments</p>
<h1 className="text-2xl font-bold text-gray-900">Payments</h1>
<p className="text-sm text-gray-500 mt-1">{total} total payments</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..." 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={channelFilter}
onChange={(e) => { setChannelFilter(e.target.value); setPage(1); }}
>
<option value="">All Channels</option>
{['CASH', 'GCASH', 'MAYA', 'BANK_TRANSFER', 'CHECK'].map((c) => (
<option key={c} value={c}>{c.replace('_', ' ')}</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">Date</th>
<th className="text-left px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Client</th>
<th className="text-right px-4 py-3 font-medium text-slate-500">Amount</th>
<th className="text-left px-4 py-3 font-medium text-slate-500">Channel</th>
<th className="text-left px-4 py-3 font-medium text-slate-500 hidden lg:table-cell">Recorded By</th>
<th className="text-left px-4 py-3 font-medium text-slate-500 hidden xl:table-cell">Invoice</th>
</tr>
</thead>
<tbody>
{isLoading
? Array.from({ length: 8 }).map((_, i) => (
<tr key={i} className="border-b">
{Array.from({ length: 6 }).map((_, j) => (
<td key={j} className="px-4 py-3"><Skeleton className="h-4 w-20" /></td>
))}
</tr>
))
: payments.map((p) => (
<tr key={p.id} className="border-b hover:bg-slate-50 transition-colors">
<td className="px-4 py-3 text-slate-600">
{p.paymentDate ? format(new Date(p.paymentDate), 'MMM d, yyyy') : '—'}
</td>
<td className="px-4 py-3 text-slate-700 hidden md:table-cell">
{p.client ? `${p.client.firstName} ${p.client.lastName}` : '—'}
<div className="text-xs text-slate-400">{p.client?.accountNumber}</div>
</td>
<td className="px-4 py-3 text-right font-semibold text-slate-800">{peso(p.amount)}</td>
<td className="px-4 py-3">
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${channelColors[p.channel] ?? 'bg-gray-100 text-gray-500'}`}>
{p.channel?.replace('_', ' ')}
</span>
</td>
<td className="px-4 py-3 text-slate-600 hidden lg:table-cell">
{p.recordedBy ? `${p.recordedBy.firstName} ${p.recordedBy.lastName}` : '—'}
</td>
<td className="px-4 py-3 text-slate-500 font-mono text-xs hidden xl:table-cell">
{p.invoice?.invoiceNumber ?? '—'}
</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..."
value={search} onChange={e => { setSearch(e.target.value); setPage(1); }} />
<div className="flex gap-2 flex-wrap">
{channelFilters.map(c => (
<button key={c} onClick={() => { setChannelFilter(c); setPage(1); }}
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${channelFilter === c ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`}>
{c || "All"}
</button>
))}
</div>
</div>
{!isLoading && payments.length === 0 && (
<div className="text-center py-12 text-slate-400">No payments found</div>
</CardHeader>
<CardContent className="p-0">
<Table>
<TableHead>
<TableRow><Th>Date</Th><Th>Client</Th><Th>Amount</Th><Th>Method</Th><Th>Reference</Th><Th>Invoice</Th><Th></Th></TableRow>
</TableHead>
<TableBody>
{isLoading ? (
Array.from({ length: 8 }).map((_, i) => (
<TableRow key={i}><Td colSpan={7}><div className="h-4 bg-gray-100 rounded animate-pulse" /></Td></TableRow>
))
) : payments.length === 0 ? (
<EmptyState colSpan={7} message="No payments found" icon={<CreditCard size={24} />} />
) : payments.map(p => (
<TableRow key={p.id} onClick={() => setSelected(p)} className="cursor-pointer hover:bg-blue-50 transition-colors">
<Td className="text-sm">{p.paymentDate ? formatDate(p.paymentDate) : formatDate(p.createdAt)}</Td>
<Td className="font-medium">
{p.client ? `${p.client.firstName} ${p.client.lastName}` : "—"}
<div className="text-xs text-gray-400">{p.client?.accountNumber}</div>
</Td>
<Td className="font-semibold text-green-700">{formatCurrency(Number(p.amount))}</Td>
<Td><Badge variant={channelVariant[p.channel] ?? "muted"}>{p.channel}</Badge></Td>
<Td className="text-xs text-gray-500">{p.referenceNumber ?? p.orNumber ?? "—"}</Td>
<Td className="text-xs font-mono text-gray-500">{p.invoice?.invoiceNumber ?? (p.invoiceId ? p.invoiceId.slice(0, 8) : "—")}</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 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 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>
{/* Payment Detail Modal */}
<Modal isOpen={!!selected} onClose={() => setSelected(null)} title="Payment Details">
{selected && (
<div className="space-y-4">
<div className="bg-gray-50 rounded-lg p-4 space-y-2.5 text-sm">
<div className="flex justify-between items-center">
<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 items-center">
<span className="text-gray-500">Account #</span>
<span className="font-mono text-xs">{selected.client?.accountNumber ?? "—"}</span>
</div>
<hr />
<div className="flex justify-between items-center">
<span className="text-gray-500">Amount</span>
<span className="text-xl font-bold text-green-700">{formatCurrency(Number(selected.amount))}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-500">Method</span>
<Badge variant={channelVariant[selected.channel] ?? "muted"}>{selected.channel}</Badge>
</div>
{(selected.referenceNumber || selected.orNumber) && (
<div className="flex justify-between items-center">
<span className="text-gray-500">Reference #</span>
<span className="font-mono text-xs">{selected.referenceNumber ?? selected.orNumber}</span>
</div>
)}
<div className="flex justify-between items-center">
<span className="text-gray-500">Invoice</span>
<span className="font-mono text-xs">{selected.invoice?.invoiceNumber ?? (selected.invoiceId ? selected.invoiceId.slice(0, 8) : "—")}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-500">Payment Date</span>
<span>{selected.paymentDate ? formatDate(selected.paymentDate) : formatDate(selected.createdAt)}</span>
</div>
{selected.notes && (
<div className="flex justify-between items-start">
<span className="text-gray-500">Notes</span>
<span className="text-right max-w-[200px]">{selected.notes}</span>
</div>
)}
{selected.recordedBy && (
<div className="flex justify-between items-center">
<span className="text-gray-500">Recorded By</span>
<span>{selected.recordedBy.firstName} {selected.recordedBy.lastName}</span>
</div>
)}
</div>
<div className="flex justify-end">
<Button variant="outline" onClick={() => setSelected(null)}>Close</Button>
</div>
</div>
)}
</Modal>
</div>
);
}