From a9288c29f7c94a538ef89385458e572ea433f75c Mon Sep 17 00:00:00 2001
From: Felix Zett <fezett@gmail.com>
Date: Fri, 19 Sep 2025 22:28:27 +0200
Subject: [PATCH] feat: add progress bar to TripChecklist for item completion
 tracking

---
 frontend/src/pages/TripChecklist.tsx | 47 ++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/frontend/src/pages/TripChecklist.tsx b/frontend/src/pages/TripChecklist.tsx
index 31a009b..564f390 100644
--- a/frontend/src/pages/TripChecklist.tsx
+++ b/frontend/src/pages/TripChecklist.tsx
@@ -231,6 +231,11 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
     return withSpaces.charAt(0).toUpperCase() + withSpaces.slice(1);
   }
 
+  // Progress calculation
+  const totalItems = items.length;
+  const checkedItems = items.filter((item) => item.checked).length;
+  const progress = totalItems > 0 ? Math.round((checkedItems / totalItems) * 100) : 0;
+
   return (
     <div className="py-4 max-w-5xl mx-auto">
       {/* Trip-Titel und Zeitraum */}
@@ -315,6 +320,48 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
                 ))}
           </div>
         </div>
+        {/* Progressbar integriert am unteren Rand */}
+        <div className="mt-6">
+          <div className="flex justify-between items-center mb-1">
+            <span className="font-semibold text-gray-700">Fortschritt</span>
+            <span className="text-sm text-gray-500">{checkedItems} / {totalItems} erledigt</span>
+          </div>
+          <div
+            className="w-full h-5 rounded-full overflow-hidden shadow"
+            style={{
+              background: "linear-gradient(90deg, #f59e42 0%, #facc15 50%, #22c55e 100%)",
+              position: "relative",
+            }}
+          >
+            <div
+              className="h-full"
+              style={{
+                width: `${progress}%`,
+                background: "none", // inherit the gradient from parent
+                position: "absolute",
+                left: 0,
+                top: 0,
+                transition: "width 0.3s",
+              }}
+            />
+            {/* Optional: gray overlay for unfilled part */}
+            <div
+              className="h-full w-full"
+              style={{
+                background: "rgba(243,244,246,0.9)", // tailwind gray-200 with opacity
+                position: "absolute",
+                left: 0,
+                top: 0,
+                pointerEvents: "none",
+                zIndex: 1,
+                width: `${100 - progress}%`,
+                marginLeft: `${progress}%`,
+                transition: "width 0.3s, margin-left 0.3s",
+              }}
+            />
+          </div>
+          <div className="text-right text-xs text-gray-500 mt-1">{progress}%</div>
+        </div>
       </div>
       {/* ...Rest der Checklist... */}
       <ul