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

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

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