|
|
@@ -1,38 +1,47 @@
|
|
|
-"use client";
|
|
|
+'use client'
|
|
|
|
|
|
-import { useState, useEffect, useTransition } from "react";
|
|
|
-import { useRouter } from "next/navigation";
|
|
|
+import { useState, useEffect, useTransition } from 'react'
|
|
|
+import { useRouter } from 'next/navigation'
|
|
|
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
|
|
+import { Button } from '@/components/ui/button'
|
|
|
+import { Input } from '@/components/ui/input'
|
|
|
+import { Label } from '@/components/ui/label'
|
|
|
import {
|
|
|
- Dialog, DialogContent, DialogHeader, DialogTitle,
|
|
|
-} from "@/components/ui/dialog";
|
|
|
-import { Button } from "@/components/ui/button";
|
|
|
-import { Input } from "@/components/ui/input";
|
|
|
-import { Label } from "@/components/ui/label";
|
|
|
+ Select,
|
|
|
+ SelectContent,
|
|
|
+ SelectItem,
|
|
|
+ SelectTrigger,
|
|
|
+ SelectValue,
|
|
|
+} from '@/components/ui/select'
|
|
|
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
|
|
import {
|
|
|
- Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
|
|
-} from "@/components/ui/select";
|
|
|
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
|
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
|
|
-import { Check, ChevronsUpDown, Loader2, Settings } from "lucide-react";
|
|
|
-import { cn } from "@/lib/utils";
|
|
|
-import Link from "next/link";
|
|
|
-import { toast } from "sonner";
|
|
|
-import { useServiceType } from "@/components/service-type-context";
|
|
|
-import { createInspection } from "../Actions/inspectionActions";
|
|
|
-import { getVehicles } from "@/features/vehicles/Actions/vehicleActions";
|
|
|
+ Command,
|
|
|
+ CommandEmpty,
|
|
|
+ CommandGroup,
|
|
|
+ CommandInput,
|
|
|
+ CommandItem,
|
|
|
+ CommandList,
|
|
|
+} from '@/components/ui/command'
|
|
|
+import { Check, ChevronsUpDown, Loader2, Settings } from 'lucide-react'
|
|
|
+import { cn } from '@/lib/utils'
|
|
|
+import Link from 'next/link'
|
|
|
+import { toast } from 'sonner'
|
|
|
+import { useServiceType } from '@/components/service-type-context'
|
|
|
+import { createInspection } from '../Actions/inspectionActions'
|
|
|
+import { getVehicles } from '@/features/vehicles/Actions/vehicleActions'
|
|
|
|
|
|
interface TemplateOption {
|
|
|
- id: string;
|
|
|
- name: string;
|
|
|
- isDefault: boolean;
|
|
|
+ id: string
|
|
|
+ name: string
|
|
|
+ isDefault: boolean
|
|
|
}
|
|
|
|
|
|
interface VehicleOption {
|
|
|
- id: string;
|
|
|
- make: string;
|
|
|
- model: string;
|
|
|
- year: number;
|
|
|
- licensePlate: string | null;
|
|
|
+ id: string
|
|
|
+ make: string
|
|
|
+ model: string
|
|
|
+ year: number
|
|
|
+ licensePlate: string | null
|
|
|
}
|
|
|
|
|
|
export function NewInspectionDialog({
|
|
|
@@ -41,71 +50,73 @@ export function NewInspectionDialog({
|
|
|
templates,
|
|
|
preselectedVehicleId,
|
|
|
}: {
|
|
|
- open: boolean;
|
|
|
- onOpenChange: (open: boolean) => void;
|
|
|
- templates: TemplateOption[];
|
|
|
- preselectedVehicleId?: string;
|
|
|
+ open: boolean
|
|
|
+ onOpenChange: (open: boolean) => void
|
|
|
+ templates: TemplateOption[]
|
|
|
+ preselectedVehicleId?: string
|
|
|
}) {
|
|
|
- const router = useRouter();
|
|
|
- const serviceType = useServiceType();
|
|
|
- const [isPending, startTransition] = useTransition();
|
|
|
- const [vehicles, setVehicles] = useState<VehicleOption[]>([]);
|
|
|
- const [loadingVehicles, setLoadingVehicles] = useState(false);
|
|
|
+ const router = useRouter()
|
|
|
+ const serviceType = useServiceType()
|
|
|
+ const [isPending, startTransition] = useTransition()
|
|
|
+ const [vehicles, setVehicles] = useState<VehicleOption[]>([])
|
|
|
+ const [loadingVehicles, setLoadingVehicles] = useState(false)
|
|
|
|
|
|
- const defaultTemplate = templates.find((t) => t.isDefault);
|
|
|
- const [vehicleId, setVehicleId] = useState(preselectedVehicleId || "");
|
|
|
- const [templateId, setTemplateId] = useState(defaultTemplate?.id || "");
|
|
|
- const [mileage, setMileage] = useState("");
|
|
|
- const [vehiclePopoverOpen, setVehiclePopoverOpen] = useState(false);
|
|
|
+ const defaultTemplate = templates.find((t) => t.isDefault)
|
|
|
+ const [vehicleId, setVehicleId] = useState(preselectedVehicleId || '')
|
|
|
+ const [templateId, setTemplateId] = useState(defaultTemplate?.id || '')
|
|
|
+ const [mileage, setMileage] = useState('')
|
|
|
+ const [vehiclePopoverOpen, setVehiclePopoverOpen] = useState(false)
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (open && vehicles.length === 0) {
|
|
|
- setLoadingVehicles(true);
|
|
|
+ setLoadingVehicles(true)
|
|
|
getVehicles().then((result) => {
|
|
|
if (result.success && result.data) {
|
|
|
- setVehicles(result.data.map((v) => ({
|
|
|
- id: v.id,
|
|
|
- make: v.make,
|
|
|
- model: v.model,
|
|
|
- year: v.year,
|
|
|
- licensePlate: v.licensePlate,
|
|
|
- })));
|
|
|
+ setVehicles(
|
|
|
+ result.data.map((v) => ({
|
|
|
+ id: v.id,
|
|
|
+ make: v.make,
|
|
|
+ model: v.model,
|
|
|
+ year: v.year,
|
|
|
+ licensePlate: v.licensePlate,
|
|
|
+ }))
|
|
|
+ )
|
|
|
}
|
|
|
- setLoadingVehicles(false);
|
|
|
- });
|
|
|
+ setLoadingVehicles(false)
|
|
|
+ })
|
|
|
}
|
|
|
- }, [open, vehicles.length]);
|
|
|
+ }, [open, vehicles.length])
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (open) {
|
|
|
- setVehicleId(preselectedVehicleId || "");
|
|
|
- setTemplateId(defaultTemplate?.id || "");
|
|
|
- setMileage("");
|
|
|
+ setVehicleId(preselectedVehicleId || '')
|
|
|
+ setTemplateId(defaultTemplate?.id || '')
|
|
|
+ setMileage('')
|
|
|
}
|
|
|
- }, [open, preselectedVehicleId, defaultTemplate?.id]);
|
|
|
+ }, [open, preselectedVehicleId, defaultTemplate?.id])
|
|
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
|
- e.preventDefault();
|
|
|
+ e.preventDefault()
|
|
|
startTransition(async () => {
|
|
|
const result = await createInspection({
|
|
|
vehicleId,
|
|
|
templateId,
|
|
|
mileage: mileage ? parseInt(mileage, 10) : undefined,
|
|
|
- });
|
|
|
+ })
|
|
|
|
|
|
if (result.success && result.data) {
|
|
|
- toast.success("Inspection created");
|
|
|
- onOpenChange(false);
|
|
|
- router.push(`/inspections/${result.data.id}`);
|
|
|
+ toast.success('Inspection created')
|
|
|
+ onOpenChange(false)
|
|
|
+ router.push(`/inspections/${result.data.id}`)
|
|
|
} else {
|
|
|
- toast.error(result.error || "Failed to create inspection");
|
|
|
+ toast.error(result.error || 'Failed to create inspection')
|
|
|
}
|
|
|
- });
|
|
|
- };
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
return (
|
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
|
- <DialogContent className="sm:max-w-md">
|
|
|
+ <DialogContent className="sm:max-w-md" aria-describedby={undefined}>
|
|
|
<DialogHeader>
|
|
|
<DialogTitle>New Inspection</DialogTitle>
|
|
|
</DialogHeader>
|
|
|
@@ -128,12 +139,12 @@ export function NewInspectionDialog({
|
|
|
>
|
|
|
{vehicleId
|
|
|
? (() => {
|
|
|
- const v = vehicles.find((v) => v.id === vehicleId);
|
|
|
+ const v = vehicles.find((v) => v.id === vehicleId)
|
|
|
return v
|
|
|
- ? `${v.year} ${v.make} ${v.model}${v.licensePlate ? ` (${v.licensePlate})` : ""}`
|
|
|
- : "Select vehicle";
|
|
|
+ ? `${v.year} ${v.make} ${v.model}${v.licensePlate ? ` (${v.licensePlate})` : ''}`
|
|
|
+ : 'Select vehicle'
|
|
|
})()
|
|
|
- : "Select vehicle"}
|
|
|
+ : 'Select vehicle'}
|
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
|
</Button>
|
|
|
</PopoverTrigger>
|
|
|
@@ -144,20 +155,25 @@ export function NewInspectionDialog({
|
|
|
<CommandEmpty>No vehicles found.</CommandEmpty>
|
|
|
<CommandGroup>
|
|
|
{vehicles.map((v) => {
|
|
|
- const label = `${v.year} ${v.make} ${v.model}${v.licensePlate ? ` (${v.licensePlate})` : ""}`;
|
|
|
+ const label = `${v.year} ${v.make} ${v.model}${v.licensePlate ? ` (${v.licensePlate})` : ''}`
|
|
|
return (
|
|
|
<CommandItem
|
|
|
key={v.id}
|
|
|
value={label}
|
|
|
onSelect={() => {
|
|
|
- setVehicleId(v.id);
|
|
|
- setVehiclePopoverOpen(false);
|
|
|
+ setVehicleId(v.id)
|
|
|
+ setVehiclePopoverOpen(false)
|
|
|
}}
|
|
|
>
|
|
|
- <Check className={cn("mr-2 h-4 w-4", vehicleId === v.id ? "opacity-100" : "opacity-0")} />
|
|
|
+ <Check
|
|
|
+ className={cn(
|
|
|
+ 'mr-2 h-4 w-4',
|
|
|
+ vehicleId === v.id ? 'opacity-100' : 'opacity-0'
|
|
|
+ )}
|
|
|
+ />
|
|
|
{label}
|
|
|
</CommandItem>
|
|
|
- );
|
|
|
+ )
|
|
|
})}
|
|
|
</CommandGroup>
|
|
|
</CommandList>
|
|
|
@@ -171,7 +187,7 @@ export function NewInspectionDialog({
|
|
|
<div className="flex items-center justify-between">
|
|
|
<Label>Template</Label>
|
|
|
<Link
|
|
|
- href="/settings/templates?tab=inspection"
|
|
|
+ href="/settings/templates?tab=inspections"
|
|
|
className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
|
|
|
onClick={() => onOpenChange(false)}
|
|
|
>
|
|
|
@@ -187,7 +203,7 @@ export function NewInspectionDialog({
|
|
|
{templates.map((t) => (
|
|
|
<SelectItem key={t.id} value={t.id}>
|
|
|
{t.name}
|
|
|
- {t.isDefault ? " (Default)" : ""}
|
|
|
+ {t.isDefault ? ' (Default)' : ''}
|
|
|
</SelectItem>
|
|
|
))}
|
|
|
</SelectContent>
|
|
|
@@ -200,7 +216,7 @@ export function NewInspectionDialog({
|
|
|
type="number"
|
|
|
value={mileage}
|
|
|
onChange={(e) => setMileage(e.target.value)}
|
|
|
- placeholder={serviceType === 'marine' ? "Current engine hours" : "Current mileage"}
|
|
|
+ placeholder={serviceType === 'marine' ? 'Current engine hours' : 'Current mileage'}
|
|
|
min={0}
|
|
|
/>
|
|
|
</div>
|
|
|
@@ -217,5 +233,5 @@ export function NewInspectionDialog({
|
|
|
</form>
|
|
|
</DialogContent>
|
|
|
</Dialog>
|
|
|
- );
|
|
|
+ )
|
|
|
}
|
Bernt Christian Egeland