Initiële commit: VibeFinance 3-container opzet

Basislijn van de bestaande applicatie (Vite/React frontend, Express backend, PostgreSQL) zoals die in de index stond, plus dev-, release- en documentatiescripts. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-04 09:19:14 +02:00
commit e45d5b73fb
54 changed files with 11434 additions and 0 deletions
@@ -0,0 +1,112 @@
+import { useApp } from "../context/AppContext.jsx";
+
+const TEAL = "linear-gradient(135deg, #7c3aed, #a855f7)";
+
+const BACKUP_ICON = (
+  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
+    <path d="M12 15V5M8 11l4-4 4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M4 17v2a1 1 0 001 1h14a1 1 0 001-1v-2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
+  </svg>
+);
+
+const RESTORE_ICON = (
+  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
+    <path d="M4 8a8 8 0 1 1 0 8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
+    <polyline points="4,4 4,8 8,8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+function ActionRow({ icon, title, description, onClick }) {
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        display: "flex", alignItems: "center", gap: 14,
+        padding: "12px 0", cursor: "pointer",
+      }}
+    >
+      <div style={{ color: "#94a3b8", flexShrink: 0 }}>{icon}</div>
+      <div>
+        <div style={{ fontWeight: 600, fontSize: 14, color: "inherit", marginBottom: 2 }}>{title}</div>
+        <div style={{ fontSize: 12, color: "#64748b" }}>{description}</div>
+      </div>
+    </div>
+  );
+}
+
+export default function InstellingenModal({ onClose }) {
+  const { T, darkMode, setDarkMode, doBackup, doRestore } = useApp();
+
+  return (
+    <div
+      onClick={onClose}
+      style={{
+        position: "fixed", inset: 0, zIndex: 400,
+        background: "rgba(0,0,0,0.55)", backdropFilter: "blur(4px)",
+        display: "flex", alignItems: "center", justifyContent: "center",
+      }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          background: T.card, border: `1px solid ${T.border}`,
+          borderRadius: 16, padding: "22px 22px 8px",
+          width: 360, boxShadow: "0 16px 48px rgba(0,0,0,0.4)",
+          color: T.text,
+        }}
+      >
+        {/* Header */}
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
+          <span style={{ fontWeight: 700, fontSize: 16 }}>Instellingen</span>
+          <button onClick={onClose} style={{
+            background: "transparent", border: "none", cursor: "pointer",
+            color: T.muted, fontSize: 20, lineHeight: 1, padding: "0 4px",
+          }}>×</button>
+        </div>
+
+        {/* Dark mode rij */}
+        <div style={{
+          display: "flex", alignItems: "center", justifyContent: "space-between",
+          padding: "4px 0 16px",
+        }}>
+          <span style={{ fontWeight: 600, fontSize: 14 }}>Dark mode</span>
+          <div
+            onClick={() => setDarkMode((d) => !d)}
+            style={{
+              width: 44, height: 24, borderRadius: 12, cursor: "pointer",
+              background: darkMode ? TEAL : "#334155",
+              position: "relative", transition: "background 0.2s", flexShrink: 0,
+            }}
+          >
+            <div style={{
+              position: "absolute", top: 3, borderRadius: "50%",
+              width: 18, height: 18, background: "#fff",
+              left: darkMode ? 23 : 3,
+              transition: "left 0.2s",
+              boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
+            }} />
+          </div>
+        </div>
+
+        <div style={{ height: 1, background: T.border, margin: "0 -22px" }} />
+
+        {/* Acties */}
+        <div style={{ padding: "4px 0 10px" }}>
+          <ActionRow
+            icon={BACKUP_ICON}
+            title="Backup maken"
+            description="Download een volledige backup als ZIP"
+            onClick={() => { doBackup(); onClose(); }}
+          />
+          <div style={{ height: 1, background: T.border }} />
+          <ActionRow
+            icon={RESTORE_ICON}
+            title="Backup herstellen"
+            description="Herstel data vanuit een backup-bestand"
+            onClick={() => { doRestore(); onClose(); }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}