873 lines
38 KiB
TypeScript
873 lines
38 KiB
TypeScript
import { ChevronLeft, ChevronRight, Clock3, ExternalLink, RotateCcw, SlidersHorizontal, Ticket, UserCheck, Users } from "lucide-react";
|
|
import type { LucideIcon } from "lucide-react";
|
|
import { Fragment, useEffect, useMemo, useRef, useState } from "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 { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { CopyTicketButton } from "@/components/CopyTicketButton";
|
|
import { HelpLink } from "@/components/HelpLink";
|
|
import { getPeriodOverview } from "../api";
|
|
import { currentDay, currentMonth, formatMinutes } from "../format";
|
|
import type { PeriodOverview, PeriodType, TicketSummary } from "../types";
|
|
|
|
type AnalysisPageProps = {
|
|
onNavigate: (to: string) => void;
|
|
};
|
|
|
|
type TimelineBucket = {
|
|
key: string;
|
|
label: string;
|
|
totalMinutes: number;
|
|
sessionCount: number;
|
|
};
|
|
|
|
type TicketGroupBy = "none" | "workType" | "organization" | "status";
|
|
type TicketSortBy = "ticket" | "workType" | "organization" | "status";
|
|
type TicketSortDirection = "asc" | "desc";
|
|
type TicketStatusFilter = "all" | "open" | "evaluated";
|
|
type TicketWorkTypeFilter = "all" | "support" | "consulting";
|
|
|
|
type AnalysisTicketViewSettings = {
|
|
groupBy: TicketGroupBy;
|
|
sortBy: TicketSortBy;
|
|
sortDirection: TicketSortDirection;
|
|
query: string;
|
|
workType: TicketWorkTypeFilter;
|
|
organization: string;
|
|
status: TicketStatusFilter;
|
|
};
|
|
|
|
type TicketSection = {
|
|
key: string;
|
|
label: string;
|
|
tickets: TicketSummary[];
|
|
ticketCount: number;
|
|
totalMinutes: number;
|
|
openCount: number;
|
|
};
|
|
|
|
const analysisTicketViewSettingsKey = "tickettracker.analysis.ticketViewSettings";
|
|
|
|
const defaultTicketViewSettings: AnalysisTicketViewSettings = {
|
|
groupBy: "none",
|
|
sortBy: "ticket",
|
|
sortDirection: "asc",
|
|
query: "",
|
|
workType: "all",
|
|
organization: "all",
|
|
status: "all"
|
|
};
|
|
|
|
const groupByOptions: Array<{ value: TicketGroupBy; label: string }> = [
|
|
{ value: "none", label: "Keine" },
|
|
{ value: "workType", label: "Typ" },
|
|
{ value: "organization", label: "Organisation" },
|
|
{ value: "status", label: "Status" }
|
|
];
|
|
|
|
const sortByOptions: Array<{ value: TicketSortBy; label: string }> = [
|
|
{ value: "ticket", label: "Ticket" },
|
|
{ value: "workType", label: "Typ" },
|
|
{ value: "organization", label: "Organisation" },
|
|
{ value: "status", label: "Status" }
|
|
];
|
|
|
|
function readStoredTicketViewSettings(): AnalysisTicketViewSettings {
|
|
if (typeof window === "undefined") {
|
|
return defaultTicketViewSettings;
|
|
}
|
|
|
|
try {
|
|
const raw = window.localStorage.getItem(analysisTicketViewSettingsKey);
|
|
|
|
if (!raw) {
|
|
return defaultTicketViewSettings;
|
|
}
|
|
|
|
const parsed = JSON.parse(raw) as Partial<AnalysisTicketViewSettings>;
|
|
|
|
return {
|
|
groupBy: groupByOptions.find((option) => option.value === parsed.groupBy)?.value ?? defaultTicketViewSettings.groupBy,
|
|
sortBy: sortByOptions.find((option) => option.value === parsed.sortBy)?.value ?? defaultTicketViewSettings.sortBy,
|
|
sortDirection: parsed.sortDirection === "desc" ? "desc" : defaultTicketViewSettings.sortDirection,
|
|
query: typeof parsed.query === "string" ? parsed.query : defaultTicketViewSettings.query,
|
|
workType: parsed.workType === "support" || parsed.workType === "consulting" ? parsed.workType : defaultTicketViewSettings.workType,
|
|
organization: typeof parsed.organization === "string" ? parsed.organization : defaultTicketViewSettings.organization,
|
|
status: parsed.status === "open" || parsed.status === "evaluated" ? parsed.status : defaultTicketViewSettings.status
|
|
};
|
|
} catch {
|
|
return defaultTicketViewSettings;
|
|
}
|
|
}
|
|
|
|
function TicketStatus({ ticket }: { ticket: TicketSummary }) {
|
|
const ticketOpenCount = ticket.ticket_open_count ?? ticket.open_count;
|
|
|
|
if (ticketOpenCount > 0) {
|
|
return <Badge variant="warning">{ticketOpenCount} offen</Badge>;
|
|
}
|
|
|
|
return <Badge variant="success">bewertet</Badge>;
|
|
}
|
|
|
|
function ticketStatusKey(ticket: TicketSummary): "open" | "evaluated" {
|
|
return (ticket.ticket_open_count ?? ticket.open_count) > 0 ? "open" : "evaluated";
|
|
}
|
|
|
|
function ticketStatusLabel(ticket: TicketSummary) {
|
|
return ticketStatusKey(ticket) === "open" ? "Offen" : "Bewertet";
|
|
}
|
|
|
|
function workTypeLabel(workType: TicketSummary["work_type"]) {
|
|
if (workType === "support") {
|
|
return "Support";
|
|
}
|
|
|
|
if (workType === "consulting") {
|
|
return "Consulting";
|
|
}
|
|
|
|
return "Ohne Typ";
|
|
}
|
|
|
|
function organizationLabel(ticket: TicketSummary) {
|
|
return ticket.customer_name ?? ticket.organization_name ?? "Keine Organisation";
|
|
}
|
|
|
|
function organizationKey(ticket: TicketSummary) {
|
|
return ticket.organization_id ? `id:${ticket.organization_id}` : `name:${organizationLabel(ticket)}`;
|
|
}
|
|
|
|
function compareText(left: string, right: string) {
|
|
return left.localeCompare(right, "de", { numeric: true, sensitivity: "base" });
|
|
}
|
|
|
|
function sortTickets(tickets: TicketSummary[], sortBy: TicketSortBy, direction: TicketSortDirection) {
|
|
const sorted = [...tickets].sort((left, right) => {
|
|
let result = 0;
|
|
|
|
if (sortBy === "ticket") {
|
|
result = compareText(left.ticket_number, right.ticket_number);
|
|
} else if (sortBy === "workType") {
|
|
result = compareText(workTypeLabel(left.work_type), workTypeLabel(right.work_type));
|
|
} else if (sortBy === "organization") {
|
|
result = compareText(organizationLabel(left), organizationLabel(right));
|
|
} else {
|
|
result = compareText(ticketStatusLabel(left), ticketStatusLabel(right));
|
|
}
|
|
|
|
if (result === 0) {
|
|
result = compareText(left.ticket_number, right.ticket_number);
|
|
}
|
|
|
|
return direction === "asc" ? result : -result;
|
|
});
|
|
|
|
return sorted;
|
|
}
|
|
|
|
function groupTicketSections(tickets: TicketSummary[], groupBy: TicketGroupBy): TicketSection[] {
|
|
if (groupBy === "none") {
|
|
return [
|
|
{
|
|
key: "all",
|
|
label: "Alle Tickets",
|
|
tickets,
|
|
ticketCount: tickets.length,
|
|
totalMinutes: tickets.reduce((sum, ticket) => sum + ticket.total_minutes, 0),
|
|
openCount: tickets.reduce((sum, ticket) => sum + (ticket.ticket_open_count ?? ticket.open_count), 0)
|
|
}
|
|
];
|
|
}
|
|
|
|
const groups = new Map<string, TicketSection>();
|
|
|
|
for (const ticket of tickets) {
|
|
const key =
|
|
groupBy === "workType"
|
|
? `workType:${ticket.work_type ?? "none"}`
|
|
: groupBy === "organization"
|
|
? organizationKey(ticket)
|
|
: `status:${ticketStatusKey(ticket)}`;
|
|
const label = groupBy === "workType" ? workTypeLabel(ticket.work_type) : groupBy === "organization" ? organizationLabel(ticket) : ticketStatusLabel(ticket);
|
|
const existing = groups.get(key);
|
|
|
|
if (existing) {
|
|
existing.tickets.push(ticket);
|
|
existing.ticketCount += 1;
|
|
existing.totalMinutes += ticket.total_minutes;
|
|
existing.openCount += ticket.ticket_open_count ?? ticket.open_count;
|
|
continue;
|
|
}
|
|
|
|
groups.set(key, {
|
|
key,
|
|
label,
|
|
tickets: [ticket],
|
|
ticketCount: 1,
|
|
totalMinutes: ticket.total_minutes,
|
|
openCount: ticket.ticket_open_count ?? ticket.open_count
|
|
});
|
|
}
|
|
|
|
return Array.from(groups.values()).sort((left, right) => {
|
|
if (groupBy === "status") {
|
|
return left.key === "status:open" ? -1 : right.key === "status:open" ? 1 : compareText(left.label, right.label);
|
|
}
|
|
|
|
return compareText(left.label, right.label);
|
|
});
|
|
}
|
|
|
|
function buildChartPath(points: Array<{ x: number; y: number }>) {
|
|
if (points.length === 0) {
|
|
return "";
|
|
}
|
|
|
|
if (points.length === 1) {
|
|
return `M ${points[0].x - 18} ${points[0].y} L ${points[0].x + 18} ${points[0].y}`;
|
|
}
|
|
|
|
return points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
|
|
}
|
|
|
|
function niceCeilMinutes(value: number) {
|
|
if (value <= 30) {
|
|
return Math.max(5, Math.ceil(value / 5) * 5);
|
|
}
|
|
|
|
if (value <= 120) {
|
|
return Math.ceil(value / 15) * 15;
|
|
}
|
|
|
|
if (value <= 480) {
|
|
return Math.ceil(value / 30) * 30;
|
|
}
|
|
|
|
return Math.ceil(value / 60) * 60;
|
|
}
|
|
|
|
function formatAxisMinutes(value: number) {
|
|
const minutes = Math.round(value);
|
|
|
|
if (minutes === 0) {
|
|
return "0";
|
|
}
|
|
|
|
if (minutes >= 60) {
|
|
return `${new Intl.NumberFormat("de-DE", { maximumFractionDigits: minutes < 600 ? 1 : 0 }).format(minutes / 60)} h`;
|
|
}
|
|
|
|
return `${minutes} min`;
|
|
}
|
|
|
|
function buildTimeline(periodType: PeriodType, period: string, overview: PeriodOverview | null): TimelineBucket[] {
|
|
const series = new Map((overview?.activitySeries ?? []).map((bucket) => [bucket.bucket_key, bucket]));
|
|
|
|
if (periodType === "day") {
|
|
return Array.from({ length: 24 }).map((_, hour) => {
|
|
const key = String(hour).padStart(2, "0");
|
|
const bucket = series.get(key);
|
|
|
|
return {
|
|
key,
|
|
label: `${key}:00`,
|
|
totalMinutes: bucket?.total_minutes ?? 0,
|
|
sessionCount: bucket?.session_count ?? 0
|
|
};
|
|
});
|
|
}
|
|
|
|
const [year, month] = period.split("-").map(Number);
|
|
const daysInMonth = Number.isFinite(year) && Number.isFinite(month) ? new Date(year, month, 0).getDate() : 31;
|
|
|
|
return Array.from({ length: daysInMonth }).map((_, index) => {
|
|
const day = String(index + 1).padStart(2, "0");
|
|
const key = `${period}-${day}`;
|
|
const bucket = series.get(key);
|
|
|
|
return {
|
|
key,
|
|
label: day,
|
|
totalMinutes: bucket?.total_minutes ?? 0,
|
|
sessionCount: bucket?.session_count ?? 0
|
|
};
|
|
});
|
|
}
|
|
|
|
export function AnalysisPage({ onNavigate }: AnalysisPageProps) {
|
|
const [periodType, setPeriodType] = useState<PeriodType>("month");
|
|
const [period, setPeriod] = useState(currentMonth());
|
|
const [overview, setOverview] = useState<PeriodOverview | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [ticketViewSettings, setTicketViewSettings] = useState<AnalysisTicketViewSettings>(() => readStoredTicketViewSettings());
|
|
const loadRequestId = useRef(0);
|
|
|
|
useEffect(() => {
|
|
window.localStorage.setItem(analysisTicketViewSettingsKey, JSON.stringify(ticketViewSettings));
|
|
}, [ticketViewSettings]);
|
|
|
|
async function load() {
|
|
const requestId = loadRequestId.current + 1;
|
|
loadRequestId.current = requestId;
|
|
setLoading(true);
|
|
try {
|
|
const nextOverview = await getPeriodOverview(periodType, period);
|
|
|
|
if (requestId === loadRequestId.current) {
|
|
setOverview(nextOverview);
|
|
}
|
|
} catch (error) {
|
|
if (requestId === loadRequestId.current) {
|
|
toast.error("Auswertung konnte nicht geladen werden", {
|
|
description: error instanceof Error ? error.message : "Unbekannter Fehler"
|
|
});
|
|
}
|
|
} finally {
|
|
if (requestId === loadRequestId.current) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
void load();
|
|
}, [periodType, period]);
|
|
|
|
useEffect(() => {
|
|
function refreshVisible() {
|
|
if (document.visibilityState === "visible") {
|
|
void load();
|
|
}
|
|
}
|
|
|
|
const interval = window.setInterval(refreshVisible, 60_000);
|
|
window.addEventListener("focus", refreshVisible);
|
|
document.addEventListener("visibilitychange", refreshVisible);
|
|
|
|
return () => {
|
|
window.clearInterval(interval);
|
|
window.removeEventListener("focus", refreshVisible);
|
|
document.removeEventListener("visibilitychange", refreshVisible);
|
|
};
|
|
}, [periodType, period]);
|
|
|
|
function switchPeriodType(nextType: PeriodType) {
|
|
setPeriodType(nextType);
|
|
setPeriod(nextType === "month" ? currentMonth() : currentDay());
|
|
}
|
|
|
|
function changePeriodBy(delta: number) {
|
|
if (periodType === "month") {
|
|
const [year, month] = period.split("-").map(Number);
|
|
const date = Number.isFinite(year) && Number.isFinite(month) ? new Date(year, month - 1, 1) : new Date();
|
|
date.setMonth(date.getMonth() + delta);
|
|
setPeriod(`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`);
|
|
} else {
|
|
const [year, month, day] = period.split("-").map(Number);
|
|
const date =
|
|
Number.isFinite(year) && Number.isFinite(month) && Number.isFinite(day)
|
|
? new Date(year, month - 1, day)
|
|
: new Date();
|
|
date.setDate(date.getDate() + delta);
|
|
setPeriod(`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`);
|
|
}
|
|
|
|
}
|
|
|
|
const totals = overview?.totals;
|
|
const periodLabel = periodType === "month" ? "Monat" : "Tag";
|
|
const metricCards: Array<{ label: string; value: string | number; detail?: string; icon: LucideIcon }> = [
|
|
{ label: "Tickets", value: totals?.tickets ?? 0, icon: Ticket },
|
|
{ label: "Sessions", value: totals?.sessions ?? 0, icon: Users },
|
|
{ label: "Abgerechnet", value: formatMinutes(totals?.minutes ?? 0), detail: `Teamspace ${formatMinutes(totals?.crmBilledMinutes ?? 0)}`, icon: Clock3 },
|
|
{ label: "Nicht abrechenbar", value: formatMinutes(totals?.nonBillableMinutes ?? 0), icon: UserCheck },
|
|
{ label: "Offen", value: totals?.openSessions ?? 0, detail: formatMinutes(totals?.openMinutes ?? 0), icon: UserCheck }
|
|
];
|
|
const tickets = overview?.tickets ?? [];
|
|
const organizationOptions = useMemo(() => {
|
|
const options = new Map<string, string>();
|
|
|
|
for (const ticket of tickets) {
|
|
options.set(organizationKey(ticket), organizationLabel(ticket));
|
|
}
|
|
|
|
return Array.from(options.entries())
|
|
.map(([value, label]) => ({ value, label }))
|
|
.sort((left, right) => compareText(left.label, right.label));
|
|
}, [tickets]);
|
|
const visibleTickets = useMemo(() => {
|
|
const normalizedQuery = ticketViewSettings.query.trim().toLocaleLowerCase("de");
|
|
const filtered = tickets.filter((ticket) => {
|
|
const matchesQuery =
|
|
!normalizedQuery ||
|
|
ticket.ticket_number.toLocaleLowerCase("de").includes(normalizedQuery) ||
|
|
organizationLabel(ticket).toLocaleLowerCase("de").includes(normalizedQuery);
|
|
const matchesWorkType = ticketViewSettings.workType === "all" || ticket.work_type === ticketViewSettings.workType;
|
|
const matchesOrganization = ticketViewSettings.organization === "all" || organizationKey(ticket) === ticketViewSettings.organization;
|
|
const matchesStatus = ticketViewSettings.status === "all" || ticketStatusKey(ticket) === ticketViewSettings.status;
|
|
|
|
return matchesQuery && matchesWorkType && matchesOrganization && matchesStatus;
|
|
});
|
|
|
|
return sortTickets(filtered, ticketViewSettings.sortBy, ticketViewSettings.sortDirection);
|
|
}, [tickets, ticketViewSettings]);
|
|
const ticketSections = useMemo(() => groupTicketSections(visibleTickets, ticketViewSettings.groupBy), [visibleTickets, ticketViewSettings.groupBy]);
|
|
const activeFilterCount = [
|
|
ticketViewSettings.query.trim(),
|
|
ticketViewSettings.workType !== "all",
|
|
ticketViewSettings.organization !== "all",
|
|
ticketViewSettings.status !== "all",
|
|
ticketViewSettings.groupBy !== "none",
|
|
ticketViewSettings.sortBy !== "ticket",
|
|
ticketViewSettings.sortDirection !== "asc"
|
|
].filter(Boolean).length;
|
|
const timeline = buildTimeline(periodType, period, overview);
|
|
const chartWidth = 900;
|
|
const chartHeight = 180;
|
|
const chartPadding = { top: 18, right: 18, bottom: 34, left: 64 };
|
|
const chartInnerWidth = chartWidth - chartPadding.left - chartPadding.right;
|
|
const chartInnerHeight = chartHeight - chartPadding.top - chartPadding.bottom;
|
|
const maxMinutes = Math.max(...timeline.map((bucket) => bucket.totalMinutes), 1);
|
|
const chartMaxMinutes = niceCeilMinutes(maxMinutes);
|
|
const yAxisTicks = Array.from({ length: 5 }).map((_, index) => chartMaxMinutes - (index * chartMaxMinutes) / 4);
|
|
const barWidth = Math.max(4, Math.min(18, chartInnerWidth / Math.max(timeline.length, 1) / 1.8));
|
|
const chartPoints = timeline.map((bucket, index) => {
|
|
const x =
|
|
timeline.length === 1
|
|
? chartPadding.left + chartInnerWidth / 2
|
|
: chartPadding.left + (index * chartInnerWidth) / (timeline.length - 1);
|
|
|
|
return {
|
|
bucket,
|
|
x,
|
|
barHeight: bucket.totalMinutes > 0 ? Math.max(2, (bucket.totalMinutes / chartMaxMinutes) * chartInnerHeight) : 0,
|
|
y: chartPadding.top + (1 - bucket.totalMinutes / chartMaxMinutes) * chartInnerHeight
|
|
};
|
|
});
|
|
const effortPath = buildChartPath(chartPoints.filter((point) => point.bucket.totalMinutes > 0).map((point) => ({ x: point.x, y: point.y })));
|
|
const labelStep = periodType === "month" ? Math.max(1, Math.ceil(timeline.length / 8)) : 3;
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<div className="flex flex-col gap-3 xl:flex-row xl:items-end xl:justify-between">
|
|
<div>
|
|
<h2 className="text-2xl font-semibold tracking-normal">Auswertung</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
{periodType === "month" ? "Tickets prüfen, Sessions bewerten und Zeiten kontrollieren." : "Sessions des Tages prüfen und bewerten."}
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-2 sm:grid-cols-[auto_minmax(220px,300px)] sm:items-end">
|
|
<div className="grid grid-cols-2 rounded-md border bg-background p-1">
|
|
<Button size="sm" variant={periodType === "month" ? "default" : "ghost"} className="h-8" onClick={() => switchPeriodType("month")}>
|
|
Monat
|
|
</Button>
|
|
<Button size="sm" variant={periodType === "day" ? "default" : "ghost"} className="h-8" onClick={() => switchPeriodType("day")}>
|
|
Tag
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<label className="text-xs font-medium text-muted-foreground" htmlFor="period">
|
|
{periodLabel}
|
|
</label>
|
|
{loading ? <span className="text-xs text-muted-foreground">lädt...</span> : null}
|
|
</div>
|
|
<div className="grid grid-cols-[2.25rem_minmax(0,1fr)_2.25rem] gap-1">
|
|
<Button type="button" size="icon" variant="secondary" className="h-9 w-9" onClick={() => changePeriodBy(-1)} aria-label={`${periodLabel} zurück`}>
|
|
<ChevronLeft className="size-4" />
|
|
</Button>
|
|
<Input
|
|
id="period"
|
|
className="h-9"
|
|
type={periodType === "month" ? "month" : "date"}
|
|
value={period}
|
|
onChange={(event) => setPeriod(event.currentTarget.value)}
|
|
/>
|
|
<Button type="button" size="icon" variant="secondary" className="h-9 w-9" onClick={() => changePeriodBy(1)} aria-label={`${periodLabel} vor`}>
|
|
<ChevronRight className="size-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
|
|
{metricCards.map(({ label, value, detail, icon: Icon }) => (
|
|
<Card key={label}>
|
|
<CardContent className="flex items-center gap-3 p-3">
|
|
<div className="grid size-8 shrink-0 place-items-center rounded-lg border bg-muted/40 text-muted-foreground">
|
|
<Icon className="size-3.5" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="text-xs font-medium text-muted-foreground">{label}</p>
|
|
<p className="truncate text-xl font-semibold tracking-normal">{value}</p>
|
|
{detail ? <p className="truncate text-xs text-muted-foreground">{detail}</p> : null}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader className="gap-3 p-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
|
|
<div>
|
|
<CardTitle>Abgerechneter Aufwand</CardTitle>
|
|
<CardDescription>
|
|
{periodType === "month" ? "Abrechenbare Zeit pro Tag im ausgewählten Monat." : "Abrechenbare Zeit pro Stunde am ausgewählten Tag."}
|
|
</CardDescription>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="outline">{formatMinutes(totals?.minutes ?? 0)}</Badge>
|
|
<HelpLink anchor="auswertung" label="Hilfe zur Auswertung" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="px-4 pb-4">
|
|
<div className="h-44 w-full overflow-hidden rounded-md border bg-background">
|
|
{(totals?.minutes ?? 0) > 0 ? (
|
|
<svg viewBox={`0 0 ${chartWidth} ${chartHeight}`} className="h-full w-full">
|
|
{yAxisTicks.map((tick) => {
|
|
const y = chartPadding.top + (1 - tick / chartMaxMinutes) * chartInnerHeight;
|
|
|
|
return (
|
|
<g key={tick}>
|
|
<line x1={chartPadding.left} x2={chartWidth - chartPadding.right} y1={y} y2={y} stroke="currentColor" className="text-muted/70" />
|
|
<line x1={chartPadding.left - 5} x2={chartPadding.left} y1={y} y2={y} stroke="currentColor" className="text-muted-foreground/70" />
|
|
<text x={chartPadding.left - 9} y={y + 4} textAnchor="end" className="fill-muted-foreground text-[11px]">
|
|
{formatAxisMinutes(tick)}
|
|
</text>
|
|
</g>
|
|
);
|
|
})}
|
|
<line
|
|
x1={chartPadding.left}
|
|
x2={chartPadding.left}
|
|
y1={chartPadding.top}
|
|
y2={chartPadding.top + chartInnerHeight}
|
|
stroke="currentColor"
|
|
className="text-muted-foreground/70"
|
|
/>
|
|
|
|
{chartPoints.map((point) => {
|
|
const barY = chartPadding.top + chartInnerHeight - point.barHeight;
|
|
|
|
return (
|
|
<g key={point.bucket.key}>
|
|
{point.bucket.totalMinutes > 0 ? (
|
|
<rect
|
|
x={point.x - barWidth / 2}
|
|
y={barY}
|
|
width={barWidth}
|
|
height={point.barHeight}
|
|
rx="4"
|
|
className="fill-neutral-300 dark:fill-neutral-700"
|
|
/>
|
|
) : null}
|
|
</g>
|
|
);
|
|
})}
|
|
|
|
{effortPath ? <path d={effortPath} fill="none" stroke="currentColor" strokeWidth="2.5" className="text-foreground" /> : null}
|
|
|
|
{chartPoints.filter((point) => point.bucket.totalMinutes > 0).map((point) => (
|
|
<circle key={`${point.bucket.key}-effort`} cx={point.x} cy={point.y} r="3" className="fill-background stroke-foreground" strokeWidth="2" />
|
|
))}
|
|
|
|
{chartPoints.map((point, index) =>
|
|
index % labelStep === 0 || index === chartPoints.length - 1 ? (
|
|
<text key={`${point.bucket.key}-label`} x={point.x} y={chartHeight - 10} textAnchor="middle" className="fill-muted-foreground text-[11px]">
|
|
{point.bucket.label}
|
|
</text>
|
|
) : null
|
|
)}
|
|
</svg>
|
|
) : (
|
|
<div className="grid h-full place-items-center text-sm text-muted-foreground">Keine Daten für den gewählten Zeitraum.</div>
|
|
)}
|
|
</div>
|
|
<div className="mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground">
|
|
<span className="inline-flex items-center gap-1.5">
|
|
<span className="size-2 rounded-sm bg-neutral-300 dark:bg-neutral-700" />
|
|
Abgerechnet
|
|
</span>
|
|
<span className="inline-flex items-center gap-1.5">
|
|
<span className="h-0.5 w-4 bg-foreground" />
|
|
Verlauf
|
|
</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="gap-3 p-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
|
|
<div>
|
|
<CardTitle>Tickets im Zeitraum</CardTitle>
|
|
<CardDescription>
|
|
{periodType === "month" ? "Sessions prüfen, bewerten und bei Bedarf Tickets öffnen." : "Tagesansicht ohne eigenen Abschluss."}
|
|
</CardDescription>
|
|
</div>
|
|
<HelpLink anchor="auswertung" label="Hilfe zu Tickets im Zeitraum" />
|
|
</CardHeader>
|
|
<CardContent className="px-4 pb-4">
|
|
<div className="mb-4 rounded-md border bg-muted/20 p-3">
|
|
<div className="mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<SlidersHorizontal className="size-4 text-muted-foreground" />
|
|
<div>
|
|
<p className="text-sm font-medium">Ansicht</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{visibleTickets.length} von {tickets.length} Ticket(s)
|
|
</p>
|
|
</div>
|
|
{activeFilterCount > 0 ? <Badge variant="outline">{activeFilterCount} aktiv</Badge> : null}
|
|
<HelpLink anchor="auswertung" label="Hilfe zu Filtern und Sortierung" />
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="secondary"
|
|
disabled={activeFilterCount === 0}
|
|
onClick={() => setTicketViewSettings(defaultTicketViewSettings)}
|
|
>
|
|
<RotateCcw className="size-3.5" />
|
|
Zurücksetzen
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid gap-2 md:grid-cols-2 xl:grid-cols-[minmax(180px,1fr)_150px_190px_140px_140px_140px_120px]">
|
|
<div className="space-y-1">
|
|
<label className="text-xs font-medium text-muted-foreground" htmlFor="ticket-filter-query">Suche</label>
|
|
<Input
|
|
id="ticket-filter-query"
|
|
className="h-8"
|
|
value={ticketViewSettings.query}
|
|
placeholder="Ticket oder Organisation"
|
|
onChange={(event) => setTicketViewSettings((current) => ({ ...current, query: event.currentTarget.value }))}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-xs font-medium text-muted-foreground">Typ</label>
|
|
<Select value={ticketViewSettings.workType} onValueChange={(value) => setTicketViewSettings((current) => ({ ...current, workType: value as TicketWorkTypeFilter }))}>
|
|
<SelectTrigger size="sm" className="w-full">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Alle Typen</SelectItem>
|
|
<SelectItem value="support">Support</SelectItem>
|
|
<SelectItem value="consulting">Consulting</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-xs font-medium text-muted-foreground">Organisation</label>
|
|
<Select value={ticketViewSettings.organization} onValueChange={(value) => setTicketViewSettings((current) => ({ ...current, organization: value }))}>
|
|
<SelectTrigger size="sm" className="w-full">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Alle Organisationen</SelectItem>
|
|
{organizationOptions.map((organization) => (
|
|
<SelectItem key={organization.value} value={organization.value}>
|
|
{organization.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-xs font-medium text-muted-foreground">Status</label>
|
|
<Select value={ticketViewSettings.status} onValueChange={(value) => setTicketViewSettings((current) => ({ ...current, status: value as TicketStatusFilter }))}>
|
|
<SelectTrigger size="sm" className="w-full">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Alle Status</SelectItem>
|
|
<SelectItem value="open">Offen</SelectItem>
|
|
<SelectItem value="evaluated">Bewertet</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-xs font-medium text-muted-foreground">Gruppierung</label>
|
|
<Select value={ticketViewSettings.groupBy} onValueChange={(value) => setTicketViewSettings((current) => ({ ...current, groupBy: value as TicketGroupBy }))}>
|
|
<SelectTrigger size="sm" className="w-full">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{groupByOptions.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-xs font-medium text-muted-foreground">Sortierung</label>
|
|
<Select value={ticketViewSettings.sortBy} onValueChange={(value) => setTicketViewSettings((current) => ({ ...current, sortBy: value as TicketSortBy }))}>
|
|
<SelectTrigger size="sm" className="w-full">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{sortByOptions.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-xs font-medium text-muted-foreground">Richtung</label>
|
|
<Select value={ticketViewSettings.sortDirection} onValueChange={(value) => setTicketViewSettings((current) => ({ ...current, sortDirection: value as TicketSortDirection }))}>
|
|
<SelectTrigger size="sm" className="w-full">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="asc">Aufsteigend</SelectItem>
|
|
<SelectItem value="desc">Absteigend</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="hidden md:block">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Ticket</TableHead>
|
|
<TableHead>Organisation</TableHead>
|
|
<TableHead>Art</TableHead>
|
|
<TableHead>Sessions</TableHead>
|
|
<TableHead>Zeit abgerechnet</TableHead>
|
|
<TableHead>Sessions abgerechnet</TableHead>
|
|
<TableHead>Nicht abrechenbar</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead />
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{ticketSections.map((section, sectionIndex) => (
|
|
<Fragment key={section.key}>
|
|
{ticketViewSettings.groupBy !== "none" ? (
|
|
<TableRow className={`${sectionIndex > 0 ? "border-t-[12px] border-t-background" : ""} border-b-2 border-border bg-muted/70 hover:bg-muted/70`}>
|
|
<TableCell colSpan={9} className="py-0">
|
|
<div className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border/80 bg-card px-3 py-2 shadow-sm">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<span className="rounded-sm bg-primary px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary-foreground">Gruppe</span>
|
|
<span className="truncate text-base font-semibold">{section.label}</span>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Badge variant="outline">{section.ticketCount} Ticket(s)</Badge>
|
|
<Badge variant="outline">{formatMinutes(section.totalMinutes)}</Badge>
|
|
{section.openCount > 0 ? <Badge variant="warning">{section.openCount} offen</Badge> : <Badge variant="success">bewertet</Badge>}
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : null}
|
|
{section.tickets.map((ticket) => (
|
|
<TableRow key={ticket.id}>
|
|
<TableCell>
|
|
<div className="flex items-center gap-1">
|
|
<span className="font-semibold">{ticket.ticket_number}</span>
|
|
<CopyTicketButton ticketNumber={ticket.ticket_number} />
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>{ticket.customer_name ?? "-"}</TableCell>
|
|
<TableCell>{workTypeLabel(ticket.work_type)}</TableCell>
|
|
<TableCell>{ticket.session_count}</TableCell>
|
|
<TableCell>{formatMinutes(ticket.total_minutes)}</TableCell>
|
|
<TableCell>{ticket.billed_count}</TableCell>
|
|
<TableCell>{ticket.non_billable_count} / {formatMinutes(ticket.non_billable_minutes)}</TableCell>
|
|
<TableCell>
|
|
<TicketStatus ticket={ticket} />
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button variant="ghost" size="sm" onClick={() => onNavigate(`/analysis/${periodType}/${period}/tickets/${ticket.id}`)}>
|
|
Öffnen
|
|
<ExternalLink className="size-4" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</Fragment>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
<div className="space-y-2 md:hidden">
|
|
{ticketSections.map((section, sectionIndex) => (
|
|
<div key={section.key} className={`space-y-2 ${ticketViewSettings.groupBy !== "none" && sectionIndex > 0 ? "pt-3" : ""}`}>
|
|
{ticketViewSettings.groupBy !== "none" ? (
|
|
<div className="rounded-md border-2 border-border bg-card px-3 py-2 shadow-sm">
|
|
<div className="mb-2 flex min-w-0 items-center gap-2">
|
|
<span className="rounded-sm bg-primary px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary-foreground">Gruppe</span>
|
|
<span className="truncate text-base font-semibold">{section.label}</span>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Badge variant="outline">{section.ticketCount} Ticket(s)</Badge>
|
|
<Badge variant="outline">{formatMinutes(section.totalMinutes)}</Badge>
|
|
{section.openCount > 0 ? <Badge variant="warning">{section.openCount} offen</Badge> : <Badge variant="success">bewertet</Badge>}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
{section.tickets.map((ticket) => (
|
|
<div key={ticket.id} className="space-y-2 rounded-md border bg-background p-3">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-1">
|
|
<p className="truncate font-semibold">{ticket.ticket_number}</p>
|
|
<CopyTicketButton ticketNumber={ticket.ticket_number} />
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">{ticket.customer_name ?? "Keine Organisation"} · {workTypeLabel(ticket.work_type)} · {ticket.session_count} Session(s)</p>
|
|
</div>
|
|
<TicketStatus ticket={ticket} />
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-2 text-sm">
|
|
<div className="rounded-md bg-muted/50 p-2">
|
|
<p className="text-muted-foreground">Abr.</p>
|
|
<p className="font-medium">{formatMinutes(ticket.total_minutes)}</p>
|
|
</div>
|
|
<div className="rounded-md bg-muted/50 p-2">
|
|
<p className="text-muted-foreground">Abr.</p>
|
|
<p className="font-medium">{ticket.billed_count}</p>
|
|
</div>
|
|
<div className="rounded-md bg-muted/50 p-2">
|
|
<p className="text-muted-foreground">Nicht</p>
|
|
<p className="font-medium">{formatMinutes(ticket.non_billable_minutes)}</p>
|
|
</div>
|
|
</div>
|
|
<Button className="w-full" size="sm" variant="secondary" onClick={() => onNavigate(`/analysis/${periodType}/${period}/tickets/${ticket.id}`)}>
|
|
Öffnen
|
|
<ExternalLink className="size-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{tickets.length === 0 ? (
|
|
<p className="py-8 text-center text-sm text-muted-foreground">Für diesen Zeitraum sind noch keine Sessions vorhanden.</p>
|
|
) : visibleTickets.length === 0 ? (
|
|
<p className="py-8 text-center text-sm text-muted-foreground">Keine Tickets passend zu den aktuellen Filtern.</p>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|