# 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**
   ```bash
   npm install
   ```

2. **Start Development Server**
   ```bash
   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.