Skip to main content

System Views & UI Specifications

Last Updated: November 19, 2025

📋 System Overview​

PBS (People Booking Solution) is a dual-portal system for managing freelance crew bookings:

  • Backend Portal (backend.pbs.com) - Admin interface for project managers
  • Crew Portal (crew.pbs.com) - Mobile-first interface for freelance crew

Key characteristics:

  • Clean, modern design with clear information hierarchy
  • Desktop-optimized backend, mobile-first crew portal
  • Consistent component library across both portals
  • Focus on speed and clarity
  • Multi-company crew support (crew can work for multiple companies)

📑 View Organization​

This document is organized in chronological workflow order to match how users actually work with the system:

Chapter 1: Admin Portal (Backend)​

Follows the natural workflow from company setup through daily operations.

1.1-1.2: Company Setup & Onboarding (multi-step wizards) 1.3-1.4: Login & Dashboard 1.5-1.7: Project Management (1.6 multi-step) 1.8-1.11: Crew Management 1.12-1.13: Staffing & Offers 1.14-1.17: Supporting Features (Equipment, Functions, Calendar, Reports) 1.18-1.19: Settings & User Management

Chapter 2: Crew Portal​

Crew-facing interface optimized for mobile.

2.1-2.2: Login & Registration (2.2 multi-step) 2.3-2.6: Core Crew Features

Chapter 3: Authentication & System​

Shared authentication flows and system administration.

3.1-3.4: Password Management & Verification 3.5-3.6: System Administration (Post-MVP)

MVP Implementation Priority​

✅ Must Have for MVP (25 views)​

  • All Chapter 1 core admin views (1.3-1.17)
  • All Chapter 2 crew portal views (2.1-2.6)
  • Chapter 3 authentication (3.1-3.4)

🟡 Nice to Have for MVP (3 views)​

  • Company Registration (1.1) (multi) - if time allows, otherwise manual
  • Initial Setup Wizard (1.2) (multi) - if time allows, otherwise configure via settings
  • User Management (1.19) - if easy, otherwise manual

⏭️ Post-MVP (2 views)​

  • Super Admin Dashboard (3.5)
  • Billing & Subscription (3.6)

Chapter 1: Admin Portal (Backend)

🏢 Onboarding & Setup​

1.1 Company Registration (Self-Service) (multi)​

URL: backend.pbs.com/register User: New customer (unauthenticated) Priority: 🟡 If Time Allows (otherwise manual by PBS admin)

Elements:

  • Progress Indicator

    • Step 1 of 3: Company Information
    • Step 2 of 3: Admin Account
    • Step 3 of 3: Verification

  • Step 1: Company Information

    • Company name input
    • Organization number input (VAT/business registration)
    • Company website input (URL, e.g., "https://example.com")
      • Used for logo scraping and company information
    • Base currency dropdown (SEK, EUR, USD, etc.)
    • Country dropdown
    • Industry dropdown (optional)
    • [Continue] button

  • Step 2: Admin Account

    • Your name input
    • Email input
    • Password input (with strength indicator)
    • Confirm password input
    • Terms of Service checkbox (required)
    • Privacy Policy checkbox (required)
    • [Create Account] button

  • Step 3: Email Verification

    • "Check your email" message
    • "We've sent a verification link to [email]"
    • [Resend Email] button
    • After verification → redirects to Initial Setup Wizard or Dashboard

Behavior:

  • Creates both company and first user record
  • Sends verification email
  • Sets user as ADMIN role
  • Cannot access system until email verified

Notes:

  • If MVP: First few customers can be manually created by PBS admin
  • Post-MVP: Self-service registration with email verification
  • May require payment method before activation (post-MVP)

1.2 Initial Setup Wizard (multi)​

URL: backend.pbs.com/setup User: Admin (first login after registration) Priority: 🟡 If Time Allows (otherwise skip, can configure later)

Layout:

  • Top navigation bar with user profile dropdown
  • Left sidebar with main navigation (minimal during setup)
  • Main content area with setup wizard

Elements:

  • Header

    • Logo (top left)
    • User avatar + name dropdown (top right)
    • Notifications bell icon (minimal during setup)

  • Sidebar Navigation (simplified during setup)

    • Dashboard (home icon)
    • Settings (setup active)

  • Main Content

  • Welcome Screen

    • "Welcome to PBS!" title
    • "Let's set up your account"
    • [Get Started] button or [Skip Setup] link

  • Step 1: Company Details

    • Upload company logo (optional)
    • Phone number
    • Address
    • Website
    • [Continue]

  • Step 2: Contract Template (Optional)

    • Rich text editor for general contract template
    • Placeholder merge fields shown
    • [Continue] or [Skip]

  • Step 3: Functions Catalog

    • "Import Global Functions?" Section

      • Expandable table showing available global functions:

        ☐Function NameCategoryAverage Daily Rate(~Hourly)
        ☑Camera OperatorCamera[5,500] SEK(688/hr)
        ☑Sound EngineerSound[4,500] SEK(563/hr)
        ☐Graphics OperatorGraphics[6,000] SEK(750/hr)
        ☑ProducerProduction[7,000] SEK(875/hr)

      • Function Properties Shown:

        • Checkbox: Select functions to import to company catalog
        • Function Name: Display name (from global_functions.name)
        • Category: Text grouping like "Camera", "Sound", "Production" (varchar field from global_functions.category)
        • Average Daily Rate: Editable company-specific rate (functions_catalog.default_fee_cents)
          • Shows suggested rate from global function as placeholder
          • Format: "5,500 SEK" (company base currency always used)
          • All function catalog rates use company base currency for consistent budgeting
        • Hourly Equivalent: Auto-calculated display (Daily Rate ÷ 8 hours)
          • Format: "(688/hr)" - read-only, updates as daily rate changes

      • Rate Calculation Logic:

        • Primary Input: Average daily rate (most common booking unit)
        • Auto-calculation: Hourly rate = Daily ÷ 8 hours (standard work day)
        • Live Update: Hourly equivalent updates as user types average daily rate
        • Validation: Must be positive number, max 999,999 per day

      • Table Controls:

        • "Select All" / "Select None" toggle buttons
        • Category filter: [All / Camera / Sound / Production / Graphics / Other]
        • Search box: Filter by function name (real-time)
        • Sort options: By name, category, or suggested rate

      • Actions Available:

        • [Import X Selected Functions] button (shows count, disabled if none selected)
        • [+ Create Custom Function] link (opens custom function modal)
        • Help text: "Set your company rates now or adjust them later in Settings → Functions"
        • Info note: "Rates shown are industry suggestions - customize to fit your market"

    • Custom Function Creation (Modal triggered by [+ Create Custom Function])

      • Modal Window: "Add Custom Function"

        • Function Name: Text input (required)
          • Placeholder: "e.g., Senior Camera Operator, Lead Sound Engineer"
          • Validation: 2-50 characters, unique within company
        • Category: Dropdown with create option (required)
          • Options: Camera, Sound, Production, Graphics, Other, [+ Create New Category]
          • If "Create New": Additional text input for category name
        • Description: Text area (optional)
          • Placeholder: "Brief description of role responsibilities..."
          • Max 200 characters
        • Average Daily Rate: Number input (required)
          • Company currency prefix shown (e.g., "SEK")
          • Format: "5,500" with live hourly calculation display "(688/hr)"
          • Always uses company base currency
        • Buttons: [Create Function] [Cancel]

      • Custom Function Validation:

        • Function name must be unique within company
        • Average daily rate must be positive (1-999,999)
        • Category required (existing or new)

    • Alternative Option

      • "Start with empty catalog" radio button
      • Help text: "You can add custom functions and import globals later via Company Settings"
      • Note: "Recommended if you have very specific custom roles"

    • Navigation:

      • [Continue] button (enabled regardless of choice)
      • Preview: "You'll have X functions in your catalog" (if importing)

  • Step 4: Equipment Inventory (Optional)

    • "Add Company Equipment" Section

      • Table for adding equipment items:

        Equipment NameDefault Daily Rate(~Hourly)Notes
        [OB-Van Alpha][8,000] SEK(1,000/hr)[Main production vehicle...]
        [Graphics Server 1][3,500] SEK(438/hr)[Real-time graphics...]

      • Equipment Properties:

        • Equipment Name: Text input (required)
          • Examples: "OB-Van Alpha", "Graphics Server 1", "Handheld Camera Rig"
          • Validation: 2-100 characters, unique within company
        • Default Daily Rate: Number input (required)
          • Company currency prefix shown (e.g., "SEK")
          • Format: "8,000" with live hourly calculation display "(1,000/hr)"
          • Always uses company base currency
        • Notes: Text area (optional)
          • Equipment specifications, capabilities, usage notes
          • Max 300 characters

      • Table Controls:

        • [+ Add Equipment] button (adds new row to table)
        • [Remove] button per row
        • Help text: "Add your main equipment items. You can add more later in Equipment Management"

    • Equipment Examples & Suggestions:

      • Common Equipment Types: "OB-Van", "Graphics Server", "Camera Equipment", "Audio Equipment", "Lighting Rig"
      • Rate Guidelines: "Set average daily rental rates for budgeting purposes"

    • Navigation:

      • [Continue] button (enabled regardless of equipment added)
      • [Skip - Add Later] link
      • Preview: "You'll have X equipment items in your inventory" (if any added)

  • Step 5: Invite Team (Optional)

    • Add team members form:
      • Name, email, role dropdown
      • [Add Another] button
    • [Send Invitations] or [Skip]

  • Completion

    • "You're all set!" message
    • [Go to Dashboard] button

Behavior:

  • Shows only once after first login
  • Can be skipped (accessed later via Settings)
  • Each step is optional
  • Saves progress between steps

Notes:

  • If MVP: Can skip entirely, admins configure via Settings
  • Post-MVP: Guided onboarding improves first-time experience
  • Reduces time-to-value for new customers

