feat(navigation): add prominent validation quickstart action
This commit is contained in:
Schubert Ferenc
parent
0bbcaba211
commit
9c6b184e39
28614 changed files with 4356173 additions and 23 deletions
|
|
@ -1,24 +1,284 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import ValidationEditor from "@/components/validations/validation-editor";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { ArrowRight, Loader2, Search, Sparkles, UserRoundCheck } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useAuth } from "@/components/auth";
|
||||
import { apiFetch, apiGet, Customer, Paginated, QuickStartCustomerData, ValidationItem } from "@/lib/api";
|
||||
|
||||
const validationTypeLabels: Record<string, string> = {
|
||||
Erstvalidierung: "Erstvalidierung",
|
||||
Revalidierung: "Revalidierung",
|
||||
Leistungsbeurteilung: "Leistungsbeurteilung"
|
||||
};
|
||||
|
||||
export default function QuickStartValidationPage() {
|
||||
const { token, user } = useAuth();
|
||||
const [search, setSearch] = useState("");
|
||||
const [selectedCustomerId, setSelectedCustomerId] = useState("");
|
||||
const [selectedLocationId, setSelectedLocationId] = useState("");
|
||||
const [selectedContactId, setSelectedContactId] = useState("");
|
||||
const [selectedDeviceId, setSelectedDeviceId] = useState("");
|
||||
const [validationType, setValidationType] = useState("Erstvalidierung");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const customers = useQuery({
|
||||
queryKey: ["quickstart-customers", search, token],
|
||||
queryFn: () => apiGet<Paginated<Customer>>(`/customers?page=1&page_size=12${search.trim() ? `&search=${encodeURIComponent(search.trim())}` : ""}`, token ?? ""),
|
||||
enabled: Boolean(token)
|
||||
});
|
||||
const customerData = useQuery({
|
||||
queryKey: ["quickstart-customer-data", selectedCustomerId, token],
|
||||
queryFn: () => apiGet<QuickStartCustomerData>(`/customers/${selectedCustomerId}/quickstart-data`, token ?? ""),
|
||||
enabled: Boolean(token && selectedCustomerId)
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedLocationId("");
|
||||
setSelectedContactId("");
|
||||
setSelectedDeviceId("");
|
||||
setError("");
|
||||
}, [selectedCustomerId]);
|
||||
|
||||
useEffect(() => {
|
||||
const data = customerData.data;
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
if (data.locations.length === 1) {
|
||||
setSelectedLocationId(data.locations[0].id);
|
||||
}
|
||||
if (data.contacts.length === 1) {
|
||||
setSelectedContactId(data.contacts[0].id);
|
||||
}
|
||||
if (data.devices.length === 1) {
|
||||
setSelectedDeviceId(data.devices[0].id);
|
||||
}
|
||||
if (validationType === "Revalidierung" && data.devices.length > 0 && !selectedDeviceId) {
|
||||
const previousDevice = data.validations[0]?.device_id;
|
||||
if (previousDevice) {
|
||||
setSelectedDeviceId(previousDevice);
|
||||
}
|
||||
}
|
||||
}, [customerData.data, selectedDeviceId, validationType]);
|
||||
|
||||
const selectedCustomer = customers.data?.items.find((item) => item.id === selectedCustomerId) ?? customerData.data?.customer ?? null;
|
||||
const selectedDevice = customerData.data?.devices.find((item) => item.id === selectedDeviceId) ?? null;
|
||||
const selectedLocation = customerData.data?.locations.find((item) => item.id === selectedLocationId) ?? null;
|
||||
const selectedContact = customerData.data?.contacts.find((item) => item.id === selectedContactId) ?? null;
|
||||
const currentExaminer = user ? `${user.first_name} ${user.last_name}` : "nicht angemeldet";
|
||||
const latestValidation = useMemo(() => {
|
||||
if (!selectedDeviceId) {
|
||||
return null;
|
||||
}
|
||||
return customerData.data?.validations.find((item) => item.device_id === selectedDeviceId) ?? null;
|
||||
}, [customerData.data?.validations, selectedDeviceId]);
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: async () =>
|
||||
apiFetch<ValidationItem>(
|
||||
"/validations/quick-start",
|
||||
token ?? "",
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
customer_id: selectedCustomerId,
|
||||
location_id: selectedLocationId || null,
|
||||
contact_id: selectedContactId || null,
|
||||
device_id: selectedDeviceId || null,
|
||||
validation_type: validationType
|
||||
})
|
||||
}
|
||||
),
|
||||
onSuccess: (created) => {
|
||||
window.location.replace(`/validations/${created.id}/edit`);
|
||||
},
|
||||
onError: (err: Error) => setError(err.message)
|
||||
});
|
||||
|
||||
const customerCards = customers.data?.items ?? [];
|
||||
const canCreate =
|
||||
Boolean(selectedCustomerId) &&
|
||||
Boolean(selectedDeviceId) &&
|
||||
(customerData.data?.locations.length ?? 0) > 0 &&
|
||||
((customerData.data?.locations.length ?? 0) === 1 ? Boolean(selectedLocationId) : Boolean(selectedLocationId)) &&
|
||||
!createMutation.isPending;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<header className="rounded-lg border border-border bg-surface p-6 shadow-soft">
|
||||
<p className="text-sm font-medium uppercase tracking-wide text-primary">Schnellstart</p>
|
||||
<h1 className="mt-2 text-3xl font-semibold text-text">Neue Validierung starten</h1>
|
||||
<div className="flex items-center gap-3 text-primary">
|
||||
<Sparkles className="h-5 w-5" />
|
||||
<p className="text-sm font-medium uppercase tracking-wide">Quickstart</p>
|
||||
</div>
|
||||
<h1 className="mt-3 text-3xl font-semibold text-text">Neue Validierung starten</h1>
|
||||
<p className="mt-2 max-w-3xl text-text-light">
|
||||
Wir arbeiten die Validierung direkt auf einer Seite durch und ziehen vorhandene Daten sofort nach.
|
||||
Wir fassen die wichtigsten Entscheidungen zusammen und öffnen danach direkt die bestehende Validierungsbearbeitung.
|
||||
</p>
|
||||
<div className="mt-5">
|
||||
<Link className="btn btn-secondary" href="/validations">
|
||||
Zur Validierungsübersicht
|
||||
</Link>
|
||||
<div className="mt-4 flex flex-wrap gap-2 text-sm text-text-light">
|
||||
<span className="rounded-full border border-border bg-background px-3 py-1">1 Kunde</span>
|
||||
<span className="rounded-full border border-border bg-background px-3 py-1">2 Gerät</span>
|
||||
<span className="rounded-full border border-border bg-background px-3 py-1">3 Validierungsart</span>
|
||||
<span className="rounded-full border border-border bg-background px-3 py-1">4 Erstellen</span>
|
||||
</div>
|
||||
</header>
|
||||
<ValidationEditor />
|
||||
|
||||
<section className="grid gap-4 xl:grid-cols-[1.1fr_1fr]">
|
||||
<div className="rounded-lg border border-border bg-surface p-5 shadow-soft">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h2 className="text-xl font-semibold">1. Kunde</h2>
|
||||
{selectedCustomer && <span className="rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-medium text-primary">Ausgewählt</span>}
|
||||
</div>
|
||||
{customers.isError && <p className="mt-3 rounded-lg border border-danger/30 bg-danger/5 px-4 py-3 text-sm text-danger">Kunden konnten nicht geladen werden.</p>}
|
||||
<label className="mt-4 flex h-12 items-center gap-2 rounded-lg border border-border px-3">
|
||||
<Search className="h-4 w-4 text-primary" />
|
||||
<input value={search} onChange={(event) => setSearch(event.target.value)} className="flex-1 outline-none" placeholder="Kundenname, Ort, PLZ, Ansprechpartner" />
|
||||
</label>
|
||||
<div className="mt-4 grid gap-3">
|
||||
{customerCards.map((item) => {
|
||||
const active = item.id === selectedCustomerId;
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedCustomerId(item.id)}
|
||||
className={`rounded-lg border p-4 text-left transition ${active ? "border-primary bg-primary/5 shadow" : "border-border bg-background hover:border-primary/40 hover:bg-white"}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-base font-semibold">{item.name}</p>
|
||||
<p className="mt-1 text-sm text-text-light">{item.city || "Ort nicht erfasst"}</p>
|
||||
</div>
|
||||
{active && <UserRoundCheck className="h-5 w-5 text-primary" />}
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-text-light">{item.customer_type === "practice" ? "Praxis" : "Klinik"}</p>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{customers.isLoading && <p className="rounded-lg border border-dashed border-border p-4 text-sm text-text-light">Kunden werden geladen...</p>}
|
||||
{!customers.isLoading && !customers.isError && customerCards.length === 0 && <p className="rounded-lg border border-dashed border-border p-4 text-sm text-text-light">Keine Kunden gefunden.</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-border bg-surface p-5 shadow-soft">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h2 className="text-xl font-semibold">2. Gerät</h2>
|
||||
{selectedDevice && <span className="rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-medium text-primary">Ausgewählt</span>}
|
||||
</div>
|
||||
{customerData.isError && <p className="mt-3 rounded-lg border border-danger/30 bg-danger/5 px-4 py-3 text-sm text-danger">Kundendaten konnten nicht geladen werden.</p>}
|
||||
<div className="mt-4 grid gap-3">
|
||||
{(customerData.data?.devices ?? []).map((item) => {
|
||||
const active = item.id === selectedDeviceId;
|
||||
const latest = customerData.data?.validations.find((validation) => validation.device_id === item.id) ?? null;
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedDeviceId(item.id)}
|
||||
className={`rounded-lg border p-4 text-left transition ${active ? "border-primary bg-primary/5 shadow" : "border-border bg-background hover:border-primary/40 hover:bg-white"}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-base font-semibold">{item.manufacturer} {item.model}</p>
|
||||
<p className="mt-1 text-sm text-text-light">Seriennummer {item.serial_number}</p>
|
||||
<p className="mt-1 text-sm text-text-light">{item.location_id ? "Standort hinterlegt" : "Standort nicht erfasst"}</p>
|
||||
</div>
|
||||
{active && <UserRoundCheck className="h-5 w-5 text-primary" />}
|
||||
</div>
|
||||
<div className="mt-3 grid gap-2 text-sm text-text-light sm:grid-cols-2">
|
||||
<span>{latest ? `Letzte Validierung: ${latest.report_number}` : "Keine letzte Validierung erfasst"}</span>
|
||||
<span>{latest?.next_validation_on ? `Naechste Revalidierung: ${latest.next_validation_on}` : "Naechste Revalidierung nicht erfasst"}</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{customerData.isLoading && selectedCustomerId && <p className="rounded-lg border border-dashed border-border p-4 text-sm text-text-light">Geräte werden geladen...</p>}
|
||||
{selectedCustomerId && !customerData.isLoading && !customerData.isError && (customerData.data?.devices.length ?? 0) === 0 && <p className="rounded-lg border border-dashed border-border p-4 text-sm text-text-light">Keine Geräte gefunden.</p>}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-4 lg:grid-cols-3">
|
||||
<div className="rounded-lg border border-border bg-surface p-5 shadow-soft">
|
||||
<h2 className="text-xl font-semibold">3. Validierungsart</h2>
|
||||
<div className="mt-4 grid gap-3">
|
||||
{Object.entries(validationTypeLabels).map(([value, label]) => {
|
||||
const active = validationType === value;
|
||||
return (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
onClick={() => setValidationType(value)}
|
||||
className={`rounded-lg border px-4 py-3 text-left transition ${active ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/40 hover:bg-white"}`}
|
||||
>
|
||||
<p className="font-medium">{label}</p>
|
||||
<p className="mt-1 text-sm text-text-light">
|
||||
{value === "Erstvalidierung" ? "Neue Vorlage mit Standardchecklisten." : value === "Revalidierung" ? "Letzte abgeschlossene oder freigegebene Validierung als Basis." : "Letzte Validierung als leistungsbezogene Grundlage."}
|
||||
</p>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-border bg-surface p-5 shadow-soft lg:col-span-2">
|
||||
<h2 className="text-xl font-semibold">4. Übernahme vorhandener Daten</h2>
|
||||
<div className="mt-4 grid gap-4 md:grid-cols-2">
|
||||
<InfoCard label="Standort" value={selectedLocation ? selectedLocation.name : customerData.data?.locations.length === 1 ? "Automatisch übernommen" : "Bitte auswählen"} />
|
||||
<InfoCard label="Ansprechpartner" value={selectedContact ? selectedContact.full_name : customerData.data?.contacts.length === 1 ? "Automatisch übernommen" : "Bitte auswählen"} />
|
||||
<InfoCard label="Prüfer" value={currentExaminer} />
|
||||
<InfoCard label="Vorherige Validierung" value={latestValidation ? latestValidation.report_number : "Keine vorhanden"} />
|
||||
</div>
|
||||
{(customerData.data?.validations.length ?? 0) > 0 && (
|
||||
<div className="mt-5 rounded-lg border border-border bg-background p-4">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wide text-text-light">Letzte Validierungen</h3>
|
||||
<div className="mt-3 grid gap-3">
|
||||
{customerData.data?.validations.slice(0, 3).map((item) => (
|
||||
<div key={item.id} className="flex flex-col gap-1 rounded-lg border border-border bg-white px-4 py-3 text-sm sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p className="font-medium text-text">{item.report_number}</p>
|
||||
<p className="text-text-light">{item.validation_type ?? "Validierung"} · {item.performed_on ?? "nicht erfasst"}</p>
|
||||
</div>
|
||||
<p className="text-text-light">{item.next_validation_on ? `Naechste Revalidierung: ${item.next_validation_on}` : "Naechste Revalidierung nicht erfasst"}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{selectedCustomer && (
|
||||
<div className="mt-4 rounded-lg border border-border bg-background p-4 text-sm text-text-light">
|
||||
{customerData.isLoading ? "Vorhandene Daten werden geladen..." : "Vorhandene Daten stehen bereit."}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer className="sticky bottom-4 z-20 rounded-lg border border-border bg-surface/95 p-4 shadow-soft backdrop-blur">
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div className="text-sm text-text-light">
|
||||
{error ? <p className="text-danger">{error}</p> : <p>Nach dem Erstellen öffnet sich direkt die Bearbeitungsseite.</p>}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!canCreate}
|
||||
title={!canCreate ? "Bitte Kunde und Gerät auswählen" : undefined}
|
||||
onClick={() => createMutation.mutate()}
|
||||
className="btn btn-primary h-12 min-w-64"
|
||||
>
|
||||
{createMutation.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <ArrowRight className="h-4 w-4" />}
|
||||
Validierung erstellen und bearbeiten
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoCard({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border bg-white p-4">
|
||||
<p className="text-xs uppercase tracking-wide text-text-light">{label}</p>
|
||||
<p className="mt-2 font-medium text-text">{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue