From f0aca266422d1e9f62d6f7920fef13f86f3846e5 Mon Sep 17 00:00:00 2001
From: znetsixe <zn375ix3@gmail.com>
Date: Wed, 1 Apr 2026 16:02:38 +0200
Subject: [PATCH] Sprint 2: Live data, CRUD modals, commitments, document
 upload

Frontend:
- Connect MetroMap to live Inertia props (replace hardcoded demo data)
- Drill-down navigation via router.visit for project-level maps
- Reactive breadcrumb based on map level
- Empty state when no projects exist
- Reusable Modal component with retro styling
- ProjectForm and CommitmentForm with Inertia useForm
- FormInput reusable component (text, date, textarea, select)
- FloatingActions FAB button for creating projects/themes

Backend:
- CommitmentService + CommitmentController (CRUD, mark complete, overdue)
- DocumentService + DocumentController (upload, download, delete)
- MapController now passes users and speerpunten to frontend
- 7 new routes (4 commitment, 3 document)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/Http/Controllers/CommitmentController.php |  61 +++++
 app/Http/Controllers/DocumentController.php   |  51 +++++
 app/Http/Controllers/MapController.php        |   8 +-
 app/Services/CommitmentService.php            | 103 +++++++++
 app/Services/DocumentService.php              |  77 +++++++
 .../js/Components/Forms/CommitmentForm.vue    | 186 +++++++++++++++
 resources/js/Components/Forms/FormInput.vue   | 160 +++++++++++++
 resources/js/Components/Forms/ProjectForm.vue | 216 ++++++++++++++++++
 .../Components/MetroMap/FloatingActions.vue   | 161 +++++++++++++
 resources/js/Components/Modal.vue             | 114 +++++++++
 resources/js/Pages/Map/MetroMap.vue           | 158 ++++++++-----
 routes/web.php                                |  13 ++
 12 files changed, 1247 insertions(+), 61 deletions(-)
 create mode 100644 app/Http/Controllers/CommitmentController.php
 create mode 100644 app/Http/Controllers/DocumentController.php
 create mode 100644 app/Services/CommitmentService.php
 create mode 100644 app/Services/DocumentService.php
 create mode 100644 resources/js/Components/Forms/CommitmentForm.vue
 create mode 100644 resources/js/Components/Forms/FormInput.vue
 create mode 100644 resources/js/Components/Forms/ProjectForm.vue
 create mode 100644 resources/js/Components/MetroMap/FloatingActions.vue
 create mode 100644 resources/js/Components/Modal.vue

diff --git a/app/Http/Controllers/CommitmentController.php b/app/Http/Controllers/CommitmentController.php
new file mode 100644
index 0000000..bd3bf36
--- /dev/null
+++ b/app/Http/Controllers/CommitmentController.php
@@ -0,0 +1,61 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Commitment;
+use App\Services\CommitmentService;
+use Illuminate\Http\Request;
+
+class CommitmentController extends Controller
+{
+    public function __construct(
+        private CommitmentService $commitmentService
+    ) {}
+
+    public function store(Request $request)
+    {
+        $validated = $request->validate([
+            'beschrijving' => 'required|string',
+            'eigenaar_id'  => 'required|exists:users,id',
+            'deadline'     => 'required|date',
+            'project_id'   => 'required|exists:projects,id',
+            'prioriteit'   => 'nullable|string',
+            'bron'         => 'nullable|string',
+            'besluit_id'   => 'nullable|exists:besluiten,id',
+        ]);
+
+        $this->commitmentService->create($validated);
+
+        return back()->with('success', 'Commitment aangemaakt.');
+    }
+
+    public function update(Request $request, Commitment $commitment)
+    {
+        $validated = $request->validate([
+            'beschrijving' => 'sometimes|required|string',
+            'eigenaar_id'  => 'sometimes|required|exists:users,id',
+            'deadline'     => 'sometimes|required|date',
+            'prioriteit'   => 'nullable|string',
+            'bron'         => 'nullable|string',
+            'status'       => 'nullable|string',
+        ]);
+
+        $this->commitmentService->update($commitment, $validated);
+
+        return back()->with('success', 'Commitment bijgewerkt.');
+    }
+
+    public function complete(Commitment $commitment)
+    {
+        $this->commitmentService->markComplete($commitment);
+
+        return back()->with('success', 'Commitment afgerond.');
+    }
+
+    public function destroy(Commitment $commitment)
+    {
+        $commitment->delete();
+
+        return back()->with('success', 'Commitment verwijderd.');
+    }
+}
diff --git a/app/Http/Controllers/DocumentController.php b/app/Http/Controllers/DocumentController.php
new file mode 100644
index 0000000..5a17116
--- /dev/null
+++ b/app/Http/Controllers/DocumentController.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Document;
+use App\Services\DocumentService;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
+
+class DocumentController extends Controller
+{
+    public function __construct(
+        private DocumentService $documentService
+    ) {}
+
+    public function store(Request $request)
+    {
+        $validated = $request->validate([
+            'titel'      => 'required|string|max:255',
+            'bestand'    => 'required|file|max:20480',
+            'project_id' => 'required|exists:projects,id',
+            'fase_id'    => 'nullable|exists:fases,id',
+            'type'       => 'nullable|string|max:50',
+        ]);
+
+        $this->documentService->upload($validated, $request->file('bestand'));
+
+        return back()->with('success', 'Document geupload.');
+    }
+
+    public function download(Document $document)
+    {
+        abort_unless(
+            Storage::disk('local')->exists($document->bestandspad),
+            404,
+            'Bestand niet gevonden.'
+        );
+
+        return Storage::disk('local')->download(
+            $document->bestandspad,
+            $document->titel
+        );
+    }
+
+    public function destroy(Document $document)
+    {
+        $this->documentService->delete($document);
+
+        return back()->with('success', 'Document verwijderd.');
+    }
+}
diff --git a/app/Http/Controllers/MapController.php b/app/Http/Controllers/MapController.php
index cdd484f..93f1f6d 100644
--- a/app/Http/Controllers/MapController.php
+++ b/app/Http/Controllers/MapController.php
@@ -17,7 +17,9 @@ class MapController extends Controller
         $mapData = $this->mapDataService->getStrategyMap();
 
         return Inertia::render('Map/MetroMap', [
-            'mapData' => $mapData,
+            'mapData'     => $mapData,
+            'users'       => \App\Models\User::select('id', 'name')->get(),
+            'speerpunten' => \App\Models\Speerpunt::select('id', 'naam', 'thema_id')->with('thema:id,naam')->get(),
         ]);
     }
 
