"use client"; import { useEffect, useState } from "react"; import { useParams, useRouter } from "next/navigation"; import { PageLoader } from "../../../Components/UI/Spinner"; import { Alert } from "../../../Components/UI/Alert"; import { fmtDate } from "../../../utils/helperFun"; import { getStoredToken } from "../../../lib/auth"; import { userService } from "../../../services/user.service"; import type { UserDetail } from "../../../types/user"; // ── helpers ─────────────────────────────────────────────────────────────────── function safeFmtDate(iso: string | null | undefined): string { if (!iso) return "—"; try { const d = new Date(iso); if (isNaN(d.getTime())) return "—"; return fmtDate(iso); } catch { return "—"; } } // ── sub-components ──────────────────────────────────────────────────────────── function SectionCard({ title, children }: { title: string; children: React.ReactNode }) { return (

{title}

{children}
); } function Field({ label, children }: { label: string; children: React.ReactNode }) { return (
{label} {children}
); } function ActiveBadge({ active }: { active: boolean }) { return ( {active ? "نشط" : "معطل"} ); } function DeletedBadge({ deleted }: { deleted: boolean }) { if (!deleted) return ( موجود ); return ( محذوف ); } // eye icon function EyeIcon({ open }: { open: boolean }) { if (open) return ( ); return ( ); } // silhouette fallback avatar function AvatarFallback() { return (
); } // ── main page ───────────────────────────────────────────────────────────────── export default function UserDetailPage() { const params = useParams(); const router = useRouter(); const userId = typeof params?.userId === "string" ? params.userId : null; const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [showToken, setShowToken] = useState(false); useEffect(() => { if (!userId) { router.replace("/users"); return; } let cancelled = false; async function fetchUser() { try { const token = getStoredToken(); const res = await userService.getById(userId as string, token); if (!cancelled) { setUser((res as { data: UserDetail }).data ?? null); } } catch { if (!cancelled) setError("تعذّر تحميل بيانات المستخدم. يرجى المحاولة لاحقاً."); } finally { if (!cancelled) setLoading(false); } } fetchUser(); return () => { cancelled = true; }; }, [userId, router]); // reset token visibility on unmount useEffect(() => () => { setShowToken(false); }, []); if (loading) return ; if (error || !user) { return ( ); } return (
{/* soft-deleted warning banner */} {user.isDeleted && (
هذا المستخدم محذوف — تم حذفه بتاريخ {safeFmtDate(user.deletedAt)}.
)} {/* page header */}
العودة إلى المستخدمين
{/* avatar */} {user.photo ? {user.name} : }

ملف المستخدم

{user.name}

{user.userName && ( @{user.userName} )}
{/* grid layout */}
{/* Basic Info */}
{user.name} {user.email ? {user.email} : "—" } {user.phone || "—"} {user.id}
{/* Role & Branch */}
{user.role?.name ?? "—"} {user.role?.description && ( {user.role.description} )} {user.branch?.name ?? "—"}
{/* Account Status */}
{safeFmtDate(user.createdAt)} {safeFmtDate(user.updatedAt)} {safeFmtDate(user.deletedAt)} {safeFmtDate(user.passwordChangedAt)}
{/* Refresh Token */} {user.refreshToken ? (
{showToken ? user.refreshToken : "••••••••••••••••••••••••"}

هذا الرمز حساس — لا تشاركه مع أي أحد.

) : (

غير متاح

)}
); }