249 lines
16 KiB
Vue
249 lines
16 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
import { Link, usePage } from '@inertiajs/vue3'
|
|
import FlashMessage from '@/Components/FlashMessage.vue'
|
|
|
|
const page = usePage()
|
|
const user = computed(() => page.props.auth.user)
|
|
|
|
const userInitials = computed(() => {
|
|
return user.value?.name
|
|
?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2) ?? '??'
|
|
})
|
|
|
|
const roleLabels = { admin: 'Administrateur', responsable: 'Responsable', acheteur: 'Acheteur', lecteur: 'Lecteur' }
|
|
const userRole = computed(() => {
|
|
const role = user.value?.roles?.[0]?.name
|
|
return roleLabels[role] ?? role ?? ''
|
|
})
|
|
|
|
const isAdmin = computed(() => user.value?.roles?.some(r => r.name === 'admin'))
|
|
const canCreate = computed(() => user.value?.roles?.some(r => ['admin', 'responsable', 'acheteur'].includes(r.name)))
|
|
|
|
function isActive(...names) {
|
|
return names.some(name => route().current(name + '*'))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex h-screen bg-gray-100 overflow-hidden">
|
|
<!-- Sidebar -->
|
|
<aside class="flex h-full w-64 flex-shrink-0 flex-col bg-gray-900 text-white shadow-xl">
|
|
<!-- Logo -->
|
|
<div class="flex items-center gap-3 border-b border-gray-700 px-6 py-5">
|
|
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600">
|
|
<svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-lg font-bold">DSI COMMANDER</span>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="flex-1 overflow-y-auto px-3 py-4 space-y-6">
|
|
<!-- Dashboard -->
|
|
<div>
|
|
<Link :href="route('dashboard')"
|
|
:class="['flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
route().current('dashboard') ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white']">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
|
</svg>
|
|
Tableau de bord
|
|
</Link>
|
|
</div>
|
|
|
|
<!-- Commandes -->
|
|
<div>
|
|
<p class="mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Commandes</p>
|
|
<div class="space-y-1">
|
|
<Link :href="route('commandes.index')"
|
|
:class="['flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive('commandes') ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white']">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
|
</svg>
|
|
Toutes les commandes
|
|
</Link>
|
|
<Link v-if="canCreate" :href="route('commandes.create')"
|
|
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-800 hover:text-white transition-colors">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Nouvelle commande
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contrats -->
|
|
<div>
|
|
<p class="mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Contrats</p>
|
|
<div class="space-y-1">
|
|
<Link :href="route('contrats.index')"
|
|
:class="['flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive('contrats') ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white']">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Tous les contrats
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Domaines -->
|
|
<div>
|
|
<p class="mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Infrastructures</p>
|
|
<div class="space-y-1">
|
|
<Link :href="route('domaines.index')"
|
|
:class="['flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive('domaines') ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white']">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
|
</svg>
|
|
Noms de domaine
|
|
</Link>
|
|
<Link :href="route('assets.index')"
|
|
:class="['flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive('assets') ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white']">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
|
|
</svg>
|
|
Assets (Matériels)
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Catalogue -->
|
|
<div>
|
|
<p class="mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Catalogue</p>
|
|
<div class="space-y-1">
|
|
<Link :href="route('fournisseurs.index')"
|
|
:class="['flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive('fournisseurs') ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white']">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
Fournisseurs
|
|
</Link>
|
|
<Link :href="route('categories.index')"
|
|
:class="['flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive('categories') ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white']">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
|
</svg>
|
|
Catégories
|
|
</Link>
|
|
<Link :href="route('articles.index')"
|
|
:class="['flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive('articles') ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white']">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
</svg>
|
|
Articles
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Administration -->
|
|
<div v-if="isAdmin">
|
|
<p class="mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Administration</p>
|
|
<div class="space-y-1">
|
|
<Link :href="route('users.index')"
|
|
:class="['flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive('users') ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white']">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
Utilisateurs
|
|
</Link>
|
|
<Link :href="route('services.index')"
|
|
:class="['flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive('services') ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white']">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
|
|
</svg>
|
|
Services
|
|
</Link>
|
|
<Link :href="route('licences.index')"
|
|
:class="['flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive('licences') ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white']">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
|
</svg>
|
|
Licences
|
|
</Link>
|
|
<Link :href="route('calendar.index')"
|
|
:class="['flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive('calendar') ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white']">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
Calendrier
|
|
</Link>
|
|
<Link :href="route('communes.index')"
|
|
:class="['flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive('communes') ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white']">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
Communes
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- User info -->
|
|
<div class="border-t border-gray-700 p-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-sm font-semibold">
|
|
{{ userInitials }}
|
|
</div>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="truncate text-sm font-medium">{{ user?.name }}</p>
|
|
<p class="truncate text-xs text-gray-400">{{ userRole }}</p>
|
|
</div>
|
|
<Link :href="route('logout')" method="post" as="button"
|
|
class="flex-shrink-0 text-gray-400 hover:text-white transition-colors" title="Déconnexion">
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
<Link :href="route('profile.edit')" class="mt-2 block text-xs text-gray-400 hover:text-white transition-colors">
|
|
Mon profil
|
|
</Link>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main content -->
|
|
<div class="flex flex-1 flex-col overflow-hidden">
|
|
<!-- Page header -->
|
|
<header v-if="$slots.header" class="bg-white shadow-sm z-10">
|
|
<div class="px-6 py-4">
|
|
<slot name="header" />
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Flash messages -->
|
|
<FlashMessage />
|
|
|
|
<!-- Page content -->
|
|
<main class="flex-1 overflow-y-auto p-6">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|