Frontend Components Documentation

1. Header Section

Logo and Navigation

• Logo displayed at the top left showing app name/logo
• Navigation menu with icons for:
  • Tasks (default view)
  • Notifications
  • History
  • Analytics
  • Boards (access to all boards)

Profile Options

• Theme switcher (light/dark mode, predefined themes)
• Accessibility options
  • High contrast toggle
  • Larger buttons toggle
• User settings/profile management

Authentication Section

• Firebase authentication integration
  • Login/sign-up buttons for unauthenticated users
  • Profile display and logout option for authenticated users

2. Main Dashboard

Board Overview

• Complete board list showing all user-associated boards
• Create Board button for new board creation
• Join Board button with unique code functionality
• Board navigation selector

Layout Structure

• Split-screen design:
  • Left Panel: Person 1's task list
  • Right Panel: Person 2's task list
  • "Do It Together" tasks toggle/tab

Task Management

• Category filtering system using tabs/pills
• Task list elements including:
  • Task title
  • Deadline indicators
  • Reminder icons
  • Attachment indicators
  • Completion checkbox (completed tasks auto-move to bottom)

3. Task Details Modal

Modal Content

• Comprehensive task information:
  • Title
  • Description
  • Deadline
  • Reminder settings
  • Category
  • Attachments
• Action buttons (permission-based):
  • Edit task
  • Delete task

4. Notification Section

Notification Display

• Chronological notification list
• Notification details:
  • Task change updates
  • Completion notifications
  • Deletion records
• Header icon badge for unread notifications
• Real-time synchronization between collaborators

5. History Section

Action Tracking

• Comprehensive action log
• Filtering capabilities:
  • Date range selection
  • User action filtering
• Visual distinction between:
  • Added tasks
  • Completed tasks
  • Deleted tasks

6. Analytics Section

Visualization Components

• Task completion timeline (line/bar graph)
• User completion rate comparison (pie/bar chart)
• Category activity analysis (histogram/bar chart)
• Category insights highlighting most/least active areas

7. Settings Page

Customization Options

• Theme selection:
  • Light/Dark mode toggle
  • Predefined theme options (Nature, Tech, Retro)
• Accessibility features:
  • High contrast mode
  • Larger button size option
• User preference configuration

UI/UX Components

Interactive Elements

• Floating Action Button (FAB) for quick task creation
• Category selection pills
• Task control buttons
• Informative tooltips
• Accessibility toggles

Design Elements

• Base design featuring pastel tones and minimalism
• Theme variations:
  • Nature
  • Tech
  • Retro
• Subtle transition animations

Responsive Design

Platform Adaptations

• Desktop: Full split-screen layout
• Tablet: Vertical split with swipe functionality
• Mobile (Future Implementation):
  • Single panel view
  • Bottom navigation bar

User Authentication

Firebase Integration

• Authentication features:
  • User login
  • Account creation
  • Dashboard access control
• Board management:
  • Board creation functionality
  • Board joining via unique codes