Build a real Hardware POS in one afternoon.

I want to build HardwarePOS — a point-of-sale system for a small hardware shop in
Uganda. The shop owner uses it to ring up sales of items like nails, paint,
plumbing fittings, electrical supplies, and hand tools. Single user (the shop
owner / cashier) — no team features, no customer-facing storefront, no online
ordering. Strictly in-shop POS.

Core flows:

1. POS Sale (the main screen): search products by name or SKU, add to cart,
   adjust quantities, see live total. Choose payment method (Cash / Mobile Money /
   Card). Capture optional customer name and phone. Complete sale, then download
   a receipt PDF.

2. Inventory: list products with name, SKU, category, price (UGX), and stock
   quantity. Add new products, edit price/stock, delete. Low-stock alerts when
   stock falls below a configurable threshold per product.

3. Sales history: list of past sales with date, total, payment method, items
   count, customer (if captured). Filter by date range and payment method. View
   a single sale's full line items. Export the day's sales to a PDF report.

4. Dashboard: today's sales total + transaction count, top 5 products this week,
   low-stock alert count, weekly revenue chart (last 7 days).

Seed the database with these categories on first run: Tools, Hardware, Paint,
Plumbing, Electrical, Other.

No image uploads — text-only products (name + SKU + category is enough).
No e-commerce / cart abandonment / online ordering / customer accounts.
Currency: UGX (Ugandan Shillings) with comma-separated formatting and no decimals
(e.g., 25,000 not 25,000.00).

