feat(frontend): wire App Router pages for the LMS flows
Connect login, learning path, quiz, profile, community, and admin routes to the shared feature components.
This commit is contained in:
@@ -0,0 +1,171 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Flame, Heart, Sparkles, Trophy, User as UserIcon } from "lucide-react";
|
||||
import { useAuth } from "@/lib/auth-store";
|
||||
import { http, toUserError } from "@/lib/api";
|
||||
import type { LeaderboardData } from "@/lib/types";
|
||||
import { Panel } from "@/components/panel";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { UserAvatar, avatarPropsOf } from "@/components/ui/user-avatar";
|
||||
import { ProfileCertificateSlot } from "@/components/profile-certificate-slot";
|
||||
import { ChallengeCards } from "@/components/challenge-cards";
|
||||
import { AvatarStudio } from "@/components/avatar-studio";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { formatFaNumber, formatStreakLabel } from "@/lib/utils";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ProfilePage() {
|
||||
const user = useAuth((s) => s.user);
|
||||
const [studioOpen, setStudioOpen] = useState(false);
|
||||
const { data: lb, isError: lbError, error: lbErr } = useQuery({
|
||||
queryKey: ["leaderboard"],
|
||||
queryFn: () => http.get<LeaderboardData>("/api/leaderboard/weekly"),
|
||||
enabled: !!user,
|
||||
});
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl py-16 text-center">
|
||||
<p className="text-muted-foreground">برای مشاهدهٔ پروفایل وارد شوید.</p>
|
||||
<Button asChild className="mt-4">
|
||||
<Link href="/login">ورود</Link>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl space-y-6">
|
||||
<Panel
|
||||
title="پروفایل من"
|
||||
description="هویت، آمار یادگیری، چالش‌ها و گواهینامه در یک نگاه."
|
||||
icon={<UserIcon className="h-5 w-5" />}
|
||||
tint="bg-primary/10 text-primary"
|
||||
actions={
|
||||
<Button variant="outline" size="sm" onClick={() => setStudioOpen(true)}>
|
||||
ویرایش آواتار
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start">
|
||||
<UserAvatar name={user.name} className="h-20 w-20" {...avatarPropsOf(user)} />
|
||||
<div className="min-w-0 flex-1 space-y-2 text-center sm:text-start">
|
||||
<h1 className="text-2xl font-black tracking-tight">{user.name}</h1>
|
||||
<dl className="mt-1 space-y-2 text-sm">
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<dt className="shrink-0 text-xs text-muted-foreground">نام کاربری</dt>
|
||||
<dd className="min-w-0 font-latin font-bold tracking-tight" dir="ltr">
|
||||
@{user.username}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<dt className="shrink-0 text-xs text-muted-foreground">ایمیل</dt>
|
||||
<dd className="min-w-0 break-all font-latin font-medium" dir="ltr">
|
||||
{user.email}
|
||||
</dd>
|
||||
</div>
|
||||
{user.phone && (
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<dt className="shrink-0 text-xs text-muted-foreground">تلفن</dt>
|
||||
<dd className="min-w-0 font-latin font-medium" dir="ltr">
|
||||
{user.phone}
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<dt className="shrink-0 text-xs text-muted-foreground">عضویت از</dt>
|
||||
<dd className="min-w-0 font-medium">
|
||||
{new Date(user.createdAt).toLocaleDateString("fa-IR", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<StatCard icon={<Sparkles className="h-4 w-4 text-gold" />} label="امتیاز کل" value={formatFaNumber(user.xp)} />
|
||||
<StatCard icon={<Heart className="h-4 w-4 text-destructive" />} label="قلب‌ها" value={formatFaNumber(user.hearts)} />
|
||||
<StatCard
|
||||
icon={<Flame className="h-4 w-4 text-accent" />}
|
||||
label="زنجیرهٔ فعلی"
|
||||
value={formatStreakLabel(user.streakCurrent)}
|
||||
/>
|
||||
<StatCard
|
||||
icon={<Flame className="h-4 w-4 text-muted-foreground" />}
|
||||
label="بلندترین زنجیره"
|
||||
value={formatStreakLabel(user.streakLongest)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="flex items-center gap-3 p-4">
|
||||
<Trophy className="h-5 w-5 text-gold" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-bold">رتبهٔ لیگ این هفته</p>
|
||||
{lbError ? (
|
||||
<p className="text-xs text-destructive">{toUserError(lbErr)}</p>
|
||||
) : lb?.me && lb.me.rank > 0 ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
رتبه {formatFaNumber(lb.me.rank)} با {formatFaNumber(Math.round(lb.me.xp))} امتیاز هفتگی
|
||||
</p>
|
||||
) : lb ? (
|
||||
<p className="text-xs text-muted-foreground">هنوز در رتبه‌بندی این هفته نیستید</p>
|
||||
) : (
|
||||
<Skeleton className="mt-1 h-3 w-40" />
|
||||
)}
|
||||
</div>
|
||||
<Button asChild size="sm" variant="outline">
|
||||
<Link href="/leaderboard">لیگ‌ها</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div>
|
||||
<h2 className="mb-2 text-sm font-black text-muted-foreground">چالش‌های فعال</h2>
|
||||
<ChallengeCards />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="mb-2 text-sm font-black text-muted-foreground">گواهینامه</h2>
|
||||
<ProfileCertificateSlot />
|
||||
</div>
|
||||
|
||||
<Dialog open={studioOpen} onOpenChange={setStudioOpen}>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-center">ویرایش آواتار</DialogTitle>
|
||||
</DialogHeader>
|
||||
<AvatarStudio user={user} onClose={() => setStudioOpen(false)} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="flex items-center gap-3 p-4">
|
||||
<div className="grid h-9 w-9 place-items-center rounded-lg bg-muted">{icon}</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">{label}</p>
|
||||
<p className="text-lg font-black tabular-nums">{value}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user