src/components/dashboard/README.md

Dashboard Components

Work Focus Components

The Work Focus feature helps users maintain productivity by following a structured daily schedule with protected deep work periods.

Components:

1. WorkFocus (work-focus.tsx)

   • Main container component that combines the Work Schedule and Work Principles

2. WorkSchedule (work-schedule.tsx)

   • Displays the daily work schedule with time blocks
   • Highlights the current activity
   • Provides notifications when it's time to switch activities
   • Uses different colors and icons to differentiate activity types

3. WorkPrinciples (work-principles.tsx)

   • Shows the key principles behind the work schedule design
   • Explains the benefits of the structured approach

Schedule Structure:

The daily work schedule follows these core principles:

• 4 hours of protected deep work sessions spaced throughout the day
• Team and admin tasks placed around deep work periods to avoid breaking flow
• Strategic breaks to maintain energy and focus
• Morning and end-of-day flexibility for planning and wrap-up

Activity Types:

1. Deep Work (Focused) - Protected time for concentration and high-value work
2. Collaborative - Team discussions and synchronization
3. Light Work - Administrative tasks, emails, planning
4. Breaks - Dedicated time to rest and recharge

Notifications:

The system will notify users when:

• It's time to switch to a new activity
• A deep work session is about to begin
• A break is coming up

Users can also manually check their current activity status by clicking the bell icon.

Usage

Include the WorkFocus component in your dashboard or other page:

import WorkFocus from "@/components/dashboard/work-focus";

// In your component
return (
  <div>
    <WorkFocus />
  </div>
);