Skip to content

feat: table_online_ self_order_kiosk#97

Draft
esafwan wants to merge 22 commits intodevelopfrom
planning/multi-app-architecture
Draft

feat: table_online_ self_order_kiosk#97
esafwan wants to merge 22 commits intodevelopfrom
planning/multi-app-architecture

Conversation

@esafwan
Copy link
Copy Markdown
Contributor

@esafwan esafwan commented Mar 26, 2026

URY Multi-App Architecture with Table & Self-Kiosk Order

Overview

This PR marks the completion of the URY Multi-App Architecture transformation. We have evolved URY from a standalone Staff POS into a comprehensive Delivery and Experience Platform, supporting the entire customer journey from table ordering to remote pickup and self-service kiosks.

All 7 phases of the architectural roadmap are now complete, including the full frontend application suite, shared logic ecosystem, payment gateway integration, and real-time fulfillment engine.

Core Components

1. New Frontend Applications (apps/)

We have launched three distinct, high-performance React applications sharing a unified design system and logic layer:

  • table-order: A zero-friction QR-code-based ordering system for in-restaurant dining.
  • customer-order: A full-featured web app for remote pickup, delivery, and curbside ordering.
  • kiosk: A specialized, high-touch interface for self-service hardware, featuring attract modes and inactivity handling.

2. Monorepo Ecosystem (packages/)

Maximum code reuse is achieved through 6 purpose-built TypeScript packages:

  • @ury/ui: A professional UI component library with over 10 standardized components.
  • @ury/api-client: A fully typed Frappe SDK wrapper.
  • @ury/cart: Shared state management for shopping sessions using Zustand.
  • @ury/order & @ury/menu: Domain-specific logic hooks for real-time status and menu fetching.
  • @ury/config: Centralized constants and configuration.

3. Backend Extensions (ury/)

The Frappe core has been hardened and extended:

  • ury_customer: New guest-accessible API layer with strict token-based validation.
  • ury_payment: A generic Payment Gateway abstraction supporting Stripe and Razorpay integrations.
  • DocType Enhancements: Extended URY Restaurant, URY Table, and URY Menu with the metadata required for digital exposure.
  • Automated Provisioning: Python patches to automatically inject 6 custom fields into POS Invoice for fulfillment tracking.

4. Technical Highlights

  • Real-time Synchronization: Frontend apps receive instant updates on order status via Frappe Socket.io.
  • Auto-Cashier Assignment: Guest orders are automatically routed to the active POS Opening Entry for the restaurant.
  • Payment Lifecycle: End-to-end payment management with secure webhook verification.

Documentation and Verification

Comprehensive documentation has been provided to ensure maintainability:

  • AGENTS.md: Detailed developer guide and architecture map.
  • IMPLEMENTATION_SUMMARY.md: Complete technical breakdown of the platform.
  • TESTING.md: Step-by-step guides for E2E, Unit, and API testing.

Post-Merge Instructions

  1. Database Migration: Run bench migrate to apply DocType changes and patches.
  2. Setup Dependencies: Run yarn install at the root.
  3. Build Apps: Execute bench build --app ury to bundle all three frontend applications.
  4. Gateway Config: Navigate to URY Payment Gateway in Frappe to configure Stripe/Razorpay keys.

Note

This PR closes the planning/multi-app-architecture initiative. URY is now ready to scale from a single-point solution to a holistic restaurant operating system.

esafwan added 22 commits March 26, 2026 04:37
…de, kiosk

Comprehensive code-informed architecture plan for extending URY into
customer-facing apps. Based on deep inspection of the existing codebase.

Documents:
- 00_AGENTS_CONTEXT.md: Frappe patterns + skill references for implementors
- implementation_plan.md: Master plan with key decisions summary
- 01: Repository understanding + API surface mapping
- 02: Capability gaps by target app + reuse analysis
- 03: Architecture recommendation + app model (all 5 experiences)
- 04: Code refactor plan + API readiness + domain model extensions
- 05: Technical user flows + proposed folder structure
- 06: 7-phase delivery plan + final recommendations

Key decisions:
- Single Frappe app (ury) with multiple frontend SPA entry points
- Monorepo with shared npm domain packages
- QR Table Self-Order as first customer-facing app
- Curbside as fulfillment mode (not separate app)
- Kiosk as separate thin shell
- Payment gateway abstraction (Stripe + Razorpay first)
Backend:
- Add URY Customer module with customer-facing APIs
- Add get_public_menu(), get_restaurant_info(), get_order_status(), validate_table_token()
- Add new fields to URY Restaurant (slug, accepts_online_orders, logo, opening_hours)
- Add new fields to URY Table (qr_token, qr_generated_at)
- Add new field to URY Menu (is_public)
- Update hooks.py with new website routes for customer ordering

Frontend Infrastructure:
- Move pos/ to apps/pos/ with updated build paths
- Add npm workspaces configuration
- Create @ury/config package (doctypes, order-types)
- Create @ury/ui package (button, card, dialog, input, select, badge, toast, spinner, loader)
- Create @ury/cart package (Zustand cart store with TypeScript)
- Create @ury/api-client package (Frappe SDK wrapper, menu-api, auth-api)

Refs: Phase 0 of multi-app architecture implementation
- Update README.md with new architecture overview and development setup
- Add comprehensive AGENTS.md for developers and AI agents
- Update TODO.md with Phase 0 completion status

