VM Admin Dashboard

A React + Vite web application for monitoring and managing vending machines. This dashboard provides live metrics, sales, electricity usage, maintenance costs, and stock alerts, with a responsive and modern UI built using Tailwind CSS and Lucide icons.

---

Table of Contents

• Demo
• Features
• Tech Stack
• Project Structure
• Installation
• Available Scripts
• Folder Structure
• Contributing
• License

---

Demo

(Optional: Add a screenshot or link to live demo)

---

Features

• Live KPI metrics for:
  • Total Sales
  • Active Machines
  • Total Users
  • Low Stock Alerts
  • Daily Electricity Usage
  • Maintenance Costs
• Interactive charts:
  • Electricity Usage Chart
  • Sales Chart
• Stock alerts section
• Responsive design:
  • Horizontal KPI ribbon with hover highlights
  • Scrollable on small screens
• Clean, modern UI using Tailwind CSS
• Reusable Card components for metrics and other sections

---

Tech Stack

• Frontend: React 18, Vite
• Styling: Tailwind CSS
• Charts: Your chosen chart library (e.g., Chart.js / Recharts)
• Icons: Lucide React
• Routing: React Router DOM

---

Project Structure

src/
 ├─ components/
 │   ├─ dashboard/
 │   │   ├─ LiveDashboard.tsx
 │   │   ├─ ElectricityChart.tsx
 │   │   ├─ SalesChart.tsx
 │   │   └─ StockAlerts.tsx
 │   ├─ layout/
 │   │   └─ Header.tsx
 │   └─ ui/
 │       └─ Card.tsx
 ├─ data/
 │   └─ mokData.ts
 ├─ App.tsx
 ├─ main.tsx
 └─ index.css

---

Installation

1. Clone the repository:

git clone https://github.com/yourusername/vm-admin-dashboard.git
cd vm-admin-dashboard

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open your browser and go to:

http://localhost:5173

---

Available Scripts

• npm run dev – Runs the project in development mode
• npm run build – Builds the project for production
• npm run preview – Previews the production build locally

---

Folder Structure Explained

• components/dashboard – Main dashboard components
• components/layout – Layout components (Header, Sidebar if used)
• components/ui – Reusable UI components (Card, Button, etc.)
• data – Mock data for testing charts and metrics

---

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit your changes: git commit -m "Description"
4. Push to the branch: git push origin feature-name
5. Open a Pull Request

---

License

This project is licensed under the MIT License. See the LICENSE file for details.