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

   git clone <repository-url>
   cd reseller-dashboard
   

2. Install dependencies

   npm install
   

3. Start the development server

   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

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 - Admin panel for managing resellers
• Backend API - Server-side implementation (Coming soon)

---

Built with ❤️ for Cloudtopiaa's Reseller Program