feat: complete user management workflow

modules/settings/components/SettingsOverview.tsx

@@ -2,8 +2,17 @@ import { Activity, Building2, Server, ShieldCheck, Users } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import type { AuditLog, Membership, Organization, PublicAccount, RoleDefinition, SystemIncident } from "@/modules/core/types";
+import type {
+  AuditLog,
+  JoinRequest,
+  Membership,
+  Organization,
+  PublicAccount,
+  RoleDefinition,
+  SystemIncident,
+} from "@/modules/core/types";
 import { ROLE_LABELS } from "@/modules/core/types";
+import { UserManagementClient } from "@/modules/settings/components/UserManagementClient";
 import type { RoleId } from "@/modules/core/types";
 
 type SettingsOverviewProps = {
@@ -12,6 +21,7 @@ type SettingsOverviewProps = {
   auditLogs: AuditLog[];
   organizations: Organization[];
   memberships: Membership[];
+  joinRequests: JoinRequest[];
   incidents: SystemIncident[];
 };
 
@@ -29,6 +39,7 @@ export function SettingsOverview({
   auditLogs,
   organizations,
   memberships,
+  joinRequests,
   incidents,
 }: SettingsOverviewProps): React.ReactElement {
   const activeAccountCount = accounts.filter((account) => account.status === "active").length;
@@ -171,6 +182,8 @@ export function SettingsOverview({
         </Card>
       </section>
 
+      <UserManagementClient organizations={organizations} roles={roles} joinRequests={joinRequests} />
+
       <section className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
         <Card>
           <CardHeader>