1efa979443
Adds complete initial codebase for the RJ Bulk Supplies fuel delivery backoffice: - Authentication pages and protected route layouts - Customer, supplier, fuel purchase, and delivery note management - Custom reporting and customer statement sending tools - Full UI component library and Tailwind styling - Server actions, API routes, and PocketBase integration - Development scripts and project configuration updates - Updated README and package metadata
79 lines
3.1 KiB
TypeScript
79 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useActionState, useEffect, useRef } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
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 { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { createCustomer, updateCustomer, type ActionResult } from "@/actions/customers";
|
|
import { toast } from "sonner";
|
|
import type { Customer } from "@/lib/types";
|
|
|
|
const initial: ActionResult = { ok: false, error: "" };
|
|
|
|
interface CustomerFormProps {
|
|
customer?: Customer;
|
|
}
|
|
|
|
export function CustomerForm({ customer }: CustomerFormProps) {
|
|
const router = useRouter();
|
|
const isEdit = !!customer;
|
|
const boundAction = isEdit ? updateCustomer.bind(null, customer!.id) : createCustomer;
|
|
const [state, formAction, pending] = useActionState(boundAction, initial);
|
|
const formRef = useRef<HTMLFormElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (state.ok) {
|
|
toast.success(isEdit ? "Customer updated" : "Customer created");
|
|
if (!isEdit) {
|
|
formRef.current?.reset();
|
|
} else {
|
|
router.push("/customers");
|
|
}
|
|
} else if (state.error) { toast.error(state.error); }
|
|
}, [state, isEdit, router]);
|
|
|
|
return (
|
|
<Card className="max-w-2xl">
|
|
<CardHeader>
|
|
<CardTitle>{isEdit ? "Edit customer" : "Add a customer"}</CardTitle>
|
|
</CardHeader>
|
|
<form ref={formRef} action={formAction}>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name">Customer name *</Label>
|
|
<Input id="name" name="name" required defaultValue={customer?.name ?? ""} autoFocus />
|
|
</div>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="contact_number">Contact number</Label>
|
|
<Input id="contact_number" name="contact_number" defaultValue={customer?.contact_number ?? ""} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input id="email" name="email" type="email" defaultValue={customer?.email ?? ""} />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="address">Address</Label>
|
|
<Textarea id="address" name="address" rows={3} defaultValue={customer?.address ?? ""} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="vat_number">VAT number</Label>
|
|
<Input id="vat_number" name="vat_number" defaultValue={customer?.vat_number ?? ""} />
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="flex justify-between">
|
|
<Button type="button" variant="ghost" onClick={() => router.back()}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" disabled={pending}>
|
|
{pending ? "Saving…" : isEdit ? "Update customer" : "Create customer"}
|
|
</Button>
|
|
</CardFooter>
|
|
</form>
|
|
</Card>
|
|
);
|
|
}
|