Vibe/VibeFinance
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 17 Wiki Activity

Bugfixes

Browse Source
This commit is contained in:
Jordy Hoogeveen
2026-09-15 14:02:17 +02:00
parent 750dc69e56
commit 0b67f346e1
19 changed files with 449 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/GebruikersBeheer.jsx
+20 -24
View File
@@ -1,10 +1,6 @@
import { useState, useEffect, useRef } from "react";
import { RED, GREEN } from "../constants/index.js";
const TEAL = "linear-gradient(135deg, #7c3aed, #a855f7)";
const TEAL_COLOR = "#a855f7";
const TEAL_BG = "rgba(124,58,237,0.15)";
const TEAL_BORDER = "rgba(124,58,237,0.35)";
import { useApp } from "../context/AppContext.jsx";
const getToken = () => localStorage.getItem("vf_token");
@@ -56,11 +52,11 @@ function RolSelect({ value, onChange, opties, T, darkMode }) {
{opties.map((o) => (
<div key={o} onClick={() => { onChange(o); setOpen(false); }} style={{
padding: "9px 12px", fontSize: 13, cursor: "pointer",
color: o === value ? TEAL_COLOR : T.text,
background: o === value ? TEAL_BG : "transparent",
color: o === value ? T.accentTekst : T.text,
background: o === value ? T.inputBg : "transparent",
}}
onMouseEnter={(e) => e.currentTarget.style.background = "rgba(14,221,212,0.10)"}
onMouseLeave={(e) => e.currentTarget.style.background = o === value ? TEAL_BG : "transparent"}
onMouseLeave={(e) => e.currentTarget.style.background = o === value ? T.inputBg : "transparent"}
>
{o}
</div>
@@ -197,8 +193,8 @@ export default function GebruikersBeheer({ onClose }) {
}}>
<div>
<span style={{ fontWeight: 700, fontSize: 15, color: T.text }}>Gebruikersbeheer</span>
<span style={{ marginLeft: 10, fontSize: 11, fontWeight: 600, color: TEAL_COLOR,
background: TEAL_BG, borderRadius: 99, padding: "2px 8px", border: `1px solid ${TEAL_BORDER}`,
<span style={{ marginLeft: 10, fontSize: 11, fontWeight: 600, color: T.accentTekst,
background: T.inputBg, borderRadius: 99, padding: "2px 8px", border: `1px solid ${T.inputBorder}`,
}}>
{users.length} gebruiker{users.length !== 1 ? "s" : ""}
</span>
@@ -236,18 +232,18 @@ export default function GebruikersBeheer({ onClose }) {
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<div style={{
width: 32, height: 32, borderRadius: "50%",
background: TEAL_BG, display: "flex",
background: T.inputBg, display: "flex",
alignItems: "center", justifyContent: "center",
fontSize: 12, fontWeight: 700, color: TEAL_COLOR, flexShrink: 0,
fontSize: 12, fontWeight: 700, color: T.accentTekst, flexShrink: 0,
}}>
{initials}
</div>
<span style={{ fontWeight: 600 }}>{u.naam}</span>
{isSelf && (
<span style={{
fontSize: 10, fontWeight: 700, color: TEAL_COLOR,
background: TEAL_BG, borderRadius: 99,
padding: "1px 7px", border: `1px solid ${TEAL_BORDER}`,
fontSize: 10, fontWeight: 700, color: T.accentTekst,
background: T.inputBg, borderRadius: 99,
padding: "1px 7px", border: `1px solid ${T.inputBorder}`,
}}>jij</span>
)}
</div>
@@ -263,9 +259,9 @@ export default function GebruikersBeheer({ onClose }) {
<td style={{ ...td, whiteSpace: "nowrap" }}>
<div style={{ display: "flex", gap: 6, alignItems: "center" }}>
<button onClick={() => openEdit(u)} style={{
padding: "3px 8px", background: TEAL_BG,
border: `1px solid ${TEAL_BORDER}`, borderRadius: 6,
color: TEAL_COLOR, cursor: "pointer", fontSize: 12,
padding: "3px 8px", background: T.inputBg,
border: `1px solid ${T.inputBorder}`, borderRadius: 6,
color: T.accentTekst, cursor: "pointer", fontSize: 12,
}}>✏️</button>
{!isSelf && (
<>
@@ -303,10 +299,10 @@ export default function GebruikersBeheer({ onClose }) {
{/* Bewerken modal */}
{editUser && (
<div style={{
background: darkMode ? "rgba(124,58,237,0.06)" : "#f5f0ff",
border: `1px solid ${TEAL_BORDER}`, borderRadius: 10, padding: "16px", marginBottom: 16,
background: darkMode ? "rgba(124,58,237,0.06)" : T.inputBg,
border: `1px solid ${T.inputBorder}`, borderRadius: 10, padding: "16px", marginBottom: 16,
}}>
<div style={{ fontSize: 11, color: TEAL_COLOR, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 12 }}>
<div style={{ fontSize: 11, color: T.accentTekst, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 12 }}>
{editUser.naam} bewerken
</div>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 10 }}>
@@ -322,7 +318,7 @@ export default function GebruikersBeheer({ onClose }) {
}}>Annuleren</button>
<button onClick={saveEdit} disabled={saving} style={{
flex: 2, padding: "8px",
background: TEAL,
background: T.accentGradient,
border: "none", borderRadius: 8, color: "#fff",
fontWeight: 700, fontSize: 13, cursor: saving ? "not-allowed" : "pointer",
}}>{saving ? "Opslaan..." : "Opslaan"}</button>
@@ -333,7 +329,7 @@ export default function GebruikersBeheer({ onClose }) {
{/* Nieuwe gebruiker */}
{showAdd ? (
<div style={{
background: darkMode ? "rgba(124,58,237,0.06)" : "#f5f0ff",
background: darkMode ? "rgba(124,58,237,0.06)" : T.inputBg,
border: `1px solid ${T.border}`, borderRadius: 10, padding: "16px",
}}>
<div style={{ fontSize: 11, color: T.muted, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 12 }}>
@@ -353,7 +349,7 @@ export default function GebruikersBeheer({ onClose }) {
}}>Annuleren</button>
<button onClick={addUser} disabled={saving} style={{
flex: 2, padding: "8px",
background: TEAL,
background: T.accentGradient,
border: "none", borderRadius: 8, color: "#fff",
fontWeight: 700, fontSize: 13, cursor: saving ? "not-allowed" : "pointer",
}}>
@@ -364,7 +360,7 @@ export default function GebruikersBeheer({ onClose }) {
) : (
<button onClick={() => setShowAdd(true)} style={{
padding: "8px 18px",
background: TEAL,
background: T.accentGradient,
border: "none", borderRadius: 8, color: "#fff",
fontWeight: 700, fontSize: 13, cursor: "pointer",
}}>+ Nieuwe gebruiker</button>