invitation flow basis

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

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { UserGrid, type User } from "@/components/users/UserGrid";
+import { InvitationsGrid } from "@/components/users/InvitationsGrid";
 import { Card, CardHeader, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { useUser } from "@clerk/nextjs";
@@ -14,6 +15,7 @@ import {
   useUpdateUser,
   useDeleteUser,
   useSendInvitation,
+  useInvitations,
 } from "@/hooks/use-api";
 
 interface UserManagementProps {
@@ -23,6 +25,9 @@ interface UserManagementProps {
 export function UserManagement({ gymId }: UserManagementProps) {
   const { user } = useUser();
   const [filter, setFilter] = useState<string>("all");
+  const [viewFilter, setViewFilter] = useState<"all" | "active" | "pending">(
+    "all",
+  );
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
   const [isEditing, setIsEditing] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
@@ -40,17 +45,28 @@ export function UserManagement({ gymId }: UserManagementProps) {
 
   const {
     data: users = [],
-    isLoading,
-    refetch,
+    isLoading: usersLoading,
+    refetch: refetchUsers,
   } = useUsers({
     role: filter !== "all" ? filter : undefined,
     gymId,
   });
+
+  const {
+    data: invitations = [],
+    isLoading: invitationsLoading,
+    refetch: refetchInvitations,
+  } = useInvitations(gymId);
+
   const { data: gyms = [] } = useGyms();
   const updateUser = useUpdateUser();
   const deleteUser = useDeleteUser();
   const sendInvitation = useSendInvitation();
 
+  const isLoading =
+    viewFilter === "pending" ? invitationsLoading : usersLoading;
+  const refetch = viewFilter === "pending" ? refetchInvitations : refetchUsers;
+
   const handleUserSelect = (user: User | null) => {
     setSelectedUser(user);
   };
@@ -193,6 +209,19 @@ export function UserManagement({ gymId }: UserManagementProps) {
       <div className="flex justify-between items-center">
         <h2 className="text-2xl font-bold">User Management</h2>
         <div className="flex gap-2">
+          {/* View Filter: All/Active/Pending */}
+          <select
+            value={viewFilter}
+            onChange={(e) =>
+              setViewFilter(e.target.value as "all" | "active" | "pending")
+            }
+            className="px-3 py-2 border rounded-md bg-white dark:bg-gray-800"
+          >
+            <option value="all">All Users</option>
+            <option value="active">Active Users</option>
+            <option value="pending">Pending Invitations</option>
+          </select>
+
           <Button
             variant={filter === "all" ? "default" : "outline"}
             onClick={() => setFilter("all")}
@@ -220,7 +249,7 @@ export function UserManagement({ gymId }: UserManagementProps) {
             variant={filter === "client" ? "default" : "outline"}
             onClick={() => setFilter("client")}
           >
-            Clientsa
+            Clients
           </Button>
           <Button
             variant={filter === "trainer" ? "default" : "outline"}
@@ -245,33 +274,48 @@ export function UserManagement({ gymId }: UserManagementProps) {
 
       <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>
+          {viewFilter === "pending" ? (
+            <>Showing {invitations.length} pending invitations</>
+          ) : (
+            <>
+              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="default" onClick={handleRefresh}>
             Refresh
           </Button>
-          <Button variant="default" onClick={handleExport}>
-            Export CSV
-          </Button>
+          {viewFilter !== "pending" && (
+            <Button variant="default" onClick={handleExport}>
+              Export CSV
+            </Button>
+          )}
         </div>
       </div>
 
       <Card>
         <CardContent className="p-0">
-          <UserGrid
-            users={users}
-            onUserSelect={(user) => handleUserSelect(user)}
-            onEditUser={handleEditUser}
-            onDeleteUser={handleDeleteUser}
-            onBulkDelete={handleBulkDelete}
-            loading={isLoading}
-          />
+          {viewFilter === "pending" ? (
+            <InvitationsGrid
+              invitations={invitations}
+              onRefetch={refetchInvitations}
+            />
+          ) : (
+            <UserGrid
+              users={users}
+              onUserSelect={(user) => handleUserSelect(user)}
+              onEditUser={handleEditUser}
+              onDeleteUser={handleDeleteUser}
+              onBulkDelete={handleBulkDelete}
+              loading={isLoading}
+            />
+          )}
         </CardContent>
       </Card>
 
@@ -580,7 +624,10 @@ export function UserManagement({ gymId }: UserManagementProps) {
       <CreateUserModal
         open={createModalOpen}
         onOpenChange={setCreateModalOpen}
-        onSuccess={() => refetch()}
+        onSuccess={() => {
+          refetchUsers();
+          refetchInvitations();
+        }}
       />
     </div>
   );