refactor(ui) : improve styling, layout and responsive across all components
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:
@@ -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`)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user