Frontend Architecture, Design System & PWA Engine

1. Neo-Brutalism Design System Tokens

SML Web features an expressive Neo-Brutalism UI Design System, engineered with bold borders, vibrant accent fills, solid drop shadows, and high contrast:

/* Neo-Brutalism CSS Tokens */
:root {
  --neo-border-width: 3px;
  --neo-border-color: #000000;
  --neo-shadow: 4px 4px 0px #000000;
  --neo-shadow-lg: 6px 6px 0px #000000;
  --neo-bg-yellow: #FEF08A;
  --neo-bg-orange: #FFEDD5;
  --neo-bg-red: #FCA5A5;
  --neo-bg-green: #BBF7D0;
  --neo-radius: 0.5rem;
}

Reusable Component Example: Neo-Brutalist Card

export const NeoCard = ({ title, children, color = 'bg-yellow-200' }) => (
  <div className={`p-6 border-3 border-black ${color} rounded-lg shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]`}>
    <h3 className="text-xl font-extrabold uppercase mb-2">{title}</h3>
    <div>{children}</div>
  </div>
);

---

2. Zustand State Management Architecture

Application domain state is decoupled into modular Zustand stores in src/frontend/store/:

• cartStore: Manages cart items, quantity modifiers, custom catering box builder selections, and coupon discounts.
• settingsStore: Caches active site metadata, operational store hours, and delivery zone configs.

---

3. Thermal Receipt Printer ESC/POS Integration

For Kitchen Display Systems (KDS) and POS cashier counters, src/frontend/services/printerService.ts formats order payloads into standard ESC/POS byte commands for direct USB/Network thermal printer dispatch:

// Sample ESC/POS thermal receipt formatting
export function formatOrderReceipt(order: any): Uint8Array {
  const encoder = new TextEncoder();
  let cmds = [];
  
  // ESC @ Init Printer
  cmds.push(0x1B, 0x40);
  // ESC a 1 Align Center
  cmds.push(0x1B, 0x61, 0x01);
  
  cmds.push(...encoder.encode("SATENYA MAMA LOESYE\n"));
  cmds.push(...encoder.encode(`Struk #${order.orderNumber}\n\n`));
  
  // Cut paper
  cmds.push(0x1D, 0x56, 0x41, 0x03);
  return new Uint8Array(cmds);
}