ubi-dan-itam/src/app/purchase-orders/page.tsx

"use client";

import { useState, type FormEvent } from "react";
import { useApiList } from "@/hooks/use-api-list";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

// Shape returned by GET /api/purchase-orders — snake_case per this repo's
// API-boundary convention (see src/lib/purchase-orders.ts's toRecord()).
interface PurchaseOrderRecord {
  id: string;
  vendor_id: string;
  order_date: string;
  expected_date: string;
  received_at: string | null;
  received_by: string | null;
  created_at: string;
}

// Shape returned by GET /api/vendors — only the fields used to populate the
// vendorId <Select> (see src/app/vendors/page.tsx's VendorRecord for the
// full shape).
interface VendorRecord {
  id: string;
  name: string;
}

// Shape returned by GET /api/employees — only the fields used to populate
// the receivedById <Select> (see src/app/employees/page.tsx's
// EmployeeRecord for the full shape).
interface EmployeeRecord {
  id: string;
  name: string;
}

// Radix <Select.Item> can't take an empty-string value, so "not received
// yet" is represented by this sentinel in the form state and translated to
// "omit the key" on submit — same pattern as employees page's
// NO_MANAGER_VALUE.
const NOT_RECEIVED_VALUE = "none";

export default function PurchaseOrdersPage() {
  const {
    data: purchaseOrders,
    loading,
    error,
    refetch,
  } = useApiList<PurchaseOrderRecord>("/api/purchase-orders");
  const { data: vendors } = useApiList<VendorRecord>("/api/vendors");
  const { data: employees } = useApiList<EmployeeRecord>("/api/employees");

  const [vendorId, setVendorId] = useState("");
  const [orderDate, setOrderDate] = useState("");
  const [expectedDate, setExpectedDate] = useState("");
  const [receivedAt, setReceivedAt] = useState("");
  const [receivedById, setReceivedById] = useState(NOT_RECEIVED_VALUE);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState<string | null>(null);

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSubmitError(null);

    // Mirror the server's .refine(): receivedAt/receivedById must both be
    // empty or both be filled (src/lib/purchase-orders.ts's
    // createPurchaseOrderSchema). Server is still the source of truth if
    // this check somehow disagrees with it.
    const hasReceivedAt = receivedAt.trim() !== "";
    const hasReceivedById = receivedById !== NOT_RECEIVED_VALUE;
    if (hasReceivedAt !== hasReceivedById) {
      setSubmitError("receivedAt and receivedById must both be set or both be unset");
      return;
    }

    setSubmitting(true);

    try {
      const response = await fetch("/api/purchase-orders", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          vendorId,
          orderDate,
          expectedDate,
          // Omit both keys entirely when left empty, rather than sending
          // null — matches the create-form pattern used on other pages
          // (e.g. employees page's managerId).
          ...(hasReceivedAt ? { receivedAt } : {}),
          ...(hasReceivedById ? { receivedById } : {}),
        }),
      });

      let body: unknown;
      try {
        body = await response.json();
      } catch {
        body = null;
      }

      if (!response.ok) {
        const message =
          body !== null &&
          typeof body === "object" &&
          "error" in body &&
          typeof (body as { error: unknown }).error === "string"
            ? (body as { error: string }).error
            : "Request failed";
        setSubmitError(message);
        return;
      }

      setVendorId("");
      setOrderDate("");
      setExpectedDate("");
      setReceivedAt("");
      setReceivedById(NOT_RECEIVED_VALUE);
      refetch();
    } catch {
      setSubmitError("Request failed");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div className="flex flex-col gap-8 p-6">
      <h1 className="text-xl font-semibold">Purchase Orders</h1>

      <section className="flex flex-col gap-3">
        {loading ? (
          <p className="text-sm text-muted-foreground">Loading...</p>
        ) : error ? (
          <p className="text-sm text-destructive">{error}</p>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>ID</TableHead>
                <TableHead>Vendor ID</TableHead>
                <TableHead>Order Date</TableHead>
                <TableHead>Expected Date</TableHead>
                <TableHead>Received At</TableHead>
                <TableHead>Received By</TableHead>
                <TableHead>Created At</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {purchaseOrders.map((purchaseOrder) => (
                <TableRow key={purchaseOrder.id}>
                  <TableCell>{purchaseOrder.id}</TableCell>
                  <TableCell>{purchaseOrder.vendor_id}</TableCell>
                  <TableCell>{purchaseOrder.order_date}</TableCell>
                  <TableCell>{purchaseOrder.expected_date}</TableCell>
                  <TableCell>{purchaseOrder.received_at ?? "-"}</TableCell>
                  <TableCell>{purchaseOrder.received_by ?? "-"}</TableCell>
                  <TableCell>{purchaseOrder.created_at}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </section>

      <section className="flex max-w-sm flex-col gap-4">
        <h2 className="text-lg font-semibold">New Purchase Order</h2>

        <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
          <div className="flex flex-col gap-2">
            <Label htmlFor="vendorId">Vendor</Label>
            <Select value={vendorId} onValueChange={setVendorId} required>
              <SelectTrigger id="vendorId" className="w-full">
                <SelectValue placeholder="Select a vendor" />
              </SelectTrigger>
              <SelectContent>
                {vendors.map((vendor) => (
                  <SelectItem key={vendor.id} value={vendor.id}>
                    {vendor.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="orderDate">Order Date</Label>
            <Input
              id="orderDate"
              type="date"
              value={orderDate}
              onChange={(event) => setOrderDate(event.target.value)}
              required
            />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="expectedDate">Expected Date</Label>
            <Input
              id="expectedDate"
              type="date"
              value={expectedDate}
              onChange={(event) => setExpectedDate(event.target.value)}
              required
            />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="receivedAt">Received At (optional)</Label>
            <Input
              id="receivedAt"
              type="date"
              value={receivedAt}
              onChange={(event) => setReceivedAt(event.target.value)}
            />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="receivedById">Received By (optional)</Label>
            <Select value={receivedById} onValueChange={setReceivedById}>
              <SelectTrigger id="receivedById" className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NOT_RECEIVED_VALUE}>Not received</SelectItem>
                {employees.map((employee) => (
                  <SelectItem key={employee.id} value={employee.id}>
                    {employee.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {submitError ? <p className="text-sm text-destructive">{submitError}</p> : null}

          <Button type="submit" disabled={submitting}>
            {submitting ? "Creating..." : "Create Purchase Order"}
          </Button>
        </form>
      </section>
    </div>
  );
}