Skip to content

codepm03/ManualAI_Frontend

Repository files navigation

ManualAI Restaurant Management Platform

Project Overview

ManualAI is a comprehensive AI-powered restaurant management platform designed to streamline operations for restaurant owners and managers. The platform provides end-to-end solutions for inventory management, order processing, staff hiring, marketing campaigns, and financial tracking—all enhanced with artificial intelligence to provide predictive insights and automation.

Core Features

  • Intelligent Inventory Management: Real-time stock tracking with AI-powered forecasting and automated reordering
  • Order Management System: Multi-channel order processing with WhatsApp integration
  • Smart Hiring Platform: AI-assisted recruitment with automated candidate screening
  • Marketing Automation: Campaign management with AI-generated content and audience targeting
  • Financial Dashboard: Comprehensive transaction tracking and financial analytics
  • Real-time Notifications: Multi-channel alerts for critical business events
  • AI Insights Engine: Predictive analytics for sales, inventory, and operational optimization

Technology Stack

Frontend

  • React 19 - Modern UI library with latest features
  • TypeScript - Type-safe development
  • Vite - Next-generation frontend tooling
  • Tailwind CSS 4 - Utility-first styling framework
  • Radix UI - Accessible component primitives
  • Lucide React - Icon library
  • Recharts - Data visualization
  • Framer Motion - Animation library

Backend & Database

  • Convex - Real-time backend-as-a-service with reactive queries
  • Clerk - Authentication and user management

Development Tools

  • ESLint - Code linting
  • Prettier - Code formatting
  • TypeScript ESLint - TypeScript-specific linting rules

Getting Started

Prerequisites

  • Node.js 18+
  • npm or yarn package manager
  • Convex account
  • Clerk account

Installation

# Install dependencies
npm install

# Set up environment variables
cp .env.local.example .env.local
# Add your Convex and Clerk credentials

# Start development server
npm run dev

# Start Convex backend (in separate terminal)
npm run convex:dev

Environment Variables

VITE_CONVEX_URL=your_convex_deployment_url
CONVEX_DEPLOYMENT=your_convex_deployment_id
VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_ISSUER_URL=your_clerk_issuer_url

Convex API Documentation

Database Schema

The platform uses Convex as its real-time database with the following core tables:

Users

Stores user account information and integration settings.

Fields:

  • name (string) - User's full name
  • email (string) - User's email address
  • externalId (string) - Clerk authentication ID
  • imageUrl (string, optional) - Profile picture URL
  • integrations (object, optional) - Third-party service connections
    • zomato - Zomato integration status
    • meta - Meta/Facebook integration status
  • status (enum) - Account status: active, suspended, blocked
  • createdAt (number) - Unix timestamp
  • updatedAt (number) - Unix timestamp

Indexes:

  • byExternalId - Query users by Clerk ID
  • byStatus - Filter users by account status

Restaurants

Restaurant profile and configuration data.

Fields:

  • name (string) - Restaurant name
  • ownerId (id) - Reference to users table
  • address (string) - Physical address
  • gstNumber (string, optional) - GST registration number
  • logoUrl (string, optional) - Restaurant logo URL
  • phone (string) - Contact number
  • whatsappNumber (string, optional) - WhatsApp business number
  • whatsappVerified (boolean) - WhatsApp verification status
  • plan (enum) - Subscription tier: starter, professional, enterprise
  • isActive (boolean) - Restaurant operational status
  • settings (object) - Notification preferences
    • lowStockAlert (boolean)
    • newOrderPing (boolean)
    • campaignSummaryEmail (boolean)

Indexes:

  • by_owner - Query restaurants by owner

Inventory

Stock management and tracking.

Fields:

  • restaurantId (id) - Reference to restaurants table
  • name (string) - Item name
  • supplierId (id) - Reference to suppliers table
  • currentStock (number) - Current quantity
  • minimumStock (number) - Reorder threshold
  • unit (string) - Measurement unit (kg, liters, pieces, etc.)
  • status (enum) - Stock level: in-stock, low-stock, out-of-stock
  • autoReorder (boolean) - Enable automatic reordering
  • preferredQuantity (number) - Default order quantity
  • lastRestocked (number, optional) - Last restock timestamp
  • aiForecasting (object, optional) - AI predictions
    • predictedRunoutDate (number) - Estimated depletion date
    • recommendedOrderQuantity (number) - Suggested order amount
    • confidence (number) - Prediction confidence score (0-1)

Indexes:

  • by_restaurant - Query inventory by restaurant
  • by_status - Filter by stock status

Orders

Customer order management.

