(feature): adds the production planning to the frontend

[Bishopukpai]

Production Planning UI & Frontend API Integration

🚀 Summary

Connects the ScenePilot Production Planning frontend to the MongoDB backend API, introducing a full production management hub for organizing scenes, shoot schedules, locations, cast, and crew rosters in real-time.

This PR turns ScenePilot's UI into an operational production interface by wiring up client-side state orchestration with custom React hooks, replacing placeholder data with live API state, and enforcing strict end-to-end TypeScript safety across all visual components.

The implementation establishes a smooth user workflow for:

• Consuming project-scoped production plans with automatic background fetching and loading states.

• Direct client-side item dispatch for scenes, locations, cast/crew, and shoot days using atomic API mutation handlers.

• Tabbed UI navigation allowing production teams to switch between script breakdowns, call sheets, locations, and roster management effortlessly.

• Clean error boundaries and fallback rendering during async fetch operations.

• Strict ESLint and TypeScript compliance across all mapped UI components, eliminating any type warnings and unhandled loop shapes.

Authenticated project members can now:

• View live production breakdown plans automatically populated upon navigating to any project workspace.
• Add new scenes with numbers and descriptions via a dedicated top form bar and see them render instantly in the scene grid.
• Schedule shoot days by inputting titles and dates through an intuitive calendar form.
• Log filming locations with physical addresses and structured details.
• Add cast and crew members to a unified roster view that combines stored project personnel with workspace collaborators.

---

Images

---

📦 Changes Made

🎨 Frontend Components & UI Refactoring

components/ProductionPlanner.tsx:

• Connected component state to live backend data via useProductionPlan(projectId).
• Built out responsive tabbed interface (Scenes, Shoot Days, Locations, Cast & Crew) with dynamic active states and Lucide icons.
• Implemented tailored sub-forms for each tab with dedicated input state handlers (handleAddScene, handleAddShootDay, handleAddLocation, handleAddRosterMember).
• Refactored all mapped card grids (scenes, shootDays, locations, combinedRoster) with strict TypeScript types (ProductionScene, ProductionMember, and precise inline shapes for locations/shoot days) to fix @typescript-eslint/no-explicit-any errors.
• Combined stored cast/crew records with workspace members to render a unified personnel roster grid.

components/Sidebar.tsx:

Cleaned up unused Lucide icon imports (LogOut) to resolve @typescript-eslint/no-unused-vars lint warnings.

🔄 Client Hooks & State Orchestration

hooks/useProductionPlan.ts:

• Integrated client-side state management for fetching (GET) and mutating (PATCH) project production plans.
• Provided strongly typed helper function addItem(section, payload) to execute seamless API updates and update UI state.

🛠️ API & Type Safety Corrections

app/api/projects/[projectId]/production/route.ts:

Fixed variable destructuring (let → const) to adhere to prefer-const lint rules.

app/api/projects/[projectId]/tasks/route.ts:

Prefixed unused catch block error parameters (_error) to clear unused variable lint warnings.

---

🧪 How to Test

TypeScript & Linting Validation
Run the following commands in your terminal:

npx tsc --noEmit
npm run lint

Expected result: 0 errors, 0 warnings.

UI & Flow Testing

1. Navigate to any project dashboard inside ScenePilot and click on the Production Hub tab.
2. Verify that the loading indicator displays briefly before populating live production plan data.
3. Scenes Tab: Enter a Scene # (e.g., 10A) and description, click Add Scene, and confirm the new card appears in the grid.
4. Shoot Days Tab: Select a title (e.g., Day 1 - Studio A) and date, click Add Shoot Day, and check that the card renders with the formatted date.
5. Locations Tab: Input a location name and address, click Add Location, and verify the entry.
6. Cast & Crew Tab: Add a team member with name and role, and confirm they appear alongside workspace collaborators in the combined roster grid.

📋 Pre-Merge Checklist

• Production Hub tabbed interface connected to backend API
• Input forms implemented for adding scenes, shoot days, locations, and roster members
• Unified cast, crew, and collaborator roster grid rendered cleanly
• any types replaced with strict interfaces across all UI loop maps
• Unused imports and variables cleaned up across codebase
• npx tsc --noEmit passes with 0 errors
• npm run lint passes with 0 errors and 0 warnings
• No credentials or environment variables committed

🔐 Security & Safety Notes

All client requests leverage session-authenticated API routes via NextAuth.

Strong client-side type definitions ensure invalid input shapes are caught prior to submission.

🔄 Next Steps

[netlify]

✅ Deploy Preview for scenepilot ready!

Name	Link
🔨 Latest commit	474fcef
🔍 Latest deploy log	https://app.netlify.com/projects/scenepilot/deploys/6a926ad3312ae50008a3b482
😎 Deploy Preview	https://deploy-preview-23--scenepilot.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: d29c2bf9-6992-449b-89b6-994cb2d67a1b

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}