🚕 Teevr - Ride-Hailing Admin Dashboard Template

A Modern, Production-Ready Admin Dashboard Template for Ride-Hailing Applications

Features • Screenshots • Getting Started • Tech Stack • Customization

---

📖 Overview

Teevr is a fully functional, beautifully designed admin dashboard template specifically built for ride-hailing and transportation management platforms. This template provides a solid foundation that can be used as-is or customized for further progression into a complete ride-hailing application like Uber, Ola, or InDrive.

🎯 Use This Template For:

• 🚀 Quick Start: Launch your ride-hailing admin panel in minutes
• 🎨 Customization: Easily modify colors, layouts, and features to match your brand
• 📈 Scalability: Built with enterprise-grade architecture for growth
• 🔧 Further Development: Perfect base for adding backend integration, real APIs, and advanced features
• 💼 Production Ready: Optimized performance with SSR, code splitting, and best practices

---

✨ Features

📊 Dashboard & Analytics

• Real-time statistics (Total Rides, Active Drivers, Users, Revenue)
• Interactive revenue charts with time range filters (Daily/Weekly/Monthly/Yearly)
• Rides overview with completed vs cancelled analytics
• Responsive grid layout with dynamic data visualization

🎛️ Management Modules

• Ride Management: Track and manage all ride requests
• User Management: Monitor and manage user accounts
• Driver Management: Handle driver profiles and verification
• Pricing Control: Dynamic pricing rules with peak hour settings
• Payment Logs: Transaction history and payment tracking
• Support & Complaints: Customer service management

🗺️ Live Tracking

• Real-time ride tracking with Google Maps integration
• Active ride details (driver info, pickup/dropoff, ETA, distance)
• Multi-ride monitoring with status badges

🎨 UI/UX Excellence

• Modern, clean interface with orange (#FF6B00) brand accent
• Fully responsive design (desktop, tablet, mobile)
• Collapsible sidebar navigation
• Dark/light theme support
• Smooth animations and transitions
• Optimized for performance with React memoization

---

📸 Screenshots

Dashboard View

Comprehensive dashboard with revenue charts, ride statistics, and key metrics

Pricing Control

Manage pricing rules, base fares, and peak hour multipliers

Live Tracking

Monitor active rides in real-time with integrated maps

---

🚀 Getting Started

Prerequisites

• Node.js 20.x or higher
• npm or yarn or pnpm
• Docker (optional, for backend services)

Quick Start

1️⃣ Clone the Repository

git clone https://github.com/yourusername/teevr.git
cd teevr

2️⃣ Install Dependencies

cd "Admin Panel/cab-admin"
npm install

3️⃣ Run Development Server

npm run dev

Open http://localhost:3000 in your browser 🎉

4️⃣ Optional: Start Backend Services

cd ../
./launch.ps1  # Windows PowerShell

This starts:

• MongoDB (port 27017)
• Redis (port 6379)
• API Gateway (port 3000)

---

🛠️ Tech Stack

Category	Technology
Framework	Next.js 15.2 (App Router, Turbopack)
UI Library	React 19
Language	TypeScript 5.0
Styling	Material-UI 6.4, Tailwind CSS 4.0, Emotion
Charts	Recharts 2.15
Maps	Google Maps React API
State Management	React Hooks (Custom hooks included)
Backend (Demo)	MongoDB, Redis, Nginx
Dev Tools	ESLint, Turbopack, PostCSS

---

📁 Project Structure

Teevr/
├── Admin Panel/
│   ├── cab-admin/                 # Next.js Admin Dashboard
│   │   ├── src/
│   │   │   ├── app/              # Next.js App Router pages
│   │   │   │   ├── page.tsx      # Dashboard
│   │   │   │   ├── pricing/      # Pricing control
│   │   │   │   ├── tracking/     # Live tracking
│   │   │   │   └── ...
│   │   │   ├── components/       # React components
│   │   │   │   └── layout/       # Layout components
│   │   │   ├── hooks/            # Custom React hooks
│   │   │   ├── utils/            # Utility functions & API
│   │   │   ├── types/            # TypeScript types
│   │   │   └── theme/            # MUI theme config
│   │   └── package.json
│   ├── docker-compose.yml        # Backend services
│   ├── launch.ps1                # Quick start script
│   └── development_plan.txt      # Full roadmap
├── screenshots/                  # UI Screenshots
└── README.md

---

🎨 Customization

Change Brand Colors

Edit src/theme/index.ts:

const theme = createTheme({
  palette: {
    primary: { main: '#FF6B00' },  // Change to your color
    secondary: { main: '#2E3192' },
  },
})

Modify API Endpoints

Update src/utils/api.ts to connect to your backend:

const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'

Add New Pages

1. Create file: src/app/your-page/page.tsx
2. Add route to sidebar: src/components/layout/Sidebar.tsx
3. Define types: src/types/index.ts

---

🔮 Further Progression

This template is designed for easy expansion:

Phase 1: Backend Integration

• Connect to real APIs (replace mock data in utils/api.ts)
• Implement authentication (JWT, OAuth)
• Add database models and migrations

Phase 2: Advanced Features

• Real-time notifications with WebSockets
• Advanced analytics and reporting
• Multi-language support (i18n)
• Role-based access control (RBAC)

Phase 3: Mobile Apps

• Build React Native or Flutter mobile apps
• Share API endpoints with admin panel
• Implement driver and rider apps

Phase 4: Scale & Deploy

• Microservices architecture
• Cloud deployment (AWS, Azure, GCP)
• CI/CD pipelines
• Monitoring and logging

Refer to Admin Panel/development_plan.txt for the comprehensive roadmap.

---

📜 Available Scripts

Command	Description
npm run dev	Start development server with Turbopack
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint

---

🤝 Contributing

This is a template project. Feel free to fork, modify, and use it for your own projects!

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add some AmazingFeature')
4. Push to branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📝 License

This project is open source and available under the MIT License.

---

💡 Support

For questions, issues, or feature requests:

• Made by Hercules
• 📧 Email: jairoy2426@gmail.com
• 🐛 Issues: GitHub Issues

---

Built with ❤️ for the ride-hailing community

⭐ Star this repo if you find it useful!