876 أسطر
32 KiB
TypeScript
876 أسطر
32 KiB
TypeScript
"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>
|
||
);
|
||
}
|