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

16
app/components/ComponentItem.vue
View File

@@ -50,7 +50,7 @@
<div v-show="!isCollapsed" class="space-y-4">
<!-- 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="form-control">
<label class="label"><span class="label-text font-medium">Nom</span></label>
@@ -111,7 +111,7 @@
<span class="font-medium">{{ constructeur.name }}</span>
<span
v-if="formatConstructeurContact(constructeur)"
class="text-xs text-gray-500"
class="text-xs text-base-content/50"
>
{{ formatConstructeurContact(constructeur) }}
</span>
@@ -220,9 +220,9 @@
@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">
<h4 class="font-semibold text-sm text-gray-700">
<h4 class="font-semibold text-sm text-base-content/80">
Documents
</h4>
<span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
@@ -230,7 +230,7 @@
</span>
</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...
</p>
@@ -254,7 +254,7 @@
<!-- Component Pieces -->
<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
</h4>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
@@ -272,10 +272,10 @@
<!-- Sub Components -->
<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
</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
v-for="subComponent in childComponents"
:key="subComponent.id"

2
app/components/CustomFieldsDisplay.vue
View File

@@ -1,6 +1,6 @@
<template>
<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
</h4>
<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">
<h3 class="font-bold text-xl truncate">
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 }}
</span>
</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>
</p>
</div>
@@ -68,7 +68,7 @@
<template v-else-if="previewType === 'text'">
<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" />
Chargement du document...
</div>
@@ -82,7 +82,7 @@
</template>
<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.
</div>
</template>

6
app/components/DocumentUpload.vue
View File

@@ -13,7 +13,7 @@
<h3 class="font-semibold">
{{ title }}
</h3>
<p class="text-sm text-gray-500">
<p class="text-sm text-base-content/50">
{{ subtitle }}
</p>
</div>
@@ -22,7 +22,7 @@
<button type="button" class="btn btn-primary btn-sm" @click="triggerFileDialog">
Sélectionner des fichiers
</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>
<input
@@ -54,7 +54,7 @@
</div>
<div class="flex flex-col">
<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>
<button type="button" class="btn btn-ghost btn-xs" @click="removeFile(file)">

4
app/components/ModelStructureViewer.vue
View File

@@ -1,10 +1,10 @@
<template>
<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.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.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
</span>
</div>

10
app/components/PageHero.vue
View File

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

10
app/components/PieceItem.vue
View File

@@ -52,7 +52,7 @@
</div>
<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>
<span class="font-medium">Référence:</span>
@@ -82,7 +82,7 @@
</span>
<span
v-if="formatConstructeurContact(constructeur)"
class="text-xs text-gray-500"
class="text-xs text-base-content/50"
>
{{ formatConstructeurContact(constructeur) }}
</span>
@@ -186,9 +186,9 @@
@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">
<h5 class="text-sm font-medium text-gray-700">Documents</h5>
<h5 class="text-sm font-medium text-base-content/80">Documents</h5>
<span
v-if="isEditMode && selectedFiles.length"
class="badge badge-outline"
@@ -200,7 +200,7 @@
</span>
</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...
</p>

4
app/components/PieceModelStructureEditor.vue
View File

@@ -10,7 +10,7 @@
</p>
</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.
</p>
@@ -76,7 +76,7 @@
Champs personnalisés
</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.
</p>

16
app/components/StructureNodeEditor.vue
View File

