function CaisseScreen({ onPrint }) {
  const { state, dispatch, notify } = useStore();
  const { cart, currency, payMode, cashGiven, catalog } = state;
  const [scanVal, setScanVal]         = React.useState('');
  const [showTicket, setShowTicket]   = React.useState(false);
  const [showClients, setShowClients] = React.useState(false);
  const [clientActif, setClientActif] = React.useState(null);
  const [showMobile, setShowMobile]   = React.useState(false);
  const [pointsUtilises, setPointsUtilises] = React.useState(0);
  const scanRef   = React.useRef();
  const scanBuf   = React.useRef('');
  const scanTimer = React.useRef(null);

  const tr = (key) => typeof t !== 'undefined' ? t(key) : key;

  const total      = cartTotal(cart);
  const totalQty   = cartQty(cart);
  const tvaGroups  = calcTVAGroups(cart);

  function niveau(pts) {
    if (pts >= 5000) return { label: tr('platine'), color:'#8b5cf6', icon:'💎', reduction:15 };
    if (pts >= 2000) return { label: tr('or'),      color:'#f59e0b', icon:'🥇', reduction:10 };
    if (pts >= 500)  return { label: tr('argent'),  color:'#64748b', icon:'🥈', reduction:5  };
    return                  { label: tr('bronze'),  color:'#b45309', icon:'🥉', reduction:2  };
  }

  const niv         = clientActif ? niveau(clientActif.points) : null;
  const reduction = pointsUtilises || 0;
  const totalReduit = Math.max(0, total - reduction);
  const cashGivenVal = parseFloat(cashGiven) || 0;
  const rendu       = Math.max(0, cashGivenVal - (clientActif ? totalReduit : total));

  // Modes de paiement selon le pays
  const shopData      = JSON.parse(localStorage.getItem('pos_shop') || '{}');
  const countryMobile = shopData.mobile || [];
  const hasMobile     = countryMobile.length > 0;

  const mobileOperators = countryMobile.map((item, i) => {
    const icons = ['📱','🟠','🟡','🔵','🟢','🔴','🟣'];
    if (typeof item === 'object') { return { id: item.id||item.label, label: item.label, icon: icons[i]||'📱' }; }
    const id = String(item).toLowerCase().replace(/[^a-z]/g,''); return { id, label: String(item), icon: icons[i]||'📱' };
  });

  const isMobileMode   = mobileOperators.some(m => m.id === payMode) || payMode === 'mobile';
  const currentPayLabel = mobileOperators.find(m => m.id === payMode)?.label || tr('mobile');

  const ticketLines = buildTicketLines({
    shop: state.shop, cart, currency,
    printer: state.printer, cashier: state.cashier,
    payMode, cashGiven: cashGivenVal,
    ticketNum: state.ticketNum,
    now: new Date(),
  });

  React.useEffect(() => {
    const onKey = e => {
      const el = document.activeElement;
      if (el && el !== scanRef.current && (el.tagName==='INPUT'||el.tagName==='TEXTAREA')) return;
      if (e.key === 'Enter') {
        if (scanBuf.current.trim()) fireBarcode(scanBuf.current.trim());
        scanBuf.current = ''; clearTimeout(scanTimer.current); return;
      }
      if (e.key.length===1 && !e.ctrlKey && !e.metaKey) {
        scanBuf.current += e.key;
        clearTimeout(scanTimer.current);
        scanTimer.current = setTimeout(() => { scanBuf.current = ''; }, 300);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [catalog]);

  function fireBarcode(code) {
    const prod = catalog.find(p => p.barcode === code.trim());
    if (prod) { dispatch({ type:'ADD_TO_CART', payload:prod }); setScanVal(''); notify('✓ '+prod.name.slice(0,30)); }
    else notify(tr('produit_introuvable')+' : '+code, 'err');
  }

  function selectClient(c) {
    setClientActif(c);
    setShowClients(false);
    notify('👥 '+c.prenom+' '+c.nom+' — '+c.points+' '+tr('points')+' · '+niveau(c.points).reduction+'% '+tr('reduction'));
  }

  function updateClientAfterVente(totalFinal) {
    if (!clientActif) return;
    const pts = Math.floor(totalFinal / 1000);
    try {
      const clients = JSON.parse(localStorage.getItem('pos_clients') || '[]');
      const updated = clients.map(c => c.id === clientActif.id ? {
        ...c,
        points: Math.max(0, (c.points||0) - pointsUtilises) + pts,
        totalAchats: (c.totalAchats||0) + totalFinal,
        nbVisites:   (c.nbVisites||0) + 1,
        historique:  [{ date:new Date().toLocaleDateString('fr-FR'), pts, note:'Achat en caisse' }, ...(c.historique||[])].slice(0,50),
      } : c);
      localStorage.setItem('pos_clients', JSON.stringify(updated));
        // Sauvegarder dans Supabase
        const bid = localStorage.getItem('pos_boutique_id');
        if (bid && window.SupaBase) {
          const updatedClient = updated.find(c => c.id === clientActif.id);
          if (updatedClient) window.SupaBase.saveClient(bid, updatedClient).catch(()=>{});
        }
    } catch(e) {}
  }

  const payModes = [
    { id:'cash',  label:tr('especes'), icon:'💵' },
    { id:'card',  label:tr('carte'),   icon:'💳' },
    ...(hasMobile ? [{ id:'mobile', label:tr('mobile'), icon:'📱', hasSub:true }] : []),
    { id:'check', label:tr('cheque'),  icon:'📝' },
  ];

  return (
    <div className="caisse-grid screen">
      {showClients && <ClientSelector onSelect={selectClient} onClose={()=>setShowClients(false)}/>}

      {/* ── GAUCHE ── */}
      <div className="caisse-left">

        {/* Scanner */}
        <div className="scanner-bar">
          <div className="scanner-input-wrap">
            <div style={{position:'relative',flex:1}}>
              <span style={{position:'absolute',left:12,top:'50%',transform:'translateY(-50%)',fontSize:16,color:'#94a3b8',pointerEvents:'none'}}>⎙</span>
              <input ref={scanRef} value={scanVal}
                onChange={e=>setScanVal(e.target.value)}
                onKeyDown={e=>e.key==='Enter'&&fireBarcode(scanVal)}
                placeholder={tr('scanner')}
                style={{paddingLeft:38,fontFamily:"'DM Mono',monospace",fontSize:14,letterSpacing:1}}
                autoFocus
              />
            </div>
            <button className="btn-primary" onClick={()=>fireBarcode(scanVal)} style={{padding:'9px 18px'}}>↩ OK</button>
            <button className={`btn-ghost${showTicket?' active':''}`} onClick={()=>setShowTicket(v=>!v)} style={{padding:'9px 13px'}}>📄</button>
          </div>
          <div className="scanner-hint">{tr('douchette')}</div>
        </div>

        {/* Client actif */}
        {clientActif && niv && (
          <div style={{padding:'10px 16px',background:'#fffbf0',borderBottom:'1px solid #fde68a',display:'flex',alignItems:'center',gap:12,flexShrink:0}}>
            <span style={{fontSize:22}}>{niv.icon}</span>
            <div style={{flex:1}}>
              <div style={{fontSize:13,color:'#1e293b',fontWeight:700}}>{clientActif.prenom} {clientActif.nom}</div>
          <div style={{fontSize:11,color:'#92400e'}}>
            {clientActif.points} pts disponibles = {fmtN(clientActif.points, currency)}
          </div>
          {clientActif.points > 0 && (
            <div style={{display:'flex',alignItems:'center',gap:6,marginTop:4}}>
              <input type="number" min="0" max={Math.min(clientActif.points, total)}
                value={pointsUtilises||''}
                onChange={e=>setPointsUtilises(Math.min(parseInt(e.target.value)||0, Math.min(clientActif.points, total)))}
                placeholder="0 pts"
                style={{width:80,fontSize:12,padding:'3px 6px',fontFamily:"'DM Mono',monospace",fontWeight:700}}/>
              <button onClick={()=>setPointsUtilises(Math.min(clientActif.points,total))}
                style={{background:'#16a34a',color:'#fff',border:'none',borderRadius:6,padding:'3px 8px',fontSize:10,fontWeight:700,cursor:'pointer'}}>
                Tout
              </button>
              {pointsUtilises>0 && <button onClick={()=>setPointsUtilises(0)}
                style={{background:'#f1f5f9',color:'#64748b',border:'none',borderRadius:6,padding:'3px 8px',fontSize:10,fontWeight:700,cursor:'pointer'}}>
                0
              </button>}
            </div>
          )}
            </div>
            <button className="btn-ghost btn-sm" onClick={()=>setClientActif(null)}>✕</button>
          </div>
        )}

        {/* Raccourcis */}
        <div className="quick-bar">
          <div className="quick-bar-inner">
            <div onClick={()=>setShowClients(true)}
              style={{background:clientActif?'#fffbf0':'#fff',border:'1.5px solid '+(clientActif?'#f59e0b':'#e2e8f0'),borderRadius:10,padding:10,cursor:'pointer',minWidth:100,textAlign:'center',flexShrink:0,transition:'all .15s'}}>
              <div style={{fontSize:18,marginBottom:3}}>👥</div>
              <div style={{fontSize:10,color:'#64748b',fontWeight:600}}>{clientActif?tr('changer'):tr('client')}</div>
            </div>
            {catalog.slice(0,9).map(p => (
              <div key={p.id} className="quick-card"
                onClick={()=>{dispatch({type:'ADD_TO_CART',payload:p});notify('✓ '+p.name.slice(0,28));}}>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:8,color:'#94a3b8',marginBottom:3}}>{p.barcode}</div>
                <div style={{fontSize:11,color:'#1e293b',marginBottom:5,lineHeight:1.3,maxWidth:100,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',fontWeight:600}}>{p.name}</div>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:12,color:'#2563eb',fontWeight:700}}>{fmtN(p.price,currency)}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Panier */}
        <div className="cart-container">
          {cart.length===0 ? (
            <div className="cart-empty">
              <div style={{fontSize:52}}>🛒</div>
              <div style={{color:'#94a3b8',fontSize:13,fontWeight:600}}>{tr('panier_vide')}</div>
            </div>
          ) : (
            cart.map(item => {
              const tv  = TVA_RATES.find(r=>r.key===item.tva);
              const ttc = item.qty*item.price;
              return (
                <div key={item.id} className="cart-item fade-up" style={{borderLeftColor:(tv?.color||'#e2e8f0')}}>
                  <span className="badge" style={{background:(tv?.color||'#888')+'18',borderColor:(tv?.color||'#888')+'44',color:tv?.color||'#888'}}>{item.tva}</span>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:13,color:'#1e293b',fontWeight:600,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{item.name}</div>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:'#94a3b8',marginTop:2}}>{item.barcode} · {fmtN(item.price,currency)}</div>
                  </div>
                  <div style={{display:'flex',alignItems:'center',gap:6,flexShrink:0}}>
                    <button className="qty-btn" onClick={()=>dispatch({type:'UPDATE_QTY',payload:{id:item.id,delta:-1}})}>−</button>
                    <span style={{fontFamily:"'DM Mono',monospace",fontSize:15,color:'#1e293b',fontWeight:700,minWidth:24,textAlign:'center'}}>{item.qty}</span>
                    <button className="qty-btn" onClick={()=>dispatch({type:'UPDATE_QTY',payload:{id:item.id,delta:1}})}>+</button>
                  </div>
                  <div style={{fontFamily:"'DM Mono',monospace",fontSize:13,color:'#2563eb',fontWeight:700,minWidth:90,textAlign:'right',flexShrink:0}}>{fmtN(ttc,currency)}</div>
                  <button className="btn-danger btn-sm" onClick={()=>dispatch({type:'REMOVE_FROM_CART',payload:item.id})} style={{marginLeft:6}}>✕</button>
                </div>
              );
            })
          )}
        </div>

        {/* Barre bas */}
        <div className="bottom-bar">
          <div>
            <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:'#94a3b8'}}>{totalQty} {tr('articles')} · {cart.length} ligne{cart.length>1?'s':''}</div>
            <div style={{fontFamily:"'Playfair Display',serif",fontSize:24,color:'#1e293b',fontWeight:700,marginTop:2}}>{fmtN(total,currency)}</div>
            {clientActif && reduction > 0 && (
              <div style={{fontSize:12,color:'#16a34a',fontWeight:700}}>{tr('reduction')} : {fmtN(totalReduit,currency)}</div>
            )}
          </div>
          <button className="btn-danger" onClick={()=>{dispatch({type:'CLEAR_CART'});setClientActif(null);}} style={{padding:'9px 16px'}}>{tr('vider')}</button>
        </div>
      </div>

      {/* ── DROITE ── */}
      <div className="caisse-right" style={{overflowY:"auto"}}>
        {!showTicket ? (
        <div style={{padding:"14px 16px",paddingBottom:80}}>

            {clientActif && niv && (
              <div style={{background:'linear-gradient(135deg,'+niv.color+','+niv.color+'cc)',borderRadius:13,padding:16,marginBottom:14,color:'#fff',display:'flex',alignItems:'center',gap:14}}>
                <span style={{fontSize:32}}>{niv.icon}</span>
                <div style={{flex:1}}>
                  <div style={{fontWeight:700,fontSize:14}}>{clientActif.prenom} {clientActif.nom}</div>
                  <div style={{fontSize:12,opacity:.9,marginTop:2}}>{clientActif.points} {tr('points')} · {tr('niveau')} {niv.label}</div>
                </div>
                <div style={{textAlign:'right'}}>
                  <div style={{fontSize:11,opacity:.8}}>{tr('reduction')}</div>
          <div style={{fontFamily:"'DM Mono',monospace",fontSize:22,fontWeight:700}}>{pointsUtilises} pts</div>
                </div>
              </div>
            )}

            {!clientActif && (
              <button className="btn-ghost" style={{width:'100%',padding:'11px',fontSize:13,marginBottom:14}} onClick={()=>setShowClients(true)}>
                👥 {tr('client')}
              </button>
            )}

            <div className="card">
              <div className="stitle">{tr('reglement')}</div>

              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginBottom:10}}>
                {payModes.map(m => (
                  <button key={m.id}
                    className={`btn-ghost${(payMode===m.id||(m.hasSub&&isMobileMode))?' active':''}`}
                    onClick={() => {
                      if (m.hasSub) { setShowMobile(v=>!v); }
                      else { dispatch({type:'SET_PAY_MODE',payload:m.id}); setShowMobile(false); }
                    }}
                    style={{padding:'10px 8px',fontSize:13,display:'flex',alignItems:'center',justifyContent:'center',gap:6}}>
                    <span>{m.icon}</span> {m.label}
                    {m.hasSub && <span style={{fontSize:10}}>▾</span>}
                  </button>
                ))}
              </div>

              {showMobile && hasMobile && (
                <div style={{background:'#f8fafc',borderRadius:10,padding:10,marginBottom:12,border:'1.5px solid #e2e8f0'}}>
                  <div style={{fontSize:11,color:'#94a3b8',fontWeight:700,textTransform:'uppercase',letterSpacing:.8,marginBottom:8}}>{tr('operateur')}</div>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
                    {mobileOperators.map(m => (
                      <button key={m.id}
                        onClick={()=>{dispatch({type:'SET_PAY_MODE',payload:m.id});setShowMobile(false);}}
                        style={{padding:'12px 8px',borderRadius:10,border:'1.5px solid '+(payMode===m.id?'#2563eb':'#e2e8f0'),background:payMode===m.id?'#eff6ff':'#fff',cursor:'pointer',fontSize:13,fontWeight:700,color:payMode===m.id?'#2563eb':'#1e293b',transition:'all .15s',fontFamily:"'Lato',sans-serif"}}>
                        {m.icon} {m.label}
                      </button>
                    ))}
                  </div>
                </div>
              )}

              {isMobileMode && payMode !== 'mobile' && (
                <div style={{background:'#eff6ff',border:'1px solid #bfdbfe',borderRadius:8,padding:'8px 12px',marginBottom:10,fontSize:13,color:'#2563eb',fontWeight:600,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                  <span>📱 {currentPayLabel}</span>
                  <button onClick={()=>setShowMobile(true)} style={{fontSize:11,color:'#2563eb',background:'none',border:'none',cursor:'pointer',fontWeight:700}}>{tr('changer')}</button>
                </div>
              )}


              {payMode === 'cash' && (
                <div style={{display:'flex',flexDirection:'column',gap:10}}>
                  <div>
                    <label>{tr('montant')} ({currency.symbol})</label>

                    <input type="number" value={cashGivenVal||''}
                      onChange={e=>dispatch({type:'SET_CASH_GIVEN',payload:parseFloat(e.target.value)||0})}
                      placeholder={'Ex: '+Math.ceil((clientActif?totalReduit:total)/1000)*1000}
                      style={{fontFamily:"'DM Mono',monospace",fontSize:18,fontWeight:700}}
                    />
                  </div>
                  <div style={{display:'flex',gap:7,flexWrap:'wrap'}}>
                    {(currency.isInt === false ? [5,10,20,50,100,200] : currency.code === 'USD' || currency.code === 'GBP' ? [5,10,20,50,100,200] : currency.code === 'MAD' || currency.code === 'TND' ? [50,100,200,500,1000,2000] : currency.code === 'GHS' ? [50,100,200,500,1000,2000] : currency.code === 'NGN' ? [500,1000,2000,5000,10000,20000] : currency.code === 'XAF' ? [500,1000,2000,5000,10000,20000] : [500,1000,2000,5000,10000,20000]).filter(v=>v>=(clientActif?totalReduit:total)*0.85).slice(0,5).map(v=>(
                      <button key={v} className="btn-ghost btn-sm" onClick={()=>dispatch({type:'SET_CASH_GIVEN',payload:v})}>{fmtN(v,currency)}</button>
                    ))}
                    <button className="btn-ghost btn-sm" onClick={()=>dispatch({type:'SET_CASH_GIVEN',payload:Math.ceil((clientActif?totalReduit:total)/100)*100})}>
                      {tr('arrondi')}
                    </button>
                  </div>
                  <div className="rendu-box">
                    <span style={{fontSize:13,color:'#16a34a',fontWeight:600}}>{tr('rendu')}</span>
                    <span style={{fontFamily:"'DM Mono',monospace",fontSize:22,color:'#16a34a',fontWeight:700}}>{fmtN(rendu,currency)}</span>
                  </div>
                </div>
              )}
            </div>

            {tvaGroups.length > 0 && (
              <div className="card">
                <div className="stitle" style={{fontSize:12,color:'#94a3b8'}}>TVA</div>
                {tvaGroups.map(g => (
                  <div key={g.key} style={{display:'flex',alignItems:'center',background:'#f8fafc',borderRadius:8,padding:'9px 12px',marginBottom:7,borderLeft:'3px solid '+g.color,gap:10}}>
                    <span className="badge" style={{background:g.color+'18',borderColor:g.color+'44',color:g.color}}>{g.key} {g.rate}%</span>
                    <span style={{fontFamily:"'DM Mono',monospace",fontSize:11,color:'#64748b',flex:1}}>HT {fmtN(g.ht,currency)}</span>
                    <span style={{fontFamily:"'DM Mono',monospace",fontSize:11,color:'#94a3b8'}}>TVA {fmtN(g.tva,currency)}</span>
                  </div>
                ))}
              </div>
            )}

            <div className="total-box">
              {clientActif && reduction > 0 && (
                <div style={{display:'flex',justifyContent:'space-between',marginBottom:8,opacity:.8}}>
                  <span style={{color:'#fff',fontSize:13}}>Sous-total</span>
                  <span style={{fontFamily:"'DM Mono',monospace",fontSize:13,color:'#fff',textDecoration:'line-through'}}>{fmtN(total,currency)}</span>
                </div>
              )}
              {clientActif && reduction > 0 && (
                <div style={{display:'flex',justifyContent:'space-between',marginBottom:8}}>
            <span style={{color:'#fff',fontSize:13}}>{pointsUtilises} pts utilisés</span>
                  <span style={{fontFamily:"'DM Mono',monospace",fontSize:13,color:'#86efac',fontWeight:700}}>-{fmtN(reduction,currency)}</span>
                </div>
              )}
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
                <span style={{fontFamily:"'Playfair Display',serif",fontSize:18,color:'#fff',fontWeight:700}}>{tr('total')}</span>
                <span style={{fontFamily:"'DM Mono',monospace",fontSize:24,color:'#fff',fontWeight:700}}>{fmtN(clientActif?totalReduit:total,currency)}</span>
              </div>
              {clientActif && (
                <div style={{background:'rgba(255,255,255,.15)',borderRadius:8,padding:'8px 12px',marginBottom:12,fontSize:12,color:'#fff'}}>
                  ⭐ +{Math.floor(total/100)} {tr('points')} {clientActif.prenom}
                </div>
              )}
              {isMobileMode && payMode !== 'mobile' && (
                <div style={{background:'rgba(255,255,255,.15)',borderRadius:8,padding:'8px 12px',marginBottom:12,fontSize:13,color:'#fff',fontWeight:600}}>
                  📱 {currentPayLabel}
                </div>
              )}
              <button className="btn-success" style={{width:'100%',padding:'13px',fontSize:15}}
                onClick={()=>{ updateClientAfterVente(clientActif?totalReduit:total); localStorage.setItem('pos_total_reduit', clientActif ? totalReduit : total);
      if (clientActif) localStorage.setItem('pos_client_actif', JSON.stringify(clientActif));
      else localStorage.removeItem('pos_client_actif'); dispatch({type:'SET_TOTAL_REDUIT', payload: clientActif ? totalReduit : total}); onPrint(); setClientActif(null); }}
                disabled={cart.length===0}>
                {tr('encaisser')}
              </button>
            </div>
          </div>
        ) : (
          <div className="screen-scroll">
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}>
              <span style={{fontFamily:"'Playfair Display',serif",fontSize:13,color:'#64748b',fontStyle:'italic'}}>Aperçu · {state.printer.label}</span>
              <span style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:'#2563eb',background:'#eff6ff',border:'1px solid #bfdbfe',padding:'2px 8px',borderRadius:5}}>{currency.code}</span>
            </div>
            <div className="ticket-paper" style={{maxWidth:state.printer.id==='58mm'?240:state.printer.id==='80mm'?318:430}}>
              <div className="tear"/>
              <div style={{paddingTop:14,textAlign:'center',paddingBottom:4}}>
                {state.logoUrl
                  ? <img src={state.logoUrl} style={{maxHeight:55,maxWidth:110,display:'block',margin:'0 auto 4px',borderRadius:3}}/>
                  : <div style={{fontFamily:'Courier New',fontWeight:'bold',fontSize:14,color:'#111',letterSpacing:3,padding:'4px 0'}}>{state.shop.brand?.toUpperCase()}</div>
                }
              </div>
              <pre style={{fontFamily:"'Courier New',Courier,monospace",fontSize:state.printer.id==='58mm'?9:state.printer.id==='80mm'?8.5:8,color:'#1a1714',margin:0,lineHeight:1.55,whiteSpace:'pre',overflowX:'auto',padding:'0 10px 8px'}}>
                {ticketLines.join('\n')}
              </pre>
              <div style={{textAlign:'center',padding:'6px 10px 14px'}}>
                <Barcode value={state.shop.siret||''} width={state.printer.id==='58mm'?200:state.printer.id==='80mm'?280:390} height={44} showText={true}/>
              </div>
              <div className="tear"/>
            </div>
            <button className="btn-primary" style={{width:'100%',padding:'12px',marginTop:12,fontSize:14}}
              onClick={()=>{ updateClientAfterVente(clientActif?totalReduit:total); localStorage.setItem('pos_total_reduit', clientActif ? totalReduit : total);
      if (clientActif) localStorage.setItem('pos_client_actif', JSON.stringify(clientActif));
      else localStorage.removeItem('pos_client_actif'); dispatch({type:'SET_TOTAL_REDUIT', payload: clientActif ? totalReduit : total}); onPrint(); setClientActif(null); }}
              disabled={cart.length===0}>
              {tr('encaisser')}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}