# 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**