284 lines
7.6 KiB
Markdown
284 lines
7.6 KiB
Markdown
# Cloudtopiaa Reseller Dashboard
|
|
|
|
A comprehensive dashboard for resellers to manage their customers, track commissions, and monitor business performance in the Cloudtopiaa ecosystem.
|
|
|
|
## 🏢 **Project Overview**
|
|
|
|
The Reseller Dashboard is designed for individual reseller companies to manage their customer relationships, track their performance, and monitor their commissions earned through the Cloudtopiaa partnership program.
|
|
|
|
## 🎯 **Key Features**
|
|
|
|
### **Dashboard Metrics & Analytics**
|
|
- **Real-time Performance Tracking**
|
|
- **Dual Currency Support** (INR & USD)
|
|
- **Customer Management**
|
|
- **Revenue Analytics**
|
|
|
|
### **Customer Management**
|
|
- **Customer Onboarding**
|
|
- **Instance Management**
|
|
- **Payment Tracking**
|
|
- **Support Ticket System**
|
|
|
|
### **Business Operations**
|
|
- **Revenue Tracking**
|
|
- **Commission Monitoring**
|
|
- **Invoice Management**
|
|
- **Performance Analytics**
|
|
|
|
### **User Experience**
|
|
- **Dark/Light Theme Support**
|
|
- **Responsive Design**
|
|
- **Smooth Animations & Transitions**
|
|
- **Cookie Consent Management**
|
|
|
|
## 📊 **Key Metrics Explained**
|
|
|
|
### **Total Revenue (₹28,47,500)**
|
|
**What it means:** The total revenue generated from all customer subscriptions and services.
|
|
|
|
**What it tells you:** Your overall business performance and growth trajectory.
|
|
|
|
### **Total Customers (156)**
|
|
**What it means:** The number of active customers you're currently serving.
|
|
|
|
**What it tells you:** Your customer base size and market reach.
|
|
|
|
### **Active Instances (89)**
|
|
**What it means:** The number of active cloud service instances currently running for your customers.
|
|
|
|
**What it tells you:** Your service utilization and customer engagement levels.
|
|
|
|
### **Pending Invoices (12)**
|
|
**What it means:** The number of invoices that are awaiting payment from customers.
|
|
|
|
**What it tells you:** Your accounts receivable status and cash flow situation.
|
|
|
|
## 🚀 **Business Intelligence Insights**
|
|
|
|
### **Revenue Growth (23.5%)**
|
|
- **Positive growth** indicates expanding business
|
|
- **Monthly comparison** shows performance trends
|
|
- **Helps identify** successful strategies
|
|
|
|
### **Customer Acquisition**
|
|
- **156 total customers** shows market penetration
|
|
- **89 active instances** indicates service utilization
|
|
- **12 pending invoices** requires attention for cash flow
|
|
|
|
### **Performance Indicators**
|
|
- **High customer count** with good revenue suggests strong market position
|
|
- **Active instances** show customer engagement
|
|
- **Pending invoices** need follow-up for timely payments
|
|
|
|
## 🛠 **Technical Stack**
|
|
|
|
### **Frontend**
|
|
- **React 18** with TypeScript
|
|
- **Redux Toolkit** for state management
|
|
- **React Router DOM** for routing
|
|
- **Tailwind CSS** for styling
|
|
- **Lucide React** for icons
|
|
- **Recharts** for data visualization
|
|
|
|
### **UI/UX Features**
|
|
- **Responsive Design** (Mobile-first approach)
|
|
- **Dark/Light Theme** with system preference detection
|
|
- **Smooth Animations** and transitions
|
|
- **Cookie Consent** management
|
|
- **Dual Currency** display (INR & USD)
|
|
|
|
### **Development Tools**
|
|
- **PostCSS** with Autoprefixer
|
|
- **TypeScript** for type safety
|
|
- **ESLint** for code quality
|
|
- **Create React App** setup
|
|
|
|
## 📁 **Project Structure**
|
|
|
|
```
|
|
reseller-dashboard/
|
|
├── public/
|
|
├── src/
|
|
│ ├── components/
|
|
│ │ ├── Layout/
|
|
│ │ │ ├── Layout.tsx
|
|
│ │ │ └── Sidebar.tsx
|
|
│ │ └── CookieConsent.tsx
|
|
│ ├── pages/
|
|
│ │ ├── Dashboard.tsx
|
|
│ │ └── PlaceholderPage.tsx
|
|
│ ├── store/
|
|
│ │ ├── slices/
|
|
│ │ │ ├── authSlice.ts
|
|
│ │ │ ├── dashboardSlice.ts
|
|
│ │ │ └── themeSlice.ts
|
|
│ │ ├── hooks.ts
|
|
│ │ └── index.ts
|
|
│ ├── utils/
|
|
│ │ ├── cn.ts
|
|
│ │ └── format.ts
|
|
│ ├── data/
|
|
│ │ └── mockData.ts
|
|
│ ├── App.tsx
|
|
│ └── index.tsx
|
|
├── package.json
|
|
├── tailwind.config.js
|
|
└── README.md
|
|
```
|
|
|
|
## 🚀 **Getting Started**
|
|
|
|
### **Prerequisites**
|
|
- Node.js (v16 or higher)
|
|
- npm or yarn
|
|
|
|
### **Installation**
|
|
|
|
1. **Clone the repository**
|
|
```bash
|
|
git clone <repository-url>
|
|
cd reseller-dashboard
|
|
```
|
|
|
|
2. **Install dependencies**
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. **Start the development server**
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
4. **Open your browser**
|
|
Navigate to `http://localhost:3000`
|
|
|
|
### **Available Scripts**
|
|
|
|
- `npm start` - Start development server
|
|
- `npm build` - Build for production
|
|
- `npm test` - Run tests
|
|
- `npm eject` - Eject from Create React App
|
|
|
|
## 🎨 **Theme Configuration**
|
|
|
|
The dashboard supports both light and dark themes with automatic system preference detection.
|
|
|
|
### **Theme Features**
|
|
- **Automatic Detection** of system theme preference
|
|
- **Manual Toggle** via sidebar button
|
|
- **Persistent Storage** of user preference
|
|
- **Smooth Transitions** between themes
|
|
|
|
### **Color Scheme**
|
|
- **Primary:** Blue gradient (#0EA5E9 to #0284C7)
|
|
- **Success:** Green (#10B981)
|
|
- **Warning:** Yellow (#F59E0B)
|
|
- **Danger:** Red (#EF4444)
|
|
- **Secondary:** Gray scale
|
|
|
|
## 🔐 **Authentication & Security**
|
|
|
|
### **Features**
|
|
- **JWT Token** management
|
|
- **Refresh Token** support
|
|
- **Session Management**
|
|
- **Secure Logout**
|
|
|
|
### **User Roles**
|
|
- **Reseller Admin** (Current implementation)
|
|
- **Reseller Staff** (Future implementation)
|
|
- **Customer Support** (Future implementation)
|
|
|
|
## 🌐 **Internationalization**
|
|
|
|
### **Currency Support**
|
|
- **INR (₹)** - Indian Rupees
|
|
- **USD ($)** - US Dollars
|
|
- **Automatic Conversion** (1 USD ≈ 83 INR)
|
|
- **Dual Display** with primary currency prominent
|
|
|
|
### **Formatting**
|
|
- **Number formatting** with locale support
|
|
- **Date formatting** with relative time
|
|
- **Currency formatting** with proper symbols
|
|
|
|
## 📱 **Responsive Design**
|
|
|
|
### **Breakpoints**
|
|
- **Mobile:** < 640px
|
|
- **Tablet:** 640px - 1024px
|
|
- **Desktop:** > 1024px
|
|
|
|
### **Features**
|
|
- **Mobile-first** approach
|
|
- **Touch-friendly** interface
|
|
- **Collapsible sidebar** for mobile
|
|
- **Optimized layouts** for all screen sizes
|
|
|
|
## 🔧 **Development Guidelines**
|
|
|
|
### **Code Style**
|
|
- **TypeScript** for type safety
|
|
- **ESLint** configuration
|
|
- **Prettier** formatting
|
|
- **Component-based** architecture
|
|
|
|
### **State Management**
|
|
- **Redux Toolkit** for global state
|
|
- **Local state** for component-specific data
|
|
- **Persistent storage** for user preferences
|
|
|
|
### **Performance**
|
|
- **Lazy loading** for routes
|
|
- **Optimized images** and assets
|
|
- **Efficient re-renders** with React.memo
|
|
- **Bundle optimization**
|
|
|
|
## 🚀 **Deployment**
|
|
|
|
### **Build for Production**
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
### **Deployment Options**
|
|
- **Netlify** - Static site hosting
|
|
- **Vercel** - React app deployment
|
|
- **AWS S3** - Static website hosting
|
|
- **Docker** - Containerized deployment
|
|
|
|
## 📞 **Support & Documentation**
|
|
|
|
### **Additional Resources**
|
|
- **API Documentation** (Coming soon)
|
|
- **User Guide** (Coming soon)
|
|
- **Developer Documentation** (Coming soon)
|
|
|
|
### **Contact**
|
|
For support and questions, please contact the development team.
|
|
|
|
---
|
|
|
|
## 🎯 **Business Impact**
|
|
|
|
This Reseller Dashboard provides:
|
|
|
|
1. **Customer Management** - Manage all customer relationships efficiently
|
|
2. **Revenue Tracking** - Monitor income and growth patterns
|
|
3. **Commission Monitoring** - Track earnings from Cloudtopiaa partnership
|
|
4. **Performance Analytics** - Data-driven business decisions
|
|
5. **Operational Efficiency** - Streamlined customer service processes
|
|
|
|
---
|
|
|
|
## 🔗 **Related Projects**
|
|
|
|
- **[Channel Partner Dashboard](../channel-partner-dashboard/)** - Admin panel for managing resellers
|
|
- **[Backend API](../backend/)** - Server-side implementation (Coming soon)
|
|
|
|
---
|
|
|
|
**Built with ❤️ for Cloudtopiaa's Reseller Program**
|