Merge pull request #212 from refactor-group/185-user_role-ui-updates

User Role UI Updates

Author: calebbourg

__tests__/components/ui/coaching-sessions/editor-cache-context.test.tsx

@@ -14,7 +14,7 @@ vi.mock('@/lib/providers/auth-store-provider', () => ({
 
 vi.mock('@/lib/hooks/use-current-relationship-role', () => ({
   useCurrentRelationshipRole: vi.fn(() => ({
-    relationship_role: 'coach'
+    relationship_role: 'Coach'
   }))
 }))
 

__tests__/components/ui/presence-indicator.test.tsx

@@ -1,12 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import { PresenceIndicator } from '@/components/ui/presence-indicator';
 import { createConnectedPresence, createDisconnectedPresence } from '@/types/presence';
+import { RelationshipRole } from '@/types/relationship-role';
 
 describe('PresenceIndicator', () => {
   const mockConnectedPresence = createConnectedPresence({
     userId: 'user1',
     name: 'Test User',
-    relationship_role: 'coach',
+    relationship_role: RelationshipRole.Coach,
     color: '#ffcc00'
   });
 

src/app/organizations/[id]/members/page.tsx

@@ -1,15 +1,17 @@
 "use client";
 
 import { use, useEffect, useState } from "react";
-import { useSearchParams } from "next/navigation";
+import { useSearchParams, redirect } from "next/navigation";
 import { Card, CardContent } from "@/components/ui/card";
 import { useAuthStore } from "@/lib/providers/auth-store-provider";
 import { useCoachingRelationshipList } from "@/lib/api/coaching-relationships";
 import { useUserList } from "@/lib/api/organizations/users";
 import { useCurrentOrganization } from "@/lib/hooks/use-current-organization";
+import { useCurrentUserRole } from "@/lib/hooks/use-current-user-role";
 import { Id } from "@/types/general";
 import { MemberContainer } from "@/components/ui/members/member-container";
 import { PageContainer } from "@/components/ui/page-container";
+import { toast } from "sonner";
 
 export default function MembersPage({
   params,
@@ -22,11 +24,21 @@ export default function MembersPage({
   );
 
   const organizationId = use(params).id;
-  const { setCurrentOrganizationId } = useCurrentOrganization();
+  const { currentOrganizationId, setCurrentOrganizationId } = useCurrentOrganization();
+  const currentUserRoleState = useCurrentUserRole();
 
   useEffect(() => {
-    setCurrentOrganizationId(organizationId);
-  }, [organizationId, setCurrentOrganizationId]);
+    // Only sync if different to prevent conflicts with OrganizationSwitcher
+    if (currentOrganizationId !== organizationId) {
+      setCurrentOrganizationId(organizationId);
+    }
+  }, [organizationId, currentOrganizationId, setCurrentOrganizationId]);
+
+  // Access control: redirect if user doesn't have access to this organization
+  if (currentOrganizationId === organizationId && currentUserRoleState.status === 'no_access') {
+    toast.error("You don't have access to this organization");
+    redirect('/dashboard');
+  }
 
   const {
     relationships,

src/components/ui/app-sidebar.tsx

@@ -2,6 +2,7 @@
 
 import type * as React from "react";
 import Link from "next/link";
+import { useRouter, usePathname } from "next/navigation";
 import { BarChart3, Gift, Home, Settings, Users } from "lucide-react";
 
 import { OrganizationSwitcher } from "./organization-switcher";
@@ -22,6 +23,7 @@ import {
 } from "@/components/ui/sidebar";
 import { SidebarCollapsible } from "@/types/sidebar";
 import { useCurrentOrganization } from "@/lib/hooks/use-current-organization";
+import type { Id } from "@/types/general";
 
 // Custom styles for menu buttons to ensure consistent centering
 const menuButtonStyles = {
@@ -33,6 +35,22 @@ const menuButtonStyles = {
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const { currentOrganizationId } = useCurrentOrganization();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const handleOrgChange = (newOrgId: Id) => {
+    // Check if current path is organization-scoped
+    const orgRouteMatch = pathname?.match(/^\/organizations\/[^\/]+(.*)$/);
+    
+    if (orgRouteMatch) {
+      // Preserve everything after the org ID and reconstruct with new org ID
+      const routeSuffix = orgRouteMatch[1] || '';
+      router.push(`/organizations/${newOrgId}${routeSuffix}`);
+    } else {
+      // Not on an org-scoped route, go to dashboard
+      router.push('/dashboard');
+    }
+  };
 
   return (
     <Sidebar collapsible={SidebarCollapsible.Icon} {...props}>
@@ -67,7 +85,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarGroupContent>
             <SidebarMenu>
               <SidebarMenuItem>
-                <OrganizationSwitcher />
+                <OrganizationSwitcher onSelect={handleOrgChange} />
               </SidebarMenuItem>
             </SidebarMenu>
           </SidebarGroupContent>
@@ -88,12 +106,12 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                     menuButtonStyles.buttonCollapsed
                   )}
                 >
-                  <a href="/dashboard">
+                  <Link href="/dashboard">
                     <span className={menuButtonStyles.iconWrapper}>
                       <Home className="h-4 w-4" />
                     </span>
                     <span>Dashboard</span>
-                  </a>
+                  </Link>
                 </SidebarMenuButton>
               </SidebarMenuItem>
               <SidebarMenuItem>
@@ -105,12 +123,12 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                     menuButtonStyles.buttonCollapsed
                   )}
                 >
-                  <a href={`/organizations/${currentOrganizationId}/members`}>
+                  <Link href={`/organizations/${currentOrganizationId}/members`}>
                     <span className={menuButtonStyles.iconWrapper}>
                       <Users className="h-4 w-4" />
                     </span>
                     <span>Members</span>
-                  </a>
+                  </Link>
                 </SidebarMenuButton>
               </SidebarMenuItem>
             </SidebarMenu>
@@ -130,12 +148,12 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                   menuButtonStyles.buttonCollapsed
                 )}
               >
-                <a href="/referrals">
+                <Link href="/referrals">
                   <span className={menuButtonStyles.iconWrapper}>
                     <Gift className="h-4 w-4" />
                   </span>
                   <span>Referrals</span>
-                </a>
+                </Link>
               </SidebarMenuButton>
             </SidebarMenuItem>
             <SidebarMenuItem>
@@ -147,12 +165,12 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                   menuButtonStyles.buttonCollapsed
                 )}
               >
-                <a href="/settings">
+                <Link href="/settings">
                   <span className={menuButtonStyles.iconWrapper}>
                     <Settings className="h-4 w-4" />
                   </span>
                   <span>Organization settings</span>
-                </a>
+                </Link>
               </SidebarMenuButton>
             </SidebarMenuItem>
           </SidebarMenu>
@@ -172,12 +190,12 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                   menuButtonStyles.buttonCollapsed
                 )}
               >
