Files
tfm_ainventory/dev_docs/BOX_SCANNING_MASTER_PLAN.md
2026-04-12 21:43:08 +03:00

5.2 KiB

[COMPLETED] MASTER PLAN: Box/Container Scanning & Printing Architecture

Important

STATUS: FULLY IMPLEMENTED (v1.5.0) Date: 2026-04-12 This plan is no longer active. All phases (OCR, Smart Routing, Label Printing) have been merged into the main codebase.


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.