@@ -26,7 +28,9 @@ class MapController extends Controller
         $mapData = $this->mapDataService->getProjectMap($projectId);
 
         return Inertia::render('Map/MetroMap', [
-            'mapData' => $mapData,
+            'mapData'     => $mapData,
+            'users'       => \App\Models\User::select('id', 'name')->get(),
+            'speerpunten' => \App\Models\Speerpunt::select('id', 'naam', 'thema_id')->with('thema:id,naam')->get(),
         ]);
     }
 
diff --git a/app/Services/CommitmentService.php b/app/Services/CommitmentService.php
new file mode 100644
index 0000000..39630c2
--- /dev/null
+++ b/app/Services/CommitmentService.php
@@ -0,0 +1,103 @@
+<?php
+
+namespace App\Services;
+
+use App\Enums\CommitmentStatus;
+use App\Models\AuditLog;
+use App\Models\Commitment;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+
+class CommitmentService
+{
+    /**
+     * Get all commitments for a project with owner and acties.
+     */
+    public function getForProject(int $projectId): Collection
+    {
+        return Commitment::with(['eigenaar', 'acties'])
+            ->where('project_id', $projectId)
+            ->orderBy('deadline')
+            ->get();
+    }
+
+    /**
+     * Create a new commitment with audit log.
+     */
+    public function create(array $data): Commitment
+    {
+        return DB::transaction(function () use ($data) {
+            $commitment = Commitment::create([
+                'project_id'  => $data['project_id'],
+                'beschrijving' => $data['beschrijving'],
+                'eigenaar_id' => $data['eigenaar_id'],
+                'deadline'    => $data['deadline'],
+                'status'      => CommitmentStatus::Open,
+                'bron'        => $data['bron'] ?? null,
+                'besluit_id'  => $data['besluit_id'] ?? null,
+            ]);
+
+            $this->audit('created', $commitment);
+
+            return $commitment;
+        });
+    }
+
+    /**
+     * Update a commitment with audit log.
+     */
+    public function update(Commitment $commitment, array $data): Commitment
+    {
+        return DB::transaction(function () use ($commitment, $data) {
+            $commitment->update(array_filter([
+                'beschrijving' => $data['beschrijving'] ?? null,
+                'eigenaar_id'  => $data['eigenaar_id'] ?? null,
+                'deadline'     => $data['deadline'] ?? null,
+                'status'       => $data['status'] ?? null,
+                'bron'         => $data['bron'] ?? null,
+            ], fn ($v) => $v !== null));
+
+            $this->audit('updated', $commitment);
+
+            return $commitment->fresh();
+        });
+    }
+
+    /**
+     * Mark a commitment as afgerond with audit log.
+     */
+    public function markComplete(Commitment $commitment): Commitment
+    {
+        return DB::transaction(function () use ($commitment) {
+            $commitment->update(['status' => CommitmentStatus::Afgerond]);
+
+            $this->audit('completed', $commitment);
+
+            return $commitment->fresh();
+        });
+    }
+
+    /**
+     * Get all commitments past their deadline that are not afgerond.
+     */
+    public function getOverdue(): Collection
+    {
+        return Commitment::with(['eigenaar', 'project'])
+            ->where('deadline', '<', now()->toDateString())
+            ->where('status', '!=', CommitmentStatus::Afgerond)
+            ->orderBy('deadline')
+            ->get();
+    }
+
+    private function audit(string $action, Commitment $commitment, ?array $extra = null): void
+    {
+        AuditLog::create([
+            'user_id'     => Auth::id(),
+            'action'      => "commitment.{$action}",
+            'entity_type' => 'commitment',
+            'entity_id'   => $commitment->id,
+            'payload'     => $extra,
+        ]);
+    }
+}
diff --git a/app/Services/DocumentService.php b/app/Services/DocumentService.php
new file mode 100644
index 0000000..aaf6e69
--- /dev/null
+++ b/app/Services/DocumentService.php
@@ -0,0 +1,77 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\AuditLog;
+use App\Models\Document;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Storage;
+
+class DocumentService
+{
+    /**
+     * Get all documents for a project with auteur.
+     */
+    public function getForProject(int $projectId): Collection
+    {
+        return Document::with('auteur')
+            ->where('project_id', $projectId)
+            ->latest()
+            ->get();
+    }
+
+    /**
+     * Store a file and create the Document record.
+     */
+    public function upload(array $data, UploadedFile $file): Document
+    {
+        return DB::transaction(function () use ($data, $file) {
+            $projectId = $data['project_id'];
+            $path = $file->store("documents/{$projectId}", 'local');
+
+            $document = Document::create([
+                'project_id'  => $projectId,
+                'fase_id'     => $data['fase_id'] ?? null,
+                'titel'       => $data['titel'],
+                'type'        => $data['type'] ?? $file->getClientOriginalExtension(),
+                'bestandspad' => $path,
+                'versie'      => 1,
+                'auteur_id'   => Auth::id(),
+            ]);
+
+            $this->audit('uploaded', $document);
+
+            return $document;
+        });
+    }
+
+    /**
+     * Delete the file from storage and soft-delete the Document record.
+     */
+    public function delete(Document $document): void
+    {
+        DB::transaction(function () use ($document) {
+            if ($document->bestandspad && Storage::disk('local')->exists($document->bestandspad)) {
+                Storage::disk('local')->delete($document->bestandspad);
+            }
+
+            $this->audit('deleted', $document);
+
+            $document->delete();
+        });
+    }
+
+    private function audit(string $action, Document $document, ?array $extra = null): void
+    {
+        AuditLog::create([
+            'user_id'     => Auth::id(),
+            'action'      => "document.{$action}",
+            'entity_type' => 'document',
+            'entity_id'   => $document->id,
+            'payload'     => $extra,
+        ]);
+    }
+}
diff --git a/resources/js/Components/Forms/CommitmentForm.vue b/resources/js/Components/Forms/CommitmentForm.vue
new file mode 100644
index 0000000..26d6de6
--- /dev/null
+++ b/resources/js/Components/Forms/CommitmentForm.vue
@@ -0,0 +1,186 @@
+<script setup>
+import { watch } from 'vue'
+import { useForm } from '@inertiajs/vue3'
+import Modal from '../Modal.vue'
+import FormInput from './FormInput.vue'
+
+const props = defineProps({
+    commitment: { type: Object, default: null },
+    projectId: { type: [Number, String], required: true },
+    users: { type: Array, default: () => [] },
+    show: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['close'])
+
+const isEditing = !!props.commitment
+
+const form = useForm({
+    beschrijving: props.commitment?.beschrijving ?? '',
+    eigenaar_id: props.commitment?.eigenaar_id ?? '',
+    deadline: props.commitment?.deadline ?? '',
+    prioriteit: props.commitment?.prioriteit ?? '',
+    project_id: props.projectId,
+})
+
+watch(() => props.show, (val) => {
+    if (val) {
+        form.beschrijving = props.commitment?.beschrijving ?? ''
+        form.eigenaar_id = props.commitment?.eigenaar_id ?? ''
+        form.deadline = props.commitment?.deadline ?? ''
+        form.prioriteit = props.commitment?.prioriteit ?? ''
+        form.project_id = props.projectId
+        form.clearErrors()
+    }
+})
+
+const userOptions = props.users.map(u => ({
+    value: u.id,
+    label: u.name ?? u.naam ?? String(u.id),
+}))
+
+const prioriteitOptions = [
+    { value: 'laag', label: 'Laag' },
+    { value: 'midden', label: 'Midden' },
+    { value: 'hoog', label: 'Hoog' },
+]
+
+const handleSubmit = () => {
+    form.post('/commitments', {
+        onSuccess: () => emit('close'),
+    })
+}
+
+const handleClose = () => {
+    form.reset()
+    form.clearErrors()
+    emit('close')
+}
+</script>
+
+<template>
+    <Modal
+        :show="show"
+        :title="isEditing ? 'COMMITMENT BEWERKEN' : 'NIEUW COMMITMENT'"
+        max-width="480px"
+        @close="handleClose"
+    >
+        <form class="commitment-form" @submit.prevent="handleSubmit">
+            <div class="form-grid">
+                <FormInput
+                    label="Beschrijving"
+                    type="textarea"
+                    :model-value="form.beschrijving"
+                    :error="form.errors.beschrijving"
+                    :required="true"
+                    placeholder="Omschrijf het commitment..."
+                    @update:model-value="form.beschrijving = $event"
+                />
+
+                <FormInput
+                    label="Eigenaar"
+                    type="select"
+                    :model-value="form.eigenaar_id"
+                    :options="userOptions"
+                    :error="form.errors.eigenaar_id"
+                    @update:model-value="form.eigenaar_id = $event"
+                />
+
+                <FormInput
+                    label="Deadline"
+                    type="date"
+                    :model-value="form.deadline"
+                    :error="form.errors.deadline"
+                    :required="true"
+                    @update:model-value="form.deadline = $event"
+                />
+
+                <FormInput
+                    label="Prioriteit"
+                    type="select"
+                    :model-value="form.prioriteit"
+                    :options="prioriteitOptions"
+                    :error="form.errors.prioriteit"
+                    @update:model-value="form.prioriteit = $event"
+                />
+            </div>
+
+            <div class="form-actions">
+                <button type="button" class="btn-cancel" @click="handleClose">
+                    [ANNULEER]
+                </button>
+                <button
+                    type="submit"
+                    class="btn-submit"
+                    :disabled="form.processing"
+                >
+                    <span v-if="form.processing">VERWERKEN...</span>
+                    <span v-else>{{ isEditing ? '[OPSLAAN]' : '[AANMAKEN]' }}</span>
+                </button>
+            </div>
+        </form>
+    </Modal>
+</template>
+
+<style scoped>
+.commitment-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.form-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(0, 210, 255, 0.12);
+}
+
+.btn-cancel,
+.btn-submit {
+    font-family: 'VT323', monospace;
+    font-size: 16px;
+    border-radius: 4px;
+    padding: 8px 16px;
+    cursor: pointer;
+    transition: all 0.15s;
+    letter-spacing: 0.5px;
+}
+
+.btn-cancel {
+    background: transparent;
+    border: 1px solid rgba(136, 146, 176, 0.4);
+    color: #8892b0;
+}
+
+.btn-cancel:hover {
+    border-color: #e94560;
+    color: #e94560;
+    text-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
+}
+
+.btn-submit {
+    background: rgba(0, 210, 255, 0.1);
+    border: 1px solid #00d2ff;
+    color: #00d2ff;
+}
+
+.btn-submit:hover:not(:disabled) {
+    background: rgba(0, 210, 255, 0.2);
+    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
+    text-shadow: 0 0 8px rgba(0, 210, 255, 0.5);
+}
+
+.btn-submit:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+</style>
diff --git a/resources/js/Components/Forms/FormInput.vue b/resources/js/Components/Forms/FormInput.vue
new file mode 100644
index 0000000..08316cc
--- /dev/null
+++ b/resources/js/Components/Forms/FormInput.vue
@@ -0,0 +1,160 @@
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+    label: { type: String, default: '' },
+    modelValue: { type: [String, Number], default: '' },
+    type: { type: String, default: 'text' },
+    error: { type: String, default: '' },
+    options: { type: Array, default: () => [] },
+    required: { type: Boolean, default: false },
+    placeholder: { type: String, default: '' },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const textareaRef = ref(null)
+
+const autoResize = () => {
+    if (!textareaRef.value) return
+    textareaRef.value.style.height = 'auto'
+    textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
+}
+
+watch(() => props.modelValue, () => {
+    if (props.type === 'textarea') {
+        autoResize()
+    }
+})
+</script>
+
+<template>
+    <div class="form-field">
+        <label v-if="label" class="field-label">
+            {{ label }}<span v-if="required" class="required-star"> *</span>
+        </label>
+
+        <textarea
+            v-if="type === 'textarea'"
+            ref="textareaRef"
+            :value="modelValue"
+            :placeholder="placeholder"
+            :required="required"
+            class="field-input field-textarea"
+            :class="{ 'field-error': error }"
+            rows="3"
+            @input="emit('update:modelValue', $event.target.value); autoResize()"
+        />
+
+        <select
+            v-else-if="type === 'select'"
+            :value="modelValue"
+            :required="required"
+            class="field-input field-select"
+            :class="{ 'field-error': error }"
+            @change="emit('update:modelValue', $event.target.value)"
+        >
+            <option value="">-- selecteer --</option>
+            <option
+                v-for="opt in options"
+                :key="opt.value ?? opt"
+                :value="opt.value ?? opt"
+            >
+                {{ opt.label ?? opt }}
+            </option>
+        </select>
+
+        <input
+            v-else
+            :type="type"
+            :value="modelValue"
+            :placeholder="placeholder"
+            :required="required"
+            class="field-input"
+            :class="{ 'field-error': error }"
+            @input="emit('update:modelValue', $event.target.value)"
+        />
+
+        <p v-if="error" class="field-error-msg">{{ error }}</p>
+    </div>
+</template>
+
+<style scoped>
+.form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.field-label {
+    font-family: 'VT323', monospace;
+    font-size: 16px;
+    color: #8892b0;
+    letter-spacing: 0.5px;
+}
+
+.required-star {
+    color: #e94560;
+}
+
+.field-input {
+    background: #0f1b35;
+    border: 1px solid rgba(0, 210, 255, 0.35);
+    border-radius: 4px;
+    color: #e8e8e8;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 13px;
+    padding: 8px 12px;
+    outline: none;
+    transition: border-color 0.15s, box-shadow 0.15s;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.field-input:focus {
+    border-color: #00d2ff;
+    box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.12), 0 0 12px rgba(0, 210, 255, 0.1);
+}
+
+.field-input.field-error {
+    border-color: rgba(233, 69, 96, 0.6);
+}
+
+.field-input.field-error:focus {
+    box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.12);
+}
+
+.field-textarea {
+    resize: none;
+    overflow: hidden;
+    min-height: 72px;
+    line-height: 1.5;
+}
+
+.field-select {
+    appearance: none;
+    cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300d2ff' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    padding-right: 36px;
+}
+
+.field-select option {
+    background: #16213e;
+    color: #e8e8e8;
+}
+
+/* Date input calendar icon color */
+.field-input[type='date']::-webkit-calendar-picker-indicator {
+    filter: invert(0.6) sepia(1) saturate(5) hue-rotate(160deg);
+    cursor: pointer;
+}
+
+.field-error-msg {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 11px;
+    color: #e94560;
+    margin: 0;
+}
+</style>
diff --git a/resources/js/Components/Forms/ProjectForm.vue b/resources/js/Components/Forms/ProjectForm.vue
new file mode 100644
index 0000000..bd5e7f2
--- /dev/null
+++ b/resources/js/Components/Forms/ProjectForm.vue
@@ -0,0 +1,216 @@
+<script setup>
+import { watch } from 'vue'
+import { useForm } from '@inertiajs/vue3'
+import Modal from '../Modal.vue'
+import FormInput from './FormInput.vue'
+
+const props = defineProps({
+    project: { type: Object, default: null },
+    speerpunten: { type: Array, default: () => [] },
+    show: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['close'])
+
+const isEditing = !!props.project
+
+const form = useForm({
+    naam: props.project?.naam ?? '',
+    beschrijving: props.project?.beschrijving ?? '',
+    speerpunt_id: props.project?.speerpunt_id ?? '',
+    prioriteit: props.project?.prioriteit ?? '',
+    startdatum: props.project?.startdatum ?? '',
+    streef_einddatum: props.project?.streef_einddatum ?? '',
+})
+
+// Reset form when show changes to true and project changes
+watch(() => props.show, (val) => {
+    if (val) {
+        form.naam = props.project?.naam ?? ''
+        form.beschrijving = props.project?.beschrijving ?? ''
+        form.speerpunt_id = props.project?.speerpunt_id ?? ''
+        form.prioriteit = props.project?.prioriteit ?? ''
+        form.startdatum = props.project?.startdatum ?? ''
+        form.streef_einddatum = props.project?.streef_einddatum ?? ''
+        form.clearErrors()
+    }
+})
+
+const speerpuntOptions = props.speerpunten.map(s => ({
+    value: s.id,
+    label: s.naam ?? s.name ?? s.id,
+}))
+
+const prioriteitOptions = [
+    { value: 'laag', label: 'Laag' },
+    { value: 'midden', label: 'Midden' },
+    { value: 'hoog', label: 'Hoog' },
+]
+
+const handleSubmit = () => {
+    if (isEditing) {
+        form.put(`/projects/${props.project.id}`, {
+            onSuccess: () => emit('close'),
+        })
+    } else {
+        form.post('/projects', {
+            onSuccess: () => emit('close'),
+        })
+    }
+}
+
+const handleClose = () => {
+    form.reset()
+    form.clearErrors()
+    emit('close')
+}
+</script>
+
+<template>
+    <Modal
+        :show="show"
+        :title="isEditing ? 'PROJECT BEWERKEN' : 'NIEUW PROJECT'"
+        max-width="560px"
+        @close="handleClose"
+    >
+        <form class="project-form" @submit.prevent="handleSubmit">
+            <div class="form-grid">
+                <FormInput
+                    label="Naam"
+                    :model-value="form.naam"
+                    :error="form.errors.naam"
+                    :required="true"
+                    placeholder="Project naam..."
+                    @update:model-value="form.naam = $event"
+                />
+
+                <FormInput
+                    label="Beschrijving"
+                    type="textarea"
+                    :model-value="form.beschrijving"
+                    :error="form.errors.beschrijving"
+                    placeholder="Omschrijf het project..."
+                    @update:model-value="form.beschrijving = $event"
+                />
+
+                <FormInput
+                    label="Speerpunt"
+                    type="select"
+                    :model-value="form.speerpunt_id"
+                    :options="speerpuntOptions"
+                    :error="form.errors.speerpunt_id"
+                    @update:model-value="form.speerpunt_id = $event"
+                />
+
+                <FormInput
+                    label="Prioriteit"
+                    type="select"
+                    :model-value="form.prioriteit"
+                    :options="prioriteitOptions"
+                    :error="form.errors.prioriteit"
+                    @update:model-value="form.prioriteit = $event"
+                />
+
+                <div class="form-row">
+                    <FormInput
+                        label="Startdatum"
+                        type="date"
+                        :model-value="form.startdatum"
+                        :error="form.errors.startdatum"
+                        @update:model-value="form.startdatum = $event"
+                    />
+                    <FormInput
+                        label="Streef einddatum"
+                        type="date"
+                        :model-value="form.streef_einddatum"
+                        :error="form.errors.streef_einddatum"
+                        @update:model-value="form.streef_einddatum = $event"
+                    />
+                </div>
+            </div>
+
+            <div class="form-actions">
+                <button type="button" class="btn-cancel" @click="handleClose">
+                    [ANNULEER]
+                </button>
+                <button
+                    type="submit"
+                    class="btn-submit"
+                    :disabled="form.processing"
+                >
+                    <span v-if="form.processing">VERWERKEN...</span>
+                    <span v-else>{{ isEditing ? '[OPSLAAN]' : '[AANMAKEN]' }}</span>
+                </button>
+            </div>
+        </form>
+    </Modal>
+</template>
+
+<style scoped>
+.project-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.form-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+}
+
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(0, 210, 255, 0.12);
+}
+
+.btn-cancel,
+.btn-submit {
+    font-family: 'VT323', monospace;
+    font-size: 16px;
+    border-radius: 4px;
+    padding: 8px 16px;
+    cursor: pointer;
+    transition: all 0.15s;
+    letter-spacing: 0.5px;
+}
+
+.btn-cancel {
+    background: transparent;
+    border: 1px solid rgba(136, 146, 176, 0.4);
+    color: #8892b0;
+}
+
+.btn-cancel:hover {
+    border-color: #e94560;
+    color: #e94560;
+    text-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
+}
+
+.btn-submit {
+    background: rgba(0, 210, 255, 0.1);
+    border: 1px solid #00d2ff;
+    color: #00d2ff;
+}
+
+.btn-submit:hover:not(:disabled) {
+    background: rgba(0, 210, 255, 0.2);
+    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
+    text-shadow: 0 0 8px rgba(0, 210, 255, 0.5);
+}
+
+.btn-submit:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+</style>
diff --git a/resources/js/Components/MetroMap/FloatingActions.vue b/resources/js/Components/MetroMap/FloatingActions.vue
new file mode 100644
index 0000000..410e55f
--- /dev/null
+++ b/resources/js/Components/MetroMap/FloatingActions.vue
@@ -0,0 +1,161 @@
+<script setup>
+import { ref } from 'vue'
+
+const emit = defineEmits(['create-project', 'create-theme'])
+
+const menuOpen = ref(false)
+
+const toggle = () => {
+    menuOpen.value = !menuOpen.value
+}
+
+const handleCreateProject = () => {
+    menuOpen.value = false
+    emit('create-project')
+}
+
+const handleCreateTheme = () => {
+    menuOpen.value = false
+    emit('create-theme')
+}
+</script>
+
+<template>
+    <div class="fab-container">
+        <!-- Expanded menu -->
+        <Transition name="fab-menu">
+            <div v-if="menuOpen" class="fab-menu">
+                <button class="fab-menu-item" @click="handleCreateProject">
+                    <span class="fab-menu-icon">+</span>
+                    <span class="fab-menu-label">Nieuw project</span>
+                </button>
+                <button class="fab-menu-item" @click="handleCreateTheme">
+                    <span class="fab-menu-icon">+</span>
+                    <span class="fab-menu-label">Nieuw thema</span>
+                </button>
+            </div>
+        </Transition>
+
+        <!-- Main FAB button -->
+        <button
+            class="fab-btn"
+            :class="{ 'fab-btn--open': menuOpen }"
+            :title="menuOpen ? 'Sluiten' : 'Nieuw aanmaken'"
+            @click="toggle"
+        >
+            <span class="fab-icon">{{ menuOpen ? '[X]' : '[+]' }}</span>
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.fab-container {
+    position: fixed;
+    bottom: 64px; /* above the CLI bar */
+    right: 20px;
+    z-index: 150;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 8px;
+}
+
+.fab-btn {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: #0f3460;
+    border: 2px solid #00d2ff;
+    color: #00d2ff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow:
+        0 0 12px rgba(0, 210, 255, 0.35),
+        0 0 24px rgba(0, 210, 255, 0.15);
+    transition: all 0.2s ease;
+}
+
+.fab-btn:hover {
+    background: rgba(0, 210, 255, 0.15);
+    box-shadow:
+        0 0 20px rgba(0, 210, 255, 0.5),
+        0 0 40px rgba(0, 210, 255, 0.2);
+    transform: scale(1.08);
+}
+
+.fab-btn--open {
+    border-color: #e94560;
+    color: #e94560;
+    box-shadow:
+        0 0 12px rgba(233, 69, 96, 0.35),
+        0 0 24px rgba(233, 69, 96, 0.15);
+}
+
+.fab-btn--open:hover {
+    box-shadow:
+        0 0 20px rgba(233, 69, 96, 0.5),
+        0 0 40px rgba(233, 69, 96, 0.2);
+}
+
+.fab-icon {
+    font-family: 'VT323', monospace;
+    font-size: 18px;
+    line-height: 1;
+    text-shadow: 0 0 8px currentColor;
+}
+
+.fab-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-items: flex-end;
+}
+
+.fab-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #16213e;
+    border: 1px solid rgba(0, 210, 255, 0.4);
+    border-radius: 4px;
+    padding: 8px 14px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.15s;
+    box-shadow: 0 0 10px rgba(0, 210, 255, 0.1);
+}
+
+.fab-menu-item:hover {
+    background: rgba(0, 210, 255, 0.1);
+    border-color: #00d2ff;
+    box-shadow: 0 0 16px rgba(0, 210, 255, 0.25);
+}
+
+.fab-menu-icon {
+    font-family: 'VT323', monospace;
+    font-size: 16px;
+    color: #00d2ff;
+    text-shadow: 0 0 6px rgba(0, 210, 255, 0.5);
+}
+
+.fab-menu-label {
+    font-family: 'VT323', monospace;
+    font-size: 16px;
+    color: #e8e8e8;
+    letter-spacing: 0.5px;
+}
+
+/* Menu transition */
+.fab-menu-enter-active,
+.fab-menu-leave-active {
+    transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.fab-menu-enter-from,
+.fab-menu-leave-to {
+    opacity: 0;
+    transform: translateY(8px) scale(0.97);
+}
+</style>
diff --git a/resources/js/Components/Modal.vue b/resources/js/Components/Modal.vue
new file mode 100644
index 0000000..545ae4a
--- /dev/null
+++ b/resources/js/Components/Modal.vue
@@ -0,0 +1,114 @@
+<script setup>
+defineProps({
+    show: { type: Boolean, default: false },
+    title: { type: String, default: '' },
+    maxWidth: { type: String, default: '500px' },
+})
+
+const emit = defineEmits(['close'])
+</script>
+
+<template>
+    <Teleport to="body">
+        <Transition name="modal">
+            <div v-if="show" class="modal-backdrop" @click.self="emit('close')">
+                <div class="modal-panel" :style="{ maxWidth }">
+                    <div class="modal-header">
+                        <h2 class="modal-title">{{ title }}</h2>
+                        <button class="modal-close" @click="emit('close')">[X]</button>
+                    </div>
+                    <div class="modal-body">
+                        <slot />
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<style scoped>
+.modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(10, 10, 26, 0.85);
+    backdrop-filter: blur(4px);
+}
+
+.modal-panel {
+    width: 100%;
+    margin: 16px;
+    background: #16213e;
+    border: 1px solid #00d2ff;
+    border-radius: 6px;
+    box-shadow:
+        0 0 0 1px rgba(0, 210, 255, 0.15),
+        0 0 30px rgba(0, 210, 255, 0.2),
+        0 0 60px rgba(0, 210, 255, 0.08);
+    overflow: hidden;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid rgba(0, 210, 255, 0.2);
+    background: rgba(0, 210, 255, 0.04);
+}
+
+.modal-title {
+    font-family: 'VT323', monospace;
+    font-size: 24px;
+    color: #00d2ff;
+    margin: 0;
+    text-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
+    letter-spacing: 1px;
+}
+
+.modal-close {
+    font-family: 'VT323', monospace;
+    font-size: 18px;
+    color: #8892b0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0 4px;
+    line-height: 1;
+    transition: color 0.15s;
+}
+
+.modal-close:hover {
+    color: #e94560;
+    text-shadow: 0 0 8px rgba(233, 69, 96, 0.5);
+}
+
+.modal-body {
+    padding: 20px;
+}
+
+/* Transition */
+.modal-enter-active,
+.modal-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.modal-enter-active .modal-panel,
+.modal-leave-active .modal-panel {
+    transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+    opacity: 0;
+}
+
+.modal-enter-from .modal-panel,
+.modal-leave-to .modal-panel {
+    opacity: 0;
+    transform: scale(0.95);
+}
+</style>
diff --git a/resources/js/Pages/Map/MetroMap.vue b/resources/js/Pages/Map/MetroMap.vue
index b352c58..cd74cc2 100644
--- a/resources/js/Pages/Map/MetroMap.vue
+++ b/resources/js/Pages/Map/MetroMap.vue
@@ -4,51 +4,33 @@ import { usePage, router } from '@inertiajs/vue3'
 import MetroCanvas from '@/Components/MetroMap/MetroCanvas.vue'
 import Breadcrumb from '@/Components/MetroMap/Breadcrumb.vue'
 import NodePreview from '@/Components/MetroMap/NodePreview.vue'