-                <a href="/status">
+                <Link href="/status">
                   <span className={menuButtonStyles.iconWrapper}>
                     <BarChart3 className="h-4 w-4" />
                   </span>
                   <span>System status</span>
-                </a>
+                </Link>
               </SidebarMenuButton>
             </SidebarMenuItem>
           </SidebarMenu>

src/components/ui/members/member-card.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { useCurrentOrganization } from "@/lib/hooks/use-current-organization";
 import { useAuthStore } from "@/lib/providers/auth-store-provider";
-import { useCurrentUserRole } from "@/lib/hooks/use-current-user-role";
 import { useUserMutation } from "@/lib/api/organizations/users";
+import { getUserDisplayRoles, getUserCoaches } from "@/lib/utils/user-roles";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -30,19 +30,18 @@ import {
 import { CoachingRelationshipWithUserNames } from "@/types/coaching_relationship";
 import { AuthStore } from "@/lib/stores/auth-store";
 import { Id } from "@/types/general";
-import { User, Role, isAdminOrSuperAdmin } from "@/types/user";
+import { User, isAdminOrSuperAdmin, UserRoleState } from "@/types/user";
 import { RelationshipRole } from "@/types/relationship-role";
 import { useCoachingRelationshipMutation } from "@/lib/api/coaching-relationships";
 import { toast } from "sonner";
 
 interface MemberCardProps {
-  firstName: string;
-  lastName: string;
-  email: string;
-  userId: Id;
+  user: User;
+  currentUserId: Id;
   userRelationships: CoachingRelationshipWithUserNames[];
   onRefresh: () => void;
   users: User[];
+  currentUserRoleState: UserRoleState;
 }
 
 interface Member {
@@ -52,17 +51,24 @@ interface Member {
 }
 
 export function MemberCard({
-  firstName,
-  lastName,
-  email,
-  userId,
+  user,
+  currentUserId,
   userRelationships,
   onRefresh,
   users,
+  currentUserRoleState,
 }: MemberCardProps) {
   const { currentOrganizationId } = useCurrentOrganization();
   const { isACoach, userSession } = useAuthStore((state: AuthStore) => state);
-  const currentUserRoleState = useCurrentUserRole();
+
+  // Extract user properties
+  const { id: userId, first_name: firstName, last_name: lastName, email } = user;
+
+  // Get display roles for this user
+  const displayRoles = getUserDisplayRoles(user, currentOrganizationId, userRelationships);
+
+  // Get coaches for this user
+  const coaches = getUserCoaches(userId, userRelationships);
   const { error: deleteError, deleteNested: deleteUser } = useUserMutation(
     currentOrganizationId
   );
@@ -71,17 +77,11 @@ export function MemberCard({
 
   console.log("is a coach", isACoach);
 
-  // Check if current user is a coach in any of this user's relationships
-  // and make sure we can't delete ourselves. Admins can delete any user.
+  // Only admins and super admins can delete users (but not themselves)
   const canDeleteUser =
     currentUserRoleState.hasAccess &&
-    (
-      (userRelationships?.some(
-        (rel) => rel.coach_id === userSession.id && userId !== userSession.id
-      ) ||
-        currentUserRoleState.role === Role.Admin) &&
-      userSession.id !== userId
-    );
+    userSession.id !== userId &&
+    isAdminOrSuperAdmin(currentUserRoleState);
 
   const handleDelete = async () => {
     if (!confirm("Are you sure you want to delete this member?")) {
@@ -117,46 +117,55 @@ export function MemberCard({
   const [selectedMember, setSelectedMember] = useState<Member | null>(null);
   const [assignedMember, setAssignedMember] = useState<Member | null>(null);
 
-  const handleCreateCoachingRelationship = () => {
+  const handleCreateCoachingRelationship = async () => {
     if (!selectedMember || !assignedMember) return;
 
-    if (assignMode === RelationshipRole.Coach) {
-      console.log("Assign", selectedMember.id, "as coach for", userId);
-      createRelationship(currentOrganizationId, {
-        coach_id: assignedMember.id,
-        coachee_id: selectedMember.id,
-      });
-    } else {
-      console.log("Assign", selectedMember.id, "as coachee for", userId);
-      createRelationship(currentOrganizationId, {
-        coach_id: selectedMember.id,
-        coachee_id: assignedMember.id,
-      });
-    }
+    try {
+      if (assignMode === RelationshipRole.Coach) {
+        console.log("Assign", selectedMember.id, "as coach for", userId);
+        await createRelationship(currentOrganizationId, {
+          coach_id: assignedMember.id,
+          coachee_id: selectedMember.id,
+        });
+      } else {
+        console.log("Assign", selectedMember.id, "as coachee for", userId);
+        await createRelationship(currentOrganizationId, {
+          coach_id: selectedMember.id,
+          coachee_id: assignedMember.id,
+        });
+      }
 
-    if (createError) {
+      toast.success(
+        `Successfully assigned ${assignedMember.first_name} ${assignedMember.last_name} as ${assignMode} for ${selectedMember.first_name} ${selectedMember.last_name}`
+      );
+      onRefresh();
+      setAssignDialogOpen(false);
+      setSelectedMember(null);
+      setAssignedMember(null);
+    } catch (error) {
       toast.error(`Error assigning ${assignMode}`);
-      return;
+      console.error("Error creating coaching relationship:", error);
     }
-
-    toast.success(
-      `Successfully assigned ${assignedMember.first_name} ${assignedMember.last_name} as ${assignMode} for ${selectedMember.first_name} ${selectedMember.last_name}`
-    );
-    onRefresh();
-    setAssignDialogOpen(false);
-    setSelectedMember(null);
-    setAssignedMember(null);
   };
 
   return (
     <div className="flex items-center p-4 hover:bg-accent/50 transition-colors">
       <div className="flex-1">
         <h3 className="font-medium">
           {firstName} {lastName}
+          {userId === currentUserId && " (You)"}
         </h3>
         {email && <p className="text-sm text-muted-foreground">{email}</p>}
+        {displayRoles.length > 0 && (
+          <p className="text-sm text-muted-foreground">
+            <span className="font-medium">Roles:</span> {displayRoles.join(', ')}
+          </p>
+        )}
+        <p className="text-sm text-muted-foreground">
+          <span className="font-medium">Coaches:</span> {coaches.length > 0 ? coaches.join(', ') : 'None'}
+        </p>
       </div>
-      {(isACoach || isAdminOrSuperAdmin(currentUserRoleState)) && (
+      {isAdminOrSuperAdmin(currentUserRoleState) && (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
@@ -200,7 +209,7 @@ export function MemberCard({
             )}
             {canDeleteUser && (
               <>
-                <DropdownMenuSeparator />
+                {userId !== currentUserId && <DropdownMenuSeparator />}
                 <DropdownMenuItem
                   onClick={handleDelete}
                   className="text-destructive focus:text-destructive"
@@ -222,7 +231,7 @@ export function MemberCard({
             </DialogTitle>
             <DialogDescription>
               Select a member to be their{" "}
-              {assignMode === RelationshipRole.Coach ? "coach" : "coachee"}
+              {assignMode.toLowerCase()}
             </DialogDescription>
           </DialogHeader>
           <Select