Configurazione Layout Cassa

Il Layout Engine della cassa gestisce la disposizione di tutti gli elementi sullo schermo POS: tasti prodotto, scorciatoie funzionali, carrello e barra comandi. La configurazione avviene tramite l'editor WYSIWYG integrato nell'applicazione cassa.

Struttura dello Schermo

Lo schermo cassa si basa su un albero di nodi (ScreenNode) che definisce la suddivisione in zone. Ogni nodo puo essere di tipo row (divisione orizzontale), column (divisione verticale) o zone (area funzionale).

Le zone principali predefinite sono:

Zone ID	Funzione
products	Griglia tasti prodotto, con paginazione
cart_list_placeholder	Carrello ordine corrente
system_info	Barra comandi (CommandBar)

Ogni zona ha un parametro flex che ne determina la proporzione rispetto alle zone sorelle. Ad esempio, una zona prodotti con flex: 3 accanto a un carrello con flex: 1 occupera il 75% dello spazio orizzontale.

Editor WYSIWYG

Per accedere all'editor, dalla schermata cassa selezionare l'icona ingranaggio nella barra superiore. L'editor si apre con:

1. Area Canvas: anteprima in tempo reale del layout in formato 16:9
2. Pannello Proprieta: a destra, mostra e modifica le proprieta del tasto selezionato
3. Barra strumenti: simulazione stati (idle, selling, refund, payment), gestione permessi, sincronizzazione prodotti

Procedura di modifica

1. Aprire l'editor dal menu impostazioni della cassa
2. Cliccare su un tasto per selezionarlo e aprire il pannello proprieta
3. Modificare titolo, colore (aspect), azione e posizione (riga/colonna)
4. Utilizzare il selettore pagina in basso per navigare tra le pagine della zona
5. Premere Salva per salvare localmente e sincronizzare con il server

Zone e Griglie

Ogni zona (LayoutGroup) e definita da una griglia con numero di colonne e righe. I tasti vengono posizionati specificando row e col (1-based) e possono occupare piu celle tramite rowSpan e colSpan.

{
  "zona": "products",
  "columns": 6,
  "rows": 5,
  "tasti": [
    {
      "row": 1, "col": 1,
      "title": "Margherita",
      "aspect": "accent",
      "page": 1,
      "action": { "type": "CART_ADD", "payload": { "sku": "PIZZA-MARG" } }
    }
  ]
}

Paginazione

I tasti possono appartenere a una o piu pagine. Un tasto con page: [1, 3] sara visibile nelle pagine 1 e 3. I tasti con pagina 0 o lista vuota sono sempre visibili.

Ogni pagina puo essere configurata separatamente tramite PageSettings:

• comandaName: nome visualizzato in modalita comanda tavoli
• takeawayName: nome per la modalita asporto
• visibleOnPos / visibleOnComanda / visibleOnTakeaway: flag di visibilita per canale
• visibleOnWaiter / waiterName: visibilita e nome sul palmare camerieri (vedi sotto)
• iconName e colorHex: personalizzazione visiva del tab pagina

Pagine del palmare camerieri