+import FloatingActions from '@/Components/MetroMap/FloatingActions.vue'
+import ProjectForm from '@/Components/Forms/ProjectForm.vue'
+import CommitmentForm from '@/Components/Forms/CommitmentForm.vue'
 import CliBar from '@/Components/Cli/CliBar.vue'
 
 const page = usePage()
 
+const props = defineProps({
+    mapData: { type: Object, default: () => ({ lines: [], nodes: [], connections: [], level: 1 }) },
+    users: { type: Array, default: () => [] },
+    speerpunten: { type: Array, default: () => [] },
+})
+
 // Navigation state
-const currentLevel = ref(1)
-const breadcrumbPath = ref([{ label: 'Strategie', level: 1, data: null }])
 const selectedNode = ref(null)
 const showPreview = ref(false)
 
-// Demo data for Level 1: Strategy map
-// Each theme is a metro line, projects are stations
-const demoLines = ref([
-    { id: 'water-quality', name: 'Waterkwaliteit', color: '#00d2ff' },
-    { id: 'smart-infra', name: 'Slimme Infrastructuur', color: '#e94560' },
-    { id: 'data-driven', name: 'Data-gedreven Beheer', color: '#00ff88' },
-    { id: 'sustainability', name: 'Duurzaamheid', color: '#7b68ee' },
-])
-
-const demoNodes = ref([
-    // Water Quality line — y spacing of 160px between lines for label clearance
-    { id: 'wq1', name: 'Smart Sensors', lineId: 'water-quality', x: -200, y: -240, order: 1, status: 'actief', description: 'Slimme sensoren voor waterkwaliteitsmonitoring', owner: 'Jan Visser', children: 5, badge: 'Experiment' },
-    { id: 'wq2', name: 'Biomonitoring', lineId: 'water-quality', x: 50, y: -240, order: 2, status: 'concept', description: 'Biologische monitoring methoden', owner: 'Sara Jansen', children: 3, badge: 'Concept' },
-    { id: 'wq3', name: 'Voorspelmodel', lineId: 'water-quality', x: 300, y: -240, order: 3, status: 'signaal', description: 'Predictief model waterkwaliteit', badge: 'Signaal' },
-
-    // Smart Infrastructure line
-    { id: 'si1', name: 'Edge Computing', lineId: 'smart-infra', x: -200, y: -80, order: 1, status: 'actief', description: 'Edge-layer evolutie voor OT-omgevingen', owner: 'Rene de Ren', children: 8, badge: 'Pilot' },
-    { id: 'si2', name: 'Digital Twin', lineId: 'smart-infra', x: 50, y: -80, order: 2, status: 'verkenning', description: 'Digitale tweeling van zuiveringsinstallaties', children: 2, badge: 'Verkenning' },
-    { id: 'si3', name: 'Predictive Maint.', lineId: 'smart-infra', x: 300, y: -80, order: 3, status: 'concept', description: 'Voorspellend onderhoud op basis van sensordata', badge: 'Concept' },
-
-    // Data-driven line
-    { id: 'dd1', name: 'Data Platform', lineId: 'data-driven', x: -200, y: 80, order: 1, status: 'afgerond', description: 'Centraal dataplatform voor operationele data', owner: 'Lisa de Boer', badge: 'Afgerond' },
-    { id: 'dd2', name: 'ML Pipeline', lineId: 'data-driven', x: 50, y: 80, order: 2, status: 'actief', description: 'Machine learning pipeline voor anomalie-detectie', owner: 'Tom Bakker', children: 4, badge: 'Experiment' },
-    { id: 'dd3', name: 'Dashboard Suite', lineId: 'data-driven', x: 300, y: 80, order: 3, status: 'overdracht_bouwen', description: 'Operationele dashboards voor beheerders', badge: 'Overdracht' },
-
-    // Sustainability line
-    { id: 'su1', name: 'Energietransitie', lineId: 'sustainability', x: -200, y: 240, order: 1, status: 'pilot', description: 'Energieneutraal zuiveren', owner: 'Mark de Vries', children: 6, badge: 'Pilot' },
-    { id: 'su2', name: 'Circulair Water', lineId: 'sustainability', x: 50, y: 240, order: 2, status: 'verkenning', description: 'Circulaire waterbehandeling', badge: 'Verkenning' },
-])
-
-const demoConnections = ref([
-    { from: 'wq1', to: 'dd2' }, // Smart sensors feeds ML Pipeline
-    { from: 'si1', to: 'dd1' }, // Edge computing depends on data platform
-    { from: 'dd2', to: 'si3' }, // ML pipeline enables predictive maintenance
-])
+// Reactive breadcrumb based on mapData level and project
+const breadcrumbPath = computed(() => {
+    const level = props.mapData.level ?? 1
+    const project = props.mapData.project ?? null
+    const path = [{ label: 'Strategie', level: 1, data: null }]
+    if (level === 2 && project) {
+        path.push({ label: project.name ?? project, level: 2, data: project })
+    }
+    return path
+})
 
 // Handlers
 const handleNodeClick = (node) => {
@@ -66,20 +48,17 @@ const handleNodeLeave = () => {
 
 const handleZoomIn = (node) => {
     showPreview.value = false
-    currentLevel.value++
-    breadcrumbPath.value.push({
-        label: node.name,
-        level: currentLevel.value,
-        data: node,
-    })
-    // In real app: load child nodes for this project
+    if (node.entityType === 'project') {
+        router.visit(`/map/project/${node.entityId}`)
+    }
 }
 
 const handleBreadcrumbNavigate = (item, index) => {
-    breadcrumbPath.value = breadcrumbPath.value.slice(0, index + 1)
-    currentLevel.value = item.level
     showPreview.value = false
     selectedNode.value = null
+    if (index === 0) {
+        router.visit('/map')
+    }
 }
 
 const handleCliCommand = (command) => {
@@ -92,6 +71,25 @@ const logout = () => {
 }
 
 const user = computed(() => page.props.auth?.user)
+
+const hasNodes = computed(() => props.mapData.nodes && props.mapData.nodes.length > 0)
+
+// Modal state
+const showProjectForm = ref(false)
+const showCommitmentForm = ref(false)
+const editingProject = ref(null)
+
+const handleCreateProject = () => {
+    editingProject.value = null
+    showProjectForm.value = true
+}
+
+const handleCreateCommitment = () => {
+    showCommitmentForm.value = true
+}
+
+// Get current project ID when at level 2
+const currentProjectId = computed(() => props.mapData.project?.id ?? null)
 </script>
 
 <template>
@@ -108,21 +106,47 @@ const user = computed(() => page.props.auth?.user)
             </div>
         </div>
 
-        <MetroCanvas
-            :nodes="demoNodes"
-            :lines="demoLines"
-            :connections="demoConnections"
-            :current-level="currentLevel"
-            @node-click="handleNodeClick"
-            @node-hover="handleNodeHover"
-            @node-leave="handleNodeLeave"
+        <template v-if="hasNodes">
+            <MetroCanvas
+                :nodes="props.mapData.nodes"
+                :lines="props.mapData.lines"
+                :connections="props.mapData.connections"
+                :current-level="props.mapData.level ?? 1"
+                @node-click="handleNodeClick"
+                @node-hover="handleNodeHover"
+                @node-leave="handleNodeLeave"
+            />
+
+            <NodePreview
+                :node="selectedNode"
+                :visible="showPreview"
+                @close="showPreview = false"
+                @zoom-in="handleZoomIn"
+            />
+        </template>
+
+        <div v-else class="empty-state">
+            <span class="empty-message">Nog geen projecten. Gebruik het + icoon om een thema toe te voegen.</span>
+        </div>
+
+        <FloatingActions
+            @create-project="handleCreateProject"
+            @create-theme="handleCreateProject"
         />
 
-        <NodePreview
-            :node="selectedNode"
-            :visible="showPreview"
-            @close="showPreview = false"
-            @zoom-in="handleZoomIn"
+        <ProjectForm
+            :show="showProjectForm"
+            :project="editingProject"
+            :speerpunten="speerpunten"
+            @close="showProjectForm = false"
+        />
+
+        <CommitmentForm
+            v-if="currentProjectId"
+            :show="showCommitmentForm"
+            :project-id="currentProjectId"
+            :users="users"
+            @close="showCommitmentForm = false"
         />
 
         <CliBar @command="handleCliCommand" />
@@ -182,4 +206,20 @@ const user = computed(() => page.props.auth?.user)
     border-color: #e94560;
     box-shadow: 0 0 10px rgba(233, 69, 96, 0.2);
 }
+
+.empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding-top: 48px; /* account for top-bar */
+}
+
+.empty-message {
+    font-family: 'VT323', monospace;
+    font-size: 20px;
+    color: #8892b0;
+    text-align: center;
+    opacity: 0.7;
+}
 </style>
diff --git a/routes/web.php b/routes/web.php
index 8be54df..cde38a2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,5 +1,7 @@
 <?php
 
+use App\Http\Controllers\CommitmentController;
+use App\Http\Controllers\DocumentController;
 use App\Http\Controllers\MapController;
 use App\Http\Controllers\ProjectController;
 use App\Http\Controllers\ThemaController;
@@ -34,6 +36,17 @@ Route::middleware(['auth', 'verified'])->group(function () {
     Route::post('/themas', [ThemaController::class, 'store'])->name('themas.store');
     Route::put('/themas/{thema}', [ThemaController::class, 'update'])->name('themas.update');
 
+    // Commitments
+    Route::post('/commitments', [CommitmentController::class, 'store'])->name('commitments.store');
+    Route::put('/commitments/{commitment}', [CommitmentController::class, 'update'])->name('commitments.update');
+    Route::post('/commitments/{commitment}/complete', [CommitmentController::class, 'complete'])->name('commitments.complete');
+    Route::delete('/commitments/{commitment}', [CommitmentController::class, 'destroy'])->name('commitments.destroy');
+
+    // Documents
+    Route::post('/documents', [DocumentController::class, 'store'])->name('documents.store');
+    Route::get('/documents/{document}/download', [DocumentController::class, 'download'])->name('documents.download');
+    Route::delete('/documents/{document}', [DocumentController::class, 'destroy'])->name('documents.destroy');
+
     // Dashboard (redirects to map)
     Route::get('/dashboard', fn () => redirect('/map'))->name('dashboard');
 });