diff --git a/frontend/src/views/MonthlyClosePage.tsx b/frontend/src/views/MonthlyClosePage.tsx
new file mode 100644
index 0000000..76e005e
--- /dev/null
+++ b/frontend/src/views/MonthlyClosePage.tsx
@@ -0,0 +1,330 @@
+import {
+ AlertTriangle,
+ CheckCircle2,
+ ChevronLeft,
+ ChevronRight,
+ Clock3,
+ ExternalLink,
+ FileWarning,
+ Lock,
+ LockOpen,
+ Sparkles,
+ TrendingUp,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, 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 { Input } from "@/components/ui/input";
+import { closePeriod, getStatisticsOverview, reopenPeriod } from "../api";
+import { currentMonth, formatDate, formatDateTime, formatMinutes } from "../format";
+import type { StatisticsCrmDay, StatisticsOpenSession, StatisticsOverview } from "../types";
+
+type MonthlyClosePageProps = {
+ onNavigate: (to: string) => void;
+};
+
+const trackedTextClass = "text-sky-700 dark:text-sky-300";
+const teamspaceTextClass = "text-emerald-700 dark:text-emerald-300";
+
+function formatSignedMinutes(minutes: number) {
+ if (minutes === 0) {
+ return "ausgeglichen";
+ }
+
+ return `${minutes > 0 ? "+" : "-"}${formatMinutes(Math.abs(minutes))}`;
+}
+
+function formatTeamspaceDelta(minutes: number) {
+ if (minutes === 0) {
+ return "ausgeglichen";
+ }
+
+ return `TS ${formatSignedMinutes(minutes)}`;
+}
+
+function StatusCard({ label, value, detail, tone }: { label: string; value: string | number; detail: string; tone?: "ok" | "warn" | "neutral" }) {
+ const valueClassName = tone === "ok" ? "text-emerald-700 dark:text-emerald-300" : tone === "warn" ? "text-amber-700 dark:text-amber-300" : "";
+
+ return (
+
+
+ {label}
+ {value}
+ {detail}
+
+
+ );
+}
+
+function OpenSessionItem({ session, month, onNavigate }: { session: StatisticsOpenSession; month: string; onNavigate: (to: string) => void }) {
+ return (
+
+
+
+ {session.ticket_number}
+ {formatMinutes(session.rounded_minutes)}
+ offen
+
+
{session.organization_name}
+
{session.activity}
+
+
onNavigate(`/analysis/month/${month}/tickets/${session.ticket_id}`)}>
+ Bewerten
+
+
+ );
+}
+
+function CrmDayItem({ item, onNavigate }: { item: StatisticsCrmDay; onNavigate: (to: string) => void }) {
+ return (
+
+
+
+ {item.ticket_number}
+ {formatDate(`${item.day}T00:00:00`)}
+
+
{item.organization_name}
+
+ Sessions {formatMinutes(item.tracked_minutes)}
+ Teamspace {formatMinutes(item.crm_billed_minutes)}
+ {typeof item.delta_minutes === "number" ? Differenz {formatTeamspaceDelta(item.delta_minutes)} : null}
+
+
+
onNavigate(`/analysis/day/${item.day}/tickets/${item.ticket_id}`)}>
+ Tag öffnen
+
+
+ );
+}
+
+export function MonthlyClosePage({ onNavigate }: MonthlyClosePageProps) {
+ const [month, setMonth] = useState(currentMonth());
+ const [stats, setStats] = useState
(null);
+ const [loading, setLoading] = useState(false);
+ const [closing, setClosing] = useState(false);
+ const [reopening, setReopening] = useState(false);
+ const loadRequestId = useRef(0);
+
+ async function load() {
+ const requestId = loadRequestId.current + 1;
+ loadRequestId.current = requestId;
+ setLoading(true);
+
+ try {
+ const result = await getStatisticsOverview(month);
+
+ if (requestId === loadRequestId.current) {
+ setStats(result);
+ }
+ } catch (error) {
+ if (requestId === loadRequestId.current) {
+ toast.error("Monatsabschluss konnte nicht geladen werden", {
+ description: error instanceof Error ? error.message : "Unbekannter Fehler"
+ });
+ }
+ } finally {
+ if (requestId === loadRequestId.current) {
+ setLoading(false);
+ }
+ }
+ }
+
+ useEffect(() => {
+ void load();
+ }, [month]);
+
+ function changeMonthBy(delta: number) {
+ const [year, monthNumber] = month.split("-").map(Number);
+ const date = Number.isFinite(year) && Number.isFinite(monthNumber) ? new Date(year, monthNumber - 1, 1) : new Date();
+ date.setMonth(date.getMonth() + delta);
+ setMonth(`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`);
+ }
+
+ async function finishMonth() {
+ setClosing(true);
+ try {
+ await closePeriod("month", month);
+ toast.success("Monat abgeschlossen", {
+ description: `${month} ist abgeschlossen.`
+ });
+ await load();
+ } catch (error) {
+ toast.error("Monat noch nicht abschließbar", {
+ description: error instanceof Error ? error.message : "Bitte offene Bewertungen prüfen."
+ });
+ await load();
+ } finally {
+ setClosing(false);
+ }
+ }
+
+ async function reopenMonth() {
+ setReopening(true);
+ try {
+ await reopenPeriod("month", month);
+ toast.success("Monat wieder geöffnet", {
+ description: `${month} kann wieder bearbeitet werden.`
+ });
+ await load();
+ } catch (error) {
+ toast.error("Monat konnte nicht geöffnet werden", {
+ description: error instanceof Error ? error.message : "Unbekannter Fehler"
+ });
+ } finally {
+ setReopening(false);
+ }
+ }
+
+ const openSessions = stats?.attention.openSessions ?? [];
+ const missingCrmDays = stats?.attention.missingCrmDays ?? [];
+ const crmMismatches = stats?.attention.crmMismatches ?? [];
+ const canClose = Boolean(stats && !stats.closed && stats.totals.sessions > 0 && openSessions.length === 0);
+ const checklist = useMemo(
+ () => [
+ { label: "Offene Bewertungen", count: openSessions.length, blocker: true },
+ { label: "Tage ohne Teamspace-Wert", count: missingCrmDays.length, blocker: false },
+ { label: "Teamspace-Differenzen", count: crmMismatches.length, blocker: false }
+ ],
+ [openSessions.length, missingCrmDays.length, crmMismatches.length]
+ );
+
+ return (
+
+
+
+
Monatsabschluss
+
Offene Bewertungen, Teamspace-Abgleich und der eigentliche Monatsabschluss.
+
+
+
+
+ Monat
+ {loading ? lädt... : null}
+
+
+ changeMonthBy(-1)} aria-label="Monat zurück">
+
+ changeMonthBy(1)} aria-label="Monat vor">
+
+
+
+ {stats?.closed ? (
+
+
+ ) : (
+
+
+ )}
+
+
+
+ {stats?.closed ? (
+
+ Dieser Monat wurde am {formatDateTime(stats.closedAt!)} abgeschlossen.
+
+ ) : openSessions.length > 0 ? (
+
+ {openSessions.length} offene Bewertung(en) blockieren den Monatsabschluss.
+
+ ) : missingCrmDays.length > 0 || crmMismatches.length > 0 ? (
+
+ Der Monat ist abschließbar, hat aber noch Teamspace-Prüfpunkte.
+
+ ) : null}
+
+
+ 0 ? "warn" : "ok"} />
+
+
+
+
+ Checkliste
+ Bewertungen sind Pflicht. Teamspace-Punkte helfen beim sauberen CRM-Abgleich.
+
+
+ {checklist.map((item) => (
+
+
+ {item.label}
+ 0 ? "warning" : "success"}>{item.count}
+
+
{item.blocker ? "Muss erledigt sein." : "Vor Abschluss prüfen."}
+
+
+
+
+
+ Aufräumen
+ Alles, was für diesen Monat noch Aufmerksamkeit braucht.
+
+
+
+
+
+ {openSessions.map((session) => (
+ Keine offenen Bewertungen.
: null}
+
+
+
+
+
+ {missingCrmDays.map((item) => (
+ Alle getrackten Tage haben einen Teamspace-Wert.
: null}
+
+
+
+
+
+ {crmMismatches.map((item) => (
+ Keine Abweichungen zwischen Sessions und Teamspace.
: null}
+
+
+
+
+ {stats && stats.totals.sessions === 0 ? (
+
+
+
+
Keine Sessions in diesem Monat
+
Ein Monatsabschluss ist erst sinnvoll, wenn Sessions vorhanden sind.
+
+
+ ) : null}
+
@@ -96,6 +134,42 @@ function TimeComparison({ trackedMinutes, crmMinutes, sessions }: { trackedMinut
);
}
+function teamspaceTrend(buckets: StatisticsDailyBucket[]) {
+ const activeBuckets = buckets
+ .filter((bucket) => bucket.total_minutes > 0 || bucket.crm_billed_minutes > 0)
+ .map((bucket) => ({
+ day: bucket.day,
+ deltaMinutes: bucket.crm_billed_minutes - bucket.total_minutes
+ }));
+
+ if (activeBuckets.length < 2) {
+ return {
+ label: "Trend noch offen",
+ detail: "Zu wenige Tageswerte",
+ changeMinutes: 0,
+ firstAverage: 0,
+ secondAverage: 0
+ };
+ }
+
+ const splitIndex = Math.ceil(activeBuckets.length / 2);
+ const first = activeBuckets.slice(0, splitIndex);
+ const second = activeBuckets.slice(splitIndex);
+ const average = (items: typeof activeBuckets) => Math.round(items.reduce((sum, item) => sum + item.deltaMinutes, 0) / Math.max(items.length, 1));
+ const firstAverage = average(first);
+ const secondAverage = average(second.length > 0 ? second : first);
+ const changeMinutes = secondAverage - firstAverage;
+ const label = Math.abs(changeMinutes) < 15 ? "Trend stabil" : changeMinutes > 0 ? "Teamspace steigt relativ" : "Teamspace faellt relativ";
+
+ return {
+ label,
+ detail: `${formatTeamspaceDelta(firstAverage)} zu ${formatTeamspaceDelta(secondAverage)}`,
+ changeMinutes,
+ firstAverage,
+ secondAverage
+ };
+}
+
function formatAxisMinutes(value: number) {
const minutes = Math.round(value);
@@ -254,14 +328,16 @@ function MetricCard({
{label}
{value}
- {detail ?
{detail}
: null}
+ {detail ?
{detail}
: null}
);
}
-function OrganizationRow({ organization, maxMinutes }: { organization: StatisticsGroup; maxMinutes: number }) {
+function OrganizationRow({ organization, maxMinutes, totalMinutes }: { organization: StatisticsGroup; maxMinutes: number; totalMinutes: number }) {
+ const monthlyShare = percentage(organization.total_minutes, totalMinutes);
+
return (
@@ -279,6 +355,7 @@ function OrganizationRow({ organization, maxMinutes }: { organization: Statistic
{monthlyShare}% vom Monat
);
@@ -309,33 +386,11 @@ function TicketHotspot({ ticket, month, onNavigate }: { ticket: StatisticsTicket
);
}
-function CrmDayItem({ item, onNavigate }: { item: StatisticsCrmDay; onNavigate: (to: string) => void }) {
- return (
-
-
-
- {item.ticket_number}
- {formatDate(`${item.day}T00:00:00`)}
-
-
{item.organization_name}
-
- Sessions {formatMinutes(item.tracked_minutes)}
- Teamspace {formatMinutes(item.crm_billed_minutes)}
- {typeof item.delta_minutes === "number" ? Differenz {formatTeamspaceDelta(item.delta_minutes)} : null}
-
-
-
onNavigate(`/analysis/day/${item.day}/tickets/${item.ticket_id}`)}>
- Tag öffnen
-
-
- );
-}
-
export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
const [month, setMonth] = useState(currentMonth());
const [stats, setStats] = useState
(null);
const [loading, setLoading] = useState(false);
+ const [organizationPage, setOrganizationPage] = useState(1);
const loadRequestId = useRef(0);
async function load() {
@@ -392,18 +447,31 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
}
const totals = stats?.totals;
- const billableShare = percentage(totals?.billedMinutes ?? 0, totals?.minutes ?? 0);
- const openShare = percentage(totals?.openMinutes ?? 0, totals?.minutes ?? 0);
+ const evaluatedSessions = (totals?.billedSessions ?? 0) + (totals?.nonBillableSessions ?? 0);
+ const evaluatedMinutes = (totals?.billedMinutes ?? 0) + (totals?.nonBillableMinutes ?? 0);
+ const [evaluatedSessionShare, openSessionShare] = roundedPercentages([evaluatedSessions, totals?.openSessions ?? 0]);
+ const [evaluatedTimeShare, openTimeShare] = roundedPercentages([evaluatedMinutes, totals?.openMinutes ?? 0]);
const crmCoverage = percentage(totals?.crmBilledMinutes ?? 0, totals?.minutes ?? 0);
const maxOrganizationMinutes = Math.max(...(stats?.organizations ?? []).map((organization) => organization.total_minutes), 1);
const topOrganization = stats?.organizations[0] ?? null;
const strongestDay = useMemo(() => {
- return [...(stats?.dailySeries ?? [])].sort((left, right) => right.total_minutes - left.total_minutes)[0] ?? null;
+ return [...(stats?.dailySeries ?? [])].sort((left, right) => right.total_minutes - left.total_minutes)[0] ?? null;
}, [stats?.dailySeries]);
- const attentionCount =
- (stats?.attention.openSessions.length ?? 0) +
- (stats?.attention.missingCrmDays.length ?? 0) +
- (stats?.attention.crmMismatches.length ?? 0);
+ const trend = useMemo(() => teamspaceTrend(stats?.dailySeries ?? []), [stats?.dailySeries]);
+ const organizationPageCount = Math.max(1, Math.ceil((stats?.organizations.length ?? 0) / organizationPageSize));
+ const safeOrganizationPage = Math.min(organizationPage, organizationPageCount);
+ const organizationStart = (safeOrganizationPage - 1) * organizationPageSize;
+ const visibleOrganizations = (stats?.organizations ?? []).slice(organizationStart, organizationStart + organizationPageSize);
+ const organizationRangeStart = stats?.organizations.length ? organizationStart + 1 : 0;
+ const organizationRangeEnd = Math.min(organizationStart + organizationPageSize, stats?.organizations.length ?? 0);
+
+ useEffect(() => {
+ setOrganizationPage(1);
+ }, [month]);
+
+ useEffect(() => {
+ setOrganizationPage((current) => Math.min(current, organizationPageCount));
+ }, [organizationPageCount]);
return (
@@ -429,13 +497,6 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
- Dieser Monat wurde am {formatDateTime(stats.closedAt!)} abgeschlossen.
-
- ) : null}
-
+ {evaluatedSessions} von {totals?.sessions ?? 0} Session(s), {evaluatedSessionShare}%
+ {evaluatedTimeShare}% der Zeit · Abr. {totals?.billedSessions ?? 0} · Nicht {totals?.nonBillableSessions ?? 0}
+
+ }
icon={ListChecks}
+ valueClassName={evaluatedTextClass}
/>
+ {totals?.openSessions ?? 0} von {totals?.sessions ?? 0} Session(s), {openSessionShare}%
+ {openTimeShare}% der Zeit
+