Explore functional UI prototypes for PBS Planning system
Card-based dashboard showing all projects with filtering sidebar. Overview of active/planning/completed projects with key metrics and crew progress.
✓ Complete3-step wizard for creating new projects. Includes basic information, crew roles, and equipment & other costs with comprehensive budget tracking.
✓ CompleteIndividual project dashboard with stats and crew breakdown. Shows detailed metrics for one specific project.
✓ CompleteSpreadsheet-like interface for managing crew bookings. Shows 15+ crew members with schedule, costs, and admin tasks in a dense, scrollable grid.
✓ CompleteDetailed crew member profile showing contact info, skills, availability, past projects, and documents.
✓ CompleteManage all crew members with grid and table views. Add crew directly, invite to register, review pending approvals, and track favorites.
✓ CompleteTimeline calendar showing all staff and equipment bookings across time. Switch between Week/Month/Quarter/Year views with auto-scroll to today.
✓ CompleteManage company-owned equipment inventory. Track availability, maintenance, and bookings for OB vans, cameras, lighting, and audio gear.
✓ CompleteGenerate and export project reports including crew list, travel bookings, accommodation, meal preferences, clothing sizes, and budget tracking.
✓ CompleteMobile-optimized interface for crew to view bookings, update availability, and manage documents. Includes login, registration, and home dashboard.
To run prototypes locally with auto-reload:
cd prototypes
npm start # Opens all prototypes
npm run start:grid # Opens Grid View directly