Files

Claude Agent b4a226409c feat(data-entry): Add unified receipt form with OCR confidence tracking

New unified receipt creation system with:
- UnifiedReceiptForm component with inline OCR preview and confidence indicators
- Compact upload zone with drag-drop and camera support
- TVA and Payment fields with dynamic add/remove
- Supplier dual-field with autocomplete and OCR hint
- Receipt form sections with collapsible auxiliary data

Backend OCR improvements:
- Add confidence_tva and confidence_payment to extraction results
- Update TVA extraction to return confidence scores
- Include TVA (15%) and payment (10%) in overall_confidence calculation

Also includes:
- CSS design system rules documentation
- Port check helper function for service scripts
- Expanded design tokens documentation in CLAUDE.md

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-08 21:48:37 +00:00

4.7 KiB

Raw Permalink Blame History

paths

paths
src/modules/*/.{vue,css}

CSS Design System Rules

Documentation (READ FIRST)

Quick Start: docs/ONBOARDING_CSS.md (5 min read)
Complete Patterns: docs/CSS_PATTERNS.md (cards, forms, buttons, tables, etc.)
Design Tokens: docs/DESIGN_TOKENS.md (colors, spacing, typography variables)

Core Principles

Use CSS variables from design tokens, NEVER hardcoded values
Check CSS_PATTERNS.md BEFORE writing any CSS
Import shared styles from shared/frontend/styles/

Theme System (3 Modes) - CRITICAL

ROA2WEB are theme toggle în header: auto → light → dark

Mode	Comportament	CSS Selector
`auto`	Urmează preferința OS	`@media (prefers-color-scheme: dark)`
`light`	Forțează light mode	`[data-theme="light"]` pe `<html>`
`dark`	Forțează dark mode	`[data-theme="dark"]` pe `<html>`

Detalii implementare:

Toggle: AppHeader.vue (lines 137-175)
Persistență: localStorage['user-theme'] (valori: 'light', 'dark', sau absent=auto)
CSS Priority: [data-theme] > @media (prefers-color-scheme) > default light

Testare OBLIGATORIE:

Click buton temă în header (ciclează auto→light→dark)
DevTools → Rendering → Emulate CSS media → prefers-color-scheme: dark

Semantic surface tokens (funcționează în TOATE modurile):

Token	Light	Dark	Use For
`--surface-card`	white	#1e293b	Card/container backgrounds
`--surface-ground`	#f8fafc	#0f172a	Page background
`--surface-hover`	#f1f5f9	#334155	Hover states
`--surface-border`	#e2e8f0	#475569	Borders
`--text-color`	#111827	#f9fafb	Primary text
`--text-color-secondary`	#6b7280	#d1d5db	Secondary text

Status colors (scales 50-900):

Success: --green-50 to --green-900 (bg: 50/100, text: 500/600)
Warning: --yellow-50 to --yellow-900
Error: --red-50 to --red-900
Info: --blue-50 to --blue-900

Color Variable Quick Reference

Backgrounds

background: var(--surface-card);     /* Cards, modals, containers */
background: var(--surface-ground);   /* Page background */
background: var(--surface-hover);    /* Hover states */

Text

color: var(--text-color);            /* Primary text */
color: var(--text-color-secondary);  /* Secondary/muted text */

Borders

border-color: var(--surface-border); /* Standard borders */

Status Colors

/* Success */
background: var(--green-50);         /* Light success bg */
color: var(--green-600);             /* Success text */

/* Warning */
background: var(--yellow-50);        /* Light warning bg */
color: var(--yellow-700);            /* Warning text */

/* Error */
background: var(--red-50);           /* Light error bg */
color: var(--red-600);               /* Error text */

Shared Styles to Import

Login: @import 'shared/frontend/styles/login.css'
Header: @import 'shared/frontend/styles/layout/header.css'
Navigation: @import 'shared/frontend/styles/layout/navigation.css'

NEVER

Use :deep() for PrimeVue overrides (use vendor/ files)
Duplicate patterns that exist in CSS_PATTERNS.md
Use hardcoded colors like #2563eb (use var(--color-primary))
Use hardcoded backgrounds like #ffffff or white (use var(--surface-card))
Create scoped CSS for patterns that already exist in shared files
Skip theme testing - ALWAYS test cu toggle (auto/light/dark) + DevTools dark mode

PrimeVue Component Patterns

OBLIGATORIU: Folosește clasa dropdown-borderless pentru toate dropdown-urile în forme compacte/inline:

<Dropdown ... class="my-select dropdown-borderless" />

Clasa este definită global (în ReceiptCreateView.vue non-scoped) și elimină border, background și box-shadow pentru un look minimalist.

Entry Chips / Inline Labels (Dark Mode)

Pentru elemente custom care afișează date inline (chips, tags, badges):

/* ✅ CORECT - folosește semantic tokens */
.entry-chip {
  background: var(--surface-hover);
  color: var(--text-color);
}

[data-theme="dark"] .entry-chip {
  background: var(--surface-100);
}

/* ❌ GREȘIT - culori hardcodate */
.entry-chip {
  background: #f1f5f9;  /* NU! */
  color: #111827;       /* NU! */
}

Reguli Dark Mode pentru Componente Custom

Text: Folosește var(--text-color) sau var(--text-color-secondary) - se adaptează automat
Background: Folosește var(--surface-hover) pentru hover/chips în light mode
Dark override: Folosește [data-theme="dark"] cu var(--surface-100) sau var(--surface-200)
NU hardcoda: Niciodată #d1d5db, #f9fafb, #334155 direct în CSS

4.7 KiB Raw Permalink Blame History