@@ -9,7 +9,7 @@
</span>
</label>
<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.
</p>
</template>
@@ -31,7 +31,7 @@
{{ formatComponentTypeOption(type) }}
</option>
</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' }}
</p>
<div v-if="!isRoot" class="form-control mt-2">
@@ -73,7 +73,7 @@
<h4 :class="headingClass">
{{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }}
</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.
</p>
<div v-else class="space-y-2">
@@ -159,7 +159,7 @@
<h4 :class="headingClass">
{{ isRoot ? 'Produits inclus par défaut' : 'Produits' }}
</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.
</p>
<div v-else class="space-y-2">
@@ -230,7 +230,7 @@
<h4 :class="headingClass">
{{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
</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.
</p>
<div v-else class="space-y-2">
@@ -276,7 +276,7 @@
</option>
</select>
</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' }}
</p>
</div>
@@ -300,10 +300,10 @@
<section v-if="canManageSubcomponents || hasSubcomponents" class="space-y-3">
<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.
</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.
</p>
<div v-else class="space-y-3">

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

@@ -1,9 +1,9 @@
<template>
<div
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
</h5>
<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) -->
<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) -->
<div
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>
<table :class="['table table-sm md:table-md', tableClass]">
<thead>
@@ -175,7 +175,7 @@
</tr>
<!-- Expanded 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" />
</td>
</tr>

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

@@ -9,11 +9,11 @@
</button>
</div>
<p class="text-sm text-gray-500">
<p class="text-sm text-base-content/50">
{{ labels.description }}
</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 }}
</div>

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

@@ -41,11 +41,11 @@
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"
>
<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" />
Recherche en cours…
</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 }}
</div>
<ul v-else class="flex flex-col">
@@ -69,7 +69,7 @@
{{ resolveLabel(option) }}
</slot>
</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">
{{ resolveDescription(option) }}
</slot>

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

@@ -93,7 +93,7 @@
<!-- Empty state: component variant -->
<p
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.
</p>

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

