Skip to content

Smackz Admin

Smackz-Admin is the web dashboard for restaurant owners and platform administrators. It provides UI for managing restaurants, menus, orders, pages, themes, users, and analytics.

Tech Stack

Component Technology
Framework React 19
Build Tool Vite 7.0
Styling TailwindCSS v4
State Redux Toolkit + RTK Query
Forms React Hook Form + Yup
Routing React Router v7
UI Headless UI, Radix UI, Lucide icons
Auth Firebase (dynamic config from Yum API)

Getting Started

git clone <repo-url> && cd Smackz-Admin
npm install
# Create .env with VITE_BASE_API_URL
npm run dev

The app runs at http://localhost:5173.

Environment Variables

VITE_BASE_API_URL=https://api.qa.smackz.co
VITE_GOOGLE_MAPS_API_KEY=<your-key>

Firebase config is fetched dynamically from the Yum API at login -- no VITE_FIREBASE_* env vars needed.

Service-specific URLs are derived automatically in src/config/apiUrls.ts:

  • Yum API: ${VITE_BASE_API_URL}/apis/api/v1
  • Adapter API: ${VITE_BASE_API_URL}/adapters
  • Analytics API: ${VITE_BASE_API_URL}/analytics/api

Key Features

  • Restaurant Management -- Create, edit, approve restaurants; manage settings and working hours
  • Menu Editor -- Full CRUD for menus, sections, items, and serving sizes
  • Order Management -- View and manage orders with status updates
  • Page Builder -- Configure dynamic pages with drag-and-drop sections
  • Theme Editor -- Customize restaurant branding and typography
  • Image Upload -- Unified Cloudflare R2 upload with drag-and-drop, URL input, and previews
  • User Management -- Manage restaurant owners, managers, and customers
  • Analytics -- Embedded charts from the Lakehouse Query API

Session Management

The app implements proactive session management:

  • Active users: Token auto-refreshes at 45 minutes seamlessly
  • Idle users: Warning modal appears at 45 minutes with a 15-minute countdown
  • Auto-logout: At 60 minutes of inactivity

Styling Rules

Always use theme palette colors. Never hardcode colors like blue-500 or red-300. Use primary-*, secondary-*, success-*, danger-*, warning-*, info-*, gray-* from the theme.

Build Process

npm run build
# Runs: type-check -> lint:strict -> vite build

The build fails on any TypeScript error, unused variable, ESLint warning, or any type usage. Output goes to build/.

Error Handling

All API errors are processed through src/utils/apiErrorHandler.ts and the extractErrorMessage() utility. Page-level errors use the ErrorMessage component; forms use toast notifications.

Key Files

  • Smackz-Admin/CLAUDE.md -- Project-specific guidelines
  • src/config/apiUrls.ts -- API URL configuration
  • src/components/ui/ImageUploader.tsx -- Unified image upload component
  • src/store/ -- Redux store and RTK Query slices
  • src/utils/apiErrorHandler.ts -- Centralized error handling