mr-bill

name: mr-bill description: Assists with developing, maintaining, and extending the MR-BILL restaurant billing software. Use when working on menu management, order & billing, payments, receipts, reports, staff management, table management, tax/discounts, kitchen display (KOT), inventory, or any project feature. Covers React/Vite frontend, Supabase backend, Zustand state, Tailwind + shadcn/ui + MUI styling, and desktop/web deployment.

MR-BILL — Restaurant Billing Software

MR-BILL is a full-featured, general-purpose restaurant billing and management system designed for all types of restaurants. It provides end-to-end operations from menu management to kitchen order tickets, billing, payments, inventory tracking, and sales analytics.

Project Identity

Tech Stack

Key Dependencies

{
  "react": "^18.x",
  "react-dom": "^18.x",
  "react-router-dom": "^6.x",
  "zustand": "^4.x",
  "@supabase/supabase-js": "^2.x",
  "@mui/material": "^5.x",
  "@emotion/react": "latest",
  "@emotion/styled": "latest",
  "tailwindcss": "^3.x",
  "date-fns": "^3.x",
  "react-to-print": "latest",
  "recharts": "^2.x",
  "lucide-react": "latest"
}

Design System & Theme

Brand Colors

:root {
  /* Primary — Warm Amber */
  --color-primary: #d97706;
  --color-primary-light: #fbbf24;
  --color-primary-dark: #b45309;

  /* Secondary — Dark Slate */
  --color-secondary: #1e293b;
  --color-secondary-light: #334155;
  --color-secondary-dark: #0f172a;

  /* Accent — Golden Yellow */
  --color-accent: #f59e0b;
  --color-accent-light: #fcd34d;
  --color-accent-dark: #d97706;

  /* Semantic */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  /* Surfaces */
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-surface-elevated: #334155;
  --color-text-primary: #f8fafc;
  --color-text-secondary: #94a3b8;
  --color-border: #334155;
}

Tailwind Config Extension

Extend tailwind.config.js with these custom colors so they can be used as utility classes (e.g., bg-primary, text-secondary):

// tailwind.config.js
module.exports = {
  content: ["./index.html", "./src/**/*.{js,jsx}"],
  theme: {
    extend: {
      colors: {
        primary: { DEFAULT: "#d97706", light: "#fbbf24", dark: "#b45309" },
        secondary: { DEFAULT: "#1e293b", light: "#334155", dark: "#0f172a" },
        accent: { DEFAULT: "#f59e0b", light: "#fcd34d", dark: "#d97706" },
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"],
      },
    },
  },
  plugins: [],
};

UI Component Strategy

Use components from three UI libraries with clear priority:

Rule: Prefer shadcn/ui for standard UI elements. Use MUI only for components not available in shadcn (e.g., DataGrid, DateTimePicker). Never mix both libraries for the same component type.

Typography

• Headings: Inter — bold, clean
• Body: Inter — regular weight
• Monospace (receipts, KOT): JetBrains Mono

Design Principles

1. Dark-first theme — The default theme uses dark slate backgrounds with amber/gold accents
2. High contrast — Ensure all text meets WCAG AA contrast ratios against dark backgrounds
3. Consistent spacing — Use Tailwind's spacing scale (p-2, p-4, gap-6, etc.)
4. Micro-animations — Add subtle transitions on hover, focus, and state changes (150–300ms)
5. Responsive — All views must work on 1024px+ screens (POS terminals & desktops)

Project Structure

