1016 lines
41 KiB
TypeScript
1016 lines
41 KiB
TypeScript
import { ArrowLeft, Pencil, Save, Trash2 } from "lucide-react";
|
|
import { FormEvent, useEffect, useMemo, useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { Alert } from "@/components/ui/alert";
|
|
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 { CopyTicketButton } from "@/components/CopyTicketButton";
|
|
import { HelpLink } from "@/components/HelpLink";
|
|
import { OrganizationSelect } from "@/components/OrganizationSelect";
|
|
import {
|
|
createSession,
|
|
deleteSession,
|
|
getTicketDetails,
|
|
getTicketPeriod,
|
|
updateSessionBilling,
|
|
updateSessionDetails,
|
|
updateTicket,
|
|
updateTicketDayBilling
|
|
} from "../api";
|
|
import { currentDay, currentMonth, formatDate, formatDateTime, formatMinutes, formatTimeRange } from "../format";
|
|
import type { BillingStatus, PeriodType, SessionEntry, TicketDetailPeriodType, TicketPeriod, WorkType } from "../types";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type TicketDetailPageProps = {
|
|
periodType: TicketDetailPeriodType;
|
|
period: string;
|
|
ticketId: string;
|
|
onNavigate: (to: string) => void;
|
|
onOpenTicketChange?: (ticket: {
|
|
key: string;
|
|
ticketId: string;
|
|
ticketNumber: string;
|
|
periodType: TicketDetailPeriodType;
|
|
period: string;
|
|
path: string;
|
|
dirty: boolean;
|
|
}) => void;
|
|
};
|
|
|
|
type TicketSessionFormState = {
|
|
organizationId: string;
|
|
organizationName: string | null;
|
|
activity: string;
|
|
workType: WorkType;
|
|
day: string;
|
|
startTime: string;
|
|
endTime: string;
|
|
};
|
|
|
|
function emptyTicketSessionForm(): TicketSessionFormState {
|
|
return {
|
|
organizationId: "",
|
|
organizationName: null,
|
|
activity: "",
|
|
workType: "support",
|
|
day: currentDay(),
|
|
startTime: "09:00",
|
|
endTime: "09:30"
|
|
};
|
|
}
|
|
|
|
function BillingButtons({
|
|
session,
|
|
disabled,
|
|
loading,
|
|
onChange
|
|
}: {
|
|
session: SessionEntry;
|
|
disabled: boolean;
|
|
loading: boolean;
|
|
onChange: (status: BillingStatus) => void;
|
|
}) {
|
|
const status = session.billing_status;
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 gap-1.5 sm:inline-grid">
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant={status === "billed" ? "default" : "secondary"}
|
|
disabled={loading || (disabled && status !== "billed")}
|
|
onClick={() => onChange(status === "billed" ? null : "billed")}
|
|
className={cn("h-8", status === "billed" ? "" : "bg-secondary/70")}
|
|
>
|
|
Abgerechnet
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant={status === "non_billable" ? "default" : "secondary"}
|
|
disabled={loading || (disabled && status !== "non_billable")}
|
|
onClick={() => onChange(status === "non_billable" ? null : "non_billable")}
|
|
className={cn("h-8", status === "non_billable" ? "" : "bg-secondary/70")}
|
|
>
|
|
Nicht abrechenbar
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function sessionDayKey(value: string) {
|
|
const date = new Date(value);
|
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
|
|
}
|
|
|
|
function toDateLocalValue(value: string) {
|
|
const date = new Date(value);
|
|
const offsetMs = date.getTimezoneOffset() * 60_000;
|
|
return new Date(date.getTime() - offsetMs).toISOString().slice(0, 10);
|
|
}
|
|
|
|
function toTimeLocalValue(value: string) {
|
|
const date = new Date(value);
|
|
const offsetMs = date.getTimezoneOffset() * 60_000;
|
|
return new Date(date.getTime() - offsetMs).toISOString().slice(11, 16);
|
|
}
|
|
|
|
function formatHoursInput(minutes?: number | null) {
|
|
if (minutes === null || minutes === undefined) {
|
|
return "";
|
|
}
|
|
|
|
return new Intl.NumberFormat("de-DE", { maximumFractionDigits: 2 }).format(minutes / 60);
|
|
}
|
|
|
|
function parseHoursInput(value: string) {
|
|
const trimmed = value.trim();
|
|
|
|
if (!trimmed) {
|
|
return null;
|
|
}
|
|
|
|
if (/[,.]$/.test(trimmed)) {
|
|
return undefined;
|
|
}
|
|
|
|
const hours = Number(trimmed.replace(",", "."));
|
|
|
|
if (!Number.isFinite(hours) || hours < 0) {
|
|
return undefined;
|
|
}
|
|
|
|
return Math.round(hours * 60);
|
|
}
|
|
|
|
function isPartialHoursInput(value: string) {
|
|
return /^\d*(?:[,.]\d*)?$/.test(value.trim());
|
|
}
|
|
|
|
export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onOpenTicketChange }: TicketDetailPageProps) {
|
|
const initialGlobalMonthFilter = periodType === "all" && period !== "all" ? period : currentMonth();
|
|
const [data, setData] = useState<TicketPeriod | null>(null);
|
|
const [loadingId, setLoadingId] = useState<string | null>(null);
|
|
const [deletingId, setDeletingId] = useState<string | null>(null);
|
|
const [savingTicket, setSavingTicket] = useState(false);
|
|
const [editTicketNumber, setEditTicketNumber] = useState("");
|
|
const [editOrganizationId, setEditOrganizationId] = useState("");
|
|
const [editOrganizationName, setEditOrganizationName] = useState<string | null>(null);
|
|
const [editWorkType, setEditWorkType] = useState<WorkType>("support");
|
|
const [editingSession, setEditingSession] = useState<SessionEntry | null>(null);
|
|
const [editSessionOrganizationId, setEditSessionOrganizationId] = useState("");
|
|
const [editSessionOrganizationName, setEditSessionOrganizationName] = useState<string | null>(null);
|
|
const [editSessionActivity, setEditSessionActivity] = useState("");
|
|
const [editSessionWorkType, setEditSessionWorkType] = useState<WorkType>("support");
|
|
const [editSessionDay, setEditSessionDay] = useState("");
|
|
const [editSessionStartTime, setEditSessionStartTime] = useState("");
|
|
const [editSessionEndTime, setEditSessionEndTime] = useState("");
|
|
const [savingSessionDetails, setSavingSessionDetails] = useState(false);
|
|
const [dayBillingInputs, setDayBillingInputs] = useState<Record<string, string>>({});
|
|
const [savingDayBillingKey, setSavingDayBillingKey] = useState<string | null>(null);
|
|
const [ticketSession, setTicketSession] = useState<TicketSessionFormState>(() => emptyTicketSessionForm());
|
|
const [savingTicketSession, setSavingTicketSession] = useState(false);
|
|
const [globalMonthFilter, setGlobalMonthFilter] = useState(initialGlobalMonthFilter);
|
|
const [globalStatusFilter, setGlobalStatusFilter] = useState<"all" | "open" | "billed" | "non_billable">("all");
|
|
const [globalSourceFilter, setGlobalSourceFilter] = useState<"all" | "manual" | "recurring">("all");
|
|
|
|
async function load() {
|
|
try {
|
|
setData(
|
|
periodType === "all"
|
|
? await getTicketDetails(ticketId, {
|
|
month: globalMonthFilter,
|
|
status: globalStatusFilter,
|
|
source: globalSourceFilter
|
|
})
|
|
: await getTicketPeriod(periodType, period, ticketId)
|
|
);
|
|
} catch (error) {
|
|
toast.error("Ticket konnte nicht geladen werden", {
|
|
description: error instanceof Error ? error.message : "Unbekannter Fehler"
|
|
});
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
void load();
|
|
}, [periodType, period, ticketId, globalMonthFilter, globalStatusFilter, globalSourceFilter]);
|
|
|
|
useEffect(() => {
|
|
if (periodType !== "all") {
|
|
return;
|
|
}
|
|
|
|
setGlobalMonthFilter(period !== "all" ? period : currentMonth());
|
|
}, [periodType, period, ticketId]);
|
|
|
|
useEffect(() => {
|
|
const nextInputs = Object.fromEntries((data?.dayBillings ?? []).map((billing) => [billing.day, formatHoursInput(billing.billed_minutes)]));
|
|
setDayBillingInputs(nextInputs);
|
|
}, [data?.dayBillings]);
|
|
|
|
useEffect(() => {
|
|
if (!data?.ticket) {
|
|
return;
|
|
}
|
|
|
|
setEditTicketNumber(data.ticket.ticket_number);
|
|
setEditOrganizationId(data.ticket.organization_id ?? "");
|
|
setEditOrganizationName(data.ticket.organization_name ?? null);
|
|
setEditWorkType(data.ticket.work_type ?? "support");
|
|
setTicketSession((current) => ({
|
|
...current,
|
|
organizationId: data.ticket.organization_id ?? current.organizationId,
|
|
organizationName: data.ticket.organization_name ?? current.organizationName,
|
|
workType: data.ticket.work_type ?? current.workType
|
|
}));
|
|
}, [data?.ticket]);
|
|
|
|
const ticket = data?.ticket;
|
|
const isGlobalTicket = periodType === "all";
|
|
const isPeriodClosed = Boolean(data?.closed);
|
|
const periodLabel = periodType === "month" ? "Monat" : periodType === "day" ? "Tag" : "Ticket";
|
|
const sessionsScopeLabel = isGlobalTicket
|
|
? globalMonthFilter === "all"
|
|
? "im gesamten Ticketverlauf"
|
|
: `im Monat ${globalMonthFilter}`
|
|
: `im ${periodLabel.toLowerCase()} ${period}`;
|
|
const teamspaceLabel = isGlobalTicket || periodType === "month" ? "Teamspace gesamt" : "Teamspace Tag";
|
|
const availableMonths = data?.availableMonths ?? [];
|
|
const selectedMonthHasSessions = availableMonths.some((month) => month.month === globalMonthFilter);
|
|
const dayBillingMap = useMemo(() => new Map((data?.dayBillings ?? []).map((billing) => [billing.day, billing.billed_minutes])), [data?.dayBillings]);
|
|
const savedDayBillingInput = (day: string) => formatHoursInput(dayBillingMap.get(day));
|
|
const isDayBillingDirty = (day: string) => (dayBillingInputs[day] ?? "") !== savedDayBillingInput(day);
|
|
const sessionGroups = useMemo(() => {
|
|
const groups = new Map<
|
|
string,
|
|
{ key: string; label: string; totalMinutes: number; nonBillableMinutes: number; openMinutes: number; sessions: SessionEntry[] }
|
|
>();
|
|
|
|
for (const session of data?.sessions ?? []) {
|
|
const key = sessionDayKey(session.started_at);
|
|
const group = groups.get(key);
|
|
const billedMinutes = session.billing_status === "billed" ? session.rounded_minutes : 0;
|
|
const nonBillableMinutes = session.billing_status === "non_billable" ? session.rounded_minutes : 0;
|
|
const openMinutes = session.billing_status === null ? session.rounded_minutes : 0;
|
|
|
|
if (group) {
|
|
group.sessions.push(session);
|
|
group.totalMinutes += billedMinutes;
|
|
group.nonBillableMinutes += nonBillableMinutes;
|
|
group.openMinutes += openMinutes;
|
|
continue;
|
|
}
|
|
|
|
groups.set(key, {
|
|
key,
|
|
label: formatDate(session.started_at),
|
|
totalMinutes: billedMinutes,
|
|
nonBillableMinutes,
|
|
openMinutes,
|
|
sessions: [session]
|
|
});
|
|
}
|
|
|
|
return Array.from(groups.values());
|
|
}, [data?.sessions]);
|
|
const periodTotalMinutes = sessionGroups.reduce((sum, group) => sum + group.totalMinutes, 0);
|
|
const periodTeamspaceMinutes = Array.from(dayBillingMap.values()).reduce((sum, minutes) => sum + Number(minutes ?? 0), 0);
|
|
const ticketDataDirty = Boolean(
|
|
ticket &&
|
|
(editTicketNumber !== ticket.ticket_number ||
|
|
editOrganizationId !== (ticket.organization_id ?? "") ||
|
|
editWorkType !== (ticket.work_type ?? "support"))
|
|
);
|
|
const hasUnsavedChanges = ticketDataDirty || sessionGroups.some((group) => isDayBillingDirty(group.key));
|
|
|
|
useEffect(() => {
|
|
if (!ticket) {
|
|
return;
|
|
}
|
|
|
|
const ticketMonth = isGlobalTicket ? globalMonthFilter : periodType === "day" ? period.slice(0, 7) : period;
|
|
|
|
onOpenTicketChange?.({
|
|
key: `ticket:${ticket.id}`,
|
|
ticketId: ticket.id,
|
|
ticketNumber: ticket.ticket_number,
|
|
periodType: "all",
|
|
period: ticketMonth,
|
|
path: `/tickets/${ticket.id}?month=${ticketMonth}`,
|
|
dirty: hasUnsavedChanges
|
|
});
|
|
}, [ticket, periodType, period, isGlobalTicket, globalMonthFilter, hasUnsavedChanges, onOpenTicketChange]);
|
|
|
|
async function setBilling(sessionId: string, billingStatus: BillingStatus) {
|
|
if (isPeriodClosed && billingStatus !== null) {
|
|
toast.warning("Monat ist abgeschlossen", {
|
|
description: "Öffne den Monat zuerst wieder, um Bewertungen zu ändern."
|
|
});
|
|
return;
|
|
}
|
|
|
|
setLoadingId(sessionId);
|
|
try {
|
|
await updateSessionBilling(sessionId, billingStatus);
|
|
await load();
|
|
} catch (error) {
|
|
toast.error("Status konnte nicht gespeichert werden", {
|
|
description: error instanceof Error ? error.message : "Unbekannter Fehler"
|
|
});
|
|
} finally {
|
|
setLoadingId(null);
|
|
}
|
|
}
|
|
|
|
async function saveDayBilling(day: string) {
|
|
if (!ticket) {
|
|
return;
|
|
}
|
|
|
|
if (isPeriodClosed) {
|
|
toast.warning("Monat ist abgeschlossen", {
|
|
description: "Öffne den Monat zuerst wieder, um Teamspace-Zeiten zu ändern."
|
|
});
|
|
return;
|
|
}
|
|
|
|
const parsedMinutes = parseHoursInput(dayBillingInputs[day] ?? "");
|
|
|
|
if (parsedMinutes === undefined) {
|
|
toast.error("Teamspace-Zeit prüfen", {
|
|
description: "Bitte Stunden als positive Zahl eintragen, z.B. 1,5."
|
|
});
|
|
return;
|
|
}
|
|
|
|
const currentMinutes = dayBillingMap.get(day) ?? null;
|
|
|
|
if (parsedMinutes === currentMinutes) {
|
|
return;
|
|
}
|
|
|
|
setSavingDayBillingKey(day);
|
|
try {
|
|
await updateTicketDayBilling(ticket.id, day, parsedMinutes);
|
|
toast.success("Zeit gespeichert");
|
|
await load();
|
|
} catch (error) {
|
|
toast.error("Zeit konnte nicht gespeichert werden", {
|
|
description: error instanceof Error ? error.message : "Unbekannter Fehler"
|
|
});
|
|
} finally {
|
|
setSavingDayBillingKey(null);
|
|
}
|
|
}
|
|
|
|
async function saveTicketData(event: FormEvent) {
|
|
event.preventDefault();
|
|
|
|
if (!ticket) {
|
|
return;
|
|
}
|
|
|
|
if (!editOrganizationId) {
|
|
toast.error("Organisation wählen");
|
|
return;
|
|
}
|
|
|
|
setSavingTicket(true);
|
|
try {
|
|
await updateTicket(ticket.id, {
|
|
ticketNumber: editTicketNumber,
|
|
organizationId: editOrganizationId,
|
|
workType: editWorkType
|
|
});
|
|
toast.success("Ticketdaten gespeichert", {
|
|
description: "Organisation und Art wurden auf die vorhandenen Sessions übernommen."
|
|
});
|
|
await load();
|
|
} catch (error) {
|
|
toast.error("Ticketdaten konnten nicht gespeichert werden", {
|
|
description: error instanceof Error ? error.message : "Unbekannter Fehler"
|
|
});
|
|
} finally {
|
|
setSavingTicket(false);
|
|
}
|
|
}
|
|
|
|
async function submitTicketSession(event: FormEvent) {
|
|
event.preventDefault();
|
|
|
|
if (!ticket) {
|
|
return;
|
|
}
|
|
|
|
const effectiveOrganizationId = ticket.organization_id ?? ticketSession.organizationId;
|
|
const effectiveWorkType = ticket.work_type ?? ticketSession.workType;
|
|
|
|
if (!effectiveOrganizationId) {
|
|
toast.error("Organisation wählen");
|
|
return;
|
|
}
|
|
|
|
const startedAt = new Date(`${ticketSession.day}T${ticketSession.startTime}:00`);
|
|
const endedAt = new Date(`${ticketSession.day}T${ticketSession.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);
|
|
|
|
setSavingTicketSession(true);
|
|
|
|
try {
|
|
await createSession({
|
|
ticketNumber: ticket.ticket_number,
|
|
organizationId: effectiveOrganizationId,
|
|
activity: ticketSession.activity,
|
|
workType: effectiveWorkType,
|
|
startedAt: startedAt.toISOString(),
|
|
endedAt: endedAt.toISOString(),
|
|
durationSeconds
|
|
});
|
|
toast.success("Session nachgetragen", {
|
|
description: "Der Eintrag wurde diesem Ticket zugeordnet. Betroffene Abschlüsse wurden wieder geöffnet."
|
|
});
|
|
setTicketSession({
|
|
...emptyTicketSessionForm(),
|
|
organizationId: ticket.organization_id ?? "",
|
|
organizationName: ticket.organization_name ?? null,
|
|
workType: ticket.work_type ?? "support",
|
|
day: ticketSession.day
|
|
});
|
|
await load();
|
|
} catch (error) {
|
|
toast.error("Session konnte nicht nachgetragen werden", {
|
|
description: error instanceof Error ? error.message : "Unbekannter Fehler"
|
|
});
|
|
} finally {
|
|
setSavingTicketSession(false);
|
|
}
|
|
}
|
|
|
|
function openSessionEditor(session: SessionEntry) {
|
|
setEditingSession(session);
|
|
setEditSessionOrganizationId(session.organization_id ?? "");
|
|
setEditSessionOrganizationName(session.organization_name ?? null);
|
|
setEditSessionActivity(session.activity);
|
|
setEditSessionWorkType(session.work_type);
|
|
setEditSessionDay(toDateLocalValue(session.started_at));
|
|
setEditSessionStartTime(toTimeLocalValue(session.started_at));
|
|
setEditSessionEndTime(toTimeLocalValue(session.ended_at));
|
|
}
|
|
|
|
async function saveSessionData(event: FormEvent) {
|
|
event.preventDefault();
|
|
|
|
if (!editingSession) {
|
|
return;
|
|
}
|
|
|
|
if (!editSessionOrganizationId) {
|
|
toast.error("Organisation wählen");
|
|
return;
|
|
}
|
|
|
|
const startedAt = new Date(`${editSessionDay}T${editSessionStartTime}:00`);
|
|
const endedAt = new Date(`${editSessionDay}T${editSessionEndTime}:00`);
|
|
|
|
if (Number.isNaN(startedAt.getTime()) || Number.isNaN(endedAt.getTime())) {
|
|
toast.error("Beginn und Ende prüfen");
|
|
return;
|
|
}
|
|
|
|
if (endedAt <= startedAt) {
|
|
toast.error("Ende muss nach Beginn liegen");
|
|
return;
|
|
}
|
|
|
|
setSavingSessionDetails(true);
|
|
try {
|
|
await updateSessionDetails(editingSession.id, {
|
|
organizationId: editSessionOrganizationId,
|
|
activity: editSessionActivity,
|
|
workType: editSessionWorkType,
|
|
startedAt: startedAt.toISOString(),
|
|
endedAt: endedAt.toISOString()
|
|
});
|
|
toast.success("Session aktualisiert");
|
|
setEditingSession(null);
|
|
await load();
|
|
} catch (error) {
|
|
toast.error("Session konnte nicht gespeichert werden", {
|
|
description: error instanceof Error ? error.message : "Unbekannter Fehler"
|
|
});
|
|
} finally {
|
|
setSavingSessionDetails(false);
|
|
}
|
|
}
|
|
|
|
async function removeSession(session: SessionEntry) {
|
|
const confirmed = window.confirm(`Session vom ${formatDateTime(session.started_at)} wirklich löschen?`);
|
|
|
|
if (!confirmed) {
|
|
return;
|
|
}
|
|
|
|
setDeletingId(session.id);
|
|
try {
|
|
const result = await deleteSession(session.id);
|
|
|
|
if (result.deleted.ticketDeleted || result.deleted.userTicketEmpty) {
|
|
toast.success("Letzte Session gelöscht", {
|
|
description: result.deleted.ticketDeleted ? "Das leere Ticket wurde entfernt." : "Für dich gibt es zu diesem Ticket keine Einträge mehr."
|
|
});
|
|
onNavigate("/analysis");
|
|
return;
|
|
}
|
|
|
|
toast.success("Session gelöscht", {
|
|
description: "Betroffene Abschlüsse wurden wieder geöffnet."
|
|
});
|
|
await load();
|
|
} catch (error) {
|
|
toast.error("Session konnte nicht gelöscht werden", {
|
|
description: error instanceof Error ? error.message : "Unbekannter Fehler"
|
|
});
|
|
} finally {
|
|
setDeletingId(null);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
|
|
<div>
|
|
<Button variant="ghost" size="sm" className="-ml-2 mb-1 h-8" onClick={() => onNavigate("/analysis")}>
|
|
<ArrowLeft className="size-4" />
|
|
Zur Auswertung
|
|
</Button>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h2 className="text-xl font-semibold tracking-normal sm:text-2xl">{ticket?.ticket_number ?? "Ticket"}</h2>
|
|
{ticket?.ticket_number ? <CopyTicketButton ticketNumber={ticket.ticket_number} /> : null}
|
|
{(periodType === "month" || (isGlobalTicket && globalMonthFilter !== "all")) && data?.closed ? <Badge variant="outline">Monat geschlossen</Badge> : null}
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">Sessions {sessionsScopeLabel}</p>
|
|
</div>
|
|
|
|
<Badge variant={data?.openCount === 0 ? "success" : "warning"}>
|
|
{data?.openCount === 0 ? "Bewertet" : `${data?.openCount ?? 0} offen`}
|
|
</Badge>
|
|
</div>
|
|
|
|
{(periodType === "month" || (isGlobalTicket && globalMonthFilter !== "all")) && data?.closed ? (
|
|
<Alert variant="success" className="py-3 text-sm">
|
|
Dieser Monat ist abgeschlossen. Bewertungen und Änderungen sind geschützt, bis du den Monat im Monatsabschluss wieder öffnest.
|
|
</Alert>
|
|
) : null}
|
|
|
|
{isGlobalTicket ? (
|
|
<Card>
|
|
<CardHeader className="p-4">
|
|
<CardTitle>Filter</CardTitle>
|
|
<CardDescription>Grenzt die Sessionliste dieses Tickets ein. Die Ticketdaten selbst bleiben global.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-3 px-4 pb-4 md:grid-cols-3">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="ticket-month-filter">Monat</label>
|
|
<select
|
|
id="ticket-month-filter"
|
|
className="h-8 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={globalMonthFilter}
|
|
onChange={(event) => setGlobalMonthFilter(event.currentTarget.value)}
|
|
>
|
|
<option value="all">Alle Monate</option>
|
|
{globalMonthFilter !== "all" && !selectedMonthHasSessions ? <option value={globalMonthFilter}>{globalMonthFilter} (0)</option> : null}
|
|
{availableMonths.map((month) => (
|
|
<option key={month.month} value={month.month}>
|
|
{month.month} ({month.session_count})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="ticket-status-filter">Bewertung</label>
|
|
<select
|
|
id="ticket-status-filter"
|
|
className="h-8 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={globalStatusFilter}
|
|
onChange={(event) => setGlobalStatusFilter(event.currentTarget.value as typeof globalStatusFilter)}
|
|
>
|
|
<option value="all">Alle Bewertungen</option>
|
|
<option value="open">Offen</option>
|
|
<option value="billed">Abgerechnet</option>
|
|
<option value="non_billable">Nicht abrechenbar</option>
|
|
</select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="ticket-source-filter">Quelle</label>
|
|
<select
|
|
id="ticket-source-filter"
|
|
className="h-8 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={globalSourceFilter}
|
|
onChange={(event) => setGlobalSourceFilter(event.currentTarget.value as typeof globalSourceFilter)}
|
|
>
|
|
<option value="all">Alle Quellen</option>
|
|
<option value="manual">Manuell</option>
|
|
<option value="recurring">Fixe Abrechnung</option>
|
|
</select>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
) : null}
|
|
|
|
<Card>
|
|
<CardHeader className="p-4">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<CardTitle>Ticketdaten</CardTitle>
|
|
<CardDescription>Änderungen an Organisation und Art werden auf alle vorhandenen Sessions dieses Tickets übernommen.</CardDescription>
|
|
</div>
|
|
<HelpLink anchor="ticketdaten" label="Hilfe zu Ticketdaten" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="px-4 pb-4">
|
|
<form className="grid gap-3 lg:grid-cols-[180px_minmax(220px,1fr)_180px_auto] lg:items-end" onSubmit={saveTicketData}>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="edit-ticket-number">Ticketnummer</label>
|
|
<Input id="edit-ticket-number" value={editTicketNumber} onChange={(event) => setEditTicketNumber(event.currentTarget.value)} required />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="edit-ticket-organization">Organisation</label>
|
|
{ticket?.customer_name && !ticket.organization_id ? (
|
|
<p className="text-xs text-muted-foreground">Bisheriger Freitext: {ticket.customer_name}</p>
|
|
) : null}
|
|
<OrganizationSelect
|
|
value={editOrganizationId}
|
|
selectedName={editOrganizationName}
|
|
onChange={(organization) => {
|
|
setEditOrganizationId(organization.id);
|
|
setEditOrganizationName(organization.name);
|
|
}}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="edit-ticket-work-type">Art</label>
|
|
<select
|
|
id="edit-ticket-work-type"
|
|
className="h-8 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={editWorkType}
|
|
onChange={(event) => setEditWorkType(event.currentTarget.value as WorkType)}
|
|
>
|
|
<option value="support">Support</option>
|
|
<option value="consulting">Consulting</option>
|
|
</select>
|
|
</div>
|
|
<Button type="submit" disabled={savingTicket}>
|
|
<Save className="size-4" />
|
|
{savingTicket ? "Speichert..." : "Speichern"}
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="gap-3 p-4 sm:flex-row sm:items-start sm:justify-between sm:space-y-0">
|
|
<div>
|
|
<CardTitle>Session-Einträge</CardTitle>
|
|
<CardDescription>Wähle für jede Session genau eine Bewertung aus oder lösche falsche Einträge.</CardDescription>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<div className="flex items-center gap-2 rounded-md border bg-muted/30 px-3 py-2 text-sm">
|
|
<span className="text-muted-foreground">Abgerechnet</span>
|
|
<span className="font-semibold">{formatMinutes(periodTotalMinutes)}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 rounded-md border bg-muted/30 px-3 py-2 text-sm">
|
|
<span className="text-muted-foreground">{teamspaceLabel}</span>
|
|
<span className="font-semibold">{formatMinutes(periodTeamspaceMinutes)}</span>
|
|
</div>
|
|
<HelpLink anchor="ticketdetail" label="Hilfe zur Ticketdetailansicht" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="px-4 pb-4">
|
|
<div className="space-y-3">
|
|
{sessionGroups.map((group) => (
|
|
<div key={group.key} className="rounded-md border bg-background">
|
|
<div className="flex flex-col gap-2 border-b bg-muted/40 px-3 py-2 sm:flex-row sm:items-center sm:justify-between">
|
|
<p className="font-medium">{group.label}</p>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Badge variant="outline">Tag abgerechnet {formatMinutes(group.totalMinutes)}</Badge>
|
|
{group.nonBillableMinutes > 0 ? <Badge variant="secondary">Nicht {formatMinutes(group.nonBillableMinutes)}</Badge> : null}
|
|
{group.openMinutes > 0 ? <Badge variant="warning">Offen {formatMinutes(group.openMinutes)}</Badge> : null}
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
<label htmlFor={`crm-billing-${group.key}`}>Teamspace</label>
|
|
<Input
|
|
id={`crm-billing-${group.key}`}
|
|
type="text"
|
|
className="h-7 w-24 bg-background text-right"
|
|
autoComplete="off"
|
|
inputMode="decimal"
|
|
value={dayBillingInputs[group.key] ?? ""}
|
|
disabled={isPeriodClosed || savingDayBillingKey === group.key}
|
|
placeholder="0"
|
|
onChange={(event) => {
|
|
const nextValue = event.currentTarget.value;
|
|
|
|
if (!isPartialHoursInput(nextValue)) {
|
|
return;
|
|
}
|
|
|
|
setDayBillingInputs((current) => ({
|
|
...current,
|
|
[group.key]: nextValue
|
|
}));
|
|
}}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
}
|
|
}}
|
|
/>
|
|
<span>h</span>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
className={cn("h-7 w-[104px]", !isDayBillingDirty(group.key) && "invisible")}
|
|
disabled={isPeriodClosed || !isDayBillingDirty(group.key) || savingDayBillingKey === group.key}
|
|
onMouseDown={(event) => event.preventDefault()}
|
|
onClick={() => void saveDayBilling(group.key)}
|
|
>
|
|
<Save className="size-3.5" />
|
|
{savingDayBillingKey === group.key ? "Speichert..." : "Speichern"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-1.5 p-2 sm:p-3">
|
|
{group.sessions.map((session) => (
|
|
<div key={session.id} className="ml-3 rounded-md border bg-card/40 p-2 sm:ml-6">
|
|
<div className="grid gap-2 lg:grid-cols-[140px_minmax(0,1fr)_90px_auto_auto] lg:items-center">
|
|
<div className="text-sm text-muted-foreground">
|
|
{formatTimeRange(session.started_at, session.ended_at)}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="whitespace-pre-wrap break-words text-sm font-medium">{session.activity}</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-1">
|
|
<Badge variant="outline" className="w-fit">{formatMinutes(session.rounded_minutes)}</Badge>
|
|
{session.recurring_billing_id ? <Badge variant="secondary">fix</Badge> : null}
|
|
</div>
|
|
<BillingButtons
|
|
session={session}
|
|
disabled={isPeriodClosed}
|
|
loading={loadingId === session.id}
|
|
onChange={(value) => setBilling(session.id, value)}
|
|
/>
|
|
<div className="flex gap-1 lg:justify-end">
|
|
<Button size="icon" variant="ghost" className="size-8" onClick={() => openSessionEditor(session)}>
|
|
<Pencil className="size-4" />
|
|
<span className="sr-only">Session bearbeiten</span>
|
|
</Button>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="size-8 text-destructive hover:text-destructive"
|
|
disabled={deletingId === session.id}
|
|
onClick={() => removeSession(session)}
|
|
>
|
|
<Trash2 className="size-4" />
|
|
<span className="sr-only">Session löschen</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{data?.sessions.length === 0 ? (
|
|
<p className="py-8 text-center text-sm text-muted-foreground">Keine Sessions für dieses Ticket im gewählten Filter.</p>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="p-4">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<CardTitle>Session nachtragen</CardTitle>
|
|
<CardDescription>Neue Zeit direkt diesem Ticket zuordnen.</CardDescription>
|
|
</div>
|
|
<HelpLink anchor="session-nachtragen" label="Hilfe zum Nachtragen von Sessions" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="px-4 pb-4">
|
|
<form className="space-y-4" onSubmit={submitTicketSession}>
|
|
{ticket?.organization_id && ticket.work_type ? (
|
|
<div className="grid gap-2 rounded-md border bg-muted/30 p-3 text-sm sm:grid-cols-[1fr_auto] sm:items-center">
|
|
<span className="font-medium">{ticket.organization_name ?? ticket.customer_name}</span>
|
|
<Badge variant="outline">{ticket.work_type === "support" ? "Support" : "Consulting"}</Badge>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-3 lg:grid-cols-[minmax(220px,1fr)_180px]">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Organisation</label>
|
|
{ticket?.customer_name && !ticket.organization_id ? (
|
|
<p className="text-xs text-muted-foreground">Bisheriger Freitext: {ticket.customer_name}</p>
|
|
) : null}
|
|
<OrganizationSelect
|
|
value={ticketSession.organizationId}
|
|
selectedName={ticketSession.organizationName}
|
|
onChange={(organization) =>
|
|
setTicketSession({
|
|
...ticketSession,
|
|
organizationId: organization.id,
|
|
organizationName: organization.name
|
|
})
|
|
}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="ticket-session-work-type">
|
|
Art
|
|
</label>
|
|
<select
|
|
id="ticket-session-work-type"
|
|
className="h-8 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={ticketSession.workType}
|
|
onChange={(event) => setTicketSession({ ...ticketSession, 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-[150px_120px_120px_minmax(220px,1fr)_auto] lg:items-end">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="ticket-session-day">
|
|
Datum
|
|
</label>
|
|
<Input
|
|
id="ticket-session-day"
|
|
type="date"
|
|
value={ticketSession.day}
|
|
onChange={(event) => setTicketSession({ ...ticketSession, day: event.currentTarget.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="ticket-session-start">
|
|
Von
|
|
</label>
|
|
<Input
|
|
id="ticket-session-start"
|
|
type="time"
|
|
value={ticketSession.startTime}
|
|
onChange={(event) => setTicketSession({ ...ticketSession, startTime: event.currentTarget.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="ticket-session-end">
|
|
Bis
|
|
</label>
|
|
<Input
|
|
id="ticket-session-end"
|
|
type="time"
|
|
value={ticketSession.endTime}
|
|
onChange={(event) => setTicketSession({ ...ticketSession, endTime: event.currentTarget.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="ticket-session-activity">
|
|
Tätigkeit
|
|
</label>
|
|
<Textarea
|
|
id="ticket-session-activity"
|
|
className="min-h-20"
|
|
value={ticketSession.activity}
|
|
onChange={(event) => setTicketSession({ ...ticketSession, activity: event.currentTarget.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
<Button type="submit" disabled={savingTicketSession}>
|
|
<Save className="size-4" />
|
|
{savingTicketSession ? "Speichert..." : "Nachtragen"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
|
|
{data && data.openCount > 0 ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
Noch {data.openCount} Session(s) ohne Auswahl. Erst wenn im Monat keine Sessions mehr offen sind, kann der Monat abgeschlossen werden.
|
|
</p>
|
|
) : null}
|
|
|
|
<Dialog open={Boolean(editingSession)} onOpenChange={(open) => !open && setEditingSession(null)}>
|
|
<DialogContent className="max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] overflow-y-auto p-5 sm:max-w-2xl">
|
|
<DialogHeader className="pr-8">
|
|
<DialogTitle>Session bearbeiten</DialogTitle>
|
|
<DialogDescription>Beginn, Ende, Tätigkeit und Stammdaten dieses Eintrags nachträglich korrigieren.</DialogDescription>
|
|
</DialogHeader>
|
|
<form className="space-y-4 overflow-x-hidden" onSubmit={saveSessionData}>
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="session-day">Datum</label>
|
|
<Input
|
|
id="session-day"
|
|
type="date"
|
|
value={editSessionDay}
|
|
onChange={(event) => setEditSessionDay(event.currentTarget.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="session-start-time">Von</label>
|
|
<Input
|
|
id="session-start-time"
|
|
type="time"
|
|
value={editSessionStartTime}
|
|
onChange={(event) => setEditSessionStartTime(event.currentTarget.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="session-end-time">Bis</label>
|
|
<Input
|
|
id="session-end-time"
|
|
type="time"
|
|
value={editSessionEndTime}
|
|
onChange={(event) => setEditSessionEndTime(event.currentTarget.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="session-organization">Organisation</label>
|
|
{editingSession?.customer_name && !editingSession.organization_id ? (
|
|
<p className="text-xs text-muted-foreground">Bisheriger Freitext: {editingSession.customer_name}</p>
|
|
) : null}
|
|
<OrganizationSelect
|
|
value={editSessionOrganizationId}
|
|
selectedName={editSessionOrganizationName}
|
|
onChange={(organization) => {
|
|
setEditSessionOrganizationId(organization.id);
|
|
setEditSessionOrganizationName(organization.name);
|
|
}}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="session-activity">Tätigkeit</label>
|
|
<Textarea
|
|
id="session-activity"
|
|
className="min-h-24 resize-y"
|
|
value={editSessionActivity}
|
|
onChange={(event) => setEditSessionActivity(event.currentTarget.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium" htmlFor="session-work-type">Art</label>
|
|
<select
|
|
id="session-work-type"
|
|
className="h-8 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={editSessionWorkType}
|
|
disabled={Boolean(editingSession?.recurring_billing_id)}
|
|
onChange={(event) => setEditSessionWorkType(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={savingSessionDetails}>
|
|
<Save className="size-4" />
|
|
{savingSessionDetails ? "Speichert..." : "Session speichern"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|