@tidecloak/ui-framework 0.0.1

package/src/components/pages/base/UsersPageBase.tsx

@@ -0,0 +1,843 @@
+import React, { useState, useEffect } from "react";
+import { Users, Pencil, Search, Shield, User as UserIcon, Plus, Trash2, X, Link, Unlink, Copy, Check, AlertCircle } from "lucide-react";
+import { useAutoRefresh } from "../../../hooks/useAutoRefresh";
+import { RefreshButton } from "../../common/RefreshButton";
+import { StatusBadge } from "../../common/StatusBadge";
+import { LoadingSkeleton } from "../../common/LoadingSkeleton";
+import { EmptyState } from "../../common/EmptyState";
+import { DataTable } from "../../data-table/DataTable";
+import { ConfirmDialog } from "../../dialogs/ConfirmDialog";
+import { defaultComponents } from "../../ui";
+import type { BaseDataItem, ColumnDef, ToastConfig } from "../../../types";
+
+export interface UserItem extends BaseDataItem {
+  username?: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  role: string | string[];
+  enabled: boolean;
+  linked?: boolean;
+  isAdmin?: boolean;
+}
+
+export interface RoleItem {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+export interface UserFormData {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  assignedRoles: string[];
+}
+
+export interface CreateUserFormData {
+  username: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+}
+
+export interface UsersPageBaseProps<T extends UserItem = UserItem> {
+  /** Page title */
+  title?: string;
+  /** Page description */
+  description?: string;
+  /** Whether the API is ready to be called (defaults to true for backwards compatibility) */
+  isReady?: boolean;
+  /** Data fetcher */
+  fetchUsers: () => Promise<T[]>;
+  /** Fetch available roles */
+  fetchRoles: () => Promise<{ roles: RoleItem[] }>;
+  /** Create user handler */
+  onCreate: (data: CreateUserFormData) => Promise<void>;
+  /** Update profile handler */
+  onUpdateProfile: (data: { id: string; firstName: string; lastName: string; email: string }) => Promise<void>;
+  /** Update roles handler */
+  onUpdateRoles: (data: { id: string; rolesToAdd?: string[]; rolesToRemove?: string[] }) => Promise<void>;
+  /** Delete user handler */
+  onDelete: (userId: string) => Promise<void>;
+  /** Set user enabled/disabled */
+  onSetEnabled?: (userId: string, enabled: boolean) => Promise<void>;
+  /** Get Tide link URL */
+  getTideLinkUrl?: (userId: string) => Promise<{ linkUrl: string }>;
+  /** Check if user can create more users */
+  checkUserLimit?: () => Promise<{ allowed: boolean; current: number; limit: number; tierName?: string }>;
+  /** License info for over-limit warnings */
+  licenseInfo?: {
+    overLimit?: {
+      users: {
+        isOverLimit: boolean;
+        enabled: number;
+        limit: number;
+        overBy: number;
+      };
+    };
+  };
+  /** Toast handler */
+  toast?: (config: ToastConfig) => void;
+  /** Auto-refresh interval */
+  refreshInterval?: number;
+  /** Query invalidation */
+  invalidateQueries?: (queryKeys: string[]) => void;
+  /** Query keys */
+  queryKeys?: string[];
+  /** Custom columns */
+  columns?: ColumnDef<T>[];
+  /** Custom components */
+  components?: {
+    Card?: React.ComponentType<any>;
+    CardContent?: React.ComponentType<any>;
+    Button?: React.ComponentType<any>;
+    Badge?: React.ComponentType<any>;
+    Skeleton?: React.ComponentType<any>;
+    Input?: React.ComponentType<any>;
+    Label?: React.ComponentType<any>;
+    Switch?: React.ComponentType<any>;
+    ScrollArea?: React.ComponentType<any>;
+    Table?: React.ComponentType<any>;
+    TableHeader?: React.ComponentType<any>;
+    TableBody?: React.ComponentType<any>;
+    TableRow?: React.ComponentType<any>;
+    TableHead?: React.ComponentType<any>;
+    TableCell?: React.ComponentType<any>;
+    Dialog?: React.ComponentType<any>;
+    DialogContent?: React.ComponentType<any>;
+    DialogHeader?: React.ComponentType<any>;
+    DialogTitle?: React.ComponentType<any>;
+    DialogDescription?: React.ComponentType<any>;
+    DialogFooter?: React.ComponentType<any>;
+    AlertDialog?: React.ComponentType<any>;
+    AlertDialogContent?: React.ComponentType<any>;
+    AlertDialogHeader?: React.ComponentType<any>;
+    AlertDialogTitle?: React.ComponentType<any>;
+    AlertDialogDescription?: React.ComponentType<any>;
+    AlertDialogFooter?: React.ComponentType<any>;
+    AlertDialogAction?: React.ComponentType<any>;
+    AlertDialogCancel?: React.ComponentType<any>;
+    Alert?: React.ComponentType<any>;
+    AlertDescription?: React.ComponentType<any>;
+    UpgradeBanner?: React.ComponentType<any>;
+  };
+  /** Additional class name */
+  className?: string;
+}
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
+/**
+ * UsersPage - Generic user management page
+ *
+ * @example
+ * ```tsx
+ * <UsersPage
+ *   fetchUsers={api.admin.users.list}
+ *   fetchRoles={() => api.admin.roles.listAll()}
+ *   onCreate={api.admin.users.add}
+ *   onUpdateProfile={api.admin.users.updateProfile}
+ *   onUpdateRoles={api.admin.users.updateRoles}
+ *   onDelete={api.admin.users.delete}
+ *   onSetEnabled={(id, enabled) => api.admin.users.setEnabled(id, enabled)}
+ *   toast={toast}
+ * />
+ * ```
+ */
+export function UsersPageBase<T extends UserItem = UserItem>({
+  title = "Manage Users",
+  description = "Manage user accounts, roles, and permissions",
+  isReady = true,
+  fetchUsers,
+  fetchRoles,
+  onCreate,
+  onUpdateProfile,
+  onUpdateRoles,
+  onDelete,
+  onSetEnabled,
+  getTideLinkUrl,
+  checkUserLimit,
+  licenseInfo,
+  toast,
+  refreshInterval = 15,
+  invalidateQueries,
+  queryKeys,
+  columns: customColumns,
+  components = {},
+  className,
+}: UsersPageBaseProps<T>) {
+  // State
+  const [users, setUsers] = useState<T[]>([]);
+  const [allRoles, setAllRoles] = useState<RoleItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [search, setSearch] = useState("");
+  const [editingUser, setEditingUser] = useState<T | null>(null);
+  const [creatingUser, setCreatingUser] = useState(false);
+  const [deletingUser, setDeletingUser] = useState<T | null>(null);
+  const [copyStatus, setCopyStatus] = useState("");
+  const [userLimit, setUserLimit] = useState<{ allowed: boolean; current: number; limit: number; tierName?: string } | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [formData, setFormData] = useState<UserFormData>({
+    id: "",
+    firstName: "",
+    lastName: "",
+    email: "",
+    assignedRoles: [],
+  });
+  const [initialRoles, setInitialRoles] = useState<string[]>([]);
+
+  const [createFormData, setCreateFormData] = useState<CreateUserFormData>({
+    username: "",
+    firstName: "",
+    lastName: "",
+    email: "",
+  });
+
+  // Components (use defaultComponents from ui if not provided)
+  const Card = components.Card || defaultComponents.Card;
+  const CardContent = components.CardContent || defaultComponents.CardContent;
+  const Button = components.Button || defaultComponents.Button;
+  const Badge = components.Badge || defaultComponents.Badge;
+  const Input = components.Input || defaultComponents.Input;
+  const Label = components.Label || defaultComponents.Label;
+  const Switch = components.Switch || defaultComponents.Switch;
+  const ScrollArea = components.ScrollArea || defaultComponents.ScrollArea;
+  const Dialog = components.Dialog || defaultComponents.Dialog;
+  const DialogContent = components.DialogContent || defaultComponents.DialogContent;
+  const DialogHeader = components.DialogHeader || defaultComponents.DialogHeader;
+  const DialogTitle = components.DialogTitle || defaultComponents.DialogTitle;
+  const DialogDescription = components.DialogDescription || defaultComponents.DialogDescription;
+  const DialogFooter = components.DialogFooter || defaultComponents.DialogFooter;
+  const Alert = components.Alert || defaultComponents.Alert;
+  const AlertDescription = components.AlertDescription || defaultComponents.AlertDescription;
+
+  // Fetch data
+  const loadData = async () => {
+    setIsLoading(true);
+    try {
+      const [usersResult, rolesResult, limitResult] = await Promise.all([
+        fetchUsers(),
+        fetchRoles(),
+        checkUserLimit?.(),
+      ]);
+      setUsers(Array.isArray(usersResult) ? usersResult : (usersResult as any).users || []);
+      setAllRoles(Array.isArray(rolesResult) ? rolesResult : (rolesResult as any).roles || []);
+      if (limitResult) setUserLimit(limitResult);
+      if (invalidateQueries && queryKeys) {
+        invalidateQueries(queryKeys);
+      }
+    } catch (error) {
+      console.error("Error fetching users:", error);
+      toast?.({
+        title: "Failed to fetch users",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Auto refresh (blocked until API is ready)
+  const { secondsRemaining, refreshNow } = useAutoRefresh({
+    intervalSeconds: refreshInterval,
+    refresh: loadData,
+    isBlocked: !isReady || isLoading || isSubmitting,
+  });
+
+  // Initial fetch (only when API is ready)
+  useEffect(() => {
+    if (isReady) {
+      void loadData();
+    }
+  }, [isReady]);
+
+  // Handlers
+  const handleEdit = (user: T) => {
+    const userRoles = Array.isArray(user.role) ? user.role : user.role ? [user.role] : [];
+    setEditingUser(user);
+    setInitialRoles(userRoles);
+    setFormData({
+      id: user.id,
+      firstName: user.firstName,
+      lastName: user.lastName,
+      email: user.email,
+      assignedRoles: userRoles,
+    });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!editingUser) return;
+
+    const profileChanged =
+      editingUser.firstName !== formData.firstName ||
+      editingUser.lastName !== formData.lastName ||
+      editingUser.email !== formData.email;
+
+    const rolesToAdd = formData.assignedRoles.filter((role) => !initialRoles.includes(role));
+    const rolesToRemove = initialRoles.filter((role) => !formData.assignedRoles.includes(role));
+    const rolesChanged = rolesToAdd.length > 0 || rolesToRemove.length > 0;
+
+    setIsSubmitting(true);
+    try {
+      if (profileChanged) {
+        await onUpdateProfile({
+          id: formData.id,
+          firstName: formData.firstName,
+          lastName: formData.lastName,
+          email: formData.email,
+        });
+      }
+
+      if (rolesChanged) {
+        await onUpdateRoles({
+          id: formData.id,
+          rolesToAdd: rolesToAdd.length > 0 ? rolesToAdd : undefined,
+          rolesToRemove: rolesToRemove.length > 0 ? rolesToRemove : undefined,
+        });
+      }
+
+      setEditingUser(null);
+      toast?.({ title: "User updated successfully" });
+      await loadData();
+    } catch (error) {
+      toast?.({
+        title: "Failed to update user",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCreateSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    try {
+      await onCreate(createFormData);
+      setCreatingUser(false);
+      setCreateFormData({ username: "", firstName: "", lastName: "", email: "" });
+      toast?.({ title: "User created successfully" });
+      await loadData();
+    } catch (error) {
+      toast?.({
+        title: "Failed to create user",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!deletingUser) return;
+    setIsSubmitting(true);
+    try {
+      await onDelete(deletingUser.id);
+      setDeletingUser(null);
+      setEditingUser(null);
+      toast?.({ title: "User deleted successfully" });
+      await loadData();
+    } catch (error) {
+      toast?.({
+        title: "Failed to delete user",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleSetEnabled = async (userId: string, enabled: boolean) => {
+    if (!onSetEnabled) return;
+    try {
+      await onSetEnabled(userId, enabled);
+      toast?.({ title: enabled ? "User enabled" : "User disabled" });
+      await loadData();
+    } catch (error) {
+      toast?.({
+        title: "Failed to update user status",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleCopyTideLink = async () => {
+    if (!editingUser || !getTideLinkUrl) return;
+    try {
+      const response = await getTideLinkUrl(editingUser.id);
+      await navigator.clipboard.writeText(response.linkUrl);
+      setCopyStatus("Copied!");
+      setTimeout(() => setCopyStatus(""), 2000);
+    } catch {
+      setCopyStatus("Failed to copy");
+      setTimeout(() => setCopyStatus(""), 2000);
+    }
+  };
+
+  const assignRole = (roleName: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      assignedRoles: [...prev.assignedRoles, roleName],
+    }));
+  };
+
+  const unassignRole = (roleName: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      assignedRoles: prev.assignedRoles.filter((r) => r !== roleName),
+    }));
+  };
+
+  const availableRoles = allRoles
+    .map((role) => role.name)
+    .filter((roleName) => !formData.assignedRoles.includes(roleName));
+
+  const filteredUsers = users.filter(
+    (user) =>
+      user.username?.toLowerCase().includes(search.toLowerCase()) ||
+      user.email.toLowerCase().includes(search.toLowerCase()) ||
+      user.firstName.toLowerCase().includes(search.toLowerCase()) ||
+      user.lastName.toLowerCase().includes(search.toLowerCase())
+  );
+
+  // Default columns
+  const defaultColumns: ColumnDef<T>[] = [
+    {
+      key: "user",
+      header: "User",
+      cell: (user) => {
+        const userRoles = Array.isArray(user.role) ? user.role : user.role ? [user.role] : [];
+        const isAdmin = userRoles.some((r) => r.toLowerCase().includes("admin"));
+        return (
+          <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+            <div style={{ display: "flex", height: "2.25rem", width: "2.25rem", alignItems: "center", justifyContent: "center", borderRadius: "9999px", backgroundColor: "rgba(59, 130, 246, 0.1)" }}>
+              {isAdmin ? (
+                <Shield style={{ height: "1rem", width: "1rem", color: "#3b82f6" }} />
+              ) : (
+                <UserIcon style={{ height: "1rem", width: "1rem", color: "#3b82f6" }} />
+              )}
+            </div>
+            <div>
+              <p style={{ fontWeight: 500 }}>{user.firstName} {user.lastName}</p>
+              <p style={{ fontSize: "0.75rem", color: "#6b7280" }}>{user.email}</p>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      key: "roles",
+      header: "Roles",
+      responsive: "sm",
+      cell: (user) => {
+        const userRoles = Array.isArray(user.role) ? user.role : user.role ? [user.role] : [];
+        return (
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "0.25rem" }}>
+            {userRoles.length > 0 ? (
+              <>
+                {userRoles.slice(0, 2).map((role) => (
+                  <Badge key={role} variant="secondary" style={{ fontSize: "0.75rem" }}>{role}</Badge>
+                ))}
+                {userRoles.length > 2 && (
+                  <Badge variant="outline" style={{ fontSize: "0.75rem" }}>+{userRoles.length - 2}</Badge>
+                )}
+              </>
+            ) : (
+              <span style={{ fontSize: "0.75rem", color: "#6b7280" }}>No roles</span>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      key: "status",
+      header: "Account Status",
+      responsive: "md",
+      cell: (user) => (
+        user.linked ? (
+          <StatusBadge status="success" label="Linked" icon={<Link style={{ height: "0.75rem", width: "0.75rem", marginRight: "0.25rem" }} />} />
+        ) : (
+          <StatusBadge status="info" label="Not linked" icon={<Unlink style={{ height: "0.75rem", width: "0.75rem", marginRight: "0.25rem" }} />} />
+        )
+      ),
+    },
+    {
+      key: "access",
+      header: "Access",
+      responsive: "lg",
+      cell: (user) => {
+        const userRoles = Array.isArray(user.role) ? user.role : user.role ? [user.role] : [];
+        const isAdmin = userRoles.some((r) => r.toLowerCase().includes("admin"));
+
+        if (isAdmin) {
+          return <span style={{ fontSize: "0.75rem", color: "#6b7280" }}>Admin (cannot disable)</span>;
+        }
+
+        return onSetEnabled ? (
+          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+            <Switch
+              checked={user.enabled}
+              onCheckedChange={(enabled: boolean) => handleSetEnabled(user.id, enabled)}
+            />
+            <span style={{ fontSize: "0.75rem", color: user.enabled ? "#16a34a" : "#6b7280" }}>
+              {user.enabled ? "Enabled" : "Disabled"}
+            </span>
+          </div>
+        ) : (
+          <span style={{ fontSize: "0.75rem", color: user.enabled ? "#16a34a" : "#6b7280" }}>
+            {user.enabled ? "Enabled" : "Disabled"}
+          </span>
+        );
+      },
+    },
+    {
+      key: "actions",
+      header: "Actions",
+      align: "right",
+      cell: (user) => (
+        <Button size="icon" variant="ghost" onClick={() => handleEdit(user)}>
+          <Pencil style={{ height: "1rem", width: "1rem" }} />
+        </Button>
+      ),
+    },
+  ];
+
+  const columns = customColumns || defaultColumns;
+
+  return (
+    <div style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1.5rem" }} className={className}>
+      {/* Header */}
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "1rem" }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+          <h1 style={{ fontSize: "1.5rem", fontWeight: 600, display: "flex", alignItems: "center", gap: "0.5rem", margin: 0 }}>
+            <Users style={{ height: "1.5rem", width: "1.5rem" }} />
+            {title}
+          </h1>
+          <p style={{ fontSize: "0.875rem", color: "#6b7280", margin: 0 }}>{description}</p>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+          <RefreshButton
+            onClick={() => void refreshNow()}
+            isRefreshing={isLoading}
+            secondsRemaining={secondsRemaining}
+            title="Refresh now"
+            ButtonComponent={components.Button}
+          />
+          <Button
+            onClick={() => setCreatingUser(true)}
+            disabled={userLimit ? !userLimit.allowed : false}
+            title={
+              userLimit && !userLimit.allowed
+                ? `User limit reached (${userLimit.current}/${userLimit.limit})`
+                : "Add User"
+            }
+          >
+            <Plus style={{ height: "1rem", width: "1rem", marginRight: "0.5rem" }} />
+            Add User
+          </Button>
+        </div>
+      </div>
+
+      {/* Limit Warning */}
+      {userLimit && !userLimit.allowed && components.UpgradeBanner && (
+        <components.UpgradeBanner
+          message={`User limit reached (${userLimit.current}/${userLimit.limit}) on the ${userLimit.tierName} plan.`}
+          current={userLimit.current}
+          limit={userLimit.limit}
+          tierName={userLimit.tierName}
+        />
+      )}
+
+      {/* Over Limit Alert */}
+      {licenseInfo?.overLimit?.users.isOverLimit && (
+        <Alert style={{ backgroundColor: "#fef2f2", borderColor: "#fecaca" }}>
+          <AlertCircle style={{ height: "1rem", width: "1rem", color: "#dc2626" }} />
+          <AlertDescription style={{ color: "#991b1b" }}>
+            <strong>User limit exceeded.</strong> You have {licenseInfo.overLimit.users.enabled} enabled users but your plan allows {licenseInfo.overLimit.users.limit}.
+            Please disable {licenseInfo.overLimit.users.overBy} user(s) or upgrade your plan.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Users Table */}
+      <Card>
+        <div style={{ padding: "1rem", borderBottom: "1px solid #e5e7eb" }}>
+          <div style={{ position: "relative", maxWidth: "20rem" }}>
+            <Search style={{ position: "absolute", left: "0.75rem", top: "50%", transform: "translateY(-50%)", height: "1rem", width: "1rem", color: "#9ca3af" }} />
+            <Input
+              placeholder="Search users..."
+              value={search}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
+              style={{ paddingLeft: "2.25rem" }}
+            />
+          </div>
+        </div>
+        <CardContent style={{ padding: 0 }}>
+          {isLoading && users.length === 0 ? (
+            <LoadingSkeleton rows={3} type="table" SkeletonComponent={components.Skeleton} />
+          ) : filteredUsers.length > 0 ? (
+            <DataTable
+              data={filteredUsers}
+              columns={columns}
+              components={{
+                Table: components.Table,
+                TableHeader: components.TableHeader,
+                TableBody: components.TableBody,
+                TableRow: components.TableRow,
+                TableHead: components.TableHead,
+                TableCell: components.TableCell,
+                Skeleton: components.Skeleton,
+              }}
+            />
+          ) : (
+            <EmptyState
+              icon={<Users style={{ height: "3rem", width: "3rem", color: "#6b7280" }} />}
+              title="No users found"
+              description={search ? "Try a different search term" : "No users have been created yet"}
+            />
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Edit User Dialog */}
+      <Dialog open={!!editingUser} onOpenChange={(open: boolean) => !open && setEditingUser(null)}>
+        <DialogContent style={{ maxWidth: "32rem" }}>
+          <DialogHeader>
+            <DialogTitle>Edit User</DialogTitle>
+            <DialogDescription>Update user details and manage role assignments</DialogDescription>
+          </DialogHeader>
+          <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}>
+              <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                <Label>First Name</Label>
+                <Input
+                  value={formData.firstName}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, firstName: e.target.value })}
+                  required
+                />
+              </div>
+              <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                <Label>Last Name</Label>
+                <Input
+                  value={formData.lastName}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, lastName: e.target.value })}
+                  required
+                />
+              </div>
+            </div>
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+              <Label>Email</Label>
+              <Input
+                type="email"
+                value={formData.email}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, email: e.target.value })}
+                required
+              />
+            </div>
+
+            {/* Role Manager */}
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+              <Label>Manage Roles</Label>
+              {!editingUser?.linked && (
+                <p style={{ fontSize: "0.875rem", color: "#d97706" }}>
+                  User must be linked before roles can be assigned.
+                </p>
+              )}
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem", opacity: !editingUser?.linked ? 0.5 : 1, pointerEvents: !editingUser?.linked ? "none" : "auto" }}>
+                {/* Assigned Roles */}
+                <div style={{ border: "1px solid #e5e7eb", borderRadius: "0.375rem" }}>
+                  <div style={{ padding: "0.5rem", backgroundColor: "#f9fafb", borderBottom: "1px solid #e5e7eb" }}>
+                    <h4 style={{ fontSize: "0.875rem", fontWeight: 500 }}>Assigned Roles</h4>
+                  </div>
+                  <ScrollArea style={{ height: "8rem" }}>
+                    <div style={{ padding: "0.5rem", display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+                      {formData.assignedRoles.length > 0 ? (
+                        formData.assignedRoles.map((roleName) => (
+                          <div key={roleName} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.5rem", borderRadius: "0.375rem", backgroundColor: "#f3f4f6", fontSize: "0.875rem" }}>
+                            <span>{roleName}</span>
+                            <Button
+                              type="button"
+                              size="icon"
+                              variant="ghost"
+                              style={{ height: "1.5rem", width: "1.5rem" }}
+                              onClick={() => unassignRole(roleName)}
+                              disabled={!editingUser?.linked}
+                            >
+                              <X style={{ height: "0.75rem", width: "0.75rem" }} />
+                            </Button>
+                          </div>
+                        ))
+                      ) : (
+                        <p style={{ fontSize: "0.875rem", color: "#6b7280", textAlign: "center", padding: "1rem 0" }}>No roles assigned</p>
+                      )}
+                    </div>
+                  </ScrollArea>
+                </div>
+
+                {/* Available Roles */}
+                <div style={{ border: "1px solid #e5e7eb", borderRadius: "0.375rem" }}>
+                  <div style={{ padding: "0.5rem", backgroundColor: "#f9fafb", borderBottom: "1px solid #e5e7eb" }}>
+                    <h4 style={{ fontSize: "0.875rem", fontWeight: 500 }}>Available Roles</h4>
+                  </div>
+                  <ScrollArea style={{ height: "8rem" }}>
+                    <div style={{ padding: "0.5rem", display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+                      {availableRoles.length > 0 ? (
+                        availableRoles.map((roleName) => (
+                          <div
+                            key={roleName}
+                            style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.5rem", borderRadius: "0.375rem", fontSize: "0.875rem", cursor: "pointer" }}
+                            onClick={() => editingUser?.linked && assignRole(roleName)}
+                          >
+                            <span>{roleName}</span>
+                            <Button
+                              type="button"
+                              size="icon"
+                              variant="ghost"
+                              style={{ height: "1.5rem", width: "1.5rem" }}
+                              onClick={(e: React.MouseEvent) => { e.stopPropagation(); assignRole(roleName); }}
+                              disabled={!editingUser?.linked}
+                            >
+                              <Plus style={{ height: "0.75rem", width: "0.75rem" }} />
+                            </Button>
+                          </div>
+                        ))
+                      ) : (
+                        <p style={{ fontSize: "0.875rem", color: "#6b7280", textAlign: "center", padding: "1rem 0" }}>All roles assigned</p>
+                      )}
+                    </div>
+                  </ScrollArea>
+                </div>
+              </div>
+            </div>
+
+            {/* Link Tide Account */}
+            {!editingUser?.linked && getTideLinkUrl && (
+              <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                <Label>Link Tide Account</Label>
+                <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                  <Button type="button" variant="outline" onClick={handleCopyTideLink}>
+                    <Copy style={{ height: "1rem", width: "1rem", marginRight: "0.5rem" }} />
+                    Copy Tide Link
+                  </Button>
+                  {copyStatus && (
+                    <span style={{ fontSize: "0.875rem", color: "#6b7280", display: "flex", alignItems: "center", gap: "0.25rem" }}>
+                      <Check style={{ height: "1rem", width: "1rem", color: "#16a34a" }} />
+                      {copyStatus}
+                    </span>
+                  )}
+                </div>
+              </div>
+            )}
+
+            <DialogFooter style={{ display: "flex", justifyContent: "space-between" }}>
+              <Button type="button" variant="destructive" onClick={() => editingUser && setDeletingUser(editingUser)}>
+                <Trash2 style={{ height: "1rem", width: "1rem", marginRight: "0.5rem" }} />
+                Delete
+              </Button>
+              <div style={{ display: "flex", gap: "0.5rem" }}>
+                <Button type="button" variant="outline" onClick={() => setEditingUser(null)}>Cancel</Button>
+                <Button type="submit" disabled={isSubmitting}>
+                  {isSubmitting ? "Saving..." : "Save Changes"}
+                </Button>
+              </div>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Create User Dialog */}
+      <Dialog open={creatingUser} onOpenChange={(open: boolean) => !open && setCreatingUser(false)}>
+        <DialogContent style={{ maxWidth: "28rem" }}>
+          <DialogHeader>
+            <DialogTitle>Add New User</DialogTitle>
+            <DialogDescription>Create a new user account</DialogDescription>
+          </DialogHeader>
+          <form onSubmit={handleCreateSubmit} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+              <Label htmlFor="username">Username</Label>
+              <Input
+                id="username"
+                value={createFormData.username}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCreateFormData({ ...createFormData, username: e.target.value })}
+                placeholder="johndoe"
+                required
+              />
+            </div>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}>
+              <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                <Label htmlFor="firstName">First Name</Label>
+                <Input
+                  id="firstName"
+                  value={createFormData.firstName}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCreateFormData({ ...createFormData, firstName: e.target.value })}
+                  placeholder="John"
+                  required
+                />
+              </div>
+              <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                <Label htmlFor="lastName">Last Name</Label>
+                <Input
+                  id="lastName"
+                  value={createFormData.lastName}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCreateFormData({ ...createFormData, lastName: e.target.value })}
+                  placeholder="Doe"
+                  required
+                />
+              </div>
+            </div>
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                value={createFormData.email}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCreateFormData({ ...createFormData, email: e.target.value })}
+                placeholder="john@example.com"
+                required
+              />
+            </div>
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => setCreatingUser(false)}>Cancel</Button>
+              <Button type="submit" disabled={isSubmitting}>
+                {isSubmitting ? "Creating..." : "Create User"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation */}
+      <ConfirmDialog
+        open={!!deletingUser}
+        onClose={() => setDeletingUser(null)}
+        onConfirm={handleDeleteConfirm}
+        title="Delete User"
+        description={`Are you sure you want to delete ${deletingUser?.firstName} ${deletingUser?.lastName}? This action cannot be undone.`}
+        confirmLabel="Delete"
+        confirmVariant="destructive"
+        isLoading={isSubmitting}
+        components={{
+          AlertDialog: components.AlertDialog,
+          AlertDialogContent: components.AlertDialogContent,
+          AlertDialogHeader: components.AlertDialogHeader,
+          AlertDialogTitle: components.AlertDialogTitle,
+          AlertDialogDescription: components.AlertDialogDescription,
+          AlertDialogFooter: components.AlertDialogFooter,
+          AlertDialogAction: components.AlertDialogAction,
+          AlertDialogCancel: components.AlertDialogCancel,
+        }}
+      />
+    </div>
+  );
+}