MR-BILL/
├── public/
│   ├── favicon.ico
│   └── assets/                    # Static images, logos
├── src/
│   ├── main.jsx                   # App entry point
│   ├── App.jsx                    # Root component, routing
│   ├── index.css                  # Global styles, CSS variables
│   │
│   ├── components/                # Shared/reusable components
│   │   ├── ui/                    # shadcn/ui components
│   │   ├── layout/                # Sidebar, Navbar, PageWrapper
│   │   ├── common/                # Loader, EmptyState, ConfirmDialog
│   │   └── receipt/               # PrintableReceipt, KOTTicket
│   │
│   ├── features/                  # Feature modules (see below)
│   │   ├── menu/
│   │   ├── orders/
│   │   ├── billing/
│   │   ├── payments/
│   │   ├── tables/
│   │   ├── kitchen/
│   │   ├── inventory/
│   │   ├── reports/
│   │   ├── staff/
│   │   └── settings/
│   │
│   ├── stores/                    # Zustand stores
│   │   ├── useAuthStore.js
│   │   ├── useMenuStore.js
│   │   ├── useOrderStore.js
│   │   ├── useTableStore.js
│   │   ├── useCartStore.js
│   │   ├── useInventoryStore.js
│   │   └── useSettingsStore.js
│   │
│   ├── lib/                       # Utilities & config
│   │   ├── supabase.js            # Supabase client init
│   │   ├── constants.js           # App-wide constants
│   │   ├── helpers.js             # Utility functions
│   │   ├── formatters.js          # Currency, date, number formatters
│   │   └── validators.js          # Form validation schemas
│   │
│   ├── hooks/                     # Custom React hooks
│   │   ├── useAuth.js
│   │   ├── useRealtimeOrders.js
│   │   ├── usePrint.js
│   │   └── useKeyboardShortcuts.js
│   │
│   └── routes/                    # Route definitions
│       └── index.jsx
│
├── supabase/                      # Supabase config & migrations
│   ├── migrations/
│   └── seed.sql
│
├── .env                           # Environment variables (NEVER commit)
├── .env.example                   # Template for env vars
├── index.html
├── package.json
├── tailwind.config.js
├── vite.config.js
└── README.md

Feature Module Structure

Each feature module in src/features/<module>/ follows this pattern:

features/orders/
├── OrdersPage.jsx          # Main page component
├── components/             # Feature-specific components
│   ├── OrderCard.jsx
│   ├── OrderForm.jsx
│   └── OrderStatusBadge.jsx
├── hooks/                  # Feature-specific hooks (optional)
│   └── useOrders.js
└── utils/                  # Feature-specific helpers (optional)
    └── orderCalculations.js

Core Feature Modules

1. 📋 Menu Management (features/menu/)

Manage the restaurant's menu: categories, items, pricing, availability.

Key Components:

• MenuPage.jsx — Grid/list view of all menu items
• MenuItemForm.jsx — Add/edit item (name, price, category, image, availability)
• CategoryManager.jsx — CRUD for menu categories

Database Tables: categories, menu_items

Business Rules:

• Items can be marked as available / unavailable without deleting
• Each item belongs to exactly one category
• Items can have optional image uploads (Supabase Storage)
• Support for variants/sizes (e.g., Small/Medium/Large with different prices)

2. 🧾 Order & Billing (features/orders/ + features/billing/)

Create, manage, and track customer orders. Generate bills from completed orders.

Key Components:

• NewOrderPage.jsx — POS-style order creation (select table → add items → place order)
• OrdersListPage.jsx — View all active/past orders
• BillPreview.jsx — Bill summary with items, taxes, discounts, total
• CartPanel.jsx — Sidebar cart for current order

Database Tables: orders, order_items

Order Lifecycle:

PLACED → PREPARING → READY → SERVED → BILLED → PAID

Business Rules:

• Orders are linked to a table (for dine-in) or marked as takeaway
• Items can be added to or removed from an active order before billing
• Each order generates a unique order number (e.g., ORD-20260223-001)
• Bill is generated from the order with tax and discount calculations

3. 💰 Payment Tracking (features/payments/)

Record and track payments against bills.

Key Components:

• PaymentDialog.jsx — Payment modal (amount, method, split option)
• PaymentHistory.jsx — List of all transactions

Database Tables: payments

Supported Methods: cash, card, upi, wallet, split

Business Rules:

• Support split payments (e.g., ₹500 cash + ₹300 UPI)
• Record payment method, amount, timestamp, and cashier
• Change calculation for cash payments
• Payments are immutable once recorded (void instead of edit)

