feat: real data-fetching pages — clients, invoices, payments, tickets, reports with charts
This commit is contained in:
Forge
@@ -1,71 +1,179 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useCallback } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { Search, UserPlus } from 'lucide-react';
|
||||
import { Search, UserPlus, Phone, MapPin, ChevronRight } from 'lucide-react';
|
||||
import { api } from '@/lib/api';
|
||||
import Link from 'next/link';
|
||||
import { useDebounce } from '@/lib/hooks';
|
||||
|
||||
interface Client {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email?: string;
|
||||
phone: string;
|
||||
address: string;
|
||||
accountNumber: string;
|
||||
isActive: boolean;
|
||||
subscriptions?: { status: string; plan?: { name: string; monthlyPrice: number } }[];
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface ClientsResponse {
|
||||
data: Client[];
|
||||
meta?: { total: number; page: number; limit: number };
|
||||
}
|
||||
|
||||
function getSubStatus(client: Client): string {
|
||||
return client.subscriptions?.[0]?.status ?? 'NO_SUB';
|
||||
}
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
ACTIVE: 'bg-emerald-100 text-emerald-700',
|
||||
PENDING: 'bg-yellow-100 text-yellow-700',
|
||||
SUSPENDED: 'bg-red-100 text-red-700',
|
||||
DISCONNECTED: 'bg-gray-100 text-gray-600',
|
||||
CANCELLED: 'bg-gray-100 text-gray-500',
|
||||
NO_SUB: 'bg-gray-100 text-gray-400',
|
||||
};
|
||||
|
||||
export default function ClientsPage() {
|
||||
const [search, setSearch] = useState('');
|
||||
const [page, setPage] = useState(1);
|
||||
const debouncedSearch = useDebounce(search, 400);
|
||||
const limit = 20;
|
||||
|
||||
const { data, isLoading } = useQuery<ClientsResponse>({
|
||||
queryKey: ['clients', debouncedSearch, page],
|
||||
queryFn: async () => {
|
||||
const params = new URLSearchParams({ page: String(page), limit: String(limit) });
|
||||
if (debouncedSearch) params.set('search', debouncedSearch);
|
||||
const res = await api.get(`/api/v1/clients?${params}`);
|
||||
return res.data;
|
||||
},
|
||||
});
|
||||
|
||||
const clients: Client[] = Array.isArray(data) ? data : (data?.data ?? []);
|
||||
const total = (data as any)?.meta?.total ?? clients.length;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Header */}
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-800">Clients</h1>
|
||||
<p className="text-slate-500 text-sm mt-1">Manage your ISP subscribers</p>
|
||||
<p className="text-slate-500 text-sm mt-1">
|
||||
{isLoading ? '...' : `${total} subscriber${total !== 1 ? 's' : ''}`}
|
||||
</p>
|
||||
</div>
|
||||
<Button style={{ backgroundColor: '#0891B2' }}>
|
||||
<Button style={{ backgroundColor: '#0891B2', color: 'white' }}>
|
||||
<UserPlus size={16} className="mr-2" />
|
||||
Add Client
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
|
||||
<Input
|
||||
placeholder="Search clients..."
|
||||
className="pl-9"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
{/* Search */}
|
||||
<div className="relative mb-4 max-w-sm">
|
||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
|
||||
<Input
|
||||
placeholder="Search by name, account #, phone..."
|
||||
className="pl-9"
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Account #</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Phone</TableHead>
|
||||
<TableHead>Plan</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
<TableHead>Address</TableHead>
|
||||
<TableHead className="w-10"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center py-12 text-slate-400">
|
||||
No clients yet. Add your first client to get started.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{isLoading ? (
|
||||
Array.from({ length: 8 }).map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
{Array.from({ length: 7 }).map((_, j) => (
|
||||
<TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : clients.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center py-12 text-slate-400">
|
||||
{search ? `No clients matching "${search}"` : 'No clients yet'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
clients.map((c) => {
|
||||
const subStatus = getSubStatus(c);
|
||||
const planName = c.subscriptions?.[0]?.plan?.name ?? '—';
|
||||
return (
|
||||
<TableRow key={c.id} className="hover:bg-slate-50 cursor-pointer">
|
||||
<TableCell className="font-mono text-sm text-slate-600">{c.accountNumber}</TableCell>
|
||||
<TableCell className="font-medium">{c.firstName} {c.lastName}</TableCell>
|
||||
<TableCell>
|
||||
<span className="flex items-center gap-1 text-slate-500 text-sm">
|
||||
<Phone size={12} />{c.phone}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-slate-600">{planName}</TableCell>
|
||||
<TableCell>
|
||||
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[subStatus] ?? STATUS_COLORS.NO_SUB}`}>
|
||||
{subStatus.replace('_', ' ')}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="flex items-center gap-1 text-slate-400 text-xs max-w-[180px] truncate">
|
||||
<MapPin size={10} />{c.address}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Link href={`/clients/${c.id}`} className="text-slate-400 hover:text-slate-700">
|
||||
<ChevronRight size={16} />
|
||||
</Link>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Pagination */}
|
||||
{total > limit && (
|
||||
<div className="mt-4 flex items-center justify-between text-sm text-slate-500">
|
||||
<span>Page {page} of {Math.ceil(total / limit)}</span>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}>
|
||||
Previous
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setPage(p => p + 1)} disabled={page * limit >= total}>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user