Single user, single device. Light + dark mode. Aesthetic: clean dashboard like
Linear or Vercel — bold large numbers so the cashier can read totals at a glance.
Brand color: indigo (#4F46E5).

## What I understood

App: HardwarePOS — a single-user POS for a hardware shop in Uganda
Primary user: the shop owner / cashier
Core features:
  - POS sale flow (search → cart → payment → receipt)
  - Inventory with low-stock alerts
  - Sales history with date filters
  - Dashboard with daily revenue + top products + weekly chart
Data model: Category, Product, Sale, SaleItem (with snapshot fields)
Integrations: Better Auth (email + Google OAuth), Resend (auth emails only),
  Payments: NONE (payment method is just a captured label),
  File uploads: NONE, Dark mode: Yes
Visual design: indigo (#4F46E5), Geist + JetBrains Mono,
  "fast, focused, large numbers", Linear/Vercel inspiration
Out of scope (v1): online ordering, customer accounts, multi-cashier roles

Does this match your intent? Reply 'Yes, generate the files' to proceed,
or tell me what to adjust.

Yes, generate the files

mkdir hardware-pos && cd hardware-pos
# Then drop the 4 downloaded files into this folder:
# - project-description.md
# - project-phases.md
# - design-style-guide.md
# - prompt.md

pnpm create next-app@latest . --typescript --tailwind --app --eslint --import-alias "@/*" --turbopack --no-src-dir

git clone https://github.com/MUKE-coder/vibekit.git /tmp/vibekit

cp /tmp/vibekit/master_prompt.md ./master_prompt.md
cp /tmp/vibekit/jb-components.md ./jb-components.md
cp /tmp/vibekit/pre-deploy-review.md ./pre-deploy-review.md

hardware-pos/
├── master_prompt.md            # framework — coding rules
├── jb-components.md            # framework — component registry
├── pre-deploy-review.md        # framework — security audit prompt
├── project-description.md      # generated by Claude
├── project-phases.md           # generated by Claude
├── design-style-guide.md       # generated by Claude
├── prompt.md                   # generated by Claude — paste this next
│
# ONE of these from Step 3 (depending on your agent):
├── .claude/skills/vibekit/SKILL.md   # Claude Code
├── .cursor/rules/vibekit.mdc         # Cursor
├── AGENTS.md                         # Codex CLI / universal
├── .clinerules                       # Cline
├── .windsurfrules                    # Windsurf
├── GEMINI.md                         # Gemini CLI
└── package.json + Next.js scaffold

DATABASE_URL="postgres://USER:PASS@ep-xxx.neon.tech/neondb?sslmode=require"
BETTER_AUTH_SECRET="<run: openssl rand -base64 32>"
BETTER_AUTH_URL="http://localhost:3000"

# Optional but recommended
RESEND_API_KEY=""
RESEND_FROM_EMAIL="onboarding@resend.dev"

# For Google OAuth
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""

pnpm db:push
pnpm db:generate
pnpm dev

Phase 1 is verified working. Proceed to Phase 2 — Products & Inventory.

Build:
- Category and Product Prisma models (schema below)
- A seed script that inserts the 6 categories on first run: Tools, Hardware, Paint, Plumbing, Electrical, Other
- API routes /api/categories and /api/products with auth guards + Zod validation
- /inventory page using JB Data Table to list products with columns: SKU, Name, Category, Price (UGX), Stock, Status (low-stock badge)
- /inventory/new and /inventory/[id]/edit pages with React Hook Form + Zod
- A formatUGX(amount: number) utility in lib/format.ts that returns "UGX 25,000" style strings (no decimals, comma separators)

Stop after Phase 2 is complete and ask me to verify.

model Category {
  id        String    @id @default(cuid())
  name      String    @unique
  color     String    @default("#4F46E5")
  products  Product[]
  userId    String
  user      User      @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt DateTime  @default(now())
}

model Product {
  id                  String     @id @default(cuid())
  sku                 String
  name                String
  priceUgx            Int        // store as integer, no decimals
  stockQuantity       Int        @default(0)
  lowStockThreshold   Int        @default(5)
  categoryId          String
  category            Category   @relation(fields: [categoryId], references: [id])
  saleItems           SaleItem[]
  userId              String
  user                User       @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt           DateTime   @default(now())
  updatedAt           DateTime   @updatedAt

  @@unique([userId, sku])  // SKUs unique per user
  @@index([userId])
  @@index([categoryId])
}

Phase 2 is verified. Proceed to Phase 3 — POS Sale flow.

Add to the Prisma schema:

model Sale {
  id              String        @id @default(cuid())
  totalUgx        Int
  paymentMethod   PaymentMethod
  customerName    String?
  customerPhone   String?
  items           SaleItem[]
  userId          String
  user            User          @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt       DateTime      @default(now())
  @@index([userId, createdAt])
}

model SaleItem {
  id          String   @id @default(cuid())
  saleId      String
  sale        Sale     @relation(fields: [saleId], references: [id], onDelete: Cascade)
  productId   String
  product     Product  @relation(fields: [productId], references: [id])
  productName String   // snapshot of product name at sale time
  productSku  String   // snapshot of SKU at sale time
  unitPriceUgx Int     // snapshot of price at sale time
  quantity     Int
  lineTotalUgx Int
  @@index([saleId])
  @@index([productId])
}

enum PaymentMethod { CASH MOBILE_MONEY CARD }

Then run pnpm db:push and pnpm db:generate.

Build /pos as the main POS screen with this layout:

LEFT (60%) — Product search + grid:
- Search input at top (search by SKU or product name)
- Product grid below: each card shows SKU, name, price (UGX), stock. Click adds 1 to cart (or increments quantity if already in cart). Out-of-stock products are visually disabled.
- Use React Query for product data with staleTime 30000.

RIGHT (40%) — Cart:
- "New Sale" header
- List of cart items: product name, qty controls (+/-), unit price, line total, remove button
- Optional customer name + phone fields
- Payment method select: Cash / Mobile Money / Card
- Live total in big numbers (32px font, accent color)
- "Complete Sale" button (disabled when cart is empty)

API:
POST /api/sales accepts { items: [{ productId, quantity }], paymentMethod, customerName?, customerPhone? } and:
1. Validates with Zod
2. Wraps everything in db.$transaction:
   a. Reads each product (FOR UPDATE not needed — Prisma handles this with the txn)
   b. Verifies stock >= quantity for each item; throws 400 if not
   c. Creates the Sale with snapshot SaleItems (copy productName, sku, unitPriceUgx)
   d. Decrements product stockQuantity by quantity for each item
3. Returns the new sale id

After successful sale, redirect to /sales/[id] which shows the sale detail + a "Download Receipt" button.

Use the existing JB Searchable Select for the payment method dropdown.

Build /api/sales/[id]/receipt that returns a PDF response using @react-pdf/renderer.

The receipt should look like a real till receipt:
- Centered header: shop name placeholder ("HARDWARE POS"), "RECEIPT" subtitle, date/time
- Sale ID (last 8 chars), payment method, optional customer name/phone
- Line items table: SKU | Item | Qty | Unit Price | Line Total
- Total row in bold
- Footer: "Thank you for your purchase"
- Use Helvetica or the closest equivalent in @react-pdf — small fonts (10–11pt)
- A4 portrait page size
- Currency formatted via formatUGX()

Wire the "Download Receipt" button on the sale detail page to fetch this endpoint and download the file as receipt-<saleId>.pdf.

Build /dashboard with these sections:

STAT CARDS ROW (4 cards across):
- Today's Revenue (UGX) — sum of Sale.totalUgx where DATE(createdAt) = today
- Today's Transactions — count of sales today
- Low-Stock Alerts — count of products where stockQuantity <= lowStockThreshold
- This Week's Revenue — sum of Sale.totalUgx where createdAt >= start of current ISO week

Each card: label (uppercase mono 11px), big number (28px semibold), small comparison vs yesterday/last week (12px secondary).

WEEKLY REVENUE CHART:
- Bar chart of daily revenue for the last 7 days
- Use a simple SVG bar chart in a custom component (no external chart library needed for 7 bars)
- Labels: day name (Mon, Tue, ...). Y-axis: UGX values formatted with formatUGX.
- Bar color: var(--accent), with bg-muted fill for the active day's bar

TOP 5 PRODUCTS THIS WEEK:
- Aggregate SaleItem rows where Sale.createdAt >= start of week
- groupBy productId, sum quantity, sum lineTotalUgx
- Display as a table: rank, name, units sold, revenue
- Order by units sold descending

LOW-STOCK LIST:
- List of products where stockQuantity <= lowStockThreshold
- Show name, SKU, current stock, threshold
- Link to /inventory/[id]/edit

All queries should be in API routes, scoped to session.user.id, served via React Query.

Build /sales — full sales history list:

- JB Data Table with columns: Date (formatted "Jan 15, 2024 14:30"), Sale ID (last 8 chars), Items count, Payment Method (badge), Total (UGX, right-aligned monospace), Customer (if any), Action (View)
- Server-side pagination via /api/sales (page, limit, default 20)
- Filters above the table:
  - Date range picker (default: last 30 days)
  - Payment method dropdown (All / Cash / Mobile Money / Card)
- Filter state lives in URL query params so refresh preserves it
- "Export today's sales as PDF" button at the top — generates a daily report PDF with a header summary + sales table

Clicking a row goes to /sales/[id] (already exists from Phase 3) showing full line items and the receipt download button.

Fix Critical issue #1 from pre-deploy-review-report.md. Apply the suggested fix exactly, run a quick test, confirm the issue is resolved. Do not introduce changes outside the scope of this fix.

git init
git add .
git commit -m "Initial commit — HardwarePOS built with VibeKit"
gh repo create hardware-pos --private --source=. --push
# OR manually create on github.com and:
# git remote add origin https://github.com/YOU/hardware-pos.git
# git push -u origin main

DATABASE_URL=<your Neon prod connection string>
BETTER_AUTH_SECRET=<a NEW 32+ char string, NOT the dev one>
BETTER_AUTH_URL=https://hardware-pos.vercel.app
RESEND_API_KEY=<from resend.com>
RESEND_FROM_EMAIL=noreply@yourshop.com
GOOGLE_CLIENT_ID=<from Google Cloud Console>
GOOGLE_CLIENT_SECRET=<from Google Cloud Console>
NEXT_PUBLIC_APP_URL=https://hardware-pos.vercel.app

https://hardware-pos.vercel.app/api/auth/callback/google