+
+
Sessies
+
+
+
+
+
+
+
+ {formOpen && (
+
+ Nieuwe registratie
+ {/* Task 4 fills in the full create/edit form. */}
+
+
+
+ )}
+
+ {isLoading ? (
+
Laden…
+ ) : visible.length === 0 ? (
+
+ {sessions.length === 0 ? 'Nog geen sessies.' : 'Geen sessies in dit filter.'}
+
+ ) : (
+
+ {visible.map((session) => (
+ stopSession.mutate(session.id)}
+ onDiscard={() => discardSession.mutate(session.id)}
+ />
+ ))}
+
+ )}
+
+ );
+}
+
+function SessionRow({
+ session,
+ onStop,
+ onDiscard,
+}: {
+ session: WorkSession;
+ onStop: () => void;
+ onDiscard: () => void;
+}) {
+ const worked = workedSeconds(session);
+ const isActive = session.status === 'active';
+
+ return (
+
+ {session.user_name ?? 'Onbekend'}
+
+ {session.activity_name ?? 'Onbekende handeling'}
+ {session.insole_type && {session.insole_type}}
+
+
+ {formatTime(worked)}
+ {session.paused_seconds > 0 && (
+ Pauze {formatTime(session.paused_seconds)}
+ )}
+
+ {formatDate(session.start_time)}
+
+
+ {STATUS_LABEL[session.status]}
+
+
+
+
+ {isActive && (
+ <>
+
+
+ >
+ )}
+
+
+ );
+}
diff --git a/apps/admin/src/styles.css b/apps/admin/src/styles.css
index 8b6e3da..d461bc9 100644
--- a/apps/admin/src/styles.css
+++ b/apps/admin/src/styles.css
@@ -420,3 +420,160 @@ body {
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
+
+/* ---- Sessions management (Sessies) ---- */
+.sessions-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ margin-bottom: 16px;
+}
+
+.sessions-head .screen-title {
+ margin: 0;
+}
+
+.sessions-head .btn-primary {
+ width: auto;
+ white-space: nowrap;
+}
+
+.sessions-toolbar {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin-bottom: 20px;
+}
+
+.sessions-filter {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--text-muted);
+}
+
+.sessions-filter select {
+ padding: 8px 12px;
+ font-size: 15px;
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ background: #ffffff;
+ color: var(--text);
+}
+
+.sessions-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.sessions-row {
+ display: grid;
+ grid-template-columns: 1.2fr 1.6fr 1fr 0.8fr 0.8fr auto;
+ align-items: center;
+ gap: 12px;
+ padding: 14px 16px;
+ background: #ffffff;
+ border: 1px solid var(--border);
+ border-radius: 12px;
+}
+
+.sessions-worker {
+ font-weight: 600;
+ color: var(--text);
+}
+
+.sessions-activity {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--text);
+}
+
+.sessions-type {
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--primary);
+ background: var(--primary-light);
+ border-radius: 999px;
+ padding: 2px 10px;
+}
+
+.sessions-worked {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.sessions-time {
+ font-variant-numeric: tabular-nums;
+ font-weight: 600;
+}
+
+.sessions-pause {
+ font-size: 12px;
+ color: var(--text-muted);
+ font-variant-numeric: tabular-nums;
+}
+
+.sessions-date {
+ font-size: 14px;
+ color: var(--text-muted);
+}
+
+.sessions-badge {
+ font-size: 12px;
+ font-weight: 600;
+ border-radius: 999px;
+ padding: 4px 10px;
+}
+
+.sessions-badge-active {
+ color: #166534;
+ background: #dcfce7;
+}
+
+.sessions-badge-completed {
+ color: var(--text-muted);
+ background: #f3f4f6;
+}
+
+.sessions-badge-discarded {
+ color: var(--danger);
+ background: #fee2e2;
+}
+
+.sessions-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ justify-content: flex-end;
+}
+
+.btn-row-stop {
+ padding: 8px 14px;
+ font-size: 14px;
+ font-weight: 600;
+ color: #166534;
+ background: #dcfce7;
+ border: 1px solid #86efac;
+ border-radius: 12px;
+ cursor: pointer;
+}
+
+.btn-row-cancel {
+ padding: 8px 14px;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--danger);
+ background: #fee2e2;
+ border: 1px solid #fecaca;
+ border-radius: 12px;
+ cursor: pointer;
+}