Fields:

  • restaurantId (id) - Reference to restaurants table
  • orderNumber (string) - Unique order identifier
  • whatsappId (string, optional) - WhatsApp message ID
  • customerName (string) - Customer name
  • customerPhone (string) - Contact number
  • items (array) - Order items
    • name (string) - Item name
    • quantity (number) - Quantity ordered
    • price (number) - Item price
    • modifiers (array, optional) - Customizations
  • totalAmount (number) - Total order value
  • status (enum) - Order state: new, preparing, ready, completed, cancelled
  • paymentStatus (enum) - Payment state: paid, cod, pending
  • orderType (enum) - Service type: dine-in, takeaway, delivery
  • createdAt (number) - Order creation timestamp
  • updatedAt (number) - Last update timestamp
  • completedAt (number, optional) - Completion timestamp
  • estimatedTime (number, optional) - Preparation time in minutes

Indexes:

  • by_restaurant - Query orders by restaurant
  • by_status - Filter by order status
  • by_date - Sort by creation date

Staff

Employee management and records.

Fields:

  • restaurantId (id) - Reference to restaurants table
  • userId (id, optional) - Reference to users table (if registered)
  • name (string) - Employee name
  • email (string) - Email address
  • phone (string) - Contact number
  • role (enum) - Position: owner, manager, chef, staff
  • status (enum) - Employment status: active, pending, inactive, on-leave
  • hireDate (number) - Employment start date
  • salary (number, optional) - Compensation amount
  • rating (number, optional) - Performance rating

Indexes:

  • by_restaurant - Query staff by restaurant
  • by_status - Filter by employment status

Job Postings

Recruitment listings and management.

Fields:

  • restaurantId (id) - Reference to restaurants table
  • title (string) - Job title
  • department (string) - Department/category
  • type (enum) - Employment type: full-time, part-time, contract
  • description (string) - Job description
  • requirements (array) - Required qualifications
  • salary (string, optional) - Compensation range
  • status (enum) - Posting status: active, paused, closed
  • urgency (enum) - Priority level: high, medium, low
  • postedDate (number) - Publication timestamp
  • closedDate (number, optional) - Closure timestamp
  • aiOptimized (object, optional) - AI-enhanced content
    • optimizedTitle (string) - AI-improved title
    • optimizedDescription (string) - AI-enhanced description
    • targetAudience (array) - Recommended audience segments

Indexes:

  • by_restaurant - Query postings by restaurant
  • by_status - Filter by posting status

Job Applications

Candidate applications and screening.

Fields:

  • jobPostingId (id) - Reference to jobPostings table
  • restaurantId (id) - Reference to restaurants table
  • applicantName (string) - Candidate name
  • email (string) - Contact email
  • phone (string) - Contact number
  • location (string, optional) - Candidate location
  • experience (number) - Years of experience
  • skills (array) - Skill set
  • resume (string, optional) - Resume URL
  • coverLetter (string, optional) - Cover letter text
  • status (enum) - Application state: new, under-review, interview-scheduled, shortlisted, rejected, hired
  • appliedDate (number) - Application timestamp
  • aiScreening (object, optional) - AI evaluation
    • score (number) - Candidate score (0-100)
    • strengths (array) - Identified strengths
    • concerns (array) - Potential concerns
    • recommendation (string) - AI recommendation

Indexes:

  • by_job - Query applications by job posting
  • by_restaurant - Query applications by restaurant
  • by_status - Filter by application status

Marketing Campaigns

Campaign management and analytics.

Fields:

  • restaurantId (id) - Reference to restaurants table
  • name (string) - Campaign name
  • goal (enum) - Campaign objective: repeat-orders, clear-stock, festive-offer, new-customers
  • audience (array) - Target audience segments
  • message (string) - Campaign message
  • channel (enum) - Communication channel: whatsapp, sms, email
  • scheduledDate (number) - Scheduled send time
  • status (enum) - Campaign state: draft, scheduled, sent, completed, cancelled
  • stats (object, optional) - Campaign metrics
    • sent (number) - Messages sent
    • delivered (number) - Successful deliveries
    • read (number) - Messages read
    • clicked (number) - Link clicks
    • converted (number) - Conversions
    • revenue (number) - Generated revenue
  • aiGenerated (object, optional) - AI-generated content
    • contentVariants (array) - Message variations
    • bestPerformingVariant (string, optional) - Top performer
    • audienceInsights (string, optional) - Audience analysis
  • createdAt (number) - Creation timestamp

Indexes:

  • by_restaurant - Query campaigns by restaurant
  • by_status - Filter by campaign status

