223 lines
11 KiB
TypeScript
223 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { priorityLabels, statusLabels } from "@/components/repairs/RepairStatusBadge";
|
|
import { api } from "@/lib/api";
|
|
import type { Customer } from "@/types/customer";
|
|
import type { Repair, RepairPayload, RepairPriority, RepairSource, RepairStatus } from "@/types/repair";
|
|
|
|
type Props = {
|
|
open: boolean;
|
|
repair?: Repair | null;
|
|
pending: boolean;
|
|
serverError: string;
|
|
onOpenChange: (open: boolean) => void;
|
|
onSubmit: (payload: RepairPayload) => void;
|
|
};
|
|
|
|
const initialPayload: RepairPayload = {
|
|
customer_id: null,
|
|
contact_id: null,
|
|
status: "new",
|
|
priority: "normal",
|
|
source: "manual",
|
|
source_reference: null,
|
|
customer_name: "",
|
|
customer_email: null,
|
|
customer_phone: "",
|
|
device_manufacturer: "",
|
|
device_model: "",
|
|
device_serial_number: null,
|
|
device_type: "",
|
|
accessories: "",
|
|
fault_description: "",
|
|
previous_work: "",
|
|
device_opened: false,
|
|
intake_notes: "",
|
|
diagnosis_notes: "",
|
|
repair_notes: "",
|
|
estimate_notes: "",
|
|
estimated_cost_cents: null,
|
|
};
|
|
|
|
function payloadFromRepair(repair?: Repair | null): RepairPayload {
|
|
if (!repair) {
|
|
return initialPayload;
|
|
}
|
|
return {
|
|
customer_id: repair.customer_id,
|
|
contact_id: repair.contact_id,
|
|
status: repair.status,
|
|
priority: repair.priority,
|
|
source: repair.source,
|
|
source_reference: repair.source_reference,
|
|
customer_name: repair.customer_name,
|
|
customer_email: repair.customer_email || null,
|
|
customer_phone: repair.customer_phone,
|
|
device_manufacturer: repair.device_manufacturer,
|
|
device_model: repair.device_model,
|
|
device_serial_number: repair.device_serial_number,
|
|
device_type: repair.device_type,
|
|
accessories: repair.accessories,
|
|
fault_description: repair.fault_description,
|
|
previous_work: repair.previous_work,
|
|
device_opened: repair.device_opened,
|
|
intake_notes: repair.intake_notes,
|
|
diagnosis_notes: repair.diagnosis_notes,
|
|
repair_notes: repair.repair_notes,
|
|
estimate_notes: repair.estimate_notes,
|
|
estimated_cost_cents: repair.estimated_cost_cents,
|
|
};
|
|
}
|
|
|
|
export default function RepairFormDialog({ open, repair, pending, serverError, onOpenChange, onSubmit }: Props) {
|
|
const [payload, setPayload] = useState<RepairPayload>(payloadFromRepair(repair));
|
|
const [clientError, setClientError] = useState("");
|
|
const [customers, setCustomers] = useState<Customer[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (!open) {
|
|
return;
|
|
}
|
|
|
|
let active = true;
|
|
|
|
async function loadCustomers() {
|
|
try {
|
|
const response = await api.get<Customer[]>("/customers");
|
|
if (active) {
|
|
setCustomers(response.data);
|
|
}
|
|
} catch {
|
|
if (active) {
|
|
setCustomers([]);
|
|
}
|
|
}
|
|
}
|
|
|
|
void loadCustomers();
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [open]);
|
|
|
|
function update<K extends keyof RepairPayload>(key: K, value: RepairPayload[K]) {
|
|
setPayload((current) => ({ ...current, [key]: value }));
|
|
}
|
|
|
|
function submit() {
|
|
if (!payload.customer_name.trim() || !payload.device_manufacturer.trim() || !payload.device_model.trim() || !payload.fault_description.trim()) {
|
|
setClientError("Bitte Kundennamen, Hersteller, Modell und Fehlerbeschreibung ausfüllen.");
|
|
return;
|
|
}
|
|
setClientError("");
|
|
onSubmit(payload);
|
|
}
|
|
|
|
function selectCustomer(customerId: string) {
|
|
if (!customerId) {
|
|
update("customer_id", null);
|
|
return;
|
|
}
|
|
const customer = customers.find((item) => String(item.id) === customerId);
|
|
if (!customer) {
|
|
return;
|
|
}
|
|
setPayload((current) => ({
|
|
...current,
|
|
customer_id: customer.id,
|
|
customer_name: customer.company_name,
|
|
customer_email: customer.email || current.customer_email,
|
|
customer_phone: customer.phone || current.customer_phone,
|
|
}));
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-4xl">
|
|
<DialogHeader>
|
|
<DialogTitle>{repair ? "Reparatur bearbeiten" : "Reparatur anlegen"}</DialogTitle>
|
|
<DialogDescription>Erfasse Kundendaten, Gerätedaten und Werkstattnotizen.</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="grid gap-5">
|
|
<section className="grid gap-3">
|
|
<h3 className="font-semibold text-slate-950">Kunde</h3>
|
|
<label className="grid gap-1 text-sm">Bestehender Kunde
|
|
<select className="h-8 rounded-lg border px-2 text-sm" value={payload.customer_id ?? ""} onChange={(event) => selectCustomer(event.target.value)}>
|
|
<option value="">Manuelle Kundendaten</option>
|
|
{customers.map((customer) => <option key={customer.id} value={customer.id}>{customer.company_name}</option>)}
|
|
</select>
|
|
</label>
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
<label className="grid gap-1 text-sm">Name<Input value={payload.customer_name} onChange={(event) => update("customer_name", event.target.value)} /></label>
|
|
<label className="grid gap-1 text-sm">E-Mail<Input type="email" value={payload.customer_email ?? ""} onChange={(event) => update("customer_email", event.target.value || null)} /></label>
|
|
<label className="grid gap-1 text-sm">Telefon<Input value={payload.customer_phone} onChange={(event) => update("customer_phone", event.target.value)} /></label>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid gap-3">
|
|
<h3 className="font-semibold text-slate-950">Gerät</h3>
|
|
<div className="grid gap-3 md:grid-cols-4">
|
|
<label className="grid gap-1 text-sm">Hersteller<Input value={payload.device_manufacturer} onChange={(event) => update("device_manufacturer", event.target.value)} /></label>
|
|
<label className="grid gap-1 text-sm">Modell<Input value={payload.device_model} onChange={(event) => update("device_model", event.target.value)} /></label>
|
|
<label className="grid gap-1 text-sm">Seriennummer<Input value={payload.device_serial_number ?? ""} onChange={(event) => update("device_serial_number", event.target.value || null)} /></label>
|
|
<label className="grid gap-1 text-sm">Gerätetyp<Input value={payload.device_type} onChange={(event) => update("device_type", event.target.value)} /></label>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid gap-3">
|
|
<h3 className="font-semibold text-slate-950">Vorgang</h3>
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
<label className="grid gap-1 text-sm">Status<select className="h-8 rounded-lg border px-2 text-sm" value={payload.status} onChange={(event) => update("status", event.target.value as RepairStatus)}>
|
|
{(["new", "accepted", "diagnosis", "estimate", "waiting_for_customer", "approved", "repair", "final_test", "ready_for_pickup", "shipped", "completed", "cancelled"] as RepairStatus[]).map((status) => <option key={status} value={status}>{statusLabels[status]}</option>)}
|
|
</select></label>
|
|
<label className="grid gap-1 text-sm">Priorität<select className="h-8 rounded-lg border px-2 text-sm" value={payload.priority} onChange={(event) => update("priority", event.target.value as RepairPriority)}>
|
|
{(["low", "normal", "high", "urgent"] as RepairPriority[]).map((priority) => <option key={priority} value={priority}>{priorityLabels[priority]}</option>)}
|
|
</select></label>
|
|
<label className="grid gap-1 text-sm">Quelle<select className="h-8 rounded-lg border px-2 text-sm" value={payload.source} onChange={(event) => update("source", event.target.value as RepairSource)}>
|
|
{["manual", "website", "customer_portal", "email", "phone"].map((source) => <option key={source} value={source}>{source}</option>)}
|
|
</select></label>
|
|
</div>
|
|
<label className="grid gap-1 text-sm">Quellreferenz<Input value={payload.source_reference ?? ""} onChange={(event) => update("source_reference", event.target.value || null)} /></label>
|
|
</section>
|
|
|
|
<section className="grid gap-3">
|
|
<h3 className="font-semibold text-slate-950">Beschreibung</h3>
|
|
<label className="grid gap-1 text-sm">Fehlerbeschreibung<textarea className="min-h-24 rounded-lg border p-2 text-sm" value={payload.fault_description} onChange={(event) => update("fault_description", event.target.value)} /></label>
|
|
<label className="grid gap-1 text-sm">Zubehör<textarea className="min-h-20 rounded-lg border p-2 text-sm" value={payload.accessories} onChange={(event) => update("accessories", event.target.value)} /></label>
|
|
<label className="grid gap-1 text-sm">Vorarbeiten<textarea className="min-h-20 rounded-lg border p-2 text-sm" value={payload.previous_work} onChange={(event) => update("previous_work", event.target.value)} /></label>
|
|
<label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={payload.device_opened} onChange={(event) => update("device_opened", event.target.checked)} /> Gerät wurde bereits geöffnet</label>
|
|
</section>
|
|
|
|
<section className="grid gap-3">
|
|
<h3 className="font-semibold text-slate-950">Werkstattnotizen</h3>
|
|
<label className="grid gap-1 text-sm">Annahme<textarea className="min-h-20 rounded-lg border p-2 text-sm" value={payload.intake_notes} onChange={(event) => update("intake_notes", event.target.value)} /></label>
|
|
<label className="grid gap-1 text-sm">Diagnose<textarea className="min-h-20 rounded-lg border p-2 text-sm" value={payload.diagnosis_notes} onChange={(event) => update("diagnosis_notes", event.target.value)} /></label>
|
|
<label className="grid gap-1 text-sm">Reparatur<textarea className="min-h-20 rounded-lg border p-2 text-sm" value={payload.repair_notes} onChange={(event) => update("repair_notes", event.target.value)} /></label>
|
|
<label className="grid gap-1 text-sm">Kostenschätzung<textarea className="min-h-20 rounded-lg border p-2 text-sm" value={payload.estimate_notes} onChange={(event) => update("estimate_notes", event.target.value)} /></label>
|
|
<label className="grid gap-1 text-sm">Geschätzte Kosten in Cent<Input type="number" min={0} value={payload.estimated_cost_cents ?? ""} onChange={(event) => update("estimated_cost_cents", event.target.value ? Number(event.target.value) : null)} /></label>
|
|
</section>
|
|
</div>
|
|
|
|
{(clientError || serverError) && <p className="text-sm text-red-600">{clientError || serverError}</p>}
|
|
|
|
<DialogFooter>
|
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={pending}>Abbrechen</Button>
|
|
<Button type="button" onClick={submit} disabled={pending}>{pending ? "Speichert..." : "Speichern"}</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|