From 33f017092761d43116981dd4f8e6297f2ea22aa5 Mon Sep 17 00:00:00 2001
From: mboehmlaender <mboehmlaender@gmx.net>
Date: Wed, 5 Aug 2026 15:37:56 +0200
Subject: [PATCH] Persist monthly close acknowledgement filter

---
 frontend/src/views/MonthlyClosePage.tsx | 36 ++++++++++++++-----------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/frontend/src/views/MonthlyClosePage.tsx b/frontend/src/views/MonthlyClosePage.tsx
index 6a45253..22c0eb8 100644
--- a/frontend/src/views/MonthlyClosePage.tsx
+++ b/frontend/src/views/MonthlyClosePage.tsx
@@ -29,6 +29,7 @@ type MonthlyClosePageProps = {
 
 const trackedTextClass = "text-sky-700 dark:text-sky-300";
 const teamspaceTextClass = "text-emerald-700 dark:text-emerald-300";
+const showAcknowledgedMissingCrmStorageKey = "tickettracker.monthlyClose.showAcknowledgedMissingCrm";
 
 function formatSignedMinutes(minutes: number) {
   if (minutes === 0) {
@@ -127,12 +128,6 @@ function CrmDayItem({
     <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={isAcknowledged}
-            disabled={busy}
-            aria-label="Zur Kenntnis genommen"
-            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>
@@ -166,6 +161,7 @@ export function MonthlyClosePage({ onNavigate }: MonthlyClosePageProps) {
   const [reopening, setReopening] = useState(false);
   const [acknowledgingKeys, setAcknowledgingKeys] = useState<Set<string>>(() => new Set());
   const [showAcknowledgedMissingCrm, setShowAcknowledgedMissingCrm] = useState(false);
+  const [showAcknowledgedMissingCrmLoaded, setShowAcknowledgedMissingCrmLoaded] = useState(false);
   const loadRequestId = useRef(0);
 
   async function load() {
@@ -196,6 +192,17 @@ export function MonthlyClosePage({ onNavigate }: MonthlyClosePageProps) {
     void load();
   }, [month]);
 
+  useEffect(() => {
+    setShowAcknowledgedMissingCrm(window.localStorage.getItem(showAcknowledgedMissingCrmStorageKey) === "true");
+    setShowAcknowledgedMissingCrmLoaded(true);
+  }, []);
+
+  useEffect(() => {
+    if (showAcknowledgedMissingCrmLoaded) {
+      window.localStorage.setItem(showAcknowledgedMissingCrmStorageKey, String(showAcknowledgedMissingCrm));
+    }
+  }, [showAcknowledgedMissingCrm, showAcknowledgedMissingCrmLoaded]);
+
   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();
@@ -371,15 +378,14 @@ export function MonthlyClosePage({ onNavigate }: MonthlyClosePageProps) {
                 <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 className="inline-flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm">
+                <Checkbox
+                  checked={showAcknowledgedMissingCrm}
+                  aria-label="Zur Kenntnis genommene Teamspace-Tage anzeigen"
+                  onCheckedChange={(checked) => setShowAcknowledgedMissingCrm(checked === true)}
+                />
+                <span>Zur Kenntnis anzeigen ({acknowledgedMissingCrmDays.length})</span>
+              </div>
             </div>
             {visibleMissingCrmDays.map((item) => (
               <CrmDayItem