# MASTER PLAN: Box/Container Scanning & Printing Architecture

Acest plan detaliat descrie arhitectura tehnică și etapele procedurale necesare pentru a echipa sistemul TFM aInventory cu funcționalități de recunoaștere a cutiilor (Box Scanning). Este structurat astfel încât orice AI să poată prelua dezvoltarea exact din punctul în care a fost oprită.

---

## Etapele Implementării

### ETAPA 1: Local OCR Box Scanning (Funcționalitate Principală)

Această etapă extinde logica existență a scanner-ului pentru a citi local (via `Tesseract.js` pe frontend) textul generic scris pe cutii și a direcționa utilizatorul automat spre inventarul acelei cutii.

#### Pasul 1.1: Backend și Modele de Date
*   **Database Migration**: Rularea efectivă (prin `sqlite3 / bash`) pe baza de date de producție a unui query: `ALTER TABLE items ADD COLUMN box_label TEXT;`
*   **File `backend/models.py`**: Adăugarea coloanei `box_label = Column(String, index=True, nullable=True)` în modelul `Item`.
*   **File `backend/schemas.py`**: Expoziția acesteia prin Pydantic: `box_label: Optional[str] = None` în `ItemBase`.
*   **File `backend/routers/items.py`**: Maparea noului câmp la crearea și editarea de itemi, dar **CRITIC**: actualizarea snapshot-urilor JSON de audit (`AuditLogs`), adăugând `"box_label": db_item.box_label` la istoricul imuabil.

#### Pasul 1.2: Frontend Offline Storage & Formulare UI
*   **File `frontend/lib/db.ts`**: Adăugarea `box_label?: string;` în interfața TypeScript `Item`. Upgrade la _Dexie database version_ pentru indexarea `items: '++id, barcode, name, category, box_label, ...'`.
*   **File `frontend/components/AIOnboarding.tsx` & `page.tsx` (Meniul de Editare)**: 
    *   Adăugarea câmpului UI "Box/Container Label".
    *   Câmpul devine un `datalist` dropdown conectat la un array derivat `existingBoxes`: `Array.from(new Set(inventory.map(i => i.box_label).filter(Boolean)))`. 
    *   Asta permite la Onboarding selecția rapidă dintr-o listă a unei cutii deja utilizate.
*   **File `frontend/app/page.tsx` (Bara de Căutare Generală)**: Extinderea filtrelor de vizibilitate `inventory.filter()` pentru a include textul introdus în caseta de căutare principală dacă matcheaza cu un `box_label`.

#### Pasul 1.3: Router-ul de Inteligență al Scannerului (`onOCRMatch`)
*   **Fișier Principal `frontend/app/page.tsx`**: Acolo unde rulează bucla `Scanner.tsx` OCR o dată la 4 secunde, se injectează logica nouă de intercepție în `onOCRMatch()`.
*   **Logica Funcțională**:
    1. **Fuzzy String Match**: Compară masiv șirul dezordonat venit de la cameră cu toate `item.box_label` existente.
    2. Filtrăm array-ul temporar `possibleBoxMatches`.
    3. Dacă `possibleBoxMatches.length === 1`: Sistemul selectează instant acel produs -> `setShowScanner(false); setSelectedItem(match);`. Trecere directă la editare stoc (din cauză că este o cutie dedicată).
    4. Dacă `possibleBoxMatches.length > 1`: S-a recunoscut "cutia cu SFP-uri" care conține 5 modele diferite. Sistemul va popa un **Modal Interstitial NOU: "Alegeți Item-ul din Cutie"**. Acest modal randează un array vizual ca meniu. Odată făcut click pe un item, deschide panoul de CheckIn/Out pentru el.
    5. Dacă cutia nu matchează cu niciun `box_label`, dă `fallback` la logica clasică de `onOCRMatch` (să recunoască S/N-ul individual sau Part Number-ul exact).

---

### ETAPA 2: Sistem de Generare și Printare Etichete pe Cutii (Funcționalitate Secundară)

Misiunea de a crea un cod unic perfect (lipsit de ratele de eroare ale OCR-ului generic) pentru cutii, pe care angajații să îl poată printa direct pe o imprimantă Dymo/Brother sau descărca ca poză.

#### Pasul 2.1: Identificatori Generatori Vizuali
*   **Logică PWA**: Nu vom rula backend separat pentru imagini; le vom genera via HTML Canvas pe Frontend pentru lățime de bandă 0.
*   **Dependință Nouă UI**: Instalarea `react-barcode` / `qrcode.react` pe frontend pentru desenarea instantanee vizuală bazată pe șirul textual din `box_label` (ex: textul "SFPx5-BOX" -> devine un QRCode valid).

#### Pasul 2.2: Managementul Meniului de Printare
*   Afișare Modul `[📦 Tablou Cutii]`, vizibil din Setări/Admin sau în meniul Item-urilor, care grupează itemii per `box_label`.
*   Fiecare categorie de "cutie" are buton dedicat: **[Printează Etichetă (Generează Cod)]**.
*   **Metoda Multi-Platformă**:
    *   Când este apăsat generăm un obiect izolat DOM (div hidden).
    *   Folosim clase CSS media de izolare `@media print { @page { size: 62mm 29mm; } body * { display: none; } #print-area { display: block; } }`. 
    *   Asta triggerează popup-ul de print nativ MacOS/Windows perfect adaptat unei imprimante etichetatoare de birou Dymo/Brother.
    *   **Fallback Mobil (iOS/Android)**: Lângă opțiunea de "Print direct", adăugăm buton de **[Salvează pe Telefon (Imagine.png)]**. Utilizatorul transferă imaginea perfect rasterizată (canvas via `toDataURL()`) în rola foto pentru a deschide aplicația portabilă proprietară de print Bluetooth (ex: Niimbot app).


## Validarea Aprobării
> [!IMPORTANT]
> REGULA DE AUR PENTRU AI: Nu ai voie să scrii cod din acest plan dacă utilizatorul nu a aprobat explicit începerea implementării Etapelor! Citește acest document ori de câte ori continui logica sistemului PWA aInventory.