Merge pull request #36 from Llorente29/feature/auditoria-fixes

Feature/auditoria fixes

Author: Llorente29

src/lib/format.ts

@@ -45,6 +45,17 @@ export function fmtPct(x: unknown, dp = 1): string {
   return isNum(x) ? `${Number(x).toFixed(dp).replace('.', ',')} %` : DASH
 }
 
+/** Horas trabajadas/contratadas en formato español: `4,5h` (sin decimales
+ *  sobrantes: `8h`, no `8,00h`). Ausente → '—'. `0` → '0h'. */
+export function fmtHours(x: unknown, dp = 2): string {
+  if (!isNum(x)) return DASH
+  const n = Number(x)
+  // Recorta ceros sobrantes (4.50 -> "4,5", 8.00 -> "8") pero conserva los
+  // decimales que sí aportan info (8.75 -> "8,75") -- parseFloat sobre el
+  // fijo a dp quita los ceros de cola sin reintroducir el punto.
+  return `${parseFloat(n.toFixed(dp))}`.replace('.', ',') + 'h'
+}
+
 /** Entero con separador de miles local (`1.234`). Null-safe: reemplaza a
  *  `n.toLocaleString('es-ES')` sobre conteos del servidor (que petan con null).
  *  Ausente → '—'. `0` → '0'. */

src/modules/kds/components/CookModePanel.tsx

@@ -11,6 +11,7 @@ import { Component, useEffect, useState, type ErrorInfo, type ReactNode } from '
 import { X, AlertTriangle, ImageOff, Loader2 } from 'lucide-react'
 import { getRecipe, type KdsRecipe, type AllergenState } from '../services/kdsService'
 import { roundQty } from '../kdsUtils'
