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

feat(ui) : add site colors, dark mode toggle and card styling improvements

Browse Source 
- Site color field with color picker in create/edit modals
- Dark mode theme (mytheme-dark) with toggle in navbar
- Stronger site color visibility on cards (gradient, top border, badges)
- Bigger action buttons (btn-sm) on machine cards
- White card backgrounds with proper dark mode support

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matthieu
2026-03-09 15:51:29 +01:00
parent 7e67b124f3
commit b0124c11ba
24 changed files with 697 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -95,7 +95,7 @@
</template>
<template #cell-actions="{ row }">
<div class="flex items-center gap-2">
<div class="flex items-center justify-end gap-2">
<NuxtLink
:to="`/component/${row.component.id}/edit`"
class="btn btn-ghost btn-xs"
@@ -105,7 +105,7 @@
<button
v-if="canEdit"
type="button"
class="btn btn-error btn-xs"
class="btn btn-ghost btn-xs text-error"
:disabled="loadingComposants"
@click="handleDeleteComponent(row.component)"
>

4
app/pages/constructeurs.vue
View File

@@ -49,11 +49,11 @@
</template>
<template #cell-actions="{ row }">
<div class="flex justify-end gap-2">
<div class="flex items-center justify-end gap-2">
<button class="btn btn-ghost btn-xs" @click="openEditModal(row)">
{{ canEdit ? 'Modifier' : 'Consulter' }}
</button>
<button v-if="canEdit" class="btn btn-error btn-xs" @click="confirmDelete(row)">
<button v-if="canEdit" class="btn btn-ghost btn-xs text-error" @click="confirmDelete(row)">
Supprimer
</button>
</div>

29
app/pages/index.vue
View File

@@ -102,19 +102,26 @@
<div
v-for="site in filteredSites"
:key="site.id"
class="card bg-base-100 shadow-sm overflow-hidden"
class="card site-card shadow-md overflow-hidden"
:style="{
borderTop: site.color ? `4px solid ${site.color}` : '4px solid transparent',
background: site.color ? `linear-gradient(160deg, ${site.color}30 0%, ${site.color}08 40%, var(--color-base-100) 100%)` : undefined,
}"
>
<div class="card-body">
<!-- 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"
class="w-11 h-11 rounded-xl grid place-items-center shrink-0"
:style="{ backgroundColor: site.color ? site.color + '40' : 'oklch(var(--p) / 0.1)', border: site.color ? `2px solid ${site.color}60` : 'none' }"
>
<IconLucideMapPin class="w-5 h-5 text-primary" aria-hidden="true" />
<IconLucideMapPin class="w-5 h-5" :style="{ color: site.color || 'oklch(var(--p))' }" aria-hidden="true" />
</div>
<div class="min-w-0">
<h3 class="text-lg font-bold text-base-content tracking-tight">
<h3
class="text-lg font-bold tracking-tight text-base-content"
>
{{ site.name }}
</h3>
<div class="flex flex-wrap gap-x-4 gap-y-1 mt-1.5 text-sm text-base-content/50">
@@ -134,7 +141,11 @@
</div>
</div>
<div class="flex items-center gap-2 shrink-0">
<span class="badge badge-primary badge-sm font-semibold">
<span
class="badge font-bold"
:style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
:class="!site.color ? 'badge-primary' : ''"
>
{{ site.machines?.length || 0 }}
</span>
<button
@@ -163,7 +174,7 @@
<div
v-for="machine in site.machines"
:key="machine.id"
class="group flex flex-col 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"
class="group flex flex-col rounded-xl border border-base-300/40 bg-base-100 shadow-sm hover:shadow-md hover:border-primary/20 transition-all cursor-pointer p-4"
@click="viewMachineDetails(machine)"
>
<div class="flex items-center justify-between mb-2">
@@ -180,21 +191,21 @@
<div class="mt-auto pt-3 flex items-center justify-end gap-2">
<button
v-if="canEdit"
class="btn btn-ghost btn-xs"
class="btn btn-ghost btn-sm"
@click.stop="editMachine(machine)"
>
Modifier
</button>
<button
v-if="canEdit"
class="btn btn-ghost btn-xs text-error"
class="btn btn-ghost btn-sm text-error"
@click.stop="confirmDeleteMachine(machine)"
>
Supprimer
</button>
<NuxtLink
:to="`/machine/${machine.id}`"
class="btn btn-primary btn-xs"
class="btn btn-primary btn-sm"
@click.stop
>
Détails

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

