feat(organizations): Complete Organization Management UI#19
Conversation
- Organization switcher with instant tenant context updates - Account settings: general, members, danger zone - Admin organization management dashboard - Invitation acceptance flow with email verification - Member management (invite, role change, remove) - Organization transfer and deletion - Navigation system with mobile support - Comprehensive UI components and utilities This implements the full organizations UI as specified in 009-organizations-ui, providing enterprise-grade multi-tenancy management for the SSO platform. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR implements a comprehensive organization management UI for the SSO platform, adding multi-tenant workspace capabilities with member management, invitations, RBAC, and admin tools. The implementation builds on existing Better Auth organization infrastructure to provide user-facing features.
Summary
- Complete organization lifecycle management (create, switch, settings, delete)
- Member management with role-based permissions (owner/admin/member)
- Email-based invitation system with acceptance flow
- Admin dashboard for platform-wide organization oversight
- Navigation system with mobile support and theme toggle
- Full TypeScript support with comprehensive utility functions
Key Changes
- New routes:
/account/organizations/*,/admin/organizations,/accept-invitation/* - UI components: Navigation, organization cards, dialogs, forms
- Utility functions for validation, organization operations, toast notifications
- Test coverage for utilities (validation, organization helpers)
Reviewed changes
Copilot reviewed 70 out of 72 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
sso-platform/src/types/organization.ts |
TypeScript interfaces for organizations, members, invitations |
sso-platform/src/lib/utils/validation.ts |
Input validation utilities (email, slug, image files) |
sso-platform/src/lib/utils/organization.ts |
Organization helper functions (slugify, role display, permissions) |
sso-platform/src/lib/utils/toast.ts |
Toast notification utility with success/error helpers |
sso-platform/src/lib/utils/__tests__/* |
Unit tests for validation and organization utilities |
sso-platform/src/components/ui/* |
UI primitives (textarea, tabs, skeleton, sheet, select, etc.) |
sso-platform/src/components/theme-* |
Theme provider and toggle components |
sso-platform/src/components/organizations/* |
Organization-specific components (logo, badge, slug input) |
sso-platform/src/components/layout/* |
Navigation components (navbar, user menu, mobile nav, org switcher) |
sso-platform/src/app/admin/organizations/* |
Admin dashboard with bulk operations |
sso-platform/src/app/account/organizations/* |
Organization listing, creation, and settings |
sso-platform/src/app/accept-invitation/* |
Invitation acceptance flow |
sso-platform/src/app/account/layout.tsx |
Updated layout with new navbar |
sso-platform/package.json |
New dependencies (react-hook-form, zod resolver, radix components) |
Files not reviewed (1)
- sso-platform/pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { useState } from "react"; | ||
| import { Organization, OrgRole } from "@/types/organization"; | ||
| import { OrgLogo } from "@/components/organizations/OrgLogo"; | ||
| import { OrgBadge } from "@/components/organizations/OrgBadge"; |
There was a problem hiding this comment.
Unused import OrgBadge.
|
|
||
| const params = await searchParams; | ||
| const page = parseInt(params.page || "1"); | ||
| const search = params.search || ""; |
There was a problem hiding this comment.
Unused variable search.
| const params = await searchParams; | ||
| const page = parseInt(params.page || "1"); | ||
| const search = params.search || ""; | ||
| const status = params.status || "all"; |
There was a problem hiding this comment.
Unused variable status.
| "use client"; | ||
|
|
||
| import { useState } from "react"; | ||
| import { Menu, X, Building2, User, Shield, LogOut } from "lucide-react"; |
There was a problem hiding this comment.
Unused import X.
…metadata Improves UX by showing organization names instead of long random IDs. Implements efficient architecture: org names included in JWT at login, zero extra API calls during org switching. Changes: - SSO: Include organization_names array in JWT claims (auth.ts) - Taskflow: Pass organization_names through session API - OrgSwitcher: Display names in button and dropdown (fallback to short ID) - Types: Add organization_names to JWTClaims interface Also fixes SSR error in CreateOrgDialog (FileList validation). Architecture follows enterprise pattern (Slack/Notion): - One DB query at login (fetch org names) - Names embedded in JWT - No runtime API calls for org metadata Performance: ~200-500ms total org switch (unchanged) UX: Shows "Test" instead of "FzttZNBpsgfBah67HWypQVZwjay7BKfi" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Resolved conflicts by keeping our organization names implementation: - OrgSwitcher.tsx: Uses organization_names from JWT (better UX) - auth-client.ts: Better documentation - ORG-SWITCHING-GUIDE.md: Comprehensive guide Incorporated changes from main: - Kubernetes/Helm skills and learning materials - Minikube addons guide 🤖 Generated with [Claude Code](https://claude.com/claude-code)
Regenerate lockfile to match current package.json dependencies. Removed next-themes from lockfile as it was removed from package.json. Fixes security audit CI failure: - ERR_PNPM_OUTDATED_LOCKFILE resolved 🤖 Generated with [Claude Code](https://claude.com/claude-code)
Summary
Implements comprehensive organization management UI for the SSO platform, including user-facing organization settings and admin management tools.
Features
User Features
Admin Features
Technical Implementation
Files Changed
/account/organizations/*,/admin/organizationsRelated
specs/009-organizations-ui/spec.mdspecs/009-organizations-ui/plan.mdspecs/009-organizations-ui/tasks.md🤖 Generated with Claude Code
Co-Authored-By: Claude Sonnet 4.5 noreply@anthropic.com