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:
388
src/app/(dashboard)/[portSlug]/invoices/new/page.tsx
Normal file
388
src/app/(dashboard)/[portSlug]/invoices/new/page.tsx
Normal file
@@ -0,0 +1,388 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useForm, FormProvider } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import { ChevronLeft, ChevronRight, Check, Loader2 } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { InvoiceLineItems } from '@/components/invoices/invoice-line-items';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
import { createInvoiceSchema, type CreateInvoiceInput } from '@/lib/validators/invoices';
|
||||
|
||||
const PAYMENT_TERMS = [
|
||||
{ label: 'Immediate', value: 'immediate' },
|
||||
{ label: 'Net 10', value: 'net10' },
|
||||
{ label: 'Net 15', value: 'net15' },
|
||||
{ label: 'Net 30', value: 'net30' },
|
||||
{ label: 'Net 45', value: 'net45' },
|
||||
{ label: 'Net 60', value: 'net60' },
|
||||
];
|
||||
|
||||
const STEPS = [
|
||||
{ id: 1, label: 'Client Info' },
|
||||
{ id: 2, label: 'Line Items' },
|
||||
{ id: 3, label: 'Review' },
|
||||
];
|
||||
|
||||
export default function NewInvoicePage() {
|
||||
const params = useParams<{ portSlug: string }>();
|
||||
const portSlug = params?.portSlug ?? '';
|
||||
const router = useRouter();
|
||||
|
||||
const [step, setStep] = useState(1);
|
||||
|
||||
const methods = useForm<CreateInvoiceInput>({
|
||||
resolver: zodResolver(createInvoiceSchema),
|
||||
defaultValues: {
|
||||
paymentTerms: 'net30',
|
||||
currency: 'USD',
|
||||
lineItems: [],
|
||||
expenseIds: [],
|
||||
},
|
||||
});
|
||||
|
||||
const { register, handleSubmit, watch, setValue, formState: { errors } } = methods;
|
||||
|
||||
const watchedValues = watch();
|
||||
const lineItems = watchedValues.lineItems ?? [];
|
||||
const subtotal = lineItems.reduce(
|
||||
(sum, li) => sum + (Number(li.quantity) || 0) * (Number(li.unitPrice) || 0),
|
||||
0,
|
||||
);
|
||||
const isNet10 = watchedValues.paymentTerms === 'net10';
|
||||
const discountPct = isNet10 ? 2 : 0;
|
||||
const discountAmount = (subtotal * discountPct) / 100;
|
||||
const total = subtotal - discountAmount;
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: CreateInvoiceInput) =>
|
||||
apiFetch('/api/v1/invoices', {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
}),
|
||||
onSuccess: (res: any) => {
|
||||
const id = res?.data?.id;
|
||||
if (id) {
|
||||
router.push(`/${portSlug}/invoices/${id}`);
|
||||
} else {
|
||||
router.push(`/${portSlug}/invoices`);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
async function goNext() {
|
||||
if (step === 1) {
|
||||
const valid = await methods.trigger([
|
||||
'clientName',
|
||||
'billingEmail',
|
||||
'billingAddress',
|
||||
'dueDate',
|
||||
'paymentTerms',
|
||||
'currency',
|
||||
]);
|
||||
if (valid) setStep(2);
|
||||
} else if (step === 2) {
|
||||
setStep(3);
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
setStep((s) => Math.max(1, s - 1));
|
||||
}
|
||||
|
||||
function onSubmit(data: CreateInvoiceInput) {
|
||||
createMutation.mutate(data);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => router.push(`/${portSlug}/invoices`)}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<h1 className="text-xl font-semibold">New Invoice</h1>
|
||||
</div>
|
||||
|
||||
{/* Step indicator */}
|
||||
<div className="flex items-center gap-2">
|
||||
{STEPS.map((s, idx) => (
|
||||
<div key={s.id} className="flex items-center gap-2">
|
||||
<div
|
||||
className={`flex items-center justify-center w-7 h-7 rounded-full text-xs font-medium ${
|
||||
step > s.id
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: step === s.id
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground'
|
||||
}`}
|
||||
>
|
||||
{step > s.id ? <Check className="h-3.5 w-3.5" /> : s.id}
|
||||
</div>
|
||||
<span
|
||||
className={`text-sm ${
|
||||
step === s.id ? 'font-medium' : 'text-muted-foreground'
|
||||
}`}
|
||||
>
|
||||
{s.label}
|
||||
</span>
|
||||
{idx < STEPS.length - 1 && (
|
||||
<div className="w-8 h-px bg-border mx-1" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
{/* Step 1: Client Info */}
|
||||
{step === 1 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Client Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="clientName">
|
||||
Client Name <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="clientName"
|
||||
{...register('clientName')}
|
||||
placeholder="Client or company name"
|
||||
/>
|
||||
{errors.clientName && (
|
||||
<p className="text-xs text-destructive">{errors.clientName.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="billingEmail">Billing Email</Label>
|
||||
<Input
|
||||
id="billingEmail"
|
||||
type="email"
|
||||
{...register('billingEmail')}
|
||||
placeholder="billing@example.com"
|
||||
/>
|
||||
{errors.billingEmail && (
|
||||
<p className="text-xs text-destructive">{errors.billingEmail.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="billingAddress">Billing Address</Label>
|
||||
<Textarea
|
||||
id="billingAddress"
|
||||
{...register('billingAddress')}
|
||||
placeholder="Address"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="dueDate">
|
||||
Due Date <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="dueDate"
|
||||
type="date"
|
||||
{...register('dueDate')}
|
||||
/>
|
||||
{errors.dueDate && (
|
||||
<p className="text-xs text-destructive">{errors.dueDate.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label>Payment Terms</Label>
|
||||
<Select
|
||||
defaultValue="net30"
|
||||
onValueChange={(v) => setValue('paymentTerms', v as any)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select terms" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PAYMENT_TERMS.map((t) => (
|
||||
<SelectItem key={t.value} value={t.value}>
|
||||
{t.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label>Currency</Label>
|
||||
<Input
|
||||
{...register('currency')}
|
||||
placeholder="USD"
|
||||
maxLength={3}
|
||||
className="uppercase w-24"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="notes">Notes</Label>
|
||||
<Textarea
|
||||
id="notes"
|
||||
{...register('notes')}
|
||||
placeholder="Payment instructions or notes..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Step 2: Line Items */}
|
||||
{step === 2 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Line Items</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<InvoiceLineItems name="lineItems" />
|
||||
{errors.lineItems && !Array.isArray(errors.lineItems) && (
|
||||
<p className="text-xs text-destructive mt-2">
|
||||
{(errors.lineItems as any).message}
|
||||
</p>
|
||||
)}
|
||||
{errors.root && (
|
||||
<p className="text-xs text-destructive mt-2">{errors.root.message}</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Step 3: Review */}
|
||||
{step === 3 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Review & Create</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-muted-foreground">Client</span>
|
||||
<p className="font-medium mt-0.5">{watchedValues.clientName}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Due Date</span>
|
||||
<p className="font-medium mt-0.5">{watchedValues.dueDate}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Payment Terms</span>
|
||||
<p className="font-medium mt-0.5 capitalize">
|
||||
{watchedValues.paymentTerms}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Currency</span>
|
||||
<p className="font-medium mt-0.5">{watchedValues.currency}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{lineItems.length > 0 && (
|
||||
<div className="border rounded-md p-3 space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
Line Items
|
||||
</p>
|
||||
{lineItems.map((li, i) => (
|
||||
<div key={i} className="flex justify-between text-sm">
|
||||
<span>{li.description}</span>
|
||||
<span className="tabular-nums">
|
||||
{(Number(li.quantity) * Number(li.unitPrice)).toFixed(2)}{' '}
|
||||
{watchedValues.currency}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="border rounded-md p-3 space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Subtotal</span>
|
||||
<span className="tabular-nums">
|
||||
{subtotal.toFixed(2)} {watchedValues.currency}
|
||||
</span>
|
||||
</div>
|
||||
{isNet10 && (
|
||||
<div className="flex justify-between text-green-600">
|
||||
<span>Net 10 Discount (~2%)</span>
|
||||
<span className="tabular-nums">
|
||||
-{discountAmount.toFixed(2)} {watchedValues.currency}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between font-semibold border-t pt-2 mt-1">
|
||||
<span>Total</span>
|
||||
<span className="tabular-nums">
|
||||
{total.toFixed(2)} {watchedValues.currency}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{createMutation.isError && (
|
||||
<p className="text-sm text-destructive">
|
||||
Failed to create invoice. Please try again.
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={goBack}
|
||||
disabled={step === 1}
|
||||
>
|
||||
<ChevronLeft className="mr-1.5 h-4 w-4" />
|
||||
Back
|
||||
</Button>
|
||||
|
||||
{step < 3 ? (
|
||||
<Button type="button" onClick={goNext}>
|
||||
Next
|
||||
<ChevronRight className="ml-1.5 h-4 w-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="submit" disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? (
|
||||
<Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Check className="mr-1.5 h-4 w-4" />
|
||||
)}
|
||||
Create Invoice
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user