326 lines
14 KiB
TypeScript
326 lines
14 KiB
TypeScript
"use client";
|
||
|
||
import * as React from "react";
|
||
import { useQuery } from "@tanstack/react-query";
|
||
import { Mail, Phone, UserRound } from "lucide-react";
|
||
import AsyncSearchableCombobox from "@/components/AsyncSearchableCombobox";
|
||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
import type { UserListSchema, UserProfileSchema } from "@/lib/types";
|
||
import { api } from "@/lib/api";
|
||
import { formatJalali, formatNumberPersian, resolveErrorMessage } from "@/lib/utils";
|
||
import { useToast } from "@/hooks/use-toast";
|
||
|
||
const USERS_PAGE_SIZE = 25;
|
||
|
||
function fullName(user: Pick<UserListSchema, "first_name" | "last_name" | "username">) {
|
||
return [user.first_name, user.last_name].filter(Boolean).join(" ") || user.username;
|
||
}
|
||
|
||
function initials(user: Pick<UserListSchema, "first_name" | "last_name" | "username">) {
|
||
const base = [user.first_name, user.last_name].filter(Boolean).join(" ") || user.username;
|
||
return base.slice(0, 2).toUpperCase();
|
||
}
|
||
|
||
function InfoRow({ label, value }: { label: string; value?: React.ReactNode }) {
|
||
return (
|
||
<div className="flex items-center justify-between gap-3 rounded-xl bg-muted/35 px-3 py-2 text-sm">
|
||
<span className="text-muted-foreground">{label}</span>
|
||
<span className="text-left font-medium">{value || "—"}</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function UserDetailDialog({
|
||
user,
|
||
open,
|
||
onOpenChange,
|
||
}: {
|
||
user: UserProfileSchema | null;
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
}) {
|
||
if (!user) return null;
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="max-h-[90vh] max-w-3xl overflow-y-auto" dir="rtl">
|
||
<DialogHeader className="text-right">
|
||
<DialogTitle>جزئیات کاربر</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-5">
|
||
<div className="flex items-center gap-3 rounded-2xl border bg-muted/20 p-4">
|
||
<Avatar className="h-16 w-16">
|
||
<AvatarImage src={user.profile_picture_thumbnail_url || user.profile_picture || undefined} />
|
||
<AvatarFallback>{initials(user)}</AvatarFallback>
|
||
</Avatar>
|
||
<div className="min-w-0 text-right">
|
||
<h3 className="truncate text-lg font-bold">{fullName(user)}</h3>
|
||
<p className="truncate text-sm text-muted-foreground">{user.username}</p>
|
||
</div>
|
||
<div className="mr-auto flex flex-wrap gap-2">
|
||
<Badge variant={user.is_active ? "default" : "outline"}>{user.is_active ? "فعال" : "غیرفعال"}</Badge>
|
||
{user.is_staff ? <Badge variant="secondary">Staff</Badge> : null}
|
||
{user.is_superuser ? <Badge variant="destructive">Superuser</Badge> : null}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-2 md:grid-cols-2">
|
||
<InfoRow label="نام" value={user.first_name} />
|
||
<InfoRow label="نام خانوادگی" value={user.last_name} />
|
||
<InfoRow label="موبایل" value={user.mobile} />
|
||
<InfoRow label="ایمیل" value={user.email} />
|
||
<InfoRow label="شماره دانشجویی" value={user.student_id} />
|
||
<InfoRow label="سال ورود" value={user.year_of_study ? formatNumberPersian(user.year_of_study) : null} />
|
||
<InfoRow label="دانشگاه" value={user.university} />
|
||
<InfoRow label="رشته" value={user.major} />
|
||
<InfoRow label="تاریخ عضویت" value={formatJalali(user.date_joined)} />
|
||
<InfoRow label="حذف شده" value={user.is_deleted ? "بله" : "خیر"} />
|
||
<InfoRow label="تایید موبایل" value={user.is_mobile_verified ? "بله" : "خیر"} />
|
||
<InfoRow label="تایید ایمیل" value={user.is_email_verified ? "بله" : "خیر"} />
|
||
<InfoRow label="دسترسی بلاگ" value={user.can_access_blog_admin ? "دارد" : "ندارد"} />
|
||
<InfoRow label="نوشتن بلاگ" value={user.can_write_blog_posts ? "دارد" : "ندارد"} />
|
||
<InfoRow label="بازبینی بلاگ" value={user.can_review_blog_posts ? "دارد" : "ندارد"} />
|
||
<InfoRow label="اتصال گوگل" value={user.has_google_link ? "دارد" : "ندارد"} />
|
||
</div>
|
||
|
||
{user.bio ? (
|
||
<div className="rounded-2xl border bg-background p-4 text-right text-sm leading-7">
|
||
<div className="mb-2 font-semibold">بیوگرافی</div>
|
||
{user.bio}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|
||
|
||
export default function AdminUsersPage() {
|
||
const { toast } = useToast();
|
||
const [filters, setFilters] = React.useState({
|
||
search: "",
|
||
studentId: "",
|
||
university: null as string | null,
|
||
major: null as string | null,
|
||
isActive: "all",
|
||
});
|
||
const [debouncedSearch, setDebouncedSearch] = React.useState("");
|
||
const [page, setPage] = React.useState(1);
|
||
const [selectedUserId, setSelectedUserId] = React.useState<number | null>(null);
|
||
|
||
React.useEffect(() => {
|
||
const timer = window.setTimeout(() => setDebouncedSearch(filters.search.trim()), 300);
|
||
return () => window.clearTimeout(timer);
|
||
}, [filters.search]);
|
||
|
||
const usersQuery = useQuery({
|
||
queryKey: ["admin", "users", filters, debouncedSearch, page],
|
||
queryFn: () =>
|
||
api.listUsers({
|
||
search: debouncedSearch || undefined,
|
||
student_id: filters.studentId || undefined,
|
||
university: filters.university || undefined,
|
||
major: filters.major || undefined,
|
||
is_active:
|
||
filters.isActive === "all"
|
||
? undefined
|
||
: filters.isActive === "active"
|
||
? "true"
|
||
: "false",
|
||
limit: USERS_PAGE_SIZE,
|
||
offset: (page - 1) * USERS_PAGE_SIZE,
|
||
}),
|
||
});
|
||
|
||
const selectedUserQuery = useQuery({
|
||
queryKey: ["admin", "users", selectedUserId, "detail"],
|
||
queryFn: () => api.getUserDetail(selectedUserId as number),
|
||
enabled: selectedUserId != null,
|
||
});
|
||
|
||
React.useEffect(() => {
|
||
if (usersQuery.error) {
|
||
toast({
|
||
title: "خطا در بارگذاری کاربران",
|
||
description: resolveErrorMessage(usersQuery.error),
|
||
variant: "destructive",
|
||
});
|
||
}
|
||
}, [usersQuery.error, toast]);
|
||
|
||
const users = usersQuery.data ?? [];
|
||
const hasMore = users.length === USERS_PAGE_SIZE;
|
||
|
||
const handleFilterChange = (field: keyof typeof filters, value: string | null) => {
|
||
setFilters((prev) => ({ ...prev, [field]: value ?? "" }));
|
||
setPage(1);
|
||
};
|
||
|
||
const loadMajors = React.useCallback(async (params: { search: string; limit: number; offset: number }) => {
|
||
const data = await api.getMajorsPaged(params);
|
||
return {
|
||
count: data.count,
|
||
results: data.results.map((item) => ({ value: item.code, label: item.label })),
|
||
};
|
||
}, []);
|
||
|
||
const loadUniversities = React.useCallback(async (params: { search: string; limit: number; offset: number }) => {
|
||
const data = await api.getUniversitiesPaged(params);
|
||
return {
|
||
count: data.count,
|
||
results: data.results.map((item) => ({ value: item.code, label: item.label })),
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h2 className="text-xl font-semibold">کاربران</h2>
|
||
<p className="mt-1 text-sm text-muted-foreground">مدیریت و جستجوی کاربران سامانه</p>
|
||
</div>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>فیلترها</CardTitle>
|
||
<CardDescription>جستجو با نام، ایمیل، موبایل، دانشگاه یا رشته</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
|
||
<Input
|
||
placeholder="نام، نام‌کاربری، ایمیل یا موبایل..."
|
||
value={filters.search}
|
||
onChange={(event) => handleFilterChange("search", event.target.value)}
|
||
/>
|
||
<Input
|
||
placeholder="شماره دانشجویی"
|
||
value={filters.studentId}
|
||
onChange={(event) => handleFilterChange("studentId", event.target.value)}
|
||
/>
|
||
<Select value={filters.isActive} onValueChange={(value) => handleFilterChange("isActive", value)}>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">همه وضعیت‌ها</SelectItem>
|
||
<SelectItem value="active">فعال</SelectItem>
|
||
<SelectItem value="inactive">غیرفعال</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<AsyncSearchableCombobox
|
||
value={filters.university}
|
||
onChange={(value) => handleFilterChange("university", value)}
|
||
loadOptions={loadUniversities}
|
||
placeholder="دانشگاه"
|
||
/>
|
||
</div>
|
||
<div className="max-w-xl">
|
||
<AsyncSearchableCombobox
|
||
value={filters.major}
|
||
onChange={(value) => handleFilterChange("major", value)}
|
||
loadOptions={loadMajors}
|
||
placeholder="رشته"
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>لیست کاربران</CardTitle>
|
||
<CardDescription>برای مشاهده جزئیات، روی هر ردیف کلیک کنید.</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
{usersQuery.isLoading ? (
|
||
<p className="text-sm text-muted-foreground">در حال بارگذاری...</p>
|
||
) : users.length === 0 ? (
|
||
<p className="text-sm text-muted-foreground">کاربری یافت نشد.</p>
|
||
) : (
|
||
<div className="overflow-x-auto rounded-2xl border">
|
||
<table dir="rtl" className="w-full min-w-[620px] text-sm">
|
||
<thead className="bg-muted/40 text-muted-foreground">
|
||
<tr>
|
||
<th className="px-4 py-3 text-right">کاربر</th>
|
||
<th className="px-4 py-3 text-right">موبایل</th>
|
||
<th className="px-4 py-3 text-right">ایمیل</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{users.map((user) => (
|
||
<tr
|
||
key={user.id}
|
||
role="button"
|
||
tabIndex={0}
|
||
className="cursor-pointer border-t transition hover:bg-muted/50"
|
||
onClick={() => setSelectedUserId(user.id)}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Enter" || event.key === " ") setSelectedUserId(user.id);
|
||
}}
|
||
>
|
||
<td className="px-4 py-3">
|
||
<div className="flex items-center gap-3">
|
||
<Avatar className="h-11 w-11">
|
||
<AvatarImage src={user.profile_picture_thumbnail_url || user.profile_picture || undefined} />
|
||
<AvatarFallback>{initials(user)}</AvatarFallback>
|
||
</Avatar>
|
||
<div className="min-w-0 text-right">
|
||
<div className="truncate font-semibold">{fullName(user)}</div>
|
||
<div className="truncate text-xs text-muted-foreground">{user.username}</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td className="px-4 py-3">
|
||
<span className="inline-flex items-center gap-2">
|
||
<Phone className="h-4 w-4 text-muted-foreground" />
|
||
{user.mobile || "—"}
|
||
</span>
|
||
</td>
|
||
<td className="px-4 py-3">
|
||
<span className="inline-flex items-center gap-2">
|
||
<Mail className="h-4 w-4 text-muted-foreground" />
|
||
{user.email || "—"}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||
<span>صفحه {formatNumberPersian(page)}</span>
|
||
<div className="flex gap-2">
|
||
<Button size="sm" variant="outline" disabled={page === 1} onClick={() => setPage((prev) => Math.max(1, prev - 1))}>
|
||
قبلی
|
||
</Button>
|
||
<Button size="sm" variant="outline" disabled={!hasMore} onClick={() => setPage((prev) => prev + 1)}>
|
||
بعدی
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<UserDetailDialog
|
||
user={selectedUserQuery.data ?? null}
|
||
open={selectedUserId != null}
|
||
onOpenChange={(open) => {
|
||
if (!open) setSelectedUserId(null);
|
||
}}
|
||
/>
|
||
|
||
{selectedUserQuery.isFetching && selectedUserId ? (
|
||
<div className="fixed inset-x-0 bottom-24 z-50 mx-auto flex w-fit items-center gap-2 rounded-full border bg-background px-4 py-2 text-sm shadow-lg">
|
||
<UserRound className="h-4 w-4 animate-pulse" />
|
||
در حال بارگذاری جزئیات...
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|