Reseller Portal

A comprehensive portal that combines both Channel Partner and Reseller dashboards in a single application.

🚀 Features

Channel Partner Dashboard

• Dashboard Overview: Analytics, stats, and performance metrics
• Reseller Management: Manage reseller partners and relationships
• Partnerships: Handle partnership requests and approvals
• Deals Management: Create and track business deals
• Commissions: Track commission earnings and payouts
• Product Management: Manage products and pricing strategies
• Training: Schedule and manage training programs
• Support: Handle support tickets and requests
• Analytics: Advanced analytics and insights
• Reports: Generate detailed reports
• Settings: Account configuration and preferences

Reseller Dashboard

• Dashboard Overview: Performance metrics and revenue tracking
• Customer Management: Manage customer relationships
• Cloud Instances: Manage cloud infrastructure
• Billing & Payments: Handle billing and payment processing
• Support Center: Submit and track support tickets
• Reports & Analytics: View performance reports
• Wallet Management: Manage funds and transactions
• Training Center: Access training materials
• Marketplace: Browse and purchase services
• Certifications: Manage professional certifications
• Knowledge Base: Access documentation and guides

🎨 Design Features

• Modern UI/UX: Clean, professional design with glass morphism effects
• Dark/Light Theme: Toggle between themes with persistent preferences
• Responsive Design: Optimized for desktop, tablet, and mobile
• Gradient Backgrounds: Beautiful gradient themes for each dashboard
• Interactive Elements: Hover effects, animations, and smooth transitions

🔐 Authentication

Channel Partner

• Login: /login
• Signup: /signup
• Theme: Blue/Indigo gradient

Reseller

• Login: /reseller/login
• Signup: /reseller/signup (with user type selection)
• Theme: Emerald/Teal gradient

🛠️ Technology Stack

• React 19: Latest React with hooks and functional components
• TypeScript: Type-safe development
• Redux Toolkit: State management
• React Router: Client-side routing
• Tailwind CSS: Utility-first styling
• Lucide React: Beautiful SVG icons
• Recharts: Data visualization
• React Cookie: Cookie management

📁 Project Structure

src/
├── components/
│   ├── charts/           # Chart components
│   ├── Layout/           # Layout components
│   └── ...
├── pages/
│   ├── reseller/         # Reseller dashboard pages
│   │   ├── Dashboard.tsx
│   │   ├── Customers.tsx
│   │   ├── Instances.tsx
│   │   ├── Billing.tsx
│   │   ├── Support.tsx
│   │   ├── Reports.tsx
│   │   ├── Login.tsx
│   │   └── Signup.tsx
│   ├── Dashboard.tsx     # Channel Partner dashboard
│   ├── Login.tsx         # Channel Partner login
│   ├── Signup.tsx        # Channel Partner signup
│   └── ...
├── store/
│   ├── slices/           # Redux slices
│   └── ...
├── data/
│   └── mockData.ts       # Mock data for both dashboards
└── utils/
    └── ...

🚀 Getting Started

1. Install Dependencies

   npm install
   

2. Start Development Server

   npm start
   

3. Access the Application

   • Channel Partner Dashboard: http://localhost:3000/login
   • Reseller Dashboard: http://localhost:3000/reseller/login

🎯 Key Routes

Channel Partner Routes

• / - Main dashboard
• /login - Login page
• /signup - Signup page
• /resellers - Reseller management
• /partnerships - Partnership management
• /deals - Deals management
• /commissions - Commission tracking
• /product-management - Product management

Reseller Routes

• /reseller - Main dashboard
• /reseller/login - Login page
• /reseller/signup - Signup page
• /reseller/customers - Customer management
• /reseller/instances - Cloud instances
• /reseller/billing - Billing & payments
• /reseller/support - Support center
• /reseller/reports - Reports & analytics

🎨 Theme System

The application supports both light and dark themes with:

• Persistent theme preferences
• System preference detection
• Smooth theme transitions
• Theme-specific color schemes

📱 Responsive Design

• Desktop: Full-featured layout with sidebar navigation
• Tablet: Optimized layout with collapsible sidebar
• Mobile: Mobile-first design with bottom navigation

🔧 Customization

• Colors: Easily customizable color schemes in Tailwind config
• Components: Modular component architecture for easy customization
• Data: Mock data can be replaced with real API endpoints
• Routing: Flexible routing system for adding new features

📄 License

This project is part of the CloudTopiaa Reseller Portal system.