🔐 Authentication & Entry​

1.3 Admin Login​

URL: backend.pbs.com/login User: Admin (unauthenticated) Priority: ✅ MVP (Laravel Breeze standard)

Elements:

  • Logo (centered, top)
  • Login Card (centered)
    • "Sign in to PBS" title
    • Email input
    • Password input (with show/hide toggle)
    • "Remember me" checkbox
    • [Sign In] button (primary, full-width)
    • [Forgot password?] link (below button)
  • Footer Links
    • Terms of Service
    • Privacy Policy
    • Contact Support

Behavior:

  • Validates email format
  • Shows error messages inline
  • Redirects to dashboard after successful login
  • Implements rate limiting (Laravel standard)

Notes:

  • Uses Laravel Breeze/Fortify authentication
  • Session-based auth
  • CSRF protection

1.4 Dashboard (Home)​

URL: backend.pbs.com/dashboard User: Admin (Susanne, Ken, Jonas)

Layout:

  • Top navigation bar with user profile dropdown
  • Left sidebar with main navigation
  • Split main content: "What's happening" (left) + "Statistics & Activity" (right)

Elements:

  • Header

    • Logo (top left)
    • "Dashboard" title
    • User avatar + name dropdown (top right)
    • Notifications bell icon

  • Sidebar Navigation

    • Dashboard (home icon)
    • Projects (12) [with count badge]
    • Crew Pool
    • Equipment Pool
    • Calendar view
    • Reports
    • Settings

  • Main Content - Two Column Layout

    Left Column: "What's happening"

    • Project Action Cards (stacked vertically)
      • Shows projects that need attention/action
      • Each project card displays:
        • Project name (e.g., "Champions League Final 2025")
        • Action items with counts (e.g., "2 new job requests accepted", "1 offer needs review")
        • Priority indicators (urgent/normal)
        • Quick action buttons: [Review] [Manage]
      • Empty state: "All projects up to date ✅" when no actions needed

    Right Column: "Statistics & KPIs"

    • Statistics Cards (2x2 grid)

      • Confirmed Projects (number + trend)
      • Pending Offers (number + alert)
      • Available Crew (number)
      • This Month Budget (amount with currency)
      • Note: "Talk to stakeholders about relevant KPIs" for future expansion

    • Recent Activity Timeline

      • List of recent actions with timestamps
      • Icons for action types (offer sent, accepted, booking created, etc.)
      • User avatars (admin who performed action)
      • Communication log entries (emails sent, etc.)
      • Last 10 activities shown
      • [View All Activity] link at bottom

📁 Project Management​

1.5 Projects List​

URL: backend.pbs.com/projects User: Admin

Layout:

  • Top navigation bar with user profile dropdown
  • Left sidebar with main navigation
  • Main content area with projects table

Elements:

  • Header

    • Logo (top left)
    • User avatar + name dropdown (top right)
    • Notifications bell icon

  • Sidebar Navigation

    • Dashboard (home icon)
    • Projects (12) [with count badge] - ACTIVE
    • Crew Pool
    • Equipment Pool
    • Calendar view
    • Reports
    • Settings

  • Main Content

  • Header Bar

    • "Projects" title
    • Search box (with magnifying glass icon)
    • Filter dropdown: Status [All / Preliminary / Confirmed / Completed]
    • Sort dropdown: [Date / Name / Budget]
    • "+ New Project" button (primary, right-aligned)

  • Projects Table (card-style rows)

    • Each project card shows:
      • Project name (bold, large)
      • Project code (e.g., "ESC-2025-001")
      • Status badge (Preliminary/Confirmed/Completed)
      • Date range
      • Location + venue
      • Crew count (e.g., "12 crew members")
      • Equipment count (e.g., "3 equipment items")
      • Budget indicator (with currency)
      • Financial status: "Finalized" badge if locked
      • Quick actions: [View] [Edit] [Duplicate]

  • Pagination

    • Bottom center
    • "Showing 1-10 of 45 projects"
    • Previous / Next buttons

1.6 Create Project (multi)​

🎨 View Interactive Prototype - Open Create Project wizard to test the 3-step project creation flow with real-time budget calculations

Accessed via: "+ New Project" button from Projects List or Dashboard User: Admin

Layout:

  • Top navigation bar with user profile dropdown
  • Left sidebar with main navigation
  • Main content area with project creation wizard

Elements:

  • Header

    • Logo (top left)
    • User avatar + name dropdown (top right)
    • Notifications bell icon

  • Sidebar Navigation

    • Dashboard (home icon)
    • Projects (12) [with count badge] - ACTIVE
    • Crew Pool
    • Equipment Pool
    • Calendar view
    • Reports
    • Settings

  • Main Content

  • Multi-step wizard (3 steps)

Step 1: Basic Information

  • Project code (auto-generated from company settings)
  • Project name input
  • Client name input (optional)
  • Status selector: Preliminary / Confirmed / Completed
  • Date range picker (start/end dates)
  • Location fields:
    • City input
    • Country dropdown
    • Venue name input
    • Venue address input
  • Budget fields:
    • Amount input (total project budget)
    • Currency dropdown
  • Internal notes textarea
  • [Cancel] [Save Draft] [Next: Crew Roles →]

Step 2: Crew Roles

  • Layout: Two-column layout

    • Left: Form to add new role
    • Right: List of added roles + budget summary

  • Add Role Form (Left Column)

    • Function dropdown (from functions_catalog)
    • Quantity needed input (how many people for this role)
    • Work days / Travel days inputs
    • Target rates (work/travel) with currency
    • Hotel estimate inputs (v4.5):
      • Estimated nights input (optional)
      • Estimated rate per night input (optional)
      • Small note: "For budget planning only. Actual hotel costs tracked per person."
    • Requirements/notes textarea
    • [+ Add Role to Project] button

  • Added Roles List (Right Column)

    • Header: "Added Roles (X)"
    • Each role card shows:
      • Function name (bold)
      • Quantity, days, and rates summary
      • Hotel estimate (if provided): "X nights @ X SEK/night"
      • Cost breakdown:
        • Crew cost: X SEK
        • Hotel cost: X SEK (if provided)
        • Total: X SEK
      • [Remove ×] button
    • Scrollable if many roles
    • Empty state: "No roles added yet. Use the form on the left to add roles."

  • Crew Budget Summary (Right Column, Bottom)

    • Crew day rates: X SEK
    • Hotel costs: X SEK
    • Total crew budget: X SEK
    • Budget used vs remaining
    • Visual progress bar
    • Percentage of total budget

  • Actions

    • [← Back] [Save Draft] [Next: Equipment & Other Costs →]

Step 3: Equipment & Other Costs

  • Layout: Two-column layout

    • Left: Forms to add equipment and other costs
    • Right: Complete budget breakdown

  • Add Equipment Section (Left Column, Top)

    • Equipment dropdown (from company_equipment)
      • Shows: equipment name + default rate
    • Quantity needed input
    • Days needed input
    • Rate per day input (pre-filled from company_equipment.default_rate, editable)
    • Notes textarea (optional)
    • [+ Add Equipment] button

  • Add Other Costs Section (Left Column, Bottom)

    • Description input (free-text: e.g., "Rental: External crane", "Venue parking fees", "Catering")
    • Amount input
    • Currency dropdown (defaults to project currency)
    • Notes textarea (optional)
    • [+ Add Cost Item] button

  • Complete Budget Breakdown (Right Column)

    • Equipment List

      • Header: "Equipment (X items)"
      • Each equipment card shows:
        • Equipment name
        • Quantity × days @ rate
        • Total cost
        • [Remove ×] button
      • Empty state: "No equipment added yet."

    • Other Costs List

      • Header: "Other Costs (X items)"
      • Each cost card shows:
        • Description
        • Amount + currency
        • [Remove ×] button
      • Empty state: "No other costs added yet."

    • Complete Budget Summary

      • Crew day rates: X SEK
      • Hotel costs (estimated): X SEK
      • Equipment costs: X SEK
      • Other costs: X SEK
      • ─────────────────
      • Total project costs: X SEK
      • Budget remaining: X SEK
      • Visual progress bar (total vs budget)
      • Percentage indicator

  • Actions

    • [← Back] [Save Draft] [Create Project]

After Creation:

  • Success confirmation
  • Redirect to Project Details view

Notes:

  • Equipment comes from company_equipment table
  • Other costs are stored in project_budget_items table (free-text line items)
  • All costs contribute to total project budget tracking
  • Currency can be different for other costs (converted for display)

1.7 Project Details (multi)​

URL: backend.pbs.com/projects/{id} User: Admin

🎨 View Interactive Prototype - Open Grid View prototype in new tab to explore the interface

Layout:

  • Top navigation bar with user profile dropdown
  • Left sidebar with main navigation
  • Main content area with project details

Elements:

  • Header

    • Logo (top left)
    • User avatar + name dropdown (top right)
    • Notifications bell icon

  • Sidebar Navigation

    • Dashboard (home icon)
    • Projects (12) [with count badge] - ACTIVE
    • Crew Pool
    • Equipment Pool
    • Calendar view
    • Reports
    • Settings

  • Main Content

  • Breadcrumb Navigation

    • Projects > Champions League Final 2025

  • Project Header Card

    • Project name (h1)
    • Project code badge
    • Status badge
    • Edit icon (top right)
    • Key info in grid:
      • Date range (with note: "Bookings can be outside these dates")
      • Location + venue + address
      • Client
      • Budget (planned vs actual) with currency

  • KPIs & Dashboard Metrics ⚠️ NEEDS STAKEHOLDER INPUT

    • Purpose: At-a-glance project health and progress indicators
    • Placement: Below project header, above tabs (visible in Overview tab)
    • Status: Placeholder - specific KPIs to be defined with stakeholders

    Suggested Metrics (to be confirmed):

    • Crew Status:
      • Total crew needed vs confirmed
      • Pending offers count
      • Staffing completion %
    • Budget Health:
      • Budget utilization % (actual vs planned)
      • Remaining budget indicator
      • Cost per day average
    • Admin Tasks Progress:
      • Travel bookings completion %
      • Hotel bookings completion %
      • Roadbooks sent %
      • Invoices handled % (for freelancers)
    • Timeline Status:
      • Days until project start
      • Critical tasks pending
      • Document completion %
    • Financial Summary:
      • Total crew costs (planned)
      • Total crew costs (actual)
      • Equipment costs
      • Other costs (from budget items)

    Visual Design (to be decided):

    • Option A: Compact metrics cards (4-6 key metrics)
    • Option B: Detailed dashboard with charts
    • Option C: Collapsible KPI section

    Questions for Stakeholders:

    • Which metrics are most important for daily monitoring?
    • Should KPIs show trends (comparison to previous projects)?
    • Real-time updates or refreshed on page load?
    • Different KPIs for different project statuses (planning vs confirmed)?
    • Role-based KPIs (PMs see different metrics than Finance)?

    Reference: See Open Questions for related stakeholder discussion items

  • Tabs Navigation

    • Overview (active)
    • Crew Assignments
    • Equipment
    • Budget
    • Documents
    • Communication Log
    • Timeline

  • Overview Tab Content

    • Description section (rich text)
    • Key contacts (cards with avatars)
    • Quick stats (assignments, crew count, equipment count, completion %)
    • Contract template preview (editable per project)

  • Crew Assignments Tab

    • "+ Add Crew" button (opens crew selection modal)

    • [Export to Excel] button (exports current view with all data)

    • View Mode Toggle (Top right)

      • ○ List View (default, detailed cards)
      • ● Grid View (spreadsheet-style, high density) [NEW - v4.4]
      • ○ Timeline View (Gantt chart - Post-MVP)

    • Functions Required Section (planning view - visible in List View only)

      • Table showing required roles:
        • Function name
        • Quantity needed
        • Work days / Travel days
        • Target rate (from function default)
        • Filled / Total
        • Actions: [Add Crew]

    • GRID VIEW MODE [NEW - v4.4 - Production Manager Overview]

      • Purpose: Spreadsheet-like interface for production managers who need dense, at-a-glance overview of entire crew

      • Inspiration: Excel-based crew planning sheets currently used in production

      • Key Benefits:

        • See 20-30 crew members at once (vs 5-10 in List View)
        • Quick visual scanning of work schedules
        • Instant cost overview (offered vs actual)
        • Fast inline editing for common tasks

      • Layout: Fixed header + scrollable body (Excel-like)

      • Header Controls:

        • Quick filters: [All Status ▼] [All Functions ▼] [All Teams ▼] [☐ Show only incomplete tasks]
        • Date range display: "Dec 3-10, 2023 (8 days)"
        • Crew count: "30 crew members"
        • Quick actions: [Add Multiple Crew] [Bulk Edit] [Export]

      • Column Groups (organized left-to-right):

        A. CREW INFO (frozen columns, always visible)

        • # Row number (1-30)
        • ★ Favorite star (click to toggle)
        • Name Avatar + Full name (clickable → opens detail modal)
        • Function Role/function badge
        • Team Team label (e.g., "Camera A") - inline editable
        • Role Note Quick descriptor (e.g., "Main", "Backup") - inline editable
        • Status Badge - color-coded assignment status (updated v4.6):
          • Unassigned (⚠️ Yellow) - No person assigned to function yet
          • Selected (👤 Light Blue) - PM has chosen person, drafting offer (UI-only state)
          • Pending (⏳ Blue) - Offer sent, awaiting crew response
          • Negotiating (💬 Purple) - Crew wants to discuss rates
          • Declined (❌ Red) - Crew rejected offer, stays visible until PM assigns another person
          • Confirmed (✅ Green) - Assignment confirmed, crew officially booked
          • Active (🎬 Dark Green) - Project underway, crew currently working
          • Completed (✔️ Gray) - Assignment finished
          • Cancelled (🚫 Red strikethrough) - Assignment cancelled

        B. LOGISTICS (accommodation & travel)

        • Accom. Accommodation assignment
          • Shows: "Fjällterassen 521" (short code)
          • Click to expand → full details + roommates
          • Visual indicator if sharing (👥 icon + count)
          • Empty state: "—" (click to assign)
        • Travel Travel method icon + summary
          • Icons: ✈️ Flight, 🚗 Car, 🚂 Train, 🚌 Bus
          • Shows: "Own car" or "Flight SK1234" (short summary)
          • Click → travel details modal (from/to, dates, booking ref)
          • Color: 🟢 Booked / 🟡 Planned / ⚪ Not arranged

        C. WORK SCHEDULE (daily grid)

        • Date columns (one per project day, e.g., Dec 3-10)
          • Header shows: "Mon Dec 4" (compact date format)
          • Cell states:
            • ■ Work day (solid fill, primary color)
            • □ Travel day (outlined, secondary color)
            • No work (empty)
            • ? TBD (dashed outline)
          • Visual grouping: Weekend dates have subtle background color
          • Click cell → toggle work/travel/empty (quick inline edit)
          • Hover → tooltip shows: "Work day (1,000 SEK)"
        • Summary column after dates:
          • W Work days count (e.g., "6")
          • T Travel days count (e.g., "2")
          • Total Total days (e.g., "8")

        D. FINANCIAL (costs overview)

        • Day Rate Work day rate (e.g., "1,000")
          • Currency shown in header (e.g., "Day Rate (SEK)")
          • Inline editable
          • Visual: Bold if non-standard rate
        • Travel Rate Travel day rate (e.g., "500")
          • Inline editable
          • Often same as day rate or 50% discount
        • Crew Total Total crew cost (work + travel days)
          • Formula: (work_days × day_rate) + (travel_days × travel_rate)
          • Shows: "6,000" (formatted with thousand separators)
          • Color: 🟢 Within budget / 🟡 Over budget
        • Hotel Hotel cost summary
          • Shows: "4,500" (total hotel cost)
          • Hover → tooltip: "5 nights × 900/night"
          • Click → hotel booking details modal
          • Empty state: "—"
        • Travel Cost Travel booking cost
          • Shows: "3,200" (total travel expenses)
          • Hover → tooltip: "Flight ARN-IDB 3,200"
          • Click → travel cost details modal
          • Empty state: "—"
        • Other Other expenses (per-crew adjustments, bonuses)
          • Shows: "+500" or "—"
          • Click → adjustment details modal
        • TOTAL Grand total per crew member
          • Formula: crew_total + hotel + travel + other
          • Bold and highlighted (key metric)
          • Shows: "13,700"
          • Visual: Background color intensity by amount

        E. ADMIN TASKS (workflow checkboxes)

        • ✓ Travel booked (checkbox)
        • ✓ Hotel booked (checkbox)
        • ✓ Roadbook sent (checkbox)
        • ✓ Invoice handled (checkbox) - Only visible for freelancers
          • Checkboxes are manual toggles (click to check/uncheck)
          • Visual: ✓ = done (green), ☐ = pending (gray)
          • Quick visual scan to see what's left to do
          • Column can be hidden via view settings

        F. ACTUAL COSTS (post-production - initially hidden)

        • Act. Days Actual work days (vs planned)
          • Shows: "6" or "5 ⚠️" (if different from planned)
          • Inline editable after project completion
        • Act. Rate Actual rate charged (if adjusted)
          • Shows adjusted rate or "—" (if same as planned)
        • Act. Total Actual invoiced amount
          • Shows: "5,500" (from invoice)
          • Bold if different from planned
          • Input field for manual entry (+ attach invoice number)
        • Variance Difference (actual - planned)
          • Shows: "+500" (green) or "-200" (red)
          • Percentage: "+8.3%"
        • Invoice # Invoice reference (e.g., "8949")
          • Links to external system (Fortnox)
          • Click → opens invoice (external link)

      • Row Interactions:

        • Click row → opens detailed crew assignment modal (full edit mode)
        • Hover row → highlights entire row + shows quick action buttons
        • Right-click row → context menu (Edit, Duplicate, Remove, View Profile)
        • Double-click cell → inline edit (for editable fields)
        • Drag row → reorder crew list (manual sorting)

      • Row Grouping (optional, togglable):

        • Group by Function: "Camera (8)", "Sound (3)", "Graphics (2)"
        • Group by Team: "Camera A (4)", "Camera B (4)"
        • Group by Status: "Confirmed (25)", "Pending (3)", "Declined (2)"
        • Collapsible groups with subtotals
        • Note (v4.6): Declined offers remain visible in grid until PM creates new offer for different person

      • Footer Row (sticky, always visible):

        • Summary calculations across all visible crew:
          • Total crew members: "30"
          • Total work days: "156"
          • Total travel days: "42"
          • Total crew costs: "130,000"
          • Total hotel costs: "107,100"
          • Total travel costs: "89,600"
          • GRAND TOTAL: "326,700"
        • Budget comparison:
          • "Offered: 343,035 | Actual: 379,243 | Variance: +36,208 (+10.6%)"
        • Toggle: [Show Offered] [Show Actual] [Show Both]

      • Column Visibility Controls:

        • Click [⚙️ Columns] button → checklist modal
        • Show/hide column groups:
          • ☑ Crew Info (always visible)
          • ☑ Logistics
          • ☑ Work Schedule
          • ☑ Financial (Offered)
          • ☐ Financial (Actual) - hidden by default, show after project completion
          • ☑ Admin Tasks
        • Save as personal view preference

      • Keyboard Navigation (Excel-like):

        • Tab / Shift+Tab → navigate cells
        • Enter → edit cell / save edit
        • Esc → cancel edit
        • Ctrl+C / Ctrl+V → copy/paste (within grid)
        • Ctrl+F → find crew member
        • ←→↑↓ → arrow key navigation

      • Visual Design:

        • Density: Compact row height (32px) to fit more on screen
        • Zebra striping: Alternating row colors for readability
        • Cell padding: Minimal (4px) for information density
        • Typography: Monospace for numbers (alignment), sans-serif for text
        • Colors:
          • Work days: Primary blue (#2563EB)
          • Travel days: Secondary gray (#64748B)
          • Confirmed status: Green (#10B981)
          • Pending status: Yellow (#F59E0B)
          • Over budget: Red tint (#FEE2E2)
        • Borders: Subtle grid lines (1px #E5E7EB)
        • Frozen columns: Subtle shadow when scrolling horizontally

      • Responsive Behavior:

        • Desktop only (1280px+ width required)
        • Horizontal scroll for dates if many days (>14)
        • Vertical scroll for crew if many people (>20)
        • Mobile: Falls back to List View (Grid View not available)

      • Performance Considerations:

        • Virtualized scrolling for 100+ crew members
        • Lazy load actual costs (only if toggled visible)
        • Debounced inline editing (500ms delay before save)
        • Client-side calculations for totals (no API calls)

      • Export Options:

        • [Export to Excel] → .xlsx with current filters/columns
        • [Export to PDF] → printable crew roster
        • [Copy Grid] → copies to clipboard (paste into Excel/Sheets)
        • Includes all visible columns and current sort/filter state

    • LIST VIEW MODE (default - detailed cards)

      • Assigned Crew Section (Card-based layout)
        • Card layout with expandable details:
          • Crew member (avatar + name + favorite star)
          • Function/Role
          • Role Note (e.g., "Main", "Backup") - editable inline
          • Team Label (e.g., "Camera A") - editable inline
          • Status (badge: Confirmed/Contract Sent/etc.)
          • Dates (start - end, can be outside project dates)
          • Rate (work day + travel day) with currency
          • Admin Task Checkboxes [v4.1]:
            • ☐ Travel (not_booked/booked)
            • ☐ Hotel (not_booked/booked)
            • ☐ Roadbook (not_sent/sent)
            • ☐ Invoice (not_handled/handled) - Only for freelancers
            • All checkboxes are manual (click to toggle)
            • Visual status: Empty box = not done, Checked box = done
          • Actions [View] [Edit] [Remove]
        • Filter by: Function, Team, Status, Tasks (Show incomplete tasks)
        • Sort by: Name, Function, Date, Rate
        • Pros: More details visible per crew, easier to read on smaller screens
        • Cons: Fewer crew members visible at once (5-10 vs 20-30 in Grid View)

    • Availability Warnings (both views)

      • Alert banner if staff have conflicts
      • "Johan is booked on another project Aug 12-15"
      • Soft warning (can still book)

    • Travel & Hotel Management [Frontend Feature - v4.1]

      • When adding travel/hotel bookings for crew:
        • "Copy from Another Crew" button - Pre-fills form with another crew member's travel details
        • "Create Return Trip" button - Auto-reverses route and dates for return journey
        • Both are pure frontend helpers (no schema changes)
        • Saves time when multiple crew travel together or need return trips

    • Questions for Stakeholders [Grid View - v4.4]:

      • ❓ Is the daily work schedule grid (■■■■■) useful, or do you prefer just work/travel day counts?
      • ❓ Should accommodation show roommate names or just room code?
      • ❓ Priority for "Actual Costs" columns: Show by default or hide until project completes?
      • ❓ Which columns are MUST-HAVE vs NICE-TO-HAVE for daily use?
      • ❓ Do you need to track individual meal per diems in this grid, or is that separate?
      • ❓ Should we show a "Days until project starts" countdown in the header?
      • ❓ Do you want color-coding by crew availability/conflicts (e.g., red if double-booked)?
      • ❓ Export format preference: Excel with formulas, or flat values only?

  • Equipment Tab (NEW in v4.0)

    • "+ Add Equipment" button
    • Company Equipment Section
      • Table showing booked equipment:
        • Equipment name
        • Dates (start - end)
        • Rate with currency (adjustable from default)
        • Actions [Edit] [Remove]
      • Availability warnings if double-booked

  • Budget Tab

    • Crew Costs Section

      • Summary by function
      • Planned vs actual (if project completed)
      • Currency conversion to company base currency

    • Equipment Costs Section (NEW in v4.0)

      • List of company equipment bookings
      • Total cost

    • Generic Budget Items Section (NEW in v4.0)

      • "+ Add Item" button
      • Table:
        • Description (free-text, e.g., "Rental: External crane")
        • Amount with currency
        • Actions [Edit] [Remove]
      • Examples shown: "Venue parking fees", "Catering", "External rentals"

    • Total Budget Summary

      • Crew costs
      • Equipment costs
      • Generic items
      • Total (with currency conversion if needed)
      • Budget vs actual (if completed)

  • Documents Tab

    • Upload area (drag & drop)
    • File list with:
      • Icon based on type
      • Filename
      • Uploaded by
      • Date
      • Access level indicator
      • Download/Delete actions
    • File categories shown: Contracts, Road books, Other

  • Communication Log Tab (NEW in v4.0)

    • Timeline view of all communications
    • Filters: Type (all/offers/confirmations/contracts/reminders)
    • Each log entry shows:
      • Timestamp
      • Type badge (Offer / Confirmation / Contract / etc.)
      • Recipient (crew member name + email)
      • Subject
      • Preview of message content
      • Status badge (Sent / Delivered / Opened / Responded / Failed)
      • [View Full Message] button
    • Search box for finding specific communications

  • Timeline Tab

    • Visual timeline of project milestones
    • Status changes
    • Assignment confirmations
    • Key dates

  • Action Buttons (sticky footer)

    • [Generate Report]
    • [Export to PDF]
    • [Finalize Financials] (if status=completed)
    • [Archive Project]

👥 Crew Management​

1.8 Crew Pool​

URL: backend.pbs.com/crew User: Admin

Layout:

  • Top navigation bar with user profile dropdown
  • Left sidebar with main navigation
  • Main content area with crew pool

Elements:

  • Header

    • Logo (top left)
    • User avatar + name dropdown (top right)
    • Notifications bell icon

  • Sidebar Navigation

    • Dashboard (home icon)
    • Projects (12) [with count badge]
    • Crew Pool - ACTIVE
    • Equipment Pool
    • Calendar view
    • Reports
    • Settings

  • Main Content

  • Header Bar

    • "Crew Pool" title
    • Search box (search by name, email, capabilities)
    • Filter dropdowns:
      • Employment: [All / Staff / Freelance]
      • Functions: [All / Camera / Sound / Production / etc.]
      • Availability: [All / Available / Busy]
      • Favorites: [All / Favorites Only] [NEW in v4.1]
    • "+ Add Crew" button (primary, right-aligned)
    • "Invite Crew" button (secondary)

  • Crew Cards Grid (or table view toggle)

    • Each crew card shows:
      • Favorite Star Icon (top-right corner) [NEW in v4.1]
        • Filled gold star = favorited
        • Outline star = not favorited
        • Click to toggle on/off
        • Company-specific (each company has own favorites)
      • Profile photo
      • Name (bold)
      • Employment badge: "Staff" (if employer_id set) or "Freelance"
      • Primary function(s)
      • Capabilities snippet (e.g., "Handheld, Steadicam...")
      • Availability status indicator
      • Contact info (email, phone)
      • Private notes indicator (lock icon, tooltip: "Company-specific notes")
      • Quick actions: [View Profile] [Send Offer] [View History]

  • Multi-Company Indicator (NEW in v4.0)

    • If crew works for multiple companies, NO indication shown
    • Complete data isolation (can't see other company relationships)

  • Employment Status (NEW in v4.0)

    • Badge showing "Staff at [Company Name]" or "Freelancer"
    • Only employer company sees availability tracking

  • Pagination

    • Bottom center
    • "Showing 1-20 of 150 crew members"

1.9 Add/Invite Crew (NEW in v4.0)​

URL: backend.pbs.com/crew/add User: Admin

Layout:

  • Top navigation bar with user profile dropdown
  • Left sidebar with main navigation
  • Main content area with add crew options

Elements:

  • Header

    • Logo (top left)
    • User avatar + name dropdown (top right)
    • Notifications bell icon

  • Sidebar Navigation

    • Dashboard (home icon)
    • Projects (12) [with count badge]
    • Crew Pool - ACTIVE
    • Equipment Pool
    • Calendar view
    • Reports
    • Settings

  • Main Content

  • Two Options Presented:

Option A: Add Crew Directly (admin creates profile)

  • Form with all crew profile fields
  • Email field (important for future account claiming)
  • "Account Status" note: "Crew member can claim this profile later by registering with this email"
  • Company private notes field (separate, marked as private)
  • Save button creates crew_profile without account (claimed_by_user_id = null)
  • Crew can be booked immediately

Option B: Send Invitation (invite crew to register)

  • Simple form:
    • Email address
    • Auto-approve toggle (if enabled, profile created immediately after registration)
    • Personal message (optional)
  • "Send Invitation" button
  • Email sent with unique token link to crew.pbs.com/register/{token}
  • Workflow:
    1. Crew receives email
    2. Clicks link, fills registration form
    3. If auto-approve: Profile created immediately
    4. If manual: Admin reviews submission

Multi-Company Handling:

  • If email already exists in system (crew works for another company):
    • Message: "This email is already in use. Sending invitation will link existing crew account to your company."
    • Crew can manage multiple company relationships with one account

1.10 Crew Profile (View/Edit) (multi)​

URL: backend.pbs.com/crew/{id} User: Admin

Layout:

  • Top navigation bar with user profile dropdown
  • Left sidebar with main navigation
  • Main content area with crew profile details

Elements:

  • Header

    • Logo (top left)
    • User avatar + name dropdown (top right)
    • Notifications bell icon

  • Sidebar Navigation

    • Dashboard (home icon)
    • Projects (12) [with count badge]
    • Crew Pool - ACTIVE
    • Equipment Pool
    • Calendar view
    • Reports
    • Settings

  • Main Content

  • Breadcrumb Navigation

    • Crew Pool > Lisa Andersson

  • Profile Header Card

    • Favorite Star Icon (top-right, next to Edit icon) [NEW in v4.1]
      • Click to toggle favorite status
      • Shows across all views where this crew appears
    • Profile photo (large, left)
    • Name (h1)
    • Employment Status Badge: "Staff" or "Freelance" (NEW in v4.0)
    • If staff: "Employed by [Company Name]"
    • Account Status Badge: "Registered" or "Not Registered" (NEW in v4.0)
    • Contact info (email, phone)
    • Edit icon (top right)

  • Tabs Navigation

    • Profile Info
    • Capabilities & Functions
    • Company Notes (Private)
    • Assignment History
    • Availability (only if staff)
    • Documents

  • Profile Info Tab

    • Basic Information section:
      • First name / Last name
      • Email (used for account claiming)
      • Phone
      • Home base city
    • Address & Identity section:
      • Full address
      • Personal ID number
      • Nationality
      • Passport number
    • Emergency Contact section:
      • Name
      • Phone
      • Relation
    • Contractor Info section (if applicable):
      • Company/VAT number
      • Invoicing email
      • Invoicing address
    • Preferences section (JSON data):
      • Languages (display as tags)
      • Food preferences
      • Clothing sizes

  • Capabilities & Functions Tab (NEW in v4.0)

    • Crew Capabilities Section (public, crew editable)

      • Rich text area showing crew's self-described capabilities
      • Example: "Handheld, Steadicam, Sony cameras, experienced with live sports"
      • Editable by admin or crew (when registered)
      • Help text: "This information is visible to the crew member"

    • Functions/Roles Section

      • List of functions this crew can perform
      • Each with seniority level (Junior/Mid/Senior/Expert)
      • Default fee from function catalog shown
      • [Add Function] button

  • Company Notes Tab (Private) (NEW in v4.0)

    • Warning banner: "⚠️ Private notes - NOT visible to crew member"
    • GDPR Notice: "These notes are company-specific and confidential"
    • Rich text editor for private notes
    • Example placeholder: "Work preferences, health considerations, scheduling notes..."
    • Example: "Has back problems, prefers morning shifts, needs sugar to work"
    • Save button
    • Last updated timestamp + user

  • Assignment History Tab

    • Table of past assignments:
      • Project name
      • Function
      • Dates
      • Status
      • Fee earned (with currency)
      • [View Details]
    • Summary statistics:
      • Total projects worked
      • Total earnings (in company base currency)
      • Most common role
      • Average rating (if implemented)

  • Availability Tab (only shown if crew is staff)

    • Employment Note: "Availability tracking available for staff members only"
    • If freelancer: Message "Freelancers manage their own availability"
    • If staff:
      • Calendar view showing blocked dates
      • List of unavailable periods:
        • Date range
        • Reason/notes
        • [Edit] [Remove]
      • "+ Add Unavailable Period" button

  • Documents Tab

    • Upload area
    • File list:
      • Photo (required)
      • Passport
      • ID card
      • Certifications
      • Other
    • Access control note: "These files are only visible to crew member + company admins"

  • Action Buttons (sticky footer)

    • [Send Offer]
    • [View Communication History]
    • [Delete Crew Member] (soft delete)

1.11 Crew Capabilities Management​

This is handled within the Crew Profile view (1.10), Capabilities & Functions Tab

📋 Staffing & Offers​

1.12 Send Assignment Offer​

URL: backend.pbs.com/projects/{project_id}/offers/create User: Admin

Layout:

  • Top navigation bar with user profile dropdown
  • Left sidebar with main navigation
  • Main content area with offer creation form

Elements:

  • Header

    • Logo (top left)
    • User avatar + name dropdown (top right)
    • Notifications bell icon

  • Sidebar Navigation

    • Dashboard (home icon)
    • Projects (12) [with count badge] - ACTIVE
    • Crew Pool
    • Equipment Pool
    • Calendar view
    • Reports
    • Settings

  • Main Content

  • Page Header

    • "Send Assignment Offer" title
    • Project name subtitle
    • Cancel (X) icon (top right)

  • Crew Selection

    • Search box (autocomplete)
    • Dropdown showing crew matching search:
      • Photo + name
      • Functions they can perform
      • Capabilities snippet
      • Availability indicator
      • Employment status (Staff/Freelance)
      • Conflict warning if dates overlap

  • Assignment Details Section

    • Function dropdown (from functions_catalog)
    • Role Note field (NEW in v4.0):
      • Free-text input
      • Placeholder: "e.g., Main, Backup, B-camera"
      • Help text: "Describe this specific booking"
    • Team Label field (NEW in v4.0):
      • Free-text input
      • Placeholder: "e.g., Camera A, Audio Main"
      • Help text: "For visual organization"
    • Work days input
    • Travel days input
    • Date range picker (can be outside project dates)
    • Departure city input

  • Rate Section

    • Work day rate input (with currency selector)
    • Travel day rate input (with currency selector)
    • Default rate from function shown as suggestion
    • Total calculation display
    • Currency selector (multi-currency support)

  • Message Section

    • Personal message text area
    • Predefined template loaded (editable)
    • Merge fields available: {crew_name}, {project_name}, {dates}, etc.

  • Booking Type Selection (NEW in v4.0)

    • Radio buttons:
      • Send Offer (default) - Standard offer/negotiation flow
      • Book Directly - Immediate assignment (for staff, self-assignment)
    • Help text explaining difference

  • Action Buttons

    • [Save as Draft]
    • [Send Offer] or [Create Booking] (depending on type selected)
    • [Cancel]

  • Preview Panel (right side)

    • Shows how offer email will look
    • All details formatted nicely
    • Updates in real-time as you type

1.13 Offer Management​

URL: backend.pbs.com/offers User: Admin

Layout:

  • Top navigation bar with user profile dropdown
  • Left sidebar with main navigation
  • Main content area with offers list

Elements:

  • Header

    • Logo (top left)
    • User avatar + name dropdown (top right)
    • Notifications bell icon

  • Sidebar Navigation

    • Dashboard (home icon)
    • Projects (12) [with count badge]
    • Crew Pool
    • Equipment Pool
    • Calendar view
    • Reports
    • Settings

  • Main Content

  • Header Bar

    • "Offers" title
    • Filter dropdowns:
      • Status: [All / Pending / Accepted / Declined / Negotiating / Converted]
      • Project: [All Projects] dropdown
      • Date range picker
    • Search box (crew name, project)

  • Offers Table

    • Columns:

      • Crew member (avatar + name)
      • Employment status badge (Staff/Freelance)
      • Project name
      • Function
      • Dates
      • Rate (work + travel) with currency
      • Status badge
      • Sent date
      • Expires date (if set)
      • Communication status (Sent/Opened/Responded)
      • Actions [View] [Edit] [Withdraw]

    • Row highlighting:

      • Green background: Accepted (waiting for confirmation)
      • Yellow background: Negotiating
      • Red background: Declined
      • Gray background: Expired (can still respond)

  • Bulk Actions

    • Select multiple offers
    • [Send Reminders]
    • [Withdraw Selected]

  • Conflict Warnings

    • Alert icons for crew with overlapping bookings
    • Tooltip shows conflict details

🛠️ Supporting Features​

1.14 Equipment Management (NEW in v4.0)​

URL: backend.pbs.com/equipment User: Admin

Layout:

  • Top navigation bar with user profile dropdown
  • Left sidebar with main navigation
  • Main content area with equipment inventory

Elements:

  • Header

    • Logo (top left)
    • User avatar + name dropdown (top right)
    • Notifications bell icon

  • Sidebar Navigation

    • Dashboard (home icon)
    • Projects (12) [with count badge]
    • Crew Pool
    • Equipment Pool - ACTIVE
    • Calendar view
    • Reports
    • Settings

  • Main Content

  • Header Bar

    • "Equipment Inventory" title
    • Search box (equipment name)
    • Filter dropdown: Category (if implemented in future)
    • "+ Add Equipment" button (primary, right-aligned)

  • Equipment Cards Grid (or table view toggle)

    • Each equipment card shows:
      • Equipment name (bold, e.g., "OB-Van Alpha")
      • Default daily rate with currency
      • Notes preview
      • Current status: "Available" or "Booked (Project X, Aug 12-15)"
      • Upcoming bookings count
      • Quick actions: [View] [Edit] [Delete] [Book]

  • Add/Edit Equipment Modal

    • Equipment name input
    • Default daily rate input (with currency selector)
    • Notes field (rich text):
      • Equipment specifications
      • Maintenance notes
      • Usage instructions
    • [Save] [Cancel] buttons

  • Equipment Detail View (click on card)

    • Equipment info
    • Booking calendar showing availability
    • Upcoming bookings table:
      • Project name
      • Dates
      • Rate (adjustable from default)
      • [Edit Booking] [Remove]
    • [Book for Project] button

  • Availability Conflicts

    • Visual calendar showing booked periods
    • Warning when attempting to double-book
    • "OB-Van Alpha is already booked Aug 12-15 for Project X"

1.15 Global Functions Management (NEW in v4.0)​

URL: backend.pbs.com/settings/functions User: Admin

Layout:

  • Top navigation bar with user profile dropdown
  • Left sidebar with main navigation
  • Main content area with functions management

Elements:

  • Header

    • Logo (top left)
    • User avatar + name dropdown (top right)
    • Notifications bell icon

  • Sidebar Navigation

    • Dashboard (home icon)
    • Projects (12) [with count badge]
    • Crew Pool
    • Equipment Pool
    • Calendar view
    • Reports
    • Settings - ACTIVE

  • Main Content

  • Header Bar

    • "Functions Catalog" title
    • Search box
    • Filter: [All / Global / Custom]
    • "+ Add Custom Function" button

  • Functions Table

    • Columns:
      • Function name
      • Category (Camera, Sound, Production, etc.)
      • Source badge: "Global" or "Custom"
      • Default fee (company-specific, editable)
      • Currency
      • Used in X projects
      • Actions [Edit Fee] [View] [Delete (custom only)]

  • Global Functions Section

    • List of system-wide functions
    • Company can set own default fees
    • Cannot delete or rename (managed by system)
    • Examples: Camera Operator, Sound Engineer, Producer, etc.

  • Custom Functions Section

    • Company-created functions
    • Full edit capability
    • Can be deleted if not in use

  • Add/Edit Function Modal

    • Function name input
    • Category dropdown (or free-text)
    • Description text area
    • Default fee input (company-specific)
    • Currency selector
    • [Save] [Cancel] buttons

  • Usage Information

    • Shows which projects use each function
    • Prevents deletion if in use

1.16 Calendar View​

URL: backend.pbs.com/calendar User: Admin

Layout:

  • Top navigation bar with user profile dropdown
  • Left sidebar with main navigation
  • Main content area with calendar interface

Elements:

  • Header

    • Logo (top left)
    • User avatar + name dropdown (top right)
    • Notifications bell icon

  • Sidebar Navigation

    • Dashboard (home icon)
    • Projects (12) [with count badge]
    • Crew Pool
    • Equipment Pool
    • Calendar view - ACTIVE
    • Reports
    • Settings

  • Main Content

  • Header Bar

    • "Calendar" title
    • View toggle: [Month / Week / Day]
    • Filter dropdowns:
      • Show: [All / Crew / Equipment / Both]
      • Projects: [All Projects] multi-select
      • Functions: [All Functions] multi-select
    • Today button

  • Calendar Grid

    • Month view:

      • Each day shows count of assignments/bookings
      • Color coding by project
      • Click day to see details

    • Week/Day view:

      • Timeline showing assignments
      • Crew assignments and equipment bookings
      • Visual conflicts highlighted
      • Drag to adjust dates (with confirmation)

  • Sidebar (right)

    • Selected date's assignments
    • List view with:
      • Project name
      • Crew member or equipment
      • Function/role
      • Status
      • [View Details] link

  • Availability Indicators (NEW in v4.0)

    • Staff unavailability shown (red blocks)
    • Freelancer bookings shown (no unavailability blocks)
    • Equipment bookings shown
    • Conflict warnings displayed

1.17 Reports​

URL: backend.pbs.com/reports User: Admin

Elements:

  • Header Bar

    • "Reports" title
    • Date range picker (global filter)
    • Project filter dropdown

  • Report Types (cards)

    • Project Crew Report

      • Description: "All assignments with names, roles, dates"
      • Export: PDF, Excel, CSV
      • [Generate] button

    • Budget Report

      • Description: "Planned vs actual costs"
      • Currency: Company base currency
      • Export: PDF, Excel
      • [Generate] button

    • Economic Report (NEW in v4.0)

      • Description: "Full breakdown by function, person, equipment, profit margins"
      • Shows:
        • Crew costs by function
        • Equipment costs
        • Generic budget items
        • Budget vs actual
        • Currency conversions
        • Profit margin
      • Export: PDF, Excel
      • [Generate] button

    • Meal List Report

      • Description: "Food preferences for catering"
      • Export: PDF, Excel
      • [Generate] button

    • Clothing Sizes Report

      • Description: "For uniform ordering"
      • Export: PDF, Excel
      • [Generate] button

    • Hotel Bookings Report

      • Description: "Accommodation summary"
      • Export: PDF, Excel
      • [Generate] button

    • Communication Report (NEW in v4.0)

      • Description: "Email/request history and delivery status"
      • Export: PDF, Excel
      • [Generate] button

  • Generated Reports Section

    • Recent reports table:
      • Report type
      • Generated by
      • Date
      • Filters applied
      • [Download] [Regenerate] [Delete]

  • Custom Report Builder (future enhancement)

    • Drag-and-drop fields
    • Column selection
    • Filter builder

⚙️ Settings & Administration​

1.18 Company Settings​

URL: backend.pbs.com/settings User: Admin (primarily Jonas)

Elements:

  • Sidebar Navigation (settings sections)

    • Company Profile
    • Contracts & Templates (NEW in v4.0)
    • Currency & Exchange Rates (NEW in v4.0)
    • Functions Catalog
    • Branding
    • Users & Permissions
    • Integrations
    • Notifications

  • Company Profile Tab

    • Company name input
    • Organization number input
    • Company website input (URL)
      • Note: "Used for logo scraping and company information"
    • Logo upload (or auto-fetched from website)
    • Contact information
    • Address details
    • Base currency selector (NEW in v4.0)
    • Project ID settings (prefix, auto-numbering)

  • Contracts & Templates Tab (NEW in v4.0)

    • General Contract Template Section

      • Rich text editor
      • Merge fields available: {crew_name}, {project_name}, {dates}, etc.
      • Preview pane
      • Help text: "This template is used by default for all projects, but can be customized per project"
      • [Save Template] button

    • Email Templates Section

      • Offer email template
      • Confirmation email template
      • Reminder email template
      • Rich text editors with merge fields
      • Preview panes

  • Currency & Exchange Rates Tab (NEW in v4.0)

    • Base Currency Section

      • Base currency selector (SEK, EUR, USD, etc.)
      • Help text: "All reporting will show amounts in this currency"

    • Exchange Rates Section

      • Table of exchange rates:
        • From currency
        • To currency
        • Rate (decimal, e.g., 0.090000)
        • Last updated
        • Updated by
        • Actions [Edit] [Remove]
      • "+ Add Exchange Rate" button
      • Example shown: "SEK → EUR = 0.090000"
      • Help text: "These rates are used for multi-currency booking reporting"

    • Warning: "Exchange rates must be updated manually. Check regularly for accuracy."

  • Functions Catalog Tab

    • Link to full Functions Management view
    • Quick add function form
    • Most used functions list

  • Branding Tab

    • Primary color picker
    • Logo variants upload (light/dark)
    • Email template preview

  • Users & Permissions Tab

    • List of admin users
    • Role column: [Admin] / [Project Manager] / [Viewer]
    • Actions: [Edit] [Remove]
    • "+ Add User" button
    • Note: "Crew members managed separately in Crew Pool"

1.19 User Management​

URL: backend.pbs.com/settings/users User: Admin (with user management permissions) Priority: 🟡 If Easy (otherwise manual by PBS admin for MVP)

Elements:

  • Header Bar

    • "Team Members" title
    • Search box
    • Filter by role: [All / Admin / Project Manager / Team Lead / Viewer]
    • [+ Invite User] button (primary, right-aligned)

  • Users Table

    • Columns:
      • Avatar + Name
      • Email
      • Role badge
      • Status (Active/Pending/Suspended)
      • Last login (timestamp)
      • Actions [Edit] [Suspend] [Delete]
    • Sort by: Name, Role, Last Login

  • Invite User Modal (click + Invite User)

    • Name input
    • Email input
    • Role dropdown (ADMIN, PROJECT_MANAGER, TEAM_LEAD, VIEWER)
    • [Send Invitation] button
    • Note: "User will receive email with account setup link"

  • Edit User Modal

    • Same fields as invite
    • [Save Changes] button
    • [Cancel] button

  • Delete Confirmation

    • "Delete [Name]?" warning
    • "This action cannot be undone"
    • [Delete] [Cancel]

Behavior:

  • Only ADMIN role can manage users
  • Sends invitation email with signup link
  • Cannot delete yourself
  • Cannot delete last admin

Notes:

  • If MVP: PBS admin can manually create users in database
  • If Easy to Implement: Include in MVP
  • Uses users table
  • Similar to crew invitation but for admin users

1.20 Admin User Profile (Own Settings)​

URL: backend.pbs.com/profile User: Admin (own profile) Priority: ✅ MVP (Basic self-management)

Elements:

  • Header

    • "My Profile" title
    • Avatar upload area (⏭️ Post-MVP - Future improvement)

  • Personal Information Section

    • Name input
    • Email input (with "Change email" flow if needed)
    • Phone number input (optional)
    • [Save Changes] button

  • Password Section

    • Current password input
    • New password input
    • Confirm new password input
    • [Update Password] button

  • Dual Role Section (🆕 v4.3 - if users.crew_profile_id is set)

    • "Switch to Crew Portal" link/button
    • Shows if this admin is also a crew member
    • Redirects to crew.pbs.com/dashboard with auto-login
    • Optional: Display linked crew profile name

  • Preferences Section

    • Language dropdown (if multi-language)
    • Timezone dropdown
    • Date format preference
    • [Save Preferences] button

  • Session Management (Optional for MVP)

    • List of active sessions:
      • Device/browser
      • IP address
      • Last active
      • [Revoke] button per session
    • [Logout All Other Sessions] button

Behavior:

  • Updates users table
  • Email change requires verification
  • Password change requires current password
  • Shows success/error messages

Notes:

  • MVP version: Basic self-management (name, email, password)
  • Post-MVP features: Avatar upload, advanced session management, 2FA
  • Similar to crew profile but for admin users
  • Crew photos remain MVP (required for crew passes/accreditation)

Chapter 2: Crew Portal

🔐 Authentication & Entry​

2.1 Crew Login​

URL: crew.pbs.com/login User: Crew (unauthenticated) Priority: ✅ MVP (Laravel Breeze standard) Optimized for: Mobile

Elements:

  • Logo (centered, top)
  • Login Card (mobile-optimized)
    • "Sign in to your account" title
    • Email input (large touch targets)
    • Password input (with show/hide toggle)
    • "Remember me" checkbox
    • [Sign In] button (primary, full-width, large)
    • [Forgot password?] link
  • No Account Section
    • "Don't have an account? You need an invitation."
    • Contact information or help link

Behavior:

  • Mobile-optimized keyboard (email type)
  • Same validation and security as admin login
  • Redirects to crew dashboard after login

Notes:

  • Shared authentication logic with admin portal
  • Different UI optimized for mobile
  • Crew must be invited (no self-registration on crew portal)

2.2 Crew Registration Flow (Invite Accept) (multi)​

URL: crew.pbs.com/register/[token] User: Crew (not yet registered) Optimized for: Mobile

Step 1: Welcome Screen

  • Company logo/name (who sent the invitation)
  • "You've been invited to join [Company Name]'s crew pool"
  • Multi-Company Note (NEW in v4.0):
    • If email already exists: "You already have an account with us! This invitation will link you to [Company Name]."
  • [Get Started] button

Step 2: Account Creation (if new user)

  • Email (pre-filled, not editable)
  • Create password field
  • Confirm password field
  • [Next] button

Step 2b: Login (if existing user) (NEW in v4.0)

  • "Welcome back! Please login to link to [Company Name]"
  • Email (pre-filled)
  • Password
  • [Login & Link Account] button

Step 3: Basic Information

  • First name
  • Last name
  • Phone
  • Home base city
  • [Next] button

Step 4: Profile Photo (required)

  • Upload area (drag & drop or camera on mobile)
  • Crop/resize tool
  • Note: "Required for crew passes and accreditation"
  • [Next] button

Step 5: Capabilities (NEW in v4.0)

  • Your Capabilities section
  • Rich text area
  • Placeholder: "Describe your skills and experience..."
  • Help text: "Tell companies about your skills, equipment experience, specializations"
  • Character count
  • [Next] button

Step 6: Emergency Contact

  • Contact name
  • Phone
  • Relation dropdown
  • [Next] button

Step 7: Preferences (optional)

  • Languages (multi-select)
  • Food preferences (text area)
  • Clothing sizes (form)
  • [Skip] or [Next] button

Step 8: Review & Submit

  • Summary of all entered information
  • Checkbox: "I agree to terms and conditions"
  • Checkbox: "I consent to data processing (GDPR)"
  • [Submit Registration] button

Step 9: Confirmation

  • If auto-approve enabled:

    • "Registration complete! You can now login."
    • [Go to Dashboard] button

  • If manual review:

    • "Registration submitted! [Company Name] will review and activate your account."
    • "You'll receive an email when approved."
    • Estimated review time shown

  • If linking to existing account (NEW in v4.0):

    • "Successfully linked to [Company Name]!"
    • "You can now see assignments from all your companies in one place."
    • [Go to Dashboard] button

📱 Core Crew Features​

2.3 Crew Dashboard​

URL: crew.pbs.com/dashboard User: Crew (Lisa, Johan) Optimized for: Mobile

Elements:

  • Header

    • Logo
    • Hamburger menu icon (mobile)
    • Profile avatar (tap to open menu)

  • Welcome Message

    • "Welcome back, Lisa!"
    • Account status indicator (if claimed profile)

  • Multi-Company Indicator (NEW in v4.0)

    • If crew works for multiple companies:
      • Company filter dropdown at top
      • "Viewing assignments from: [All Companies]" or specific company
      • Combined view of all assignments across companies

  • Quick Stats Cards (2 across on mobile)

    • Pending Offers (number with badge)
    • Upcoming Assignments (number)
    • This Month Earnings (total across all companies, in preferred currency)

  • Pending Offers Section

    • Cards for each pending offer
    • Company name shown (NEW in v4.0)
    • Project name
    • Function/role
    • Dates
    • Rate
    • [View Details] button (prominent)
    • Expires in: X days (if set)

  • Upcoming Assignments Section

    • Cards for each assignment
    • Company name shown (NEW in v4.0)
    • Project name
    • Function/role
    • Role note (e.g., "Main camera operator")
    • Dates
    • Location
    • Status badge
    • [View Details] button

  • Navigation Menu (hamburger)

    • Dashboard
    • My Assignments
    • My Offers
    • Profile Settings
    • Documents
    • "Switch to Admin Portal" (🆕 v4.3 - if crew is also an admin)
      • Only shows if this crew member has an admin account
      • Redirects to backend.pbs.com/dashboard with auto-login
    • Logout

2.4 Assignment Offers (Crew View)​

URL: crew.pbs.com/offers User: Crew Optimized for: Mobile

Elements:

  • Header

    • "My Offers" title
    • Filter: [Pending / Responded / All]

  • Company Filter (NEW in v4.0)

    • Dropdown to filter by company
    • "All Companies" option
    • Shows which company sent each offer

  • Offer Cards (mobile-optimized)

    • Each card shows:
      • Company name badge (NEW in v4.0)
      • Project name (bold)
      • Function/role
      • Role note (if provided, e.g., "Main operator")
      • Dates (highlighted)
      • Location + venue
      • Rate breakdown:
        • Work days: X days @ Y SEK/EUR
        • Travel days: X days @ Y SEK/EUR
        • Total: Amount in crew's preferred currency
      • Personal message from PM (if included)
      • Status badge
      • Expires in: X days (if set)
      • Action buttons (large, mobile-friendly):
        • [Accept] (green, prominent)
        • [Negotiate] (yellow)
        • [Decline] (gray)

  • Offer Detail Modal (tap card to expand)

    • Full project details:
      • Client name
      • Project description
      • Venue address
    • Job details:
      • Meals included?
      • Parking info
      • Dress code
      • Equipment needed
      • Special instructions
    • Travel details:
      • Departure city
    • Personal message from PM
    • Action buttons (same as card)

  • Accept Flow (Freelancers)

    • Confirmation modal:
      • "Accept this offer?"
      • Summary of details
      • Contract Acceptance [NEW in v4.1]:
        • Contract text displayed (from project template)
        • Scrollable contract content
        • Required checkbox: ☐ "I accept the contract terms and conditions"
        • Cannot accept offer without checking this box
        • Timestamp recorded when checked
      • [Confirm Accept] [Cancel] (disabled until contract checked)
    • Success message: "Offer accepted! Project manager will review and confirm."

  • Accept Flow (Staff - Direct Booking)

    • No contract workflow (direct booking)
    • Simple confirmation modal
    • Auto-confirmed by system

  • Negotiate Flow

    • Form:
      • Counter-offer for work day rate
      • Counter-offer for travel day rate
      • Message to project manager (required)
    • [Send Counter-Offer] button
    • Note: "Project manager will review your counter-offer"

  • Decline Flow

    • Optional message field
    • [Confirm Decline] button

2.5 Assignment Details (Crew View)​

URL: crew.pbs.com/assignments/{id} User: Crew Optimized for: Mobile

Elements:

  • Header

    • Back button
    • Project name title
    • Status badge

  • Company Badge (NEW in v4.0)

    • Shows which company this assignment is with
    • Helps crew distinguish when working for multiple companies

  • Assignment Summary Card

    • Function/role (large)
    • Role note (if set, e.g., "Main camera operator, B-camera")
    • Team label (if set, e.g., "Camera A")
    • Date range (large, prominent)
    • Location + venue
    • Status badge

  • Project Details Section

    • Client name
    • Project description
    • Venue address (with map link)
    • Contact information

  • Job Details Section

    • Meals included: Yes/No
    • Parking information
    • Dress code
    • Equipment needed
    • Special instructions

  • Financial Details Section

    • Work days: X days @ Y SEK
    • Travel days: X days @ Y SEK
    • Total earned: Amount (in crew's currency)
    • Currency shown clearly

  • Travel & Accommodation Section

    • Departure city
    • Travel bookings (if added):
      • Flight/train details
      • Times, flight numbers
    • Hotel bookings (if added):
      • Hotel name, address
      • Check-in/out dates and times
      • Booking reference

  • Documents Section

    • Contract (download button)
    • Road book (download button)
    • Other documents
    • Upload area (for crew to upload if needed)

  • Action Buttons (sticky footer)

    • [Download Road Book]
    • [Download Contract]
    • [Contact Project Manager]

2.6 Profile Settings (Crew View)​

URL: crew.pbs.com/profile User: Crew Optimized for: Mobile

Elements:

  • Header

    • "My Profile" title
    • Edit/Save toggle (top right)

  • Profile Photo Section

    • Large profile photo
    • [Change Photo] button
    • Note: "Required for crew passes and accreditation"

  • Basic Information Section

    • First name
    • Last name
    • Email (grayed out, not editable)
    • Phone
    • Home base city

  • My Capabilities Section (NEW in v4.0)

    • Editable by crew
    • Rich text area
    • Placeholder: "Describe your skills and experience (e.g., Handheld, Steadicam, Sony cameras, 10 years live sports...)"
    • Help text: "This information is visible to companies when considering you for projects"
    • Character count indicator
    • [Save] button

  • Functions/Roles Section

    • List of functions crew can perform
    • Seniority levels shown
    • Read-only (managed by companies)
    • Note: "Companies assign your functions and experience levels"

  • Multi-Company Work (NEW in v4.0)

    • If crew works for multiple companies:
      • "You work with X companies" indicator
      • List showing company names (read-only)
      • Note: "Each company has separate notes about you"

  • Emergency Contact Section

    • Contact name
    • Phone
    • Relation

  • Preferences Section

    • Languages (tag selector)
    • Food preferences (text area)
    • Clothing sizes (form with dropdown/inputs)

  • Contractor Information Section (if applicable)

    • Company/VAT number
    • Invoicing email
    • Invoicing address

  • Documents Section

    • Passport (upload)
    • ID card (upload)
    • Certifications (upload)
    • View company-provided documents (contracts, road books)

  • Privacy Note (NEW in v4.0)

    • "Your profile data is shared with companies you work with"
    • "Each company may have private notes about you that are not visible to you"
    • "You control your capabilities description and basic information"

  • Action Buttons

    • [Save Changes]
    • [Change Password]
    • [Delete Account] (requires confirmation)

2.7 Communication History (Crew View) (NEW in v4.0)​

URL: crew.pbs.com/communications User: Crew Optimized for: Mobile

Elements:

  • Header

    • "Communication History" title
    • Filter: Company dropdown (if multi-company)

  • Timeline View

    • Chronological list of all communications received
    • Each entry shows:
      • Company badge
      • Type badge (Offer / Confirmation / Contract / Reminder)
      • Subject
      • Preview snippet
      • Date/time
      • Status (Sent/Delivered/Opened/Responded)
      • [Read More] button

  • Detail View (tap to expand)

    • Full message content
    • All details
    • Related assignment link
    • Reply options if applicable

Chapter 3: Authentication & System

🔑 Password Management​

3.1 Forgot Password​

URL: backend.pbs.com/forgot-password or crew.pbs.com/forgot-password User: Any (unauthenticated) Priority: ✅ MVP (Laravel Breeze standard)

Elements:

  • Header
    • "Reset your password" title
    • "Enter your email and we'll send you a reset link" subtitle
  • Form
    • Email input
    • [Send Reset Link] button (primary)
    • [Back to login] link
  • Success State
    • "Check your email" message
    • "We've sent a password reset link to [email]"
    • [Back to login] button

Behavior:

  • Sends password reset email (Laravel standard)
  • Throttles requests to prevent abuse
  • Works for both admin and crew users
  • Email contains time-limited reset token

Notes:

  • Laravel's built-in password reset
  • Separate routes but shared logic

3.2 Reset Password​

URL: backend.pbs.com/reset-password/{token} or crew.pbs.com/reset-password/{token} User: Any (via email link) Priority: ✅ MVP (Laravel Breeze standard)

Elements:

  • Header
    • "Create new password" title
  • Form
    • Email input (pre-filled, readonly)
    • New password input (with strength indicator)
    • Confirm password input
    • Password requirements shown:
      • Minimum 8 characters
      • (Other requirements as per security policy)
    • [Reset Password] button (primary)
  • Success State
    • "Password updated successfully"
    • [Go to login] button

Behavior:

  • Validates token is valid and not expired
  • Password strength validation
  • Passwords must match
  • Redirects to login after success

Notes:

  • Laravel Fortify password reset
  • Token expires after 60 minutes (configurable)

3.3 Email Verification​

URL: backend.pbs.com/verify-email or crew.pbs.com/verify-email User: Authenticated but unverified Priority: ✅ MVP (Laravel Breeze standard)

Elements:

  • Notice
    • "Verify your email address" title
    • "We've sent a verification link to [email]"
    • "Please click the link to verify your account."
  • Actions
    • [Resend Verification Email] button
    • "Didn't receive the email? Check your spam folder"
    • [Logout] link
  • After Verification (via email link)
    • Success message
    • Auto-redirect to dashboard/crew dashboard

Behavior:

  • Blocks access to most features until verified
  • Can resend verification email (throttled)
  • Verification link contains signed token
  • Auto-redirects after clicking email link

Notes:

  • Laravel's email verification system
  • Required for security best practices
  • Both admin and crew must verify

🔧 System Administration​

3.4 Super Admin Dashboard​

URL: admin.pbs.com/dashboard (separate subdomain) User: PBS System Administrator Priority: ⏭️ Post-MVP (Manual management initially)

Elements:

  • Statistics Cards

    • Total companies
    • Total users (admin + crew)
    • Confirmed projects
    • System health

  • Companies List

    • Search/filter companies
    • Columns:
      • Company name
      • Organization number
      • Admin users count
      • Crew count
      • Projects count
      • Created date
      • Status (Active/Suspended/Trial)
      • Actions [View] [Edit] [Suspend]

  • Quick Actions

    • [+ Create Company] button
    • [View System Logs]
    • [Manage Global Functions]

Notes:

  • Post-MVP: First customers manually created
  • Separate authentication/authorization
  • Can manage all companies in the system
  • Needed for SaaS operations at scale

3.5 Billing & Subscription​

URL: backend.pbs.com/billing User: Admin (company owner) Priority: ⏭️ Post-MVP (Handled outside system for MVP)

Elements:

  • Current Plan Card

    • Plan name (e.g., "Professional")
    • Price per month/year
    • Features included
    • [Change Plan] button

  • Payment Method

    • Credit card on file (masked)
    • [Update Payment Method] button

  • Billing History

    • Table of invoices:
      • Date
      • Description
      • Amount
      • Status
      • [Download PDF] per invoice

  • Usage Metrics (if usage-based pricing)

    • Users count
    • Projects count
    • Storage used
    • Progress bars showing limits

Notes:

  • MVP: Handle billing outside system (manual invoices via email)
  • Post-MVP: Integrate Stripe or similar payment processor
  • Plan limits enforced in application code

Common UI Elements

🔧 Shared Components (Both Portals)​

Notifications​

Location: Bell icon in header (desktop), slide-in panel (mobile)

Elements:

  • Notification badge (number of unread)
  • Slide-out panel showing:
    • Notification cards
    • Icon indicating type
    • Message text
    • Timestamp
    • [Mark as Read] / [View Details] actions
    • [Mark All as Read] at bottom

Notification Types:

  • Offer received (crew)
  • Offer accepted (admin)
  • Assignment confirmed (both)
  • Contract signed (both)
  • Travel details updated (crew)
  • Communication received (both)
  • System announcements

Status Badges​

Consistent across both portals:

  • Project: Preliminary (gray), Confirmed (blue), Completed (green)
  • Offer: Pending (yellow), Accepted (green), Declined (red), Negotiating (orange), Withdrawn (gray), Converted (blue)
  • Assignment: Confirmed (blue), Contract Sent (purple), Contract Signed (green), Travel Booked (cyan), Active (blue), Completed (green), Cancelled (red)
  • Employment (NEW in v4.0): Staff (blue), Freelance (gray)
  • Account Status (NEW in v4.0): Registered (green), Not Registered (gray)
  • Communication Status (NEW in v4.0): Sent (gray), Delivered (blue), Opened (cyan), Responded (green), Failed (red)

Currency Display (NEW in v4.0)​

Consistent formatting:

  • Always show currency code (SEK, EUR, USD)
  • Formatting based on locale
  • Multi-currency bookings show original + converted
  • Example: "5,500 SEK (495 EUR)"

Availability Indicators (NEW in v4.0)​

Visual indicators:

  • Staff: Green dot (available), Yellow dot (limited), Red dot (unavailable), Calendar icon (view schedule)
  • Freelancer: No availability indicator (manage own schedule)
  • Equipment: Green (available), Red (booked), Calendar icon (view bookings)

Multi-Company Badges (NEW in v4.0)​

Used in crew portal:

  • Company logo/name badge on assignments
  • Company filter dropdowns
  • "Working with X companies" indicators
  • Color-coded by company (optional)

Access Control Indicators (NEW in v4.0)​

Visual indicators for files/notes:

  • Lock icon: Private/confidential
  • Eye icon: Visible to crew
  • Eye-slash icon: Hidden from crew
  • Globe icon: Shared across companies (for crew files)

Empty States​

Consistent placeholders:

  • Friendly illustration
  • Clear message explaining why it's empty
  • Call-to-action button
  • Examples:
    • "No projects yet. Create your first project!"
    • "No pending offers. Send your first offer!"
    • "No crew members. Add or invite crew!"
    • "No equipment yet. Add your first equipment item!"

Loading States​

Consistent loaders:

  • Skeleton screens for content (better UX than spinners)
  • Spinner for actions
  • Progress bars for uploads
  • "Loading..." text for screen readers

Error States​

Consistent error handling:

  • Error alert banner (red, with icon)
  • Clear error message
  • Suggested action or retry button
  • Examples:
    • "Failed to send offer. Please try again."
    • "Could not load assignments. Check your connection."
    • "Equipment already booked for these dates. Choose different dates or equipment."

📱 Responsive Design Notes​

Backend Portal (Desktop-First)​

  • Optimized for 1920x1080 (most common)
  • Minimum width: 1280px
  • Sidebar collapses on tablets
  • Table layouts on large screens
  • Card layouts on medium screens

Crew Portal (Mobile-First)​

  • Optimized for 375x667 (iPhone SE)
  • Touch-friendly button sizes (min 44x44px)
  • Large, readable fonts
  • Bottom navigation on mobile
  • Full-screen modals
  • Swipe gestures for navigation
  • Sticky action buttons

Shared Components​

  • Consistent spacing system (8px grid)
  • Shared color palette
  • Shared typography scale
  • Consistent form elements
  • Shared icon library

🎨 Design System References​

Colors:

  • Primary: #007AFF (blue)
  • Success: #34C759 (green)
  • Warning: #FF9500 (orange)
  • Error: #FF3B30 (red)
  • Gray scale: #000000 → #FFFFFF (8 shades)

Typography:

  • Font family: Inter (system fallback)
  • Headings: Bold, sizes 32/24/20/18/16
  • Body: Regular, size 16
  • Small: Regular, size 14

Spacing:

  • Base unit: 8px
  • Scale: 8, 16, 24, 32, 40, 48, 64, 80px

Components:

  • Buttons: 40px height (desktop), 48px (mobile)
  • Inputs: 40px height (desktop), 48px (mobile)
  • Cards: 16px padding, 8px border-radius, subtle shadow
  • Modals: Max-width 600px (desktop), full-screen (mobile)

Version: 4.2 Last Updated: 2025-11-13 Changes from v4.1: Reorganized into chronological workflow order with proper chapter numbering (Chapter 1: Admin Portal, Chapter 2: Crew Portal, Chapter 3: Authentication & System)