157 lines
5.0 KiB
Markdown
157 lines
5.0 KiB
Markdown
# 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.
|