Transactions

Financial records and accounting.

Fields:

  • restaurantId (id) - Reference to restaurants table
  • type (enum) - Transaction type: income, expense
  • category (string) - Transaction category
  • description (string) - Transaction details
  • amount (number) - Transaction amount
  • date (number) - Transaction date
  • paymentMethod (string, optional) - Payment method used
  • referenceId (string, optional) - External reference
  • orderId (id, optional) - Reference to orders table
  • purchaseOrderId (id, optional) - Reference to purchaseOrders table

Indexes:

  • by_restaurant - Query transactions by restaurant
  • by_type - Filter by transaction type
  • by_date - Sort by transaction date

AI Insights

Predictive analytics and recommendations.

Fields:

  • restaurantId (id) - Reference to restaurants table
  • type (enum) - Insight category: inventory-forecast, sales-prediction, hiring-recommendation, marketing-suggestion
  • insight (string) - Insight description
  • confidence (number) - Confidence score (0-1)
  • actionable (boolean) - Whether insight requires action
  • data (any) - Supporting data
  • createdAt (number) - Generation timestamp
  • expiresAt (number, optional) - Expiration timestamp

Indexes:

  • by_restaurant - Query insights by restaurant
  • by_type - Filter by insight type

Convex Functions

Convex functions are located in the convex/ directory and provide server-side logic for data operations.

Available Modules

  • users.ts - User management operations
  • restaurants.ts - Restaurant CRUD operations
  • inventory.ts - Inventory tracking and forecasting
  • orders.ts - Order processing and management
  • hiring.ts - Job posting and application management
  • marketing.ts - Campaign creation and analytics
  • finances.ts - Transaction recording and reporting
  • dashboard.ts - Aggregated dashboard data

Query Pattern

// Example: Fetching restaurant data
import { useQuery } from "convex/react";
import { api } from "../convex/_generated/api";

const restaurant = useQuery(api.restaurants.get, { 
  restaurantId: "restaurant_id_here" 
});

Mutation Pattern

// Example: Creating an order
import { useMutation } from "convex/react";
import { api } from "../convex/_generated/api";

const createOrder = useMutation(api.orders.create);

await createOrder({
  restaurantId: "restaurant_id",
  customerName: "John Doe",
  items: [{ name: "Pizza", quantity: 2, price: 15.99 }],
  totalAmount: 31.98,
  orderType: "delivery"
});

Authentication Flow

The platform uses Clerk for authentication with the following flow:

  1. Sign Up → User creates account via Google, Apple, or email/password
  2. Redirect to Sign In → After signup, user is redirected to sign-in page
  3. Sign In → User authenticates and is redirected to dashboard
  4. Session Management → Clerk maintains secure session with JWT tokens
  5. User Sync → User data is synchronized with Convex database

Protected Routes

All routes except /sign-in and /sign-up require authentication. Unauthenticated users are automatically redirected to the sign-in page.


Development Scripts

# Start development server
npm run dev

# Start Convex backend
npm run convex:dev

# Build for production
npm run build

# Deploy Convex functions
npm run convex:deploy

# Run linter
npm run lint

# Format code
npm run format

# Check formatting
npm run format:check

Project Structure

ManualAI_Frontend/
├── convex/                 # Convex backend functions
│   ├── schema.ts          # Database schema definition
│   ├── users.ts           # User operations
│   ├── restaurants.ts     # Restaurant operations
│   ├── inventory.ts       # Inventory management
│   ├── orders.ts          # Order processing
│   ├── hiring.ts          # Recruitment functions
│   ├── marketing.ts       # Campaign management
│   ├── finances.ts        # Financial operations
│   └── dashboard.ts       # Dashboard aggregations
├── src/
│   ├── components/        # React components
│   │   ├── auth/         # Authentication components
│   │   ├── generated/    # Dashboard components
│   │   └── ui/           # Reusable UI components (Radix)
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility functions
│   ├── providers/        # Context providers
│   ├── settings/         # App configuration
│   ├── App.tsx           # Main application component
│   └── main.tsx          # Application entry point
├── package.json          # Dependencies and scripts
├── vite.config.ts        # Vite configuration
└── tsconfig.json         # TypeScript configuration

Contributing

This project follows standard React and TypeScript best practices. When contributing:

  1. Follow the existing code style
  2. Use TypeScript for type safety
  3. Write descriptive commit messages
  4. Test changes thoroughly before submitting
  5. Update documentation for new features

License

Proprietary - All rights reserved


Support

For technical support or questions, please contact the development team or refer to the internal documentation portal.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors