feat(frontend): Dashboard + Orders UI + Vehicle Picker + Vehicles list

- Pinia stores: orders (CRUD, line management, totals recalc, stats) and vehicles (CRUD, search, marca/model cascade)
- useSync composable: auto-sync on window focus + periodic 60s interval
- VehiclePicker component: debounced autocomplete search by nr. inmatriculare or client name
- OrderLineForm component: manopera/material toggle with live total preview
- DashboardView: stats cards (orders, vehicles, revenue), recent orders list
- OrdersListView: filterable table (all/draft/validat/facturat), clickable rows
- OrderCreateView: vehicle picker + inline new vehicle form, tip deviz select, km/observatii
- OrderDetailView: order info, lines table with add/remove, totals, validate action
- VehiclesListView: searchable table, inline create form with marca/model cascade
- AppLayout: mobile hamburger menu with slide-in sidebar overlay

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-13 17:29:02 +02:00
parent 907b7be0fd
commit ad41956ea1
11 changed files with 1236 additions and 15 deletions

View File

@@ -1,10 +1,23 @@
<template>
<div class="min-h-screen bg-gray-50">
<!-- Desktop sidebar -->
<aside class="hidden md:fixed md:inset-y-0 md:flex md:w-56 md:flex-col">
<!-- Mobile sidebar overlay -->
<div
v-if="mobileMenuOpen"
class="md:hidden fixed inset-0 z-40 bg-black/50"
@click="mobileMenuOpen = false"
/>
<!-- Sidebar (desktop always visible, mobile slide-in) -->
<aside
class="fixed inset-y-0 z-50 flex w-56 flex-col transition-transform md:translate-x-0"
:class="mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'"
>
<div class="flex flex-col flex-grow bg-gray-900 overflow-y-auto">
<div class="px-4 py-5">
<div class="px-4 py-5 flex items-center justify-between">
<h1 class="text-xl font-bold text-white">ROA AUTO</h1>
<button @click="mobileMenuOpen = false" class="md:hidden text-gray-400 hover:text-white">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<nav class="flex-1 px-2 space-y-1">
<router-link
@@ -13,11 +26,13 @@
:to="item.path"
class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-800 hover:text-white"
active-class="!bg-gray-800 !text-white"
@click="mobileMenuOpen = false"
>
{{ item.label }}
</router-link>
</nav>
<div class="px-4 py-3 border-t border-gray-700">
<div class="text-xs text-gray-400 mb-1">{{ auth.plan }} plan</div>
<SyncIndicator />
<button
@click="logout"
@@ -33,16 +48,19 @@
<div class="md:pl-56">
<!-- Mobile header -->
<header class="md:hidden bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between">
<button @click="mobileMenuOpen = true" class="text-gray-600 hover:text-gray-900">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
<h1 class="text-lg font-bold text-gray-900">ROA AUTO</h1>
<SyncIndicator />
</header>
<main class="p-4 md:p-6">
<main class="p-4 md:p-6 pb-20 md:pb-6">
<slot />
</main>
<!-- Mobile bottom nav -->
<nav class="md:hidden fixed bottom-0 inset-x-0 bg-white border-t border-gray-200 flex">
<nav class="md:hidden fixed bottom-0 inset-x-0 bg-white border-t border-gray-200 flex z-30">
<router-link
v-for="item in mobileNavItems"
:key="item.path"
@@ -58,12 +76,14 @@
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth.js'
import SyncIndicator from '../components/common/SyncIndicator.vue'
const router = useRouter()
const auth = useAuthStore()
const mobileMenuOpen = ref(false)
const navItems = [
{ path: '/dashboard', label: 'Dashboard' },