shoc-frontend-new/src/app/(protected)/vendors/_components/vendor-create-modal.tsx

import { useEffect } from "react";
import {
  Box,
  Button,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Stack,
  Typography,
} from "@mui/material";
import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
import { VendorRosterFormFields } from "./vendor-roster-form-fields";
import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
import { useVendorRosterForm } from "./use-vendor-roster-form";

interface VendorCreateModalProps {
  open: boolean;
  onClose: () => void;
}

export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
  const form = useVendorRosterForm({ mode: "create", onSuccess: onClose });
  const { resetForm } = form;

  useEffect(() => {
    if (!open) resetForm();
  }, [open, resetForm]);

  return (
    <Dialog
      open={open}
      onClose={form.isSaving ? undefined : onClose}
      fullWidth
      maxWidth="md"
      aria-labelledby="vendor-create-dialog-title"
      slotProps={{ paper: { role: "dialog" } }}
    >
      <DialogTitle id="vendor-create-dialog-title">
        Add Vendor Company
        <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.5 }}>
          Register a company and add zero, one, or multiple technicians.
        </Typography>
      </DialogTitle>
      <DialogContent>
        <Stack spacing={2} className="mt-1">
          {form.loadErrorMessage !== null && (
            <VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />
          )}
          {form.conflict !== null && (
            <VendorRosterConflictAlert conflict={form.conflict} onReload={form.reload} />
          )}
          <Box component="form" id="vendor-create-form" onSubmit={form.handleSubmit(form.submit)}>
            <VendorRosterFormFields
              control={form.control}
              errors={form.errors}
              companies={form.companies}
              tradeOptions={form.trades}
              selectedCompanyId={form.selectedCompanyId}
              onSelectCompany={form.selectCompany}
              onClearSelectedCompany={form.clearSelectedCompany}
            />
          </Box>
        </Stack>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} disabled={form.isSaving}>
          Cancel
        </Button>
        <Button
          color="primary"
          variant="contained"
          type="submit"
          form="vendor-create-form"
          disabled={form.isSaving || !form.isValid}
        >
          {form.isSaving ? <CircularProgress size={20} color="inherit" /> : "Add Vendor Company"}
        </Button>
      </DialogActions>
    </Dialog>
  );
}