MALIO-DEV/Inventory_frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui) : improve styling, layout and responsive across all components

Browse Source 
Rework CSS theme (app.css), navbar layout, dashboard page, machine detail,
catalog pages, and various form/display components for better consistency
and mobile responsiveness.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
THOLOT DECHENE Matthieu
2026-03-09 00:14:32 +01:00
parent 6b5eb7bcd6
commit 5b9c4ca09d
38 changed files with 522 additions and 569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/app.vue
View File

@@ -1,11 +1,16 @@
<template> <template>
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100"> <div class="min-h-screen flex flex-col bg-base-200/40">
<!-- Subtle dot pattern background -->
<div class="fixed inset-0 -z-10 bg-[radial-gradient(oklch(85%_0.02_260)_1px,transparent_1px)] bg-[size:24px_24px] opacity-40" />
<AppNavbar <AppNavbar
@open-settings="displaySettingsOpen = true" @open-settings="displaySettingsOpen = true"
@logout="handleLogout" @logout="handleLogout"
/> />
<NuxtPage /> <main class="flex-1">
<NuxtPage :transition="{ name: 'page', mode: 'out-in' }" />
</main>
<ToastContainer /> <ToastContainer />
@@ -17,11 +22,17 @@
@update-settings="handleSettingsUpdate" @update-settings="handleSettingsUpdate"
/> />
<footer class="footer p-4 bg-neutral text-neutral-content"> <footer class="border-t border-base-300/50 bg-base-100/60 backdrop-blur-sm">
<div class="items-center grid-flow-col"> <div class="container mx-auto flex items-center justify-between px-6 py-3">
<p> <p class="text-xs text-base-content/40 font-medium tracking-wide">
@Malio 2025 · <NuxtLink to="/changelog" class="link link-hover">v{{ appVersion }}</NuxtLink> &copy; Malio {{ new Date().getFullYear() }}
</p> </p>
<NuxtLink
to="/changelog"
class="text-xs text-base-content/40 hover:text-primary transition-colors font-medium"
>
v{{ appVersion }}
</NuxtLink>
</div> </div>
</footer> </footer>
</div> </div>

446
app/assets/app.css
View File

