Allow undoing Teamspace acknowledgements

frontend/src/types.ts

@@ -258,6 +258,8 @@ export type StatisticsCrmDay = {
   tracked_minutes: number;
   crm_billed_minutes: number;
   delta_minutes?: number;
+  acknowledged?: boolean;
+  acknowledged_at?: string | null;
 };
 
 export type StatisticsOverview = {
@@ -291,6 +293,7 @@ export type StatisticsOverview = {
   attention: {
     openSessions: StatisticsOpenSession[];
     missingCrmDays: StatisticsCrmDay[];
+    acknowledgedMissingCrmDays: StatisticsCrmDay[];
     crmMismatches: StatisticsCrmDay[];
   };
 };

frontend/src/views/MonthlyClosePage.tsx

@@ -116,32 +116,31 @@ function OpenTicketItem({ group, month, onNavigate }: { group: OpenTicketGroup;
 
 function CrmDayItem({
   item,
-  acknowledging,
-  onAcknowledge,
+  busy,
+  onSetAcknowledgement,
   onNavigate
 }: {
   item: StatisticsCrmDay;
-  acknowledging: boolean;
-  onAcknowledge: (item: StatisticsCrmDay) => void;
+  busy: boolean;
+  onSetAcknowledgement: (item: StatisticsCrmDay, acknowledged: boolean) => void;
   onNavigate: (to: string) => void;
 }) {
+  const isAcknowledged = Boolean(item.acknowledged);
+
   return (
-    <div className="flex min-h-32 flex-col justify-between gap-3 rounded-md border bg-background p-3">
+    <div className={`flex min-h-32 flex-col justify-between gap-3 rounded-md border bg-background p-3 ${isAcknowledged ? "opacity-75" : ""}`}>
       <div className="min-w-0">
         <div className="flex flex-wrap items-center gap-2">
           <Checkbox
-            checked={acknowledging}
-            disabled={acknowledging}
+            checked={isAcknowledged}
+            disabled={busy}
             aria-label="Zur Kenntnis genommen"
-            onCheckedChange={(checked) => {
-              if (checked) {
-                onAcknowledge(item);
-              }
-            }}
+            onCheckedChange={(checked) => onSetAcknowledgement(item, checked === true)}
           />
           <span className="font-medium">{item.ticket_number}</span>
           <CopyTicketButton ticketNumber={item.ticket_number} />
           <Badge variant="outline">{formatDate(`${item.day}T00:00:00`)}</Badge>
+          <Badge variant={isAcknowledged ? "success" : "warning"}>{isAcknowledged ? "zur Kenntnis" : "offen"}</Badge>
         </div>
         <p className="truncate text-sm text-muted-foreground">{item.organization_name}</p>
         <p className="flex flex-wrap gap-x-3 gap-y-1 text-xs">
@@ -151,8 +150,8 @@ function CrmDayItem({
         </p>
       </div>
       <div className="flex flex-wrap justify-end gap-2">
-        <Button variant="ghost" size="sm" disabled={acknowledging} onClick={() => onAcknowledge(item)}>
-          Zur Kenntnis
+        <Button variant={isAcknowledged ? "secondary" : "ghost"} size="sm" disabled={busy} onClick={() => onSetAcknowledgement(item, !isAcknowledged)}>
+          {isAcknowledged ? "Zurücknehmen" : "Zur Kenntnis"}
         </Button>
         <Button variant="secondary" size="sm" onClick={() => onNavigate(`/analysis/day/${item.day}/tickets/${item.ticket_id}`)}>
           Tag öffnen
@@ -170,6 +169,7 @@ export function MonthlyClosePage({ onNavigate }: MonthlyClosePageProps) {
   const [closing, setClosing] = useState(false);
   const [reopening, setReopening] = useState(false);
   const [acknowledgingKeys, setAcknowledgingKeys] = useState<Set<string>>(() => new Set());
+  const [showAcknowledgedMissingCrm, setShowAcknowledgedMissingCrm] = useState(false);
   const loadRequestId = useRef(0);
 
   async function load() {
@@ -242,18 +242,18 @@ export function MonthlyClosePage({ onNavigate }: MonthlyClosePageProps) {
     }
   }
 
-  async function acknowledgeMissingCrmDay(item: StatisticsCrmDay) {
+  async function setMissingCrmAcknowledgement(item: StatisticsCrmDay, acknowledged: boolean) {
     const key = `${item.ticket_id}:${item.day}`;
     setAcknowledgingKeys((current) => new Set(current).add(key));
 
     try {
-      await acknowledgeMissingTicketDayBilling(item.ticket_id, item.day, true);
-      toast.success("Teamspace-Prüfung abgehakt", {
+      await acknowledgeMissingTicketDayBilling(item.ticket_id, item.day, acknowledged);
+      toast.success(acknowledged ? "Teamspace-Prüfung abgehakt" : "Kenntnisnahme zurückgenommen", {
         description: `${item.ticket_number} am ${formatDate(`${item.day}T00:00:00`)}`
       });
       await load();
     } catch (error) {
-      toast.error("Konnte nicht abgehakt werden", {
+      toast.error(acknowledged ? "Konnte nicht abgehakt werden" : "Konnte nicht zurückgenommen werden", {
         description: error instanceof Error ? error.message : "Unbekannter Fehler"
       });
     } finally {
@@ -267,14 +267,19 @@ export function MonthlyClosePage({ onNavigate }: MonthlyClosePageProps) {
 
   const openSessions = stats?.attention.openSessions ?? [];
   const missingCrmDays = stats?.attention.missingCrmDays ?? [];
+  const acknowledgedMissingCrmDays = stats?.attention.acknowledgedMissingCrmDays ?? [];
   const openTicketGroups = useMemo(() => groupOpenSessions(openSessions), [openSessions]);
+  const visibleMissingCrmDays = useMemo(() => {
+    const days = showAcknowledgedMissingCrm ? [...missingCrmDays, ...acknowledgedMissingCrmDays] : [...missingCrmDays];
+    return days.sort((left, right) => left.day.localeCompare(right.day) || left.ticket_number.localeCompare(right.ticket_number, "de", { numeric: true, sensitivity: "base" }));
+  }, [acknowledgedMissingCrmDays, missingCrmDays, showAcknowledgedMissingCrm]);
   const canClose = Boolean(stats && !stats.closed && stats.totals.sessions > 0 && openSessions.length === 0);
   const checklist = useMemo(
     () => [
       { label: "Offene Bewertungen", count: openSessions.length, detail: `${openTicketGroups.length} Ticket(s)`, blocker: true },
-      { label: "Tage ohne Teamspace-Wert", count: missingCrmDays.length, detail: "zur Kenntnisnahme", blocker: false }
+      { label: "Tage ohne Teamspace-Wert", count: missingCrmDays.length, detail: `${acknowledgedMissingCrmDays.length} zur Kenntnis genommen`, blocker: false }
     ],
-    [openSessions.length, openTicketGroups.length, missingCrmDays.length]
+    [acknowledgedMissingCrmDays.length, openSessions.length, openTicketGroups.length, missingCrmDays.length]
   );
 
   return (
@@ -325,7 +330,7 @@ export function MonthlyClosePage({ onNavigate }: MonthlyClosePageProps) {
         <StatusCard label="Sessions" value={stats?.totals.sessions ?? 0} detail={`${formatMinutes(stats?.totals.minutes ?? 0)} getrackt`} />
         <StatusCard label="Teamspace" value={formatMinutes(stats?.totals.crmBilledMinutes ?? 0)} detail={`Differenz ${formatTeamspaceDelta(stats?.totals.crmDeltaMinutes ?? 0)}`} />
         <StatusCard label="Offene Bewertungen" value={openSessions.length} detail={`${openTicketGroups.length} Ticket(s)`} tone={openSessions.length > 0 ? "warn" : "ok"} />
-        <StatusCard label="Ohne Teamspace" value={missingCrmDays.length} detail="nicht zur Kenntnis genommen" tone={missingCrmDays.length > 0 ? "warn" : "ok"} />
+        <StatusCard label="Ohne Teamspace" value={missingCrmDays.length} detail={`${acknowledgedMissingCrmDays.length} zur Kenntnis genommen`} tone={missingCrmDays.length > 0 ? "warn" : "ok"} />
         <StatusCard label="Status" value={stats?.closed ? "geschlossen" : canClose ? "bereit" : "offen"} detail={stats?.closed ? "Monat ist gesperrt" : canClose ? "kann abgeschlossen werden" : "Prüfpunkte bearbeiten"} tone={stats?.closed || canClose ? "ok" : "warn"} />
       </div>
 
@@ -365,20 +370,35 @@ export function MonthlyClosePage({ onNavigate }: MonthlyClosePageProps) {
           </section>
 
           <section className="space-y-2">
-            <div className="flex items-center gap-2 text-sm font-medium">
-              <Sparkles className="size-4 text-muted-foreground" />
-              Tage ohne Teamspace-Wert
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+              <div className="flex items-center gap-2 text-sm font-medium">
+                <Sparkles className="size-4 text-muted-foreground" />
+                Tage ohne Teamspace-Wert
+              </div>
+              <Button
+                type="button"
+                variant="secondary"
+                size="sm"
+                disabled={acknowledgedMissingCrmDays.length === 0}
+                onClick={() => setShowAcknowledgedMissingCrm((current) => !current)}
+              >
+                {showAcknowledgedMissingCrm ? "Zur Kenntnis ausblenden" : `Zur Kenntnis anzeigen (${acknowledgedMissingCrmDays.length})`}
+              </Button>
             </div>
-            {missingCrmDays.map((item) => (
+            {visibleMissingCrmDays.map((item) => (
               <CrmDayItem
                 key={`${item.ticket_id}-${item.day}-missing`}
                 item={item}
-                acknowledging={acknowledgingKeys.has(`${item.ticket_id}:${item.day}`)}
-                onAcknowledge={acknowledgeMissingCrmDay}
+                busy={acknowledgingKeys.has(`${item.ticket_id}:${item.day}`)}
+                onSetAcknowledgement={setMissingCrmAcknowledgement}
                 onNavigate={onNavigate}
               />
             ))}
-            {missingCrmDays.length === 0 ? <p className="rounded-md border bg-muted/20 p-3 text-sm text-muted-foreground">Alle getrackten Tage haben einen Teamspace-Wert.</p> : null}
+            {visibleMissingCrmDays.length === 0 ? (
+              <p className="rounded-md border bg-muted/20 p-3 text-sm text-muted-foreground">
+                {acknowledgedMissingCrmDays.length > 0 ? "Alle offenen Punkte sind zur Kenntnis genommen." : "Alle getrackten Tage haben einen Teamspace-Wert."}
+              </p>
+            ) : null}
           </section>
         </CardContent>
       </Card>