rb fine tune

apps/admin/src/components/users/CreateUserModal.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useUser } from "@clerk/nextjs";
 import {
   Dialog,
   DialogContent,
@@ -27,6 +28,8 @@ import {
 } from "@/lib/validation/user-schemas";
 import { ChevronLeft, ChevronRight, Check } from "lucide-react";
 import { useGyms } from "@/hooks/use-api";
+import { getInvitableRoles } from "@/lib/auth/permissions";
+import type { UserRole } from "@fitai/shared";
 
 interface CreateUserModalProps {
   open: boolean;
@@ -47,6 +50,14 @@ export function CreateUserModal({
   const [clientInfo, setClientInfo] = useState<ClientInfoData | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const { data: gyms = [] } = useGyms();
+  const { user } = useUser();
+
+  // Get current user's role and gym from Clerk metadata
+  const currentUserRole = (user?.publicMetadata?.role as UserRole) || "client";
+  const currentUserGymId = user?.publicMetadata?.gymId as string | null;
+
+  // Determine which roles the current user can create
+  const invitableRoles = getInvitableRoles(currentUserRole);
 
   // Step 1: Role Selection Form
   const roleForm = useForm<RoleSelectionData>({
@@ -138,10 +149,18 @@ export function CreateUserModal({
         invitationData,
       );
 
+      // Auto-assign gym for non-superAdmins
+      // SuperAdmins can select gym manually, others use their own gym
+      const finalPayload = {
+        ...payload,
+        gymId:
+          currentUserRole === "superAdmin" ? payload.gymId : currentUserGymId,
+      };
+
       const response = await fetch("/api/users/create", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload),
+        body: JSON.stringify(finalPayload),
       });
 
       if (!response.ok) {
@@ -261,7 +280,7 @@ export function CreateUserModal({
             <div className="space-y-2">
               <label className="text-sm font-medium">Role *</label>
               <div className="grid grid-cols-3 gap-3">
-                {(["admin", "trainer", "client"] as const).map((role) => (
+                {invitableRoles.map((role) => (
                   <label
                     key={role}
                     className={`flex items-center justify-center p-4 border-2 rounded-lg cursor-pointer transition-colors ${
@@ -463,6 +482,39 @@ export function CreateUserModal({
                 </p>
               </div>
             )}
+
+            {/* Gym Selector - Only for SuperAdmins */}
+            {currentUserRole === "superAdmin" && (
+              <div className="space-y-2">
+                <label className="text-sm font-medium">
+                  Assign to Gym (Optional)
+                </label>
+                <select
+                  {...invitationForm.register("gymId")}
+                  className="w-full p-2 border border-gray-300 rounded-md"
+                >
+                  <option value="">Select a gym...</option>
+                  {gyms.map((gym) => (
+                    <option key={gym.id} value={gym.id}>
+                      {gym.name}
+                    </option>
+                  ))}
+                </select>
+                <p className="text-xs text-gray-500">
+                  If not selected, user will not be assigned to any gym
+                </p>
+              </div>
+            )}
+
+            {/* Info message for non-superAdmins */}
+            {currentUserRole !== "superAdmin" && currentUserGymId && (
+              <div className="p-4 bg-gray-50 border border-gray-200 rounded-md">
+                <p className="text-sm text-gray-700">
+                  User will be automatically assigned to your gym
+                </p>
+              </div>
+            )}
+
             <DialogFooter className="flex justify-between">
               <Button type="button" variant="outline" onClick={handleBack}>
                 <ChevronLeft className="mr-2 h-4 w-4" /> Back

apps/admin/src/components/users/UserManagement.tsx

@@ -34,6 +34,8 @@ export function UserManagement({ gymId }: UserManagementProps) {
     role: string;
     phone: string;
     gymId: string;
+    membershipType?: string;
+    membershipStatus?: string;
   } | null>(null);
 
   const {
@@ -62,6 +64,8 @@ export function UserManagement({ gymId }: UserManagementProps) {
       role: user.role,
       phone: user.phone || "",
       gymId: user.gymId || "",
+      membershipType: user.client?.membershipType || "basic",
+      membershipStatus: user.client?.membershipStatus || "active",
     });
     setIsEditing(true);
   };
@@ -133,7 +137,7 @@ export function UserManagement({ gymId }: UserManagementProps) {
 
     try {
       if (selectedUser) {
-        const payload = {
+        const payload: any = {
           id: selectedUser.id,
           email: editForm.email,
           firstName: editForm.firstName,
@@ -143,6 +147,12 @@ export function UserManagement({ gymId }: UserManagementProps) {
           gymId: editForm.gymId === "" ? null : editForm.gymId,
         };
 
+        // Include membership fields if user is a client
+        if (editForm.role === "client") {
+          payload.membershipType = editForm.membershipType;
+          payload.membershipStatus = editForm.membershipStatus;
+        }
+
         await updateUser.mutateAsync(payload);
         setIsEditing(false);
         setEditForm(null);
@@ -351,26 +361,74 @@ export function UserManagement({ gymId }: UserManagementProps) {
                   className="w-full border border-gray-300 rounded px-3 py-2"
                 />
               </div>
-              <div className="mb-4">
-                <label className="block text-sm font-medium mb-1">Gym</label>
-                <select
-                  value={editForm.gymId}
-                  onChange={(e) =>
-                    setEditForm({ ...editForm, gymId: e.target.value })
-                  }
-                  className="w-full border border-gray-300 rounded px-3 py-2"
-                >
-                  <option value="">Proceed without gym</option>
-                  {gyms.map((g) => (
-                    <option key={g.id} value={g.id}>
-                      {g.name}
-                    </option>
-                  ))}
-                </select>
-                <p className="text-xs text-gray-500 mt-1">
-                  Select an active gym or proceed without a gym.
-                </p>
-              </div>
+
+              {/* Only superAdmins and admins can reassign gyms */}
+              {user?.publicMetadata?.role !== "trainer" && (
+                <div className="mb-4">
+                  <label className="block text-sm font-medium mb-1">Gym</label>
+                  <select
+                    value={editForm.gymId}
+                    onChange={(e) =>
+                      setEditForm({ ...editForm, gymId: e.target.value })
+                    }
+                    className="w-full border border-gray-300 rounded px-3 py-2"
+                  >
+                    <option value="">Proceed without gym</option>
+                    {gyms.map((g) => (
+                      <option key={g.id} value={g.id}>
+                        {g.name}
+                      </option>
+                    ))}
+                  </select>
+                  <p className="text-xs text-gray-500 mt-1">
+                    Select an active gym or proceed without a gym.
+                  </p>
+                </div>
+              )}
+
+              {/* Client-specific fields - only show when role is client */}
+              {editForm.role === "client" && (
+                <>
+                  <div className="mb-4">
+                    <label className="block text-sm font-medium mb-1">
+                      Membership Type
+                    </label>
+                    <select
+                      value={editForm.membershipType || "basic"}
+                      onChange={(e) =>
+                        setEditForm({
+                          ...editForm,
+                          membershipType: e.target.value,
+                        })
+                      }
+                      className="w-full border border-gray-300 rounded px-3 py-2"
+                    >
+                      <option value="basic">Basic</option>
+                      <option value="premium">Premium</option>
+                      <option value="vip">VIP</option>
+                    </select>
+                  </div>
+                  <div className="mb-4">
+                    <label className="block text-sm font-medium mb-1">
+                      Membership Status
+                    </label>
+                    <select
+                      value={editForm.membershipStatus || "active"}
+                      onChange={(e) =>
+                        setEditForm({
+                          ...editForm,
+                          membershipStatus: e.target.value,
+                        })
+                      }
+                      className="w-full border border-gray-300 rounded px-3 py-2"
+                    >
+                      <option value="active">Active</option>
+                      <option value="inactive">Inactive</option>
+                      <option value="suspended">Suspended</option>
+                    </select>
+                  </div>
+                </>
+              )}
               <div className="flex justify-end gap-2">
                 <button
                   type="button"