Spaces:
Sleeping
Sleeping
File size: 1,888 Bytes
d97b8f9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | # 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>
);
``` |