Di norma il palmare camerieri mostra le stesse pagine della comanda tavoli di cassa. Dalla scheda Palmare (in Impostazioni Layout dell'editor di cassa) o dal menu Palmare di ogni pagina nella console, si sceglie per ogni pagina se mostrarla sul palmare indipendentemente dalla comanda:

Comanda	Palmare	Risultato
attiva	come comanda	visibile su cassa e palmare (default)
attiva	nascosta	solo comanda di cassa
spenta	visibile	solo palmare
spenta	come comanda o nascosta	nessuno dei due

• Una pagina nascosta sul palmare non compare nemmeno nella ricerca del palmare. Fanno eccezione i prodotti che hanno un tasto anche su una pagina visibile.
• Il nome palmare è facoltativo: se vuoto, la scheda usa il nome della comanda.
• Usa le stesse pagine della comanda riporta tutte le pagine a come comanda.
• Se sul palmare non resta nessuna pagina visibile, il palmare mostra tutte le categorie del catalogo.
• Il palmare legge il layout all'avvio: dopo una modifica va riavviata l'app.
• In modalita navigazione gerarchica il palmare usa invece la sezione Waiter della configurazione gerarchica.

Aspetto e Colori dei Tasti

Il campo aspect del tasto determina il suo stile visivo. I valori disponibili sono:

Aspect	Colore	Uso tipico
neutral	Grigio scuro	Tastierino numerico
primary	Blu elettrico	Categorie, navigazione
accent	Bianco ghiaccio	Tasti prodotto
confirm	Verde smeraldo	Conferma, pagamento
danger	Rosso	Storno, annullamento
warning	Arancione	Funzioni speciali

Si possono combinare con modificatori di dimensione: accent big per testi grandi, neutral small per testi ridotti.

Immagini sui Tasti Prodotto

La sezione productImageSettings nel layout controlla la visualizzazione delle immagini:

• enabled: attiva/disattiva le immagini su tutti i tasti
• displayMode: background (sfondo), icon (icona piccola) o thumbnail (miniatura centrata)
• backgroundOpacity: opacita dello sfondo (0.0 - 1.0, default 0.3)
• variant: variante immagine da scaricare (thumb o tablet)

Ogni tasto puo avere un'immagine automatica dal prodotto collegato (productMediaId) oppure un'immagine custom assegnata manualmente (customMediaId). L'immagine custom ha sempre priorita.

Azioni Disponibili

Ogni tasto esegue un'azione quando premuto. Le principali azioni configurabili sono:

• CART_ADD: aggiunge prodotto al carrello (payload: sku)
• UI_OPEN_PAYMENT: pagamento del carrello (payload: paymentType). Con mixed apre la schermata di scelta del metodo. Con cash o electronic incassa subito l'intero totale in contanti o sul terminale POS, senza schermata (vedi Metodi di Pagamento)
• CART_DISCOUNT: applica sconto (payload: type, value)
• PRODOTTI_PAGINA: cambia pagina della zona prodotti
• SYS_LAUNCH_MODULE: apre un modulo (tavoli, asporto, magazzino)
• UI_OPEN_MODAL: apre una modale (cliente, note, sconti, buoni pasto)

La pressione lunga su un tasto CART_ADD forza l'apertura del pannello varianti, indipendentemente dalla configurazione del prodotto.

Visibilita e Permessi

I tasti supportano regole di visibilita basate sullo stato del sistema e sui permessi dell'operatore:

• visibleInStates: lista di stati in cui il tasto e visibile (es. ['idle', 'selling'])
• hiddenInStates: lista di stati in cui il tasto e nascosto (es. ['refund'])
• requiredPermission: permesso richiesto (es. can_void_item, can_discount)
• requiresSupervisor: se true, mostra un lucchetto e richiede autenticazione supervisore

FAQ

Come posso aggiungere una nuova pagina di prodotti? Nell'editor, nella zona prodotti, cliccare il pulsante + nella barra di navigazione pagina in basso. La nuova pagina viene creata automaticamente.

Come sincronizzo i prodotti dal catalogo al layout? Cliccare l'icona di sincronizzazione nella barra strumenti dell'editor. Il dialog permette di selezionare le categorie e genera automaticamente i tasti CART_ADD nella zona products.

Il layout si sincronizza tra piu casse? Si. Al salvataggio, il layout viene memorizzato localmente (Isar) e sincronizzato con il server. Le altre casse riceveranno l'aggiornamento alla prossima sincronizzazione.

Vedi Anche

• Catalogo Prodotti -- creazione e gestione articoli
• Categorie Gerarchiche -- organizzazione prodotti
• Varianti e Modificatori -- configurazione varianti
• Template Stampe -- personalizzazione scontrini