📅 Calendar Features Documentation

🎯 Overview

✨ Key Features

📱 Scrollable Date Header

• 2-week view: Shows 14 days starting from Monday
• Today indicator: Blue dot under today's date
• Selected date highlighting: Blue background for selected date
• Auto-scroll to today: "Today" button scrolls to current date
• Touch navigation: Tap any date to view jobs for that day

🔍 Job Filtering

• All Jobs: Shows all jobs for the selected date
• Invoices Due: Shows only jobs with pending invoices
• Estimates Sent: Shows only jobs with sent estimates
• Visual indicators: Icons and colors for each filter type

💰 Financial Information

• Invoice Due Dates: Shows when invoices are due
• Invoice Amounts: Displays invoice amounts
• Estimate Sent Dates: Shows when estimates were sent
• Estimate Amounts: Displays estimate amounts
• Status Indicators: Color-coded badges for urgency

🎨 UI Components

Date Header

┌─────────────────────────────────────────────────────────┐
│ Mon  Tue  Wed  Thu  Fri  Sat  Sun  Mon  Tue  Wed  Thu  │
│  1    2    3    4    5    6    7    8    9   10   11   │
│  •                                                      │
└─────────────────────────────────────────────────────────┘

Job Cards

• Job number and priority badge
• Status badge (Scheduled, In Progress, Completed, etc.)
• Job title and customer name
• Address and scheduled time
• Estimated duration
• Financial section (if applicable)

Financial Section

┌─────────────────────────────────────────────────────────┐
│ 💳 Invoice                    DUE TODAY        $500.00 │
│ 📄 Estimate    Sent Jan 15, 2024              $450.00 │
└─────────────────────────────────────────────────────────┘

🔧 Technical Implementation

File Structure

apps/mobile/src/screens/calendar/
└── CalendarScreen.tsx          # Main calendar component

Dependencies

• date-fns: Date manipulation and formatting
• @expo/vector-icons: Icons for UI elements
• react-native: Core React Native components

Key Functions

Date Generation

const generateDates = () => {
  const startDate = startOfWeek(new Date(), { weekStartsOn: 1 })
  const dates = []
  
  for (let i = 0; i < 14; i++) {
    dates.push(addDays(startDate, i))
  }
  
  return dates
}

Invoice Status Calculation

const getInvoiceStatusColor = (dueDate?: string) => {
  if (!dueDate) return '#666'
  
  const today = new Date()
  const due = new Date(dueDate)
  const diffDays = Math.ceil((due.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
  
  if (diffDays < 0) return '#ff4d4f' // Overdue
  if (diffDays <= 3) return '#fa8c16' // Due soon
  return '#52c41a' // Not due soon
}

Job Filtering

let filteredJobs = response.data || []

if (filterType === 'invoices') {
  filteredJobs = filteredJobs.filter(job => job.invoiceDueDate)
} else if (filterType === 'estimates') {
  filteredJobs = filteredJobs.filter(job => job.estimateSentDate)
}

📊 Data Interface

Job Interface

interface Job {
  id: string
  jobNumber: string
  title: string
  status: string
  scheduledDate: string
  scheduledTime?: string
  customer: {
    name: string
    phone?: string
  }
  address?: {
    street?: string
    city?: string
    state?: string
    zipCode?: string
  }
  priority: 'low' | 'medium' | 'high'
  estimatedDuration?: number
  invoiceDueDate?: string
  estimateSentDate?: string
  invoiceAmount?: number
  estimateAmount?: number
}

🎯 User Workflows

Daily Job Review

1. Open Calendar tab
2. View today's jobs (auto-selected)
3. Review job details and financial information
4. Tap "Today" button to return to current date

Invoice Management

1. Tap "Invoices Due" filter
2. Review jobs with pending invoices
3. Check due dates and amounts
4. Navigate to job details for payment processing

Estimate Tracking

1. Tap "Estimates Sent" filter
2. Review jobs with sent estimates
3. Check estimate amounts and dates
4. Follow up on estimate responses

🔄 Navigation Integration

Tab Navigation

• Icon: calendar-today
• Label: "Calendar"
• Position: Between "Time" and "Profile" tabs

Screen Navigation

• Job Details: Tap any job card → JobDetailScreen
• Back Navigation: Standard navigation back to calendar

🎨 Styling Features

Color Scheme

• Primary Blue: #1890ff (selected dates, active filters)
• Success Green: #52c41a (completed jobs, not due soon)
• Warning Orange: #fa8c16 (due soon, medium priority)
• Error Red: #ff4d4f (overdue, high priority)
• Neutral Gray: #666 (inactive elements)

Responsive Design

• Date items: 70px width, scrollable
• Job cards: Full width with padding
• Filter buttons: Auto-sizing with horizontal scroll

🚀 Future Enhancements

Planned Features

• Week/Month view toggle: Switch between different calendar views
• Job creation: Add new jobs directly from calendar
• Drag and drop: Reorder jobs by dragging
• Recurring jobs: Support for recurring job schedules
• Calendar sync: Integration with external calendars
• Notifications: Push notifications for due invoices

Advanced Filtering

• Date range selection: Select custom date ranges
• Customer filtering: Filter by specific customers
• Status filtering: Filter by job status
• Amount filtering: Filter by invoice/estimate amounts

📱 Usage Tips

1. Quick Navigation: Use the "Today" button to quickly return to current date
2. Filter Efficiency: Use filters to focus on specific job types
3. Financial Tracking: Monitor invoice due dates to avoid overdue payments
4. Estimate Follow-up: Track sent estimates for follow-up calls
5. Job Planning: Use the calendar to plan your daily schedule