social-media/docs/TASKS/organizations/003-organization-settings-ui.md

Task: Organization settings UI shell

Feature

docs/FEATURES/organizations.md

Goal

Add an organization-level settings page with sections for profile, members, billing access, connections, and owned workspaces.

Context

Workspace screens remain the primary working context. Organization SaaS account administration lives under one explicit settings route: /app/organizations/:organizationId/settings.

Scope

• Add the organization settings route:
  • /app/organizations/:organizationId/settings
• Add feature-owned frontend code under frontend/src/features/organizations/.
• Load organization details from the backend.
• Show a settings page with sections for:
  • profile/settings
  • members and their roles/permissions
  • billing
  • connections
  • owned workspaces
• Show the billing section only to users with billing manager permission.
• Show the connections section only to users with connector manager permission.
• Show the owned workspaces section to users with organization workspace administration access.
• Add English and French locale strings.

Constraints

• Do not implement billing provider integration in this task.
• Do not implement real connection authorization flows in this task.
• Do not replace the existing workspace selector in this task.
• Frontend runtime config must flow through frontend/src/config.js if new runtime config is needed.
• Use the shared Axios API client in frontend/src/plugins/api.js.

Likely Files

• frontend/src/router/router.js
• frontend/src/features/organizations/**
• frontend/src/layouts/main/**
• frontend/src/locales/en.json
• frontend/src/locales/fr.json

Done When

• Organization settings route exists.
• Organization details load for accessible organizations.
• Organization settings page has sections for profile, members, billing, connections, and workspaces.
• Organization members are visible to permitted users.
• Billing section is permission-gated to billing managers.
• Connections section is permission-gated to connector managers.
• Owned workspaces section is visible to permitted organization users.
• UI strings exist in English and French.
• Frontend build passes.

Validation Commands

cd frontend
npm run build