restore: old src/ components, subscriptions, audit-log, client detail pages; fix tsconfig @/* paths; merge api.ts
This commit is contained in:
Forge
114
app/(app)/audit-log/page.tsx
Normal file
114
app/(app)/audit-log/page.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ChevronLeft, ChevronRight, RefreshCw } 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 { formatDateTime } from "@/lib/utils";
|
||||
import api from "@/lib/api";
|
||||
import type { AuditLog, PaginatedResponse } from "@/types";
|
||||
|
||||
export default function AuditLogPage() {
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
const { data, isLoading, refetch } = useQuery<PaginatedResponse<AuditLog>>({
|
||||
queryKey: ["audit-logs", page],
|
||||
queryFn: async () => {
|
||||
const res = await api.get<PaginatedResponse<AuditLog>>(`/api/v1/audit-logs?page=${page}&limit=50`);
|
||||
return res.data;
|
||||
},
|
||||
});
|
||||
|
||||
const logs = data?.data ?? [];
|
||||
const meta = data?.meta;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Audit Log</h1>
|
||||
<p className="text-sm text-gray-500">Track all system activity</p>
|
||||
</div>
|
||||
<Button size="sm" variant="outline" onClick={() => refetch()}>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Activity Log</CardTitle></CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<Th>Timestamp</Th>
|
||||
<Th>User</Th>
|
||||
<Th>Action</Th>
|
||||
<Th>Entity</Th>
|
||||
<Th>Entity ID</Th>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{isLoading ? (
|
||||
Array.from({ length: 5 }).map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
{Array.from({ length: 5 }).map((_, j) => (
|
||||
<Td key={j}><div className="h-4 w-24 animate-pulse bg-gray-100 rounded" /></Td>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : logs.length === 0 ? (
|
||||
<EmptyState message="No audit logs yet" />
|
||||
) : (
|
||||
logs.map((log) => (
|
||||
<TableRow key={log.id}>
|
||||
<Td className="text-xs text-gray-400 whitespace-nowrap">
|
||||
{formatDateTime(log.createdAt)}
|
||||
</Td>
|
||||
<Td className="text-gray-700">
|
||||
{log.user
|
||||
? `${log.user.firstName} ${log.user.lastName}`
|
||||
: log.userId?.slice(0, 8) ?? "System"}
|
||||
</Td>
|
||||
<Td>
|
||||
<Badge variant={
|
||||
log.action?.includes("CREATE") || log.action?.includes("create") ? "success" :
|
||||
log.action?.includes("DELETE") || log.action?.includes("delete") ? "danger" :
|
||||
log.action?.includes("UPDATE") || log.action?.includes("update") ? "default" : "muted"
|
||||
}>
|
||||
{log.action}
|
||||
</Badge>
|
||||
</Td>
|
||||
<Td className="text-gray-600">
|
||||
{log.entityType ?? log.entity ?? "—"}
|
||||
</Td>
|
||||
<Td className="font-mono text-xs text-gray-400">
|
||||
{log.entityId?.slice(0, 12) ?? "—"}
|
||||
</Td>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
{meta && meta.totalPages > 1 && (
|
||||
<div className="flex items-center justify-between px-4 py-3 border-t border-gray-100">
|
||||
<p className="text-sm text-gray-500">Page {meta.page} of {meta.totalPages}</p>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline" disabled={page <= 1} onClick={() => setPage(page - 1)}>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" disabled={page >= meta.totalPages} onClick={() => setPage(page + 1)}>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
298
app/(app)/clients/[id]/page.tsx
Normal file
298
app/(app)/clients/[id]/page.tsx
Normal file
@@ -0,0 +1,298 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { ArrowLeft, Wifi, FileText, Ticket, 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 { Table, TableHead, TableBody, TableRow, Th, Td, EmptyState } from "@/components/ui/Table";
|
||||
import { formatDate, formatCurrency } from "@/lib/utils";
|
||||
import api from "@/lib/api";
|
||||
import type { Client, Subscription, Invoice, Ticket as TicketType, PaginatedResponse, LegacyPaginatedResponse } from "@/types";
|
||||
|
||||
type Tab = "profile" | "subscriptions" | "invoices" | "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",
|
||||
};
|
||||
|
||||
export default function ClientDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const router = useRouter();
|
||||
const [activeTab, setActiveTab] = useState<Tab>("profile");
|
||||
|
||||
const { data: client, isLoading, refetch: refetchClient } = useQuery<Client>({
|
||||
queryKey: ["client", id],
|
||||
queryFn: async () => {
|
||||
const res = await api.get<Client>(`/api/v1/clients/${id}`);
|
||||
return res.data;
|
||||
},
|
||||
});
|
||||
|
||||
const { data: subscriptions, isError: subsError } = useQuery<Subscription[]>({
|
||||
queryKey: ["client-subscriptions", id],
|
||||
queryFn: async () => {
|
||||
const res = await api.get<Subscription[]>(`/api/v1/clients/${id}/subscriptions`);
|
||||
return Array.isArray(res.data) ? res.data : [];
|
||||
},
|
||||
enabled: activeTab === "subscriptions",
|
||||
retry: false,
|
||||
});
|
||||
|
||||
const { data: invoicesData } = useQuery<LegacyPaginatedResponse<Invoice>>({
|
||||
queryKey: ["client-invoices", id],
|
||||
queryFn: async () => {
|
||||
const res = await api.get<LegacyPaginatedResponse<Invoice>>(`/api/v1/invoices?clientId=${id}&page=1&limit=20`);
|
||||
return res.data;
|
||||
},
|
||||
enabled: activeTab === "invoices",
|
||||
});
|
||||
|
||||
const { data: ticketsData } = useQuery<PaginatedResponse<TicketType>>({
|
||||
queryKey: ["client-tickets", id],
|
||||
queryFn: async () => {
|
||||
const res = await api.get<PaginatedResponse<TicketType>>(`/api/v1/tickets?clientId=${id}&page=1&limit=20`);
|
||||
return res.data;
|
||||
},
|
||||
enabled: activeTab === "tickets",
|
||||
});
|
||||
|
||||
const tabs: { key: Tab; label: string; icon: React.ComponentType<{ className?: string }> }[] = [
|
||||
{ key: "profile", label: "Profile", icon: ArrowLeft },
|
||||
{ key: "subscriptions", label: "Subscriptions", icon: Wifi },
|
||||
{ key: "invoices", label: "Invoices", icon: FileText },
|
||||
{ key: "tickets", label: "Tickets", icon: Ticket },
|
||||
];
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
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" />
|
||||
</Button>
|
||||
<div>
|
||||
<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 ?? ""}
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<Badge variant={client.isActive ? "success" : "muted"}>
|
||||
{client.isActive ? "Active" : "Inactive"}
|
||||
</Badge>
|
||||
<Button size="sm" variant="outline" onClick={() => refetchClient()}>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-gray-200">
|
||||
{[
|
||||
{ key: "profile" as Tab, label: "Profile" },
|
||||
{ key: "subscriptions" as Tab, label: "Subscriptions" },
|
||||
{ key: "invoices" as Tab, label: "Invoices" },
|
||||
{ key: "tickets" as Tab, label: "Tickets" },
|
||||
].map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 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 Tab */}
|
||||
{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 Tab */}
|
||||
{activeTab === "subscriptions" && (
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Subscriptions</CardTitle></CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<Th>Plan</Th>
|
||||
<Th>Status</Th>
|
||||
<Th>Start Date</Th>
|
||||
<Th>Monthly Rate</Th>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{subsError ? (
|
||||
<tr><td colSpan={4} className="py-8 text-center text-gray-400 text-sm">No data yet</td></tr>
|
||||
) : !subscriptions || subscriptions.length === 0 ? (
|
||||
<EmptyState message="No subscriptions yet" />
|
||||
) : (
|
||||
subscriptions.map((sub) => (
|
||||
<TableRow key={sub.id} className="hover:bg-gray-50 transition-colors">
|
||||
<Td className="font-medium">{sub.plan?.name ?? sub.planId}</Td>
|
||||
<Td>
|
||||
<Badge variant={statusColor[sub.status] ?? "muted"}>
|
||||
{sub.status}
|
||||
</Badge>
|
||||
</Td>
|
||||
<Td>{formatDate(sub.startDate)}</Td>
|
||||
<Td>{formatCurrency(sub.plan?.monthlyPrice ?? sub.monthlyRate ?? sub.mrc ?? 0)}</Td>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Invoices Tab */}
|
||||
{activeTab === "invoices" && (
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Invoices</CardTitle></CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<Th>Invoice #</Th>
|
||||
<Th>Amount</Th>
|
||||
<Th>Due Date</Th>
|
||||
<Th>Status</Th>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{!invoicesData?.data || invoicesData.data.length === 0 ? (
|
||||
<EmptyState message="No invoices yet" />
|
||||
) : (
|
||||
invoicesData.data.map((inv) => (
|
||||
<TableRow key={inv.id}>
|
||||
<Td className="font-mono text-xs">{inv.invoiceNumber ?? inv.id.slice(0, 8)}</Td>
|
||||
<Td>{formatCurrency(inv.amount ?? inv.totalAmount ?? 0)}</Td>
|
||||
<Td>{formatDate(inv.dueDate)}</Td>
|
||||
<Td>
|
||||
<Badge
|
||||
variant={
|
||||
inv.status === "paid" || inv.status === "PAID" ? "success" :
|
||||
inv.status === "overdue" || inv.status === "OVERDUE" ? "danger" : "warning"
|
||||
}
|
||||
>
|
||||
{inv.status}
|
||||
</Badge>
|
||||
</Td>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Tickets Tab */}
|
||||
{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 yet" />
|
||||
) : (
|
||||
ticketsData.data.map((ticket) => (
|
||||
<TableRow key={ticket.id}>
|
||||
<Td className="font-medium">{ticket.subject}</Td>
|
||||
<Td><Badge variant="muted">{ticket.type}</Badge></Td>
|
||||
<Td>
|
||||
<Badge variant={
|
||||
ticket.priority === "urgent" ? "danger" :
|
||||
ticket.priority === "high" ? "warning" : "muted"
|
||||
}>{ticket.priority}</Badge>
|
||||
</Td>
|
||||
<Td><Badge variant="default">{ticket.status}</Badge></Td>
|
||||
<Td className="text-xs text-gray-400">{formatDate(ticket.createdAt)}</Td>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
157
app/(app)/subscriptions/page.tsx
Normal file
157
app/(app)/subscriptions/page.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { RefreshCw, Wifi, AlertCircle } from "lucide-react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||
import { Table, TableHead, TableBody, TableRow, Th, Td } from "@/components/ui/Table";
|
||||
import { Badge } from "@/components/ui/Badge";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { formatDate, formatCurrency } from "@/lib/utils";
|
||||
import api from "@/lib/api";
|
||||
import type { PaginatedResponse } from "@/types";
|
||||
|
||||
interface Subscription {
|
||||
id: string;
|
||||
clientId: string;
|
||||
status: string;
|
||||
startDate: string;
|
||||
endDate?: string;
|
||||
client?: { firstName: string; lastName: string; accountNumber: string };
|
||||
plan?: { name: string; type: string; monthlyPrice: number };
|
||||
planId?: string;
|
||||
monthlyRate?: number;
|
||||
mrc?: number;
|
||||
type?: string;
|
||||
}
|
||||
|
||||
const statusVariant: Record<string, "success" | "warning" | "danger" | "muted"> = {
|
||||
ACTIVE: "success",
|
||||
active: "success",
|
||||
SUSPENDED: "warning",
|
||||
suspended: "warning",
|
||||
CANCELLED: "danger",
|
||||
cancelled: "danger",
|
||||
DISCONNECTED: "danger",
|
||||
disconnected: "danger",
|
||||
PENDING: "muted",
|
||||
pending: "muted",
|
||||
};
|
||||
|
||||
export default function SubscriptionsPage() {
|
||||
const router = useRouter();
|
||||
|
||||
const { data, isLoading, isError, error, refetch, isFetching } = useQuery<PaginatedResponse<Subscription>>({
|
||||
queryKey: ["subscriptions"],
|
||||
queryFn: async () => {
|
||||
const res = await api.get<PaginatedResponse<Subscription>>("/api/v1/subscriptions?page=1&limit=50");
|
||||
return res.data;
|
||||
},
|
||||
retry: false,
|
||||
});
|
||||
|
||||
const subscriptions = data?.data ?? [];
|
||||
const meta = data?.meta;
|
||||
|
||||
const isNotFound =
|
||||
isError &&
|
||||
(error as { response?: { status?: number } })?.response?.status === 404;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Subscriptions</h1>
|
||||
<p className="text-sm text-gray-500">{meta?.total ?? 0} total subscriptions</p>
|
||||
</div>
|
||||
<Button size="sm" variant="outline" onClick={() => refetch()} disabled={isFetching}>
|
||||
<RefreshCw className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`} />
|
||||
{isFetching ? "Checking…" : "Retry"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>All Subscriptions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{isLoading ? (
|
||||
<div className="p-6 space-y-3">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="h-10 animate-pulse bg-gray-100 rounded-lg" />
|
||||
))}
|
||||
</div>
|
||||
) : isNotFound || (isError && !data) ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center px-6">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-50 mb-4">
|
||||
<Wifi className="h-8 w-8 text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-gray-700 mb-2">Subscriptions Module Not Yet Available</h3>
|
||||
<p className="text-sm text-gray-500 max-w-sm mb-4">
|
||||
Subscription data will appear here once the module is deployed.
|
||||
</p>
|
||||
<div className="flex items-center gap-1.5 text-xs text-amber-600 bg-amber-50 px-3 py-1.5 rounded-full mb-5">
|
||||
<AlertCircle className="h-3.5 w-3.5" />
|
||||
<span>API endpoint not yet available</span>
|
||||
</div>
|
||||
<Button variant="secondary" onClick={() => refetch()} disabled={isFetching}>
|
||||
<RefreshCw className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`} />
|
||||
{isFetching ? "Checking…" : "Retry Now"}
|
||||
</Button>
|
||||
</div>
|
||||
) : subscriptions.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center px-6">
|
||||
<div className="flex h-14 w-14 items-center justify-center rounded-full bg-gray-100 mb-3">
|
||||
<Wifi className="h-7 w-7 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-500">No subscriptions yet.</p>
|
||||
<Button variant="secondary" size="sm" className="mt-3" onClick={() => refetch()}>
|
||||
<RefreshCw className="h-4 w-4" /> Refresh
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<Th>Client</Th>
|
||||
<Th>Plan</Th>
|
||||
<Th>Type</Th>
|
||||
<Th>Status</Th>
|
||||
<Th>Start Date</Th>
|
||||
<Th>MRC</Th>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{subscriptions.map((sub) => (
|
||||
<TableRow
|
||||
key={sub.id}
|
||||
className="hover:bg-gray-50 transition-colors cursor-pointer"
|
||||
onClick={() => sub.clientId && router.push(`/clients/${sub.clientId}`)}
|
||||
>
|
||||
<Td>
|
||||
{sub.client ? (
|
||||
<div>
|
||||
<p className="font-medium text-sm">{sub.client.firstName} {sub.client.lastName}</p>
|
||||
<p className="text-xs text-gray-400 font-mono">{sub.client.accountNumber}</p>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400 text-sm">—</span>
|
||||
)}
|
||||
</Td>
|
||||
<Td className="font-medium">{sub.plan?.name ?? sub.planId ?? "—"}</Td>
|
||||
<Td><Badge variant="muted">{sub.plan?.type ?? sub.type ?? "—"}</Badge></Td>
|
||||
<Td>
|
||||
<Badge variant={statusVariant[sub.status] ?? "muted"}>{sub.status}</Badge>
|
||||
</Td>
|
||||
<Td>{formatDate(sub.startDate)}</Td>
|
||||
<Td>{formatCurrency(sub.plan?.monthlyPrice ?? sub.monthlyRate ?? sub.mrc ?? 0)}</Td>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user