POS System

Tech Stack

Project Structure

src/
├── App.tsx                    # Root component, state management
├── main.tsx                   # Entry point
├── types/
│   └── pos.ts                 # TypeScript types (Product, CartItem, PaymentMethod)
├── data/
│   └── products.ts            # Static product catalog and categories
└── components/
    ├── TopBar.tsx             # Navigation bar with search
    ├── CategoryFilter.tsx     # Category tab selector
    ├── ProductCard.tsx        # Individual product tile
    ├── CartPanel.tsx          # Cart sidebar with totals and payment
    ├── ReceiptModal.tsx       # Post-checkout receipt overlay
    ├── PaymentModal.tsx       # Payment confirmation modal
    ├── Dashboard.tsx          # Sales analytics view
    ├── TransactionHistory.tsx # Past transactions view
    └── ProductManagement.tsx  # Product catalog management

Setup & Usage

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Install dependencies
npm install

Development

# Start the dev server
npm run dev

The app will be available at http://localhost:5173 by default.

Build

# Type-check
npm run typecheck

# Production build
npm run build

# Preview production build
npm run preview

Linting

# Run linter
npm run lint

# Auto-fix lint issues
npm run lint:fix

Application Flow

1. Browse — Search or filter products by category on the left panel
2. Add to Cart — Click a product card to add it to the cart (right panel)
3. Adjust — Increment/decrement quantities or remove items directly in the cart
4. Discount — Apply a percentage discount via preset buttons or manual entry
5. Select Payment — Choose Cash, Card, or Mobile
6. Charge — Confirm the transaction; a receipt modal is displayed
7. Close Receipt — Cart clears and the system resets for the next transaction

Key Data Types

// From src/types/pos.ts
type PaymentMethod = "cash" | "card" | "mobile";

interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
  // ...
}

interface CartItem {
  product: Product;
  quantity: number;
}

License

Tetrees License