From b62fd55246eb8d95c68b7453230172bfb57b6337 Mon Sep 17 00:00:00 2001
From: Matthias Hochmeister <matthias.hochmeister@apple.com>
Date: Sat, 28 Mar 2026 17:57:45 +0100
Subject: [PATCH] fix: correct vorlageId casing in startExecution, make
 checklist rows clickable with alternating backgrounds

---
 frontend/src/pages/Checklisten.tsx   | 35 ++++++++++++----------------
 frontend/src/services/checklisten.ts |  2 +-
 2 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/frontend/src/pages/Checklisten.tsx b/frontend/src/pages/Checklisten.tsx
index e77de07..6f1d56a 100644
--- a/frontend/src/pages/Checklisten.tsx
+++ b/frontend/src/pages/Checklisten.tsx
@@ -20,7 +20,7 @@ import {
   IconButton,
   InputLabel,
   List,
-  ListItem,
+  ListItemButton,
   ListItemText,
   MenuItem,
   Paper,
@@ -262,27 +262,21 @@ function OverviewTab({ overview, loading, canExecute, navigate }: OverviewTabPro
     return <Alert severity="info" sx={{ mt: 1 }}>Keine Checklisten zugewiesen</Alert>;
   }
 
-  const renderChecklistRow = (cl: ChecklistOverviewChecklist, itemId: string, type: 'fahrzeug' | 'ausruestung') => {
+  const renderChecklistRow = (cl: ChecklistOverviewChecklist, itemId: string, type: 'fahrzeug' | 'ausruestung', index: number) => {
     const color = getDueColor(cl.next_due, cl.intervall);
     const label = getDueLabel(cl.next_due, cl.intervall);
     const param = type === 'fahrzeug' ? `fahrzeug=${itemId}` : `ausruestung=${itemId}`;
     return (
-      <ListItem
+      <ListItemButton
         key={cl.vorlage_id}
-        sx={{ py: 0.5, px: 1 }}
-        secondaryAction={
-          canExecute ? (
-            <Tooltip title="Checkliste starten">
-              <IconButton
-                size="small"
-                color="primary"
-                onClick={() => navigate(`/checklisten/ausfuehrung/new?${param}&vorlage=${cl.vorlage_id}`)}
-              >
-                <PlayArrow fontSize="small" />
-              </IconButton>
-            </Tooltip>
-          ) : undefined
-        }
+        onClick={() => canExecute && navigate(`/checklisten/ausfuehrung/new?${param}&vorlage=${cl.vorlage_id}`)}
+        sx={{
+          py: 0.75,
+          px: 2,
+          bgcolor: index % 2 === 0 ? 'action.hover' : 'transparent',
+          cursor: canExecute ? 'pointer' : 'default',
+          '&:hover': canExecute ? undefined : { bgcolor: index % 2 === 0 ? 'action.hover' : 'transparent' },
+        }}
       >
         <ListItemText
           primary={cl.vorlage_name}
@@ -293,9 +287,10 @@ function OverviewTab({ overview, loading, canExecute, navigate }: OverviewTabPro
           color={color}
           size="small"
           variant="outlined"
-          sx={{ mr: canExecute ? 4 : 0, ml: 1 }}
+          sx={{ ml: 1, pointerEvents: 'none' }}
         />
-      </ListItem>
+        {canExecute && <PlayArrow fontSize="small" color="action" sx={{ ml: 1, opacity: 0.5 }} />}
+      </ListItemButton>
     );
   };
 
@@ -329,7 +324,7 @@ function OverviewTab({ overview, loading, canExecute, navigate }: OverviewTabPro
               </AccordionSummary>
               <AccordionDetails sx={{ p: 0 }}>
                 <List dense disablePadding>
-                  {item.checklists.map((cl) => renderChecklistRow(cl, item.id, type))}
+                  {item.checklists.map((cl, idx) => renderChecklistRow(cl, item.id, type, idx))}
                 </List>
               </AccordionDetails>
             </Accordion>
diff --git a/frontend/src/services/checklisten.ts b/frontend/src/services/checklisten.ts
index b0bafe5..58652fe 100644
--- a/frontend/src/services/checklisten.ts
+++ b/frontend/src/services/checklisten.ts
@@ -127,7 +127,7 @@ export const checklistenApi = {
   // ── Executions ──
   startExecution: async (vorlageId: number, opts: { fahrzeugId?: string; ausruestungId?: string }): Promise<ChecklistAusfuehrung> => {
     const r = await api.post('/api/checklisten/ausfuehrungen', {
-      vorlage_id: vorlageId,
+      vorlageId: vorlageId,
       fahrzeugId: opts.fahrzeugId,
       ausruestungId: opts.ausruestungId,
     });