@@ -39,7 +39,11 @@
rounded
>
<div class="flex justify-center gap-4">
<div v-if="d.machine.value.site?.name" class="badge badge-outline">
<div
v-if="d.machine.value.site?.name"
class="badge badge-outline font-semibold"
:style="d.machine.value.site?.color ? { borderColor: d.machine.value.site.color + '60', backgroundColor: d.machine.value.site.color + '25', color: d.machine.value.site.color } : {}"
>
{{ d.machine.value.site?.name }}
</div>
<div v-if="d.machine.value.reference" class="badge badge-outline">

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

@@ -65,7 +65,11 @@
<div
v-for="machine in filteredMachines"
:key="machine.id"
class="card bg-base-100 shadow-sm hover:shadow-xl transition-shadow cursor-pointer"
class="card site-card shadow-md hover:shadow-xl transition-shadow cursor-pointer overflow-hidden"
:style="{
borderTop: machine.site?.color ? `4px solid ${machine.site.color}` : '4px solid transparent',
background: machine.site?.color ? `linear-gradient(160deg, ${machine.site.color}30 0%, ${machine.site.color}08 40%, var(--color-base-100) 100%)` : undefined,
}"
@click="viewMachineDetails(machine)"
>
<div class="card-body flex flex-col">
@@ -77,8 +81,11 @@
<div class="space-y-2 text-sm">
<div class="flex items-center gap-2">
<IconLucideMapPin class="w-4 h-4 text-blue-500" aria-hidden="true" />
<span class="text-gray-600">{{ machine.site?.name || 'Site inconnu' }}</span>
<IconLucideMapPin class="w-4 h-4" :style="{ color: machine.site?.color || '#3b82f6' }" aria-hidden="true" />
<span
class="font-bold text-sm px-2.5 py-1 rounded-lg text-base-content"
:style="machine.site?.color ? { backgroundColor: machine.site.color + '30', border: `1px solid ${machine.site.color}40` } : {}"
>{{ machine.site?.name || 'Site inconnu' }}</span>
</div>
<div v-if="machine.reference" class="flex items-center gap-2">
@@ -88,13 +95,13 @@
</div>
<div class="mt-auto pt-3 flex items-center justify-end gap-2">
<button v-if="canEdit" class="btn btn-ghost btn-xs" @click.stop="editMachine(machine)">
<button v-if="canEdit" class="btn btn-ghost btn-sm" @click.stop="editMachine(machine)">
Modifier
</button>
<button v-if="canEdit" class="btn btn-ghost btn-xs text-error" @click.stop="confirmDeleteMachine(machine)">
<button v-if="canEdit" class="btn btn-ghost btn-sm text-error" @click.stop="confirmDeleteMachine(machine)">
Supprimer
</button>
<NuxtLink :to="`/machine/${machine.id}`" class="btn btn-primary btn-xs">
<NuxtLink :to="`/machine/${machine.id}`" class="btn btn-primary btn-sm">
Détails
</NuxtLink>
</div>

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

@@ -118,7 +118,7 @@
</template>
<template #cell-actions="{ row }">
<div class="flex items-center gap-2">
<div class="flex items-center justify-end gap-2">
<NuxtLink
:to="`/pieces/${row.piece.id}/edit`"
class="btn btn-ghost btn-xs"
@@ -128,7 +128,7 @@
<button
v-if="canEdit"
type="button"
class="btn btn-error btn-xs"
class="btn btn-ghost btn-xs text-error"
:disabled="loadingPieces"
@click="handleDeletePiece(row.piece)"
>

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

@@ -115,7 +115,7 @@
</template>
<template #cell-actions="{ row }">
<div class="flex justify-end gap-2">
<div class="flex items-center justify-end gap-2">
<NuxtLink
:to="`/product/${row.product.id}/edit`"
class="btn btn-ghost btn-xs"