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.

• Node.js ≥ 18
• Yarn ≥ 1.22

# 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.

yarn build
yarn start

• 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.

• 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).

• 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.

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

• 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.

The project is optimized for Vercel deployment:

npx vercel