TEKUMMA Call Center Admin Panel

A comprehensive web-based dispatch system for call center agents to manage rides, drivers, and coupon transactions in real-time.

Quick Start

1. Login: Visit the app and click "Login" with any credentials (demo mode)
2. Create a Ride: On the Dashboard, click "NEW RIDE" button and fill in customer details
3. Assign Driver: Click "Assign Driver" on pending rides to select from available drivers
4. Track Active Rides: Click "View Details" on active rides to see the timeline and full information
5. Manage Drivers: Navigate to "Drivers" page to add new drivers or view their status
6. Refill Coupons: Go to "Coupons" page, select a driver, and click "Refill Coupons"

Features

🎯 Core Functionality

• Login System: Secure authentication for call center agents
• Dashboard/Dispatch: Real-time view of pending and active rides with interactive map
• Ride Management: Create new rides, assign drivers, and track ride history
• Driver Management: Add, edit, and monitor driver fleet status and locations
• Coupon Management: Track and refill driver coupon balances with transaction history
• Settings: Configure notifications, system preferences, and security settings

🎨 Design Features

• Primary color: #00BDC3 (TEKUMMA teal)
• Clean, modern interface optimized for fast-paced dispatch operations
• Status-based color coding:
  • 🟢 Green: Available drivers, completed rides
  • 🔴 Red: Busy drivers, cancelled rides
  • ⚫ Gray: Offline drivers
  • 🟡 Yellow: Pending rides, warnings
• Responsive design (desktop-first, 1920x1080 optimized, minimum 1366x768)

Technology Stack

• React with TypeScript
• React Router for navigation
• Tailwind CSS for styling
• Google Maps API for driver tracking
• Shadcn UI components
• Lucide React icons
• date-fns for date formatting
• Sonner for toast notifications

Getting Started

Prerequisites

• Node.js (v18 or higher)
• pnpm (recommended) or npm
• Google Maps API Key (for map functionality)

Installation

1. Clone the repository
2. Install dependencies:

   pnpm install

Google Maps API Setup

To enable the real-time driver tracking map:

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Enable the following APIs:
   • Maps JavaScript API
   • Geocoding API (optional, for address autocomplete)
4. Create credentials (API Key)
5. Add your API key to /src/app/pages/Dashboard.tsx:

   const GOOGLE_MAPS_API_KEY = 'YOUR_API_KEY_HERE';

6. Uncomment the Google Maps component code in Dashboard.tsx (lines marked with comments)

Note: For security in production, store the API key in environment variables.

Running the Application

pnpm run dev

The application will be available at http://localhost:5173

Usage Guide

Login

• Default page shows the login screen
• Enter credentials (any email/password for demo)
• Click "Login" to access the dashboard

Dashboard (Dispatch Center)

• Left Panel: View pending and active rides
• Right Panel: Interactive map showing driver locations (when API key is configured)
• Click "NEW RIDE" to create a ride request
• Click "Assign Driver" on pending rides to select an available driver

Rides

• View complete ride history
• Filter by status (Pending, In Progress, Completed, etc.)
• Search by ride ID, customer name, or location
• Paginated table view with all ride details

Drivers

• View all drivers with their current status
• Add new drivers with vehicle information
• Monitor coupon balances (color-coded: red < 15, yellow < 30, green >= 30)
• Quick stats: Total drivers, Available, Busy

Coupons

• Select a driver from dropdown
• View current coupon balance with visual indicators
• Click "Refill Coupons" to add coupons
• Transaction history showing purchases and deductions
• Linked to ride IDs for deductions

Settings

• Update profile information
• Configure notification preferences
• Set system behaviors (auto-assign, sound alerts)
• Change password
• Add Google Maps API key

Mock Data

The application includes mock data for demonstration:

• 8 drivers with various statuses and locations in Addis Ababa
• 5 sample rides (pending, active, and completed)
• Sample coupon transactions

Color System

Primary: #00BDC3 (buttons, active states)
Primary Hover: #009EA3
Success: #10B981 (available, completed)
Warning: #F59E0B (pending, low balance)
Error: #EF4444 (offline, cancel)
Neutral Text: #111827 (headings)
Muted Text: #6B7280 (secondary info)
Background: #F9FAFB (page background)
White: #FFFFFF (cards, sidebar)
Border: #E5E7EB

Component Structure

src/app/
├── components/
│   ├── DashboardLayout.tsx    # Main layout with sidebar and topbar
│   └── ui/                    # Reusable UI components
├── pages/
│   ├── Login.tsx             # Authentication page
│   ├── Dashboard.tsx         # Dispatch center with map
│   ├── Rides.tsx            # Ride history table
│   ├── Drivers.tsx          # Driver management
│   ├── Coupons.tsx          # Coupon management
│   └── Settings.tsx         # Application settings
├── data/
│   └── mockData.ts          # Sample data for testing
├── types.ts                 # TypeScript interfaces
├── routes.tsx              # React Router configuration
└── App.tsx                 # Root component

Key Features Explained

Real-time Driver Tracking

• Map shows driver locations with color-coded markers
• Click markers to view driver details
• Assign rides directly from map info windows

Intelligent Ride Assignment

• Filter available drivers automatically
• Show driver details: vehicle, phone, coupon balance
• One-click assignment with instant status updates

Coupon System

• Track coupon balances per driver
• Warning badges for low balances
• Complete transaction history
• Quick refill with preview of new balance

Browser Support

• Chrome (recommended)
• Firefox
• Safari
• Edge

Future Enhancements

• Real-time WebSocket updates for live ride tracking
• Advanced analytics and reporting
• SMS/Email notifications
• Driver mobile app integration
• Route optimization
• Multi-language support
• Dark mode

Notes

• This is a front-end demo application with mock data
• For production use, connect to a real backend API
• Google Maps API requires billing enabled (but includes free tier)
• Map is optional; the system works without it (shows placeholder)

Support

For issues or questions, refer to the inline code comments or component documentation.