Refs: Phase 0 documentation
- Add README.md for @ury/config package
- Add README.md for @ury/ui package
- Add README.md for @ury/cart package
- Add README.md for @ury/api-client package
- Add README.md for apps/pos

Refs: Phase 0 documentation completion
Add comprehensive summary of Phase 0 completion including:
- Backend changes (ury_customer module, DocType extensions)
- Frontend infrastructure (4 new shared packages)
- Documentation updates

Refs: Phase 0 complete
Add patch to create custom fields on POS Invoice for customer ordering:
- fulfillment_status (Select): Placed/Confirmed/Preparing/Ready/Served/Picked Up
- order_source (Select): POS/QR/Online/Kiosk/WhatsApp
- customer_order_token (Data): Unique token for guest order tracking
- scheduled_pickup_time (Datetime): For scheduled orders
- payment_gateway (Data): Which gateway processed payment
- payment_gateway_ref (Data): External payment reference

Refs: Phase 1 - Shared Ordering Core
…gnment

Add create_customer_order() API to ury_customer module:
- Accept guest orders from QR, Online, Kiosk apps
- Auto-assign cashier from active POS Opening Entry
- Generate unique order token for tracking
- Create POS Invoice with customer ordering fields
- Trigger KOT generation automatically
- Add update_fulfillment_status() for status transitions
- Real-time status updates via Frappe publish_realtime

Helper functions:
- get_active_cashier(): Find cashier from POS Opening
- get_pos_profile_for_cashier(): Get POS Profile for cashier
- get_or_create_customer(): Create guest customers

Refs: Phase 1 - Shared Ordering Core
Add @ury/order package:
- Order types (CreateOrderRequest, CreateOrderResponse, OrderStatus)
- Order API functions (createCustomerOrder, getOrderStatus, updateFulfillmentStatus)
- React hooks (useCreateOrder, useOrderStatus, useRealtimeOrderStatus)

Add @ury/menu package:
- Menu types (MenuItem, RestaurantInfo, TableContext)
- Menu API functions (getPublicMenu, getRestaurantInfo, validateTableToken)
- React hooks (usePublicMenu, useRestaurantInfo, useTableToken)

Refs: Phase 1 - Shared Ordering Core complete
Add apps/table-order React application:
- TokenResolver page for QR validation
- Menu page with category filtering and cart integration
- Cart page with customer details and checkout
- Professional mobile-first UI with Tailwind CSS
- Integration with @ury/menu, @ury/cart, @ury/order packages

Add generate_table_qr() API for staff to generate QR codes.

Refs: Phase 2 - QR Table Ordering MVP
Add testing documentation covering:
- Prerequisites and setup
- Backend API testing (cURL examples)
- Frontend testing workflows
- End-to-end scenarios
- Troubleshooting guide
- Performance testing
- Regression checklist

Refs: Phase 6 - Documentation
Phase 2 - QR Table Ordering:
- OrderStatus page with realtime updates and progress stepper
- Call waiter functionality

Phase 2.5 - Payment Gateway:
- URY Payment Gateway doctype with Stripe/Razorpay support
- Payment API with initiate_payment, verify_payment, handle_webhook
- Provider abstractions for extensibility

Phase 3 - Customer Ordering:
- apps/customer-order React app structure
- RestaurantLanding, Menu, Cart, Checkout, OrderTracking pages

Phase 5 - Kiosk Mode:
- apps/kiosk React app structure
- AttractScreen, Menu, ItemDetail, Cart, Checkout, Confirmation pages

All with professional UI, mobile-first design, TypeScript.

Refs: Phases 2, 2.5, 3, 5 complete
Customer Order App:
- Checkout page with pickup time selection
- OrderHistory page for past orders
- OrderTracking page for status tracking

Kiosk App:
- ItemDetailScreen with large touch targets
- MenuScreen with category ribbon

Refs: All frontend apps complete
- Add comprehensive implementation summary
- Add customer-order README
- Add kiosk CheckoutScreen and ConfirmationScreen

Refs: Final documentation
- DeviceSetup for initial kiosk configuration
- Utility functions for kiosk operations

Refs: Kiosk app final components
Update TODO tracker to show all phases (0-6) as complete.
Add implementation statistics and deployment checklist.

Refs: Project completion
Add AI agent skills documentation covering:
- Backend: frappe-patterns, doctypes, custom-fields, kot-generation,
  customer-api, staff-pos-api, payment-gateway, realtime
- Frontend: monorepo, api-client, cart-state, menu-hooks, order-hooks,
  ui-components
- Features: table-order-app, customer-order-app, kiosk-app
- Quality: testing

Each skill includes key files, patterns, extension points, dependencies,
and common gotchas for faster agent onboarding.
- Add comprehensive Skills Directory section to AGENTS.md with table
  of all 18 skills organized by category
- Document skill file format and usage instructions
- Add Skills section to README.md referencing the catalog
- Update skills count references to 18 total skills
Add comprehensive documentation for:
- QR Table Ordering (token-based, mobile-optimized, guest checkout)
- Online Customer Ordering (pickup/delivery, scheduled orders)
- Kiosk Self-Service (90s timeout, attract screen, large touch targets)
- Payment Gateway (Stripe, Razorpay, webhook handling)

Restructure with clear section hierarchy and feature summaries.
Delete superseded documentation file. All content now covered in:
- AGENTS.md (developer guide)
- FEATURES.md (feature documentation)
- skills/ (modular skill guides)
…rage

Added comprehensive skills coverage
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant