Project Details - Grid View Specification
Last Updated: November 20, 2025 Version: 4.4.0 Status: ⚠️ Awaiting Stakeholder Review
🎯 Overview
The Grid View is a dense, spreadsheet-style interface for production managers who need to see their entire crew roster at a glance. It's designed to replicate the best parts of Excel-based crew planning while adding modern web UI benefits.
Key Insight
Production managers currently use Excel because they can see everything at once:
- Who's working which days
- What everyone costs (offered vs actual)
- Which admin tasks are pending
- Total project costs in real-time
Grid View brings this power to PBS with better UX: sorting, filtering, inline editing, visual status indicators, and automatic calculations.
📊 Visual Mockup
Full Grid Layout
┌─────────────────────────────────────────────────────────────────────────────────────────── ─────────────────────────────────┐
│ PROJECT: Idre Freestyle [+ Add Crew] [Bulk Edit] [Export to Excel] │
│ Dec 3-10, 2023 (8 days) • 30 crew members │
├────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ View: [○ List] [● Grid] [○ Timeline] Filters: [All Status ▼] [All Functions ▼] [All Teams ▼] [☐ Incomplete tasks] │
├────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌ ─────────────────────────── CREW INFO (Frozen) ──────────┬────── LOGISTICS ────┬──────── WORK SCHEDULE ─────────┬─ FIN │
│ │ # │★│ Name │Function │Team │Role │Status │Accom │Travel │S M T W T F S S │W│T│Tot│Rate │Hotel │
│ ├───┼─┼────────────────┼───────────┼────────┼──────┼───────┼─────────┼───────────┼────────────────┼─┼─┼───┼─────┼───────┤
│ │ 1 │★│ Johan B. │Director │— │Main │✓ Conf │Fjäll 521│🚌 Minibus │ ■■■■■■ │6│0│ 6 │1000 │4500 │
│ │ 2 │ │ Jan-Ove K. │Mixer │— │— │✓ Conf │Fjäll 520│🚗 Own car │ ■■■■■ │5│0│ 5 │1000 │3600 │
│ │ 3 │★│ Peter A. │Producer │— │Grafik│✓ Conf │Fjäll 521│🚗 Own car │ ■■■■■■ │6│0│ 6 │1000 │4500 │
│ │ 4 │★│ Susanne S. │Prod Lead │— │— │✓ Conf │Fjäll 552│🚌 Minibus │ ■■■■■■ │6│0│ 6 │1000 │4500 │
│ │ 5 │ │ Adam K. │Rigg │— │— │✓ Conf │Fjäll 551│🚗 Own car │ ■■■■■■ │6│0│ 6 │1000 │4500 │
│ │ 6 │★│ Daniel E. │Cam Ass │— │Slope │✓ Conf │Fjäll 550│🚗 Own car │ ■■■■■■ │6│0│ 6 │1000 │4500 │
│ │ 7 │ │ Joakim S. │A-Ljud │Audio │Main │✓ Conf │Fjäll 545│🚗 W/Adam │ ■■■■■■ │6│0│ 6 │1000 │4500 │
│ │ 8 │ │ Max C. │Ljud Tech │Audio │— │✓ Conf │Fjäll 545│🚌 Minibus │ ■■■■■■ │6│0│ 6 │1000 │4500 │
│ │ 9 │★│ Niklas N. │EVS 1 │EVS │— │✓ Conf │Fjäll 673│🚗 W/Magnus│ ■■■■ │4│0│ 4 │1000 │3600 │
│ │10 │ │ Håkan R. │EVS 2 │EVS │— │✓ Conf │Fjäll 520│🚗 Shared │ ■■■ │3│0│ 3 │1000 │2700 │
│ │ │ │ [...] │ │ │ │ │ │ │ │ │ │ │ │ │
│ │30 │ │ Elin S. │RF Tech │Tech │— │✓ Conf │Fjäll 548│ 🚌 NEP │ ■■■■■■ │6│0│ 6 │ Inc │4500 │
│ ├───┴─┴────────────────┴───────────┴────────┴──────┴───────┴─────────┴───────────┴────────────────┴─┴─┴───┴─────┴───────┤
│ │ TOTAL: 30 crew • 156 work days • 42 travel days • Crew: 130,000 SEK • Hotel: 107,100 • Travel: 89,600 • TOTAL: 326,700│
│ └──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
│ │
│ 💡 Showing Offered costs. Toggle to [Show Actual] [Show Both] │
└────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
← Scroll horizontally to see more columns (Travel Costs, Admin Tasks, Actual Costs) →
Column Groups Detail
┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ COMPLETE COLUMN STRUCTURE │
├─────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ [A. CREW INFO - Frozen] Always visible when scrolling │
│ ├─ # (Row number) │
│ ├─ ★ (Favorite toggle) │
│ ├─ Name (Avatar + Name) │
│ ├─ Function (Role badge) │
│ ├─ Team (Editable label) │
│ ├─ Role Note (Editable descriptor) │
│ └─ Status (Color badge) │
│ │
│ [B. LOGISTICS] Hotel & Travel │
│ ├─ Accom. (Hotel assignment + roommates) │
│ └─ Travel (Method icon + summary) │
│ │
│ [C. WORK SCHEDULE] Visual day-by-day grid │
│ ├─ Date columns (Dec 3, 4, 5... 10) ■ = work day, □ = travel day │
│ ├─ W (Work days count) │
│ ├─ T (Travel days count) │
│ └─ Total (Total days) │
│ │
│ [D. FINANCIAL - Offered] Planned costs │
│ ├─ Day Rate (Work day rate) │
│ ├─ Travel Rate (Travel day rate) │
│ ├─ Crew Total (Calculated: rates × days) │
│ ├─ Hotel (Total hotel costs) │
│ ├─ Travel Cost (Total travel expenses) │
│ ├─ Other (Adjustments, bonuses) │
│ └─ TOTAL (Grand total per crew) **KEY METRIC** │
│ │
│ [E. ADMIN TASKS] Manual workflow checkboxes │
│ ├─ ✓ Travel booked │
│ ├─ ✓ Hotel booked │
│ ├─ ✓ Roadbook sent │
│ └─ ✓ Invoice handled (freelancers only) │
│ │
│ [F. ACTUAL COSTS] Post-production (hidden by default) │
│ ├─ Act. Days (Actual work days) │
│ ├─ Act. Rate (Adjusted rate) │
│ ├─ Act. Total (Invoiced amount) │
│ ├─ Variance (Difference from planned) │
│ └─ Invoice # (External reference) │
│ │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
🎨 Design System
Cell States & Visual Indicators
WORK SCHEDULE CELLS:
■ Work day (solid blue fill)
□ Travel day (blue outline)
Empty (no work)
? TBD (dashed outline)
ACCOMMODATION:
Fjällterassen 521 Simple display
👥 Fjällterassen 521 (3) Shared with others (hover → see names)
— Not assigned
TRAVEL:
✈️ Flight SK1234 Flight booked
🚗 Own car Personal vehicle
🚂 Train Rail travel
🚌 Minibus NCP Group transport
🟢 Symbol = Booked
🟡 Symbol = Planned
⚪ Symbol = Not arranged
STATUS BADGES:
✓ Confirmed (Green #10B981)
⏳ Pending (Yellow #F59E0B)
📧 Sent (Blue #3B82F6)
❌ Declined (Red #EF4444)
ADMIN TASKS:
✓ Done (Green)
☐ Pending (Gray)
— N/A
FINANCIAL INDICATORS:
🟢 Within budget
🟡 Close to limit (90%+)
🔴 Over budget
**Bold** = Non-standard rate
Typography & Spacing
GRID DENSITY:
Row Height: 32px (compact)
Cell Padding: 4px
Font Size: 13px (body), 12px (headers)
FONTS:
Numbers: SF Mono / Consolas (monospace for alignment)
Text: Inter / San Francisco (sans-serif)
COLORS (Tailwind):
Primary: Blue-600 (#2563EB)
Secondary: Gray-600 (#64748B)
Success: Green-600 (#10B981)
Warning: Yellow-500 (#F59E0B)
Danger: Red-600 (#EF4444)
Border: Gray-200 (#E5E7EB)
🔧 Functional Specifications
View Mode Toggle
Location: Top right below project header
Options:
○ List View (default, card-based, detailed)
● Grid View (spreadsheet, high-density)
○ Timeline View (Gantt chart, post-MVP)
Behavior:
- User preference saved per-project
- Auto-switches to List View on mobile (<1280px)
- Retains filters/sort when switching views
Header Controls
┌────────────────────────────────────────────────────────────────┐
│ Quick Filters: │
│ [All Status ▼] → Filter by Confirmed/Pending/etc. │
│ [All Functions ▼] → Filter by Director/Camera/Sound/etc. │
│ [All Teams ▼] → Filter by Camera A/Audio Main/etc. │
│ [☐ Show only incomplete tasks] → Show rows with pending work │
│ │
│ Date Range Display: │
│ "Dec 3-10, 2023 (8 days)" │
│ Click → opens date picker to adjust view range │
│ │
│ Crew Count: │
│ "30 crew members" (updates with filters) │
│ │
│ Quick Actions: │
│ [+ Add Crew] → Opens crew selection modal │
│ [Bulk Edit] → Select multiple rows, edit common fields │
│ [Export] → Export to Excel/PDF/Clipboard │
└────────────────────────────────────────────────────────────────┘
Column Interactions
Frozen Columns (Crew Info)
BEHAVIOR:
- Always visible when scrolling horizontally
- Subtle shadow appears when scrolling right
- Min width: 600px (all crew info visible)
CLICK ACTIONS:
- Name → Opens crew assignment detail modal (full edit)
- ★ → Toggles favorite status (instant save)
- Team → Inline edit (text input appears)
- Role Note → Inline edit (text input appears)
- Status → Dropdown to change status
Work Schedule Grid
VISUAL BEHAVIOR:
- One column per day (project.start_date to project.end_date)
- Max 31 days shown (horizontal scroll if longer)
- Weekend columns have subtle gray background
CLICK ACTIONS:
- Click empty cell → Mark as work day (■)
- Click work day (■) → Toggle to travel day (□)
- Click travel day (□) → Toggle to empty
- Hover → Tooltip: "Work day (1,000 SEK)" or "Travel day (500 SEK)"
AUTO-CALCULATION:
- W (Work days): Count of ■ cells
- T (Travel days): Count of □ cells
- Total: W + T
- Updates Crew Total when changed
Financial Columns
INLINE EDITING:
- Day Rate → Double-click → Input field → Enter to save
- Travel Rate → Double-click → Input field → Enter to save
- Other → Click → Opens adjustment modal
READ-ONLY CALCULATIONS:
- Crew Total = (W × Day Rate) + (T × Travel Rate)
- TOTAL = Crew Total + Hotel + Travel Cost + Other
VISUAL INDICATORS:
- Bold text if rate differs from function default
- 🟢 Green tint if within budget
- 🔴 Red tint if over budget (>110% of planned)
- Background color intensity scales with amount (heat map)
Admin Tasks Checkboxes
BEHAVIOR:
- Simple click to toggle ✓ ↔ ☐
- Auto-saves on change (debounced 500ms)
- "Invoice handled" only shown for freelancers (employer_id IS NULL)
FILTER INTEGRATION:
- "Show only incomplete tasks" checkbox
→ Hides rows where all checkboxes are ✓
Actual Costs Columns (Hidden by Default)
TOGGLE:
Footer has button: [Show Actual Costs]
- Reveals columns: Act. Days, Act. Rate, Act. Total, Variance, Invoice #
- Intended for post-production reconciliation
VARIANCE DISPLAY:
- Positive variance: "+500 SEK (+8.3%)" in green
- Negative variance: "-200 SEK (-3.6%)" in red
- Zero: "—" or "0 (0%)"
INVOICE # FIELD:
- Text input for external invoice reference (e.g., "8949")
- Optional link icon → opens external system (Fortnox)
Row Interactions
CLICK BEHAVIORS:
1. Single click row → Highlight row + show quick actions
2. Double-click row → Opens full crew assignment detail modal
3. Right-click row → Context menu:
- Edit Assignment
- Duplicate Booking
- View Crew Profile
- Remove from Project
- Copy Details
HOVER STATE:
- Entire row highlights (light blue background)
- Quick action icons appear on right:
[✎ Edit] [📋 Copy] [🗑️ Remove]
DRAG & DROP:
- Grab row number (#) to drag
- Drop between rows to reorder
- Visual indicator (blue line) shows drop target
- Manual sort order saved per-user
Row Grouping (Optional)
TOGGLE: [Group by: None ▼]
Options:
- None (flat list, default)
- Function (Camera (8), Sound (3), etc.)
- Team (Camera A (4), Audio Main (2), etc.)
- Status (Confirmed (28), Pending (2))
VISUAL:
┌─ ▼ Camera (8) ─────────────────── Subtotal: 48,000 SEK ────┐
│ 1 Johan B. Director ... │
│ 2 Peter A. Producer ... │
│ [...] │
└──────────────────────────────────────────── ──────────────────┘
┌─ ▼ Sound (3) ──────────────────── Subtotal: 17,000 SEK ────┐
│ 7 Joakim S. A-Ljud ... │
│ [...] │
└──────────────────────────────────────────────────────────────┘
COLLAPSE/EXPAND:
- Click ▼ to collapse group
- Click ▶ to expand group
- Collapsed: Shows only group header with subtotals
Footer Row (Sticky)
ALWAYS VISIBLE:
┌───────────────────────────────────────────────────────────────┐
│ TOTAL: 30 crew • 156 work days • 42 travel days │
│ Crew: 130,000 SEK • Hotel: 107,100 • Travel: 89,600 │
│ TOTAL: 326,700 SEK │
│ │
│ Budget Status: Offered: 343,035 | Actual: 379,243 │
│ Variance: +36,208 (+10.6%) 🔴 │
│ │
│ [Show Offered] [Show Actual] [Show Both] │
└───────────────────────────────────────────────────────────────┘
CALCULATIONS:
- Updates in real-time as grid changes
- Respects active filters (shows filtered totals)
- Currency: Always in company base_currency
- Toggle buttons switch between offered/actual cost views
Column Visibility Controls
BUTTON: [⚙️ Columns] (top right)
OPENS MODAL:
┌───────────────────────────────────┐
│ Column Visibility │
├───────────────────────────────────┤
│ ☑ Crew Info (always visible) │
│ ☑ Logistics │
│ ☑ Work Schedule │
│ ☑ Financial (Offered) │
│ ☐ Financial (Actual) │
│ ☑ Admin Tasks │
├───────────────────────────────────┤
│ [Reset to Default] [Save] │
└───────────────────────────────────┘
BEHAVIOR:
- Unchecked groups hidden from grid
- Saved as user preference (per-project)
- "Crew Info" always checked (cannot hide)
Keyboard Navigation (Excel-like)
KEYS:
Tab / Shift+Tab Navigate cells (right/left)
Enter Start editing cell / Save edit
Esc Cancel edit / Close modal
Ctrl+C / Ctrl+V Copy/Paste cell values
Ctrl+F Find crew member (search dialog)
←↑→↓ Arrow keys to navigate
Ctrl+Home Jump to first cell
Ctrl+End Jump to last cell
Page Up/Down Scroll one page
EDIT MODE:
- Double-click or press Enter to edit cell
- Type to overwrite value
- Tab to save and move to next cell
- Esc to cancel without saving
📤 Export Options
Export to Excel
FORMAT: .xlsx (Excel 2010+)
INCLUDES:
- All visible columns (respects column visibility settings)
- Current filters applied
- Current sort order
- Formulas for calculated fields (Crew Total, TOTAL, etc.)
- Cell formatting (colors, bold, borders)
- Frozen panes (Crew Info columns)
- Footer row with summary formulas
FILENAME: "ProjectName_CrewRoster_YYYY-MM-DD.xlsx"
Example: "Idre_Freestyle_CrewRoster_2023-12-03.xlsx"
Export to PDF
FORMAT: PDF (A3 landscape)
LAYOUT:
- Project header (name, dates, crew count)
- Full grid (all visible columns)
- Footer with totals
- Compact typography for print
OPTIONS:
- [ ] Include actual costs
- [ ] Include notes column
- [ ] Group by function
FILENAME: "ProjectName_CrewRoster_YYYY-MM-DD.pdf"
Copy to Clipboard
BEHAVIOR:
- Copies grid as tab-separated values (TSV)
- Can be pasted into Excel, Google Sheets, Numbers
- Includes headers
- Respects current filters and sort
KEYBOARD: Ctrl+Shift+C (select all + copy grid)
🎯 Data Mapping to Database
Source Tables
PRIMARY:
- assignments (main crew booking data)
- crew_profiles (crew member info)
- project_functions (function/role data)
- projects (project dates, budget)
RELATED:
- travel_bookings (travel costs and details)
- hotel_bookings (hotel costs and details)
- users (for favorite stars, admin users)
- companies (for base_currency)
- functions (for role names)
Column to Database Field Mapping
CREW INFO:
- # → Row number (generated client-side)
- ★ → crew_profiles.is_favorite (per-company flag)
- Name → crew_profiles.name + crew_profiles.avatar_url
- Function → functions.name (via project_functions)
- Team → assignments.team_label
- Role Note → assignments.role_note
- Status → assignments.current_status
LOGISTICS:
- Accom. → (NOT IN DATABASE - Future feature? See Q1 below)
- Travel → travel_bookings.type + travel_bookings.from_city + travel_bookings.to_city
WORK SCHEDULE:
- Date columns → Generated from assignments.start_date to assignments.end_date
- W → assignments.planned_work_days (or actual_work_days if completed)
- T → assignments.planned_travel_days (or actual_travel_days if completed)
- Total → W + T (calculated)
FINANCIAL (Offered):
- Day Rate → assignments.work_day_rate_cents / 100
- Travel Rate → assignments.travel_day_rate_cents / 100
- Crew Total → (planned_work_days × work_day_rate) + (planned_travel_days × travel_day_rate)
- Hotel → SUM(hotel_bookings.total_cost_cents) / 100
- Travel Cost → SUM(travel_bookings.cost_cents) / 100
- Other → assignments.adjustment_amount_cents / 100
- TOTAL → Crew Total + Hotel + Travel Cost + Other
ADMIN TASKS:
- ✓ Travel → assignments.travel_status (not_booked / booked)
- ✓ Hotel → assignments.hotel_status (not_booked / booked)
- ✓ Roadbook → assignments.roadbook_status (not_sent / sent)
- ✓ Invoice → assignments.invoice_status (not_handled / handled)
ACTUAL COSTS:
- Act. Days → assignments.actual_work_days + assignments.actual_travel_days
- Act. Rate → assignments.actual_work_rate_cents / 100
- Act. Total → (actual_work_days × actual_work_rate) + (actual_travel_days × actual_travel_rate) + adjustment_amount
- Variance → Act. Total - Crew Total (calculated)
- Invoice # → (NOT IN DATABASE - See Q2 below)
❓ Open Questions for Stakeholders
Q1: Accommodation Tracking
Context: Excel sheet shows accommodation assignments (e.g., "Fjällterassen 521", roommate sharing).
Question: Do we need to track accommodation in the database?
Options:
- A) Add
accommodation_assignmenttable (hotel name, room number, check-in/out, roommates) - B) Store as free-text field on
assignmentstable (e.g.,accommodation_notes) - C) Keep in
hotel_bookingstable and extend with room assignment fields - D) Don't track in system, continue managing in external sheets/systems
Impact: If we track accommodation, Grid View can show roommate icons (👥) and click-to-expand details.
Q2: Invoice Reference Numbers
Context: Excel sheet has "Löpnr Fortnox" (invoice numbers from external accounting system).
Question: Should PBS store invoice references from Fortnox/other systems?
Options:
- A) Add
invoice_referencefield toassignmentstable - B) Add full
invoicestable (invoice_number, date, amount, status, external_link) - C) Don't store, keep in external accounting system only
- D) Store as JSON in
assignments.notesoradjustment_reason
Impact: If stored, Grid View can link to external invoices (click to open Fortnox).
Q3: Daily Work Schedule Grid Usefulness
Context: Grid View shows daily cells (■■■■■) for visual scanning.
Question: Is this daily grid useful for your workflow?
Alternative: Show only summary counts (6 work days, 2 travel days) without daily breakdown.
Pros of daily grid:
- Visual scan of who works which days
- Easy to see conflicts/overlaps
- Quick inline editing (click to toggle)
Cons:
- Takes horizontal space (31 days = 31 columns for long projects)
- May be redundant if you already see start/end dates elsewhere
Preference: Keep daily grid? Or simplify to summary only?
Q4: Accommodation Display Detail Level
Context: Grid View currently shows "Fj ällterassen 521" (room code).
Question: What level of detail do you need in the grid?
Options:
- A) Room code only (e.g., "Fjäll 521") - compact
- B) Room code + roommate count (e.g., "Fjäll 521 👥3") - shows sharing
- C) Room code + roommate names on hover - detailed
- D) Full hotel name + room (e.g., "Fjällterassen Room 521") - verbose
Recommendation: Option B (code + count) for balance of info vs space.
Q5: Actual Costs Column Visibility
Context: "Actual Costs" columns hidden by default (post-production feature).
Question: When should Actual Costs columns be visible?
Options:
- A) Always hidden, user manually shows via [⚙️ Columns] button
- B) Auto-show when project status = "Completed"
- C) Auto-show when first actual cost is entered
- D) User preference: "Always show" / "Show after completion" / "Always hide"
Impact: Affects default grid width and information density.
Q6: Must-Have vs Nice-to-Have Columns
Context: Grid View has 40+ columns across all groups.
Question: Which columns do you use DAILY vs OCCASIONALLY?
Please rank (1 = Critical, 2 = Important, 3 = Nice to have, 4 = Can hide):
___ Name, Function, Status (Crew Info)
___ Team, Role Note (Labels)
___ Accommodation (Logistics)
___ Travel method (Logistics)
___ Daily work schedule grid (Work Schedule)
___ Work days count (W)
___ Travel days count (T)
___ Day Rate, Travel Rate (Financial)
___ Crew Total cost (Financial)
___ Hotel cost (Financial)
___ Travel cost (Financial)
___ TOTAL per crew (Financial)
___ Admin task checkboxes (Travel/Hotel/Roadbook/Invoice)
___ Actual costs columns (Post-production)
Impact: Helps prioritize default column visibility and grid width.
Q7: Meal Per Diems Tracking
Context: Not mentioned in Excel sheet, but common in production.
Question: Do you need to track meal per diems or meal allowances in the grid?
Options:
- A) Yes, add "Meals" column (daily rate × days)
- B) Yes, but as simple checkbox "Meals Included" (boolean)
- C) No, tracked separately outside PBS
- D) Store in "Other" expenses column
Impact: Additional financial column if tracked.
Q8: Color-Coding for Conflicts
Context: Grid View currently shows status badges (Confirmed/Pending).
Question: Should we highlight crew with booking conflicts or availability issues?
Visual Ideas:
- 🔴 Red row background if crew double-booked (overlapping project dates)
- 🟡 Yellow row background if crew marked unavailable in those dates
- ⚠️ Warning icon in Name column with tooltip "Conflict with Project X"
Preference: Add visual conflict warnings? Or keep clean grid?
Q9: Export Format Preference
Context: Grid View can export to Excel with formulas or flat values.
Question: What do you prefer in exported Excel files?
Options:
- A) Formulas (e.g., =B2*C2 for cost calculations) - editable, updates automatically
- B) Flat values (e.g., 6000) - static snapshot, no formulas
- C) Both (two sheets: "Data" with values, "Calculations" with formulas)
Impact: Formula exports are more complex but allow external what-if analysis.
Q10: Countdown Timer Display
Context: Showing "Days until project starts" in header.
Question: Useful to see countdown in Grid View header?
Example: "⏰ 12 days until project starts" (updates daily)
Preference: Add countdown? Or unnecessary clutter?
🚀 Implementation Notes
Performance Optimization
CRITICAL:
- Virtualized scrolling for 100+ crew members
→ Only render visible rows (10-20) + buffer (10)
→ Library: react-virtual, react-window, or @tanstack/react-virtual
- Debounced inline editing (500ms)
→ Don't save on every keystroke
→ Save on blur or after 500ms idle
- Client-side calculations for totals
→ Don't re-fetch API on every cell change
→ Calculate crew totals, footer sums in React state
- Lazy load actual costs columns
→ Only fetch actual_work_days, actual_rate, etc. when user clicks [Show Actual]
- Memoized rows and cells
→ Use React.memo to prevent unnecessary re-renders
Responsive Behavior
DESKTOP (>1280px):
- Full Grid View with all features
- Horizontal scroll if needed
- Frozen columns with shadow
TABLET (768px-1279px):
- Auto-switch to List View
- Show message: "Grid View requires desktop (1280px+ width)"
- Option: Rotate device to landscape for Grid View
MOBILE (<768px):
- List View only (Grid View not available)
- Crew cards with key info
Browser Compatibility
REQUIRED:
- Modern evergreen browsers (Chrome, Firefox, Safari, Edge)
- ES6+ support
- CSS Grid and Flexbox
- Sticky positioning
NOT SUPPORTED:
- IE 11 (no longer required in 2025)
Accessibility
CONSIDERATIONS:
- Keyboard navigation (Tab, Arrow keys, Enter)
- Focus indicators on cells (blue outline)
- ARIA labels for icons and status badges
- Screen reader support for grid structure
→ Use proper table semantics (<table>, <th>, <td>)
→ Announce row/column headers on focus
- High contrast mode support (system preference)
- Reduced motion support (disable animations if user prefers)
📚 Related Documentation
- View 1.7 Project Details - Full specification in main views doc
- Database Schema -
assignments,crew_profiles,travel_bookings,hotel_bookings - User Cases - UC-04 to UC-06 (crew assignments)
- Open Questions - Stakeholder discussion items
📝 Next Steps
Before Implementation:
- ✅ Review this specification with stakeholders
- ⏳ Answer open questions Q1-Q10
- ⏳ Prioritize column visibility (Q6)
- ⏳ Decide on accommodation tracking (Q1)
- ⏳ Decide on invoice reference storage (Q2)
- ⏳ Create visual mockups (Figma/Sketch) based on this spec
- ⏳ User testing with production managers (Excel vs Grid View)
During Implementation: 8. ⏳ Build Grid View component with frozen columns 9. ⏳ Implement inline editing for rates, teams, role notes 10. ⏳ Add daily work schedule grid with toggle functionality 11. ⏳ Build footer calculations and summary row 12. ⏳ Add export to Excel/PDF functionality 13. ⏳ Performance testing with 100+ crew members 14. ⏳ Accessibility audit (keyboard nav, screen readers)
Post-Launch: 15. ⏳ Gather feedback from production managers 16. ⏳ Iterate on column priorities based on usage analytics 17. ⏳ Add Timeline View mode (Gantt chart for crew schedules)
Document Version: 4.4.0 Last Updated: November 20, 2025 Status: ⚠️ Draft - Awaiting Stakeholder Review