make and models
This commit is contained in:
parent
17d8e1c90d
commit
c5f6d2f596
@ -0,0 +1,76 @@
|
||||
"use client"
|
||||
|
||||
import { MakeAndModelForm } from "@/modules/settings/make-and-models/make-and-model-form"
|
||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
||||
import FormDialog from "@/shared/components/form-dialog"
|
||||
import { MAKE_AND_MODEL_ROUTES } from "@garage/api"
|
||||
import type { MakeAndModelsClient } from "@garage/api"
|
||||
|
||||
export default function MakeAndModelsPage() {
|
||||
return (
|
||||
<ResourcePage<MakeAndModelsClient>
|
||||
pageTitle="Make & Models"
|
||||
routeKey={MAKE_AND_MODEL_ROUTES.INDEX}
|
||||
getClient={(api) => api.makeAndModels}
|
||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
||||
actions: (
|
||||
<FormDialog title="Make & Model">
|
||||
{(resourceId) => (
|
||||
<MakeAndModelForm
|
||||
resourceId={resourceId}
|
||||
initialData={selectedItem}
|
||||
onSuccess={invalidateQuery}
|
||||
/>
|
||||
)}
|
||||
</FormDialog>
|
||||
),
|
||||
})}
|
||||
columns={({ actionsColumn }) => [
|
||||
{
|
||||
accessorKey: "make",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Make" />,
|
||||
cell: ({ row }) => (row.original as any).make ?? "—",
|
||||
},
|
||||
{
|
||||
accessorKey: "model",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Model" />,
|
||||
cell: ({ row }) => (row.original as any).model ?? "—",
|
||||
},
|
||||
{
|
||||
accessorKey: "year",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Year" />,
|
||||
cell: ({ row }) => (row.original as any).year ?? "—",
|
||||
},
|
||||
{
|
||||
accessorKey: "sub_model",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Sub Model" />,
|
||||
cell: ({ row }) => (row.original as any).sub_model ?? "—",
|
||||
},
|
||||
{
|
||||
accessorKey: "engine_size",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Engine Size" />,
|
||||
cell: ({ row }) => (row.original as any).engine_size ?? "—",
|
||||
},
|
||||
{
|
||||
accessorKey: "drivetrain",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Drivetrain" />,
|
||||
cell: ({ row }) => (row.original as any).drivetrain ?? "—",
|
||||
},
|
||||
{
|
||||
accessorKey: "is_active",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
||||
cell: ({ row }) => {
|
||||
const active = (row.original as any).is_active
|
||||
return (
|
||||
<span className={active ? "text-green-600" : "text-muted-foreground"}>
|
||||
{active ? "Active" : "Inactive"}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
},
|
||||
actionsColumn(),
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@ -175,6 +175,7 @@ export const navGroups: NavGroup[] = [
|
||||
{ title: "Departments", href: "/settings/departments", icon: <Building2Icon /> },
|
||||
{ title: "Insurance Types", href: "/settings/insurance-types", icon: <ShieldIcon /> },
|
||||
{ title: "Tax & Rates", href: "/settings/tax-rates", icon: <ReceiptTextIcon /> },
|
||||
{ title: "Make & Models", href: "/settings/make-and-models", icon: <CarIcon /> },
|
||||
{ title: "Configurations", href: "/settings/configurations/preferences/sales", icon: <SettingsIcon /> },
|
||||
{ title: "Templates", href: "/settings/templates", icon: <ClipboardListIcon /> },
|
||||
{ title: "Integrations", href: "/settings/integrations/providers", icon: <PlugZapIcon /> },
|
||||
|
||||
@ -0,0 +1,222 @@
|
||||
"use client"
|
||||
|
||||
import { AlertTriangle, Plus, Save } from "lucide-react"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Alert, AlertTitle } from "@/shared/components/ui/alert"
|
||||
import { FieldGroup } from "@/shared/components/ui/field"
|
||||
import {
|
||||
Rhform,
|
||||
RhfTextField,
|
||||
RhfCheckboxField,
|
||||
RhfAsyncSelectField,
|
||||
} from "@/shared/components/form"
|
||||
import { toast } from "sonner"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { useResourceForm } from "@/shared/hooks/use-resource-form"
|
||||
import { useFormMutation } from "@/shared/hooks/use-form-mutation"
|
||||
import { toRelation, toId } from "@/shared/lib/utils"
|
||||
|
||||
import { makeAndModelFormSchema, type MakeAndModelFormValues } from "./make-and-model.schema"
|
||||
import { MAKE_AND_MODEL_ROUTES } from "@garage/api"
|
||||
|
||||
export type MakeAndModelFormProps = {
|
||||
resourceId?: string | null
|
||||
initialData?: unknown
|
||||
onSuccess?: () => void
|
||||
}
|
||||
|
||||
const DEFAULT_VALUES: MakeAndModelFormValues = {
|
||||
make: "",
|
||||
model: "",
|
||||
year: "",
|
||||
sub_model: "",
|
||||
engine_size: "",
|
||||
drivetrain: "",
|
||||
shop_type: null,
|
||||
body_type: null,
|
||||
fuel_type: null,
|
||||
transmission: null,
|
||||
is_active: true,
|
||||
}
|
||||
|
||||
function mapToFormValues(data: unknown): MakeAndModelFormValues {
|
||||
const d = (data as any)?.data ?? data ?? {}
|
||||
return {
|
||||
make: d.make ?? "",
|
||||
model: d.model ?? "",
|
||||
year: d.year ?? "",
|
||||
sub_model: d.sub_model ?? "",
|
||||
engine_size: d.engine_size ?? "",
|
||||
drivetrain: d.drivetrain ?? "",
|
||||
shop_type: toRelation(d.shop_type_id, d.shop_type_title ?? d.shop_type_name),
|
||||
body_type: toRelation(d.body_type_id, d.body_type_title ?? d.body_type_name),
|
||||
fuel_type: toRelation(d.fuel_id, d.fuel_title ?? d.fuel_name),
|
||||
transmission: toRelation(d.transmission_id, d.transmission_title ?? d.transmission_name),
|
||||
is_active: d.is_active ?? true,
|
||||
}
|
||||
}
|
||||
|
||||
function mapFormToPayload(values: MakeAndModelFormValues) {
|
||||
return {
|
||||
make: values.make,
|
||||
model: values.model,
|
||||
year: values.year || undefined,
|
||||
sub_model: values.sub_model || undefined,
|
||||
engine_size: values.engine_size || undefined,
|
||||
drivetrain: values.drivetrain || undefined,
|
||||
shop_type_id: toId(values.shop_type),
|
||||
body_type_id: toId(values.body_type),
|
||||
fuel_id: toId(values.fuel_type),
|
||||
transmission_id: toId(values.transmission),
|
||||
is_active: values.is_active,
|
||||
}
|
||||
}
|
||||
|
||||
const mapLookupOption = (item: any) => ({
|
||||
value: String(item.id),
|
||||
label: item.title ?? item.name ?? "",
|
||||
})
|
||||
|
||||
const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
|
||||
|
||||
export function MakeAndModelForm({ resourceId, initialData, onSuccess }: MakeAndModelFormProps) {
|
||||
const api = useAuthApi()
|
||||
|
||||
const { form, isEditing } = useResourceForm<MakeAndModelFormValues, any>({
|
||||
schema: makeAndModelFormSchema,
|
||||
defaultValues: DEFAULT_VALUES,
|
||||
resourceId,
|
||||
initialData,
|
||||
initialize: (id) => api.makeAndModels.show(id),
|
||||
queryKey: [MAKE_AND_MODEL_ROUTES.BY_ID, resourceId],
|
||||
mapToFormValues,
|
||||
})
|
||||
|
||||
const { mutate, error, isPending } = useFormMutation(form, {
|
||||
mutationFn: (values: MakeAndModelFormValues) => {
|
||||
const payload = mapFormToPayload(values)
|
||||
const promise = isEditing && resourceId
|
||||
? api.makeAndModels.update(resourceId, payload)
|
||||
: api.makeAndModels.create(payload)
|
||||
|
||||
toast.promise(promise, {
|
||||
loading: isEditing ? "Updating make & model..." : "Creating make & model...",
|
||||
success: isEditing ? "Make & model updated successfully" : "Make & model created successfully",
|
||||
error: isEditing ? "Failed to update make & model" : "Failed to create make & model",
|
||||
})
|
||||
|
||||
return promise
|
||||
},
|
||||
onSuccess: () => {
|
||||
form.reset()
|
||||
onSuccess?.()
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Rhform form={form} onSubmit={(values) => mutate(values)}>
|
||||
{error && (
|
||||
<Alert variant="destructive" className="mb-4">
|
||||
<AlertTriangle className="me-2 h-4 w-4" />
|
||||
<AlertTitle>
|
||||
{isEditing ? "Failed to update make & model" : "Failed to create make & model"}
|
||||
</AlertTitle>
|
||||
{error.message}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<FieldGroup>
|
||||
<RhfTextField
|
||||
name="make"
|
||||
label="Make"
|
||||
placeholder="e.g. Toyota"
|
||||
required
|
||||
/>
|
||||
|
||||
<RhfTextField
|
||||
name="model"
|
||||
label="Model"
|
||||
placeholder="e.g. Camry"
|
||||
required
|
||||
/>
|
||||
|
||||
<RhfTextField
|
||||
name="year"
|
||||
label="Year"
|
||||
placeholder="e.g. 2022"
|
||||
/>
|
||||
|
||||
<RhfTextField
|
||||
name="sub_model"
|
||||
label="Sub Model"
|
||||
placeholder="e.g. LE"
|
||||
/>
|
||||
|
||||
<RhfAsyncSelectField
|
||||
name="shop_type"
|
||||
label="Shop Type"
|
||||
placeholder="Select shop type..."
|
||||
queryKey={["shop-types-list"]}
|
||||
listFn={() => api.shopTypes.list()}
|
||||
mapOption={mapLookupOption}
|
||||
{...STORE_OBJECT}
|
||||
/>
|
||||
|
||||
<RhfAsyncSelectField
|
||||
name="body_type"
|
||||
label="Body Type"
|
||||
placeholder="Select body type..."
|
||||
queryKey={["body-types-list"]}
|
||||
listFn={() => api.vehicleAttributes.listBodyTypes()}
|
||||
mapOption={mapLookupOption}
|
||||
{...STORE_OBJECT}
|
||||
/>
|
||||
|
||||
<RhfAsyncSelectField
|
||||
name="fuel_type"
|
||||
label="Fuel Type"
|
||||
placeholder="Select fuel type..."
|
||||
queryKey={["fuel-types-list"]}
|
||||
listFn={() => api.vehicleAttributes.listFuelTypes()}
|
||||
mapOption={mapLookupOption}
|
||||
{...STORE_OBJECT}
|
||||
/>
|
||||
|
||||
<RhfAsyncSelectField
|
||||
name="transmission"
|
||||
label="Transmission"
|
||||
placeholder="Select transmission..."
|
||||
queryKey={["transmissions-list"]}
|
||||
listFn={() => api.vehicleAttributes.listTransmissions()}
|
||||
mapOption={mapLookupOption}
|
||||
{...STORE_OBJECT}
|
||||
/>
|
||||
|
||||
<RhfTextField
|
||||
name="engine_size"
|
||||
label="Engine Size"
|
||||
placeholder="e.g. 2.5L"
|
||||
/>
|
||||
|
||||
<RhfTextField
|
||||
name="drivetrain"
|
||||
label="Drivetrain"
|
||||
placeholder="e.g. FWD"
|
||||
/>
|
||||
|
||||
<RhfCheckboxField
|
||||
name="is_active"
|
||||
label="Active"
|
||||
/>
|
||||
|
||||
<Button type="submit" variant="default" disabled={isPending}>
|
||||
{isEditing ? <Save /> : <Plus />}
|
||||
{isPending
|
||||
? (isEditing ? "Updating..." : "Creating...")
|
||||
: (isEditing ? "Update Make & Model" : "Create Make & Model")}
|
||||
</Button>
|
||||
</FieldGroup>
|
||||
</Rhform>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
import { z } from "zod"
|
||||
|
||||
const relationFieldSchema = z.object({ value: z.string(), label: z.string() }).nullable()
|
||||
|
||||
export const makeAndModelFormSchema = z.object({
|
||||
make: z.string().min(1, "Make is required"),
|
||||
model: z.string().min(1, "Model is required"),
|
||||
year: z.string().optional(),
|
||||
sub_model: z.string().optional(),
|
||||
engine_size: z.string().optional(),
|
||||
drivetrain: z.string().optional(),
|
||||
shop_type: relationFieldSchema,
|
||||
body_type: relationFieldSchema,
|
||||
fuel_type: relationFieldSchema,
|
||||
transmission: relationFieldSchema,
|
||||
is_active: z.boolean().default(true),
|
||||
})
|
||||
|
||||
export type MakeAndModelFormValues = z.infer<typeof makeAndModelFormSchema>
|
||||
export { relationFieldSchema }
|
||||
284
apps/dashboard/modules/vehicles/rhf-vehicle-identity-field.tsx
Normal file
284
apps/dashboard/modules/vehicles/rhf-vehicle-identity-field.tsx
Normal file
@ -0,0 +1,284 @@
|
||||
"use client"
|
||||
|
||||
import { useRef, useState, useEffect } from "react"
|
||||
import { useFormContext, useController, useWatch } from "react-hook-form"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { Loader2 } from "lucide-react"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { Field, FieldLabel, FieldError } from "@/shared/components/ui/field"
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxInput,
|
||||
ComboboxContent,
|
||||
ComboboxList,
|
||||
ComboboxItem,
|
||||
ComboboxEmpty,
|
||||
} from "@/shared/components/ui/combobox"
|
||||
import type { VehicleFormValues } from "./vehicle.schema"
|
||||
|
||||
// ── Helpers ──
|
||||
|
||||
function unique(values: (string | undefined)[]): string[] {
|
||||
return [...new Set(values.filter((v): v is string => !!v))].sort()
|
||||
}
|
||||
|
||||
// ── Internal combobox for a single free-text + suggestion field ──
|
||||
|
||||
type VehicleComboboxProps = {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
onBlur?: () => void
|
||||
options: string[]
|
||||
loading?: boolean
|
||||
placeholder: string
|
||||
label: string
|
||||
error?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
function VehicleCombobox({
|
||||
value,
|
||||
onChange,
|
||||
onBlur,
|
||||
options,
|
||||
loading,
|
||||
placeholder,
|
||||
label,
|
||||
error,
|
||||
required,
|
||||
disabled,
|
||||
}: VehicleComboboxProps) {
|
||||
const anchorRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
// Local state keeps the input text in sync even when the form value
|
||||
// is changed externally (e.g., cascade reset or edit-mode population).
|
||||
const [inputText, setInputText] = useState(value ?? "")
|
||||
|
||||
useEffect(() => {
|
||||
setInputText(value ?? "")
|
||||
}, [value])
|
||||
|
||||
// Client-side filtering of suggestions based on what's been typed
|
||||
const filtered = options.filter((opt) =>
|
||||
!inputText || opt.toLowerCase().includes(inputText.toLowerCase()),
|
||||
)
|
||||
|
||||
return (
|
||||
<Field data-invalid={!!error || undefined}>
|
||||
<FieldLabel>
|
||||
{label}
|
||||
{required && <span className="text-destructive ms-0.5">*</span>}
|
||||
</FieldLabel>
|
||||
<div ref={anchorRef}>
|
||||
<Combobox
|
||||
value={inputText || null}
|
||||
onValueChange={(val) => {
|
||||
const str = val !== null ? String(val) : ""
|
||||
setInputText(str)
|
||||
onChange(str)
|
||||
}}
|
||||
disabled={disabled}
|
||||
onInputValueChange={(text, { reason }) => {
|
||||
if (reason === "input-change") {
|
||||
setInputText(text)
|
||||
onChange(text)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ComboboxInput
|
||||
placeholder={placeholder}
|
||||
showClear={!!inputText}
|
||||
onBlur={onBlur}
|
||||
aria-invalid={!!error || undefined}
|
||||
/>
|
||||
<ComboboxContent anchor={anchorRef}>
|
||||
<ComboboxList>
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
{!loading &&
|
||||
filtered.map((opt) => (
|
||||
<ComboboxItem key={opt} value={opt}>
|
||||
{opt}
|
||||
</ComboboxItem>
|
||||
))}
|
||||
{!loading && filtered.length === 0 && (
|
||||
<ComboboxEmpty>
|
||||
{inputText
|
||||
? `No suggestions for "${inputText}"`
|
||||
: "Start typing to see suggestions"}
|
||||
</ComboboxEmpty>
|
||||
)}
|
||||
</ComboboxList>
|
||||
</ComboboxContent>
|
||||
</Combobox>
|
||||
</div>
|
||||
{error && <FieldError>{error}</FieldError>}
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Main composite field ──
|
||||
|
||||
/**
|
||||
* Manages the four vehicle identity fields (make, model, year, sub_model) as
|
||||
* a single coordinated component. Each field shows autocomplete suggestions
|
||||
* fetched from the make-and-models API, filtered by the values of the
|
||||
* preceding fields. All four fields accept free-text — the user is never
|
||||
* forced to pick from the suggestion list.
|
||||
*
|
||||
* Cascade behaviour: changing make resets model → year → sub_model;
|
||||
* changing model resets year → sub_model; changing year resets sub_model.
|
||||
*/
|
||||
export function RhfVehicleIdentityField() {
|
||||
const api = useAuthApi()
|
||||
const { control, setValue } = useFormContext<VehicleFormValues>()
|
||||
|
||||
// Read shop_type to pass as shop_type_id filter to the API
|
||||
const shopType = useWatch({ control, name: "shop_type" })
|
||||
const shopTypeId = shopType?.value
|
||||
|
||||
const makeCtrl = useController({ name: "make", control })
|
||||
const modelCtrl = useController({ name: "model", control })
|
||||
const yearCtrl = useController({ name: "year", control })
|
||||
const subModelCtrl = useController({ name: "sub_model", control })
|
||||
|
||||
const makeValue = makeCtrl.field.value ?? ""
|
||||
const modelValue = modelCtrl.field.value ?? ""
|
||||
const yearValue = yearCtrl.field.value ?? ""
|
||||
|
||||
// ── Fetch all records once (large per_page), then derive unique suggestion
|
||||
// lists client-side so we don't invent API endpoints. ──
|
||||
|
||||
type MakeAndModelRecord = {
|
||||
id?: number
|
||||
shop_type_id?: number
|
||||
make?: string
|
||||
model?: string
|
||||
year?: string
|
||||
sub_model?: string
|
||||
}
|
||||
|
||||
function extractRecords(response: unknown): MakeAndModelRecord[] {
|
||||
const obj = response as any
|
||||
if (Array.isArray(obj?.data)) return obj.data
|
||||
if (Array.isArray(obj?.data?.data)) return obj.data.data
|
||||
if (Array.isArray(obj)) return obj
|
||||
return []
|
||||
}
|
||||
|
||||
const { data: allRecords = [], isLoading: recordsLoading } = useQuery<MakeAndModelRecord[]>({
|
||||
queryKey: ["make-and-models-all", shopTypeId],
|
||||
queryFn: async () => {
|
||||
const res = await api.makeAndModels.list({ per_page: 9999, ...(shopTypeId ? { shop_type_id: shopTypeId } : {}) })
|
||||
return extractRecords(res)
|
||||
},
|
||||
staleTime: 5 * 60 * 1000,
|
||||
})
|
||||
|
||||
// Derive unique sorted lists from the full record set, filtered by upstream selections.
|
||||
const makes = unique(allRecords.map((r) => r.make))
|
||||
|
||||
const models = unique(
|
||||
allRecords
|
||||
.filter((r) => !makeValue || r.make === makeValue)
|
||||
.map((r) => r.model),
|
||||
)
|
||||
|
||||
const years = unique(
|
||||
allRecords
|
||||
.filter((r) => (!makeValue || r.make === makeValue) && (!modelValue || r.model === modelValue))
|
||||
.map((r) => r.year),
|
||||
)
|
||||
|
||||
const subModels = unique(
|
||||
allRecords
|
||||
.filter(
|
||||
(r) =>
|
||||
(!makeValue || r.make === makeValue) &&
|
||||
(!modelValue || r.model === modelValue) &&
|
||||
(!yearValue || r.year === yearValue),
|
||||
)
|
||||
.map((r) => r.sub_model),
|
||||
)
|
||||
|
||||
const makesLoading = recordsLoading
|
||||
const modelsLoading = false
|
||||
const yearsLoading = false
|
||||
const subModelsLoading = false
|
||||
|
||||
// ── Cascading onChange handlers ──
|
||||
|
||||
function handleMakeChange(val: string) {
|
||||
makeCtrl.field.onChange(val)
|
||||
// Reset all downstream fields whenever make changes
|
||||
setValue("model", "")
|
||||
setValue("year", "")
|
||||
setValue("sub_model", "")
|
||||
}
|
||||
|
||||
function handleModelChange(val: string) {
|
||||
modelCtrl.field.onChange(val)
|
||||
setValue("year", "")
|
||||
setValue("sub_model", "")
|
||||
}
|
||||
|
||||
function handleYearChange(val: string) {
|
||||
yearCtrl.field.onChange(val)
|
||||
setValue("sub_model", "")
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<VehicleCombobox
|
||||
label="Make"
|
||||
placeholder="e.g. Toyota"
|
||||
required
|
||||
value={makeValue}
|
||||
onChange={handleMakeChange}
|
||||
onBlur={makeCtrl.field.onBlur}
|
||||
options={makes}
|
||||
loading={makesLoading}
|
||||
error={makeCtrl.fieldState.error?.message}
|
||||
/>
|
||||
<VehicleCombobox
|
||||
label="Model"
|
||||
placeholder="e.g. Camry"
|
||||
required
|
||||
value={modelValue}
|
||||
onChange={handleModelChange}
|
||||
onBlur={modelCtrl.field.onBlur}
|
||||
options={models}
|
||||
loading={modelsLoading}
|
||||
error={modelCtrl.fieldState.error?.message}
|
||||
/>
|
||||
<VehicleCombobox
|
||||
label="Year"
|
||||
placeholder="e.g. 2024"
|
||||
required
|
||||
value={yearValue}
|
||||
onChange={handleYearChange}
|
||||
onBlur={yearCtrl.field.onBlur}
|
||||
options={years}
|
||||
loading={yearsLoading}
|
||||
error={yearCtrl.fieldState.error?.message}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<VehicleCombobox
|
||||
label="Sub Model"
|
||||
placeholder="e.g. LE"
|
||||
value={subModelCtrl.field.value ?? ""}
|
||||
onChange={(val) => subModelCtrl.field.onChange(val)}
|
||||
onBlur={subModelCtrl.field.onBlur}
|
||||
options={subModels}
|
||||
loading={subModelsLoading}
|
||||
error={subModelCtrl.fieldState.error?.message}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -17,6 +17,7 @@ import { BodyTypeInlineForm } from "./inline-forms/body-type-inline-form"
|
||||
import { FuelTypeInlineForm } from "./inline-forms/fuel-type-inline-form"
|
||||
import { TransmissionInlineForm } from "./inline-forms/transmission-inline-form"
|
||||
import { ColorInlineForm } from "./inline-forms/color-inline-form"
|
||||
import { RhfVehicleIdentityField } from "./rhf-vehicle-identity-field"
|
||||
import { toast } from "sonner"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { useResourceForm } from "@/shared/hooks/use-resource-form"
|
||||
@ -156,14 +157,8 @@ export function VehicleForm({ resourceId, initialData, onSuccess }: VehicleFormP
|
||||
)}
|
||||
|
||||
<FieldGroup>
|
||||
{/* Vehicle identity */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<RhfTextField name="make" label="Make" placeholder="e.g. Toyota" required />
|
||||
<RhfTextField name="model" label="Model" placeholder="e.g. Camry" required />
|
||||
<RhfTextField name="year" label="Year" placeholder="e.g. 2024" required />
|
||||
</div>
|
||||
|
||||
<RhfTextField name="sub_model" label="Sub Model" placeholder="e.g. LE" />
|
||||
{/* Vehicle identity — cascading make/model/year/sub_model autocomplete */}
|
||||
<RhfVehicleIdentityField />
|
||||
|
||||
{/* Associations */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user