Merge pull request #92 from refactor-group/88-feature-add-member-management-page-add-users

88 feature add member management page add users

Author: calebbourg

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

@@ -3,6 +3,8 @@ import "@/styles/globals.css";
 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";
 export const metadata: Metadata = {
   title: siteConfig.name,
   description: "Manage coaching members",
@@ -14,11 +16,14 @@ export default function MembersLayout({
   children: React.ReactNode;
 }>) {
   return (
-    // Ensure that SiteHeader has enough vertical space to stay sticky at the top
-    // of the page by using "min-h-screen" in the parent div
-    <div className="min-h-screen">
-      <SiteHeader />
-      <main>{children}</main>
-    </div>
+    <SidebarProvider>
+      <div className="flex min-h-screen min-w-full">
+        <AppSidebar />
+        <SidebarInset>
+          <SiteHeader />
+          <main className="flex-1 p-6">{children}</main>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
   );
 }

src/components/ui/app-sidebar.tsx

@@ -20,6 +20,7 @@ import {
   SidebarRail,
   SidebarSeparator,
 } from "@/components/ui/sidebar";
+import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
 
 // Custom styles for menu buttons to ensure consistent centering
 const menuButtonStyles = {
@@ -30,6 +31,8 @@ const menuButtonStyles = {
 };
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  const { currentOrganizationId } = useOrganizationStateStore((state) => state);
+
   return (
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader className="h-16 flex flex-col justify-between pb-0">
@@ -101,7 +104,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                     menuButtonStyles.buttonCollapsed
                   )}
                 >
-                  <a href="/members">
+                  <a href={`/organizations/${currentOrganizationId}/members`}>
                     <span className={menuButtonStyles.iconWrapper}>
                       <Users className="h-4 w-4" />
                     </span>

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

@@ -9,6 +9,8 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogDescription,
+  DialogFooter,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
@@ -39,8 +41,12 @@ export function AddMemberDialog({
     lastName: "",
     displayName: "",
     email: "",
+    password: "",
+    confirmPassword: "", // For validation
   });
 
+  const [passwordError, setPasswordError] = useState("");
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData((prev) => ({
@@ -52,80 +58,128 @@ export function AddMemberDialog({
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
+    // Validate passwords match
+    // we may want to add other validations in the future
+    if (formData.password !== formData.confirmPassword) {
+      setPasswordError("Passwords do not match");
+      return;
+    }
+
     const newUser: NewUser = {
       first_name: formData.firstName,
       last_name: formData.lastName,
       display_name: formData.displayName,
       email: formData.email,
+      password: formData.password, // Add password to the NewUser type
     };
 
-    await createUserNested(currentOrganizationId, newUser);
-    setFormData({
-      firstName: "",
-      lastName: "",
-      displayName: "",
-      email: "",
-    });
-    // SWR Refresh
-    onMemberAdded();
-    onOpenChange(false);
+    try {
+      await createUserNested(currentOrganizationId, newUser);
+      setFormData({
+        firstName: "",
+        lastName: "",
+        displayName: "",
+        email: "",
+        password: "",
+        confirmPassword: "",
+      });
+      setPasswordError("");
+      onMemberAdded();
+      onOpenChange(false);
+    } catch (error) {
+      console.error("Error creating user:", error);
+      // Handle error appropriately
+    }
   };
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Add New Member</DialogTitle>
+          <DialogDescription>
+            Create a new member account. The member will be able to change their
+            password after first login.
+          </DialogDescription>
         </DialogHeader>
-        <form onSubmit={handleSubmit} className="space-y-4 pt-4">
-          <div className="space-y-2">
-            <Label htmlFor="firstName">First Name</Label>
-            <Input
-              id="firstName"
-              name="firstName"
-              value={formData.firstName}
-              onChange={handleInputChange}
-              placeholder="Enter first name"
-              required
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="lastName">Last Name</Label>
-            <Input
-              id="lastName"
-              name="lastName"
-              value={formData.lastName}
-              onChange={handleInputChange}
-              placeholder="Enter last name"
-              required
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="displayName">Display Name</Label>
-            <Input
-              id="displayName"
-              name="displayName"
-              value={formData.displayName}
-              onChange={handleInputChange}
-              placeholder="Enter display name"
-              required
-            />
+        <form onSubmit={handleSubmit}>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="firstName">First Name</Label>
+              <Input
+                id="firstName"
+                name="firstName"
+                value={formData.firstName}
+                onChange={handleInputChange}
+                placeholder="Enter first name"
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="lastName">Last Name</Label>
+              <Input
+                id="lastName"
+                name="lastName"
+                value={formData.lastName}
+                onChange={handleInputChange}
+                placeholder="Enter last name"
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="displayName">Display Name</Label>
+              <Input
+                id="displayName"
+                name="displayName"
+                value={formData.displayName}
+                onChange={handleInputChange}
+                placeholder="Enter display name"
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                value={formData.email}
+                onChange={handleInputChange}
+                placeholder="Enter email address"
+                required
+              />
+            </div>
+            <div className="grid gap-4">
+              <Label htmlFor="password">Initial Password</Label>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                value={formData.password}
+                onChange={handleInputChange}
+                required
+              />
+            </div>
+            <div className="grid gap-4">
+              <Label htmlFor="confirmPassword">Confirm Password</Label>
+              <Input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                value={formData.confirmPassword}
+                onChange={handleInputChange}
+                required
+              />
+            </div>
+            {passwordError && (
+              <div className="text-red-500 text-sm">{passwordError}</div>
+            )}
           </div>
-          <div className="space-y-2">
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
-              name="email"
-              type="email"
-              value={formData.email}
-              onChange={handleInputChange}
-              placeholder="Enter email address"
-              required
-            />
+          <div className="pt-4">
+            <DialogFooter>
+              <Button type="submit">Create Member</Button>
+            </DialogFooter>
           </div>
-          <Button type="submit" className="w-full">
-            Add Member
-          </Button>
         </form>
       </DialogContent>
     </Dialog>

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

@@ -19,6 +19,11 @@ export function MemberContainer({
   onRefresh,
   isLoading,
 }: MemberContainerProps) {
+  // Check if current user is a coach in any relationship
+  const isCoachInAnyRelationship = relationships.some(
+    (rel) => rel.coach_id === userSession.id
+  );
+
   // Find relationships where current user is either coach or coachee
   const userRelationships = relationships.filter(
     (rel) =>
@@ -45,7 +50,12 @@ export function MemberContainer({
     <div className="space-y-6">
       <div className="flex justify-between items-center">
         <h2 className="text-2xl font-semibold">Members</h2>
-        <AddMemberButton onMemberAdded={onRefresh} />
+        {/* Only show the button if user is a coach to _some_ user within the
+        scope of the organization. We may come back and add this directly to user
+        data.  */}
+        {isCoachInAnyRelationship && (
+          <AddMemberButton onMemberAdded={onRefresh} />
+        )}
       </div>
       <MemberList users={associatedUsers} />
     </div>

src/components/ui/organization-selector.tsx

@@ -30,19 +30,17 @@ function OrganizationsList({ userId }: { userId: Id }) {
 
   // Be sure to cache the list of current organizations in the OrganizationStateStore
   useEffect(() => {
-    if (!organizations.length) return;
+    if (!organizations?.length) return;
     console.debug(
       `organizations (useEffect): ${JSON.stringify(organizations)}`
     );
     setCurrentOrganizations(organizations);
-  }, [organizations]);
+  }, [organizations, setCurrentOrganizations]);
 
   if (isLoading) return <div>Loading...</div>;
   if (isError) return <div>Error loading organizations</div>;
   if (!organizations?.length) return <div>No organizations found</div>;
 
-  console.debug(`organizations: ${JSON.stringify(organizations)}`);
-
   return (
     <>
       {organizations.map((org) => (
@@ -61,7 +59,7 @@ export default function OrganizationSelector({
 }: OrganizationSelectorProps) {
   const {
     currentOrganizationId,
-    setCurrentOrganizationId,
+    setCurrentOrganization,
     getCurrentOrganization,
   } = useOrganizationStateStore((state) => state);
   const { resetCoachingSessionState } = useCoachingSessionStateStore(
@@ -72,7 +70,8 @@ export default function OrganizationSelector({
   );
 
   const handleSetOrganization = (organizationId: Id) => {
-    setCurrentOrganizationId(organizationId);
+    const organization = getCurrentOrganization(organizationId);
+    setCurrentOrganization(organization);
     console.info("Resetting Coaching Session State");
     resetCoachingRelationshipState();
     resetCoachingSessionState();

src/lib/api/entity-api.ts

@@ -372,8 +372,8 @@ export namespace EntityApi {
     api: {
       create: (entity: T) => Promise<U>;
       createNested: (id: Id, entity: T) => Promise<U>;
-      update: (id: Id, entity: T) => Promise<T>;
-      delete: (id: Id) => Promise<T>;
+      update: (id: Id, entity: T) => Promise<U>;
+      delete: (id: Id) => Promise<U>;
     }
   ) => {
     const [isLoading, setIsLoading] = useState(false);

src/types/user.ts

@@ -11,11 +11,11 @@ export interface User {
 }
 
 export interface NewUser {
-  email: string;
-  password?: string;
   first_name: string;
   last_name: string;
   display_name: string;
+  email: string;
+  password: string;
 }
 
 export function parseUser(data: unknown): User {