DnD Dashboard — Productivity & Device Management

A premium, production-ready Interactive Dashboard built with Next.js 15, TypeScript, Tailwind CSS, and @dnd-kit. Features a rich, responsive interface with drag-and-drop layouts, custom data visualizations, and advanced filtering.

---

🚀 Getting Started

Prerequisites

• Node.js ≥ 18
• Yarn ≥ 1.22

Installation

# Clone the repository
git clone <repo-url> dnd-assessment
cd dnd-assessment
# Install dependencies
yarn install
# Start the development server
yarn dev

Open http://localhost:3000 in your browser.

Build for Production

yarn build
yarn start

---

✨ Features

📊 Advanced Data Visualization

• Line & Bar Charts: Interactive charts with smooth animations and responsive label thinning for mobile.
• Donut Charts: Multi-segment charts for email and activity breakdown.
• Sparklines: Real-time trend visualization in compact stat cards.

🏗️ Interactive Layout

• Drag-and-Drop Grid: Reorderable dashboard sections powered by @dnd-kit.
• Collapsible Sections: Clean organization of complex reports with intuitive expand/collapse logic.
• Independent Filtering: Integrated dropdowns for multi-section reports that operate independently (e.g., separate month filters for App vs. Web activity).

📱 Responsive & Premium Design

• Fully Responsive: Optimized for all screen sizes with smart header behavior and fluid layouts.
• Modern UI: Glassmorphism effects, vibrant curated color palettes, and smooth micro-animations.
• Sorting & Filtering: Comprehensive sorting logic for tables (Online Users, App Reports) with interactive headers.

---

🏗️ Tech Stack

Technology	Purpose
Next.js 15	App Router, Turbopack, SSR
TypeScript	Type safety and scalable architecture
Tailwind CSS	Modern utility-first styling
@dnd-kit	High-performance drag-and-drop
Lucide React	Premium iconography

---

📁 Project Structure

src/
├── app/ # Next.js App Router & Pages
├── components/
│ └── dashboard/ # Feature-rich dashboard components
│ ├── StatsCard.tsx # Responsive metric cards
│ ├── Charts/ # Custom SVG chart implementations
│ ├── Sortable/ # Drag-and-drop wrappers
│ └── ProductivityContent.tsx # Main dashboard logic
├── data/ # Mock data & business logic
└── types/ # Global type definitions

---

♿ Accessibility

• Keyboard navigation: Full keyboard support for drag-and-drop and navigation.
• Screen reader support: Semantic HTML and ARIA labels.
• Focus indicators: High-visibility focus states for interactive elements.

---

🚢 Deployment

The project is optimized for Vercel deployment:

npx vercel

---

📝 Available Scripts

Command	Description
yarn dev	Start development server (Turbopack)
yarn build	Build for production
yarn start	Start production server
yarn lint	Run code style checks