+import { allergenLabel, type AllergenCode } from '@/modules/kitchen/lib/allergens'
 
 interface CookModeTarget {
   menuItemId: string
@@ -25,15 +26,13 @@ interface CookModePanelProps {
   locationId?: string | null
 }
 
-const ALLERGEN_LABELS: Record<string, string> = {
-  gluten: 'Gluten', crustaceos: 'Crustáceos', huevo: 'Huevo', pescado: 'Pescado',
-  cacahuetes: 'Cacahuetes', soja: 'Soja', lacteos: 'Lácteos', frutos_secos: 'Frutos secos',
-  apio: 'Apio', mostaza: 'Mostaza', sesamo: 'Sésamo', sulfitos: 'Sulfitos',
-  altramuces: 'Altramuces', moluscos: 'Moluscos',
-}
-function allergenLabel(code: string): string {
-  return ALLERGEN_LABELS[code] ?? code
-}
+// 🔴 Auditoría externa: aquí vivía un ALLERGEN_LABELS local con claves en
+// ESPAÑOL (gluten/crustaceos/huevo...) que no casaban con AllergenCode, el
+// código estable en inglés-neutro que persiste la BBDD (gluten/crustaceans/
+// eggs...) — solo 'gluten' traducía de verdad, los otros 13 caían al
+// fallback `?? code` y salían en inglés. Se sustituye por la fuente única
+// (src/modules/kitchen/lib/allergens.ts) en vez de mantener una segunda
+// traducción que puede volver a divergir.
 function allergenChipClasses(state: AllergenState): string {
   switch (state) {
     case 'contains':     return 'bg-red-500/25 text-red-200 ring-1 ring-red-500/50'
@@ -187,7 +186,7 @@ export default function CookModePanel({ target, onClose, token, locationId }: Co
                         key={a.code}
                         className={`px-2.5 py-1 rounded-md text-sm font-medium ${allergenChipClasses(a.state)}`}
                       >
-                        {allergenLabel(a.code)}
+                        {allergenLabel(a.code as AllergenCode)}
                         {a.state === 'may_contain' && <span className="opacity-70"> (trazas)</span>}
                       </span>
                     ))}

src/modules/kds/components/KdsTicketCard.tsx

@@ -25,6 +25,7 @@ import { useEffect, useRef, useState } from 'react'
 import { Check, ChefHat, Undo2, AlertTriangle } from 'lucide-react'
 import type { KdsTicket, KdsLine, KdsLineChild } from '../services/kdsService'
 import { ticketCode, channelBadge, timeLevel, timeChipClasses } from '../kdsUtils'
+import { allergenLabel, type AllergenCode } from '@/modules/kitchen/lib/allergens'
 
 const SIN_ESTACION = '__none__'
 
@@ -151,7 +152,16 @@ export default function KdsTicketCard({
       <header className="px-3 py-2.5 bg-zinc-900/60 border-b border-zinc-700">
         <div className="flex items-center gap-2">
           <BrandAvatar name={ticket.brand} logoUrl={ticket.brand_logo_url} />
-          <span className="text-lg font-extrabold tabular-nums text-zinc-100 font-display flex-1 min-w-0 truncate">
+          {/* Auditoría externa (2.5): el auditor propuso ocultar este código
+              por "ruido" -- descartado por Julio, es lo que pide soporte de
+              la plataforma para localizar un pedido, no es ruido. Se queda
+              visible pero deja de competir con el tiempo (que es lo que el
+              cocinero mira primero): pequeño y gris en vez de el elemento
+              más grande y brillante de la cabecera. */}
+          <span
+            className="text-xs text-zinc-400 tabular-nums font-mono flex-1 min-w-0 truncate"
+            title="Referencia de la plataforma — para soporte"
+          >
             {ticketCode(ticket.external_tab_ref, ticket.external_ref)}
           </span>
           <span className={`px-2 py-0.5 rounded-md text-sm font-bold tabular-nums shrink-0 ${timeChipClasses(level)}`}>
@@ -309,7 +319,7 @@ function KdsLineRow({ line, onMarkLine, onOpenCook }: {
               <span className="text-[15px] font-medium">{line.name}</span>
               {clickable && <ChefHat size={13} className="inline ml-1.5 -mt-0.5 text-zinc-500" />}
               {line.allergens.length > 0 && (
-                <span className="ml-1.5 text-[#E8B84B] text-xs align-middle" title={line.allergens.join(', ')}>
+                <span className="ml-1.5 text-[#E8B84B] text-xs align-middle" title={line.allergens.map(a => allergenLabel(a as AllergenCode)).join(', ')}>
                   ⚠ {line.allergens.length}
                 </span>
               )}

src/modules/kitchen/components/EconomiaTab.tsx

@@ -27,6 +27,7 @@ import {
   type SalesChannel as SalesChannelType,
 } from '@/modules/kitchen/services/channelRateService'
 import { supabase } from '@/lib/supabase'
+import { fmtPct } from '@/lib/format'
 import type { MenuItem } from '@/types/kitchen'
 
 function fmtEur(value: number | null | undefined): string {
@@ -128,17 +129,17 @@ export default function EconomiaTab({ item }: EconomiaTabProps) {
         <div className="bg-stone-50 rounded-lg px-4 py-3">
           <div className="text-[10px] font-medium text-stone-400 tracking-widest uppercase mb-1">PVP cliente</div>
           <div className="font-mono text-lg font-medium">{fmtEur(pvpConIva)}</div>
-          <div className="text-[11px] text-stone-400">IVA {vatPct}% incluido</div>
+          <div className="text-[11px] text-stone-400">IVA {fmtPct(vatPct)} incluido</div>
         </div>
         <div className="bg-stone-50 rounded-lg px-4 py-3">
-          <div className="text-[10px] font-medium text-stone-400 tracking-widest uppercase mb-1">Food cost</div>
+          <div className="text-[10px] font-medium text-stone-400 tracking-widest uppercase mb-1">Coste de producto</div>
           <div className={`font-mono text-lg font-medium ${hasCost ? 'text-[#BA7517]' : 'text-stone-300'}`}>{hasCost ? fmtEur(recipeCost) : '—'}</div>
-          <div className="text-[11px] text-stone-400">{hasCost ? `${foodCostPct}% del PVP` : 'Pendiente de escandallo'}</div>
+          <div className="text-[11px] text-stone-400">{hasCost ? `${fmtPct(foodCostPct, 2)} del PVP` : 'Pendiente de escandallo'}</div>
         </div>
         <div className="bg-stone-50 rounded-lg px-4 py-3">
           <div className="text-[10px] font-medium text-stone-400 tracking-widest uppercase mb-1">Mejor margen</div>
           <div className={`font-mono text-lg font-medium ${bestMargin != null ? 'text-success' : 'text-stone-300'}`}>{bestMargin != null ? fmtEur(bestMargin) : '—'}</div>
-          <div className="text-[11px] text-stone-400">{bestChannel ? `${bestChannel} · ${bestMarginPct}%` : 'Configura un canal'}</div>
+          <div className="text-[11px] text-stone-400">{bestChannel ? `${bestChannel} · ${fmtPct(bestMarginPct, 2)}` : 'Configura un canal'}</div>
         </div>
       </div>
 
@@ -176,12 +177,12 @@ export default function EconomiaTab({ item }: EconomiaTabProps) {
                   <div className="flex items-center gap-2.5">{badge}</div>
                   <div className="text-right">
                     <span className={`font-mono text-xl font-medium ${margin >= 0 ? 'text-success' : 'text-danger'}`}>{fmtEur(margin)}</span>
-                    <div className="text-[12px] text-stone-400">{marginPct}% del PVP{!e.costAvailable ? ' · sin food cost' : ''}</div>
+                    <div className="text-[12px] text-stone-400">{fmtPct(marginPct, 2)} del PVP{!e.costAvailable ? ' · sin coste de producto' : ''}</div>
                   </div>
                 </div>
                 <div className="flex flex-wrap gap-x-4 gap-y-1 mb-2 text-[12px] text-stone-500">
-                  {e.costAvailable && <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-sm bg-[#A68B6B]" /> Food cost {fmtEur(e.cost)}</span>}
-                  {e.commissionPct != null && <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-sm bg-[#4A6A8A]" /> Comisión {e.commissionPct}% ({fmtEur(commAmt)})</span>}
+                  {e.costAvailable && <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-sm bg-[#A68B6B]" /> Coste de producto {fmtEur(e.cost)}</span>}
+                  {e.commissionPct != null && <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-sm bg-[#4A6A8A]" /> Comisión {fmtPct(e.commissionPct)} ({fmtEur(commAmt)})</span>}
                   {hasOrderCosts && (
                     <span className="flex items-center gap-1.5 cursor-help"
                       title={`Coste de reparto propio por pedido: coste del rider${e.ownCourierCost != null ? ` (${fmtEur(e.ownCourierCost)})` : ''} + comisión fija${e.commissionFixed != null ? ` (${fmtEur(e.commissionFixed)})` : ''} − envío que paga el cliente${e.ownCustomerFee != null ? ` (${fmtEur(e.ownCustomerFee)})` : ''}, sin IVA, repartido entre ~2 platos por pedido. Es una estimación hasta tener ventas reales.`}>
@@ -214,8 +215,8 @@ export default function EconomiaTab({ item }: EconomiaTabProps) {
           prop, así que no hay ventana de desincronización). */}
       <p className="text-[12px] text-stone-500 mt-4 pt-3 border-t border-stone-200">
         {item.targetFoodCostPct != null
-          ? `Target FC: ${item.targetFoodCostPct}% · ${foodCostPct != null ? (foodCostPct <= item.targetFoodCostPct ? 'Dentro del objetivo' : 'Fuera del objetivo') : 'sin food cost para comparar'}`
-          : 'Sin target de food cost configurado.'}
+          ? `Objetivo de coste: ${fmtPct(item.targetFoodCostPct)} · ${foodCostPct != null ? (foodCostPct <= item.targetFoodCostPct ? 'Dentro del objetivo' : 'Fuera del objetivo') : 'sin coste de producto para comparar'}`
+          : 'Sin objetivo de coste configurado.'}
       </p>
     </div>
   )

src/modules/kitchen/components/FichaTab.tsx

@@ -424,11 +424,11 @@ export default function FichaTab({ item, accountId, onItemChanged }: FichaTabPro
         </p>
       </div>
 
-      {/* Packaging delivery (S9) */}
+      {/* Envases para reparto (S9) */}
       <div>
-        <h3 className="text-xs font-medium uppercase tracking-wide text-stone-400 mb-3">Packaging delivery</h3>
+        <h3 className="text-xs font-medium uppercase tracking-wide text-stone-400 mb-3">Envases para reparto</h3>
         {!item.packagingDescription && item.packagingCost == null && (
-          <p className="text-sm text-stone-500 mb-3">Sin información de packaging.</p>
+          <p className="text-sm text-stone-500 mb-3">Sin información de envases.</p>
         )}
         <div className="space-y-3">
           <div>
@@ -442,7 +442,7 @@ export default function FichaTab({ item, accountId, onItemChanged }: FichaTabPro
             />
           </div>
           <div>
-            <label className="block text-xs font-medium text-stone-500 mb-1.5">Coste packaging (€/unidad)</label>
+            <label className="block text-xs font-medium text-stone-500 mb-1.5">Coste de envases (€/unidad)</label>
             <input
               type="text" inputMode="decimal" value={packCost} onChange={(e) => setPackCost(e.target.value)}
               className="w-40 px-3 py-2.5 text-sm border border-stone-200 rounded-lg bg-stone-50 focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent"
@@ -457,7 +457,7 @@ export default function FichaTab({ item, accountId, onItemChanged }: FichaTabPro
               disabled={fieldSaving === 'pack'}
               className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-accent text-text-on-accent hover:opacity-90 disabled:opacity-50 transition-opacity"
             >
-              {fieldSaving === 'pack' ? <Loader2 size={13} className="animate-spin" /> : <Check size={13} />} Guardar packaging
+              {fieldSaving === 'pack' ? <Loader2 size={13} className="animate-spin" /> : <Check size={13} />} Guardar envases
             </button>
           )}
         </div>
@@ -467,8 +467,8 @@ export default function FichaTab({ item, accountId, onItemChanged }: FichaTabPro
           de lógica nueva permitida en esta fase. La comparación "Dentro/Fuera
           del objetivo" sigue viviendo en Economía. */}
       <div>
-        <h3 className="text-xs font-medium uppercase tracking-wide text-stone-400 mb-3">Objetivo de food cost</h3>
-        <label className="block text-xs font-medium text-stone-500 mb-1.5">Target FC (%)</label>
+        <h3 className="text-xs font-medium uppercase tracking-wide text-stone-400 mb-3">Objetivo de coste de producto</h3>
+        <label className="block text-xs font-medium text-stone-500 mb-1.5">Objetivo de coste (%)</label>
         <input
           type="text" inputMode="decimal" value={targetFcVal} onChange={(e) => setTargetFcVal(e.target.value)}
           placeholder="Sin definir"

src/modules/kitchen/components/RecipeEscandalloTab.tsx

@@ -1860,7 +1860,7 @@ export default function RecipeEscandalloTab({
               emptyHint: 'Sin sub-recetas.',
             })}
             {Section({
-              title: 'Packaging',
+              title: 'Envases',
               icon: <ShoppingBag className="w-3.5 h-3.5" />,
               kind: 'packaging',
               sectionLines: packagingLines,
@@ -2134,7 +2134,7 @@ export default function RecipeEscandalloTab({
           Coste en vivo
         </div>
 
-        <div className="text-xs text-text-secondary">{packagingCost > 0 ? 'Plate cost' : 'Coste total'}</div>
+        <div className="text-xs text-text-secondary">{packagingCost > 0 ? 'Coste del plato' : 'Coste total'}</div>
         <div
           className={
             'font-mono font-medium text-text-primary leading-tight text-[34px] origin-left transition-all duration-slow ' +
@@ -2166,7 +2166,7 @@ export default function RecipeEscandalloTab({
               <span className="font-mono text-text-primary">{formatEur(foodCost * prodFactor)}</span>
             </div>
             <div className="flex items-center justify-between text-[12px]">
-              <span className="text-text-secondary">Packaging</span>
+              <span className="text-text-secondary">Envases</span>
               <span className="font-mono text-text-primary">{formatEur(packagingCost * prodFactor)}</span>
             </div>
           </div>
@@ -2190,15 +2190,15 @@ export default function RecipeEscandalloTab({
             que eso signifique "no está en carta" — en ese caso, aviso
             distinto, sin el CTA de "Añadir a carta" (ya está añadido). */}
         {econLoading || usedByItems === null ? (
-          <div className="text-[11px] text-text-secondary">Calculando food cost…</div>
+          <div className="text-[11px] text-text-secondary">Calculando coste de producto…</div>
         ) : usedByItems.length === 0 ? (
           <div>
             <div className="text-[11px] font-medium tracking-wide text-text-secondary uppercase mb-2">
-              Food cost
+              Coste de producto
             </div>
             <div className="flex items-start gap-1.5 text-[11px] text-text-secondary leading-relaxed mb-2.5">
               <AlertTriangle className="w-3.5 h-3.5 mt-px flex-shrink-0 text-warning" />
-              <span>Este plato aún no está en ninguna carta. Añádelo para ver su food cost y margen.</span>
+              <span>Este plato aún no está en ninguna carta. Añádelo para ver su coste de producto y margen.</span>
             </div>
             <button
               type="button"
@@ -2212,9 +2212,9 @@ export default function RecipeEscandalloTab({
         ) : economics.length === 0 ? (
           <div>
             <div className="text-[11px] font-medium tracking-wide text-text-secondary uppercase mb-2">
-              Food cost
+              Coste de producto
             </div>
-            <p className="text-[11px] text-text-secondary">Sin datos de food cost por canal todavía.</p>
+            <p className="text-[11px] text-text-secondary">Sin datos de coste de producto por canal todavía.</p>
           </div>
         ) : (
           <div className="flex flex-col gap-3">

src/modules/orders/components/OrderCard.tsx

@@ -26,6 +26,7 @@
 import { useState } from 'react'
 import { ChefHat, Check, Printer, Bike, Phone, ChevronDown, ChevronUp, RefreshCw, AlertTriangle, ShoppingBag } from 'lucide-react'
 import { timeLevel, channelLabel, ticketCode } from '@/modules/kds/kdsUtils'
+import { allergenLabel, type AllergenCode } from '@/modules/kitchen/lib/allergens'
 import { passCode } from '../lib/passCode'
 import ChannelBadge from './ChannelBadge'
 import TicketPreviewModal from './TicketPreviewModal'
@@ -214,7 +215,9 @@ function LineRow({
         <div className="mt-2 ml-[58px] flex items-center gap-1.5 flex-wrap">
           <span className="text-[10.5px] font-extrabold uppercase tracking-wide text-text-secondary">Alérgenos</span>
           {line.allergens.map(a => (
-            <span key={a} className="text-[12px] font-bold px-2 py-0.5 rounded-md bg-warning-bg text-warning border border-warning/30">{a}</span>
+            <span key={a} className="text-[12px] font-bold px-2 py-0.5 rounded-md bg-warning-bg text-warning border border-warning/30">
+              {allergenLabel(a as AllergenCode)}
+            </span>
           ))}
         </div>
       )}

src/pages/VentasDashboardPage.tsx

@@ -213,9 +213,24 @@ export default function VentasDashboardPage() {
     }
   }, [activeAccountId, accountsLoading, period, locationId, ownership, channel, brandId])
 
+  // Auditoría externa (2.6): un canal "Desconocido" con net negativo (ajustes/
+  // devoluciones sin canal atribuido) pintaba una barra negativa sin sentido.
+  // Se agrupan los residuales (net<=0, o sin nombre reconocible) en "Otros" en
+  // vez de mostrarlos sueltos -- mismo total, sin la barra rota.
+  const byChannelGrouped = useMemo(() => {
+    const rows = data?.by_channel ?? []
+    const positive = rows.filter((c) => c.net > 0 && c.name && c.name.toLowerCase() !== 'desconocido')
+    const residual = rows.filter((c) => !(c.net > 0 && c.name && c.name.toLowerCase() !== 'desconocido'))
+    if (residual.length === 0) return positive
+    const otrosNet = residual.reduce((sum, c) => sum + c.net, 0)
+    const otrosOrders = residual.reduce((sum, c) => sum + c.orders, 0)
+    return otrosNet !== 0 || otrosOrders !== 0
+      ? [...positive, { name: 'Otros', net: otrosNet, orders: otrosOrders }]
+      : positive
+  }, [data])
   const channelMax = useMemo(
-    () => Math.max(1, ...(data?.by_channel ?? []).map((c) => c.net)),
-    [data]
+    () => Math.max(1, ...byChannelGrouped.map((c) => c.net)),
+    [byChannelGrouped]
   )
   const locationMax = useMemo(
     () => Math.max(1, ...(data?.by_location ?? []).map((l) => l.net)),
@@ -354,13 +369,13 @@ export default function VentasDashboardPage() {
             <div className="rounded-xl bg-white border border-stone-200 p-4">
               <div className="text-sm font-medium text-stone-800 mb-2.5">Ventas por canal</div>
               <div className="flex flex-col gap-2.5">
-                {data.by_channel.map((c) => (
+                {byChannelGrouped.map((c) => (
                   <div key={c.name}>
                     <div className="flex justify-between text-xs mb-1">
                       <span className="capitalize">{c.name}</span>
                       <span className="text-stone-500 tabular-nums">{eur(c.net)} · {c.orders} ped.</span>
                     </div>
-                    <Bar pct={(c.net / channelMax) * 100} color={TERRA} />
+                    <Bar pct={Math.max(0, (c.net / channelMax) * 100)} color={TERRA} />
                   </div>
                 ))}
               </div>