Add Oudelaa dashboard API integration

oudelaa_dashboard/app/(dashboard)/users/page.tsx

@@ -0,0 +1,875 @@
+"use client";
+
+import Image from "next/image";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Search, ShieldPlus, UserMinus, UserPlus, UserX } from "lucide-react";
+
+import { NoPermissionState } from "@/components/auth/no-permission-state";
+import { useSuperAdminSession } from "@/components/auth/session-context";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { PaginationControls } from "@/components/dashboard/pagination-controls";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Drawer } from "@/components/ui/drawer";
+import { EmptyState } from "@/components/ui/empty-state";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/toast";
+import {
+  createAdminUser,
+  deleteAdminUser,
+  deletePlatformAdmin,
+  getAdminUserById,
+  getProfileOverviewForSuperAdmin,
+  searchAdminUsers,
+  searchPlatformAdmins,
+  setAdminUserRole,
+  updateAdminUser,
+  updatePlatformAdmin,
+} from "@/lib/api/admin-users";
+import { getItems, getPagination } from "@/lib/api/core";
+import { updateSuperAdminUserStatus } from "@/lib/api/superadmin";
+import { formatDateTime } from "@/lib/format";
+import { resolveMediaUrl } from "@/lib/media-url";
+import { SUPERADMIN_PERMISSIONS, hasPermission } from "@/lib/permissions";
+import { cn } from "@/lib/utils";
+import type {
+  AdminUpdatePayload,
+  AdminCreatePayload,
+  ApiRole,
+  ApiUser,
+  PaginatedResponse,
+  ProfileOverviewResponse,
+} from "@/types/api";
+
+type ScopeFilter = "all-users" | "admins";
+
+const emptyCreateState: AdminCreatePayload = {
+  name: "",
+  username: "",
+  email: "",
+  password: "",
+  confirmPassword: "",
+};
+
+function buildEditPayload(user: ApiUser): Partial<ApiUser> {
+  return {
+    name: user.name ?? "",
+    username: user.username ?? "",
+    email: user.email ?? "",
+    role: user.role ?? "user",
+    stageName: user.stageName ?? "",
+    bio: user.bio ?? "",
+    location: user.location ?? "",
+    isPrivate: user.isPrivate ?? false,
+    isVerified: user.isVerified ?? false,
+  };
+}
+
+function normalizeComparableString(value: string | null | undefined) {
+  return (value ?? "").trim();
+}
+
+function buildUserUpdatePayload(
+  selectedUser: ApiUser,
+  editPayload: Partial<ApiUser>,
+): AdminUpdatePayload {
+  const payload: AdminUpdatePayload = {};
+  const nextName = normalizeComparableString(
+    typeof editPayload.name === "string" ? editPayload.name : selectedUser.name,
+  );
+  const nextUsername = normalizeComparableString(
+    typeof editPayload.username === "string" ? editPayload.username : selectedUser.username,
+  );
+  const nextEmail = normalizeComparableString(
+    typeof editPayload.email === "string" ? editPayload.email : selectedUser.email,
+  );
+  const currentName = normalizeComparableString(selectedUser.name);
+  const currentUsername = normalizeComparableString(selectedUser.username);
+  const currentEmail = normalizeComparableString(selectedUser.email);
+
+  if (nextName !== currentName) {
+    if (!nextName) {
+      throw new Error("Name cannot be empty.");
+    }
+    payload.name = nextName;
+  }
+
+  if (nextUsername !== currentUsername) {
+    if (!nextUsername) {
+      throw new Error("Username cannot be empty.");
+    }
+    payload.username = nextUsername;
+  }
+
+  if (nextEmail !== currentEmail) {
+    if (!nextEmail) {
+      throw new Error("Email cannot be empty.");
+    }
+    payload.email = nextEmail;
+  }
+
+  const nextStageName = normalizeComparableString(
+    typeof editPayload.stageName === "string" ? editPayload.stageName : selectedUser.stageName,
+  );
+  const currentStageName = normalizeComparableString(selectedUser.stageName);
+  if (nextStageName !== currentStageName) {
+    payload.stageName = nextStageName;
+  }
+
+  const nextBio = normalizeComparableString(
+    typeof editPayload.bio === "string" ? editPayload.bio : selectedUser.bio,
+  );
+  const currentBio = normalizeComparableString(selectedUser.bio);
+  if (nextBio !== currentBio) {
+    payload.bio = nextBio;
+  }
+
+  const nextLocation = normalizeComparableString(
+    typeof editPayload.location === "string" ? editPayload.location : selectedUser.location,
+  );
+  const currentLocation = normalizeComparableString(selectedUser.location);
+  if (nextLocation !== currentLocation) {
+    payload.location = nextLocation;
+  }
+
+  const nextIsPrivate = Boolean(editPayload.isPrivate ?? selectedUser.isPrivate ?? false);
+  const currentIsPrivate = Boolean(selectedUser.isPrivate ?? false);
+  if (nextIsPrivate !== currentIsPrivate) {
+    payload.isPrivate = nextIsPrivate;
+  }
+
+  const nextIsVerified = Boolean(editPayload.isVerified ?? selectedUser.isVerified ?? false);
+  const currentIsVerified = Boolean(selectedUser.isVerified ?? false);
+  if (nextIsVerified !== currentIsVerified) {
+    payload.isVerified = nextIsVerified;
+  }
+
+  return payload;
+}
+
+function FieldRow({
+  label,
+  value,
+  valueDir,
+  valueClassName,
+}: {
+  label: string;
+  value: string | number | boolean | null | undefined;
+  valueDir?: "auto" | "rtl" | "ltr";
+  valueClassName?: string;
+}) {
+  const normalized =
+    value === null || value === undefined || value === ""
+      ? "-"
+      : typeof value === "boolean"
+        ? value
+          ? "نعم"
+          : "لا"
+        : String(value);
+  const isTechnicalValue =
+    typeof normalized === "string" &&
+    (normalized.includes("@") || normalized.includes("_") || normalized.includes("-") || normalized.includes("."));
+  const resolvedDir = valueDir ?? (isTechnicalValue ? "ltr" : "auto");
+
+  return (
+    <div className="min-w-0 rounded-lg border border-border/60 bg-background/30 p-3">
+      <div className="text-xs text-muted-foreground">{label}</div>
+      <div
+        dir={resolvedDir}
+        className={cn(
+          "mt-2 min-w-0 break-words text-sm leading-relaxed text-foreground [overflow-wrap:anywhere]",
+          isTechnicalValue && "text-left font-mono text-xs sm:text-sm",
+          valueClassName,
+        )}
+      >
+        {normalized}
+      </div>
+    </div>
+  );
+}
+
+export default function UsersPage() {
+  const { permissions } = useSuperAdminSession();
+  const [scope, setScope] = useState<ScopeFilter>("all-users");
+  const [search, setSearch] = useState("");
+  const [verifiedFilter, setVerifiedFilter] = useState("all");
+  const [page, setPage] = useState(1);
+  const [response, setResponse] = useState<PaginatedResponse<ApiUser> | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
+  const [selectedUser, setSelectedUser] = useState<ApiUser | null>(null);
+  const [avatarLoadFailed, setAvatarLoadFailed] = useState(false);
+  const [overview, setOverview] = useState<ProfileOverviewResponse | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [editPayload, setEditPayload] = useState<Partial<ApiUser>>({});
+  const [createOpen, setCreateOpen] = useState(false);
+  const [createPayload, setCreatePayload] = useState<AdminCreatePayload>(emptyCreateState);
+  const { toast } = useToast();
+  const filtersRef = useRef({ search, verifiedFilter });
+
+  const canReadUsers = hasPermission(permissions, SUPERADMIN_PERMISSIONS.USERS_READ);
+  const canManageUsers = hasPermission(permissions, SUPERADMIN_PERMISSIONS.USERS_MANAGE);
+
+  filtersRef.current = { search, verifiedFilter };
+
+  useEffect(() => {
+    setAvatarLoadFailed(false);
+  }, [selectedUser?.avatar]);
+
+  const loadUsers = useCallback(async () => {
+    if (!canReadUsers) {
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const { search: currentSearch, verifiedFilter: currentVerifiedFilter } = filtersRef.current;
+      const isVerified =
+        currentVerifiedFilter === "all"
+          ? undefined
+          : currentVerifiedFilter === "verified"
+            ? true
+            : false;
+
+      const nextResponse =
+        scope === "admins"
+          ? await searchPlatformAdmins({
+              page,
+              limit: 12,
+              q: currentSearch || undefined,
+              isVerified,
+              sortBy: "createdAt",
+              sortOrder: "desc",
+            })
+          : await searchAdminUsers({
+              page,
+              limit: 12,
+              q: currentSearch || undefined,
+              isVerified,
+              sortBy: "createdAt",
+              sortOrder: "desc",
+            });
+
+      setResponse(nextResponse);
+    } catch (error) {
+      const message = String(error);
+      toast({ title: "تعذر تحميل المستخدمين", description: message, variant: "danger" });
+    } finally {
+      setLoading(false);
+    }
+  }, [canReadUsers, page, scope, toast]);
+
+  useEffect(() => {
+    void loadUsers();
+  }, [loadUsers]);
+
+  useEffect(() => {
+    if (!selectedUserId || !canReadUsers) return;
+
+    let active = true;
+
+    const loadDetails = async () => {
+      setDetailLoading(true);
+      try {
+        const [user, userOverview] = await Promise.all([
+          getAdminUserById(selectedUserId),
+          getProfileOverviewForSuperAdmin(selectedUserId),
+        ]);
+        if (!active) return;
+
+        setSelectedUser(user);
+        setOverview(userOverview);
+        setEditPayload(buildEditPayload(user));
+      } catch (error) {
+        if (!active) return;
+        toast({ title: "تعذر تحميل التفاصيل", description: String(error), variant: "danger" });
+      } finally {
+        if (active) setDetailLoading(false);
+      }
+    };
+
+    void loadDetails();
+
+    return () => {
+      active = false;
+    };
+  }, [canReadUsers, selectedUserId, toast]);
+
+  const users = getItems(response);
+
+  const stats = useMemo(() => {
+    const disabled = users.filter((item) => item.isDisabled).length;
+    const admins = users.filter((item) => item.role === "admin").length;
+    return { total: response?.pagination?.total ?? users.length, disabled, admins };
+  }, [response, users]);
+
+  const syncUpdatedUser = (userId: string, patch: Partial<ApiUser>) => {
+    setResponse((prev) => {
+      if (!prev) return prev;
+      const source = getItems(prev);
+      const updatedItems = source.map((item) => (item._id === userId ? { ...item, ...patch } : item));
+      return {
+        ...prev,
+        items: updatedItems,
+        data: updatedItems,
+      };
+    });
+    setSelectedUser((prev) => (prev && prev._id === userId ? { ...prev, ...patch } : prev));
+  };
+
+  const handleDisable = async (userId: string) => {
+    const reason =
+      typeof window === "undefined"
+        ? "Disabled by SuperAdmin dashboard"
+        : window.prompt("Reason for disabling this user", "Disabled by SuperAdmin dashboard");
+    if (reason === null) {
+      return;
+    }
+
+    try {
+      const updated = await updateSuperAdminUserStatus(
+        userId,
+        true,
+        reason.trim() || "Disabled by SuperAdmin dashboard",
+      );
+      syncUpdatedUser(userId, { isDisabled: true, disabledReason: updated.disabledReason });
+      toast({ title: "تم التعطيل", description: userId, variant: "warning" });
+    } catch (error) {
+      toast({ title: "فشل التعطيل", description: String(error), variant: "danger" });
+    }
+  };
+
+  const handleEnable = async (userId: string) => {
+    try {
+      const updated = await updateSuperAdminUserStatus(userId, false);
+      syncUpdatedUser(userId, { isDisabled: false, disabledReason: updated.disabledReason ?? "" });
+      toast({ title: "تم التفعيل", description: userId, variant: "success" });
+    } catch (error) {
+      toast({ title: "فشل التفعيل", description: String(error), variant: "danger" });
+    }
+  };
+
+  const handleDelete = async (userId: string) => {
+    try {
+      if (scope === "admins") {
+        await deletePlatformAdmin(userId);
+      } else {
+        await deleteAdminUser(userId);
+      }
+
+      if (selectedUserId === userId) {
+        setSelectedUserId(null);
+        setSelectedUser(null);
+        setOverview(null);
+      }
+
+      await loadUsers();
+      toast({ title: "تم الحذف", description: userId, variant: "warning" });
+    } catch (error) {
+      toast({ title: "فشل الحذف", description: String(error), variant: "danger" });
+    }
+  };
+
+  const handleSave = async () => {
+    if (!selectedUserId || !selectedUser || !canManageUsers) return;
+
+    try {
+      const updater = scope === "admins" ? updatePlatformAdmin : updateAdminUser;
+      const updatePayload = buildUserUpdatePayload(selectedUser, editPayload);
+      const currentRole = selectedUser.role ?? "user";
+      const nextRole = (editPayload.role as ApiRole | undefined) ?? currentRole;
+      const roleChanged = nextRole !== currentRole;
+      const hasProfileChanges = Object.keys(updatePayload).length > 0;
+
+      if (!hasProfileChanges && !roleChanged) {
+        toast({
+          title: "No changes to save",
+          description: "Update one or more fields before saving.",
+          variant: "default",
+        });
+        return;
+      }
+
+      if (hasProfileChanges) {
+        await updater(selectedUserId, updatePayload);
+      }
+
+      if (roleChanged) {
+        await setAdminUserRole(selectedUserId, nextRole);
+      }
+
+      const [freshUser, freshOverview] = await Promise.all([
+        getAdminUserById(selectedUserId),
+        getProfileOverviewForSuperAdmin(selectedUserId),
+      ]);
+
+      syncUpdatedUser(selectedUserId, freshUser);
+      setSelectedUser(freshUser);
+      setOverview(freshOverview);
+      setEditPayload(buildEditPayload(freshUser));
+      await loadUsers();
+      toast({
+        title: "تم حفظ التعديلات",
+        description: "تم تحديث بيانات المستخدم.",
+        variant: "success",
+      });
+    } catch (error) {
+      toast({ title: "فشل التحديث", description: String(error), variant: "danger" });
+    }
+  };
+
+  const handleCreate = async () => {
+    if (!canManageUsers) return;
+
+    try {
+      await createAdminUser(createPayload);
+      setCreateOpen(false);
+      setCreatePayload(emptyCreateState);
+      setScope("admins");
+      setPage(1);
+      await loadUsers();
+      toast({ title: "تم إنشاء الأدمن", description: createPayload.email, variant: "success" });
+    } catch (error) {
+      toast({ title: "فشل إنشاء الأدمن", description: String(error), variant: "danger" });
+    }
+  };
+
+  if (!canReadUsers) {
+    return (
+      <div className="space-y-5 pb-8">
+        <PageHeader
+          title="User management"
+          subtitle="Search, review, and manage platform users and admins from one place."
+        />
+        <NoPermissionState description="This page needs the users.read permission." />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-5 pb-8">
+      <PageHeader
+        title="إدارة المستخدمين"
+        subtitle="بحث وترقيم حقيقيان من الخادم مع تفاصيل Profile Overview لكل حساب."
+        actions={canManageUsers ? (
+          <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+            <DialogTrigger asChild>
+              <Button>
+                <ShieldPlus className="h-4 w-4" />
+                إضافة Admin
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>إنشاء حساب إداري</DialogTitle>
+                <DialogDescription>
+                  هذا الطلب مرتبط بمسار SuperAdmin المباشر لإنشاء Admin جديد.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="grid gap-3">
+                <Input
+                  placeholder="الاسم"
+                  value={createPayload.name ?? ""}
+                  onChange={(event) =>
+                    setCreatePayload((prev) => ({ ...prev, name: event.target.value }))
+                  }
+                />
+                <Input
+                  placeholder="اسم المستخدم"
+                  value={createPayload.username}
+                  onChange={(event) =>
+                    setCreatePayload((prev) => ({ ...prev, username: event.target.value }))
+                  }
+                />
+                <Input
+                  placeholder="البريد الإلكتروني"
+                  type="email"
+                  value={createPayload.email}
+                  onChange={(event) =>
+                    setCreatePayload((prev) => ({ ...prev, email: event.target.value }))
+                  }
+                />
+                <Input
+                  placeholder="كلمة المرور"
+                  type="password"
+                  value={createPayload.password}
+                  onChange={(event) =>
+                    setCreatePayload((prev) => ({
+                      ...prev,
+                      password: event.target.value,
+                      confirmPassword: event.target.value,
+                    }))
+                  }
+                />
+                <Button onClick={handleCreate}>إنشاء الأدمن</Button>
+              </div>
+            </DialogContent>
+          </Dialog>
+        ) : null}
+      />
+
+      <section className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardTitle>إجمالي النتائج</CardTitle>
+          </CardHeader>
+          <CardContent className="text-3xl font-bold text-foreground">{stats.total}</CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>أدمنز في الصفحة</CardTitle>
+          </CardHeader>
+          <CardContent className="text-3xl font-bold text-foreground">{stats.admins}</CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>حسابات معطلة في الصفحة</CardTitle>
+          </CardHeader>
+          <CardContent className="text-3xl font-bold text-foreground">{stats.disabled}</CardContent>
+        </Card>
+      </section>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>الفلاتر</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-3 md:grid-cols-4">
+          <Select
+            value={scope}
+            onValueChange={(value) => {
+              setScope(value as ScopeFilter);
+              setPage(1);
+            }}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="النطاق" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all-users">كل المستخدمين</SelectItem>
+              <SelectItem value="admins">الأدمنز فقط</SelectItem>
+            </SelectContent>
+          </Select>
+          <div className="relative">
+            <Search className="pointer-events-none absolute right-3 top-3 h-4 w-4 text-muted-foreground" />
+            <Input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder="ابحث بالاسم أو البريد أو اليوزر"
+              className="pr-9"
+            />
+          </div>
+          <Select value={verifiedFilter} onValueChange={setVerifiedFilter}>
+            <SelectTrigger>
+              <SelectValue placeholder="التحقق" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">الكل</SelectItem>
+              <SelectItem value="verified">موثق</SelectItem>
+              <SelectItem value="unverified">غير موثق</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button
+            variant="outline"
+            onClick={() => {
+              setPage(1);
+              void loadUsers();
+            }}
+          >
+            تطبيق
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>النتائج</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {!users.length && !loading ? (
+            <EmptyState
+              title="لا توجد نتائج"
+              description="لم يرجع الخادم أي مستخدمين بهذه الفلاتر."
+            />
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>الاسم</TableHead>
+                  <TableHead>البريد</TableHead>
+                  <TableHead>الدور</TableHead>
+                  <TableHead>موثق</TableHead>
+                  <TableHead>الحالة</TableHead>
+                  <TableHead>إجراءات</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {users.map((user) => (
+                  <TableRow
+                    key={user._id}
+                    className="cursor-pointer"
+                    onClick={() => setSelectedUserId(user._id)}
+                  >
+                    <TableCell>{user.name ?? user.username ?? "-"}</TableCell>
+                    <TableCell>{user.email}</TableCell>
+                    <TableCell>{user.role ?? "user"}</TableCell>
+                    <TableCell>
+                      <Badge variant={user.isVerified ? "success" : "muted"}>
+                        {user.isVerified ? "موثق" : "غير موثق"}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={user.isDisabled ? "danger" : "success"}>
+                        {user.isDisabled ? "معطل" : "نشط"}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="flex flex-wrap gap-2">
+                      {user.isDisabled ? (
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          disabled={!canManageUsers}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            void handleEnable(user._id);
+                          }}
+                        >
+                          <UserPlus className="h-4 w-4" />
+                          تفعيل
+                        </Button>
+                      ) : (
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          disabled={!canManageUsers}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            void handleDisable(user._id);
+                          }}
+                        >
+                          <UserMinus className="h-4 w-4" />
+                          تعطيل
+                        </Button>
+                      )}
+                      <Button
+                        size="sm"
+                        variant="danger"
+                        disabled={!canManageUsers}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          void handleDelete(user._id);
+                        }}
+                      >
+                        <UserX className="h-4 w-4" />
+                        حذف
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+          <PaginationControls pagination={getPagination(response)} loading={loading} onPageChange={setPage} />
+        </CardContent>
+      </Card>
+
+      <Drawer
+        open={Boolean(selectedUserId)}
+        onClose={() => {
+          setSelectedUserId(null);
+          setSelectedUser(null);
+          setOverview(null);
+          setEditPayload({});
+        }}
+        title="User details"
+        description="Review the account profile overview, safety state, and editable admin fields."
+        side="right"
+        widthClassName="w-full sm:w-[92vw] sm:max-w-2xl"
+      >
+        {detailLoading ? (
+          <div className="text-sm text-muted-foreground">Loading details...</div>
+        ) : selectedUser ? (
+          <div className="space-y-4">
+            <Card className="border-border/70 bg-secondary/20">
+              <CardContent className="grid gap-3 p-5 md:grid-cols-[auto,1fr,auto] md:items-center">
+                <div className="flex h-16 w-16 items-center justify-center overflow-hidden rounded-full border border-border/70 bg-background/30">
+                  {selectedUser.avatar && !avatarLoadFailed ? (
+                    <Image
+                      src={resolveMediaUrl(selectedUser.avatar)}
+                      alt={selectedUser.name ?? selectedUser.username ?? "user"}
+                      width={64}
+                      height={64}
+                      unoptimized
+                      loading="lazy"
+                      onError={() => setAvatarLoadFailed(true)}
+                      className="h-full w-full object-cover"
+                    />
+                  ) : (
+                    <span className="text-xl font-semibold text-muted-foreground">
+                      {(selectedUser.name ?? selectedUser.username ?? "U").charAt(0).toUpperCase()}
+                    </span>
+                  )}
+                </div>
+                <div className="min-w-0 space-y-1">
+                  <div className="text-lg font-semibold text-foreground">
+                    {selectedUser.name ?? selectedUser.username ?? "-"}
+                  </div>
+                  <div dir="ltr" className="truncate text-sm text-muted-foreground">
+                    {selectedUser.email}
+                  </div>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  <Badge variant={selectedUser.isVerified ? "success" : "muted"}>
+                    {selectedUser.isVerified ? "Verified" : "Unverified"}
+                  </Badge>
+                  <Badge variant={selectedUser.isDisabled ? "danger" : "success"}>
+                    {selectedUser.isDisabled ? "Disabled" : "Active"}
+                  </Badge>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="border-border/70 bg-secondary/20">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base">Quick edit</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className="grid gap-3 md:grid-cols-2">
+                  <Input
+                    placeholder="Name"
+                    value={String(editPayload.name ?? "")}
+                    onChange={(event) =>
+                      setEditPayload((prev) => ({ ...prev, name: event.target.value }))
+                    }
+                  />
+                  <Input
+                    placeholder="Username"
+                    value={String(editPayload.username ?? "")}
+                    onChange={(event) =>
+                      setEditPayload((prev) => ({ ...prev, username: event.target.value }))
+                    }
+                  />
+                </div>
+                <Input
+                  placeholder="Email"
+                  value={String(editPayload.email ?? "")}
+                  onChange={(event) =>
+                    setEditPayload((prev) => ({ ...prev, email: event.target.value }))
+                  }
+                />
+                <div className="grid gap-3 md:grid-cols-2">
+                  <Input
+                    placeholder="Stage name"
+                    value={String(editPayload.stageName ?? "")}
+                    onChange={(event) =>
+                      setEditPayload((prev) => ({ ...prev, stageName: event.target.value }))
+                    }
+                  />
+                  <Input
+                    placeholder="Location"
+                    value={String(editPayload.location ?? "")}
+                    onChange={(event) =>
+                      setEditPayload((prev) => ({ ...prev, location: event.target.value }))
+                    }
+                  />
+                </div>
+                <Select
+                  disabled={!canManageUsers}
+                  value={String(editPayload.role ?? selectedUser.role ?? "user")}
+                  onValueChange={(value) =>
+                    setEditPayload((prev) => ({ ...prev, role: value as ApiRole }))
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Role" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="user">user</SelectItem>
+                    <SelectItem value="admin">admin</SelectItem>
+                  </SelectContent>
+                </Select>
+                <div className="grid gap-3 md:grid-cols-2">
+                  <label className="flex items-center justify-between rounded-lg border border-input bg-background/40 px-3 py-2 text-sm text-foreground">
+                    <span>Verified by super admin</span>
+                    <Switch
+                      checked={Boolean(editPayload.isVerified ?? selectedUser.isVerified)}
+                      onCheckedChange={(value) =>
+                        setEditPayload((prev) => ({ ...prev, isVerified: value }))
+                      }
+                    />
+                  </label>
+                  <label className="flex items-center justify-between rounded-lg border border-input bg-background/40 px-3 py-2 text-sm text-foreground">
+                    <span>Private account</span>
+                    <Switch
+                      checked={Boolean(editPayload.isPrivate ?? selectedUser.isPrivate)}
+                      onCheckedChange={(value) =>
+                        setEditPayload((prev) => ({ ...prev, isPrivate: value }))
+                      }
+                    />
+                  </label>
+                </div>
+                <Textarea
+                  placeholder="Bio"
+                  value={String(editPayload.bio ?? "")}
+                  onChange={(event) =>
+                    setEditPayload((prev) => ({ ...prev, bio: event.target.value }))
+                  }
+                />
+                <Button disabled={!canManageUsers} onClick={() => void handleSave()}>
+                  Save changes
+                </Button>
+              </CardContent>
+            </Card>
+
+            <Card className="border-border/70 bg-secondary/20">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base">Profile Overview</CardTitle>
+              </CardHeader>
+              <CardContent className="grid gap-3 sm:grid-cols-2">
+                <FieldRow label="Followers" value={overview?.stats.followersCount} />
+                <FieldRow label="Following" value={overview?.stats.followingCount} />
+                <FieldRow label="Posts" value={overview?.stats.postsCount} />
+                <FieldRow label="Collaborations" value={overview?.stats.collaborationsCount} />
+                <FieldRow label="Audio" value={overview?.contentCounts.audio} />
+                <FieldRow label="Reels" value={overview?.contentCounts.reels} />
+              </CardContent>
+            </Card>
+
+            <Card className="border-border/70 bg-secondary/20">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base">General information</CardTitle>
+              </CardHeader>
+              <CardContent className="grid gap-3 md:grid-cols-2">
+                <FieldRow label="ID" value={selectedUser._id} valueDir="ltr" />
+                <FieldRow label="Name" value={selectedUser.name} />
+                <FieldRow label="Username" value={selectedUser.username} valueDir="ltr" />
+                <FieldRow label="Role" value={selectedUser.role} />
+                <FieldRow label="Email" value={selectedUser.email} valueDir="ltr" />
+                <FieldRow label="Location" value={selectedUser.location} />
+                <FieldRow label="Verified" value={selectedUser.isVerified} />
+                <FieldRow label="Disabled" value={selectedUser.isDisabled} />
+                <FieldRow label="Created at" value={formatDateTime(selectedUser.createdAt)} />
+                <FieldRow label="Updated at" value={formatDateTime(selectedUser.updatedAt)} />
+              </CardContent>
+            </Card>
+          </div>
+        ) : (
+          <div className="text-sm text-muted-foreground">No details available.</div>
+        )}
+      </Drawer>
+    </div>
+  );
+}