SUPPORTLYTICS is a premium, high-tech IT Support Analytics Dashboard designed for real-time performance monitoring and global distribution visualization. It combines a stunning Cyber-aesthetic with powerful data insights.
![SUPPORTLYTICS - Dashboard Live(https://supportlytics.vercel.app/)]
- 🌊 LiquidEther Background: A real-time fluid simulation powered by
Three.jsandWebGL. It reacts dynamically to mouse movement and touch, providing a living backdrop for your data. - ✨ Global Glassmorphism: A cohesive, multi-layered design system with backdrop-blur effects that let the vibrant background glow through UI components.
- 📊 Advanced Analytics: Comprehensive metric cards and interactive charts (Donut, Bar, Scatter, Map) for deep performance insights.
- 🌓 Theme Resilience: Perfectly optimized for both Light and Dark modes with instant toggling.
- ⚡ High Performance: Built with Next.js (App Router), Tailwind CSS v4, and Framer Motion for ultra-smooth transitions and zero-lag interactions.
- Framework: Next.js (App Router)
- Styling: Tailwind CSS v4
- Visuals: Three.js (WebGL Fluid Simulation)
- Animations: Framer Motion
- Charts: Recharts
- Icons: Lucide React
- UI Components: Radix UI & Shadcn/UI
-
Clone the repository:
git clone https://github.com/dhanya26shree/Supportlytics.git cd Supportlytics -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open in browser: Open http://localhost:3000 to view the dashboard.
- Average Resolution: Monitor the efficiency of support tickets in real-time.
- Global Distribution: Track regional ticket density and efficiency across the globe.
- Priority Impact: Understand how ticket priorities affect your resolution SLAs.
- Cluster Efficiency: Visualize performance trends across different ticket topics.
This project is licensed under the MIT License - see the LICENSE file for details.