558 lines
22 KiB
TypeScript
558 lines
22 KiB
TypeScript
import { FormEvent, useMemo, useState } from "react";
|
|
import type { Dispatch, SetStateAction } from "react";
|
|
import { Pause, Play, Plus, RotateCcw, Square, Upload } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { HelpLink } from "@/components/HelpLink";
|
|
import { OrganizationSelect } from "@/components/OrganizationSelect";
|
|
import { createSession, lookupTicket } from "../api";
|
|
import { formatTimer } from "../format";
|
|
import { activeElapsedMs, pauseEntry, resumeEntry, ticketPattern, type TimerEntry } from "../timers";
|
|
import type { TicketMeta, WorkType } from "../types";
|
|
|
|
type ManualSessionFormState = {
|
|
ticketNumber: string;
|
|
organizationId: string;
|
|
organizationName: string | null;
|
|
activity: string;
|
|
workType: WorkType;
|
|
day: string;
|
|
startTime: string;
|
|
endTime: string;
|
|
};
|
|
|
|
function currentDay() {
|
|
const now = new Date();
|
|
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
|
|
}
|
|
|
|
function emptyManualSession(): ManualSessionFormState {
|
|
return {
|
|
ticketNumber: "",
|
|
organizationId: "",
|
|
organizationName: null,
|
|
activity: "",
|
|
workType: "support",
|
|
day: currentDay(),
|
|
startTime: "09:00",
|
|
endTime: "09:30"
|
|
};
|
|
}
|
|
|
|
type FinishedSession = {
|
|
timerId: string;
|
|
ticketNumber: string;
|
|
ticket: TicketMeta | null;
|
|
startedAt: string;
|
|
endedAt: string;
|
|
durationSeconds: number;
|
|
roundedMinutes: number;
|
|
};
|
|
|
|
type TimerPageProps = {
|
|
timers: TimerEntry[];
|
|
setTimers: Dispatch<SetStateAction<TimerEntry[]>>;
|
|
selectedTimerId: string | null;
|
|
setSelectedTimerId: Dispatch<SetStateAction<string | null>>;
|
|
tick: number;
|
|
};
|
|
|
|
export function TimerPage({ timers, setTimers, selectedTimerId, setSelectedTimerId, tick }: TimerPageProps) {
|
|
const [ticketNumber, setTicketNumber] = useState("");
|
|
const [finished, setFinished] = useState<FinishedSession | null>(null);
|
|
const [finishingId, setFinishingId] = useState<string | null>(null);
|
|
const [organizationId, setOrganizationId] = useState("");
|
|
const [organizationName, setOrganizationName] = useState<string | null>(null);
|
|
const [activity, setActivity] = useState("");
|
|
const [workType, setWorkType] = useState<WorkType>("support");
|
|
const [saving, setSaving] = useState(false);
|
|
const [manualSession, setManualSession] = useState<ManualSessionFormState>(() => emptyManualSession());
|
|
const [savingManualSession, setSavingManualSession] = useState(false);
|
|
|
|
const selectedTimer = timers.find((timer) => timer.id === selectedTimerId) ?? timers[0] ?? null;
|
|
const elapsedSeconds = useMemo(() => Math.floor(activeElapsedMs(selectedTimer, tick) / 1000), [selectedTimer, tick]);
|
|
const isValidTicket = ticketPattern.test(ticketNumber);
|
|
const runningTimer = timers.find((timer) => timer.phase === "running") ?? null;
|
|
|
|
async function addTimer() {
|
|
if (!isValidTicket) {
|
|
toast.error("Ticketnummer prüfen", {
|
|
description: "Das Format muss Ticket#XXXXXX sein."
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (timers.some((timer) => timer.ticketNumber === ticketNumber)) {
|
|
toast.error("Timer existiert bereits", {
|
|
description: "Für dieses Ticket läuft oder pausiert schon ein Timer."
|
|
});
|
|
return;
|
|
}
|
|
|
|
const now = Date.now();
|
|
const ticketResult = await lookupTicket(ticketNumber).catch(() => ({ ticket: null }));
|
|
const newTimer: TimerEntry = {
|
|
id: crypto.randomUUID(),
|
|
ticketNumber,
|
|
organizationName: ticketResult.ticket?.organization_name ?? ticketResult.ticket?.customer_name ?? null,
|
|
workType: ticketResult.ticket?.work_type ?? null,
|
|
ticketLookupDone: true,
|
|
startedAt: now,
|
|
pausedTotalMs: 0,
|
|
pausedAt: null,
|
|
phase: "running"
|
|
};
|
|
|
|
setTimers((current) => [...current.map((timer) => pauseEntry(timer, now)), newTimer]);
|
|
setSelectedTimerId(newTimer.id);
|
|
setTicketNumber("");
|
|
}
|
|
|
|
function activateTimer(timerId: string) {
|
|
const now = Date.now();
|
|
setTimers((current) =>
|
|
current.map((timer) => {
|
|
if (timer.id === timerId) {
|
|
return resumeEntry(timer, now);
|
|
}
|
|
|
|
return pauseEntry(timer, now);
|
|
})
|
|
);
|
|
setSelectedTimerId(timerId);
|
|
}
|
|
|
|
function pauseTimer(timerId: string) {
|
|
const now = Date.now();
|
|
setTimers((current) => current.map((timer) => (timer.id === timerId ? pauseEntry(timer, now) : timer)));
|
|
setSelectedTimerId(timerId);
|
|
}
|
|
|
|
function resetTimer(timerId: string) {
|
|
setTimers((current) => current.filter((timer) => timer.id !== timerId));
|
|
}
|
|
|
|
async function finishTimer(timerId: string) {
|
|
const timer = timers.find((entry) => entry.id === timerId);
|
|
|
|
if (!timer) {
|
|
return;
|
|
}
|
|
|
|
const now = Date.now();
|
|
const stoppedTimer = pauseEntry(timer, now);
|
|
const durationSeconds = Math.floor(activeElapsedMs(stoppedTimer, now) / 1000);
|
|
const roundedMinutes = Math.max(1, Math.round(durationSeconds / 60));
|
|
|
|
setTimers((current) => current.map((entry) => (entry.id === timerId ? pauseEntry(entry, now) : entry)));
|
|
setSelectedTimerId(timer.id);
|
|
setFinishingId(timer.id);
|
|
|
|
try {
|
|
const result = await lookupTicket(timer.ticketNumber);
|
|
const ticket = result.ticket;
|
|
|
|
setOrganizationId(ticket?.organization_id ?? "");
|
|
setOrganizationName(ticket?.organization_name ?? null);
|
|
setWorkType(ticket?.work_type ?? "support");
|
|
setActivity("");
|
|
setFinished({
|
|
timerId: timer.id,
|
|
ticketNumber: timer.ticketNumber,
|
|
ticket,
|
|
startedAt: new Date(stoppedTimer.startedAt).toISOString(),
|
|
endedAt: new Date(now).toISOString(),
|
|
durationSeconds,
|
|
roundedMinutes
|
|
});
|
|
} catch (error) {
|
|
toast.error("Ticket konnte nicht geprüft werden", {
|
|
description: error instanceof Error ? error.message : "Unbekannter Fehler"
|
|
});
|
|
} finally {
|
|
setFinishingId(null);
|
|
}
|
|
}
|
|
|
|
async function submitSession(event: FormEvent) {
|
|
event.preventDefault();
|
|
|
|
if (!finished) {
|
|
return;
|
|
}
|
|
|
|
const existingTicketHasDefaults = Boolean(finished.ticket?.organization_id && finished.ticket?.work_type);
|
|
const effectiveOrganizationId = existingTicketHasDefaults ? finished.ticket!.organization_id! : organizationId;
|
|
const effectiveWorkType = existingTicketHasDefaults ? finished.ticket!.work_type! : workType;
|
|
|
|
if (!effectiveOrganizationId) {
|
|
toast.error("Organisation wählen", {
|
|
description: "Neue Sessions können nur mit einer synchronisierten Organisation gespeichert werden."
|
|
});
|
|
return;
|
|
}
|
|
|
|
setSaving(true);
|
|
|
|
try {
|
|
await createSession({
|
|
ticketNumber: finished.ticketNumber,
|
|
startedAt: finished.startedAt,
|
|
endedAt: finished.endedAt,
|
|
durationSeconds: finished.durationSeconds,
|
|
organizationId: effectiveOrganizationId,
|
|
activity,
|
|
workType: effectiveWorkType
|
|
});
|
|
|
|
toast.success("Session gespeichert", {
|
|
description: `${finished.ticketNumber} wurde mit ${finished.roundedMinutes} Minute(n) erfasst.`
|
|
});
|
|
setTimers((current) => current.filter((timer) => timer.id !== finished.timerId));
|
|
setFinished(null);
|
|
setOrganizationId("");
|
|
setOrganizationName(null);
|
|
setActivity("");
|
|
setWorkType("support");
|
|
} catch (error) {
|
|
toast.error("Speichern fehlgeschlagen", {
|
|
description: error instanceof Error ? error.message : "Unbekannter Fehler"
|
|
});
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function submitManualSession(event: FormEvent) {
|
|
event.preventDefault();
|
|
|
|
if (!ticketPattern.test(manualSession.ticketNumber)) {
|
|
toast.error("Ticketnummer prüfen", {
|
|
description: "Das Format muss Ticket#XXXXXX sein."
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!manualSession.organizationId) {
|
|
toast.error("Organisation wählen");
|
|
return;
|
|
}
|
|
|
|
const startedAt = new Date(`${manualSession.day}T${manualSession.startTime}:00`);
|
|
const endedAt = new Date(`${manualSession.day}T${manualSession.endTime}:00`);
|
|
|
|
if (Number.isNaN(startedAt.getTime()) || Number.isNaN(endedAt.getTime())) {
|
|
toast.error("Datum oder Uhrzeit prüfen");
|
|
return;
|
|
}
|
|
|
|
if (endedAt <= startedAt) {
|
|
toast.error("Ende muss nach Beginn liegen");
|
|
return;
|
|
}
|
|
|
|
const durationSeconds = Math.floor((endedAt.getTime() - startedAt.getTime()) / 1000);
|
|
|
|
setSavingManualSession(true);
|
|
|
|
try {
|
|
await createSession({
|
|
ticketNumber: manualSession.ticketNumber,
|
|
organizationId: manualSession.organizationId,
|
|
activity: manualSession.activity,
|
|
workType: manualSession.workType,
|
|
startedAt: startedAt.toISOString(),
|
|
endedAt: endedAt.toISOString(),
|
|
durationSeconds
|
|
});
|
|
toast.success("Session nachgetragen", {
|
|
description: "Der Eintrag ist in deiner Auswertung offen."
|
|
});
|
|
setManualSession({
|
|
...emptyManualSession(),
|
|
day: manualSession.day
|
|
});
|
|
} catch (error) {
|
|
toast.error("Session konnte nicht nachgetragen werden", {
|
|
description: error instanceof Error ? error.message : "Unbekannter Fehler"
|
|
});
|
|
} finally {
|
|
setSavingManualSession(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<section className="space-y-4">
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<h2 className="text-xl font-semibold tracking-normal sm:text-2xl">Timer</h2>
|
|
<p className="text-sm text-muted-foreground">Mehrere Tickets vorbereiten, aber immer nur eine Session aktiv messen.</p>
|
|
</div>
|
|
{runningTimer ? <Badge variant="success">Aktiv: {runningTimer.ticketNumber}</Badge> : null}
|
|
{!runningTimer && timers.length > 0 ? <Badge variant="warning">Alle pausiert</Badge> : null}
|
|
{timers.length === 0 ? <Badge variant="info">Kein Timer aktiv</Badge> : null}
|
|
</div>
|
|
|
|
<Card className="overflow-hidden">
|
|
<CardHeader className="border-b bg-muted/30 p-4">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<CardTitle>Neuen Timer starten</CardTitle>
|
|
<CardDescription>Ein neuer Timer startet sofort und pausiert alle anderen Timer automatisch.</CardDescription>
|
|
</div>
|
|
<HelpLink anchor="timer" label="Hilfe zu Timern" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-3 p-4 sm:grid-cols-[minmax(220px,320px)_auto] sm:items-end">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="ticket-number">
|
|
Ticketnummer
|
|
</label>
|
|
<Input
|
|
id="ticket-number"
|
|
placeholder="Ticket#123456"
|
|
value={ticketNumber}
|
|
onChange={(event) => setTicketNumber(event.currentTarget.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter") {
|
|
void addTimer();
|
|
}
|
|
}}
|
|
/>
|
|
{ticketNumber.length > 0 && !isValidTicket ? <p className="text-xs text-destructive">Format: Ticket#XXXXXX</p> : null}
|
|
</div>
|
|
<Button onClick={() => void addTimer()}>
|
|
<Plus className="size-4" />
|
|
Timer starten
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="overflow-hidden">
|
|
<CardHeader className="border-b bg-muted/30 p-4">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<CardTitle>{selectedTimer ? selectedTimer.ticketNumber : "Keine Session ausgewählt"}</CardTitle>
|
|
<CardDescription>
|
|
{selectedTimer
|
|
? selectedTimer.organizationName
|
|
? `${selectedTimer.organizationName}${selectedTimer.workType ? ` · ${selectedTimer.workType === "support" ? "Support" : "Consulting"}` : ""}`
|
|
: "Beim Umschalten wird dieser Timer aktiviert und alle anderen werden pausiert."
|
|
: "Starte einen Timer, um eine Session zu erfassen."}
|
|
</CardDescription>
|
|
</div>
|
|
<HelpLink anchor="timer" label="Hilfe zum Timerstatus" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4 p-4">
|
|
<div className="rounded-lg border bg-background p-4 sm:p-5">
|
|
<p className="mb-2 text-sm font-medium text-muted-foreground">Gemessene Arbeitszeit</p>
|
|
<p className="font-mono text-4xl font-bold leading-none tracking-normal sm:text-6xl">
|
|
{formatTimer(elapsedSeconds)}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
|
|
{selectedTimer?.phase === "running" ? (
|
|
<Button variant="secondary" disabled={!selectedTimer} onClick={() => selectedTimer && pauseTimer(selectedTimer.id)}>
|
|
<Pause className="size-4" />
|
|
Pausieren
|
|
</Button>
|
|
) : (
|
|
<Button disabled={!selectedTimer} onClick={() => selectedTimer && activateTimer(selectedTimer.id)}>
|
|
<Play className="size-4" />
|
|
Aktivieren
|
|
</Button>
|
|
)}
|
|
|
|
<Button variant="destructive" disabled={!selectedTimer || finishingId === selectedTimer?.id} onClick={() => selectedTimer && void finishTimer(selectedTimer.id)}>
|
|
<Square className="size-4" />
|
|
{finishingId === selectedTimer?.id ? "Prüft..." : "Beenden"}
|
|
</Button>
|
|
<Button variant="ghost" disabled={!selectedTimer} onClick={() => selectedTimer && resetTimer(selectedTimer.id)}>
|
|
<RotateCcw className="size-4" />
|
|
Entfernen
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="overflow-hidden">
|
|
<CardHeader className="border-b bg-muted/30 p-4">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<CardTitle>Session nachtragen</CardTitle>
|
|
<CardDescription>Vergessene Zeiten für deinen eigenen Account manuell erfassen.</CardDescription>
|
|
</div>
|
|
<HelpLink anchor="session-nachtragen" label="Hilfe zum Nachtragen von Sessions" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-4">
|
|
<form className="space-y-4" onSubmit={submitManualSession}>
|
|
<div className="grid gap-3 lg:grid-cols-[160px_minmax(180px,1fr)_150px]">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="manual-ticket-number">Ticket</label>
|
|
<Input
|
|
id="manual-ticket-number"
|
|
placeholder="Ticket#123456"
|
|
value={manualSession.ticketNumber}
|
|
onChange={(event) => setManualSession({ ...manualSession, ticketNumber: event.currentTarget.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Organisation</label>
|
|
<OrganizationSelect
|
|
value={manualSession.organizationId}
|
|
selectedName={manualSession.organizationName}
|
|
onChange={(organization) =>
|
|
setManualSession({
|
|
...manualSession,
|
|
organizationId: organization.id,
|
|
organizationName: organization.name
|
|
})
|
|
}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="manual-work-type">Art</label>
|
|
<select
|
|
id="manual-work-type"
|
|
className="h-9 w-full rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
|
|
value={manualSession.workType}
|
|
onChange={(event) => setManualSession({ ...manualSession, workType: event.currentTarget.value as WorkType })}
|
|
>
|
|
<option value="support">Support</option>
|
|
<option value="consulting">Consulting</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-3 lg:grid-cols-[160px_120px_120px_minmax(220px,1fr)_auto] lg:items-end">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="manual-day">Datum</label>
|
|
<Input
|
|
id="manual-day"
|
|
type="date"
|
|
value={manualSession.day}
|
|
onChange={(event) => setManualSession({ ...manualSession, day: event.currentTarget.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="manual-start">Von</label>
|
|
<Input
|
|
id="manual-start"
|
|
type="time"
|
|
value={manualSession.startTime}
|
|
onChange={(event) => setManualSession({ ...manualSession, startTime: event.currentTarget.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="manual-end">Bis</label>
|
|
<Input
|
|
id="manual-end"
|
|
type="time"
|
|
value={manualSession.endTime}
|
|
onChange={(event) => setManualSession({ ...manualSession, endTime: event.currentTarget.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="manual-activity">Tätigkeit</label>
|
|
<Textarea
|
|
id="manual-activity"
|
|
className="min-h-20"
|
|
value={manualSession.activity}
|
|
onChange={(event) => setManualSession({ ...manualSession, activity: event.currentTarget.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
<Button type="submit" disabled={savingManualSession}>
|
|
<Upload className="size-4" />
|
|
{savingManualSession ? "Speichert..." : "Nachtragen"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
</section>
|
|
|
|
<Dialog open={Boolean(finished)} onOpenChange={(open) => !open && setFinished(null)}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Session abschließen</DialogTitle>
|
|
<DialogDescription>
|
|
{finished?.ticketNumber}: {finished?.roundedMinutes} Minute(n), Pausen bereits abgezogen.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<form className="space-y-4" onSubmit={submitSession}>
|
|
{finished?.ticket?.organization_id && finished.ticket.work_type ? (
|
|
<div className="rounded-lg border bg-muted/40 p-3 text-sm">
|
|
<p className="font-medium">{finished.ticket.organization_name ?? finished.ticket.customer_name}</p>
|
|
<p className="text-muted-foreground">{finished.ticket.work_type === "support" ? "Support" : "Consulting"} wurde vom bestehenden Ticket übernommen.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="organization">
|
|
Organisation
|
|
</label>
|
|
{finished?.ticket?.customer_name && !finished.ticket.organization_id ? (
|
|
<p className="text-xs text-muted-foreground">Bisheriger Freitext: {finished.ticket.customer_name}</p>
|
|
) : null}
|
|
<OrganizationSelect
|
|
value={organizationId}
|
|
selectedName={organizationName}
|
|
onChange={(organization) => {
|
|
setOrganizationId(organization.id);
|
|
setOrganizationName(organization.name);
|
|
}}
|
|
required
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="activity">
|
|
Tätigkeit
|
|
</label>
|
|
<Textarea id="activity" value={activity} onChange={(event) => setActivity(event.currentTarget.value)} required />
|
|
</div>
|
|
{finished?.ticket?.organization_id && finished.ticket.work_type ? null : (
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="work-type">
|
|
Art
|
|
</label>
|
|
<select
|
|
id="work-type"
|
|
className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
value={workType}
|
|
onChange={(event) => setWorkType(event.currentTarget.value as WorkType)}
|
|
>
|
|
<option value="support">Support</option>
|
|
<option value="consulting">Consulting</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-end">
|
|
<Button type="submit" disabled={saving}>
|
|
<Upload className="size-4" />
|
|
{saving ? "Speichern..." : "Eintrag speichern"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|