Design to Deploy Cloud POS

is a Next.js web application that simulates a complete cloud-based Point-of-Sale system targeted at café and restaurant businesses operating multiple branches.

POS Terminal

The selling interface. The left panel is the product area: a search bar (text or barcode), category filter chips, and a responsive product grid with thumbnail images,   price, SKU, and stock badge. Clicking a product adds it to cart. The right panel is the cart: it lists items with quantity controls (+ / −) and individual remove buttons.   Below the cart items is a summary section showing subtotal, discount (editable via a quick-picker modal), VAT 7%, and grand total. The action row has three secondary   buttons — select member, hold bill, and view held bills — then a full-width checkout button showing the total. Pressing checkout opens a payment modal with four methods:   cash (with quick-amount chips and change calculator), QR PromptPay, card, and bank transfer. On mobile (≤ 768 px) the cart panel hides and becomes a sticky bottom bar with   a cart icon badge and a checkout button; tapping it slides up a bottom sheet drawer.

Dashboard

The central overview screen for the selected branch. It shows two rows of KPI cards — the first covers today's revenue, bill count, average ticket value, and how many   branches currently have an open shift. The second row shows total discounts given, VAT collected, new customers, and low-stock item count. Below that is a branch comparison    panel with a progress bar and spark chart for each branch. The main chart area has two graphs side by side: a 7-day area chart and an hourly bar chart for today's peak   hours. At the bottom is a paginated recent-bills table and a payment-method donut chart. A refresh button and an "email report" button sit in the page header.

Branch Management

A page for monitoring and managing all branches. Four KPI cards at the top show total daily revenue across all branches, number of branches with open shifts, total bills   today, and average goal progress. Below is a card grid with one card per branch — each shows the branch name, staff count, shift status (open/closed pill with live pulse   animation), today's revenue, bill count, a low-stock warning badge, a goal progress bar, and a spark chart. Clicking a branch card opens a slide-in detail panel on the   right side with address, phone, manager name, opening date, floor area, terminal count, and three KPI tiles (revenue, staff, members). There is also an "add branch" button   in the header that opens a creation modal, and a branch-limit notice appears when the demo cap is reached.

Inventory

Tracks product stock levels for the selected branch. Four KPI cards show total SKU count, total stock value, number of items below the reorder threshold (highlighted in   red), and the number of inter-branch transfers. The main area is a searchable, filterable table of all products showing SKU, name, category, stock level (with a colored   badge — green for normal, amber for low, red for out), unit price, and total stock value. Alongside the table is a sidebar panel with two cards: a low-stock alert list, and    a summary of stock value grouped by category. An "add product" button opens a modal form with fields for image, name, SKU, category, price, and starting stock.

Staff Management

A roster page for all staff across branches. KPI cards at the top show total staff count, active staff today, average performance score, and number of staff with open   shifts. The main table lists each employee with their name and avatar initials, role badge (cashier, supervisor, manager, etc.), assigned branch, shift status, performance   score out of 100, and a join date. Clicking a row opens a right-side detail panel with three tabs: Info (contact details, address, emergency contact), Permissions (toggle   switches for POS access, void bills, discount approval, backoffice access, reports), and Activity (a recent transaction log). There are buttons to add a new staff member   and to export the roster.

Settings

A tabbed configuration page with six tabs

1. Store name, head-office address, phone, tax ID, logo upload, currency (THB/USD), timezone, date format, language, and VAT rate

2. Toggle each payment method on/off (cash, QR PromptPay, card, transfer), set PromptPay ID, configure rounding rules and service charge

3. Receipt printer model, paper width, auto-print toggle, cash drawer settings, barcode scanner port, and customer display output port

4. OTP requirement for branch switching, manager PIN for discounts, session timeout, and audit log access

5. Data sync frequency between branches, cloud backup schedule, and data retention period

6. Connect LINE OA (send receipts/promotions via LINE), accounting software export, delivery platform webhooks (Grab, Foodpanda, LINE MAN), and API key management for custom integrations

Click here to visit https://designtodeploy-pos-mockup.vercel.app/

Tech Stack

• Framework & Runtime - Next.js 16.2.6 (App Router) - React 19.2.4

• State Management - Zustand 5.0.13

• Styling - Tailwind CSS v4

• Language - TypeScript