🛡️ SecureDash — Interactive Security Dashboard

An elegant and responsive dark-themed security dashboard built using Next.js, TypeScript, and Tailwind CSS. It features a modern, modular UI powered by shadcn/ui, rich visualizations via Recharts, and easy-to-navigate layouts with mock data for smooth interactivity.

🔗 Live Demo: [https://security-dashboard-gilt.vercel.app/

📸 Preview

Dashboard Overview

🛠️ Tech Stack

Framework: Next.js (App Router)
Language: TypeScript
Styling: Tailwind CSS (Dark Theme)
UI Components: shadcn/ui
Charts: Recharts
Deployment: Vercel
Data: Mock data (stored in project files)

🎯 Features

✅ Fully responsive: Desktop, Tablet & Mobile
✅ Dark mode with custom theme palette
✅ Sidebar with toggle/hide functionality
✅ Topbar with title, avatar, and search
✅ Filterable Security Events Table
✅ Reusable & modular UI components
✅ Real-time feel (mock data simulation)
✅ Interactive charts with tooltips
✅ Hover effects and smooth transitions
✅ Deployed on Vercel for instant access

📊 Dashboard Widgets & Components

📈 Line Chart
📉 Bar Chart
🧾 Stats Cards (Users, Revenue, Threats, etc.)
🔍 Filterable Security Events Table
📂 Recent Activity Table
🧠 Searchable/Filterable Dropdowns
🧱 Stacked Bar Chart
🥧 Pie Chart & Doughnut Chart
🌐 Multi-line Chart
🚀 Gauge/Speedometer Chart (Geco Style)

🎨 Dark Theme Palette

Element	Hex Code
Background	`#171717`
Container	`#232323`
Sidebar	`#212121`
Card Background	`#2A2A2A`
Card Hover	`#333333`
Input Background	`#1D1D1D`
Accent	`#426CFF`
Accent Hover	`#375BD9`
Text Primary	`#FFFFFF`
Text Secondary	`#A1A1AA`
Border	`#3D3D3D`
Border Hover	`#4A4A4A`