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

2
app/pages/comments.vue
View File

@@ -4,7 +4,7 @@
<h1 class="text-3xl font-semibold text-base-content">
Commentaires
</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.
</p>
</header>

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

@@ -1,9 +1,9 @@
<template>
<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>
<h1 class="text-3xl font-semibold text-base-content">Catalogue des composants</h1>
<p class="text-sm text-gray-500">
<h1 class="text-3xl font-bold text-base-content tracking-tight">Catalogue des composants</h1>
<p class="text-sm text-base-content/50 mt-1">
Consultez et gérez tous les composants existants.
</p>
</div>
@@ -11,17 +11,17 @@
<NuxtLink to="/component/create" class="btn btn-primary btn-sm md:btn-md">
Ajouter un composant
</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
</NuxtLink>
</div>
</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">
<header class="flex flex-col gap-2">
<h2 class="text-xl font-semibold text-base-content">Composants créés</h2>
<p class="text-sm text-base-content/70">
<header class="flex flex-col gap-1">
<h2 class="text-xl font-bold text-base-content tracking-tight">Composants créés</h2>
<p class="text-sm text-base-content/50">
Retrouvez ici tous les composants enregistrés, indépendamment de leur catégorie.
</p>
</header>

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

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

2
app/pages/constructeurs.vue
View File

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

6
app/pages/documents.vue
View File

@@ -7,7 +7,7 @@
@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">
<DataTable
:columns="columns"
@@ -68,7 +68,7 @@
</span>
<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>
</template>
@@ -88,7 +88,7 @@
<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.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>
</template>

249
app/pages/index.vue
View File

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

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

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

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

@@ -11,7 +11,7 @@
</NuxtLink>
</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="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
@@ -65,7 +65,7 @@
<div
v-for="machine in filteredMachines"
: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)"
>
<div class="card-body">

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

@@ -20,7 +20,7 @@
</div>
<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">
<!-- Basic fields -->
<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 }">
<div v-if="row.piece.description" class="group relative">
<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>
</div>
</div>

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

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

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

@@ -1,11 +1,12 @@
<template>
<DocumentPreviewModal
:document="previewDocument"
:visible="previewVisible"
:documents="productDocuments"
@close="closePreview"
/>
<main class="container mx-auto px-6 py-10">
<div>
<DocumentPreviewModal
:document="previewDocument"
:visible="previewVisible"
:documents="productDocuments"
@close="closePreview"
/>
<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">
<span class="loading loading-spinner loading-lg" aria-hidden="true" />
<p class="text-sm text-base-content/70">Chargement du produit…</p>
@@ -204,7 +205,8 @@
</div>
</div>
</section>
</main>
</main>
</div>
</template>
<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 class="max-w-md mx-auto">
<IconLucideMapPin class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
<h3 class="text-lg font-medium text-gray-900 mb-2">
<IconLucideMapPin class="w-16 h-16 mx-auto text-base-content/30 mb-4" aria-hidden="true" />
<h3 class="text-lg font-medium text-base-content mb-2">
Aucun site trouvé
</h3>
<p class="text-gray-500 mb-4">
<p class="text-base-content/50 mb-4">
Commencez par ajouter votre premier site.
</p>
<button v-if="canEdit" class="btn btn-primary" @click="openCreateSiteModal">