265 lines
11 KiB
TypeScript
265 lines
11 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useActionState, useEffect, useMemo, useState, useTransition } from "react";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
||
|
|
import { Select } from "@/components/ui/select";
|
||
|
|
import { Combobox } from "@/components/ui/combobox";
|
||
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||
|
|
import { Badge } from "@/components/ui/badge";
|
||
|
|
import { Eye, Send, FileCheck2 } from "lucide-react";
|
||
|
|
import { bulkUpdateStatus, type ActionResult as DNActionResult } from "@/actions/delivery-notes";
|
||
|
|
import { sendStatement, type ActionResult } from "@/actions/statements";
|
||
|
|
import { toast } from "sonner";
|
||
|
|
import type { Customer, DeliveryNote } from "@/lib/types";
|
||
|
|
import { formatCurrency, formatDate, formatNumber } from "@/lib/utils";
|
||
|
|
|
||
|
|
const initial: ActionResult = { ok: false, error: "" };
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
customers: Customer[];
|
||
|
|
preselectedCustomerId?: string;
|
||
|
|
preselectedEmail?: string;
|
||
|
|
fromEmail: string;
|
||
|
|
ccEmail: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
function rangeDates(range: string, customStart?: string, customEnd?: string) {
|
||
|
|
const now = new Date();
|
||
|
|
if (range === "this-month") {
|
||
|
|
return {
|
||
|
|
start: new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10),
|
||
|
|
end: new Date(now.getFullYear(), now.getMonth() + 1, 0).toISOString().slice(0, 10),
|
||
|
|
};
|
||
|
|
}
|
||
|
|
if (range === "last-month") {
|
||
|
|
return {
|
||
|
|
start: new Date(now.getFullYear(), now.getMonth() - 1, 1).toISOString().slice(0, 10),
|
||
|
|
end: new Date(now.getFullYear(), now.getMonth(), 0).toISOString().slice(0, 10),
|
||
|
|
};
|
||
|
|
}
|
||
|
|
if (customStart && customEnd) return { start: customStart, end: customEnd };
|
||
|
|
return { start: "", end: "" };
|
||
|
|
}
|
||
|
|
|
||
|
|
export function SendStatementForm({ customers, preselectedCustomerId, preselectedEmail, fromEmail, ccEmail }: Props) {
|
||
|
|
const router = useRouter();
|
||
|
|
const [customerId, setCustomerId] = useState(preselectedCustomerId || "");
|
||
|
|
const [range, setRange] = useState("this-month");
|
||
|
|
const [customStart, setCustomStart] = useState("");
|
||
|
|
const [customEnd, setCustomEnd] = useState("");
|
||
|
|
const [recipientEmail, setRecipientEmail] = useState(preselectedEmail || "");
|
||
|
|
const [includePricing, setIncludePricing] = useState(true);
|
||
|
|
const [notes, setNotes] = useState<DeliveryNote[]>([]);
|
||
|
|
const [notesLoading, setNotesLoading] = useState(false);
|
||
|
|
const [state, action, pending] = useActionState(sendStatement, initial);
|
||
|
|
const [, startMarkTransition] = useTransition();
|
||
|
|
|
||
|
|
const customerMap = useMemo(() => new Map(customers.map((c) => [c.id, c])), [customers]);
|
||
|
|
const customer = customerId ? customerMap.get(customerId) : null;
|
||
|
|
|
||
|
|
// Auto-fill recipient from customer email
|
||
|
|
useEffect(() => {
|
||
|
|
if (customer?.email && !recipientEmail) {
|
||
|
|
setRecipientEmail(customer.email);
|
||
|
|
}
|
||
|
|
}, [customer, recipientEmail]);
|
||
|
|
|
||
|
|
// Fetch pending notes for the current selection
|
||
|
|
useEffect(() => {
|
||
|
|
if (!customerId) {
|
||
|
|
setNotes([]);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const { start, end } = rangeDates(range, customStart, customEnd);
|
||
|
|
if (!start || !end) return;
|
||
|
|
setNotesLoading(true);
|
||
|
|
fetch(`/api/notes-for-statement?customer=${customerId}&start=${start}&end=${end}`)
|
||
|
|
.then((r) => r.json())
|
||
|
|
.then((d) => setNotes(d.notes || []))
|
||
|
|
.catch(() => setNotes([]))
|
||
|
|
.finally(() => setNotesLoading(false));
|
||
|
|
}, [customerId, range, customStart, customEnd]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (state.ok) {
|
||
|
|
if (state.data === undefined) {
|
||
|
|
toast.success("Statement sent");
|
||
|
|
router.refresh();
|
||
|
|
}
|
||
|
|
} else if (state.error) { toast.error(state.error); }
|
||
|
|
}, [state, router]);
|
||
|
|
|
||
|
|
const previewUrl = customerId
|
||
|
|
? `/api/statements/preview?customer=${customerId}&range=${range}${range === "custom" ? `&start=${customStart}&end=${customEnd}` : ""}&include_pricing=${includePricing}`
|
||
|
|
: "";
|
||
|
|
|
||
|
|
function onMarkInvoiced() {
|
||
|
|
if (notes.length === 0) {
|
||
|
|
toast.error("No notes to mark");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
startMarkTransition(async () => {
|
||
|
|
const res = await bulkUpdateStatus(notes.map((n) => n.id), "Invoiced");
|
||
|
|
if (res.ok) {
|
||
|
|
toast.success("Marked as Invoiced");
|
||
|
|
router.refresh();
|
||
|
|
} else {
|
||
|
|
toast.error(res.error);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
const totalQty = notes.reduce((a, n) => a + (n.qty_litres_supplied || 0), 0);
|
||
|
|
const totalValue = notes.reduce((a, n) => a + (n.total_value || 0), 0);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Statement details</CardTitle>
|
||
|
|
<CardDescription>Choose a customer and date range, then preview or send.</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<form action={action} className="space-y-4">
|
||
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="customer">Customer *</Label>
|
||
|
|
<Combobox
|
||
|
|
id="customer"
|
||
|
|
name="customer"
|
||
|
|
value={customerId}
|
||
|
|
onChange={setCustomerId}
|
||
|
|
items={customers.map((c) => ({ value: c.id, label: c.name }))}
|
||
|
|
placeholder="Search customers…"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="range">Date range</Label>
|
||
|
|
<Select
|
||
|
|
id="range"
|
||
|
|
name="range"
|
||
|
|
value={range}
|
||
|
|
onChange={(e) => setRange(e.target.value)}
|
||
|
|
options={[
|
||
|
|
{ value: "this-month", label: "This Month" },
|
||
|
|
{ value: "last-month", label: "Last Month" },
|
||
|
|
{ value: "custom", label: "Custom" },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{range === "custom" && (
|
||
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="start">Start date</Label>
|
||
|
|
<Input id="start" name="start" type="date" value={customStart} onChange={(e) => setCustomStart(e.target.value)} />
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="end">End date</Label>
|
||
|
|
<Input id="end" name="end" type="date" value={customEnd} onChange={(e) => setCustomEnd(e.target.value)} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="recipient_email">Recipient email *</Label>
|
||
|
|
<Input
|
||
|
|
id="recipient_email"
|
||
|
|
name="recipient_email"
|
||
|
|
type="email"
|
||
|
|
value={recipientEmail}
|
||
|
|
onChange={(e) => setRecipientEmail(e.target.value)}
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
{ccEmail && (
|
||
|
|
<p className="text-xs text-muted-foreground">CC: {ccEmail}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="include_pricing" className="flex items-center gap-2">
|
||
|
|
<Checkbox
|
||
|
|
id="include_pricing"
|
||
|
|
name="include_pricing"
|
||
|
|
checked={includePricing}
|
||
|
|
onCheckedChange={(v) => setIncludePricing(!!v)}
|
||
|
|
/>
|
||
|
|
Include pricing on statement
|
||
|
|
</Label>
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
If off, the statement will only list quantities (no prices).
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-wrap items-center gap-2 pt-2">
|
||
|
|
<Button type="button" variant="outline" asChild disabled={!previewUrl}>
|
||
|
|
<a href={previewUrl} target="_blank" rel="noopener">
|
||
|
|
<Eye className="h-4 w-4" /> Preview statement
|
||
|
|
</a>
|
||
|
|
</Button>
|
||
|
|
<Button type="submit" disabled={pending || notes.length === 0}>
|
||
|
|
<Send className="h-4 w-4" /> {pending ? "Sending…" : "Send statement"}
|
||
|
|
</Button>
|
||
|
|
<Button type="button" variant="ghost" onClick={onMarkInvoiced} disabled={notes.length === 0}>
|
||
|
|
<FileCheck2 className="h-4 w-4" /> Mark as Invoiced
|
||
|
|
</Button>
|
||
|
|
<span className="ml-auto text-xs text-muted-foreground">
|
||
|
|
From: {fromEmail || "(not configured)"}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Pending delivery notes</CardTitle>
|
||
|
|
<CardDescription>
|
||
|
|
{notesLoading
|
||
|
|
? "Loading…"
|
||
|
|
: notes.length === 0
|
||
|
|
? "No notes in this range"
|
||
|
|
: `${notes.length} note${notes.length !== 1 ? "s" : ""} • ${formatNumber(totalQty)} L • ${formatCurrency(totalValue)}`}
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<Table>
|
||
|
|
<TableHeader>
|
||
|
|
<TableRow>
|
||
|
|
<TableHead>Note #</TableHead>
|
||
|
|
<TableHead>Date</TableHead>
|
||
|
|
<TableHead>Vehicle</TableHead>
|
||
|
|
<TableHead className="text-right">Qty (L)</TableHead>
|
||
|
|
<TableHead className="text-right">Total</TableHead>
|
||
|
|
<TableHead>Status</TableHead>
|
||
|
|
</TableRow>
|
||
|
|
</TableHeader>
|
||
|
|
<TableBody>
|
||
|
|
{notes.length === 0 && !notesLoading && (
|
||
|
|
<TableRow>
|
||
|
|
<TableCell colSpan={6} className="text-center text-muted-foreground py-8">
|
||
|
|
No notes to include.
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
)}
|
||
|
|
{notes.map((n) => (
|
||
|
|
<TableRow key={n.id}>
|
||
|
|
<TableCell className="font-medium">{n.number}</TableCell>
|
||
|
|
<TableCell className="text-muted-foreground">{formatDate(n.date)}</TableCell>
|
||
|
|
<TableCell className="text-muted-foreground">{n.vehicle_registration || "—"}</TableCell>
|
||
|
|
<TableCell className="text-right">{formatNumber(n.qty_litres_supplied)}</TableCell>
|
||
|
|
<TableCell className="text-right">{formatCurrency(n.total_value)}</TableCell>
|
||
|
|
<TableCell>{n.status ? <Badge variant="outline">{n.status}</Badge> : <Badge variant="warning">Pending</Badge>}</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|