refactor(ui): bascule le flux extraction/edition en theme sombre
Tout ce flux (visionneuse de donnees, fiches locataire et operation, tagging, autocompletion, panneau de differences) etait en theme clair, au milieu d'une application sombre : le contraste sautait a chaque passage d'une page a l'edition d'un document. Les surfaces, bordures, textes et etats colores suivent desormais la palette commune. Les champs natifs (date, nombre, cases a cocher) recoivent color-scheme: dark pour que le calendrier et les widgets systeme s'affichent en sombre eux aussi. Les fiches de metadonnees se repartissent sur 2 puis 3 colonnes selon la largeur disponible, au lieu d'une seule colonne. Le bouton « Annuler » du bandeau de tagging devient « Retour a l'edition », qui decrit son action reelle. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
||||
<div class="card">
|
||||
<!-- Header -->
|
||||
<div class="w-full flex items-center justify-between px-3 py-2 bg-white hover:bg-gray-50 transition-colors">
|
||||
<div class="w-full flex items-center justify-between px-3 py-2 bg-gray-900 hover:bg-gray-800 transition-colors">
|
||||
<button
|
||||
@click="expanded = !expanded"
|
||||
class="flex items-center gap-2 flex-1 text-left"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 text-gray-400 transition-transform flex-shrink-0"
|
||||
class="w-3 h-3 text-gray-500 transition-transform flex-shrink-0"
|
||||
:class="{ 'rotate-90': expanded }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
@@ -15,25 +15,25 @@
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<span class="font-medium text-gray-800 text-sm">{{ formatCategorie(categorie) }}</span>
|
||||
<span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">
|
||||
<span class="font-medium text-white text-sm">{{ formatCategorie(categorie) }}</span>
|
||||
<span class="badge badge-neutral rounded-full">
|
||||
{{ operations.length }} operation{{ operations.length > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
v-if="changedIndices.length"
|
||||
class="text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 border border-amber-300"
|
||||
class="badge badge-warning text-[10px] uppercase tracking-wide"
|
||||
>
|
||||
{{ changedIndices.length }} modifiée{{ changedIndices.length > 1 ? 's' : '' }}
|
||||
</span>
|
||||
<div class="text-sm font-semibold text-gray-700">
|
||||
<div class="text-sm font-semibold text-gray-200">
|
||||
{{ formatCurrency(totalDebit) }}
|
||||
</div>
|
||||
<!-- Bouton ajouter operation -->
|
||||
<button
|
||||
@click.stop="addOperation"
|
||||
class="p-1 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded transition-colors"
|
||||
class="p-1 text-gray-500 hover:text-blue-400 hover:bg-blue-500/10 rounded transition-colors"
|
||||
title="Ajouter une operation"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -44,20 +44,20 @@
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div v-show="expanded" class="border-t border-gray-100 bg-gray-50">
|
||||
<div class="divide-y divide-gray-100">
|
||||
<div v-show="expanded" class="border-t border-gray-700 bg-gray-900/60">
|
||||
<div class="divide-y divide-gray-800">
|
||||
<div
|
||||
v-for="(op, idx) in operations"
|
||||
:key="idx"
|
||||
:ref="el => { if (el) opRefs[idx] = el }"
|
||||
class="px-3 py-2 bg-white text-xs transition-all duration-300"
|
||||
:class="changedIndices.includes(idx) ? 'ring-2 ring-amber-400 bg-amber-50' : (highlightedIdx === idx ? 'ring-2 ring-blue-400 bg-blue-50' : '')"
|
||||
class="px-3 py-2 text-xs transition-all duration-300"
|
||||
:class="changedIndices.includes(idx) ? 'ring-2 ring-amber-500/50 bg-amber-500/5' : (highlightedIdx === idx ? 'ring-2 ring-blue-500/50 bg-blue-500/5' : '')"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex-1 min-w-0 space-y-1">
|
||||
<!-- Sous-categorie -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-gray-400 text-xs w-20">Sous-cat:</span>
|
||||
<span class="text-gray-500 text-xs w-20">Sous-cat:</span>
|
||||
<EditableField
|
||||
:modelValue="op.sous_categorie"
|
||||
@update:modelValue="updateOperationField(idx, 'sous_categorie', $event)"
|
||||
@@ -69,19 +69,19 @@
|
||||
|
||||
<!-- Fournisseur -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-gray-400 text-xs w-20">Fournisseur:</span>
|
||||
<span class="text-gray-500 text-xs w-20">Fournisseur:</span>
|
||||
<EditableField
|
||||
:modelValue="op.fournisseur"
|
||||
@update:modelValue="updateOperationField(idx, 'fournisseur', $event)"
|
||||
type="text"
|
||||
placeholder="-"
|
||||
displayClass="font-medium text-gray-800"
|
||||
displayClass="font-medium text-gray-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-gray-400 text-xs w-20">Description:</span>
|
||||
<span class="text-gray-500 text-xs w-20">Description:</span>
|
||||
<EditableField
|
||||
:modelValue="op.description"
|
||||
@update:modelValue="updateOperationField(idx, 'description', $event)"
|
||||
@@ -94,20 +94,20 @@
|
||||
|
||||
<!-- Lot -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-gray-400 text-xs w-20">Lot:</span>
|
||||
<span class="text-gray-500 text-xs w-20">Lot:</span>
|
||||
<EditableField
|
||||
:modelValue="op.lot_numero"
|
||||
@update:modelValue="updateOperationField(idx, 'lot_numero', $event)"
|
||||
type="text"
|
||||
placeholder="N°"
|
||||
displayClass="text-blue-500 font-medium text-xs"
|
||||
displayClass="text-blue-400 font-medium text-xs"
|
||||
/>
|
||||
<EditableField
|
||||
:modelValue="op.lot_concerne"
|
||||
@update:modelValue="updateOperationField(idx, 'lot_concerne', $event)"
|
||||
type="text"
|
||||
placeholder="Concerne"
|
||||
displayClass="text-blue-500 text-xs"
|
||||
displayClass="text-blue-400 text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -116,48 +116,48 @@
|
||||
<!-- Montants -->
|
||||
<div class="text-right space-y-0.5">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<span class="text-gray-400 text-xs">Debit:</span>
|
||||
<span class="text-gray-500 text-xs">Debit:</span>
|
||||
<EditableField
|
||||
:modelValue="op.montants?.debit"
|
||||
@update:modelValue="updateOperationField(idx, 'montants.debit', $event)"
|
||||
type="currency"
|
||||
displayClass="font-semibold text-gray-800"
|
||||
displayClass="font-semibold text-gray-200"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<span class="text-gray-400 text-xs">Credit:</span>
|
||||
<span class="text-gray-500 text-xs">Credit:</span>
|
||||
<EditableField
|
||||
:modelValue="op.montants?.credit"
|
||||
@update:modelValue="updateOperationField(idx, 'montants.credit', $event)"
|
||||
type="currency"
|
||||
displayClass="text-green-600"
|
||||
displayClass="text-green-400"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<span class="text-gray-400 text-xs">TVA:</span>
|
||||
<span class="text-gray-500 text-xs">TVA:</span>
|
||||
<EditableField
|
||||
:modelValue="op.montants?.tva"
|
||||
@update:modelValue="updateOperationField(idx, 'montants.tva', $event)"
|
||||
type="currency"
|
||||
displayClass="text-gray-400"
|
||||
displayClass="text-gray-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<span class="text-gray-400 text-xs">Locatif:</span>
|
||||
<span class="text-gray-500 text-xs">Locatif:</span>
|
||||
<EditableField
|
||||
:modelValue="op.montants?.locatif"
|
||||
@update:modelValue="updateOperationField(idx, 'montants.locatif', $event)"
|
||||
type="currency"
|
||||
displayClass="text-green-600 text-xs"
|
||||
displayClass="text-green-400 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<span class="text-gray-400 text-xs">Deductible:</span>
|
||||
<span class="text-gray-500 text-xs">Deductible:</span>
|
||||
<EditableField
|
||||
:modelValue="op.montants?.deductible"
|
||||
@update:modelValue="updateOperationField(idx, 'montants.deductible', $event)"
|
||||
type="currency"
|
||||
displayClass="text-orange-600 text-xs"
|
||||
displayClass="text-orange-400 text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -165,7 +165,7 @@
|
||||
<!-- Bouton supprimer -->
|
||||
<button
|
||||
@click="removeOperation(idx)"
|
||||
class="p-1 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded transition-colors"
|
||||
class="p-1 text-gray-500 hover:text-red-400 hover:bg-red-500/10 rounded transition-colors"
|
||||
title="Supprimer cette operation"
|
||||
>
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -178,11 +178,11 @@
|
||||
</div>
|
||||
|
||||
<!-- Totaux de la categorie -->
|
||||
<div class="px-3 py-2 bg-gray-100 border-t border-gray-200 text-xs">
|
||||
<div class="px-3 py-2 bg-gray-800 border-t border-gray-700 text-xs">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-medium text-gray-600">Total {{ formatCategorie(categorie) }}</span>
|
||||
<span class="font-medium text-gray-400">Total {{ formatCategorie(categorie) }}</span>
|
||||
<div class="text-right">
|
||||
<span class="font-semibold text-gray-800">{{ formatCurrency(totalDebit) }}</span>
|
||||
<span class="font-semibold text-white">{{ formatCurrency(totalDebit) }}</span>
|
||||
<span v-if="totalTva > 0" class="text-gray-500 ml-2">(TVA: {{ formatCurrency(totalTva) }})</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user