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

feat(frontend): replace inline icons with lucide components

Browse Source
This commit is contained in:
Matthieu
2025-09-19 08:19:09 +02:00
parent dec4d451bb
commit 32dd8fab58
24 changed files with 519 additions and 901 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
app/pages/index.vue
View File

@@ -70,9 +70,7 @@
<!-- Hierarchical Machines View -->
<div v-else-if="filteredSites.length === 0" class="text-center py-12">
<div class="max-w-md mx-auto">
<svg class="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
</svg>
<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">Aucune machine trouvée</h3>
<p class="text-gray-500 mb-4">Commencez par ajouter des sites et des machines.</p>
<div class="flex gap-2 justify-center">
@@ -97,32 +95,23 @@
<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">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<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>
</div>
<div>
<h3 class="text-xl font-bold">{{ site.name }}</h3>
<div class="text-sm text-gray-600 space-y-1">
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 15c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<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">
<svg class="w-4 h-4 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3l2 3h6l2-3h3a2 2 0 012 2v13a2 2 0 01-2 2H5a2 2 0 01-2-2V5z" />
</svg>
<IconLucidePhone class="w-4 h-4 text-secondary" aria-hidden="true" />
<span>{{ site.contactPhone }}</span>
</div>
<div class="flex items-start gap-2">
<svg class="w-4 h-4 text-accent mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.38 0 2.5-1.12 2.5-2.5S13.38 6 12 6s-2.5 1.12-2.5 2.5S10.62 11 12 11zm0 0c-2.21 0-4 1.343-4 3v1.5h8V14c0-1.657-1.79-3-4-3z" />
</svg>
<IconLucideMapPinned class="w-4 h-4 text-accent mt-1" aria-hidden="true" />
<span>
{{ site.contactAddress }}<br />
{{ site.contactPostalCode }} {{ site.contactCity }}
@@ -134,9 +123,11 @@
<div class="flex items-center gap-2">
<div class="badge badge-primary badge-lg">{{ site.machines?.length || 0 }} machines</div>
<button @click="toggleSiteCollapse(site.id)" class="btn btn-ghost btn-sm">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
<IconLucideChevronDown
class="w-5 h-5 transition-transform"
:class="collapsedSites.includes(site.id) ? 'rotate-180' : ''"
aria-hidden="true"
/>
</button>
</div>
</div>
@@ -161,23 +152,17 @@
<div class="space-y-1 text-xs text-gray-600">
<div class="flex items-center gap-1">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
</svg>
<IconLucideSettings2 class="w-3 h-3" aria-hidden="true" />
<span>{{ machine.typeMachine?.name || 'Type inconnu' }}</span>
</div>
<div v-if="machine.reference" class="flex items-center gap-1">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
</svg>
<IconLucideTag class="w-3 h-3" aria-hidden="true" />
<span>{{ machine.reference }}</span>
</div>
<div v-if="machine.emplacement" class="flex items-center gap-1">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
</svg>
<IconLucideBuilding class="w-3 h-3" aria-hidden="true" />
<span>{{ machine.emplacement }}</span>
</div>
</div>
@@ -201,9 +186,7 @@
<!-- Empty Site State -->
<div v-else-if="!collapsedSites.includes(site.id) && (!site.machines || site.machines.length === 0)" class="text-center py-6">
<div class="text-gray-400 mb-2">
<svg class="w-8 h-8 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
</svg>
<IconLucideFactory class="w-8 h-8 mx-auto" aria-hidden="true" />
</div>
<p class="text-sm text-gray-500 mb-3">Aucune machine dans ce site</p>
<button @click="addMachineToSite(site)" class="btn btn-sm btn-primary">
@@ -423,6 +406,15 @@ import { useSites } from '~/composables/useSites'
import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
import { useMachines } from '~/composables/useMachines'
import { useToast } from '~/composables/useToast'
import IconLucideFactory from '~icons/lucide/factory'
import IconLucideMapPin from '~icons/lucide/map-pin'
import IconLucideUser from '~icons/lucide/user'
import IconLucidePhone from '~icons/lucide/phone'
import IconLucideMapPinned from '~icons/lucide/map-pinned'
import IconLucideChevronDown from '~icons/lucide/chevron-down'
import IconLucideSettings2 from '~icons/lucide/settings-2'
import IconLucideTag from '~icons/lucide/tag'
import IconLucideBuilding from '~icons/lucide/building'
const { sites, loading, loadSites, createSite } = useSites()