rohit/Reseller-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
f42148ac9b
Reseller-dashboard/README.md
rohit f42148ac9b initial commit
2025-08-03 18:49:28 +05:30

7.6 KiB
Raw Blame History

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

Built with ❤️ for Cloudtopiaa's Reseller Program