96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { useEffect, useState, useCallback } from "react";
|
|||
|
|
import Link from "next/link";
|
|||
|
|
import { ChevronLeft, UserCheck } from "lucide-react";
|
|||
|
|
import { Card } from "@/components/ui/Card";
|
|||
|
|
import { Avatar } from "@/components/ui/Avatar";
|
|||
|
|
import { Badge } from "@/components/ui/Badge";
|
|||
|
|
import { EmptyState } from "@/components/ui/EmptyState";
|
|||
|
|
import { FullScreenLoader } from "@/components/ui/FullScreenLoader";
|
|||
|
|
import { ErrorBanner } from "@/components/ui/ErrorBanner";
|
|||
|
|
import { formatApiError } from "@/lib/hooks";
|
|||
|
|
import { calcAge } from "@/lib/utils";
|
|||
|
|
import { UserProfile, listPendingUsers } from "@/lib/api";
|
|||
|
|
|
|||
|
|
export default function PendingUsersPage() {
|
|||
|
|
const [users, setUsers] = useState<UserProfile[] | null>(null);
|
|||
|
|
const [error, setError] = useState<string | null>(null);
|
|||
|
|
|
|||
|
|
const load = useCallback(async () => {
|
|||
|
|
setError(null);
|
|||
|
|
try {
|
|||
|
|
setUsers(await listPendingUsers());
|
|||
|
|
} catch (err) {
|
|||
|
|
setError(formatApiError(err));
|
|||
|
|
}
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|||
|
|
load();
|
|||
|
|
}, [load]);
|
|||
|
|
|
|||
|
|
if (error && !users) {
|
|||
|
|
return (
|
|||
|
|
<div className="max-w-2xl">
|
|||
|
|
<ErrorBanner message={error} />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
if (!users) return <FullScreenLoader />;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-col gap-6 max-w-3xl">
|
|||
|
|
<div>
|
|||
|
|
<h1 className="font-[var(--font-display)] font-extrabold text-[24px]">
|
|||
|
|
کاربران در انتظار تایید ✅
|
|||
|
|
</h1>
|
|||
|
|
<p className="text-[14px] text-(--color-content-secondary) mt-1">
|
|||
|
|
این کاربرها آنبوردینگ رو کامل کردن و منتظرن پروفایلشون بررسی بشه. قدیمیترین
|
|||
|
|
درخواست بالاتره.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{users.length === 0 ? (
|
|||
|
|
<Card>
|
|||
|
|
<EmptyState
|
|||
|
|
icon={<UserCheck size={32} />}
|
|||
|
|
title="کسی منتظر بررسی نیست"
|
|||
|
|
description="هر وقت کاربر جدیدی آنبوردینگ رو تموم کنه، اینجا برای بررسی نشون داده میشه."
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
) : (
|
|||
|
|
<Card padded={false} className="overflow-hidden">
|
|||
|
|
{users.map((u, i) => (
|
|||
|
|
<Link
|
|||
|
|
key={u.id}
|
|||
|
|
href={`/users/${u.id}`}
|
|||
|
|
className={`flex items-center gap-3 px-4 py-3.5 hover:bg-(--color-bg-secondary) transition-colors ${
|
|||
|
|
i !== users.length - 1 ? "border-b border-(--color-border-subtle)" : ""
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<Avatar name={u.first_name || u.phone} />
|
|||
|
|
<div className="flex-1 min-w-0">
|
|||
|
|
<p className="font-bold text-[14px] text-(--color-content-primary) truncate">
|
|||
|
|
{u.first_name || "بدون نام"}
|
|||
|
|
{calcAge(u.birth_date) ? `، ${calcAge(u.birth_date)} سال` : ""}
|
|||
|
|
</p>
|
|||
|
|
<p dir="ltr" className="text-[12px] text-(--color-content-tertiary) text-right">
|
|||
|
|
{u.phone}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
{u.gender && (
|
|||
|
|
<Badge tone="neutral" className="shrink-0">
|
|||
|
|
{u.gender === "male" ? "مرد" : "زن"}
|
|||
|
|
</Badge>
|
|||
|
|
)}
|
|||
|
|
<ChevronLeft size={16} className="text-(--color-content-tertiary) shrink-0" />
|
|||
|
|
</Link>
|
|||
|
|
))}
|
|||
|
|
</Card>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|