@@ -1,55 +1,85 @@
/* ─── Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');
@import "tailwindcss"; @import "tailwindcss";
@plugin "daisyui"; @plugin "daisyui";
/* ─── Theme ─── */
@plugin "daisyui/theme" { @plugin "daisyui/theme" {
name: "mytheme"; name: "mytheme";
default: true; /* set as default */ default: true;
prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */ prefersdark: false;
color-scheme: light; /* color of browser-provided UI */ color-scheme: light;
/* #FBFAFA — gris clair */ /* Surfaces — warm gray with a hint of blue */
--color-base-100: oklch(98% 0.003 0); --color-base-100: oklch(98.5% 0.004 260);
--color-base-200: oklch(94% 0.01 262); --color-base-200: oklch(95% 0.008 260);
--color-base-300: oklch(90% 0.02 262); --color-base-300: oklch(91% 0.015 260);
--color-base-content: oklch(20% 0.03 262); --color-base-content: oklch(22% 0.025 260);
/* #304998 — bleu Malio */
--color-primary: oklch(37% 0.15 262); /* Primary — Malio blue, slightly richer */
--color-primary: oklch(40% 0.16 262);
--color-primary-content: oklch(98% 0.005 262); --color-primary-content: oklch(98% 0.005 262);
/* #A5ACD0 — lavande */
--color-secondary: oklch(75% 0.055 270); /* Secondary — refined lavender */
--color-secondary-content: oklch(20% 0.03 270); --color-secondary: oklch(72% 0.06 275);
/* #ED8521 — orange */ --color-secondary-content: oklch(22% 0.03 275);
--color-accent: oklch(71% 0.17 58);
--color-accent-content: oklch(98% 0.005 58); /* Accent — warm amber-orange */
/* neutral dérivé du bleu Malio */ --color-accent: oklch(72% 0.17 55);
--color-neutral: oklch(37% 0.08 262); --color-accent-content: oklch(20% 0.04 55);
--color-neutral-content: oklch(98% 0.005 262);
--color-info: oklch(55% 0.12 262); /* Neutral — deep slate */
--color-info-content: oklch(98% 0.005 262); --color-neutral: oklch(28% 0.04 260);
--color-success: oklch(65% 0.2 145); --color-neutral-content: oklch(95% 0.005 260);
--color-success-content: oklch(98% 0.005 145);
/* Semantic */
--color-info: oklch(58% 0.14 255);
--color-info-content: oklch(98% 0.005 255);
--color-success: oklch(62% 0.19 150);
--color-success-content: oklch(98% 0.005 150);
--color-warning: oklch(78% 0.15 70); --color-warning: oklch(78% 0.15 70);
--color-warning-content: oklch(20% 0.05 70); --color-warning-content: oklch(22% 0.05 70);
--color-error: oklch(60% 0.25 25); --color-error: oklch(58% 0.22 25);
--color-error-content: oklch(98% 0.005 25); --color-error-content: oklch(98% 0.005 25);
/* border radius */ /* Geometry */
--radius-selector: 1rem; --radius-selector: 0.75rem;
--radius-field: 0.25rem; --radius-field: 0.375rem;
--radius-box: 0.5rem; --radius-box: 0.625rem;
/* base sizes */
--size-selector: 0.25rem; --size-selector: 0.25rem;
--size-field: 0.25rem; --size-field: 0.25rem;
/* border size */
--border: 1px; --border: 1px;
/* effects */
--depth: 1; --depth: 1;
--noise: 0; --noise: 0;
} }
/* Styles pour l'accessibilité et les paramètres d'affichage */ /* ─── Typography ─── */
:root {
--font-heading: 'Outfit', system-ui, sans-serif;
--font-body: 'DM Sans', system-ui, sans-serif;
}
body {
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.01em;
}
h1, h2, h3, h4, h5, h6,
.card-title,
.stat-value,
.text-2xl,
.text-3xl,
.text-4xl {
font-family: var(--font-heading);
letter-spacing: -0.025em;
}
/* ─── Density variables ─── */
:root { :root {
--spacing-xs: 0.5rem; --spacing-xs: 0.5rem;
--spacing-sm: 0.75rem; --spacing-sm: 0.75rem;
@@ -58,7 +88,6 @@
--spacing-xl: 2rem; --spacing-xl: 2rem;
} }
/* Densité compacte */
.density-compact { .density-compact {
--spacing-xs: 0.25rem; --spacing-xs: 0.25rem;
--spacing-sm: 0.5rem; --spacing-sm: 0.5rem;
@@ -67,7 +96,6 @@
--spacing-xl: 1.25rem; --spacing-xl: 1.25rem;
} }
/* Densité confortable (défaut) */
.density-comfortable { .density-comfortable {
--spacing-xs: 0.5rem; --spacing-xs: 0.5rem;
--spacing-sm: 0.75rem; --spacing-sm: 0.75rem;
@@ -76,7 +104,6 @@
--spacing-xl: 2rem; --spacing-xl: 2rem;
} }
/* Densité espacée */
.density-spacious { .density-spacious {
--spacing-xs: 0.75rem; --spacing-xs: 0.75rem;
--spacing-sm: 1rem; --spacing-sm: 1rem;
@@ -85,251 +112,183 @@
--spacing-xl: 3rem; --spacing-xl: 3rem;
} }
/* Contraste élevé avec DaisyUI */ /* ─── High contrast mode ─── */
.contrast-high .btn { .contrast-high .btn { @apply border-2; }
@apply border-2; .contrast-high .input { @apply border-2; }
} .contrast-high .select { @apply border-2; }
.contrast-high .textarea { @apply border-2; }
.contrast-high .modal-box { @apply border-2 border-base-content; }
.contrast-high .input { /* ─── Accessibility ─── */
@apply border-2;
}
.contrast-high .select {
@apply border-2;
}
.contrast-high .textarea {
@apply border-2;
}
.contrast-high .modal-box {
@apply border-2 border-base-content;
}
/* Amélioration de l'accessibilité */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *, *::before, *::after {
*::before,
*::after {
animation-duration: 0.01ms !important; animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important; animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important; transition-duration: 0.01ms !important;
} }
} }
/* Focus visible pour l'accessibilité */
*:focus-visible { *:focus-visible {
outline: 2px solid #304998; outline: 2px solid oklch(40% 0.16 262);
outline-offset: 2px; outline-offset: 2px;
} }
/* Styles pour les boutons de paramètres */ /* ─── Cards ─── */
.card {
border: 1px solid oklch(91% 0.015 260 / 0.6);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
box-shadow:
0 4px 6px -1px oklch(22% 0.025 260 / 0.06),
0 2px 4px -2px oklch(22% 0.025 260 / 0.04);
}
/* ─── Navbar glass effect ─── */
.navbar-glass {
background: oklch(98.5% 0.004 260 / 0.82);
backdrop-filter: blur(12px) saturate(1.5);
-webkit-backdrop-filter: blur(12px) saturate(1.5);
border-bottom: 1px solid oklch(91% 0.015 260 / 0.5);
}
/* ─── Buttons ─── */
.btn {
font-family: var(--font-heading);
font-weight: 500;
letter-spacing: -0.01em;
transition: all 0.15s ease;
}
.btn-circle { .btn-circle {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
.btn-circle:hover { .btn-circle:hover {
transform: scale(1.05); transform: scale(1.05);
} }
.btn-circle:active { .btn-circle:active {
transform: scale(0.95); transform: scale(0.95);
} }
/* Animation pour le modal */ /* ─── Inputs ─── */
.input, .select, .textarea {
font-family: var(--font-body);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus, .select:focus, .textarea:focus {
box-shadow: 0 0 0 3px oklch(40% 0.16 262 / 0.1);
}
/* ─── Tables ─── */
.table thead th {
font-family: var(--font-heading);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: uppercase;
font-size: 0.7rem;
color: oklch(45% 0.03 260);
}
.table tbody tr {
transition: background-color 0.1s ease;
}
/* ─── Badges ─── */
.badge {
font-family: var(--font-heading);
font-weight: 500;
letter-spacing: 0;
}
/* ─── Stats ─── */
.stat-title {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.7rem;
font-weight: 500;
opacity: 0.6;
}
.stat-value {
font-weight: 700;
}
/* ─── Modals ─── */
.modal { .modal {
transition: opacity 0.3s ease-in-out; transition: opacity 0.25s ease;
font-size: 100% !important; /* Force la taille normale pour le modal */
transform: none !important; /* Empêche les transformations */
scale: 1 !important; /* Force l'échelle à 1 */
} }
.modal.modal-open {
animation: modalFadeIn 0.3s ease-in-out;
}
/* S'assurer que le contenu du modal garde une taille normale */
.modal-box { .modal-box {
font-size: 100% !important; font-family: var(--font-body);
transform: none !important; border-radius: 0.75rem;
scale: 1 !important; border: 1px solid oklch(91% 0.015 260 / 0.5);
width: auto !important;
max-width: 500px !important;
} }
.modal .form-control { @keyframes modalSlideUp {
font-size: 100% !important; from { opacity: 0; transform: translateY(0.5rem); }
transform: none !important; to { opacity: 1; transform: translateY(0); }
} }
.modal .btn { .modal.modal-open .modal-box {
font-size: 100% !important; animation: modalSlideUp 0.25s ease-out;
transform: none !important;
padding: 0.5rem 1rem !important;
height: auto !important;
min-height: 2.5rem !important;
} }
.modal .input { /* ─── Page transitions ─── */
font-size: 100% !important; .page-enter-active {
transform: none !important; transition: opacity 0.2s ease, transform 0.2s ease;
height: auto !important; }
min-height: 2.5rem !important; .page-leave-active {
transition: opacity 0.15s ease;
}
.page-enter-from {
opacity: 0;
transform: translateY(4px);
}
.page-leave-to {
opacity: 0;
} }
.modal .select { /* ─── Scrollbar styling ─── */
font-size: 100% !important; ::-webkit-scrollbar {
transform: none !important; width: 6px;
height: auto !important; height: 6px;
min-height: 2.5rem !important; }
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: oklch(75% 0.02 260);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: oklch(60% 0.03 260);
} }
.modal .textarea { /* ─── Readability ─── */
font-size: 100% !important; .text-sm { line-height: 1.5; }
transform: none !important; .text-xs { line-height: 1.4; }
min-height: 4rem !important;
}
.modal .range { /* ─── Adaptive spacing ─── */
font-size: 100% !important; .p-1 { padding: var(--spacing-xs); }
transform: none !important; .p-2 { padding: var(--spacing-sm); }
height: auto !important; .p-3 { padding: var(--spacing-md); }
min-height: 1.5rem !important; .p-4 { padding: var(--spacing-lg); }
} .p-5 { padding: var(--spacing-xl); }
.modal .label { .m-1 { margin: var(--spacing-xs); }
font-size: 100% !important; .m-2 { margin: var(--spacing-sm); }
transform: none !important; .m-3 { margin: var(--spacing-md); }
} .m-4 { margin: var(--spacing-lg); }
.m-5 { margin: var(--spacing-xl); }
.modal .label-text { .gap-1 { gap: var(--spacing-xs); }
font-size: 100% !important; .gap-2 { gap: var(--spacing-sm); }
transform: none !important; .gap-3 { gap: var(--spacing-md); }
} .gap-4 { gap: var(--spacing-lg); }
.gap-5 { gap: var(--spacing-xl); }
.modal .label-text-alt {
font-size: 100% !important;
transform: none !important;
}
.modal .checkbox {
font-size: 100% !important;
transform: none !important;
width: 1rem !important;
height: 1rem !important;
}
.modal .text-xs {
font-size: 0.75rem !important;
transform: none !important;
}
.modal .text-sm {
font-size: 0.875rem !important;
transform: none !important;
}
.modal .text-lg {
font-size: 1.125rem !important;
transform: none !important;
}
.modal .font-bold {
font-weight: 700 !important;
transform: none !important;
}
.modal .font-medium {
font-weight: 500 !important;
transform: none !important;
}
/* Empêcher les héritages de taille */
.modal * {
font-size: inherit !important;
transform: none !important;
scale: 1 !important;
}
@keyframes modalFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Styles pour les contrôles de zoom */
.range {
transition: all 0.2s ease-in-out;
}
.range::-webkit-slider-thumb {
transition: all 0.2s ease-in-out;
}
.range::-webkit-slider-thumb:hover {
transform: scale(1.1);
}
/* Amélioration de la lisibilité */
.text-sm {
line-height: 1.5;
}
.text-xs {
line-height: 1.4;
}
/* Espacement adaptatif */
.p-1 {
padding: var(--spacing-xs);
}
.p-2 {
padding: var(--spacing-sm);
}
.p-3 {
padding: var(--spacing-md);
}
.p-4 {
padding: var(--spacing-lg);
}
.p-5 {
padding: var(--spacing-xl);
}
.m-1 {
margin: var(--spacing-xs);
}
.m-2 {
margin: var(--spacing-sm);
}
.m-3 {
margin: var(--spacing-md);
}
.m-4 {
margin: var(--spacing-lg);
}
.m-5 {
margin: var(--spacing-xl);
}
.gap-1 {
gap: var(--spacing-xs);
}
.gap-2 {
gap: var(--spacing-sm);
}
.gap-3 {
gap: var(--spacing-md);
}
.gap-4 {
gap: var(--spacing-lg);
}
.gap-5 {
gap: var(--spacing-xl);
}
@layer components { @layer components {
.form-control .label { .form-control .label {
@@ -337,7 +296,6 @@
padding-bottom: 0; padding-bottom: 0;
margin-right: 15px; margin-right: 15px;
} }
.form-control .label + * { .form-control .label + * {
margin-top: var(--spacing-xs); margin-top: var(--spacing-xs);
} }

16
app/components/ComponentItem.vue
View File

@@ -50,7 +50,7 @@
<div v-show="!isCollapsed" class="space-y-4"> <div v-show="!isCollapsed" class="space-y-4">
<!-- Component Info Display - Editable or Read-only --> <!-- Component Info Display - Editable or Read-only -->
<div class="p-4 bg-base-100 border border-gray-200 rounded-lg"> <div class="p-4 bg-base-100 border border-base-200 rounded-lg">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div class="form-control"> <div class="form-control">
<label class="label"><span class="label-text font-medium">Nom</span></label> <label class="label"><span class="label-text font-medium">Nom</span></label>
@@ -111,7 +111,7 @@
<span class="font-medium">{{ constructeur.name }}</span> <span class="font-medium">{{ constructeur.name }}</span>
<span <span
v-if="formatConstructeurContact(constructeur)" v-if="formatConstructeurContact(constructeur)"
class="text-xs text-gray-500" class="text-xs text-base-content/50"
> >
{{ formatConstructeurContact(constructeur) }} {{ formatConstructeurContact(constructeur) }}
</span> </span>
@@ -220,9 +220,9 @@
@field-blur="updateComponentCustomField" @field-blur="updateComponentCustomField"
/> />
<div class="mt-4 pt-4 border-t border-gray-200 space-y-3"> <div class="mt-4 pt-4 border-t border-base-200 space-y-3">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h4 class="font-semibold text-sm text-gray-700"> <h4 class="font-semibold text-sm text-base-content/80">
Documents Documents
</h4> </h4>
<span v-if="isEditMode && selectedFiles.length" class="badge badge-outline"> <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
@@ -230,7 +230,7 @@
</span> </span>
</div> </div>
<p v-if="loadingDocuments" class="text-xs text-gray-500"> <p v-if="loadingDocuments" class="text-xs text-base-content/50">
Chargement des documents... Chargement des documents...
</p> </p>
@@ -254,7 +254,7 @@
<!-- Component Pieces --> <!-- Component Pieces -->
<div v-if="component.pieces && component.pieces.length > 0" class="space-y-2"> <div v-if="component.pieces && component.pieces.length > 0" class="space-y-2">
<h4 class="font-semibold text-gray-700"> <h4 class="font-semibold text-base-content/80">
Pièces du composant Pièces du composant
</h4> </h4>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
@@ -272,10 +272,10 @@
<!-- Sub Components --> <!-- Sub Components -->
<div v-if="childComponents.length > 0" class="space-y-3"> <div v-if="childComponents.length > 0" class="space-y-3">
<h4 class="font-semibold text-gray-700"> <h4 class="font-semibold text-base-content/80">
Sous-composants Sous-composants
</h4> </h4>
<div class="space-y-3 pl-4 border-l-2 border-gray-200"> <div class="space-y-3 pl-4 border-l-2 border-base-200">
<ComponentItem <ComponentItem
v-for="subComponent in childComponents" v-for="subComponent in childComponents"
:key="subComponent.id" :key="subComponent.id"

2
app/components/CustomFieldsDisplay.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div v-if="customFields && customFields.length > 0" class="space-y-4"> <div v-if="customFields && customFields.length > 0" class="space-y-4">
<h4 class="font-semibold text-gray-700 mb-3"> <h4 class="font-semibold text-base-content/80 mb-3">
Champs personnalisés Champs personnalisés
</h4> </h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

8
app/components/DocumentPreviewModal.vue
View File

@@ -10,11 +10,11 @@
<div class="min-w-0"> <div class="min-w-0">
<h3 class="font-bold text-xl truncate"> <h3 class="font-bold text-xl truncate">
Prévisualisation Prévisualisation
<span v-if="navTotal > 1" class="text-base font-normal text-gray-500"> <span v-if="navTotal > 1" class="text-base font-normal text-base-content/50">
{{ activeIndex + 1 }} / {{ navTotal }} {{ activeIndex + 1 }} / {{ navTotal }}
</span> </span>
</h3> </h3>
<p class="text-sm text-gray-500 truncate"> <p class="text-sm text-base-content/50 truncate">
{{ activeDoc?.name || activeDoc?.filename }}<span v-if="documentDescription"> &bull; {{ documentDescription }}</span> {{ activeDoc?.name || activeDoc?.filename }}<span v-if="documentDescription"> &bull; {{ documentDescription }}</span>
</p> </p>
</div> </div>
@@ -68,7 +68,7 @@
<template v-else-if="previewType === 'text'"> <template v-else-if="previewType === 'text'">
<div class="w-full h-full overflow-auto"> <div class="w-full h-full overflow-auto">
<div v-if="textLoading" class="flex items-center justify-center py-10 text-sm text-gray-500"> <div v-if="textLoading" class="flex items-center justify-center py-10 text-sm text-base-content/50">
<span class="loading loading-spinner loading-md mr-2" /> <span class="loading loading-spinner loading-md mr-2" />
Chargement du document... Chargement du document...
</div> </div>
@@ -82,7 +82,7 @@
</template> </template>
<template v-else> <template v-else>
<div class="text-sm text-gray-500 text-center px-6"> <div class="text-sm text-base-content/50 text-center px-6">
Prévisualisation non disponible pour ce type de document. Prévisualisation non disponible pour ce type de document.
</div> </div>
</template> </template>

6
app/components/DocumentUpload.vue
View File

@@ -13,7 +13,7 @@
<h3 class="font-semibold"> <h3 class="font-semibold">
{{ title }} {{ title }}
</h3> </h3>
<p class="text-sm text-gray-500"> <p class="text-sm text-base-content/50">
{{ subtitle }} {{ subtitle }}
</p> </p>
</div> </div>
@@ -22,7 +22,7 @@
<button type="button" class="btn btn-primary btn-sm" @click="triggerFileDialog"> <button type="button" class="btn btn-primary btn-sm" @click="triggerFileDialog">
Sélectionner des fichiers Sélectionner des fichiers
</button> </button>
<span class="text-xs text-gray-500">ou glisser-déposer ici</span> <span class="text-xs text-base-content/50">ou glisser-déposer ici</span>
</div> </div>
<input <input
@@ -54,7 +54,7 @@
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<span class="font-medium">{{ file.name }}</span> <span class="font-medium">{{ file.name }}</span>
<span class="text-xs text-gray-500">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span> <span class="text-xs text-base-content/50">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
</div> </div>
</div> </div>
<button type="button" class="btn btn-ghost btn-xs" @click="removeFile(file)"> <button type="button" class="btn btn-ghost btn-xs" @click="removeFile(file)">

4
app/components/ModelStructureViewer.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<div class="space-y-4"> <div class="space-y-4">
<div class="flex flex-wrap items-center gap-2 text-sm text-gray-600"> <div class="flex flex-wrap items-center gap-2 text-sm text-base-content/60">
<span v-if="stats.customFields" class="badge badge-outline badge-sm">{{ stats.customFields }} champ(s)</span> <span v-if="stats.customFields" class="badge badge-outline badge-sm">{{ stats.customFields }} champ(s)</span>
<span v-if="stats.pieces" class="badge badge-outline badge-sm">{{ stats.pieces }} pièce(s)</span> <span v-if="stats.pieces" class="badge badge-outline badge-sm">{{ stats.pieces }} pièce(s)</span>
<span v-if="stats.subcomponents" class="badge badge-outline badge-sm">{{ stats.subcomponents }} sous-composant(s)</span> <span v-if="stats.subcomponents" class="badge badge-outline badge-sm">{{ stats.subcomponents }} sous-composant(s)</span>
<span v-if="!stats.customFields && !stats.pieces && !stats.subcomponents" class="text-xs text-gray-500"> <span v-if="!stats.customFields && !stats.pieces && !stats.subcomponents" class="text-xs text-base-content/50">
Structure vide Structure vide
</span> </span>
</div> </div>

10
app/components/PageHero.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<section :class="sectionClasses"> <section :class="sectionClasses">
<div :class="contentClasses"> <div :class="contentClasses">
<div :class="['space-y-4', maxWidthClass]"> <div :class="['space-y-3', maxWidthClass]">
<component :is="headingTag" v-if="title" class="text-4xl font-bold"> <component :is="headingTag" v-if="title" class="text-4xl font-bold tracking-tight">
{{ title }} {{ title }}
</component> </component>
<p v-if="subtitle" class="text-sm opacity-90"> <p v-if="subtitle" class="text-sm opacity-80 leading-relaxed">
{{ subtitle }} {{ subtitle }}
</p> </p>
<slot /> <slot />
@@ -58,9 +58,9 @@ const props = defineProps({
}) })
const sectionClasses = computed(() => { const sectionClasses = computed(() => {
const classes = ['hero', 'bg-gradient-to-r', props.gradientFrom, props.gradientTo, props.minHeight] const classes = ['hero', 'bg-gradient-to-br', props.gradientFrom, props.gradientTo, props.minHeight]
if (props.rounded) { if (props.rounded) {
classes.push('rounded-lg') classes.push('rounded-xl', 'overflow-hidden')
} }
return classes return classes
}) })

10
app/components/PieceItem.vue
View File

@@ -52,7 +52,7 @@
</div> </div>
<div v-show="!isCollapsed" class="space-y-4"> <div v-show="!isCollapsed" class="space-y-4">
<div class="p-4 bg-base-100 border border-gray-200 rounded-lg"> <div class="p-4 bg-base-100 border border-base-200 rounded-lg">
<div class="space-y-2 text-sm"> <div class="space-y-2 text-sm">
<div> <div>
<span class="font-medium">Référence:</span> <span class="font-medium">Référence:</span>
@@ -82,7 +82,7 @@
</span> </span>
<span <span
v-if="formatConstructeurContact(constructeur)" v-if="formatConstructeurContact(constructeur)"
class="text-xs text-gray-500" class="text-xs text-base-content/50"
> >
{{ formatConstructeurContact(constructeur) }} {{ formatConstructeurContact(constructeur) }}
</span> </span>
@@ -186,9 +186,9 @@
@field-blur="handleCustomFieldBlur" @field-blur="handleCustomFieldBlur"
/> />
<div class="mt-4 pt-4 border-t border-gray-200 space-y-3"> <div class="mt-4 pt-4 border-t border-base-200 space-y-3">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h5 class="text-sm font-medium text-gray-700">Documents</h5> <h5 class="text-sm font-medium text-base-content/80">Documents</h5>
<span <span
v-if="isEditMode && selectedFiles.length" v-if="isEditMode && selectedFiles.length"
class="badge badge-outline" class="badge badge-outline"
@@ -200,7 +200,7 @@
</span> </span>
</div> </div>
<p v-if="loadingDocuments" class="text-xs text-gray-500"> <p v-if="loadingDocuments" class="text-xs text-base-content/50">
Chargement des documents... Chargement des documents...
</p> </p>

4
app/components/PieceModelStructureEditor.vue
View File

@@ -10,7 +10,7 @@
</p> </p>
</header> </header>
<p v-if="!products.length" class="text-xs text-gray-500"> <p v-if="!products.length" class="text-xs text-base-content/50">
Aucun produit défini. Aucun produit défini.
</p> </p>
@@ -76,7 +76,7 @@
Champs personnalisés Champs personnalisés
</h3> </h3>
<p v-if="!fields.length" class="text-xs text-gray-500"> <p v-if="!fields.length" class="text-xs text-base-content/50">
Aucun champ personnalisé n'a encore été défini. Aucun champ personnalisé n'a encore été défini.
</p> </p>

16
app/components/StructureNodeEditor.vue
View File

@@ -9,7 +9,7 @@
</span> </span>
</label> </label>
<template v-if="isRoot"> <template v-if="isRoot">
<p class="text-[11px] text-gray-500"> <p class="text-[11px] text-base-content/50">
Le composant racine correspond à la catégorie que vous éditez. Sélectionnez uniquement les familles pour les sous-composants. Le composant racine correspond à la catégorie que vous éditez. Sélectionnez uniquement les familles pour les sous-composants.
</p> </p>
</template> </template>
@@ -31,7 +31,7 @@
{{ formatComponentTypeOption(type) }} {{ formatComponentTypeOption(type) }}
</option> </option>
</select> </select>
<p class="text-[11px] text-gray-500"> <p class="text-[11px] text-base-content/50">
{{ node.typeComposantId ? `Sélection : ${getComponentTypeLabel(node.typeComposantId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }} {{ node.typeComposantId ? `Sélection : ${getComponentTypeLabel(node.typeComposantId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
</p> </p>
<div v-if="!isRoot" class="form-control mt-2"> <div v-if="!isRoot" class="form-control mt-2">
@@ -73,7 +73,7 @@
<h4 :class="headingClass"> <h4 :class="headingClass">
{{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }} {{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }}
</h4> </h4>
<p v-if="!(node.customFields?.length)" class="text-xs text-gray-500"> <p v-if="!(node.customFields?.length)" class="text-xs text-base-content/50">
Aucun champ n'a encore été défini. Aucun champ n'a encore été défini.
</p> </p>
<div v-else class="space-y-2"> <div v-else class="space-y-2">
@@ -159,7 +159,7 @@
<h4 :class="headingClass"> <h4 :class="headingClass">
{{ isRoot ? 'Produits inclus par défaut' : 'Produits' }} {{ isRoot ? 'Produits inclus par défaut' : 'Produits' }}
</h4> </h4>
<p v-if="!(node.products?.length)" class="text-xs text-gray-500"> <p v-if="!(node.products?.length)" class="text-xs text-base-content/50">
Aucun produit défini. Aucun produit défini.
</p> </p>
<div v-else class="space-y-2"> <div v-else class="space-y-2">
@@ -230,7 +230,7 @@
<h4 :class="headingClass"> <h4 :class="headingClass">
{{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }} {{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
</h4> </h4>
<p v-if="!(node.pieces?.length)" class="text-xs text-gray-500"> <p v-if="!(node.pieces?.length)" class="text-xs text-base-content/50">
Aucune pièce définie. Aucune pièce définie.
</p> </p>
<div v-else class="space-y-2"> <div v-else class="space-y-2">
@@ -276,7 +276,7 @@
</option> </option>
</select> </select>
</div> </div>
<p class="mt-1 text-[11px] text-gray-500"> <p class="mt-1 text-[11px] text-base-content/50">
{{ piece.typePieceId ? `Sélection : ${getPieceTypeLabel(piece.typePieceId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }} {{ piece.typePieceId ? `Sélection : ${getPieceTypeLabel(piece.typePieceId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
</p> </p>
</div> </div>
@@ -300,10 +300,10 @@
<section v-if="canManageSubcomponents || hasSubcomponents" class="space-y-3"> <section v-if="canManageSubcomponents || hasSubcomponents" class="space-y-3">
<h4 :class="headingClass">Sous-composants</h4> <h4 :class="headingClass">Sous-composants</h4>
<p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-gray-500"> <p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-base-content/50">
Sélectionnez uniquement la famille de ce sous-composant ; il sera configuré via son propre modèle. Sélectionnez uniquement la famille de ce sous-composant ; il sera configuré via son propre modèle.
</p> </p>
<p v-if="!hasSubcomponents" class="text-xs text-gray-500"> <p v-if="!hasSubcomponents" class="text-xs text-base-content/50">
Aucun sous-composant défini. Aucun sous-composant défini.
</p> </p>
<div v-else class="space-y-3"> <div v-else class="space-y-3">

4
app/components/common/CustomFieldDisplay.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<div <div
v-if="fields.length" v-if="fields.length"
class="mt-4 pt-4 border-t border-gray-200" class="mt-4 pt-4 border-t border-base-200"
> >
<h5 class="text-sm font-medium text-gray-700 mb-3"> <h5 class="text-sm font-medium text-base-content/80 mb-3">
Champs personnalisés Champs personnalisés
</h5> </h5>
<div :class="layoutClass"> <div :class="layoutClass">

8
app/components/common/DataTable.vue
View File

@@ -63,13 +63,13 @@
<!-- Table (always shown when there are filterable columns, even during loading or with 0 rows) --> <!-- Table (always shown when there are filterable columns, even during loading or with 0 rows) -->
<template v-else> <template v-else>
<div class="overflow-x-auto overflow-y-clip relative"> <div class="overflow-x-auto overflow-y-clip relative rounded-lg border border-base-300/40">
<!-- Loading overlay (keeps table & filter inputs visible) --> <!-- Loading overlay (keeps table & filter inputs visible) -->
<div <div
v-if="loading && hasFilterableColumns" v-if="loading && hasFilterableColumns"
class="absolute inset-0 bg-base-100/50 z-10 flex items-center justify-center" class="absolute inset-0 bg-base-100/60 backdrop-blur-[1px] z-10 flex items-center justify-center"
> >
<span class="loading loading-spinner" aria-hidden="true" /> <span class="loading loading-spinner text-primary" aria-hidden="true" />
</div> </div>
<table :class="['table table-sm md:table-md', tableClass]"> <table :class="['table table-sm md:table-md', tableClass]">
<thead> <thead>
@@ -175,7 +175,7 @@
</tr> </tr>
<!-- Expanded row --> <!-- Expanded row -->
<tr v-if="expandable && isExpanded(row)"> <tr v-if="expandable && isExpanded(row)">
<td :colspan="columns.length + 1" class="bg-base-200/50 p-4"> <td :colspan="columns.length + 1" class="bg-base-200/30 p-4 border-t border-base-200/80">
<slot name="row-expanded" :row="row" :index="idx" /> <slot name="row-expanded" :row="row" :index="idx" />
</td> </td>
</tr> </tr>

4
app/components/common/RequirementListEditor.vue
View File

@@ -9,11 +9,11 @@
</button> </button>
</div> </div>
<p class="text-sm text-gray-500"> <p class="text-sm text-base-content/50">
{{ labels.description }} {{ labels.description }}
</p> </p>
<div v-if="requirements.length === 0" class="text-sm text-gray-500 bg-base-200/60 rounded-md p-4"> <div v-if="requirements.length === 0" class="text-sm text-base-content/50 bg-base-200/60 rounded-md p-4">
{{ labels.emptyState }} {{ labels.emptyState }}
</div> </div>

6
app/components/common/SearchSelect.vue
View File

@@ -41,11 +41,11 @@
v-if="openDropdown" v-if="openDropdown"
class="absolute z-30 mt-1 w-full max-h-60 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg" class="absolute z-30 mt-1 w-full max-h-60 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg"
> >
<div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-gray-500"> <div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-base-content/50">
<span class="loading loading-spinner loading-xs" /> <span class="loading loading-spinner loading-xs" />
Recherche en cours… Recherche en cours…
</div> </div>
<div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-gray-500"> <div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-base-content/50">
{{ emptyText }} {{ emptyText }}
</div> </div>
<ul v-else class="flex flex-col"> <ul v-else class="flex flex-col">
@@ -69,7 +69,7 @@
{{ resolveLabel(option) }} {{ resolveLabel(option) }}
</slot> </slot>
</span> </span>
<span v-if="resolveDescription(option)" class="text-xs text-gray-500"> <span v-if="resolveDescription(option)" class="text-xs text-base-content/50">
<slot name="option-description" :option="option"> <slot name="option-description" :option="option">
{{ resolveDescription(option) }} {{ resolveDescription(option) }}
</slot> </slot>

2
app/components/common/StructureSkeletonPreview.vue
View File

@@ -93,7 +93,7 @@
<!-- Empty state: component variant --> <!-- Empty state: component variant -->
<p <p
v-if="variant === 'component' && showEmptyState && !customFields.length && !pieces.length && !products.length && !subcomponents.length" v-if="variant === 'component' && showEmptyState && !customFields.length && !pieces.length && !products.length && !subcomponents.length"
class="text-xs text-gray-500" class="text-xs text-base-content/50"
> >
Ce squelette ne définit pas encore de pièces, sous-composants ou valeurs par défaut. Ce squelette ne définit pas encore de pièces, sous-composants ou valeurs par défaut.
</p> </p>

2
app/components/form/FieldPhone.vue
View File

@@ -23,7 +23,7 @@
@blur="onBlur" @blur="onBlur"
@focus="(event) => emit('focus', event)" @focus="(event) => emit('focus', event)"
/> />
<p v-if="help" :id="helpId" class="mt-2 text-xs text-gray-500"> <p v-if="help" :id="helpId" class="mt-2 text-xs text-base-content/50">
{{ help }} {{ help }}
</p> </p>
<p v-if="errorMessage" :id="errorId" class="mt-2 text-xs text-error"> <p v-if="errorMessage" :id="errorId" class="mt-2 text-xs text-error">

107
app/components/layout/AppNavbar.vue
View File

@@ -1,18 +1,18 @@
<template> <template>
<div class="navbar bg-base-100 shadow-lg"> <div class="navbar navbar-glass sticky top-0 z-50 px-4 lg:px-6">
<div class="navbar-start"> <div class="navbar-start">
<!-- Mobile hamburger menu --> <!-- Mobile hamburger menu -->
<div class="dropdown"> <div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden"> <div tabindex="0" role="button" class="btn btn-ghost btn-sm lg:hidden">
<IconLucideMenu class="w-5 h-5" aria-hidden="true" /> <IconLucideMenu class="w-5 h-5" aria-hidden="true" />
</div> </div>
<ul <ul
tabindex="0" tabindex="0"
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52" class="menu menu-sm dropdown-content mt-3 z-[1] p-3 shadow-lg bg-base-100 rounded-xl w-60 border border-base-300/50"
> >
<li class="pt-1 pb-2 lg:hidden"> <li class="pt-1 pb-2 lg:hidden">
<button <button
class="w-full flex items-center gap-2 rounded-md px-2 py-1 transition-colors text-base-content hover:bg-primary/10 hover:text-primary" class="w-full flex items-center gap-2 rounded-lg px-3 py-2 transition-colors text-base-content/70 hover:bg-primary/8 hover:text-primary"
@click="$emit('open-settings')" @click="$emit('open-settings')"
> >
<IconLucideSettings class="w-4 h-4" aria-hidden="true" /> <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
@@ -24,7 +24,7 @@
<li v-for="link in simpleLinks" :key="link.to"> <li v-for="link in simpleLinks" :key="link.to">
<NuxtLink <NuxtLink
:to="link.to" :to="link.to"
class="rounded-md px-2 py-1 transition-colors flex items-center gap-2" class="rounded-lg px-3 py-2 transition-all flex items-center gap-2"
:class="linkClass(link)" :class="linkClass(link)"
> >
<component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" /> <component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
@@ -40,7 +40,7 @@
> >
<button <button
type="button" type="button"
class="flex w-full items-center justify-between rounded-md px-2 py-1 text-left transition-colors" class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left transition-all"
:class="groupClass(group)" :class="groupClass(group)"
:aria-expanded="openDropdown === group.id + '-mobile'" :aria-expanded="openDropdown === group.id + '-mobile'"
@click="toggleDropdown(group.id + '-mobile')" @click="toggleDropdown(group.id + '-mobile')"
@@ -52,7 +52,7 @@
{{ group.label }} {{ group.label }}
</span> </span>
<IconLucideChevronRight <IconLucideChevronRight
class="h-4 w-4 transition-transform" class="h-3.5 w-3.5 transition-transform duration-200"
:class="openDropdown === group.id + '-mobile' ? 'rotate-90' : ''" :class="openDropdown === group.id + '-mobile' ? 'rotate-90' : ''"
aria-hidden="true" aria-hidden="true"
/> />
@@ -60,12 +60,12 @@
<Transition name="nav-dropdown-mobile"> <Transition name="nav-dropdown-mobile">
<ul <ul
v-if="openDropdown === group.id + '-mobile'" v-if="openDropdown === group.id + '-mobile'"
class="mt-2 space-y-1 rounded-md border border-base-200 bg-base-100 p-2 shadow-sm overflow-hidden" class="mt-1 space-y-0.5 rounded-lg bg-base-200/50 p-2 overflow-hidden"
> >
<li v-for="child in group.children" :key="child.to"> <li v-for="child in group.children" :key="child.to">
<NuxtLink <NuxtLink
:to="child.to" :to="child.to"
class="rounded-md px-2 py-1 transition-colors block" class="rounded-md px-3 py-1.5 transition-colors block text-sm"
:class="childLinkClass(child)" :class="childLinkClass(child)"
> >
{{ child.label }} {{ child.label }}
@@ -81,30 +81,28 @@
</div> </div>
<!-- Logo --> <!-- Logo -->
<div class="flex items-center space-x-3"> <NuxtLink to="/" class="flex items-center gap-2.5 group">
<div class="avatar"> <div class="w-9 h-9 rounded-lg overflow-hidden ring-1 ring-base-300/50 transition-all group-hover:ring-primary/30 group-hover:shadow-md">
<div class="w-14"> <img
<img :src="logoSrc"
:src="logoSrc" alt="Logo Malio"
alt="Logo Malio" class="h-full w-full object-contain"
class="h-full w-full object-contain" />
/>
</div>
</div> </div>
<NuxtLink to="/" class="btn btn-ghost text-xl"> <span class="text-lg font-bold tracking-tight text-base-content hidden sm:inline" style="font-family: var(--font-heading)">
Inventory Inventory
</NuxtLink> </span>
</div> </NuxtLink>
</div> </div>
<!-- Desktop navbar --> <!-- Desktop navbar -->
<div class="navbar-center hidden lg:flex"> <div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1"> <ul class="menu menu-horizontal gap-0.5 px-1">
<!-- Desktop: simple links --> <!-- Desktop: simple links -->
<li v-for="link in simpleLinks" :key="link.to"> <li v-for="link in simpleLinks" :key="link.to">
<NuxtLink <NuxtLink
:to="link.to" :to="link.to"
class="transition-colors px-3 py-2 rounded-md flex items-center gap-1.5" class="transition-all px-3 py-2 rounded-lg flex items-center gap-1.5 text-sm font-medium"
:class="linkClass(link)" :class="linkClass(link)"
> >
<component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" /> <component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
@@ -124,7 +122,7 @@
> >
<button <button
type="button" type="button"
class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 transition-colors" class="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 transition-all text-sm font-medium"
:class="groupClass(group)" :class="groupClass(group)"
:aria-expanded="openDropdown === group.id + '-desktop'" :aria-expanded="openDropdown === group.id + '-desktop'"
@click="toggleDropdown(group.id + '-desktop')" @click="toggleDropdown(group.id + '-desktop')"
@@ -133,21 +131,21 @@
> >
<component :is="group.icon" v-if="group.icon" class="w-4 h-4" aria-hidden="true" /> <component :is="group.icon" v-if="group.icon" class="w-4 h-4" aria-hidden="true" />
{{ group.label }} {{ group.label }}
<IconLucideChevronRight <IconLucideChevronDown
class="h-4 w-4 transition-transform" class="h-3.5 w-3.5 transition-transform duration-200"
:class="openDropdown === group.id + '-desktop' ? 'rotate-90' : ''" :class="openDropdown === group.id + '-desktop' ? 'rotate-180' : ''"
aria-hidden="true" aria-hidden="true"
/> />
</button> </button>
<Transition name="nav-dropdown-desktop"> <Transition name="nav-dropdown-desktop">
<ul <ul
v-if="openDropdown === group.id + '-desktop'" v-if="openDropdown === group.id + '-desktop'"
class="absolute left-0 top-full mt-2 w-64 rounded-lg border border-base-200 bg-base-100 p-2 shadow-lg z-50" class="absolute left-0 top-full mt-1.5 w-56 rounded-xl border border-base-300/50 bg-base-100 p-1.5 shadow-lg shadow-base-content/5 z-50"
> >
<li v-for="child in group.children" :key="child.to"> <li v-for="child in group.children" :key="child.to">
<NuxtLink <NuxtLink
:to="child.to" :to="child.to"
class="block rounded-md px-2 py-1 transition-colors" class="block rounded-lg px-3 py-2 transition-all text-sm"
:class="childLinkClass(child)" :class="childLinkClass(child)"
> >
{{ child.label }} {{ child.label }}
@@ -164,13 +162,13 @@
<!-- Navbar end --> <!-- Navbar end -->
<div class="navbar-end"> <div class="navbar-end">
<div class="flex items-center gap-2"> <div class="flex items-center gap-1.5">
<button <button
class="btn btn-ghost btn-circle hidden lg:inline-flex" class="btn btn-ghost btn-sm btn-circle hidden lg:inline-flex text-base-content/50 hover:text-base-content"
title="Paramètres d'affichage" title="Paramètres d'affichage"
@click="$emit('open-settings')" @click="$emit('open-settings')"
> >
<IconLucideSettings class="w-5 h-5" aria-hidden="true" /> <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
</button> </button>
<ClientOnly> <ClientOnly>
@@ -178,7 +176,7 @@
<div <div
tabindex="0" tabindex="0"
role="button" role="button"
class="btn btn-ghost btn-circle avatar placeholder indicator" class="btn btn-ghost btn-circle btn-sm avatar placeholder indicator"
> >
<span <span
v-if="unresolvedCount > 0" v-if="unresolvedCount > 0"
@@ -187,47 +185,49 @@
{{ unresolvedCount }} {{ unresolvedCount }}
</span> </span>
<div <div
class="bg-secondary text-secondary-content rounded-full w-10 h-10 grid place-items-center" class="bg-primary text-primary-content rounded-full w-8 h-8 grid place-items-center"
> >
<span <span class="text-xs font-semibold leading-none tracking-tight">
class="flex h-full w-full items-center justify-center text-sm font-semibold leading-none tracking-tight"
>
{{ activeProfileInitials }} {{ activeProfileInitials }}
</span> </span>
</div> </div>
</div> </div>
<ul <ul
tabindex="0" tabindex="0"
class="menu dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-64" class="menu dropdown-content mt-3 p-2 shadow-lg bg-base-100 rounded-xl w-60 border border-base-300/50"
> >
<li class="px-2 py-1 text-sm text-base-content/70"> <li class="px-3 py-2">
Connecté en tant que<br /> <div class="flex flex-col gap-1 pointer-events-none">
<span class="font-semibold text-base-content">{{ activeProfileLabel }}</span> <span class="text-xs text-base-content/50">Connecté en tant que</span>
<span class="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</span> <span class="font-semibold text-sm text-base-content">{{ activeProfileLabel }}</span>
<span class="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</span>
</div>
</li> </li>
<div class="divider my-0.5 px-2" />
<li v-if="isAdmin"> <li v-if="isAdmin">
<NuxtLink to="/admin" class="justify-between"> <NuxtLink to="/admin" class="rounded-lg justify-between text-sm">
Administration Administration
<IconLucideChevronRight class="w-4 h-4" aria-hidden="true" /> <IconLucideChevronRight class="w-3.5 h-3.5 text-base-content/30" aria-hidden="true" />
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
<NuxtLink to="/comments" class="justify-between"> <NuxtLink to="/comments" class="rounded-lg justify-between text-sm">
Commentaires Commentaires
<span v-if="unresolvedCount > 0" class="badge badge-warning badge-xs"> <span v-if="unresolvedCount > 0" class="badge badge-warning badge-xs">
{{ unresolvedCount }} {{ unresolvedCount }}
</span> </span>
<IconLucideChevronRight v-else class="w-4 h-4" aria-hidden="true" /> <IconLucideChevronRight v-else class="w-3.5 h-3.5 text-base-content/30" aria-hidden="true" />
</NuxtLink> </NuxtLink>
</li> </li>
<div class="divider my-0.5 px-2" />
<li> <li>
<button <button
type="button" type="button"
class="text-error justify-between" class="rounded-lg text-error/80 hover:text-error hover:bg-error/5 justify-between text-sm"
@click="$emit('logout')" @click="$emit('logout')"
> >
Déconnexion Déconnexion
<IconLucideLogOut class="w-4 h-4" aria-hidden="true" /> <IconLucideLogOut class="w-3.5 h-3.5" aria-hidden="true" />
</button> </button>
</li> </li>
</ul> </ul>
@@ -248,6 +248,7 @@ import { useComments } from '~/composables/useComments'
import IconLucideMenu from '~icons/lucide/menu' import IconLucideMenu from '~icons/lucide/menu'
import IconLucideSettings from '~icons/lucide/settings' import IconLucideSettings from '~icons/lucide/settings'
import IconLucideChevronRight from '~icons/lucide/chevron-right' import IconLucideChevronRight from '~icons/lucide/chevron-right'
import IconLucideChevronDown from '~icons/lucide/chevron-down'
import IconLucideLogOut from '~icons/lucide/log-out' import IconLucideLogOut from '~icons/lucide/log-out'
import IconLucideLayoutDashboard from '~icons/lucide/layout-dashboard' import IconLucideLayoutDashboard from '~icons/lucide/layout-dashboard'
import IconLucideFactory from '~icons/lucide/factory' import IconLucideFactory from '~icons/lucide/factory'
@@ -365,19 +366,19 @@ const isGroupActive = (group: NavGroup) => {
const linkClass = (link: NavLink) => { const linkClass = (link: NavLink) => {
return isActive(link.to) return isActive(link.to)
? 'bg-primary text-primary-content font-semibold shadow-sm' ? 'bg-primary text-primary-content font-semibold shadow-sm'
: 'text-base-content hover:bg-primary/10 hover:text-primary' : 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
} }
const groupClass = (group: NavGroup) => { const groupClass = (group: NavGroup) => {
return isGroupActive(group) return isGroupActive(group)
? 'bg-primary text-primary-content font-semibold shadow-sm' ? 'bg-primary text-primary-content font-semibold shadow-sm'
: 'text-base-content hover:bg-primary/10 hover:text-primary' : 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
} }
const childLinkClass = (child: NavLink) => { const childLinkClass = (child: NavLink) => {
return isActive(child.to) return isActive(child.to)
? 'bg-primary/10 text-primary font-semibold' ? 'bg-primary/10 text-primary font-semibold'
: 'text-base-content hover:bg-primary/10 hover:text-primary' : 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
} }
const roleLabel = computed(() => { const roleLabel = computed(() => {
@@ -418,12 +419,12 @@ const activeProfileInitials = computed(() => {
.nav-dropdown-desktop-enter-from, .nav-dropdown-desktop-enter-from,
.nav-dropdown-desktop-leave-to { .nav-dropdown-desktop-leave-to {
opacity: 0; opacity: 0;
transform: translateY(0.25rem); transform: translateY(4px) scale(0.98);
} }
.nav-dropdown-desktop-enter-to, .nav-dropdown-desktop-enter-to,
.nav-dropdown-desktop-leave-from { .nav-dropdown-desktop-leave-from {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0) scale(1);
} }
.nav-dropdown-mobile-enter-active, .nav-dropdown-mobile-enter-active,

2
app/components/machine/MachineComponentsCard.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="card bg-base-100 shadow-lg"> <div class="card bg-base-100 shadow-sm">
<div class="card-body"> <div class="card-body">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="card-title">Composants</h2> <h2 class="card-title">Composants</h2>

2
app/components/machine/MachineDocumentsCard.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="card bg-base-100 shadow-lg mt-6"> <div class="card bg-base-100 shadow-sm mt-6">
<div class="card-body space-y-4"> <div class="card-body space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>

10
app/components/machine/MachineInfoCard.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="card bg-base-100 shadow-lg"> <div class="card bg-base-100 shadow-sm">
<div class="card-body"> <div class="card-body">
<h2 class="card-title">Informations de la machine</h2> <h2 class="card-title tracking-tight">Informations de la machine</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control"> <div class="form-control">
<label class="label"> <label class="label">
@@ -59,7 +59,7 @@
<span class="font-medium">{{ constructeur.name }}</span> <span class="font-medium">{{ constructeur.name }}</span>
<span <span
v-if="formatConstructeurContactSummary(constructeur)" v-if="formatConstructeurContactSummary(constructeur)"
class="text-xs text-gray-500" class="text-xs text-base-content/50"
> >
{{ formatConstructeurContactSummary(constructeur) }} {{ formatConstructeurContactSummary(constructeur) }}
</span> </span>
@@ -71,8 +71,8 @@
</div> </div>
<!-- Champs personnalisés --> <!-- Champs personnalisés -->
<div v-if="visibleCustomFields.length" class="mt-6 pt-4 border-t border-gray-200"> <div v-if="visibleCustomFields.length" class="mt-6 pt-4 border-t border-base-200">
<h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés de la machine</h4> <h4 class="font-semibold text-base-content/80 mb-3">Champs personnalisés de la machine</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div <div
v-for="field in visibleCustomFields" v-for="field in visibleCustomFields"

2
app/components/machine/MachinePiecesCard.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="card bg-base-100 shadow-lg"> <div class="card bg-base-100 shadow-sm">
<div class="card-body"> <div class="card-body">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="card-title">Pièces de la machine</h2> <h2 class="card-title">Pièces de la machine</h2>

2
app/components/machine/MachineProductsCard.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="card bg-base-100 shadow-lg"> <div class="card bg-base-100 shadow-sm">
<div class="card-body space-y-4"> <div class="card-body space-y-4">
<DocumentPreviewModal <DocumentPreviewModal
:document="previewDocument" :document="previewDocument"

8
app/components/sites/SiteCard.vue
View File

@@ -11,17 +11,17 @@
</div> </div>
<div class="space-y-3 text-sm"> <div class="space-y-3 text-sm">
<div class="flex items-center gap-2 text-gray-700"> <div class="flex items-center gap-2 text-base-content/80">
<IconLucideUser class="w-4 h-4 text-primary" aria-hidden="true" /> <IconLucideUser class="w-4 h-4 text-primary" aria-hidden="true" />
<span class="font-medium">{{ site.contactName }}</span> <span class="font-medium">{{ site.contactName }}</span>
</div> </div>
<div class="flex items-center gap-2 text-gray-600"> <div class="flex items-center gap-2 text-base-content/60">
<IconLucidePhone class="w-4 h-4 text-secondary" aria-hidden="true" /> <IconLucidePhone class="w-4 h-4 text-secondary" aria-hidden="true" />
<span>{{ formattedContactPhone }}</span> <span>{{ formattedContactPhone }}</span>
</div> </div>
<div class="flex items-start gap-2 text-gray-600"> <div class="flex items-start gap-2 text-base-content/60">
<IconLucideMapPin class="w-4 h-4 text-accent mt-1" aria-hidden="true" /> <IconLucideMapPin class="w-4 h-4 text-accent mt-1" aria-hidden="true" />
<span> <span>
{{ site.contactAddress }}<br> {{ site.contactAddress }}<br>
@@ -29,7 +29,7 @@
</span> </span>
</div> </div>
<div class="flex items-center gap-2 text-gray-600"> <div class="flex items-center gap-2 text-base-content/60">
<IconLucideFactory class="w-4 h-4 text-blue-500" aria-hidden="true" /> <IconLucideFactory class="w-4 h-4 text-blue-500" aria-hidden="true" />
<span>{{ machineCount }} machine(s)</span> <span>{{ machineCount }} machine(s)</span>
</div> </div>

6
app/components/sites/SiteEditModal.vue
View File

@@ -3,7 +3,7 @@
<div class="modal-box max-w-md"> <div class="modal-box max-w-md">
<h3 class="font-bold text-lg mb-4"> <h3 class="font-bold text-lg mb-4">
{{ disabled ? 'Détails du site' : 'Modifier le site' }} {{ disabled ? 'Détails du site' : 'Modifier le site' }}
<span v-if="siteName" class="block text-sm font-normal text-gray-500">{{ siteName }}</span> <span v-if="siteName" class="block text-sm font-normal text-base-content/50">{{ siteName }}</span>
</h3> </h3>
<form class="space-y-4" @submit.prevent="emit('submit')"> <form class="space-y-4" @submit.prevent="emit('submit')">
<div class="form-control"> <div class="form-control">
@@ -28,7 +28,7 @@
<h4 class="font-semibold text-sm"> <h4 class="font-semibold text-sm">
Documents liés Documents liés
</h4> </h4>
<p class="text-xs text-gray-500"> <p class="text-xs text-base-content/50">
Ajoutez des documents (PDF, images...) relatifs à ce site. Ajoutez des documents (PDF, images...) relatifs à ce site.
</p> </p>
</div> </div>
@@ -74,7 +74,7 @@
<div class="font-medium"> <div class="font-medium">
{{ document.name }} {{ document.name }}
</div> </div>
<div class="text-xs text-gray-500"> <div class="text-xs text-base-content/50">
{{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }} {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
</div> </div>
</div> </div>

2
app/pages/comments.vue
View File

@@ -4,7 +4,7 @@
<h1 class="text-3xl font-semibold text-base-content"> <h1 class="text-3xl font-semibold text-base-content">
Commentaires Commentaires
</h1> </h1>
<p class="text-sm text-gray-500"> <p class="text-sm text-base-content/50">
Liste de tous les commentaires et tickets ouverts sur les fiches. Liste de tous les commentaires et tickets ouverts sur les fiches.
</p> </p>
</header> </header>

16
app/pages/component-catalog.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<main class="container mx-auto px-6 py-10 space-y-8"> <main class="container mx-auto px-6 py-10 space-y-8">
<header class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"> <header class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
<div> <div>
<h1 class="text-3xl font-semibold text-base-content">Catalogue des composants</h1> <h1 class="text-3xl font-bold text-base-content tracking-tight">Catalogue des composants</h1>
<p class="text-sm text-gray-500"> <p class="text-sm text-base-content/50 mt-1">
Consultez et gérez tous les composants existants. Consultez et gérez tous les composants existants.
</p> </p>
</div> </div>
@@ -11,17 +11,17 @@
<NuxtLink to="/component/create" class="btn btn-primary btn-sm md:btn-md"> <NuxtLink to="/component/create" class="btn btn-primary btn-sm md:btn-md">
Ajouter un composant Ajouter un composant
</NuxtLink> </NuxtLink>
<NuxtLink to="/component-category" class="btn btn-outline btn-sm md:btn-md"> <NuxtLink to="/component-category" class="btn btn-ghost btn-sm md:btn-md">
Gérer les catégories Gérer les catégories
</NuxtLink> </NuxtLink>
</div> </div>
</header> </header>
<section class="card border border-base-200 bg-base-100 shadow-sm"> <section class="card bg-base-100 shadow-sm">
<div class="card-body space-y-4"> <div class="card-body space-y-4">
<header class="flex flex-col gap-2"> <header class="flex flex-col gap-1">
<h2 class="text-xl font-semibold text-base-content">Composants créés</h2> <h2 class="text-xl font-bold text-base-content tracking-tight">Composants créés</h2>
<p class="text-sm text-base-content/70"> <p class="text-sm text-base-content/50">
Retrouvez ici tous les composants enregistrés, indépendamment de leur catégorie. Retrouvez ici tous les composants enregistrés, indépendamment de leur catégorie.
</p> </p>
</header> </header>

18
app/pages/component/[id]/edit.vue
View File

@@ -1,11 +1,12 @@
<template> <template>
<DocumentPreviewModal <div>
:document="previewDocument" <DocumentPreviewModal
:visible="previewVisible" :document="previewDocument"
:documents="componentDocuments" :visible="previewVisible"
@close="closePreview" :documents="componentDocuments"
/> @close="closePreview"
<main class="container mx-auto px-6 py-10"> />
<main class="container mx-auto px-6 py-10">
<div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center"> <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
<span class="loading loading-spinner loading-lg" aria-hidden="true" /> <span class="loading loading-spinner loading-lg" aria-hidden="true" />
<p class="text-sm text-base-content/70">Chargement du composant…</p> <p class="text-sm text-base-content/70">Chargement du composant…</p>
@@ -269,7 +270,8 @@
</div> </div>
</div> </div>
</section> </section>
</main> </main>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

2
app/pages/constructeurs.vue
View File

@@ -15,7 +15,7 @@
</button> </button>
</div> </div>
<div class="card bg-base-100 shadow-lg"> <div class="card bg-base-100 shadow-sm">
<div class="card-body space-y-4"> <div class="card-body space-y-4">
<DataTable <DataTable
:columns="columns" :columns="columns"

6
app/pages/documents.vue
View File

@@ -7,7 +7,7 @@
@close="closePreview" @close="closePreview"
/> />
<section class="card bg-base-100 shadow-lg"> <section class="card bg-base-100 shadow-sm">
<div class="card-body space-y-6"> <div class="card-body space-y-6">
<DataTable <DataTable
:columns="columns" :columns="columns"
@@ -68,7 +68,7 @@
</span> </span>
<div> <div>
<div class="font-semibold">{{ row.name }}</div> <div class="font-semibold">{{ row.name }}</div>
<div class="text-xs text-gray-500">{{ row.filename }}</div> <div class="text-xs text-base-content/50">{{ row.filename }}</div>
</div> </div>
</div> </div>
</template> </template>
@@ -88,7 +88,7 @@
<span v-else-if="row.composant">Composant &middot; {{ row.composant.name }}</span> <span v-else-if="row.composant">Composant &middot; {{ row.composant.name }}</span>
<span v-else-if="row.piece">Pi&egrave;ce &middot; {{ row.piece.name }}</span> <span v-else-if="row.piece">Pi&egrave;ce &middot; {{ row.piece.name }}</span>
<span v-else-if="row.product">Produit &middot; {{ row.product.name }}</span> <span v-else-if="row.product">Produit &middot; {{ row.product.name }}</span>
<span v-else class="text-gray-400">Non d&eacute;fini</span> <span v-else class="text-base-content/30">Non d&eacute;fini</span>
</div> </div>
</template> </template>

249
app/pages/index.vue
View File

@@ -1,55 +1,49 @@
<template> <template>
<main class="container mx-auto px-6 py-8"> <main class="container mx-auto px-6 py-8">
<!-- Hierarchical View -->
<div class="my-8"> <div class="my-8">
<!-- Header with Stats --> <!-- Header with Stats -->
<div class="flex justify-between items-center mb-6"> <div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between mb-8">
<div> <div>
<h2 class="text-2xl font-bold text-gray-800"> <h2 class="text-3xl font-bold text-base-content tracking-tight">
Vue d'ensemble Vue d'ensemble
</h2> </h2>
<p class="text-gray-600"> <p class="text-base-content/50 mt-1">
Machines organisées par site Machines organisées par site
</p> </p>
</div> </div>
<div class="stats shadow"> <div class="flex gap-3">
<div class="stat"> <div class="bg-base-100 rounded-xl border border-base-300/50 px-5 py-3 shadow-sm">
<div class="stat-title"> <p class="text-[0.65rem] font-semibold uppercase tracking-widest text-base-content/40 mb-0.5">Sites</p>
Sites <p class="text-2xl font-bold text-primary tracking-tight">{{ sites.length }}</p>
</div>
<div class="stat-value text-primary">
{{ sites.length }}
</div>
</div> </div>
<div class="stat"> <div class="bg-base-100 rounded-xl border border-base-300/50 px-5 py-3 shadow-sm">
<div class="stat-title"> <p class="text-[0.65rem] font-semibold uppercase tracking-widest text-base-content/40 mb-0.5">Machines</p>
Machines <p class="text-2xl font-bold text-secondary tracking-tight">{{ totalMachines }}</p>
</div>
<div class="stat-value text-secondary">
{{ totalMachines }}
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Filters --> <!-- Filters -->
<div class="card bg-base-100 shadow-lg mb-6"> <div class="card bg-base-100 shadow-sm mb-8">
<div class="card-body"> <div class="card-body py-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="form-control"> <div class="form-control">
<label class="label"> <label class="label">
<span class="label-text">Rechercher</span> <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Rechercher</span>
</label> </label>
<input <div class="relative">
v-model="searchTerm" <IconLucideSearch class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-base-content/30" aria-hidden="true" />
type="text" <input
placeholder="Nom de machine ou site..." v-model="searchTerm"
class="input input-bordered" type="text"
> placeholder="Nom de machine ou site..."
class="input input-bordered pl-10 w-full"
>
</div>
</div> </div>
<div class="form-control"> <div class="form-control">
<label class="label"> <label class="label">
<span class="label-text">Site</span> <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Site</span>
</label> </label>
<select v-model="selectedSiteFilter" class="select select-bordered"> <select v-model="selectedSiteFilter" class="select select-bordered">
<option value=""> <option value="">
@@ -69,30 +63,32 @@
</div> </div>
<!-- Loading State --> <!-- Loading State -->
<div v-if="loading" class="flex justify-center items-center py-12"> <div v-if="loading" class="flex justify-center items-center py-16">
<span class="loading loading-spinner loading-lg" /> <span class="loading loading-spinner loading-lg text-primary" />
</div> </div>
<!-- Hierarchical Machines View --> <!-- Empty State -->
<div v-else-if="filteredSites.length === 0" class="text-center py-12"> <div v-else-if="filteredSites.length === 0" class="text-center py-16">
<div class="max-w-md mx-auto"> <div class="max-w-sm mx-auto">
<IconLucideFactory <div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
class="w-16 h-16 mx-auto text-gray-400 mb-4" <IconLucideFactory
aria-hidden="true" class="w-8 h-8 text-base-content/30"
/> aria-hidden="true"
<h3 class="text-lg font-medium text-gray-900 mb-2"> />
</div>
<h3 class="text-lg font-semibold text-base-content mb-1">
Aucune machine trouvée Aucune machine trouvée
</h3> </h3>
<p class="text-gray-500 mb-4"> <p class="text-sm text-base-content/50 mb-6">
Commencez par ajouter des sites et des machines. Commencez par ajouter des sites et des machines.
</p> </p>
<div class="flex gap-2 justify-center"> <div class="flex gap-2 justify-center">
<button v-if="canEdit" class="btn btn-primary" @click="showAddSiteModal = true"> <button v-if="canEdit" class="btn btn-primary btn-sm" @click="showAddSiteModal = true">
Ajouter un site Ajouter un site
</button> </button>
<button <button
v-if="canEdit" v-if="canEdit"
class="btn btn-secondary" class="btn btn-ghost btn-sm"
@click="showAddMachineModal = true" @click="showAddMachineModal = true"
> >
Ajouter une machine Ajouter une machine
@@ -101,130 +97,108 @@
</div> </div>
</div> </div>
<div v-else class="space-y-6"> <!-- Sites List -->
<div v-else class="space-y-5">
<div <div
v-for="site in filteredSites" v-for="site in filteredSites"
:key="site.id" :key="site.id"
class="card bg-base-100 shadow-lg" class="card bg-base-100 shadow-sm overflow-hidden"
> >
<!-- Site Header -->
<div class="card-body"> <div class="card-body">
<div class="flex items-center justify-between mb-4"> <!-- Site Header -->
<div class="flex items-center gap-3"> <div class="flex items-start justify-between gap-4">
<div class="avatar placeholder"> <div class="flex items-start gap-4">
<div <div
class="bg-primary text-primary-content rounded-lg w-12 grid place-items-center" class="w-11 h-11 rounded-xl bg-primary/10 grid place-items-center shrink-0"
> >
<IconLucideMapPin class="w-6 h-6" aria-hidden="true" /> <IconLucideMapPin class="w-5 h-5 text-primary" aria-hidden="true" />
</div>
</div> </div>
<div> <div class="min-w-0">
<h3 class="text-xl font-bold"> <h3 class="text-lg font-bold text-base-content tracking-tight">
{{ site.name }} {{ site.name }}
</h3> </h3>
<div class="text-sm text-gray-600 space-y-1"> <div class="flex flex-wrap gap-x-4 gap-y-1 mt-1.5 text-sm text-base-content/50">
<div class="flex items-center gap-2"> <span v-if="site.contactName" class="flex items-center gap-1.5">
<IconLucideUser <IconLucideUser class="w-3.5 h-3.5" aria-hidden="true" />
class="w-4 h-4 text-primary" {{ site.contactName }}
aria-hidden="true" </span>
/> <span v-if="site.contactPhone" class="flex items-center gap-1.5">
<span class="font-medium">{{ site.contactName }}</span> <IconLucidePhone class="w-3.5 h-3.5" aria-hidden="true" />
</div> {{ formatPhoneDisplay(site.contactPhone) }}
<div class="flex items-center gap-2"> </span>
<IconLucidePhone <span v-if="site.contactCity" class="flex items-center gap-1.5">
class="w-4 h-4 text-secondary" <IconLucideMapPinned class="w-3.5 h-3.5" aria-hidden="true" />
aria-hidden="true" {{ site.contactPostalCode }} {{ site.contactCity }}
/> </span>
<span>{{ formatPhoneDisplay(site.contactPhone) }}</span>
</div>
<div class="flex items-start gap-2">
<IconLucideMapPinned
class="w-4 h-4 text-accent mt-1"
aria-hidden="true"
/>
<span>
{{ site.contactAddress }}<br>
{{ site.contactPostalCode }} {{ site.contactCity }}
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 shrink-0">
<div class="badge badge-primary badge-lg"> <span class="badge badge-primary badge-sm font-semibold">
{{ site.machines?.length || 0 }} machines {{ site.machines?.length || 0 }}
</div> </span>
<button <button
class="btn btn-ghost btn-sm" class="btn btn-ghost btn-xs btn-circle"
@click="toggleSiteCollapse(site.id)" @click="toggleSiteCollapse(site.id)"
> >
<IconLucideChevronDown <IconLucideChevronDown
class="w-5 h-5 transition-transform" class="w-4 h-4 transition-transform duration-200"
:class=" :class="collapsedSites.includes(site.id) ? 'rotate-180' : ''"
collapsedSites.includes(site.id) ? 'rotate-180' : ''
"
aria-hidden="true" aria-hidden="true"
/> />
</button> </button>
</div> </div>
</div> </div>
<!-- Machines List --> <!-- Machines Grid -->
<div <div
v-if=" v-if="
!collapsedSites.includes(site.id) && !collapsedSites.includes(site.id) &&
site.machines && site.machines &&
site.machines.length > 0 site.machines.length > 0
" "
class="space-y-3" class="mt-4 pt-4 border-t border-base-200/80"
> >
<div class="divider" /> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div <div
v-for="machine in site.machines" v-for="machine in site.machines"
:key="machine.id" :key="machine.id"
class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer" class="group rounded-xl border border-base-300/40 bg-base-200/30 hover:bg-base-200/60 hover:border-primary/20 transition-all cursor-pointer p-4"
@click="viewMachineDetails(machine)" @click="viewMachineDetails(machine)"
> >
<div class="card-body p-4"> <div class="flex items-center justify-between mb-2">
<div class="flex items-center justify-between mb-2"> <h4 class="font-semibold text-sm text-base-content group-hover:text-primary transition-colors truncate">
<h4 class="font-semibold text-sm"> {{ machine.name }}
{{ machine.name }} </h4>
</h4> </div>
</div>
<div class="space-y-1 text-xs text-gray-600"> <div v-if="machine.reference" class="flex items-center gap-1.5 text-xs text-base-content/40 mb-3">
<div <IconLucideTag class="w-3 h-3" aria-hidden="true" />
v-if="machine.reference" <span>{{ machine.reference }}</span>
class="flex items-center gap-1" </div>
>
<IconLucideTag class="w-3 h-3" aria-hidden="true" />
<span>{{ machine.reference }}</span>
</div>
</div>
<div class="card-actions justify-end mt-3"> <div class="flex items-center gap-1.5 justify-end">
<button <button
v-if="canEdit" v-if="canEdit"
class="btn btn-xs btn-outline" class="btn btn-xs btn-ghost text-base-content/40 hover:text-base-content opacity-0 group-hover:opacity-100 transition-opacity"
@click.stop="editMachine(machine)" @click.stop="editMachine(machine)"
> >
Modifier Modifier
</button> </button>
<button <button
v-if="canEdit" v-if="canEdit"
class="btn btn-xs btn-error" class="btn btn-xs btn-ghost text-error/50 hover:text-error opacity-0 group-hover:opacity-100 transition-opacity"
@click.stop="confirmDeleteMachine(machine)" @click.stop="confirmDeleteMachine(machine)"
> >
Supprimer Supprimer
</button> </button>
<NuxtLink <NuxtLink
:to="`/machine/${machine.id}`" :to="`/machine/${machine.id}`"
class="btn btn-xs btn-primary" class="btn btn-xs btn-primary btn-outline opacity-0 group-hover:opacity-100 transition-opacity"
> @click.stop
Détails >
</NuxtLink> Détails
</div> </NuxtLink>
</div> </div>
</div> </div>
</div> </div>
@@ -236,17 +210,17 @@
!collapsedSites.includes(site.id) && !collapsedSites.includes(site.id) &&
(!site.machines || site.machines.length === 0) (!site.machines || site.machines.length === 0)
" "
class="text-center py-6" class="text-center py-8 mt-4 border-t border-base-200/80"
> >
<div class="text-gray-400 mb-2"> <div class="w-10 h-10 rounded-xl bg-base-200 grid place-items-center mx-auto mb-3">
<IconLucideFactory class="w-8 h-8 mx-auto" aria-hidden="true" /> <IconLucideFactory class="w-5 h-5 text-base-content/25" aria-hidden="true" />
</div> </div>
<p class="text-sm text-gray-500 mb-3"> <p class="text-sm text-base-content/40 mb-3">
Aucune machine dans ce site Aucune machine dans ce site
</p> </p>
<button <button
v-if="canEdit" v-if="canEdit"
class="btn btn-sm btn-primary" class="btn btn-sm btn-primary btn-outline"
@click="addMachineToSite(site)" @click="addMachineToSite(site)"
> >
Ajouter une machine Ajouter une machine
@@ -290,6 +264,7 @@ import IconLucidePhone from '~icons/lucide/phone'
import IconLucideMapPinned from '~icons/lucide/map-pinned' import IconLucideMapPinned from '~icons/lucide/map-pinned'
import IconLucideChevronDown from '~icons/lucide/chevron-down' import IconLucideChevronDown from '~icons/lucide/chevron-down'
import IconLucideTag from '~icons/lucide/tag' import IconLucideTag from '~icons/lucide/tag'
import IconLucideSearch from '~icons/lucide/search'
import { formatPhone } from '~/utils/formatters/phone' import { formatPhone } from '~/utils/formatters/phone'
import { extractRelationId } from '~/shared/apiRelations' import { extractRelationId } from '~/shared/apiRelations'
@@ -410,12 +385,10 @@ const toggleSiteCollapse = (siteId) => {
} }
const viewMachineDetails = (machine) => { const viewMachineDetails = (machine) => {
// Navigation vers la page de détails de la machine
navigateTo(`/machine/${machine.id}`) navigateTo(`/machine/${machine.id}`)
} }
const editMachine = (machine) => { const editMachine = (machine) => {
// Rediriger vers la page d'édition de la machine
navigateTo(`/machine/${machine.id}?edit=true`) navigateTo(`/machine/${machine.id}?edit=true`)
} }

38
app/pages/machine/[id].vue
View File

@@ -1,8 +1,9 @@
<template> <template>
<main class="container mx-auto px-6 py-8"> <div>
<main class="container mx-auto px-6 py-8">
<!-- Loading State --> <!-- Loading State -->
<div v-if="d.loading.value" class="flex justify-center items-center py-12"> <div v-if="d.loading.value" class="flex justify-center items-center py-16">
<span class="loading loading-spinner loading-lg"></span> <span class="loading loading-spinner loading-lg text-primary"></span>
</div> </div>
<!-- Machine Details --> <!-- Machine Details -->
@@ -139,26 +140,29 @@
<!-- Error State --> <!-- Error State -->
<div v-else class="text-center py-12"> <div v-else class="text-center py-12">
<div class="max-w-md mx-auto"> <div class="max-w-md mx-auto">
<IconLucideAlertTriangle class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" /> <div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
<h3 class="text-lg font-medium text-gray-900 mb-2">Machine non trouvée</h3> <IconLucideAlertTriangle class="w-8 h-8 text-base-content/30" aria-hidden="true" />
<p class="text-gray-500 mb-4">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p> </div>
<h3 class="text-lg font-semibold text-base-content mb-1">Machine non trouvée</h3>
<p class="text-sm text-base-content/50 mb-6">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
<NuxtLink to="/machines" class="btn btn-primary"> <NuxtLink to="/machines" class="btn btn-primary">
Retour aux machines Retour aux machines
</NuxtLink> </NuxtLink>
</div> </div>
</div> </div>
</main> </main>
<MachinePrintSelectionModal <MachinePrintSelectionModal
:open="d.printModalOpen.value" :open="d.printModalOpen.value"
:selection="d.printSelection" :selection="d.printSelection"
:components="d.components.value" :components="d.components.value"
:pieces="d.machinePieces.value" :pieces="d.machinePieces.value"
@close="d.closePrintModal" @close="d.closePrintModal"
@confirm="d.handlePrintConfirm" @confirm="d.handlePrintConfirm"
@select-all="d.setAllPrintSelection(true)" @select-all="d.setAllPrintSelection(true)"
@deselect-all="d.setAllPrintSelection(false)" @deselect-all="d.setAllPrintSelection(false)"
/> />
</div>
</template> </template>
<script setup> <script setup>

4
app/pages/machines/index.vue
View File

@@ -11,7 +11,7 @@
</NuxtLink> </NuxtLink>
</div> </div>
<div class="card bg-base-100 shadow-lg mb-6"> <div class="card bg-base-100 shadow-sm mb-6">
<div class="card-body"> <div class="card-body">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control"> <div class="form-control">
@@ -65,7 +65,7 @@
<div <div
v-for="machine in filteredMachines" v-for="machine in filteredMachines"
:key="machine.id" :key="machine.id"
class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow cursor-pointer" class="card bg-base-100 shadow-sm hover:shadow-xl transition-shadow cursor-pointer"
@click="viewMachineDetails(machine)" @click="viewMachineDetails(machine)"
> >
<div class="card-body"> <div class="card-body">

2
app/pages/machines/new.vue
View File

@@ -20,7 +20,7 @@
</div> </div>
<form v-else class="space-y-6" @submit.prevent="c.finalizeMachineCreation"> <form v-else class="space-y-6" @submit.prevent="c.finalizeMachineCreation">
<div class="card bg-base-100 shadow-lg"> <div class="card bg-base-100 shadow-sm">
<div class="card-body space-y-6"> <div class="card-body space-y-6">
<!-- Basic fields --> <!-- Basic fields -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

2
app/pages/pieces-catalog.vue
View File

@@ -72,7 +72,7 @@
<template #cell-description="{ row }"> <template #cell-description="{ row }">
<div v-if="row.piece.description" class="group relative"> <div v-if="row.piece.description" class="group relative">
<span class="block cursor-help truncate">{{ row.piece.description }}</span> <span class="block cursor-help truncate">{{ row.piece.description }}</span>
<div class="pointer-events-none invisible absolute left-0 top-full z-50 mt-1 max-w-sm overflow-hidden rounded-lg border border-base-300 bg-base-100 p-3 text-sm shadow-lg group-hover:pointer-events-auto group-hover:visible"> <div class="pointer-events-none invisible absolute left-0 top-full z-50 mt-1 max-w-sm overflow-hidden rounded-lg border border-base-300 bg-base-100 p-3 text-sm shadow-sm group-hover:pointer-events-auto group-hover:visible">
<p class="break-words whitespace-pre-wrap">{{ row.piece.description }}</p> <p class="break-words whitespace-pre-wrap">{{ row.piece.description }}</p>
</div> </div>
</div> </div>

18
app/pages/pieces/[id]/edit.vue
View File

@@ -1,11 +1,12 @@
<template> <template>
<DocumentPreviewModal <div>
:document="previewDocument" <DocumentPreviewModal
:visible="previewVisible" :document="previewDocument"
:documents="pieceDocuments" :visible="previewVisible"
@close="closePreview" :documents="pieceDocuments"
/> @close="closePreview"
<main class="container mx-auto px-6 py-10"> />
<main class="container mx-auto px-6 py-10">
<div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center"> <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
<span class="loading loading-spinner loading-lg" aria-hidden="true" /> <span class="loading loading-spinner loading-lg" aria-hidden="true" />
<p class="text-sm text-base-content/70">Chargement de la pièce…</p> <p class="text-sm text-base-content/70">Chargement de la pièce…</p>
@@ -265,7 +266,8 @@
</div> </div>
</div> </div>
</section> </section>
</main> </main>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

18
app/pages/product/[id]/edit.vue
View File

@@ -1,11 +1,12 @@
<template> <template>
<DocumentPreviewModal <div>
:document="previewDocument" <DocumentPreviewModal
:visible="previewVisible" :document="previewDocument"
:documents="productDocuments" :visible="previewVisible"
@close="closePreview" :documents="productDocuments"
/> @close="closePreview"
<main class="container mx-auto px-6 py-10"> />
<main class="container mx-auto px-6 py-10">
<div v-if="loading" class="flex flex-col items-center gap-4 py-16 text-center"> <div v-if="loading" class="flex flex-col items-center gap-4 py-16 text-center">
<span class="loading loading-spinner loading-lg" aria-hidden="true" /> <span class="loading loading-spinner loading-lg" aria-hidden="true" />
<p class="text-sm text-base-content/70">Chargement du produit…</p> <p class="text-sm text-base-content/70">Chargement du produit…</p>
@@ -204,7 +205,8 @@
</div> </div>
</div> </div>
</section> </section>
</main> </main>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

6
app/pages/sites.vue
View File

@@ -24,11 +24,11 @@
<div v-else-if="sites.length === 0" class="text-center py-12"> <div v-else-if="sites.length === 0" class="text-center py-12">
<div class="max-w-md mx-auto"> <div class="max-w-md mx-auto">
<IconLucideMapPin class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" /> <IconLucideMapPin class="w-16 h-16 mx-auto text-base-content/30 mb-4" aria-hidden="true" />
<h3 class="text-lg font-medium text-gray-900 mb-2"> <h3 class="text-lg font-medium text-base-content mb-2">
Aucun site trouvé Aucun site trouvé
</h3> </h3>
<p class="text-gray-500 mb-4"> <p class="text-base-content/50 mb-4">
Commencez par ajouter votre premier site. Commencez par ajouter votre premier site.
</p> </p>
<button v-if="canEdit" class="btn btn-primary" @click="openCreateSiteModal"> <button v-if="canEdit" class="btn btn-primary" @click="openCreateSiteModal">