Rollen Freigaben Push und Beleg Upload ueberarbeiten

src/components/dashboard/budget-column.tsx

@@ -10,6 +10,7 @@ import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
 import EuroRoundedIcon from "@mui/icons-material/EuroRounded";
 import ReceiptLongRoundedIcon from "@mui/icons-material/ReceiptLongRounded";
 import TaskAltRoundedIcon from "@mui/icons-material/TaskAltRounded";
+import UploadFileRoundedIcon from "@mui/icons-material/UploadFileRounded";
 import {
   Box,
   Button,
@@ -49,6 +50,7 @@ type BudgetColumnProps = {
   onApprove: (expenseId: string, approvalType: "CHAIR_A" | "CHAIR_B" | "FINANCE") => Promise<void>;
   onMarkPaid: (expenseId: string) => Promise<void>;
   onDocument: (expenseId: string, proofUrl?: string) => Promise<void>;
+  onUploadProof: (expenseId: string, file: File) => Promise<string>;
   onSaveWorkingGroup: (groupId: string, name: string) => Promise<void>;
   onDeleteWorkingGroup: (groupId: string, groupName: string) => Promise<void>;
   onSaveBudget: (budgetId: string, name: string, totalBudget: string, colorCode: string) => Promise<void>;
@@ -140,6 +142,7 @@ export function BudgetColumn({
   onApprove,
   onMarkPaid,
   onDocument,
+  onUploadProof,
   onSaveWorkingGroup,
   onDeleteWorkingGroup,
   onSaveBudget,
@@ -153,6 +156,7 @@ export function BudgetColumn({
   const [isEditingGroup, setIsEditingGroup] = useState(false);
   const [groupDraftName, setGroupDraftName] = useState(group.name);
   const [proofUrlDrafts, setProofUrlDrafts] = useState<Record<string, string>>({});
+  const [proofFileDrafts, setProofFileDrafts] = useState<Record<string, File | null>>({});
   const [expandedRecurringExpenses, setExpandedRecurringExpenses] = useState<Record<string, boolean>>({});
 
   const budgetCardWidth = 352;
@@ -771,7 +775,17 @@ export function BudgetColumn({
                                       size="small"
                                       variant="contained"
                                       disabled={busy}
-                                      onClick={() => onApprove(expense.id, approvalType)}
+                                      onClick={() => {
+                                        if (
+                                          !window.confirm(
+                                            `Freigabe wirklich setzen?\n\nAusgabe: ${expense.title}\nBetrag: ${formatCurrency(expense.amount)}\nRolle: ${approvalLabel(approvalType)}\n\nMit deiner Freigabe bestaetigst du, dass du die Ausgabe plausibel geprueft hast und die Verantwortung fuer diesen Freigabeschritt uebernimmst.`
+                                          )
+                                        ) {
+                                          return;
+                                        }
+
+                                        onApprove(expense.id, approvalType);
+                                      }}
                                     >
                                       Freigeben als {approvalLabel(approvalType)}
                                     </Button>
@@ -818,25 +832,54 @@ export function BudgetColumn({
                                 {expense.paidAt && !expense.documentedAt && canDocumentExpense(viewer.role) ? (
                                   <Stack direction={{ xs: "column", sm: "row" }} gap={1}>
                                     <TextField
-                                      label="Beleg-URL"
-                                      value={proofUrlDrafts[expense.id] ?? expense.proofUrl ?? ""}
-                                      onChange={(event) =>
-                                        setProofUrlDrafts((current) => ({
-                                          ...current,
-                                          [expense.id]: event.target.value
-                                        }))
-                                      }
+                                      label="Beleg"
+                                      value={proofFileDrafts[expense.id]?.name ?? expense.proofUrl ?? ""}
+                                      InputProps={{ readOnly: true }}
                                       size="small"
                                       fullWidth
                                     />
+                                    <Button component="label" size="small" variant="outlined" startIcon={<UploadFileRoundedIcon />} disabled={busy}>
+                                      Datei
+                                      <input
+                                        hidden
+                                        type="file"
+                                        accept="image/*,application/pdf"
+                                        onChange={(event) =>
+                                          setProofFileDrafts((current) => ({
+                                            ...current,
+                                            [expense.id]: event.target.files?.[0] ?? null
+                                          }))
+                                        }
+                                      />
+                                    </Button>
+                                    <Button component="label" size="small" variant="outlined" disabled={busy}>
+                                      Kamera
+                                      <input
+                                        hidden
+                                        type="file"
+                                        accept="image/*"
+                                        capture="environment"
+                                        onChange={(event) =>
+                                          setProofFileDrafts((current) => ({
+                                            ...current,
+                                            [expense.id]: event.target.files?.[0] ?? null
+                                          }))
+                                        }
+                                      />
+                                    </Button>
                                     <Button
                                       size="small"
                                       variant="contained"
                                       color="success"
                                       disabled={busy}
-                                      onClick={() =>
-                                        onDocument(expense.id, proofUrlDrafts[expense.id] ?? expense.proofUrl ?? undefined)
-                                      }
+                                      onClick={async () => {
+                                        const proofFile = proofFileDrafts[expense.id];
+                                        const proofUrl = proofFile
+                                          ? await onUploadProof(expense.id, proofFile)
+                                          : proofUrlDrafts[expense.id] ?? expense.proofUrl ?? undefined;
+
+                                        await onDocument(expense.id, proofUrl);
+                                      }}
                                     >
                                       Dokumentieren
                                     </Button>

src/components/dashboard/dashboard-shell.tsx

@@ -6,7 +6,9 @@ import DownloadRoundedIcon from "@mui/icons-material/DownloadRounded";
 import EditRoundedIcon from "@mui/icons-material/EditRounded";
 import KeyRoundedIcon from "@mui/icons-material/KeyRounded";
 import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
+import NotificationsActiveRoundedIcon from "@mui/icons-material/NotificationsActiveRounded";
 import SavingsRoundedIcon from "@mui/icons-material/SavingsRounded";
+import UploadFileRoundedIcon from "@mui/icons-material/UploadFileRounded";
 import VerifiedRoundedIcon from "@mui/icons-material/VerifiedRounded";
 import WalletRoundedIcon from "@mui/icons-material/WalletRounded";
 import {
@@ -67,7 +69,6 @@ type ExpenseFormState = {
   budgetId: string;
   recurrence: "NONE" | "MONTHLY";
   recurrenceStartAt: string;
-  proofUrl: string;
 };
 
 type BudgetFormState = {
@@ -92,15 +93,13 @@ type ApprovalPermissionValue = (typeof APPROVAL_FLOW)[number];
 type UserFormState = {
   username: string;
   password: string;
-  role: "ADMIN" | "FINANCE" | "MEMBER";
+  role: "BOARD" | "ORGA" | "FINANCE" | "MEMBER";
   workingGroupId: string;
-  approvalPermissions: ApprovalPermissionValue[];
 };
 
 type ManagedUserDraft = {
-  role: "ADMIN" | "FINANCE" | "MEMBER";
+  role: "BOARD" | "ORGA" | "FINANCE" | "MEMBER";
   workingGroupId: string;
-  approvalPermissions: ApprovalPermissionValue[];
 };
 
 type PeriodFormState = {
@@ -135,9 +134,10 @@ function toggleApprovalPermission(
 }
 function sortManagedUsersList(users: DashboardManagedUser[]) {
   const roleOrder: Record<DashboardManagedUser["role"], number> = {
-    ADMIN: 0,
-    FINANCE: 1,
-    MEMBER: 2
+    BOARD: 0,
+    ORGA: 1,
+    FINANCE: 2,
+    MEMBER: 3
   };
 
   return [...users].sort((left, right) => {
@@ -235,6 +235,13 @@ async function parseResponse(response: Response) {
   return payload;
 }
 
+function urlBase64ToUint8Array(value: string) {
+  const padding = "=".repeat((4 - (value.length % 4)) % 4);
+  const base64 = `${value}${padding}`.replace(/-/g, "+").replace(/_/g, "/");
+  const rawData = window.atob(base64);
+  return Uint8Array.from([...rawData], (character) => character.charCodeAt(0));
+}
+
 export function DashboardShell({
   viewer,
   workingGroups,
@@ -279,8 +286,7 @@ export function DashboardShell({
     agId: defaultEditableGroup?.id ?? "",
     budgetId: defaultBudget?.id ?? "",
     recurrence: "NONE",
-    recurrenceStartAt: toDateInputValue(currentPeriod?.startsAt ?? new Date().toISOString()),
-    proofUrl: ""
+    recurrenceStartAt: toDateInputValue(currentPeriod?.startsAt ?? new Date().toISOString())
   });
   const [budgetForm, setBudgetForm] = useState<BudgetFormState>({
     workingGroupId: visibleGroups[0]?.id ?? "",
@@ -300,8 +306,7 @@ export function DashboardShell({
     username: "",
     password: "",
     role: "MEMBER",
-    workingGroupId: visibleGroups[0]?.id ?? "",
-    approvalPermissions: []
+    workingGroupId: visibleGroups[0]?.id ?? ""
   });
   const [message, setMessage] = useState<DashboardMessage | null>(null);
   const [busy, setBusy] = useState(false);
@@ -320,6 +325,8 @@ export function DashboardShell({
   const [approvalThresholdDraft, setApprovalThresholdDraft] = useState(approvalThreshold.toFixed(2));
   const [periodForm, setPeriodForm] = useState<PeriodFormState>(getSuggestedPeriodDraft(currentPeriod));
   const [periodEditForm, setPeriodEditForm] = useState<PeriodEditFormState>(getPeriodEditDraft(currentPeriod));
+  const [expenseProofFile, setExpenseProofFile] = useState<File | null>(null);
+  const [pushStatus, setPushStatus] = useState<"idle" | "enabled" | "blocked" | "unsupported">("idle");
   useEffect(() => {
     if (visibleGroups.length === 0) {
       setSelectedMobileGroupId("");
@@ -505,8 +512,7 @@ export function DashboardShell({
   function getManagedUserDraft(user: DashboardManagedUser): ManagedUserDraft {
     return userDrafts[user.id] ?? {
       role: user.role,
-      workingGroupId: user.workingGroupId ?? "",
-      approvalPermissions: sortApprovalPermissions(user.approvalPermissions)
+      workingGroupId: user.workingGroupId ?? ""
     };
   }
 
@@ -525,8 +531,7 @@ export function DashboardShell({
       ...current,
       [user.id]: {
         role: user.role,
-        workingGroupId: user.workingGroupId ?? "",
-        approvalPermissions: sortApprovalPermissions(user.approvalPermissions)
+        workingGroupId: user.workingGroupId ?? ""
       }
     }));
   }
@@ -621,7 +626,7 @@ export function DashboardShell({
     }
 
     await runAction(async () => {
-      await parseResponse(
+      const result = (await parseResponse(
         await fetch("/api/expenses", {
           method: "POST",
           headers: {
@@ -634,11 +639,22 @@ export function DashboardShell({
             agId: expenseForm.agId,
             budgetId: expenseForm.budgetId,
             recurrence: expenseForm.recurrence,
-            recurrenceStartAt: expenseForm.recurrence === "MONTHLY" ? expenseForm.recurrenceStartAt : "",
-            proofUrl: expenseForm.proofUrl
+            recurrenceStartAt: expenseForm.recurrence === "MONTHLY" ? expenseForm.recurrenceStartAt : ""
           })
         })
-      );
+      )) as { expense?: { id: string } };
+
+      if (expenseProofFile && result.expense?.id) {
+        const formData = new FormData();
+        formData.set("file", expenseProofFile);
+
+        await parseResponse(
+          await fetch(`/api/expenses/${result.expense.id}/proof`, {
+            method: "POST",
+            body: formData
+          })
+        );
+      }
 
       const resetGroup = defaultEditableGroup?.id ?? "";
       const resetBudget = defaultEditableGroup?.budgets[0]?.id ?? "";
@@ -650,9 +666,9 @@ export function DashboardShell({
         agId: resetGroup,
         budgetId: resetBudget,
         recurrence: "NONE",
-        recurrenceStartAt: toDateInputValue(currentPeriod?.startsAt ?? new Date().toISOString()),
-        proofUrl: ""
+        recurrenceStartAt: toDateInputValue(currentPeriod?.startsAt ?? new Date().toISOString())
       });
+      setExpenseProofFile(null);
     }, "Ausgabe wurde gespeichert.");
   }
 
@@ -751,6 +767,20 @@ export function DashboardShell({
     }, "Ausgabe wurde dokumentiert.");
   }
 
+  async function handleUploadProof(expenseId: string, file: File) {
+    const formData = new FormData();
+    formData.set("file", file);
+
+    const result = (await parseResponse(
+      await fetch(`/api/expenses/${expenseId}/proof`, {
+        method: "POST",
+        body: formData
+      })
+    )) as { proofUrl: string };
+
+    return result.proofUrl;
+  }
+
   async function handleSaveBudget(budgetId: string, name: string, totalBudget: string, colorCode: string) {
     await runAction(async () => {
       await parseResponse(
@@ -945,8 +975,7 @@ export function DashboardShell({
               username: createdUsername,
               password: userForm.password,
               role: userForm.role,
-              workingGroupId: userForm.workingGroupId,
-              approvalPermissions: sortApprovalPermissions(userForm.approvalPermissions)
+              workingGroupId: userForm.workingGroupId
             })
           })
         )) as { user?: DashboardManagedUser };
@@ -961,8 +990,7 @@ export function DashboardShell({
           username: "",
           password: "",
           role: "MEMBER",
-          workingGroupId: visibleGroups[0]?.id ?? "",
-          approvalPermissions: []
+          workingGroupId: visibleGroups[0]?.id ?? ""
         });
 
         return {
@@ -987,8 +1015,7 @@ export function DashboardShell({
           },
           body: JSON.stringify({
             role: draft.role,
-            workingGroupId: draft.workingGroupId,
-            approvalPermissions: sortApprovalPermissions(draft.approvalPermissions)
+            workingGroupId: draft.workingGroupId
           })
         })
       )) as { user?: DashboardManagedUser };
@@ -1028,6 +1055,51 @@ export function DashboardShell({
       );
     }, `Freigabe-Schwelle wurde auf ${nextThreshold.toFixed(2)} EUR gesetzt.`);
   }
+
+  async function handleEnablePushNotifications() {
+    if (!("serviceWorker" in navigator) || !("PushManager" in window) || !("Notification" in window)) {
+      setPushStatus("unsupported");
+      setMessage({ type: "error", text: "Dieser Browser unterstuetzt Web Push nicht." });
+      return;
+    }
+
+    const publicKey = process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY;
+    if (!publicKey) {
+      setMessage({ type: "error", text: "VAPID Public Key ist nicht konfiguriert." });
+      return;
+    }
+
+    const permission = await Notification.requestPermission();
+    if (permission !== "granted") {
+      setPushStatus("blocked");
+      setMessage({ type: "error", text: "Benachrichtigungen wurden nicht erlaubt." });
+      return;
+    }
+
+    await runAction(async () => {
+      const registration = await navigator.serviceWorker.ready;
+      const existingSubscription = await registration.pushManager.getSubscription();
+      const subscription =
+        existingSubscription ??
+        (await registration.pushManager.subscribe({
+          userVisibleOnly: true,
+          applicationServerKey: urlBase64ToUint8Array(publicKey)
+        }));
+
+      await parseResponse(
+        await fetch("/api/push-subscriptions", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(subscription.toJSON())
+        })
+      );
+
+      setPushStatus("enabled");
+    }, "Web Push ist für dieses Gerät aktiviert.");
+  }
+
   async function handleDeleteUser(userId: string) {
     await runAction(async () => {
       await parseResponse(
@@ -1206,7 +1278,7 @@ export function DashboardShell({
           Zeitraum wechseln
         </Typography>
         <Typography variant="body2" color="text.secondary">
-          {"Nur Vorstand und Finanz-AG können die aktuelle Übersicht global umstellen."}
+          {"Nur Vorstand allgemein, AG Orga und AG Finanzen können die aktuelle Übersicht global umstellen."}
         </Typography>
       </Box>
       <Box
@@ -1413,6 +1485,17 @@ export function DashboardShell({
                 Neue Ausgabe
               </Typography>
             </Box>
+            {viewer.approvalPermissions.length > 0 ? (
+              <Button
+                type="button"
+                variant={pushStatus === "enabled" ? "contained" : "outlined"}
+                startIcon={<NotificationsActiveRoundedIcon />}
+                disabled={busy || pushStatus === "unsupported"}
+                onClick={handleEnablePushNotifications}
+              >
+                {pushStatus === "enabled" ? "Web Push aktiv" : "Freigabe-Push aktivieren"}
+              </Button>
+            ) : null}
 
             <Box component="form" onSubmit={handleCreateExpense}>
               <Stack spacing={2}>
@@ -1512,11 +1595,33 @@ export function DashboardShell({
                   ))}
                 </TextField>
                 <TextField
-                  label="Beleg-URL (optional)"
-                  value={expenseForm.proofUrl}
-                  onChange={(event) => setExpenseForm((current) => ({ ...current, proofUrl: event.target.value }))}
+                  label="Beleg"
+                  value={expenseProofFile?.name ?? ""}
                   fullWidth
+                  InputProps={{ readOnly: true }}
+                  helperText="Optional: Bild oder PDF auswählen. Auf Mobilgeräten kann die Kamera angeboten werden."
                 />
+                <Stack direction={{ xs: "column", sm: "row" }} gap={1} useFlexGap flexWrap="wrap">
+                  <Button component="label" variant="outlined" startIcon={<UploadFileRoundedIcon />} disabled={busy}>
+                    Beleg auswählen
+                    <input
+                      hidden
+                      type="file"
+                      accept="image/*,application/pdf"
+                      onChange={(event) => setExpenseProofFile(event.target.files?.[0] ?? null)}
+                    />
+                  </Button>
+                  <Button component="label" variant="outlined" disabled={busy}>
+                    Kamera öffnen
+                    <input
+                      hidden
+                      type="file"
+                      accept="image/*"
+                      capture="environment"
+                      onChange={(event) => setExpenseProofFile(event.target.files?.[0] ?? null)}
+                    />
+                  </Button>
+                </Stack>
                 <Button
                   type="submit"
                   variant="contained"
@@ -1853,8 +1958,9 @@ export function DashboardShell({
                       }}
                       required
                     >
-                      <MenuItem value="ADMIN">Vorstand</MenuItem>
-                      <MenuItem value="FINANCE">Finanz-AG</MenuItem>
+                      <MenuItem value="BOARD">Vorstand allgemein</MenuItem>
+                      <MenuItem value="ORGA">AG Orga</MenuItem>
+                      <MenuItem value="FINANCE">AG Finanzen</MenuItem>
                       <MenuItem value="MEMBER">AG-Mitglied</MenuItem>
                     </TextField>
                     <TextField
@@ -1872,7 +1978,7 @@ export function DashboardShell({
                           ? "Lege zuerst eine AG an."
                           : userForm.role === "MEMBER"
                             ? "AG-Mitglieder brauchen eine feste AG-Zuordnung."
-                            : "Optional: Auch Vorstand und Finanz-AG können einer AG zugeordnet werden."
+                            : "Optional: Verwaltungsrollen können einer AG zugeordnet werden."
                       }
                     >
                       {userForm.role !== "MEMBER" ? <MenuItem value="">Ohne AG</MenuItem> : null}
@@ -1882,16 +1988,11 @@ export function DashboardShell({
                         </MenuItem>
                       ))}
                     </TextField>
-                    {renderApprovalPermissionSelector(
-                      userForm.approvalPermissions,
-                      (approvalType) =>
-                        setUserForm((current) => ({
-                          ...current,
-                          approvalPermissions: toggleApprovalPermission(current.approvalPermissions, approvalType)
-                        })),
-                      "Lege fest, für welche Freigabeschritte dieses Konto zeichnen darf.",
-                      getAvailableApprovalRoles(userForm.role)
-                    )}
+                    <Typography variant="body2" color="text.secondary">
+                      {getAvailableApprovalRoles(userForm.role).length > 0
+                        ? `Freigabe automatisch: ${getAvailableApprovalRoles(userForm.role).map(approvalLabel).join(", ")}`
+                        : "Diese Rolle kann keine Ausgaben freigeben."}
+                    </Typography>
                     <Button type="submit" variant="outlined" disabled={busy}>
                       Nutzer speichern
                     </Button>
@@ -1938,7 +2039,7 @@ export function DashboardShell({
                   Nutzer verwalten
                 </Typography>
                 <Typography color="text.secondary">
-                  {"Bestehende Passwörter bleiben sicher gehasht. Hier kannst du Rolle, AG-Zuordnung, Freigaberollen und Passwörter pflegen."}
+                  {"Bestehende Passwörter bleiben sicher gehasht. Hier kannst du Rolle, AG-Zuordnung und Passwörter pflegen."}
                 </Typography>
               </Box>
               <Stack spacing={1.4}>
@@ -2049,8 +2150,9 @@ export function DashboardShell({
                                 }}
                                 fullWidth
                               >
-                                <MenuItem value="ADMIN">Vorstand</MenuItem>
-                                <MenuItem value="FINANCE">Finanz-AG</MenuItem>
+                                <MenuItem value="BOARD">Vorstand allgemein</MenuItem>
+                                <MenuItem value="ORGA">AG Orga</MenuItem>
+                                <MenuItem value="FINANCE">AG Finanzen</MenuItem>
                                 <MenuItem value="MEMBER">AG-Mitglied</MenuItem>
                               </TextField>
                               <TextField
@@ -2066,7 +2168,7 @@ export function DashboardShell({
                                     ? "Lege zuerst eine AG an."
                                     : draft.role === "MEMBER"
                                       ? "AG-Mitglieder brauchen eine feste AG-Zuordnung."
-                                      : "Optional: Auch Vorstand und Finanz-AG können einer AG zugeordnet werden."
+                                      : "Optional: Verwaltungsrollen können einer AG zugeordnet werden."
                                 }
                               >
                                 {draft.role !== "MEMBER" ? <MenuItem value="">Ohne AG</MenuItem> : null}
@@ -2076,15 +2178,11 @@ export function DashboardShell({
                                   </MenuItem>
                                 ))}
                               </TextField>
-                              {renderApprovalPermissionSelector(
-                                draft.approvalPermissions,
-                                (approvalType) =>
-                                  updateManagedUserDraft(user, {
-                                    approvalPermissions: toggleApprovalPermission(draft.approvalPermissions, approvalType)
-                                  }),
-                                "Lege fest, welche Freigabeschritte dieses Konto autorisieren darf.",
-                                getAvailableApprovalRoles(draft.role)
-                              )}
+                              <Typography variant="body2" color="text.secondary">
+                                {getAvailableApprovalRoles(draft.role).length > 0
+                                  ? `Freigabe automatisch: ${getAvailableApprovalRoles(draft.role).map(approvalLabel).join(", ")}`
+                                  : "Diese Rolle kann keine Ausgaben freigeben."}
+                              </Typography>
                               <Stack direction="row" gap={1} useFlexGap flexWrap="wrap">
                                 <Button type="button" variant="contained" disabled={busy} onClick={() => handleUpdateUser(user)}>
                                   Nutzer speichern
@@ -2321,6 +2419,7 @@ export function DashboardShell({
                 onApprove={handleApprove}
                 onMarkPaid={handleMarkPaid}
                 onDocument={handleDocument}
+                onUploadProof={handleUploadProof}
                 onSaveWorkingGroup={handleSaveWorkingGroup}
                 onDeleteWorkingGroup={handleDeleteWorkingGroup}
                 onSaveBudget={handleSaveBudget}
@@ -2363,6 +2462,7 @@ export function DashboardShell({
                   onApprove={handleApprove}
                   onMarkPaid={handleMarkPaid}
                   onDocument={handleDocument}
+                  onUploadProof={handleUploadProof}
                   onSaveWorkingGroup={handleSaveWorkingGroup}
                   onDeleteWorkingGroup={handleDeleteWorkingGroup}
                   onSaveBudget={handleSaveBudget}