p 1 and 2 compeleted

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

@@ -8,6 +8,8 @@ import { Button } from "@/components/ui/button";
 import { useUser } from "@clerk/nextjs";
 import { getGymIdFromUser } from "@/lib/error-helpers";
 import log from "@/lib/logger";
+import { toast } from "@/lib/toast";
+import { CreateUserModal } from "./CreateUserModal";
 
 interface User {
   id: string;
@@ -40,6 +42,7 @@ export function UserManagement() {
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
   const [isEditing, setIsEditing] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [createModalOpen, setCreateModalOpen] = useState(false);
   const [editForm, setEditForm] = useState<{
     firstName: string;
     lastName: string;
@@ -148,8 +151,9 @@ export function UserManagement() {
       });
       if (response.ok) {
         fetchUsers();
+        toast.success("Users deleted successfully");
       } else {
-        alert("Error deleting users");
+        toast.error("Error deleting users");
       }
     } catch (error) {
       log.error("Failed to delete users", error);
@@ -255,12 +259,13 @@ export function UserManagement() {
           // Still re-fetch from server to ensure consistency
           log.debug("Re-fetching users after successful edit");
           fetchUsers();
+          toast.success("User updated successfully");
         } else {
           const errText = await response.text().catch(() => "");
           log.error("User update failed", new Error(errText), {
             status: response.status,
           });
-          alert("Error updating user");
+          toast.error("Error updating user");
         }
       } else {
         // Create (Invite) new user
@@ -278,15 +283,15 @@ export function UserManagement() {
           setIsEditing(false);
           setEditForm(null);
           fetchUsers();
-          alert("Invitation sent successfully!");
+          toast.success("Invitation sent successfully!");
         } else {
           const errorData = await response.json();
-          alert(`Error sending invitation: ${errorData.error}`);
+          toast.error(`Error sending invitation: ${errorData.error}`);
         }
       }
     } catch (error) {
       console.error(error);
-      alert("An unexpected error occurred");
+      toast.error("An unexpected error occurred");
     }
   };
 
@@ -301,8 +306,9 @@ export function UserManagement() {
         setIsDeleting(false);
         setSelectedUser(null);
         fetchUsers();
+        toast.success("User deleted successfully");
       } else {
-        alert("Error deleting user");
+        toast.error("Error deleting user");
       }
     } catch (error) {
       log.error("Failed to delete user", error);
@@ -327,22 +333,8 @@ export function UserManagement() {
           >
             Edit User
           </Button>
-          <Button
-            variant={filter === "client" ? "default" : "outline"}
-            onClick={() => {
-              setEditForm({
-                firstName: "",
-                lastName: "",
-                email: "",
-                role: "client",
-                phone: "",
-                gymId: user ? getGymIdFromUser(user) : "",
-              });
-              setSelectedUser(null);
-              setIsEditing(true);
-            }}
-          >
-            Invite User
+          <Button variant="default" onClick={() => setCreateModalOpen(true)}>
+            Create User
           </Button>
           <Button
             variant={filter === "client" ? "default" : "outline"}
@@ -657,6 +649,12 @@ export function UserManagement() {
           </CardContent>
         </Card>
       )}
+
+      <CreateUserModal
+        open={createModalOpen}
+        onOpenChange={setCreateModalOpen}
+        onSuccess={() => fetchUsers()}
+      />
     </div>
   );
 }