@@ -23,7 +23,7 @@
@blur="onBlur"
@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 }}
</p>
<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>
<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">
<!-- Mobile hamburger menu -->
<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" />
</div>
<ul
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">
<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')"
>
<IconLucideSettings class="w-4 h-4" aria-hidden="true" />
@@ -24,7 +24,7 @@
<li v-for="link in simpleLinks" :key="link.to">
<NuxtLink
: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)"
>
<component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
@@ -40,7 +40,7 @@
>
<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)"
:aria-expanded="openDropdown === group.id + '-mobile'"
@click="toggleDropdown(group.id + '-mobile')"
@@ -52,7 +52,7 @@
{{ group.label }}
</span>
<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' : ''"
aria-hidden="true"
/>
@@ -60,12 +60,12 @@
<Transition name="nav-dropdown-mobile">
<ul
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">
<NuxtLink
: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)"
>
{{ child.label }}
@@ -81,30 +81,28 @@
</div>
<!-- Logo -->
<div class="flex items-center space-x-3">
<div class="avatar">
<div class="w-14">
<img
:src="logoSrc"
alt="Logo Malio"
class="h-full w-full object-contain"
/>
</div>
<NuxtLink to="/" class="flex items-center gap-2.5 group">
<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">
<img
:src="logoSrc"
alt="Logo Malio"
class="h-full w-full object-contain"
/>
</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
</NuxtLink>
</div>
</span>
</NuxtLink>
</div>
<!-- Desktop navbar -->
<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 -->
<li v-for="link in simpleLinks" :key="link.to">
<NuxtLink
: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)"
>
<component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
@@ -124,7 +122,7 @@
>
<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)"
:aria-expanded="openDropdown === 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" />
{{ group.label }}
<IconLucideChevronRight
class="h-4 w-4 transition-transform"
:class="openDropdown === group.id + '-desktop' ? 'rotate-90' : ''"
<IconLucideChevronDown
class="h-3.5 w-3.5 transition-transform duration-200"
:class="openDropdown === group.id + '-desktop' ? 'rotate-180' : ''"
aria-hidden="true"
/>
</button>
<Transition name="nav-dropdown-desktop">
<ul
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">
<NuxtLink
: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)"
>
{{ child.label }}
@@ -164,13 +162,13 @@
<!-- Navbar end -->
<div class="navbar-end">
<div class="flex items-center gap-2">
<div class="flex items-center gap-1.5">
<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"
@click="$emit('open-settings')"
>
<IconLucideSettings class="w-5 h-5" aria-hidden="true" />
<IconLucideSettings class="w-4 h-4" aria-hidden="true" />
</button>
<ClientOnly>
@@ -178,7 +176,7 @@
<div
tabindex="0"
role="button"
class="btn btn-ghost btn-circle avatar placeholder indicator"
class="btn btn-ghost btn-circle btn-sm avatar placeholder indicator"
>
<span
v-if="unresolvedCount > 0"
@@ -187,47 +185,49 @@
{{ unresolvedCount }}
</span>
<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
class="flex h-full w-full items-center justify-center text-sm font-semibold leading-none tracking-tight"
>
<span class="text-xs font-semibold leading-none tracking-tight">
{{ activeProfileInitials }}
</span>
</div>
</div>
<ul
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">
Connecté en tant que<br />
<span class="font-semibold text-base-content">{{ activeProfileLabel }}</span>
<span class="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</span>
<li class="px-3 py-2">
<div class="flex flex-col gap-1 pointer-events-none">
<span class="text-xs text-base-content/50">Connecté en tant que</span>
<span class="font-semibold text-sm text-base-content">{{ activeProfileLabel }}</span>
<span class="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</span>
</div>
</li>
<div class="divider my-0.5 px-2" />
<li v-if="isAdmin">
<NuxtLink to="/admin" class="justify-between">
<NuxtLink to="/admin" class="rounded-lg justify-between text-sm">
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>
</li>
<li>
<NuxtLink to="/comments" class="justify-between">
<NuxtLink to="/comments" class="rounded-lg justify-between text-sm">
Commentaires
<span v-if="unresolvedCount > 0" class="badge badge-warning badge-xs">
{{ unresolvedCount }}
</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>
</li>
<div class="divider my-0.5 px-2" />
<li>
<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')"
>
Déconnexion
<IconLucideLogOut class="w-4 h-4" aria-hidden="true" />
<IconLucideLogOut class="w-3.5 h-3.5" aria-hidden="true" />
</button>
</li>
</ul>
@@ -248,6 +248,7 @@ import { useComments } from '~/composables/useComments'
import IconLucideMenu from '~icons/lucide/menu'
import IconLucideSettings from '~icons/lucide/settings'
import IconLucideChevronRight from '~icons/lucide/chevron-right'
import IconLucideChevronDown from '~icons/lucide/chevron-down'
import IconLucideLogOut from '~icons/lucide/log-out'
import IconLucideLayoutDashboard from '~icons/lucide/layout-dashboard'
import IconLucideFactory from '~icons/lucide/factory'
@@ -365,19 +366,19 @@ const isGroupActive = (group: NavGroup) => {
const linkClass = (link: NavLink) => {
return isActive(link.to)
? '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) => {
return isGroupActive(group)
? '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) => {
return isActive(child.to)
? '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(() => {
@@ -418,12 +419,12 @@ const activeProfileInitials = computed(() => {
.nav-dropdown-desktop-enter-from,
.nav-dropdown-desktop-leave-to {
opacity: 0;
transform: translateY(0.25rem);
transform: translateY(4px) scale(0.98);
}
.nav-dropdown-desktop-enter-to,
.nav-dropdown-desktop-leave-from {
opacity: 1;
transform: translateY(0);
transform: translateY(0) scale(1);
}
.nav-dropdown-mobile-enter-active,

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

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

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

@@ -1,5 +1,5 @@
<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="flex items-center justify-between">
<div>

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

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

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

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

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

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

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

@@ -11,17 +11,17 @@
</div>
<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" />
<span class="font-medium">{{ site.contactName }}</span>
</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" />
<span>{{ formattedContactPhone }}</span>
</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" />
<span>
{{ site.contactAddress }}<br>
@@ -29,7 +29,7 @@
</span>
</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" />
<span>{{ machineCount }} machine(s)</span>
</div>

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

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