Mission Control - Inventory & Analytics Dashboard

Overview

Mission Control is a state-of-the-art inventory management and analytics dashboard designed for high-performance monitoring of business assets. Built with modern web technologies, it provides real-time insights, seamless inventory tracking, and visual analytics in a premium, dark-themed interface.

This project was developed for Yes Bank as a comprehensive solution for managing products, tracking stock levels, and visualizing financial data.

🚀 Key Features

• Real-time Analytics Dashboard

  • Visual Key Performance Indicators (KPIs): Track Total Value, Total Products, Low Stock Items, and Average Price at a glance.
  • Trend Analysis: Sparklines and percentage indicators show week-over-week performance.
  • Interactive Charts: Switch between Pie and Bar charts to visualize product distribution and value.
  • Low Stock Alerts: Immediate widgets highlighting items that require restocking.
  • Top Performers: Auto-calculated ranking of top products by total value.

• Advanced Inventory Management

  • Grid View: Clean, sortable data table for all products.
  • Search & Filter: Rapidly find items by name, category, or status.
  • Inline Editing: (Planned) Update stock figures directly from the interface.

• Premium UI/UX

  • Glassmorphism Design: Modern, translucent UI elements with backdrop blurs.
  • Dynamic Animations: Smooth entry animations and hover effects using Tailwind CSS and custom transitions.
  • Responsive Layout: Fully optimized for desktops, tablets, and large screens.

🛠️ Tech Stack

• Frontend Framework: React 19
• Language: TypeScript for robust type safety.
• Build Tool: Vite for lightning-fast development and building.
• Styling: Tailwind CSS v4 for utility-first, responsive design.
• State Management: Zustand for lightweight and fast state handling.
• Charts: Recharts for composable, responsive React charts.
• Routing: React Router v7.
• Notifications: React Hot Toast.

📦 Installation & Setup

1. Clone the repository

   git clone https://github.com/Rcidshacker/Mission-control---Yes-Bank.git
   cd mission-control

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Build for production

   npm run build

📂 Project Structure

mission-control/
├── src/
│   ├── components/      # Reusable UI components
│   │   ├── analytics/   # Charts and dashboard widgets
│   │   ├── inventory/   # Product tables and lists
│   │   └── layout/      # Navbar and page wrappers
│   ├── hooks/           # Custom React hooks (e.g., useUrlSync)
│   ├── pages/           # Main route pages (Dashboard, Inventory)
│   ├── services/        # API calls and data fetching
│   ├── store/           # Global state (Zustand)
│   └── types/           # TypeScript definitions
└── ...

🤝 Contribution

Contributions are welcome! Please feel free to submit a Pull Request.

---

Created by Ruchit