TaskFlow Analytics Dashboard

TaskFlow Analytics is a responsive analytics dashboard for task management. It shows task stats, status breakdown charts, a weekly progress chart, a Kanban board, list view, files view, and a timeline section, all built with modern React and Vite.

Tech Stack

• Framework: React + TypeScript
• Bundler/Dev server: Vite
• Charts: recharts
• Icons: lucide-react
• Styling: Tailwind CSS (via CDN) + small custom CSS in src/index.css

Project Structure

• src/main.tsx: Vite entrypoint, mounts the React app.
• src/App.tsx: Main layout, sidebar, tabs, and routing between dashboard sections.
• src/components/: Presentational components:
  • Sidebar.tsx, StatsCards.tsx, DashboardCharts.tsx, Timeline.tsx
  • BoardTab.tsx, ListsTab.tsx, FilesTab.tsx
  • common/ – ErrorBoundary, ErrorMessage, and skeleton loaders.
• src/hooks/: Reusable data-fetching hooks (useTaskStats, useStatusBreakdown, useTimelineData, etc.).
• src/data/: Mock data used by the dashboard (stats, board columns, timeline items, files, lists).
• src/services/taskService.ts: Simulated service layer with artificial latency and error rate.
• src/types.ts: Shared TypeScript types for stats and tasks.

Features

• Responsive layout
  • Fixed sidebar on desktop/laptop.
  • Slide-in sidebar overlay with backdrop and close controls on mobile.
  • Timeline section with a rich grid view on desktop and a simplified stacked view on mobile.
• Analytics
  • Task stats cards (totals, completed, in progress, due today).
  • Status breakdown bar chart and weekly progress chart.
• Task views
  • Kanban board, list view, files view, and timeline view.
• Error handling and loading states
  • Central ErrorBoundary and per-section error messages.
  • Skeleton components for charts, stats, lists, board, and files.

Run Locally

• Prerequisites: Node.js (LTS recommended, e.g. 18+)

1. Install dependencies:

   npm install

2. Start the dev server:

   npm run dev

3. Open the URL shown in the terminal (usually http://localhost:3000).

Note: A GEMINI_API_KEY is not required for this dashboard; all data is mocked locally via src/data and src/services/taskService.ts.

Build for Production

1. Build the optimized production bundle:

   npm run build

2. Preview the production build locally:

   npm run preview

Folder Cleanup

This project now uses the src/ directory as the single source of truth. Legacy duplicate files and folders at the project root (components, data, hooks, services, old App.tsx, index.tsx, and index.css) have been removed to keep the codebase clean and production-ready.