[GF-FE-22] Build interactive floor plan and seat map view on workspace detail page

[yusuftomilola]

Problem

Workspaces are browsable only as text/image cards. Members cannot see where seats are located within a space or pick a specific seat before booking. A visual floor plan is a standard feature on competing platforms (Skedda, OfficeRnD) and significantly improves the booking experience. The backend seat map API (GF-BE-18) provides the data.

Proposed Solution

Create an interactive floor plan component and add it as a tab on the workspace detail page.

New component: frontend/components/workspaces/FloorPlanView.tsx

• Renders a visual seat grid using the seatLayout JSONB from the workspace
• Each seat is rendered as a rectangle at the x, y position with its label
• Color coding: green = available, red = booked, blue = selected (on hover/click)
• If a floorPlanImageUrl exists, render it as a background behind the seat overlay using an <img> or CSS background

Integration with frontend/app/workspaces/[id]/page.tsx:

• Add a "Floor Plan" tab alongside the existing workspace info
• When the tab is active, show FloorPlanView with data from GET /workspaces/:id/seat-map?date=...
• Clicking an available seat pre-selects it and highlights it; clicking "Book this seat" pre-fills the booking form with that workspace and date

Acceptance Criteria

• FloorPlanView component created and renders seat rectangles at correct positions
• Seats are colour-coded by availability (green / red)
• Selected seat turns blue on click
• "Floor Plan" tab added to the workspace detail page
• Seat map data is fetched from GET /workspaces/:id/seat-map?date=...
• Date changes trigger a re-fetch to update seat availability colours
• Graceful fallback shown when seatLayout is null (no floor plan uploaded yet)

Depends on: [GF-BE-18] Add floor plan data model and seat map API to workspaces

[owohdora-stack]

@owohdora-stack has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Good day maintainer I'd like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @owohdora-stack to this issue.

[Malcolm-Wander]

@Malcolm-Wander has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello maintainer,I’d love to work on this issue please…promise to do bad accurate and swift job,thank you.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Malcolm-Wander to this issue.

[Oluwasuyi-Timilehin]

@Oluwasuyi-Timilehin has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello maintainer, please assign me to this task. I would get started on it immediately

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Oluwasuyi-Timilehin to this issue.

[mijinummi]

@mijinummi has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello maintainers I'm a full stack developer experience in building scalable systems I can handle this perfectly if assigned

ℹ️ Repo Maintainers: To accept this application, review their application or assign @mijinummi to this issue.

[drips-wave]

Congratulations, @mijinummi! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @mijinummi: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@mijinummi's PR #1310 was approved and merged by @yusuftomilola.

🏆 @mijinummi: You earned 40 FoxPoints for this contribution! Your current tier: Builder (1,551 total points). Track your full progress on GrantFox.

👏 Great work, @mijinummi! Keep contributing to DistinctCodes.

[drips-wave]

This issue has been completed by @mijinummi as part of the Stellar Wave Program's 6th Wave 🥳

😎 @mijinummi: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.