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>

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>