22f944fde2
Adds shared <DetailHeaderStrip> wrapper (rounded-xl + gradient-brand-soft + shadow-xs)
and applies it to every legacy domain detail header. Residential client/interest and
invoice detail get an inline gradient strip with eyebrow ('Residential Client',
'Residential Interest', 'Invoice'). Residential bodies normalized to lg:grid-cols-[2fr_1fr]
per spec.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
351 lines
14 KiB
TypeScript
351 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
|
|
import { Loader2, Send, CreditCard } from 'lucide-react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { InvoicePdfPreview } from './invoice-pdf-preview';
|
|
import { apiFetch } from '@/lib/api/client';
|
|
import { recordPaymentSchema, type RecordPaymentInput } from '@/lib/validators/invoices';
|
|
|
|
const STATUS_COLORS: Record<string, string> = {
|
|
draft: 'bg-gray-100 text-gray-700 border-gray-200',
|
|
sent: 'bg-blue-100 text-blue-700 border-blue-200',
|
|
paid: 'bg-green-100 text-green-700 border-green-200',
|
|
overdue: 'bg-red-100 text-red-700 border-red-200',
|
|
cancelled: 'bg-gray-100 text-gray-500 border-gray-200',
|
|
};
|
|
|
|
interface InvoiceDetailProps {
|
|
invoiceId: string;
|
|
}
|
|
|
|
export function InvoiceDetail({ invoiceId }: InvoiceDetailProps) {
|
|
const queryClient = useQueryClient();
|
|
const [tab, setTab] = useState('overview');
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const { data, isLoading, error } = useQuery<{ data: any }>({
|
|
queryKey: ['invoices', invoiceId],
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
queryFn: () => apiFetch<{ data: any }>(`/api/v1/invoices/${invoiceId}`),
|
|
});
|
|
|
|
const sendMutation = useMutation({
|
|
mutationFn: () => apiFetch(`/api/v1/invoices/${invoiceId}/send`, { method: 'POST' }),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['invoices', invoiceId] });
|
|
queryClient.invalidateQueries({ queryKey: ['invoices'] });
|
|
},
|
|
});
|
|
|
|
const paymentForm = useForm<RecordPaymentInput>({
|
|
resolver: zodResolver(recordPaymentSchema),
|
|
defaultValues: { paymentDate: new Date().toISOString().split('T')[0] },
|
|
});
|
|
|
|
const paymentMutation = useMutation({
|
|
mutationFn: (values: RecordPaymentInput) =>
|
|
apiFetch(`/api/v1/invoices/${invoiceId}/payment`, {
|
|
method: 'PATCH',
|
|
body: values,
|
|
}),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['invoices', invoiceId] });
|
|
queryClient.invalidateQueries({ queryKey: ['invoices'] });
|
|
},
|
|
});
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center p-12">
|
|
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !data?.data) {
|
|
return (
|
|
<div className="p-6 text-center text-muted-foreground">Failed to load invoice details.</div>
|
|
);
|
|
}
|
|
|
|
const invoice = data.data;
|
|
const statusColor = STATUS_COLORS[invoice.status] ?? STATUS_COLORS.draft;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs flex items-center justify-between gap-4 flex-wrap">
|
|
<div className="min-w-0">
|
|
<div className="text-xs font-semibold uppercase tracking-wide text-brand">Invoice</div>
|
|
<div className="mt-1 flex items-center gap-3 flex-wrap">
|
|
<h1 className="truncate text-2xl font-bold tracking-tight text-foreground font-mono">
|
|
{invoice.invoiceNumber}
|
|
</h1>
|
|
<Badge variant="outline" className={`capitalize text-sm border ${statusColor}`}>
|
|
{invoice.status}
|
|
</Badge>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground mt-1">{invoice.clientName}</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{invoice.status === 'draft' && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => sendMutation.mutate()}
|
|
disabled={sendMutation.isPending}
|
|
>
|
|
{sendMutation.isPending ? (
|
|
<Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Send className="mr-1.5 h-4 w-4" />
|
|
)}
|
|
Send Invoice
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<Tabs value={tab} onValueChange={setTab}>
|
|
<TabsList>
|
|
<TabsTrigger value="overview">Overview</TabsTrigger>
|
|
<TabsTrigger value="expenses">Linked Expenses</TabsTrigger>
|
|
<TabsTrigger value="pdf">PDF Preview</TabsTrigger>
|
|
<TabsTrigger value="payment">Payment</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* Overview */}
|
|
<TabsContent value="overview" className="space-y-4 pt-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-sm font-medium">Total</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-2xl font-bold tabular-nums">
|
|
{Number(invoice.total).toLocaleString('en-US', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})}{' '}
|
|
{invoice.currency}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-sm font-medium">Due Date</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm">{invoice.dueDate}</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-sm font-medium">Payment Terms</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm capitalize">{invoice.paymentTerms}</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Line items */}
|
|
{invoice.lineItems && invoice.lineItems.length > 0 && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-sm font-medium">Line Items</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2">
|
|
<div className="grid grid-cols-12 gap-2 text-xs font-medium text-muted-foreground border-b pb-2">
|
|
<span className="col-span-6">Description</span>
|
|
<span className="col-span-2 text-right">Qty</span>
|
|
<span className="col-span-2 text-right">Unit Price</span>
|
|
<span className="col-span-2 text-right">Total</span>
|
|
</div>
|
|
{/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
|
|
{(invoice.lineItems as any[]).map((li) => (
|
|
<div key={li.id} className="grid grid-cols-12 gap-2 text-sm">
|
|
<span className="col-span-6">{li.description}</span>
|
|
<span className="col-span-2 text-right tabular-nums">{li.quantity}</span>
|
|
<span className="col-span-2 text-right tabular-nums">
|
|
{Number(li.unitPrice).toFixed(2)}
|
|
</span>
|
|
<span className="col-span-2 text-right tabular-nums font-medium">
|
|
{Number(li.total).toFixed(2)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Totals */}
|
|
<div className="mt-4 border-t pt-4 space-y-1 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Subtotal</span>
|
|
<span className="tabular-nums">
|
|
{Number(invoice.subtotal).toFixed(2)} {invoice.currency}
|
|
</span>
|
|
</div>
|
|
{Number(invoice.discountAmount) > 0 && (
|
|
<div className="flex justify-between text-green-600">
|
|
<span>Discount ({invoice.discountPct}%)</span>
|
|
<span className="tabular-nums">
|
|
-{Number(invoice.discountAmount).toFixed(2)} {invoice.currency}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{Number(invoice.feeAmount) > 0 && (
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Fee ({invoice.feePct}%)</span>
|
|
<span className="tabular-nums">
|
|
+{Number(invoice.feeAmount).toFixed(2)} {invoice.currency}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-between font-semibold border-t pt-2">
|
|
<span>Total</span>
|
|
<span className="tabular-nums">
|
|
{Number(invoice.total).toFixed(2)} {invoice.currency}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{invoice.notes && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-sm font-medium">Notes</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground whitespace-pre-wrap">{invoice.notes}</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</TabsContent>
|
|
|
|
{/* Linked Expenses */}
|
|
<TabsContent value="expenses" className="pt-4">
|
|
{invoice.linkedExpenses && invoice.linkedExpenses.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
|
|
{(invoice.linkedExpenses as any[]).map((exp) => (
|
|
<div
|
|
key={exp.id}
|
|
className="flex items-center justify-between p-3 border rounded-md text-sm"
|
|
>
|
|
<div>
|
|
<p className="font-medium">{exp.establishmentName ?? 'Unnamed Expense'}</p>
|
|
<p className="text-muted-foreground text-xs">
|
|
{exp.category ?? '—'} · {exp.expenseDate}
|
|
</p>
|
|
</div>
|
|
<span className="font-medium tabular-nums">
|
|
{Number(exp.amount).toFixed(2)} {exp.currency}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground py-6 text-center">
|
|
No expenses linked to this invoice.
|
|
</p>
|
|
)}
|
|
</TabsContent>
|
|
|
|
{/* PDF Preview */}
|
|
<TabsContent value="pdf" className="pt-4">
|
|
<InvoicePdfPreview invoiceId={invoiceId} pdfFileId={invoice.pdfFileId} />
|
|
</TabsContent>
|
|
|
|
{/* Payment */}
|
|
<TabsContent value="payment" className="pt-4">
|
|
{invoice.status === 'paid' ? (
|
|
<Card>
|
|
<CardContent className="pt-6 space-y-3 text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="outline" className="bg-green-100 text-green-700 border-green-200">
|
|
Paid
|
|
</Badge>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<span className="text-muted-foreground">Payment Date</span>
|
|
<p className="mt-0.5">{invoice.paymentDate ?? '—'}</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">Method</span>
|
|
<p className="mt-0.5 capitalize">{invoice.paymentMethod ?? '—'}</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">Reference</span>
|
|
<p className="mt-0.5">{invoice.paymentReference ?? '—'}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-sm font-medium">Record Payment</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form
|
|
onSubmit={paymentForm.handleSubmit((values) => paymentMutation.mutate(values))}
|
|
className="space-y-4"
|
|
>
|
|
<div className="space-y-1">
|
|
<Label htmlFor="paymentDate">Payment Date</Label>
|
|
<Input id="paymentDate" type="date" {...paymentForm.register('paymentDate')} />
|
|
{paymentForm.formState.errors.paymentDate && (
|
|
<p className="text-xs text-destructive">
|
|
{paymentForm.formState.errors.paymentDate.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label htmlFor="paymentMethod">Payment Method</Label>
|
|
<Input
|
|
id="paymentMethod"
|
|
placeholder="e.g. bank_transfer, credit_card"
|
|
{...paymentForm.register('paymentMethod')}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label htmlFor="paymentReference">Reference / Transaction ID</Label>
|
|
<Input
|
|
id="paymentReference"
|
|
placeholder="Optional reference"
|
|
{...paymentForm.register('paymentReference')}
|
|
/>
|
|
</div>
|
|
<Button type="submit" disabled={paymentMutation.isPending}>
|
|
{paymentMutation.isPending ? (
|
|
<Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<CreditCard className="mr-1.5 h-4 w-4" />
|
|
)}
|
|
Mark as Paid
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|