+
+
+ }
+ sx={{ textTransform: 'none' }}
+ >
+ Export
+
+
+
+
+
+ {/* Hidden file input for import */}
+
+
+
+ {/* Instructions when no search */}
+ {!searchQuery && (
+
+
+ Search for Vehicles
+
+
+ Enter a search term like "2024 Toyota Camry" or "Honda Civic" to find vehicles in the
+ catalog.
+
+
+ Use Import/Export buttons to manage catalog data in bulk via CSV files.
+
+
+ )}
+
+ {/* No Results */}
+ {noResults && (
+
+
+ No Results Found
+
+
+ No vehicles match "{searchQuery}". Try a different search term.
+
+
+ )}
+
+ {/* Results Table */}
+ {hasResults && (
+
+ {/* Bulk Actions */}
+ {selectedIds.size > 0 && (
+
+ }
+ onClick={handleBulkDeleteClick}
+ sx={{ textTransform: 'none' }}
+ >
+ Delete Selected ({selectedIds.size})
+
+
+ )}
+
+
+
+
+
+
+ 0 && selectedIds.size < items.length}
+ checked={selectedIds.size === items.length && items.length > 0}
+ onChange={handleSelectAll}
+ size="small"
+ />
+
+ Year
+ Make
+ Model
+ Trim
+ Engine
+ Transmission
+ Actions
+
+
+
+ {items.map((row) => (
+
+
+ handleSelectRow(row.id)}
+ size="small"
+ />
+
+ {row.year}
+ {row.make}
+ {row.model}
+ {row.trim}
+ {row.engineName || '-'}
+ {row.transmissionType || '-'}
+
+
+ handleDeleteClick(row)}
+ >
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+ )}
+
+ {/* Audit Log */}
+
+
+ {/* Delete Confirmation Dialog */}
+
-
- }
- variant="contained"
- onClick={() => setDialogState({ mode: 'create' })}
- sx={{ textTransform: 'none' }}
- >
- Add
-
- }
- variant="outlined"
- color="primary"
- disabled={selectedRows.length !== 1}
- onClick={() =>
- setDialogState({
- mode: 'edit',
- row: selectedRows[0],
- })
- }
- sx={{ textTransform: 'none' }}
- >
- Edit
-
- }
- variant="outlined"
- color="error"
- disabled={selectedRows.length === 0}
- onClick={() => setBulkDialogOpen(true)}
- sx={{ textTransform: 'none' }}
- >
- {selectedRows.length > 1 ? 'Bulk Delete' : 'Delete'}
-
+ {/* Import Preview Dialog */}
+
);
};
-
-interface CatalogCombinationDialogProps {
- open: boolean;
- mode: 'create' | 'edit';
- row?: CatalogGridRow;
- submitting: boolean;
- onSubmit: (values: CatalogCombinationFormValues) => Promise
;
- onClose: () => void;
- existingOptions: {
- makes: CatalogMake[];
- models: CatalogModel[];
- years: CatalogYear[];
- trims: CatalogTrim[];
- };
-}
-
-const CatalogCombinationDialog: React.FC = ({
- open,
- mode,
- row,
- submitting,
- onSubmit,
- onClose,
- existingOptions,
-}) => {
- const {
- control,
- handleSubmit,
- watch,
- reset,
- formState: { errors },
- } = useForm({
- defaultValues: {
- makeName: row?.makeName ?? '',
- modelName: row?.modelName ?? '',
- year: row?.yearValue ?? new Date().getFullYear(),
- trimName: row?.trimName ?? '',
- engineName: row?.engineName ?? '',
- transmission: row?.transmission ?? 'Automatic',
- },
- });
-
- useEffect(() => {
- reset({
- makeName: row?.makeName ?? '',
- modelName: row?.modelName ?? '',
- year: row?.yearValue ?? new Date().getFullYear(),
- trimName: row?.trimName ?? '',
- engineName: row?.engineName ?? '',
- transmission: row?.transmission ?? 'Automatic',
- });
- }, [reset, row]);
-
- const selectedMakeName = watch('makeName');
- const selectedModelName = watch('modelName');
- const selectedYearValue = watch('year');
-
- const filteredModels = useMemo(() => {
- if (!selectedMakeName) {
- return existingOptions.models;
- }
- const make = existingOptions.makes.find(
- (item) => normalizeName(item.name) === normalizeName(selectedMakeName)
- );
- if (!make) {
- return [];
- }
- return existingOptions.models.filter((model) => model.makeId === make.id);
- }, [existingOptions.models, existingOptions.makes, selectedMakeName]);
-
- const filteredTrims = useMemo(() => {
- if (!selectedYearValue) {
- return existingOptions.trims;
- }
-
- const matchingYears = existingOptions.years.filter(
- (item) => item.year === selectedYearValue
- );
-
- if (matchingYears.length === 0) {
- return [];
- }
-
- if (selectedModelName) {
- const model = existingOptions.models.find(
- (item) => normalizeName(item.name) === normalizeName(selectedModelName)
- );
- if (model) {
- const yearForModel = matchingYears.find((year) => year.modelId === model.id);
- if (yearForModel) {
- return existingOptions.trims.filter((trim) => trim.yearId === yearForModel.id);
- }
- }
- }
-
- if (matchingYears.length === 1) {
- return existingOptions.trims.filter((trim) => trim.yearId === matchingYears[0].id);
- }
-
- return existingOptions.trims;
- }, [existingOptions.trims, existingOptions.years, existingOptions.models, selectedYearValue, selectedModelName]);
-
- const submitHandler = handleSubmit((values) => onSubmit(values));
-
- return (
-
- );
-};