From dd78602dd6774fe31a5d235d56303ff62be9b3b2 Mon Sep 17 00:00:00 2001
From: Aleksandar <b.aleksandar@outlook.com>
Date: Thu, 11 Dec 2025 13:39:42 +0100
Subject: [PATCH] style: improve UserManagement layout with flex-wrap and
 better organization

---
 .../src/components/users/UserManagement.tsx   | 178 ++++++++++--------
 1 file changed, 96 insertions(+), 82 deletions(-)

diff --git a/apps/admin/src/components/users/UserManagement.tsx b/apps/admin/src/components/users/UserManagement.tsx
index b1640a1..1878123 100644
--- a/apps/admin/src/components/users/UserManagement.tsx
+++ b/apps/admin/src/components/users/UserManagement.tsx
@@ -205,92 +205,106 @@ export function UserManagement() {
   };
 
   return (
-    <div className="space-y-6">
-      <div className="flex justify-between items-center">
-        <h2 className="text-2xl font-bold">User Management</h2>
-        <div className="flex gap-2">
-          <Button
-            variant={filter === "all" ? "primary" : "secondary"}
-            onClick={() => setFilter("all")}
-          >
-            All Users
-          </Button>
-          <Button
-            variant="secondary"
-            onClick={() => selectedUser && handleEditUser(selectedUser)}
-            disabled={!selectedUser}
-          >
-            Edit User
-          </Button>
-          <Button
-            variant="secondary"
-            onClick={() => {
-              setEditForm({
-                firstName: "",
-                lastName: "",
-                email: "",
-                role: "client",
-                phone: "",
-              });
-              setSelectedUser(null);
-              setIsEditing(true);
-            }}
-          >
-            Invite User
-          </Button>
-          <Button
-            variant="secondary"
-            onClick={() => selectedUser && handleDeleteUser(selectedUser)}
-            disabled={!selectedUser}
-          >
-            Delete User
-          </Button>
-          <Button
-            variant={filter === "client" ? "primary" : "secondary"}
-            onClick={() => setFilter("client")}
-          >
-            Clients
-          </Button>
-          <Button
-            variant={filter === "trainer" ? "primary" : "secondary"}
-            onClick={() => setFilter("trainer")}
-          >
-            Trainers
-          </Button>
-          <Button
-            variant={filter === "admin" ? "primary" : "secondary"}
-            onClick={() => setFilter("admin")}
-          >
-            Admins
-          </Button>
-          <Button
-            variant={filter === "superAdmin" ? "primary" : "secondary"}
-            onClick={() => setFilter("superAdmin")}
-          >
-            Super Admins
-          </Button>
-        </div>
+    <div className="space-y-4">
+      {/* Header Section */}
+      <div>
+        <h3 className="text-lg font-bold text-gray-900">User Management</h3>
+        <p className="text-sm text-gray-600 mt-1">Manage and monitor your fitness clients</p>
       </div>
 
-      <div className="flex justify-between items-center">
-        <div className="text-sm text-gray-600">
-          Showing {users.length} users
-          {selectedUser && (
-            <span className="ml-4 text-blue-600">
-              Selected: {selectedUser.firstName} {selectedUser.lastName}
-            </span>
-          )}
-        </div>
-        <div className="flex gap-2">
-          <Button variant="secondary" onClick={handleRefresh}>
-            Refresh
-          </Button>
-          <Button variant="secondary" onClick={handleExport}>
-            Export CSV
-          </Button>
-        </div>
+      {/* Filter Buttons */}
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant={filter === "all" ? "primary" : "secondary"}
+          onClick={() => setFilter("all")}
+          className="text-xs"
+        >
+          All Users
+        </Button>
+        <Button
+          variant={filter === "client" ? "primary" : "secondary"}
+          onClick={() => setFilter("client")}
+          className="text-xs"
+        >
+          Clients
+        </Button>
+        <Button
+          variant={filter === "trainer" ? "primary" : "secondary"}
+          onClick={() => setFilter("trainer")}
+          className="text-xs"
+        >
+          Trainers
+        </Button>
+        <Button
+          variant={filter === "admin" ? "primary" : "secondary"}
+          onClick={() => setFilter("admin")}
+          className="text-xs"
+        >
+          Admins
+        </Button>
+        <Button
+          variant={filter === "superAdmin" ? "primary" : "secondary"}
+          onClick={() => setFilter("superAdmin")}
+          className="text-xs"
+        >
+          Super Admins
+        </Button>
       </div>
 
+      {/* Action Buttons */}
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant="secondary"
+          onClick={() => selectedUser && handleEditUser(selectedUser)}
+          disabled={!selectedUser}
+          className="text-xs"
+        >
+          Edit User
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() => {
+            setEditForm({
+              firstName: "",
+              lastName: "",
+              email: "",
+              role: "client",
+              phone: "",
+            });
+            setSelectedUser(null);
+            setIsEditing(true);
+          }}
+          className="text-xs"
+        >
+          Invite User
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() => selectedUser && handleDeleteUser(selectedUser)}
+          disabled={!selectedUser}
+          className="text-xs"
+        >
+          Delete User
+        </Button>
+        <Button variant="secondary" onClick={handleRefresh} className="text-xs">
+          Refresh
+        </Button>
+        <Button variant="secondary" onClick={handleExport} className="text-xs">
+          Export CSV
+        </Button>
+      </div>
+
+      {/* Stats */}
+      <div className="text-sm text-gray-600 px-4 py-2 bg-gray-50 rounded-lg">
+        Showing {users.length} users
+        {selectedUser && (
+          <span className="ml-4 text-blue-600 font-medium">
+            Selected: {selectedUser.firstName} {selectedUser.lastName}
+          </span>
+        )}
+      </div>
+
+      {/* User Grid */}
       <Card>
         <CardContent className="p-0">
           <UserGrid