4. 🖨️ Receipt & Invoice Printing (components/receipt/)

Generate and print customer receipts and KOT tickets.

Key Components:

• PrintableReceipt.jsx — Formatted bill receipt (use react-to-print)
• KOTTicket.jsx — Kitchen order ticket for printing
• InvoiceTemplate.jsx — Formal invoice with restaurant details

Design Rules:

• Use font-mono (JetBrains Mono) for receipt content
• Receipt width: 80mm (standard thermal printer)
• Include: restaurant name, address, GSTIN, items, taxes, total, payment method, date/time
• KOT includes: order number, table, items with quantities, special instructions, timestamp

5. 📊 Sales Reports & Analytics (features/reports/)

Dashboard and reports for business insights.

Key Components:

• DashboardPage.jsx — Overview cards (today's revenue, orders, top items)
• SalesReport.jsx — Daily/weekly/monthly sales breakdowns
• ItemWiseReport.jsx — Best/worst selling items
• RevenueChart.jsx — Line/bar charts using Recharts

Database Views/Queries: Aggregate queries on orders, order_items, payments

Business Rules:

• Default view: Today's summary
• Support date range filters
• Export reports as CSV/PDF
• Show comparisons (today vs yesterday, this week vs last week)

6. 👤 Staff Management (features/staff/)

Manage restaurant staff, roles, and access control.

Key Components:

• StaffListPage.jsx — List all staff members
• StaffForm.jsx — Add/edit staff
• RolePermissions.jsx — Configure role-based access

Database Tables: staff, roles (+ Supabase Auth for login)

Roles:

Business Rules:

• Staff login via Supabase Auth (email/password)
• Role-based route protection using a <ProtectedRoute> wrapper
• Activity logging for audit trail (who billed what, when)

7. 🍽️ Table Management (features/tables/)

Visual management of restaurant tables and their status.

Key Components:

• TableLayoutPage.jsx — Visual grid/map of all tables
• TableCard.jsx — Individual table with status indicator
• TableForm.jsx — Add/edit table (number, capacity, section)

Database Tables: tables

Table Statuses:

AVAILABLE (green) → OCCUPIED (amber/primary) → BILLING (blue) → CLEANING (gray)

Business Rules:

• Tables are organized by sections (e.g., Indoor, Outdoor, VIP)
• Clicking an occupied table shows the active order
• Clicking an available table starts a new order
• Real-time status updates via Supabase Realtime subscriptions

8. 🏷️ Tax & Discounts (features/settings/ + billing logic)

Configure and apply taxes, service charges, and discounts.

Key Components:

• TaxSettings.jsx — Configure tax rates (GST, CGST, SGST, service charge)
• DiscountDialog.jsx — Apply discounts to orders (percentage or flat)
• CouponManager.jsx — Create/manage discount coupons

Database Tables: tax_config, discounts, coupons

Business Rules:

• Default Indian GST: CGST 2.5% + SGST 2.5% = 5% (or 9% + 9% = 18% for AC restaurants)
• Service charge is optional and configurable
• Discounts can be percentage-based or flat amount
• Coupons have expiry dates and usage limits
• Tax calculation: subtotal → apply discount → apply tax → final total

Calculation Formula:

subtotal = Σ (item_price × quantity)
discount_amount = subtotal × (discount_percent / 100)  OR  flat_discount
taxable_amount = subtotal - discount_amount
cgst = taxable_amount × (cgst_rate / 100)
sgst = taxable_amount × (sgst_rate / 100)
service_charge = taxable_amount × (service_charge_rate / 100)
grand_total = taxable_amount + cgst + sgst + service_charge

9. 🔔 Kitchen Display / KOT (features/kitchen/)

Kitchen Order Ticket system for real-time order management.

Key Components:

• KitchenDisplayPage.jsx — Full-screen kitchen view (order queue)
• KOTCard.jsx — Individual order card with items and status
• KOTPrintButton.jsx — Print KOT ticket

Business Rules:

• Kitchen display uses Supabase Realtime to receive new orders instantly
• Orders are displayed in columns: New → Preparing → Ready
• Kitchen staff can update order status with one click
• KOT shows: order number, table, items (with modifiers/notes), time placed
• Auto-sort by time (oldest first)
• Sound notification for new orders

10. 📦 Inventory Management (features/inventory/)

Track ingredient stock, set alerts, and link items to menu.

Key Components:

• InventoryPage.jsx — Stock list with current quantities
• StockForm.jsx — Add/update stock entries
• LowStockAlerts.jsx — Items below minimum threshold
• StockHistory.jsx — Log of stock additions and deductions

Database Tables: inventory, stock_log

Business Rules:

• Each inventory item has: name, unit, current_qty, min_qty, cost_per_unit
• Low-stock alerts when current_qty < min_qty
• Optional: link menu items to inventory for auto-deduction on order
• Stock log tracks all additions (purchases) and deductions (usage)

Database Schema (Supabase / PostgreSQL)

Core Tables

-- Categories for menu items
CREATE TABLE categories (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL UNIQUE,
  display_order INT DEFAULT 0,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT now()
);

-- Menu items
CREATE TABLE menu_items (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  category_id UUID REFERENCES categories(id) ON DELETE SET NULL,
  name TEXT NOT NULL,
  description TEXT,
  price DECIMAL(10,2) NOT NULL CHECK (price >= 0),
  image_url TEXT,
  is_available BOOLEAN DEFAULT true,
  is_veg BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);

-- Restaurant tables
CREATE TABLE tables (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  table_number TEXT NOT NULL UNIQUE,
  capacity INT DEFAULT 4,
  section TEXT DEFAULT 'Main',
  status TEXT DEFAULT 'available' CHECK (status IN ('available', 'occupied', 'billing', 'cleaning')),
  created_at TIMESTAMPTZ DEFAULT now()
);

-- Orders
CREATE TABLE orders (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  order_number TEXT NOT NULL UNIQUE,
  table_id UUID REFERENCES tables(id) ON DELETE SET NULL,
  order_type TEXT DEFAULT 'dine_in' CHECK (order_type IN ('dine_in', 'takeaway', 'delivery')),
  status TEXT DEFAULT 'placed' CHECK (status IN ('placed', 'preparing', 'ready', 'served', 'billed', 'paid', 'cancelled')),
  subtotal DECIMAL(10,2) DEFAULT 0,
  discount_amount DECIMAL(10,2) DEFAULT 0,
  tax_amount DECIMAL(10,2) DEFAULT 0,
  service_charge DECIMAL(10,2) DEFAULT 0,
  grand_total DECIMAL(10,2) DEFAULT 0,
  notes TEXT,
  created_by UUID REFERENCES auth.users(id),
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);

-- Order line items
CREATE TABLE order_items (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  order_id UUID REFERENCES orders(id) ON DELETE CASCADE,
  menu_item_id UUID REFERENCES menu_items(id),
  item_name TEXT NOT NULL,
  quantity INT NOT NULL CHECK (quantity > 0),
  unit_price DECIMAL(10,2) NOT NULL,
  total_price DECIMAL(10,2) NOT NULL,
  special_instructions TEXT,
  kot_status TEXT DEFAULT 'pending' CHECK (kot_status IN ('pending', 'preparing', 'ready', 'served')),
  created_at TIMESTAMPTZ DEFAULT now()
);

-- Payments
CREATE TABLE payments (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  order_id UUID REFERENCES orders(id) ON DELETE CASCADE,
  amount DECIMAL(10,2) NOT NULL CHECK (amount > 0),
  method TEXT NOT NULL CHECK (method IN ('cash', 'card', 'upi', 'wallet')),
  reference_number TEXT,
  received_by UUID REFERENCES auth.users(id),
  created_at TIMESTAMPTZ DEFAULT now()
);

-- Inventory
CREATE TABLE inventory (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  unit TEXT NOT NULL,
  current_qty DECIMAL(10,2) DEFAULT 0,
  min_qty DECIMAL(10,2) DEFAULT 0,
  cost_per_unit DECIMAL(10,2) DEFAULT 0,
  updated_at TIMESTAMPTZ DEFAULT now()
);

-- Staff profiles (extends Supabase auth.users)
CREATE TABLE staff (
  id UUID REFERENCES auth.users(id) PRIMARY KEY,
  full_name TEXT NOT NULL,
  phone TEXT,
  role TEXT DEFAULT 'waiter' CHECK (role IN ('admin', 'manager', 'cashier', 'waiter', 'kitchen')),
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT now()
);

-- Tax configuration
CREATE TABLE tax_config (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  rate DECIMAL(5,2) NOT NULL,
  is_active BOOLEAN DEFAULT true
);

-- Discount coupons
CREATE TABLE coupons (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  code TEXT NOT NULL UNIQUE,
  type TEXT CHECK (type IN ('percentage', 'flat')),
  value DECIMAL(10,2) NOT NULL,
  min_order_amount DECIMAL(10,2) DEFAULT 0,
  max_uses INT,
  used_count INT DEFAULT 0,
  expires_at TIMESTAMPTZ,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT now()
);

Row Level Security (RLS)

Enable RLS on all tables. Example policies:

-- Staff can read menu items
ALTER TABLE menu_items ENABLE ROW LEVEL SECURITY;
CREATE POLICY "All authenticated users can read menu"
  ON menu_items FOR SELECT
  TO authenticated
  USING (true);

-- Only admin/manager can modify menu
CREATE POLICY "Admin and manager can modify menu"
  ON menu_items FOR ALL
  TO authenticated
  USING (
    EXISTS (
      SELECT 1 FROM staff
      WHERE staff.id = auth.uid()
      AND staff.role IN ('admin', 'manager')
    )
  );

Zustand Store Conventions

Store Structure

Each Zustand store follows this pattern:

// src/stores/useOrderStore.js
import { create } from "zustand";
import { supabase } from "../lib/supabase";

const useOrderStore = create((set, get) => ({
  // --- State ---
  orders: [],
  activeOrder: null,
  isLoading: false,
  error: null,

  // --- Actions ---
  fetchOrders: async () => {
    set({ isLoading: true, error: null });
    try {
      const { data, error } = await supabase
        .from("orders")
        .select("*, order_items(*)")
        .order("created_at", { ascending: false });
      if (error) throw error;
      set({ orders: data });
    } catch (error) {
      set({ error: error.message });
    } finally {
      set({ isLoading: false });
    }
  },

  setActiveOrder: (order) => set({ activeOrder: order }),

  // --- Computed (use get()) ---
  getActiveOrders: () =>
    get().orders.filter((o) => o.status !== "paid" && o.status !== "cancelled"),
}));

export default useOrderStore;

Store Rules

1. One store per domain — useMenuStore, useOrderStore, useTableStore, etc.
2. Async actions — Always set isLoading and error states
3. No business logic in components — Keep calculations and logic in stores or utility functions
4. Selectors — Use get() for derived/computed state
5. Never mutate state directly — Always use set()

Supabase Conventions

Client Setup

// src/lib/supabase.js
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Environment Variables

# .env (NEVER commit this file)
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

Realtime Subscriptions

Use Supabase Realtime for live updates (orders, tables, KOT):

// Hook pattern for realtime
import { useEffect } from "react";
import { supabase } from "../lib/supabase";

export function useRealtimeOrders(onUpdate) {
  useEffect(() => {
    const channel = supabase
      .channel("orders-realtime")
      .on(
        "postgres_changes",
        { event: "*", schema: "public", table: "orders" },
        (payload) => {
          onUpdate(payload);
        },
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [onUpdate]);
}

Coding Conventions

Naming

File Rules

1. One component per file — Component name must match filename
2. Max 300 lines per file — Split into sub-components if larger
3. Group imports: React → Third-party → Local components → Stores → Utils → Styles
4. No inline styles — Use Tailwind classes or CSS modules
5. Always handle loading and error states in pages

Currency Formatting

Always use this helper for displaying prices:

// src/lib/formatters.js
export const formatCurrency = (amount) => {
  return new Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "INR",
    minimumFractionDigits: 2,
  }).format(amount);
};
// Output: ₹1,234.56

Date Formatting

Use date-fns for all date operations:

import { format, formatDistanceToNow } from "date-fns";

// Display: "23 Feb 2026, 11:45 AM"
format(new Date(timestamp), "dd MMM yyyy, hh:mm a");

// Display: "5 minutes ago"
formatDistanceToNow(new Date(timestamp), { addSuffix: true });

How to Build Features

Step-by-Step Process

1. UNDERSTAND → Read the feature requirements, identify affected modules
2. SCHEMA     → Define/update database tables and RLS policies
3. STORE      → Create/update Zustand store with state and actions
4. COMPONENTS → Build UI components using shadcn/ui + Tailwind
5. PAGE       → Assemble the page, wire up store and routing
6. REALTIME   → Add Supabase Realtime if the feature needs live updates
7. TEST       → Verify all flows (happy path + edge cases)
8. POLISH     → Add loading states, error handling, animations

Adding a New Page Checklist

• Create feature folder: src/features/<name>/
• Create page component: <Name>Page.jsx
• Add route in src/routes/index.jsx
• Add sidebar navigation link
• Create Zustand store if needed
• Add Supabase table/migration if needed
• Handle loading, error, and empty states
• Ensure role-based access (wrap with <ProtectedRoute>)
• Test on 1024px+ screen widths

Decision Tree

What are you working on?
│
├── 🐛 Bug Fix
│   ├── Reproduce the bug first
│   ├── Check Supabase logs and browser console
│   ├── Fix the root cause, not just symptoms
│   └── Verify the fix doesn't break other features
│
├── ✨ New Feature
│   ├── Follow the "How to Build Features" process above
│   ├── Check if similar patterns exist in other feature modules
│   └── Reuse existing components and stores where possible
│
├── 🎨 UI/Styling Change
│   ├── Use Tailwind classes (prefer over inline styles)
│   ├── Follow the Design System (colors, spacing, typography)
│   ├── Ensure dark theme compatibility
│   └── Test responsiveness (1024px+)
│
├── 🗄️ Database Change
│   ├── Create a new migration in `supabase/migrations/`
│   ├── Update RLS policies
│   ├── Update relevant Zustand store
│   └── Update TypeScript/JSDoc types if applicable
│
├── ⚡ Performance Issue
│   ├── Check for unnecessary re-renders (React DevTools)
│   ├── Optimize Supabase queries (use select, filters, limits)
│   ├── Add pagination for large lists
│   └── Use React.memo and useMemo where appropriate
│
└── 🖨️ Print/Receipt Issue
    ├── Check `react-to-print` configuration
    ├── Use monospace font for receipt content
    ├── Test with 80mm thermal printer width
    └── Verify all bill calculations are correct

Scripts & Commands

Environment Setup

Prerequisites

• Node.js 18+
• npm 9+
• Supabase account and project
• Git

First-Time Setup

# 1. Clone the repo
git clone <repo-url>
cd MR-BILL

# 2. Install dependencies
npm install

# 3. Create .env file from template
cp .env.example .env
# Fill in VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY

# 4. Start the dev server
npm run dev

Keyboard Shortcuts (POS Optimization)

For fast billing in a POS environment, implement these shortcuts:

Troubleshooting

Resources

• React: react.dev
• Vite: vitejs.dev
• Supabase: supabase.com/docs
• Zustand: zustand-demo.pmnd.rs
• Tailwind CSS: tailwindcss.com/docs
• shadcn/ui: ui.shadcn.com
• Material UI: mui.com
• Recharts: recharts.org
• react-to-print: github.com/gregnb/react-to-print