ahp/pargar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

feat(frontend): draft/publish, certificate approval UI, contributors, leaderboard tiers

Browse Source 
- admin-studio: chapter/lesson publish toggle with Draft/Published badges; per-chapter accordion
- cap/page: remove auto-issue effect; student requests, admin approves
- learning-panel: admin issue-certificate action per student
- site-settings: contributors editor with avatar upload (ContributorAvatarPicker, TagInput)
- community-panel: render contributors section below social links
- leaderboard-panel: TierBadge, totalParticipants, tier on entries and self
- page.tsx: fix "شروع مسیر" routing to /register instead of /login
- navbar: correct icons (Settings, Palette) in user dropdown
- types: Contributor, LeaderboardTier, Certificate status field, updated LeaderboardData/Entry
- layout: PWA icon metadata (192, 512, apple-touch-icon)
This commit is contained in:
ahp
2026-10-20 17:51:23 +03:30
parent 161610049c
commit 7716c1677c
18 changed files with 791 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package-lock.json
Generated
+46
View File
@@ -42,6 +42,7 @@
"zustand": "^5.0.2"
},
"devDependencies": {
"@playwright/test": "^1.64.1",
"@tailwindcss/postcss": "^4.0.0",
"@types/node": "^22.10.0",
"@types/react": "^19.0.0",
@@ -796,6 +797,22 @@
"node": ">= 10"
}
},
"node_modules/@playwright/test": {
"version": "1.64.1",
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.64.1.tgz",
"integrity": "sha512-IaYGml/nSOiZWROfPtuIL7neuu9qDOZ3TNvNljUIrhDMxiGTgPjzj/g9p9RxpS2tSepPDRY+UwAaEeiKtUvIAg==",
"devOptional": true,
"license": "Apache-2.0",
"dependencies": {
"playwright": "1.64.1"
},
"bin": {
"playwright": "cli.js"
},
"engines": {
"node": ">=20"
}
},
"node_modules/@radix-ui/primitive": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.7.tgz",
@@ -2973,6 +2990,35 @@
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
"license": "ISC"
},
"node_modules/playwright": {
"version": "1.64.1",
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.64.1.tgz",
"integrity": "sha512-HCrVhHr5QQuwYoswEUGTb7gGp522yflbv/ST8nF4sFWGuLjQCt17Q/EubpGGSNKYn1tsTCPZxqHhHCfVURu7UA==",
"devOptional": true,
"license": "Apache-2.0",
"dependencies": {
"playwright-core": "1.64.1"
},
"bin": {
"playwright": "cli.js"
},
"engines": {
"node": ">=20"
}
},
"node_modules/playwright-core": {
"version": "1.64.1",
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.64.1.tgz",
"integrity": "sha512-BC4s8y6SEVA6Q1rSxZTto8hI1KUI3xXlHGZgvGqP4IqPdI/a6FX9H29IDNz7vKo9l21b6LfYosScPL6M3xxyDQ==",
"devOptional": true,
"license": "Apache-2.0",
"bin": {
"playwright-core": "cli.js"
},
"engines": {
"node": ">=20"
}
},
"node_modules/postcss": {
"version": "8.5.28",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
frontend/package.json
+1
View File
@@ -46,6 +46,7 @@
"zustand": "^5.0.2"
},
"devDependencies": {
"@playwright/test": "^1.64.1",
"@tailwindcss/postcss": "^4.0.0",
"@types/node": "^22.10.0",
"@types/react": "^19.0.0",
frontend/public/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

frontend/public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 103 KiB

frontend/public/icon-192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

frontend/public/icon-512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

frontend/public/logo.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 149 KiB

After

Width:  |  Height:  |  Size: 253 KiB

frontend/src/app/cap/page.tsx
-7
View File
@@ -73,13 +73,6 @@ function CapPageInner() {
enabled: !!user && curriculumDone,
});
useEffect(() => {
if (!curriculumDone || !user) return;
void http
.post("/api/me/certificate/issue", {})
.then(() => qc.invalidateQueries({ queryKey: ["me", "certificate"] }))
.catch((e) => toast.error(toUserError(e, "صدور گواهینامه ممکن نشد")));
}, [curriculumDone, user, qc]);
if (isLoading) {
return <CapSkeleton />;
frontend/src/app/layout.tsx
+8
View File
@@ -35,6 +35,14 @@ const vazirmatnLatin = localFont({
export const metadata: Metadata = {
title: "پرگار",
description: "مسیر یادگیری واقعی پرگار",
icons: {
icon: [
{ url: "/favicon.ico" },
{ url: "/icon-192.png", sizes: "192x192", type: "image/png" },
{ url: "/icon-512.png", sizes: "512x512", type: "image/png" },
],
apple: { url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
},
};
export const viewport: Viewport = {
frontend/src/app/page.tsx
+3 -2
View File
@@ -93,6 +93,7 @@ export default function Home() {
const goCap = () => router.push("/cap");
const goLogin = () => router.push("/login");
const goRegister = () => router.push("/register");
return (
<div className="mx-auto flex max-w-5xl flex-col items-center">
@@ -134,7 +135,7 @@ export default function Home() {
<Button size="lg" onClick={goLogin} className="gap-2 px-8">
ورود
</Button>
<Button size="lg" variant="outline" onClick={goLogin} className="gap-2 px-8">
<Button size="lg" variant="outline" onClick={goRegister} className="gap-2 px-8">
<Zap className="h-5 w-5" /> شروع مسیر
</Button>
</>
@@ -288,7 +289,7 @@ export default function Home() {
<Link href="/login">ورود</Link>
</Button>
<Button size="lg" variant="outline" asChild className="gap-2 px-8">
<Link href="/login">
<Link href="/register">
<PlayCircle className="h-5 w-5" /> شروع مسیر
</Link>
</Button>
frontend/src/components/admin-studio.tsx
+282 -105
View File
@@ -12,6 +12,7 @@ import {
Copy,
Cpu,
Eye,
EyeOff,
Flag,
GitBranch,
Globe,
@@ -21,6 +22,7 @@ import {
Loader2,
Lock,
MapPin,
MoreHorizontal,
Pencil,
Plus,
Rocket,
@@ -59,6 +61,15 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { PasswordInput } from "@/components/ui/password-input";
import { Label } from "@/components/ui/label";
import { Skeleton } from "@/components/ui/skeleton";
@@ -685,7 +696,11 @@ function CurriculumPanel() {
const [lessonModal, setLessonModal] = useState<Lesson | null>(null);
const [chapterModal, setChapterModal] = useState<Chapter | null>(null);
const [dragIdx, setDragIdx] = useState<{ chapter: number; from: number; over?: number } | null>(null);
const [activeChapter, setActiveChapter] = useState<number | null>(null);
const [dragIdx, setDragIdx] = useState<{ chapter: number; from: number } | null>(null);
const toggleChapter = (id: number) =>
setActiveChapter((prev) => (prev === id ? null : id));
const persistChapterOrder = async (list: Chapter[]) => {
for (let i = 0; i < list.length; i++) {
@@ -772,12 +787,14 @@ function CurriculumPanel() {
}
};
const newLesson = (chapterId: number) =>
const newLesson = (chapterId: number) => {
setActiveChapter(chapterId);
setLessonModal({
id: 0, chapterId, title: "", description: "", videoKey: "",
durationSeconds: 45, completionThresholdPct: 85, requiresLessonId: undefined,
x: lessons.filter((l) => l.chapterId === chapterId).length, y: 0, sortOrder: 1, xpReward: 50, isActive: true, isPublished: false,
});
};
const duplicateLesson = async (l: Lesson) => {
try {
@@ -812,6 +829,7 @@ function CurriculumPanel() {
}
try {
await http.del(`/api/admin/chapters/${ch.id}`);
if (activeChapter === ch.id) setActiveChapter(null);
qc.invalidateQueries({ queryKey: ["admin", "lessons"] });
qc.invalidateQueries({ queryKey: ["admin", "stats"] });
toast.success("فصل حذف شد");
@@ -820,70 +838,159 @@ function CurriculumPanel() {
}
};
const publishedChapters = chapters.filter((c) => c.isPublished).length;
const publishedLessons = lessons.filter((l) => l.isPublished).length;
return (
<>
{dialog}
<Card>
<CardHeader className="flex-row items-center justify-between gap-4">
<div>
<CardTitle className="text-base">فصل‌ها و درخت مهارت</CardTitle>
<p className="mt-1 text-xs text-muted-foreground">
{chapters.length} فصل · {lessons.length} درس · ترتیب با کشیدن یا فلش · موقعیت x,y
</p>
{/* Course overview header */}
<div className="mb-4 flex flex-wrap items-start justify-between gap-3 rounded-xl border border-border bg-muted/30 px-4 py-3">
<div className="space-y-1">
<p className="text-sm font-bold">دوره آموزشی</p>
<div className="flex flex-wrap gap-3 text-xs text-muted-foreground">
<span>{chapters.length} فصل</span>
<span>{lessons.length} درس</span>
<span className="text-success">{publishedChapters} فصل منتشر</span>
<span className="text-success">{publishedLessons} درس منتشر</span>
</div>
<Button className="gap-1.5 rounded-2xl" onClick={() => setChapterModal({ id: 0, title: "", description: "", icon: "terminal", sortOrder: chapters.length + 1, isPublished: false })}>
<Plus className="h-4 w-4" /> فصل جدید
</Button>
</CardHeader>
<CardContent className="space-y-4">
{isLoading && <Loader />}
{chapters.map((ch, ci) => {
const ls = lessons.filter((l) => l.chapterId === ch.id);
const ChIcon = chapterIconOf(ch.icon);
return (
<div key={ch.id} className={cn("rounded-xl border border-border bg-muted/20", dragIdx !== null && dragIdx?.chapter === ch.id && "border-primary/50")}>
<div className="flex items-center gap-2 p-3 pb-2">
<span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-primary/10 text-primary">
</div>
<Button
size="sm"
className="shrink-0"
onClick={() => setChapterModal({ id: 0, title: "", description: "", icon: "terminal", sortOrder: chapters.length + 1, isPublished: false })}
>
<Plus className="h-4 w-4" /> فصل جدید
</Button>
</div>
{/* Chapter list */}
{isLoading && <Loader />}
<div className="space-y-2">
{chapters.map((ch, ci) => {
const ls = lessons.filter((l) => l.chapterId === ch.id);
const ChIcon = chapterIconOf(ch.icon);
const isOpen = activeChapter === ch.id;
return (
<div
key={ch.id}
className={cn(
"overflow-hidden rounded-xl border border-border transition-colors",
isOpen && "border-primary/40 shadow-sm",
)}
>
{/* Chapter header row */}
<div className="flex items-center gap-2 px-3 py-2.5">
{/* Expand toggle + identity — takes full remaining width */}
<button
type="button"
aria-expanded={isOpen}
aria-controls={`chapter-${ch.id}-lessons`}
className="flex min-w-0 flex-1 items-center gap-2.5 rounded-md py-0.5 text-start outline-none focus-visible:ring-2 focus-visible:ring-ring"
onClick={() => toggleChapter(ch.id)}
>
<span className="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-primary/10 text-primary">
<ChIcon className="h-4 w-4" />
</span>
<div className="min-w-0 flex-1">
<h3 className="truncate font-bold">{ch.title}</h3>
{ch.description && <p className="truncate text-xs text-muted-foreground">{ch.description}</p>}
<p className="truncate text-sm font-bold">{ch.title}</p>
{ch.description && (
<p className="truncate text-[11px] text-muted-foreground">{ch.description}</p>
)}
</div>
<Badge variant="outline" className="shrink-0">{ls.length} درس</Badge>
<Badge variant={ch.isPublished ? "success" : "secondary"} className="shrink-0 px-1.5 text-[10px]">
{ch.isPublished ? "منتشر" : "پیش‌نویس"}
</Badge>
<GroupNav
onUp={ci > 0 ? () => moveChapter(ci, -1) : undefined}
onDown={ci < chapters.length - 1 ? () => moveChapter(ci, 1) : undefined}
<ChevronDown
className={cn(
"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200",
isOpen && "rotate-180",
)}
aria-hidden
/>
<Button size="sm" variant="outline" className="h-7 gap-1 text-xs" onClick={() => setChapterModal(ch)}>
<Pencil className="h-3 w-3" /> فصل
</Button>
<Button
size="sm"
variant="outline"
className="h-7 gap-1 text-xs"
onClick={() => publishChapter(ch, !ch.isPublished)}
title={ch.isPublished ? "برگشت به پیش‌نویس" : "انتشار فصل"}
>
{ch.isPublished ? "برگشت" : "انتشار"}
</Button>
<Button size="sm" variant="outline" className="h-7 gap-1 text-xs" onClick={() => newLesson(ch.id)}>
<Plus className="h-3.5 w-3.5" /> درس
</Button>
<Button size="sm" variant="ghost" className="h-7 w-7 px-0 text-destructive" onClick={() => delChapter(ch)} title="حذف فصل">
<Trash2 className="h-3.5 w-3.5" />
</Button>
</div>
{ls.length === 0 ? (
<p className="px-3 pb-3 text-xs text-muted-foreground">هنوز درسی نیست. «+ درس» را بزنید.</p>
) : (
<div className="px-3 pb-3">
<div className="grid gap-1.5 sm:grid-cols-2">
</button>
{/* Status badges */}
<Badge variant="outline" className="shrink-0 px-2 text-[10px]">
{ls.length} درس
</Badge>
<Badge
variant={ch.isPublished ? "success" : "secondary"}
className="hidden shrink-0 px-1.5 text-[10px] sm:inline-flex"
>
{ch.isPublished ? "منتشر" : "پیش‌نویس"}
</Badge>
{/* Chapter actions menu */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="sm"
variant="ghost"
className="h-8 w-8 shrink-0 px-0"
aria-label={`اقدامات فصل ${ch.title}`}
>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48">
<DropdownMenuLabel>فصل {ci + 1}</DropdownMenuLabel>
<DropdownMenuItem onClick={() => setChapterModal(ch)}>
<Pencil className="h-3.5 w-3.5" /> ویرایش فصل
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
setActiveChapter(ch.id);
newLesson(ch.id);
}}
>
<Plus className="h-3.5 w-3.5" /> درس جدید
</DropdownMenuItem>
<DropdownMenuSeparator />
{ci > 0 && (
<DropdownMenuItem onClick={() => moveChapter(ci, -1)}>
<ChevronUp className="h-3.5 w-3.5" /> جابجا به بالا
</DropdownMenuItem>
)}
{ci < chapters.length - 1 && (
<DropdownMenuItem onClick={() => moveChapter(ci, 1)}>
<ChevronDown className="h-3.5 w-3.5" /> جابجا به پایین
</DropdownMenuItem>
)}
<DropdownMenuItem onClick={() => publishChapter(ch, !ch.isPublished)}>
{ch.isPublished ? (
<><EyeOff className="h-3.5 w-3.5" /> برگشت به پیش‌نویس</>
) : (
<><Globe className="h-3.5 w-3.5" /> انتشار فصل</>
)}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
className="text-destructive focus:text-destructive"
onClick={() => delChapter(ch)}
>
<Trash2 className="h-3.5 w-3.5" /> حذف فصل
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
{/* Lessons panel (progressive disclosure) */}
{isOpen && (
<div
id={`chapter-${ch.id}-lessons`}
className="border-t border-border/70"
>
{ls.length === 0 ? (
<div className="px-4 py-5 text-center text-sm text-muted-foreground">
هنوز درسی نیست — از دکمه زیر درس اضافه کنید.
</div>
) : (
<div className="divide-y divide-border/60">
{ls.map((l, li) => {
const cols = ls.filter((o) => o.x === l.x && o.y === l.y && o.id !== l.id);
const collision = ls.some(
(o) => o.x === l.x && o.y === l.y && o.id !== l.id,
);
return (
<div
key={l.id}
@@ -892,80 +999,150 @@ function CurriculumPanel() {
onDragOver={(e) => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
setDragIdx((d) => (d ? { ...d, over: li, chapter: ch.id } : d));
}}
onDrop={() => {
if (dragIdx && dragIdx.chapter === ch.id && dragIdx.from !== li) {
const idx = dragIdx.from;
const next = reorderArray(ls, idx, li);
const next = reorderArray(ls, dragIdx.from, li);
persistLessonOrder(next).catch(() => {});
}
setDragIdx(null);
}}
onDragEnd={() => setDragIdx(null)}
className={cn(
"group flex cursor-grab items-center gap-2 rounded-lg border border-border bg-card px-3 py-2.5 transition-colors active:cursor-grabbing",
"flex items-center gap-2 px-3 py-2.5 transition-colors hover:bg-muted/40",
dragIdx?.from === li && dragIdx.chapter === ch.id && "opacity-40",
!l.videoKey && "border-dashed"
)}
>
<GripVertical className="h-4 w-4 shrink-0 text-muted-foreground/50" />
<span className="shrink-0 text-xs font-bold tabular-nums text-muted-foreground">L{l.id}</span>
{/* Grip handle */}
<GripVertical className="h-4 w-4 shrink-0 cursor-grab text-muted-foreground/40 active:cursor-grabbing" aria-hidden />
{/* Lesson identity */}
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium">{l.title}</p>
<div className="flex flex-wrap items-center gap-1.5 text-[11px] text-muted-foreground">
<Timer className="h-3 w-3" /> {formatDur(l.durationSeconds)}
<Sparkles className="h-3 w-3 text-gold" /> +{formatFaNumber(l.xpReward)}
<MapPin className="h-3 w-3" /> {l.x},{l.y}
<p className="truncate text-sm font-medium leading-tight">
{l.title}
</p>
<div className="mt-0.5 flex flex-wrap items-center gap-2 text-[11px] text-muted-foreground">
<span className="inline-flex items-center gap-0.5">
<Timer className="h-3 w-3" />
{formatDur(l.durationSeconds)}
</span>
<span className="inline-flex items-center gap-0.5 text-gold">
<Sparkles className="h-3 w-3" />
+{formatFaNumber(l.xpReward)}
</span>
{l.videoKey ? (
<span className="inline-flex items-center gap-0.5 text-success"><Video className="h-3 w-3" /> ویدیو</span>
<span className="inline-flex items-center gap-0.5 text-success">
<Video className="h-3 w-3" /> ویدیو
</span>
) : (
<span className="text-warning">بدون ویدیو</span>
)}
{cols.length > 0 && <Badge variant="destructive" className="px-1 text-[9px]">تداخل</Badge>}
{collision && (
<Badge variant="destructive" className="px-1 text-[9px]">
تداخل موقعیت
</Badge>
)}
</div>
</div>
<Badge variant={l.isPublished ? "success" : "secondary"} className="shrink-0 px-1.5 text-[10px]">
{/* Publish badge */}
<Badge
variant={l.isPublished ? "success" : "secondary"}
className="hidden shrink-0 px-1.5 text-[10px] sm:inline-flex"
>
{l.isPublished ? "منتشر" : "پیش‌نویس"}
</Badge>
<div className="flex shrink-0 gap-0.5">
<GroupNav onUp={li > 0 ? () => moveLesson(ch.id, li, -1) : undefined} onDown={li < ls.length - 1 ? () => moveLesson(ch.id, li, 1) : undefined} compact />
<Button size="sm" variant="ghost" className="h-7 px-1.5" title="تکثیر" onClick={() => duplicateLesson(l)}>
<Copy className="h-3.5 w-3.5" />
</Button>
<Button size="sm" variant="ghost" className="h-7 px-1.5" onClick={() => setLessonModal(l)} title="ویرایش">
<Pencil className="h-3.5 w-3.5" />
</Button>
<Button
size="sm"
variant="ghost"
className="h-7 px-1.5 text-[10px]"
title={l.isPublished ? "برگشت به پیش‌نویس" : "انتشار درس"}
onClick={() => publishLesson(l, !l.isPublished)}
>
{l.isPublished ? "برگشت" : "انتشار"}
</Button>
<Button size="sm" variant="ghost" className="h-7 w-7 px-0 text-destructive opacity-60 hover:opacity-100" onClick={() => delLesson(l)} title="حذف درس">
<Trash2 className="h-3.5 w-3.5" />
</Button>
</div>
{/* Up/down reorder (accessible) */}
<GroupNav
onUp={li > 0 ? () => moveLesson(ch.id, li, -1) : undefined}
onDown={li < ls.length - 1 ? () => moveLesson(ch.id, li, 1) : undefined}
compact
/>
{/* Edit (primary action) */}
<Button
size="sm"
variant="ghost"
className="h-8 w-8 shrink-0 px-0"
title="ویرایش درس"
aria-label={`ویرایش ${l.title}`}
onClick={() => setLessonModal(l)}
>
<Pencil className="h-3.5 w-3.5" />
</Button>
{/* Secondary actions menu */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="sm"
variant="ghost"
className="h-8 w-8 shrink-0 px-0"
aria-label={`اقدامات ${l.title}`}
>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-44">
<DropdownMenuLabel className="truncate">L{l.id}</DropdownMenuLabel>
<DropdownMenuItem onClick={() => duplicateLesson(l)}>
<Copy className="h-3.5 w-3.5" /> تکثیر
</DropdownMenuItem>
<DropdownMenuItem onClick={() => publishLesson(l, !l.isPublished)}>
{l.isPublished ? (
<><EyeOff className="h-3.5 w-3.5" /> برگشت به پیش‌نویس</>
) : (
<><Globe className="h-3.5 w-3.5" /> انتشار درس</>
)}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
className="text-destructive focus:text-destructive"
onClick={() => delLesson(l)}
>
<Trash2 className="h-3.5 w-3.5" /> حذف درس
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
})}
</div>
)}
{/* Add lesson footer */}
<div className="border-t border-border/60 px-3 py-2.5">
<Button
size="sm"
variant="outline"
className="gap-1.5"
onClick={() => newLesson(ch.id)}
>
<Plus className="h-3.5 w-3.5" /> درس جدید در این فصل
</Button>
</div>
)}
</div>
);
})}
{chapters.length === 0 && !isLoading && (
<div className="rounded-xl border border-dashed border-border p-8 text-center">
<p className="font-bold">هنوز فصلی نیست</p>
<p className="mt-1 text-sm text-muted-foreground">با «فصل جدید» شروع کنید؛ درس‌های هر فصل روی درخت مهارت هنرجو نمایش داده می‌شود.</p>
</div>
)}
</div>
)}
</CardContent>
</Card>
);
})}
</div>
{chapters.length === 0 && !isLoading && (
<div className="rounded-xl border border-dashed border-border p-10 text-center">
<p className="font-bold">هنوز فصلی نیست</p>
<p className="mt-1 text-sm text-muted-foreground">
با «فصل جدید» شروع کنید؛ درس‌های هر فصل روی درخت مهارت هنرجو نمایش داده می‌شود.
</p>
<Button
className="mt-4"
onClick={() => setChapterModal({ id: 0, title: "", description: "", icon: "terminal", sortOrder: 1, isPublished: false })}
>
<Plus className="h-4 w-4" /> فصل جدید
</Button>
</div>
)}
<ChapterDialog chapter={chapterModal} onClose={() => setChapterModal(null)} onSave={saveChapter} />
<LessonDialog
@@ -1437,11 +1614,11 @@ function EventDialog({ event, onClose, onSave }: { event: AdminEvent | null; onC
</div>
<div className="space-y-1.5">
<Label>توضیحات</Label>
<textarea
<Textarea
value={draft.description}
onChange={(e) => set({ description: e.target.value })}
rows={3}
className="w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
className="resize-y"
placeholder="شرح کوتاه رویداد (اختیاری)…"
/>
</div>
frontend/src/components/admin/learning-panel.tsx
+1 -1
View File
@@ -148,7 +148,7 @@ export function LearningPanel() {
return (
<div className="space-y-4">
{(overviewQ.isError || studentsQ.isError) && (
<div className="flex flex-wrap items-center gap-3 rounded-2xl border border-destructive/40 bg-destructive/5 px-4 py-3 text-sm">
<div className="flex flex-wrap items-center gap-3 rounded-2xl border-2 border-destructive/40 bg-destructive/5 px-4 py-3 text-sm">
<AlertTriangle className="h-4 w-4 shrink-0 text-destructive" />
<p className="min-w-0 flex-1 font-bold text-destructive">
{toUserError(overviewQ.error ?? studentsQ.error, "بارگذاری داشبورد یادگیری ممکن نشد")}
frontend/src/components/admin/site-settings-panel.tsx
+245 -3
View File
@@ -1,21 +1,139 @@
"use client";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { Heart, Loader2, Package, Save, Settings2, Share2, Sparkles } from "lucide-react";
import { http, toUserError } from "@/lib/api";
import { useEffect, useRef, useState } from "react";
import { Camera, Heart, Loader2, Package, Save, Settings2, Share2, Sparkles, Trash2, Users } from "lucide-react";
import { apiForm, http, toUserError } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { TagInput } from "@/components/ui/tag-input";
import { AvatarCropDialog } from "@/components/avatar-crop";
import { toast } from "@/components/providers";
import type { AdminTabId } from "@/components/admin/nav";
import { cn } from "@/lib/utils";
type SettingsMap = Record<string, string>;
type SponsorDraft = { name: string; url: string; blurb: string };
type SocialDraft = { name: string; url: string };
type ContributorDraft = { name: string; role: string; bio: string; url: string; avatar: string; contributions: string[] };
function ContributorAvatarPicker({
value,
name,
onChange,
}: {
value: string;
name: string;
onChange: (url: string) => void;
}) {
const fileRef = useRef<HTMLInputElement>(null);
const [pending, setPending] = useState<File | null>(null);
const [uploading, setUploading] = useState(false);
const [error, setError] = useState<string | null>(null);
const initials = name
.split(" ")
.map((w) => w[0])
.slice(0, 2)
.join("")
.toUpperCase() || "؟";
const onUpload = async (blob: Blob) => {
setUploading(true);
setError(null);
try {
const form = new FormData();
form.append("file", new File([blob], "avatar.png", { type: "image/png" }), "avatar.png");
const { url } = await apiForm<{ url: string }>("/api/admin/contributor-avatar", form);
onChange(url);
setPending(null);
} catch (e) {
setError(toUserError(e, "خطا در آپلود"));
} finally {
setUploading(false);
}
};
return (
<div className="flex items-center gap-3">
<div className="relative shrink-0">
{value ? (
<img
src={value}
alt={name}
className="h-14 w-14 rounded-full border-2 border-border object-cover"
/>
) : (
<span className="flex h-14 w-14 items-center justify-center rounded-full border-2 border-dashed border-border bg-muted text-sm font-bold text-muted-foreground">
{initials}
</span>
)}
{uploading && (
<span className="absolute inset-0 flex items-center justify-center rounded-full bg-background/70">
<Loader2 className="h-5 w-5 animate-spin text-primary" />
</span>
)}
</div>
<div className="flex flex-col gap-1.5">
<div className="flex gap-1.5">
<button
type="button"
disabled={uploading}
onClick={() => fileRef.current?.click()}
className={cn(
"flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-xs font-bold text-primary-foreground disabled:opacity-50",
)}
>
<Camera className="h-3 w-3" />
{value ? "تغییر" : "آپلود"}
</button>
{value && (
<button
type="button"
disabled={uploading}
onClick={() => onChange("")}
className="flex items-center gap-1 rounded-md bg-destructive/10 px-2.5 py-1 text-xs font-bold text-destructive disabled:opacity-50"
>
<Trash2 className="h-3 w-3" />
حذف
</button>
)}
</div>
{error && <p className="text-[11px] text-destructive">{error}</p>}
<input
ref={fileRef}
type="file"
accept="image/png,image/jpeg,image/webp"
className="hidden"
onChange={(e) => {
const f = e.target.files?.[0];
if (f) setPending(f);
e.target.value = "";
}}
/>
</div>
<AvatarCropDialog
file={pending}
busy={uploading}
error={error}
onCancel={() => {
if (uploading) return;
setPending(null);
setError(null);
}}
onInvalid={() => {
setPending(null);
setError("خواندن این عکس ممکن نشد. JPEG، PNG یا WebP را انتخاب کنید.");
}}
onCrop={(blob) => onUpload(blob)}
/>
</div>
);
}
function SectionHeading({
icon: Icon,
@@ -46,6 +164,7 @@ export function SiteSettingsPanel({
const [draft, setDraft] = useState<SettingsMap>({});
const [sponsors, setSponsors] = useState<SponsorDraft[]>([]);
const [socials, setSocials] = useState<SocialDraft[]>([]);
const [contributors, setContributors] = useState<ContributorDraft[]>([]);
const [busy, setBusy] = useState(false);
const { data, isLoading } = useQuery({
@@ -76,6 +195,25 @@ export function SiteSettingsPanel({
} catch {
setSocials([]);
}
try {
const parsed = JSON.parse(data.settings.contributors || "[]") as Array<Record<string, unknown>>;
setContributors(
Array.isArray(parsed)
? parsed.map((c) => ({
name: typeof c.name === "string" ? c.name : "",
role: typeof c.role === "string" ? c.role : "",
bio: typeof c.bio === "string" ? c.bio : "",
url: typeof c.url === "string" ? c.url : "",
avatar: typeof c.avatar === "string" ? c.avatar : "",
contributions: Array.isArray(c.contributions)
? (c.contributions as unknown[]).filter((x): x is string => typeof x === "string")
: [],
}))
: [],
);
} catch {
setContributors([]);
}
}, [data]);
const set = (key: string, value: string) => setDraft((d) => ({ ...d, [key]: value }));
@@ -126,11 +264,24 @@ export function SiteSettingsPanel({
blurb: s.blurb.trim(),
})),
),
contributors: JSON.stringify(
contributors
.filter((c) => c.name.trim())
.map((c) => ({
name: c.name.trim(),
role: c.role.trim(),
bio: c.bio.trim(),
url: c.url.trim(),
avatar: c.avatar.trim(),
contributions: c.contributions.map((s) => s.trim()).filter(Boolean),
})),
),
};
await http.put("/api/admin/settings", { settings });
toast.success("تنظیمات ذخیره شد");
qc.invalidateQueries({ queryKey: ["admin", "settings"] });
qc.invalidateQueries({ queryKey: ["community"] });
qc.invalidateQueries({ queryKey: ["contributors"] });
qc.invalidateQueries({ queryKey: ["sponsors"] });
qc.invalidateQueries({ queryKey: ["auth", "register-status"] });
} catch (e) {
@@ -327,6 +478,97 @@ export function SiteSettingsPanel({
))}
</section>
<section className="space-y-3">
<div className="flex items-end justify-between gap-3">
<SectionHeading
icon={Users}
title="مشارکت‌کنندگان"
hint="افرادی که در ساخت پرگار سهیم بوده‌اند. در زبانه جامعه نمایش داده می‌شود."
/>
<Button
type="button"
size="sm"
variant="outline"
className="mb-2 shrink-0"
onClick={() =>
setContributors((list) => [
...list,
{ name: "", role: "", bio: "", url: "", avatar: "", contributions: [] },
])
}
>
افزودن
</Button>
</div>
{contributors.length === 0 && (
<p className="rounded-xl border border-dashed border-border px-4 py-8 text-center text-sm text-muted-foreground">
هنوز مشارکت‌کننده‌ای ثبت نشده. با «افزودن» شروع کنید.
</p>
)}
{contributors.map((c, i) => (
<div key={i} className="space-y-3 rounded-xl border border-border p-3">
<ContributorAvatarPicker
value={c.avatar}
name={c.name || "مشارکت‌کننده"}
onChange={(url) =>
setContributors((list) => list.map((x, j) => (j === i ? { ...x, avatar: url } : x)))
}
/>
<div className="grid gap-2 sm:grid-cols-2">
<Input
placeholder="نام"
value={c.name}
onChange={(e) =>
setContributors((list) => list.map((x, j) => (j === i ? { ...x, name: e.target.value } : x)))
}
/>
<Input
placeholder="نقش (مثال: بنیان‌گذار)"
value={c.role}
onChange={(e) =>
setContributors((list) => list.map((x, j) => (j === i ? { ...x, role: e.target.value } : x)))
}
/>
</div>
<Textarea
placeholder="بیوگرافی کوتاه (اختیاری)"
value={c.bio}
rows={2}
onChange={(e) =>
setContributors((list) => list.map((x, j) => (j === i ? { ...x, bio: e.target.value } : x)))
}
/>
<Input
placeholder="لینک پروفایل (اختیاری، https://…)"
value={c.url}
dir="ltr"
onChange={(e) =>
setContributors((list) => list.map((x, j) => (j === i ? { ...x, url: e.target.value } : x)))
}
/>
<div className="space-y-1">
<p className="text-[11px] text-muted-foreground">دسته‌های مشارکت — Enter یا کاما برای افزودن</p>
<TagInput
value={c.contributions}
onChange={(tags) =>
setContributors((list) => list.map((x, j) => (j === i ? { ...x, contributions: tags } : x)))
}
placeholder="توسعه، طراحی، محتوا…"
/>
</div>
<Button
type="button"
size="sm"
variant="ghost"
className="text-destructive"
onClick={() => setContributors((list) => list.filter((_, j) => j !== i))}
>
حذف مشارکت‌کننده
</Button>
</div>
))}
</section>
<p className="text-[11px] text-muted-foreground">
رمزها، دیتابیس و JWT همچنان در فایل محیط (.env) می‌مانند — اینجا فقط تنظیمات قابل‌تغییر
روزمره است.
frontend/src/components/community-panel.tsx
+99 -4
View File
@@ -1,17 +1,50 @@
"use client";
import { useQuery } from "@tanstack/react-query";
import { ExternalLink, Share2 } from "lucide-react";
import { ExternalLink, Share2, Tag, Users } from "lucide-react";
import { http, toUserError } from "@/lib/api";
import { Panel } from "@/components/panel";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import type { Contributor } from "@/lib/types";
export type SocialLink = { name: string; url: string };
export type CommunityPayload = {
socials: SocialLink[];
contributors: Contributor[];
};
function ContributorAvatar({ contributor }: { contributor: Contributor }) {
if (contributor.avatar) {
return (
<img
src={contributor.avatar}
alt={contributor.name}
className="h-12 w-12 shrink-0 rounded-full border-2 border-border object-cover"
onError={(e) => {
(e.currentTarget as HTMLImageElement).style.display = "none";
(e.currentTarget.nextElementSibling as HTMLElement | null)?.removeAttribute("hidden");
}}
/>
);
}
const initials = contributor.name
.split(" ")
.map((w) => w[0])
.slice(0, 2)
.join("")
.toUpperCase();
return (
<span
aria-hidden
className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full border-2 border-border bg-primary/10 text-sm font-bold text-primary"
>
{initials}
</span>
);
}
export function CommunityPanel() {
const { data, isLoading, isError, error, refetch } = useQuery({
queryKey: ["community"],
@@ -19,12 +52,17 @@ export function CommunityPanel() {
});
if (isLoading) {
return <div className="h-72 animate-pulse rounded-2xl border-2 border-border bg-muted/40" />;
return (
<div className="mx-auto max-w-2xl space-y-4">
<div className="h-40 animate-pulse rounded-2xl border-2 border-border bg-muted/40" />
<div className="h-64 animate-pulse rounded-2xl border-2 border-border bg-muted/40" />
</div>
);
}
if (isError) {
return (
<div className="mx-auto max-w-xl rounded-2xl border-2 border-destructive/30 bg-destructive/5 p-8 text-center">
<div className="mx-auto max-w-2xl rounded-2xl border-2 border-destructive/30 bg-destructive/5 p-8 text-center">
<p className="font-medium text-destructive">{toUserError(error)}</p>
<Button className="mt-4" variant="outline" onClick={() => refetch()}>
تلاش دوباره
@@ -34,9 +72,11 @@ export function CommunityPanel() {
}
const socials = data?.socials ?? [];
const contributors = data?.contributors ?? [];
return (
<div className="mx-auto max-w-xl">
<div className="mx-auto max-w-2xl space-y-4">
{/* Social links */}
<Panel
title="شبکه‌های پرگار"
description="راه‌های رسمی ارتباط با برنامه. لینک شخصی هر کاربر روی پروفایل خودش است."
@@ -63,6 +103,61 @@ export function CommunityPanel() {
</ul>
)}
</Panel>
{/* Contributors */}
<Panel
title="مشارکت‌کنندگان"
description="افرادی که در ساخت پرگار سهیم بوده‌اند. ممنون از هر کمکی."
icon={<Users className="h-5 w-5" />}
tint="bg-emerald-500/15 text-emerald-600 dark:text-emerald-400"
>
{contributors.length === 0 ? (
<p className="py-8 text-center text-sm text-muted-foreground">اطلاعات مشارکت‌کنندگان هنوز ثبت نشده است.</p>
) : (
<ul className="divide-y divide-border/60">
{contributors.map((c, i) => (
<li key={i} className="flex flex-col gap-3 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-start">
<ContributorAvatar contributor={c} />
<div className="min-w-0 flex-1 space-y-1.5">
<div className="flex flex-wrap items-center gap-2">
{c.url ? (
<a
href={c.url}
target="_blank"
rel="noreferrer"
className="flex items-center gap-1 font-bold hover:text-primary hover:underline"
>
{c.name}
<ExternalLink className="h-3 w-3 shrink-0 text-muted-foreground" />
</a>
) : (
<span className="font-bold">{c.name}</span>
)}
{c.role && (
<span className="text-xs text-muted-foreground">{c.role}</span>
)}
</div>
{c.bio && <p className="text-sm leading-relaxed text-muted-foreground">{c.bio}</p>}
{c.contributions.length > 0 && (
<div className="flex flex-wrap gap-1.5">
{c.contributions.map((cat) => (
<Badge
key={cat}
variant="secondary"
className="gap-1 px-2 py-0.5 text-xs"
>
<Tag className="h-3 w-3" />
{cat}
</Badge>
))}
</div>
)}
</div>
</li>
))}
</ul>
)}
</Panel>
</div>
);
}
frontend/src/components/leaderboard-panel.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ export function LeaderboardPanel() {
if (isError) {
return (
<div className="mx-auto max-w-2xl rounded-xl border border-destructive/30 bg-destructive/5 p-6 text-center">
<div className="mx-auto max-w-2xl rounded-xl border-2 border-destructive/30 bg-destructive/5 p-6 text-center">
<p className="font-medium text-destructive">{toUserError(error)}</p>
<Button className="mt-3" variant="outline" onClick={() => refetch()}>
تلاش دوباره
frontend/src/components/navbar.tsx
+3 -5
View File
@@ -2,7 +2,7 @@
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Flame, Heart, LogOut, Sparkles, User, UserCog } from "lucide-react";
import { Flame, Heart, LogOut, Palette, Settings, Sparkles, User, UserCog } from "lucide-react";
import { NotificationBell } from "@/components/notification-bell";
import { ThemeToggle } from "@/components/theme-toggle";
import { BrandMark } from "@/components/brand-mark";
@@ -28,7 +28,6 @@ import {
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { cn, formatFaNumber } from "@/lib/utils";
import { GlobalSearch } from "@/components/global-search";
import { isVerifiedRole, VerifiedBadge } from "@/components/verified-badge";
const navLinks = [
@@ -65,7 +64,6 @@ export function Navbar() {
<BrandMark />
</Link>
<div className="flex items-center gap-2">
<GlobalSearch />
<ThemeToggle />
{pathname !== "/login" && (
<Button asChild size="sm" className="font-bold">
@@ -188,10 +186,10 @@ export function Navbar() {
<User /> پروفایل من
</DropdownMenuItem>
<DropdownMenuItem onClick={() => router.push("/settings")}>
<User /> تنظیمات
<Settings /> تنظیمات
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setStudioOpen(true)}>
<User /> ویرایش آواتار
<Palette /> ویرایش آواتار
</DropdownMenuItem>
{liveUser.role === "admin" && (
<DropdownMenuItem onClick={() => router.push("/admin")}>
frontend/src/components/ui/tag-input.tsx
+93
View File
@@ -0,0 +1,93 @@
"use client";
import { useRef, useState } from "react";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";
interface TagInputProps {
value: string[];
onChange: (tags: string[]) => void;
placeholder?: string;
maxTags?: number;
className?: string;
disabled?: boolean;
}
export function TagInput({
value,
onChange,
placeholder = "افزودن برچسب…",
maxTags = 20,
className,
disabled,
}: TagInputProps) {
const [input, setInput] = useState("");
const inputRef = useRef<HTMLInputElement>(null);
const add = (raw: string) => {
const tag = raw.trim();
if (!tag) return;
if (value.some((t) => t.toLowerCase() === tag.toLowerCase())) return;
if (value.length >= maxTags) return;
onChange([...value, tag]);
setInput("");
};
const remove = (index: number) => {
onChange(value.filter((_, i) => i !== index));
};
const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter" || e.key === ",") {
e.preventDefault();
add(input);
} else if (e.key === "Backspace" && !input && value.length > 0) {
remove(value.length - 1);
}
};
return (
<div
className={cn(
"flex min-h-9 flex-wrap gap-1.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
disabled && "cursor-not-allowed opacity-50",
className,
)}
onClick={() => inputRef.current?.focus()}
>
{value.map((tag, i) => (
<span
key={i}
className="inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground"
>
{tag}
{!disabled && (
<button
type="button"
onClick={(e) => {
e.stopPropagation();
remove(i);
}}
className="ml-0.5 rounded-sm opacity-60 transition-opacity hover:opacity-100"
aria-label={`حذف ${tag}`}
>
<X className="h-3 w-3" />
</button>
)}
</span>
))}
{!disabled && value.length < maxTags && (
<input
ref={inputRef}
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={onKeyDown}
onBlur={() => add(input)}
placeholder={value.length === 0 ? placeholder : ""}
className="min-w-[120px] flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
dir="auto"
/>
)}
</div>
);
}
frontend/src/lib/types.ts
+9
View File
@@ -1,5 +1,14 @@
export type Role = "student" | "mentor" | "admin";
export interface Contributor {
name: string;
role: string;
bio: string;
url: string;
avatar: string;
contributions: string[];
}
export interface User {
id: number;
email: string;