Add global ticket history view

This commit is contained in:
michael committed 2026-09-01 10:23:51 +02:00
1 parent 19cc37d42a
commit b67dbad0b1
5 files changed
+421 -39

No files matched your search

+274 -15
View File
@@ -84,6 +84,38 @@ function parseOptionalBilledMinutes(value: unknown) {
return minutes;
}
function optionalTicketSessionMonth(value: unknown) {
if (value === undefined || value === null || value === "" || value === "all") {
return null;
}
return parseMonth(String(value));
}
function optionalTicketSessionStatus(value: unknown) {
if (value === undefined || value === null || value === "" || value === "all") {
return "all" as const;
}
if (value === "open" || value === "billed" || value === "non_billable") {
return value;
}
throw badRequest("status must be all, open, billed or non_billable");
}
function optionalTicketSessionSource(value: unknown) {
if (value === undefined || value === null || value === "" || value === "all") {
return "all" as const;
}
if (value === "manual" || value === "recurring") {
return value;
}
throw badRequest("source must be all, manual or recurring");
}
async function hasAdminUser() {
const result = await query<{ exists: boolean }>("SELECT EXISTS (SELECT 1 FROM users WHERE role = 'admin') AS exists;");
return Boolean(result.rows[0]?.exists);
@@ -1167,6 +1199,171 @@ async function getPeriodTicket(config: PeriodConfig, period: ParsedPeriod, ticke
};
}
async function getTicketDetails(ticketId: number, userId: string, filters: { month: ParsedPeriod | null; status: "all" | "open" | "billed" | "non_billable"; source: "all" | "manual" | "recurring" }) {
if (filters.month) {
await ensureRecurringSessionsForUserPeriod(userId, filters.month.startIso, filters.month.endIso);
}
const ticketResult = await query(
`
SELECT
t.id,
t.ticket_number,
t.organization_id,
o.name AS organization_name,
COALESCE(o.name, t.customer_name) AS customer_name,
t.work_type,
NULL::timestamptz AS closed_at,
NULL::timestamptz AS period_closed_at,
COALESCE(all_sessions.session_count, 0)::int AS ticket_session_count,
COALESCE(all_sessions.open_count, 0)::int AS ticket_open_count,
COALESCE(all_sessions.manual_session_count, 0)::int AS ticket_manual_session_count
FROM tickets t
LEFT JOIN organizations o ON o.zammad_id = t.organization_id
LEFT JOIN LATERAL (
SELECT
COUNT(*)::int AS session_count,
COUNT(*) FILTER (WHERE sm.billing_status IS NULL)::int AS open_count,
COUNT(*) FILTER (WHERE sm.recurring_billing_id IS NULL)::int AS manual_session_count
FROM sessions sm
WHERE sm.ticket_id = t.id
AND sm.user_id = $2
) all_sessions ON true
WHERE t.id = $1;
`,
[ticketId, userId]
);
if (ticketResult.rowCount === 0) {
return null;
}
const params: unknown[] = [ticketId, userId];
const where = ["s.ticket_id = $1", "s.user_id = $2"];
if (filters.month) {
params.push(filters.month.startIso, filters.month.endIso);
where.push(`s.started_at >= $${params.length - 1}::timestamptz`);
where.push(`s.started_at < $${params.length}::timestamptz`);
}
if (filters.status === "open") {
where.push("s.billing_status IS NULL");
} else if (filters.status !== "all") {
params.push(filters.status);
where.push(`s.billing_status = $${params.length}`);
}
if (filters.source === "manual") {
where.push("s.recurring_billing_id IS NULL");
} else if (filters.source === "recurring") {
where.push("s.recurring_billing_id IS NOT NULL");
}
const sessionWhere = where.join(" AND ");
const [sessionsResult, dayBillingResult, monthsResult, closureResult] = await Promise.all([
query(
`
SELECT
s.id,
s.organization_id,
(
SELECT name
FROM organizations
WHERE zammad_id = s.organization_id
) AS organization_name,
COALESCE(
(
SELECT name
FROM organizations
WHERE zammad_id = s.organization_id
),
s.customer_name
) AS customer_name,
s.activity,
s.work_type,
s.started_at,
s.ended_at,
s.duration_seconds,
s.rounded_minutes,
s.billing_status,
s.billing_updated_at,
s.created_at,
s.recurring_billing_id,
s.recurring_billing_slot_id,
s.recurring_occurrence_date
FROM sessions s
WHERE ${sessionWhere}
ORDER BY s.started_at ASC;
`,
params
),
query(
`
WITH filtered_days AS (
SELECT DISTINCT (s.started_at AT TIME ZONE 'Europe/Berlin')::date AS day
FROM sessions s
WHERE ${sessionWhere}
)
SELECT tdb.day::text AS day, tdb.billed_minutes
FROM ticket_day_billings tdb
JOIN filtered_days fd ON fd.day = tdb.day
WHERE tdb.ticket_id = $1
AND tdb.user_id = $2
ORDER BY tdb.day ASC;
`,
params
),
query(
`
SELECT
to_char(s.started_at AT TIME ZONE 'Europe/Berlin', 'YYYY-MM') AS month,
COUNT(*)::int AS session_count
FROM sessions s
WHERE s.ticket_id = $1
AND s.user_id = $2
GROUP BY month
ORDER BY month DESC;
`,
[ticketId, userId]
),
filters.month
? query<{ closed_at: string }>("SELECT closed_at FROM month_closures WHERE month = $1::date AND user_id = $2;", [filters.month.start, userId])
: Promise.resolve({ rows: [] as { closed_at: string }[], rowCount: 0 })
]);
const sessions = sessionsResult.rows;
const openCount = sessions.filter((session: any) => session.billing_status === null).length;
const manualSessionCount = sessions.filter((session: any) => session.recurring_billing_id === null).length;
const recurringSessionCount = sessions.length - manualSessionCount;
const ticket = ticketResult.rows[0] as any;
const closed = Boolean(filters.month && closureResult.rows.length > 0);
return {
periodType: "all",
period: filters.month?.label ?? "all",
closed,
closedAt: closed ? closureResult.rows[0]?.closed_at ?? null : null,
filters: {
month: filters.month?.label ?? "all",
status: filters.status,
source: filters.source
},
availableMonths: monthsResult.rows,
ticket: {
...ticket,
requires_closure: false,
recurring_session_count: recurringSessionCount,
manual_session_count: manualSessionCount
},
sessions,
dayBillings: dayBillingResult.rows,
canClose: false,
openCount,
ticketOpenCount: Number(ticket.ticket_open_count ?? 0)
};
}
app.get("/api/setup/status", async (_req, res) => {
res.json({ required: !(await hasAdminUser()) });
});
@@ -2737,6 +2934,22 @@ app.get("/api/tickets/search", requireUser, async (req, res) => {
res.json({ tickets: result.rows });
});
app.get("/api/tickets/:ticketId/details", requireUser, async (req, res) => {
const ticketId = parsePositiveInteger(req.params.ticketId, "ticketId");
const result = await getTicketDetails(ticketId, currentUser(req).id, {
month: optionalTicketSessionMonth(req.query.month),
status: optionalTicketSessionStatus(req.query.status),
source: optionalTicketSessionSource(req.query.source)
});
if (!result) {
res.status(404).json({ error: "Ticket not found" });
return;
}
res.json(result);
});
app.patch("/api/tickets/:ticketId", requireUser, async (req, res) => {
const ticketId = parsePositiveInteger(req.params.ticketId, "ticketId");
const ticketNumber = parseTrackableTicketNumber(req.body.ticketNumber);
@@ -3164,12 +3377,11 @@ app.patch("/api/sessions/:sessionId/billing", requireUser, async (req, res) => {
s.ticket_id,
date_trunc('month', s.started_at)::date AS month,
date_trunc('day', s.started_at)::date AS day,
tm.closed_at AS ticket_month_closed_at
mc.closed_at AS month_closed_at
FROM sessions s
LEFT JOIN ticket_month_closures tm
ON tm.ticket_id = s.ticket_id
AND tm.month = date_trunc('month', s.started_at)::date
AND tm.user_id = s.user_id
LEFT JOIN month_closures mc
ON mc.month = date_trunc('month', s.started_at AT TIME ZONE 'Europe/Berlin')::date
AND mc.user_id = s.user_id
WHERE s.id = $1
AND s.user_id = $2;
`,
@@ -3181,8 +3393,8 @@ app.patch("/api/sessions/:sessionId/billing", requireUser, async (req, res) => {
return;
}
if (billingStatus !== null && lockResult.rows[0].ticket_month_closed_at) {
res.status(409).json({ error: "Ticket is closed for this period" });
if (lockResult.rows[0].month_closed_at) {
res.status(409).json({ error: "Monat ist abgeschlossen" });
return;
}
@@ -3245,6 +3457,7 @@ app.patch("/api/sessions/:sessionId/details", requireUser, async (req, res) => {
work_type: "support" | "consulting";
recurring_billing_id: string | null;
recurring_work_type: "support" | "consulting" | null;
month_closed_at: string | null;
}>(
`
SELECT
@@ -3253,9 +3466,13 @@ app.patch("/api/sessions/:sessionId/details", requireUser, async (req, res) => {
s.started_at,
s.work_type,
s.recurring_billing_id,
rb.work_type AS recurring_work_type
rb.work_type AS recurring_work_type,
mc.closed_at AS month_closed_at
FROM sessions s
LEFT JOIN recurring_billings rb ON rb.id = s.recurring_billing_id
LEFT JOIN month_closures mc
ON mc.month = date_trunc('month', s.started_at AT TIME ZONE 'Europe/Berlin')::date
AND mc.user_id = s.user_id
WHERE s.id = $1
AND s.user_id = $2
FOR UPDATE OF s;
@@ -3268,6 +3485,20 @@ app.patch("/api/sessions/:sessionId/details", requireUser, async (req, res) => {
}
const current = currentResult.rows[0];
const newMonthClosureResult = await client.query<{ closed_at: string }>(
`
SELECT closed_at
FROM month_closures
WHERE month = date_trunc('month', $1::timestamptz AT TIME ZONE 'Europe/Berlin')::date
AND user_id = $2;
`,
[startedAt.toISOString(), userId]
);
if (current.month_closed_at || newMonthClosureResult.rows.length > 0) {
return "month-closed" as const;
}
const effectiveWorkType = current.recurring_billing_id ? current.recurring_work_type ?? current.work_type : workType;
await reopenPeriodsForSession(client, current.ticket_id, new Date(current.started_at), userId);
await reopenPeriodsForSession(client, current.ticket_id, startedAt, userId);
@@ -3300,6 +3531,11 @@ app.patch("/api/sessions/:sessionId/details", requireUser, async (req, res) => {
return;
}
if (updated === "month-closed") {
res.status(409).json({ error: "Monat ist abgeschlossen" });
return;
}
if (!updated) {
res.status(404).json({ error: "Session not found" });
return;
@@ -3313,28 +3549,46 @@ app.delete("/api/sessions/:sessionId", requireUser, async (req, res) => {
const userId = currentUser(req).id;
const deleted = await withTransaction(async (client) => {
const sessionResult = await client.query<{
const currentResult = await client.query<{
id: string;
ticket_id: string;
started_at: string;
recurring_billing_id: string | null;
recurring_billing_slot_id: string | null;
recurring_occurrence_date: string | null;
month_closed_at: string | null;
}>(
`
DELETE FROM sessions
WHERE id = $1
AND user_id = $2
RETURNING id, ticket_id, started_at, recurring_billing_id, recurring_billing_slot_id, recurring_occurrence_date;
SELECT
s.id,
s.ticket_id,
s.started_at,
s.recurring_billing_id,
s.recurring_billing_slot_id,
s.recurring_occurrence_date,
mc.closed_at AS month_closed_at
FROM sessions s
LEFT JOIN month_closures mc
ON mc.month = date_trunc('month', s.started_at AT TIME ZONE 'Europe/Berlin')::date
AND mc.user_id = s.user_id
WHERE s.id = $1
AND s.user_id = $2
FOR UPDATE OF s;
`,
[sessionId, userId]
);
if (sessionResult.rows.length === 0) {
if (currentResult.rows.length === 0) {
return null;
}
const session = sessionResult.rows[0];
const session = currentResult.rows[0];
if (session.month_closed_at) {
return "month-closed" as const;
}
await client.query("DELETE FROM sessions WHERE id = $1 AND user_id = $2;", [sessionId, userId]);
if (session.recurring_billing_id && session.recurring_billing_slot_id && session.recurring_occurrence_date) {
await client.query(
@@ -3388,6 +3642,11 @@ app.delete("/api/sessions/:sessionId", requireUser, async (req, res) => {
return;
}
if (deleted === "month-closed") {
res.status(409).json({ error: "Monat ist abgeschlossen" });
return;
}
res.json({ deleted });
});
+22 -7
View File
@@ -70,7 +70,7 @@ import { StatisticsPage } from "./views/StatisticsPage";
import { SetupPage } from "./views/SetupPage";
import { TicketDetailPage } from "./views/TicketDetailPage";
import { TimerPage } from "./views/TimerPage";
import type { AuthUser, PeriodType, TicketSearchResult } from "./types";
import type { AuthUser, PeriodType, TicketDetailPeriodType, TicketSearchResult } from "./types";
import type { Dispatch, DragEvent, SetStateAction } from "react";
type NavMenuEntry =
@@ -90,7 +90,7 @@ type OpenTicketNavItem = {
key: string;
ticketId: string;
ticketNumber: string;
periodType: PeriodType;
periodType: TicketDetailPeriodType;
period: string;
path: string;
dirty: boolean;
@@ -111,13 +111,13 @@ function readOpenTickets(userId: string): OpenTicketNavItem[] {
const parsed = JSON.parse(raw) as Partial<OpenTicketNavItem>[];
return parsed
.filter((item) => item.key && item.ticketId && item.ticketNumber && item.periodType && item.period && item.path)
.filter((item) => item.key && item.ticketId && item.ticketNumber && item.path)
.map((item) => ({
key: String(item.key),
ticketId: String(item.ticketId),
ticketNumber: String(item.ticketNumber),
periodType: item.periodType === "day" ? "day" : "month",
period: String(item.period),
periodType: item.periodType === "day" ? "day" : item.periodType === "month" ? "month" : "all",
period: item.period ? String(item.period) : "all",
path: String(item.path),
dirty: false
}));
@@ -127,6 +127,17 @@ function readOpenTickets(userId: string): OpenTicketNavItem[] {
}
function routeFromPath(pathname: string) {
const ticketMatch = pathname.match(/^\/tickets\/(\d+)$/);
if (ticketMatch) {
return {
page: "ticket" as const,
periodType: "all" as const,
period: "all",
ticketId: ticketMatch[1],
};
}
const periodTicketMatch = pathname.match(/^\/analysis\/(month|day)\/([^/]+)\/tickets\/(\d+)$/);
if (periodTicketMatch) {
@@ -318,7 +329,7 @@ function HeaderTicketSearch({ className, onNavigate }: HeaderTicketSearchProps)
}, [trimmedQuery]);
function openTicket(ticket: TicketSearchResult) {
onNavigate(`/analysis/month/${ticket.latest_period}/tickets/${ticket.ticket_id}`);
onNavigate(`/tickets/${ticket.ticket_id}`);
setQuery("");
setResults([]);
setOpen(false);
@@ -967,7 +978,11 @@ export function App() {
<a
href={ticket.path}
className="flex min-w-0 flex-1 items-center gap-2 text-sm"
title={`${ticket.ticketNumber} (${ticket.periodType === "month" ? "Monat" : "Tag"} ${ticket.period})`}
title={
ticket.periodType === "all"
? `${ticket.ticketNumber} (alle Sessions)`
: `${ticket.ticketNumber} (${ticket.periodType === "month" ? "Monat" : "Tag"} ${ticket.period})`
}
onClick={navHandler(ticket.path)}
>
<span className={cn("size-2 shrink-0 rounded-full", ticket.dirty ? "bg-amber-400" : isActive ? "bg-primary-foreground" : "bg-muted-foreground/70")} />
+25
View File
@@ -373,6 +373,31 @@ export function getTicketPeriod(type: PeriodType, period: string, ticketId: stri
return request<TicketPeriod>(`/api/periods/${periodPath(type)}/${period}/tickets/${ticketId}`);
}
export function getTicketDetails(
ticketId: string,
filters: {
month?: string;
status?: "all" | "open" | "billed" | "non_billable";
source?: "all" | "manual" | "recurring";
} = {}
) {
const params = new URLSearchParams();
if (filters.month && filters.month !== "all") {
params.set("month", filters.month);
}
if (filters.status && filters.status !== "all") {
params.set("status", filters.status);
}
if (filters.source && filters.source !== "all") {
params.set("source", filters.source);
}
return request<TicketPeriod>(`/api/tickets/${ticketId}/details${params.size ? `?${params}` : ""}`);
}
export function updateSessionBilling(sessionId: string, billingStatus: BillingStatus) {
return request(`/api/sessions/${sessionId}/billing`, {
method: "PATCH",
+13 -1
View File
@@ -1,6 +1,7 @@
export type WorkType = "support" | "consulting";
export type BillingStatus = "billed" | "non_billable" | null;
export type PeriodType = "month" | "day";
export type TicketDetailPeriodType = PeriodType | "all";
export type UserRole = "admin" | "user";
export type AuthUser = {
@@ -140,6 +141,11 @@ export type TicketDayBilling = {
billed_minutes: number;
};
export type TicketAvailableMonth = {
month: string;
session_count: number;
};
export type SessionEntry = {
id: string;
organization_id: string | null;
@@ -160,10 +166,16 @@ export type SessionEntry = {
};
export type TicketPeriod = {
periodType: PeriodType;
periodType: TicketDetailPeriodType;
period: string;
closed: boolean;
closedAt: string | null;
filters?: {
month: string;
status: "all" | "open" | "billed" | "non_billable";
source: "all" | "manual" | "recurring";
};
availableMonths?: TicketAvailableMonth[];
ticket: {
id: string;
ticket_number: string;
+87 -16
View File
@@ -14,6 +14,7 @@ import { OrganizationSelect } from "@/components/OrganizationSelect";
import {
createSession,
deleteSession,
getTicketDetails,
getTicketPeriod,
updateSessionBilling,
updateSessionDetails,
@@ -21,11 +22,11 @@ import {
updateTicketDayBilling
} from "../api";
import { currentDay, formatDate, formatDateTime, formatMinutes, formatTimeRange } from "../format";
import type { BillingStatus, PeriodType, SessionEntry, TicketPeriod, WorkType } from "../types";
import type { BillingStatus, PeriodType, SessionEntry, TicketDetailPeriodType, TicketPeriod, WorkType } from "../types";
import { cn } from "@/lib/utils";
type TicketDetailPageProps = {
periodType: PeriodType;
periodType: TicketDetailPeriodType;
period: string;
ticketId: string;
onNavigate: (to: string) => void;
@@ -33,7 +34,7 @@ type TicketDetailPageProps = {
key: string;
ticketId: string;
ticketNumber: string;
periodType: PeriodType;
periodType: TicketDetailPeriodType;
period: string;
path: string;
dirty: boolean;
@@ -172,10 +173,21 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
const [savingDayBillingKey, setSavingDayBillingKey] = useState<string | null>(null);
const [ticketSession, setTicketSession] = useState<TicketSessionFormState>(() => emptyTicketSessionForm());
const [savingTicketSession, setSavingTicketSession] = useState(false);
const [globalMonthFilter, setGlobalMonthFilter] = useState("all");
const [globalStatusFilter, setGlobalStatusFilter] = useState<"all" | "open" | "billed" | "non_billable">("all");
const [globalSourceFilter, setGlobalSourceFilter] = useState<"all" | "manual" | "recurring">("all");
async function load() {
try {
setData(await getTicketPeriod(periodType, period, ticketId));
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"
@@ -185,7 +197,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
useEffect(() => {
void load();
}, [periodType, period, ticketId]);
}, [periodType, period, ticketId, globalMonthFilter, globalStatusFilter, globalSourceFilter]);
useEffect(() => {
const nextInputs = Object.fromEntries((data?.dayBillings ?? []).map((billing) => [billing.day, formatHoursInput(billing.billed_minutes)]));
@@ -210,8 +222,15 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
}, [data?.ticket]);
const ticket = data?.ticket;
const isGlobalTicket = periodType === "all";
const isPeriodClosed = Boolean(data?.closed);
const periodLabel = periodType === "month" ? "Monat" : "Tag";
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 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);
@@ -264,15 +283,15 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
}
onOpenTicketChange?.({
key: `${periodType}:${period}:${ticket.id}`,
key: isGlobalTicket ? `ticket:${ticket.id}` : `${periodType}:${period}:${ticket.id}`,
ticketId: ticket.id,
ticketNumber: ticket.ticket_number,
periodType,
period,
path: `/analysis/${periodType}/${period}/tickets/${ticket.id}`,
path: isGlobalTicket ? `/tickets/${ticket.id}` : `/analysis/${periodType}/${period}/tickets/${ticket.id}`,
dirty: hasUnsavedChanges
});
}, [ticket, periodType, period, hasUnsavedChanges, onOpenTicketChange]);
}, [ticket, periodType, period, isGlobalTicket, hasUnsavedChanges, onOpenTicketChange]);
async function setBilling(sessionId: string, billingStatus: BillingStatus) {
if (isPeriodClosed && billingStatus !== null) {
@@ -525,9 +544,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
{ticket?.ticket_number ? <CopyTicketButton ticketNumber={ticket.ticket_number} /> : null}
{periodType === "month" && data?.closed ? <Badge variant="outline">Monat geschlossen</Badge> : null}
</div>
<p className="text-sm text-muted-foreground">
Sessions im {periodLabel.toLowerCase()} {period}
</p>
<p className="text-sm text-muted-foreground">Sessions {sessionsScopeLabel}</p>
</div>
<Badge variant={data?.openCount === 0 ? "success" : "warning"}>
@@ -535,12 +552,66 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
</Badge>
</div>
{periodType === "month" && data?.closed ? (
{(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>
{(data?.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">
@@ -600,11 +671,11 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
</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">{periodLabel} abgerechnet</span>
<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">{periodType === "month" ? "Teamspace gesamt" : "Teamspace Tag"}</span>
<span className="text-muted-foreground">{teamspaceLabel}</span>
<span className="font-semibold">{formatMinutes(periodTeamspaceMinutes)}</span>
</div>
<HelpLink anchor="ticketdetail" label="Hilfe zur Ticketdetailansicht" />
@@ -709,7 +780,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
</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 Zeitraum.</p>
<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>