Initial commit: Port Nimara CRM (Layers 0-4)
Full CRM rebuild with Next.js 15, TypeScript, Tailwind, Drizzle ORM, PostgreSQL, Redis, BullMQ, MinIO, and Socket.io. Includes 461 source files covering clients, berths, interests/pipeline, documents/EOI, expenses/invoices, email, notifications, dashboard, admin, and client portal. CI/CD via Gitea Actions with Docker builds. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
367
src/components/invoices/invoice-detail.tsx
Normal file
367
src/components/invoices/invoice-detail.tsx
Normal file
@@ -0,0 +1,367 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { format } from 'date-fns';
|
||||
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');
|
||||
|
||||
const { data, isLoading, error } = useQuery<{ data: any }>({
|
||||
queryKey: ['invoices', invoiceId],
|
||||
queryFn: () => apiFetch(`/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: JSON.stringify(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="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h2 className="text-xl font-semibold font-mono">{invoice.invoiceNumber}</h2>
|
||||
<Badge variant="outline" className={`capitalize text-sm border ${statusColor}`}>
|
||||
{invoice.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-0.5">{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>
|
||||
{invoice.lineItems.map((li: any) => (
|
||||
<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">
|
||||
{invoice.linkedExpenses.map((exp: any) => (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user