Merge pull request #124 from refactor-group/add_admin_role

Add the concept of user roles.

Author: jhodapp

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

@@ -5,6 +5,7 @@ import { siteConfig } from "@/site.config.ts";
 import { SiteHeader } from "@/components/ui/site-header";
 import { AppSidebar } from "@/components/ui/app-sidebar";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { Toaster } from "@/components/ui/sonner";
 export const metadata: Metadata = {
   title: siteConfig.name,
   description: "Manage coaching members",
@@ -22,6 +23,7 @@ export default function MembersLayout({
         <SidebarInset>
           <SiteHeader />
           <main className="flex-1 p-6">{children}</main>
+          <Toaster />
         </SidebarInset>
       </div>
     </SidebarProvider>

src/components/ui/coaching-relationship-selector.tsx

@@ -75,7 +75,7 @@ export default function CoachingRelationshipSelector({
     (action) => action
   );
 
-  const { setIsCoach } = useAuthStore((state) => state);
+  const { setIsCurrentCoach } = useAuthStore((state) => state);
 
   const handleSetCoachingRelationship = (relationshipId: Id) => {
     setCurrentCoachingRelationshipId(relationshipId);
@@ -91,7 +91,7 @@ export default function CoachingRelationshipSelector({
       ? getCurrentCoachingRelationship(currentCoachingRelationshipId)
       : null;
     if (currentRelationship) {
-      setIsCoach(currentRelationship.coach_id);
+      setIsCurrentCoach(currentRelationship.coach_id);
     }
   }, [currentCoachingRelationshipId]);
 

src/components/ui/coaching-session.tsx

@@ -32,7 +32,7 @@ const CoachingSession: React.FC<CoachingSessionProps> = ({
   const { setCurrentCoachingSessionId } = useCoachingSessionStateStore(
     (state) => state
   );
-  const { isCoach } = useAuthStore((state) => state);
+  const { isCurrentCoach } = useAuthStore((state) => state);
 
   return (
     <Card>
@@ -64,7 +64,7 @@ const CoachingSession: React.FC<CoachingSessionProps> = ({
                 <DropdownMenuItem onClick={onUpdate}>
                   Edit
                 </DropdownMenuItem>
-                {isCoach && (
+                {isCurrentCoach && (
                   <DropdownMenuItem onClick={onDelete} className="text-destructive">
                     Delete
                   </DropdownMenuItem>

src/components/ui/dashboard/add-entities.tsx

@@ -18,7 +18,7 @@ export default function AddEntities({
 }: AddEntitiesProps) {
   const router = useRouter();
   const { currentOrganizationId } = useOrganizationStateStore((state) => state);
-  const { isCoach } = useAuthStore((state) => state);
+  const { isCurrentCoach } = useAuthStore((state) => state);
 
   const onMemberButtonClicked = () => {
     router.push(`/organizations/${currentOrganizationId}/members`);
@@ -31,12 +31,12 @@ export default function AddEntities({
       </h3>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <AddCoachingSessionButton
-          disabled={!isCoach || !currentOrganizationId}
+          disabled={!isCurrentCoach || !currentOrganizationId}
           onClick={onCreateSession}
         />
 
         <AddMemberButton
-          disabled={!isCoach || !currentOrganizationId}
+          disabled={!isCurrentCoach || !currentOrganizationId}
           onClick={onMemberButtonClicked}
         />
       </div>

src/components/ui/members/add-member-dialog.tsx

@@ -17,6 +17,7 @@ import { Input } from "@/components/ui/input";
 import { useUserMutation } from "@/lib/api/organizations/users";
 import { NewUser } from "@/types/user";
 import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
+import { toast } from "sonner";
 
 interface AddMemberDialogProps {
   open: boolean;
@@ -85,10 +86,11 @@ export function AddMemberDialog({
       });
       setPasswordError("");
       onMemberAdded();
+      toast.success(`New Member ${formData.firstName} ${formData.lastName} added successfully`);
       onOpenChange(false);
     } catch (error) {
       console.error("Error creating user:", error);
-      // Handle error appropriately
+      toast.error("There was an error adding the member");
     }
   };
 

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

@@ -1,12 +1,38 @@
+import { useState } from "react";
 import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
 import { useAuthStore } from "@/lib/providers/auth-store-provider";
 import { useUserMutation } from "@/lib/api/organizations/users";
 import { Button } from "@/components/ui/button";
-import { Trash2 } from "lucide-react";
-import { CoachingRelationshipWithUserNames } from "@/types/coaching_relationship_with_user_names";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { MoreHorizontal, Trash2 } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/components/ui/select";
+import { CoachingRelationshipWithUserNames } from "@/types/coaching_relationship";
 import { OrganizationStateStore } from "@/lib/stores/organization-state-store";
 import { AuthStore } from "@/lib/stores/auth-store";
 import { Id } from "@/types/general";
+import { User, Role } from "@/types/user";
+import { useCoachingRelationshipMutation } from "@/lib/api/coaching-relationships";
+import { toast } from "sonner";
 
 interface MemberCardProps {
   firstName: string;
@@ -15,6 +41,13 @@ interface MemberCardProps {
   userId: Id;
   userRelationships: CoachingRelationshipWithUserNames[];
   onRefresh: () => void;
+  users: User[];
+}
+
+interface Member {
+  id: Id;
+  first_name: string;
+  last_name: string;
 }
 
 export function MemberCard({
@@ -24,31 +57,84 @@ export function MemberCard({
   userId,
   userRelationships,
   onRefresh,
+  users,
 }: MemberCardProps) {
   const currentOrganizationId = useOrganizationStateStore(
     (state: OrganizationStateStore) => state.currentOrganizationId
   );
-  const { userSession } = useAuthStore((state: AuthStore) => state);
-  const { deleteNested: deleteUser } = useUserMutation(currentOrganizationId);
+  const { isACoach, userSession } = useAuthStore((state: AuthStore) => state);
+  const { error: deleteError, deleteNested: deleteUser } = useUserMutation(currentOrganizationId);
+  const { error: createError, createNested: createRelationship } = useCoachingRelationshipMutation(currentOrganizationId);
+
+  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
-  const canDeleteUser = userRelationships.some(
+  // and make sure we can't delete ourselves. Admins can delete any user.
+  const canDeleteUser = (userRelationships?.some(
     (rel) => rel.coach_id === userSession.id && userId !== userSession.id
-  );
+  ) || (userSession.role === Role.Admin)) && userSession.id !== userId;
 
   const handleDelete = async () => {
     if (!confirm("Are you sure you want to delete this member?")) {
       return;
     }
+    await deleteUser(currentOrganizationId, userId);
+    onRefresh();
 
-    try {
-      await deleteUser(currentOrganizationId, userId);
+    if (deleteError) {
+      console.error("Error deleting member:", deleteError);
+      toast.error("Error deleting member");
       onRefresh();
-    } catch (error) {
-      console.error("Error deleting user:", error);
-      // TODO: Show an error toast here once we start using toasts for showing operation results.
+      return;
+    }
+    toast.success("Member deleted successfully");
+    onRefresh();
+  };
+
+  const handleAssignMember = (val: string) => {
+    const user = users.find((m) => m.id === val);
+    if (!user) return;
+    const member: Member = {
+      id: user.id,
+      first_name: user.first_name,
+      last_name: user.last_name,
+    };
+    setAssignedMember(member);
+  };
+
+  // Placeholder – actual UI flows will be implemented later
+  const [assignDialogOpen, setAssignDialogOpen] = useState(false);
+  const [assignMode, setAssignMode] = useState<"coach" | "coachee">("coach");
+  const [selectedMember, setSelectedMember] = useState<Member | null>(null);
+  const [assignedMember, setAssignedMember] = useState<Member | null>(null);
+
+  const handleCreateCoachingRelationship = () => {
+    if (!selectedMember || !assignedMember) return;
+
+    if (assignMode === "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,
+      });
     }
+
+    if (createError) {
+      toast.error(`Error assigning ${assignMode}`);
+      return;
+    }
+    
+    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 (
@@ -59,16 +145,82 @@ export function MemberCard({
         </h3>
         {email && <p className="text-sm text-muted-foreground">{email}</p>}
       </div>
-      {canDeleteUser && (
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={handleDelete}
-          className="text-destructive hover:text-destructive"
-        >
-          <Trash2 className="h-4 w-4" />
-        </Button>
-      )}
+      {(isACoach || userSession.role === Role.Admin) && (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className="text-muted-foreground">
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {userSession.role === Role.Admin && (
+            <>
+              <DropdownMenuItem
+                onClick={() => {
+                  setAssignMode("coach");
+                  setAssignDialogOpen(true);
+                  setSelectedMember({id: userId, first_name: firstName, last_name: lastName});
+                }}
+              >
+                Assign Coach
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => {
+                  setAssignMode("coachee");
+                  setAssignDialogOpen(true);
+                  setSelectedMember({id: userId, first_name: firstName, last_name: lastName});
+                }}
+              >
+                Assign Coachee
+              </DropdownMenuItem>
+            </>
+          )}
+          {canDeleteUser && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={handleDelete}
+                className="text-destructive focus:text-destructive"
+              >
+                <Trash2 className="mr-2 h-4 w-4" /> Delete
+              </DropdownMenuItem>
+            </>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )}
+
+      {/* Assign Coach/Coachee Modal */}
+      <Dialog open={assignDialogOpen} onOpenChange={setAssignDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {assignMode === "coach" ? "Assign Coach" : "Assign Coachee"}
+            </DialogTitle>
+            <DialogDescription>
+              Select a member to be their {assignMode === "coach" ? "coach" : "coachee"}
+            </DialogDescription>
+          </DialogHeader>
+          <Select
+            onValueChange={(val) => handleAssignMember(val)}
+            value={assignedMember?.id?.toString()}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Select a member" />
+            </SelectTrigger>
+            <SelectContent>
+              {users
+                .filter((m) => m.id !== userId)
+                .map((m) => (
+                  <SelectItem key={m.id} value={m.id.toString()}>{`${m.first_name} ${m.last_name}`}</SelectItem>
+                ))}
+            </SelectContent>
+          </Select>
+          <DialogFooter>
+            <Button onClick={handleCreateCoachingRelationship}>{assignMode === "coach" ? "Assign as Coach" : "Assign as Coachee"}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }