Modern Procrastination Management App and visually appealing web App that helps users manage their tasks and time effectively using Eisenhower Matrix and Pomodoro Technique. The App should have the following features: ## Dashboard Page **Task Overview**: Card, Badge, Icon **Pomodoro Timer**: Timer Display, Button **Task Distribution**: Chart **Navigation Bar**: NavBar, Icon **Add Task Button**: Floating Action Button (FAB) ## Tasks Page **Task List**: Table, Icon, Checkbox **Task Details**: Modal, Form, Button **Filter and Sort Options**: Dropdown, Icon ## Pomodoro Page **Timer Display**: Timer, Button, Progress Bar **Session Summary**: List ## Analytics Page **Charts**: Bar Chart, Line Chart, Pie Chart **Summary Cards**: Card, Icon ## General Components **Header**: NavBar, Icon **Footer**: Footer Each page should use the relevant components from the Shadcn UI library, ensuring consistency, usability, and a modern aesthetic.

Navigation Bar (NavBar) - Top of the page - Elems: - Logo: Left side - Menu Items: Right side, "Dashboard," "Tasks," "Pomodoro," "Analytics" - Icons: User profile, notifications, settings Task Overview - Container: Card - Elems: - Title: "Task Overview" - Task Categories: Urgent, Important, Delegatable, Not Urgent - Layout: Grid or Flexbox Pomodoro Timer - Container: Card - Elems: - Title: "Pomodoro Timer" - Timer Display: Large, central, countdown (25:00) - Buttons: Start, Pause, Reset - Icons: Optional Task Distribution Chart - Container: Card - Elems: - Title: "Task Distribution" - Chart: Bar chart, tasks distribution over time - Chart Details: - Axes: X: Time, Y: Number of Tasks - Bars: Different colors for each task category Add Task Button - Position: Bottom right corner - Element: Icon button with "+" - Action: Opens a modal for adding a new task

Add component to projectLearn more

Log In to Copy Code

History