seahaven-ap/src/pages/settings/vendors/new.tsx

import { Container } from "@mui/material";
import { useUpsertVendor } from "@/domain/vendors/use-vendors";
import { useNavigate } from "@/router";
import { SettingsFormShell, type SettingsFormField } from "@/settings/SettingsFormShell";

const fields: SettingsFormField[] = [
  { name: "name", label: "Name" },
  { name: "email", label: "Email", type: "email" },
  {
    name: "defaultPaymentMethod",
    label: "Default payment method",
    type: "select",
    options: [
      { value: "check", label: "Check" },
      { value: "ach", label: "ACH" },
    ],
  },
];

function createId(): string {
  return `vendor-${crypto.randomUUID().slice(0, 8)}`;
}

export default function VendorNewPage() {
  const navigate = useNavigate();
  const upsert = useUpsertVendor();

  return (
    <Container maxWidth="md" sx={{ py: 4 }}>
      <SettingsFormShell
        title="New vendor"
        testId="settings-vendor-form"
        fields={fields}
        initialValues={{ name: "", email: "", defaultPaymentMethod: "check" }}
        onCancel={() => navigate("/settings/vendors")}
        onSave={async (values) => {
          await upsert.mutateAsync({
            id: createId(),
            name: values.name.trim(),
            email: values.email.trim(),
            defaultPaymentMethod: values.defaultPaymentMethod as "check" | "ach",
          });
          navigate("/settings/vendors");
        }}
      />
    </Container>
  );
}