Modernize Organization UX using Subpages and Dedicated Sidebar

[SvenVw]

Problem

The current organization management in fdm-app is implemented as a single, overloaded page (organization.$slug.tsx). This makes it difficult to scale as we add more organization-level features (like aggregated farm views) and results in a cluttered UI where members, invitations, and metadata are all competing for space.

Proposed Solution

Refactor the organization routes to use a nested subpage architecture, leveraging React Router v7's layout routes. This will provide a cleaner navigation experience and a dedicated sidebar context.

1. New Routing Structure

Transform the organization routes into a hierarchy:

• /organization/:slug (Layout) -> Shared context, SidebarOrganization.
• /organization/:slug/ (Index) -> Dashboard/Overview (currently the main view).
• /organization/:slug/members -> Dedicated view for member & invitation management.
• /organization/:slug/settings -> Organization metadata (Edit name/description) and "Danger Zone".

2. Dedicated Sidebar (SidebarOrganization)

Create a new sidebar component to replace the generic SidebarPlatform when inside an organization.

• Back to Platform button.
• Organization group:
  • Overzicht (LayoutDashboard icon)
  • Leden (Users icon)
  • Instellingen (Settings icon)
• Aggregation group (Placeholder for items in ISSUE.md):
  • Bedrijven (Farms)
  • Atlas
  • Balans

3. Implementation Tasks

Phase 1: Layout & Navigation

• Create app/components/blocks/sidebar/organization.tsx.
• Refactor app/routes/organization.$slug.tsx into a Layout Route:
  • Pass down organization data via Outlet context or shared loader.
  • Conditionally render SidebarOrganization instead of SidebarPlatform in the main layout wrapper.
• Move existing content to app/routes/organization.$slug._index.tsx.

Phase 2: Feature Migration

• Member Management: Create app/routes/organization.$slug.members.tsx.
  • Move Member list logic here.
  • Move Invitation form and list here.
  • Refactor rows into a more robust Table layout.
• Settings: Create app/routes/organization.$slug.settings.tsx.
  • Implement "Edit Organization" form (Name, Description).
  • Implement "Logo Upload" functionality.
  • Connect to updateOrganization in fdm-core.
  • Add "Delete Organization" functionality.

Phase 3: Update Farm Landing Page

• Add a single "Organisaties" card to the landing page grid in app/routes/farm._index.tsx.
• This card should link to /organization and provide a brief description of how organizations enable collaboration and data aggregation.

Phase 4: Global Context Switching

• Update SidebarUser to include an organization switcher as described in ISSUE.md.
  • Direct link for single-org users.
  • Dropdown/Popover for multi-org users.

UX/UI Improvements

• Clearer Onboarding: After creating an organization, redirect users directly to the "Members" page to encourage inviting others.
• Improved Hierarchy: Use sub-headers and separators to distinguish between active members and pending invitations.
• Mobile Friendly: Ensure the sub-navigation works well in the mobile sidebar drawer.

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Possible Duplicates

• Add organizations #128

Related Issues

• Organization-Level Farm Overview and Aggregated Views #375
• Add Farm Overview Dashboard with Quick Actions #269
• Improve UI Responsiveness on Data-Heavy Pages with React 19 Streaming #232

🔗 Related PRs

#124 - Add organizations [merged]
#155 - Hotfix/20250604 [merged]
#261 - Add one-click accept/reject functionality to organization invitation emails [merged]
#333 - Improve UX and Functionality for Advisor and Researcher Roles [merged]
#370 - Expand and improve the landing page [merged]

👤 Suggested Assignees

• SvenVw
• BoraIneviNMI

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!