d03fe15542
Authentication: - Laravel Fortify + Sanctum with Inertia views - RBAC middleware (admin, project_owner, team_member, viewer) - Retro terminal-styled login/register/forgot-password pages Metro Map (core UI): - D3.js zoomable SVG canvas with metro line rendering - Station nodes with glow-on-hover, status coloring, tooltips - Breadcrumb navigation for multi-level drill-down - Node preview panel with zoom-in action - C64-style CLI bar with blinking cursor at bottom Backend services: - ProjectService (CRUD, phase transitions, park/stop, audit logging) - ThemaService (CRUD with audit) - MapDataService (strategy map L1, project map L2) - Thin controllers: MapController, ProjectController, ThemaController - 32 routes total (auth + app + API) Style foundation: - Retro-futurism theme: VT323, Press Start 2P, IBM Plex Mono fonts - Dark palette with cyan/orange/green/purple neon accents - Comprehensive seed data (4 themes, 12 projects, commitments, deps) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
91 lines
1.9 KiB
Vue
91 lines
1.9 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { router, usePage } from '@inertiajs/vue3'
|
|
import CliBar from '@/Components/Cli/CliBar.vue'
|
|
|
|
const page = usePage()
|
|
const user = page.props.auth?.user
|
|
|
|
// Redirect to map (the map IS the dashboard)
|
|
const goToMap = () => router.visit('/map')
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dashboard">
|
|
<div class="welcome">
|
|
<h1 class="title">INNOVATIEPLATFORM</h1>
|
|
<p class="subtitle">R&D Lab — Waterschap Brabantse Delta</p>
|
|
|
|
<div class="user-greeting" v-if="user">
|
|
<span class="greeting-text">Welkom, {{ user.name }}</span>
|
|
</div>
|
|
|
|
<button @click="goToMap" class="enter-btn">
|
|
OPEN METRO MAP >>
|
|
</button>
|
|
</div>
|
|
|
|
<CliBar />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dashboard {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #1a1a2e;
|
|
position: relative;
|
|
}
|
|
|
|
.welcome {
|
|
text-align: center;
|
|
}
|
|
|
|
.title {
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 24px;
|
|
color: #00d2ff;
|
|
text-shadow: 0 0 30px rgba(0, 210, 255, 0.4);
|
|
letter-spacing: 4px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-family: 'VT323', monospace;
|
|
font-size: 20px;
|
|
color: #8892b0;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.user-greeting {
|
|
margin-top: 32px;
|
|
}
|
|
|
|
.greeting-text {
|
|
font-family: 'VT323', monospace;
|
|
font-size: 18px;
|
|
color: #00ff88;
|
|
}
|
|
|
|
.enter-btn {
|
|
margin-top: 40px;
|
|
padding: 14px 32px;
|
|
background: rgba(0, 210, 255, 0.1);
|
|
border: 2px solid #00d2ff;
|
|
color: #00d2ff;
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
letter-spacing: 2px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.enter-btn:hover {
|
|
background: rgba(0, 210, 255, 0.2);
|
|
box-shadow: 0 0 30px rgba(0, 210, 255, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
</style>
|