Sprint 1: Auth, metro map canvas, services, and retro UI
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>
This commit is contained in:
51
resources/js/Components/MetroMap/Breadcrumb.vue
Normal file
51
resources/js/Components/MetroMap/Breadcrumb.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
path: { type: Array, default: () => [] },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['navigate'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="breadcrumb">
|
||||
<span
|
||||
v-for="(item, index) in path"
|
||||
:key="index"
|
||||
class="breadcrumb-item"
|
||||
:class="{ active: index === path.length - 1 }"
|
||||
@click="index < path.length - 1 && emit('navigate', item, index)"
|
||||
>
|
||||
<span v-if="index > 0" class="separator"> > </span>
|
||||
<span :class="{ 'cursor-pointer hover:text-[#00d2ff]': index < path.length - 1 }">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.breadcrumb {
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
z-index: 50;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
color: #8892b0;
|
||||
background: rgba(26, 26, 46, 0.85);
|
||||
padding: 6px 14px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(0, 210, 255, 0.15);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.breadcrumb-item.active {
|
||||
color: #00d2ff;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: #8892b0;
|
||||
opacity: 0.5;
|
||||
margin: 0 2px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user