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
70 lines
2.9 KiB
TypeScript
70 lines
2.9 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 { createSupplier, updateSupplier, type ActionResult } from "@/actions/suppliers";
|
|
import { toast } from "sonner";
|
|
import type { Supplier } from "@/lib/types";
|
|
|
|
const initial: ActionResult = { ok: false, error: "" };
|
|
|
|
export function SupplierForm({ supplier }: { supplier?: Supplier }) {
|
|
const router = useRouter();
|
|
const isEdit = !!supplier;
|
|
const bound = isEdit ? updateSupplier.bind(null, supplier!.id) : createSupplier;
|
|
const [state, action, pending] = useActionState(bound, initial);
|
|
const ref = useRef<HTMLFormElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (state.ok) {
|
|
toast.success(isEdit ? "Supplier updated" : "Supplier created");
|
|
if (!isEdit) ref.current?.reset();
|
|
else router.push("/suppliers");
|
|
} else if (state.error) { toast.error(state.error); }
|
|
}, [state, isEdit, router]);
|
|
|
|
return (
|
|
<Card className="max-w-2xl">
|
|
<CardHeader>
|
|
<CardTitle>{isEdit ? "Edit supplier" : "Add a supplier"}</CardTitle>
|
|
</CardHeader>
|
|
<form ref={ref} action={action}>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name">Supplier name *</Label>
|
|
<Input id="name" name="name" required defaultValue={supplier?.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={supplier?.contact_number ?? ""} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input id="email" name="email" type="email" defaultValue={supplier?.email ?? ""} />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="address">Address</Label>
|
|
<Textarea id="address" name="address" rows={3} defaultValue={supplier?.address ?? ""} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="vat_number">VAT number</Label>
|
|
<Input id="vat_number" name="vat_number" defaultValue={supplier?.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 supplier" : "Create supplier"}
|
|
</Button>
|
|
</CardFooter>
|
|
</form>
|
|
</Card>
|
|
);
|
|
}
|