GuilanCE/guilan-ace-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: GuilanCE:ecd4a57da980fe637dab0d2055fbd5c9688c5eb5
Branches Tags
GuilanCE:main
...
compare: GuilanCE:b64c6cf6124d7b9c058b0c0d69ec520e89b871cb
Branches Tags
GuilanCE:main

4 Commits
ecd4a57da9 ... b64c6cf612

Author SHA1 Message Date
Amirhossein Khalili
b64c6cf612 feat(admin): add collapsible desktop sidebar
Some checks failed
Frontend CI/CD / build (push) Has been cancelled
Details
Frontend CI/CD / deploy (push) Has been cancelled
Details
2026-06-15 21:53:39 +03:30
Amirhossein Khalili
958400a8c1 feat(admin-dashboard): link top content lists 2026-06-15 21:50:42 +03:30
Amirhossein Khalili
da8d82955e fix(admin-dashboard): refine filter reset controls 2026-06-15 21:46:20 +03:30
Amirhossein Khalili
021bee9444 fix(admin-dashboard): prevent mobile chart overflow 2026-06-15 21:34:59 +03:30
2 changed files with 190 additions and 75 deletions
Expand all files Collapse all files

217
src/views/AdminDashboard.tsx
View File

@@ -42,6 +42,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/u
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useIsMobile } from "@/hooks/use-mobile";
import { api } from "@/lib/api";
import type {
AnalyticsPointGroupSchema,
@@ -138,13 +139,13 @@ function truncateLabel(value: string, max = 18) {
return normalized.length > max ? `${normalized.slice(0, max - 1)}…` : normalized;
}
function chartHeight(count: number, min = 280) {
return Math.max(min, count * 32 + 80);
function chartHeight(count: number, min = 280, compact = false) {
return Math.max(compact ? Math.min(min, 240) : min, count * (compact ? 26 : 32) + (compact ? 64 : 80));
}
function axisWidth(items: AnalyticsPointSchema[]) {
function axisWidth(items: AnalyticsPointSchema[], compact = false) {
const maxLength = Math.max(...items.map((item) => String(item.label).length), 10);
return Math.min(190, Math.max(90, maxLength * 7));
return Math.min(compact ? 92 : 190, Math.max(compact ? 64 : 90, maxLength * (compact ? 4.5 : 7)));
}
function dataWithOtherNotice(group: AnalyticsPointGroupSchema) {
@@ -212,13 +213,17 @@ function DateRangeFilter({
value,
onChange,
onReset,
resetDisabled,
showReset = true,
}: {
value: DateRangeState;
onChange: (next: DateRangeState) => void;
onReset: () => void;
resetDisabled?: boolean;
showReset?: boolean;
}) {
return (
<div className="grid gap-3 md:grid-cols-[1fr_1fr_auto]">
<div className={cn("grid gap-3", showReset ? "md:grid-cols-[1fr_1fr_auto]" : "md:grid-cols-2")}>
<div className="space-y-2">
<Label>از تاریخ</Label>
<DatePicker
@@ -247,16 +252,31 @@ function DateRangeFilter({
containerClassName="w-full"
/>
</div>
<div className="flex items-end">
<Button variant="destructive" className="w-full gap-2 md:w-auto" onClick={onReset}>
<Eraser className="h-4 w-4" />
پاک‌کردن
</Button>
</div>
{showReset ? (
<div className="flex items-end">
<FilterResetButton disabled={resetDisabled ?? (!value.from && !value.to)} onClick={onReset} />
</div>
) : null}
</div>
);
}
function FilterResetButton({ disabled, onClick }: { disabled: boolean; onClick: () => void }) {
return (
<Button
variant="destructive"
className="w-full gap-2 md:w-10 md:px-0"
onClick={onClick}
disabled={disabled}
title="پاک‌کردن"
aria-label="پاک‌کردن فیلترها"
>
<Eraser className="h-4 w-4" />
<span className="md:sr-only">پاک‌کردن</span>
</Button>
);
}
function FilterCard({
title,
description,
@@ -280,10 +300,23 @@ function FilterCard({
);
}
function ChartViewport({ children, minWidth = 420 }: { children: React.ReactNode; minWidth?: number }) {
function ChartViewport({
children,
minWidth = 420,
scrollable = false,
}: {
children: React.ReactNode;
minWidth?: number;
scrollable?: boolean;
}) {
const isMobile = useIsMobile();
const shouldScroll = scrollable && !isMobile;
return (
<div className="overflow-x-auto overflow-y-hidden pb-2" dir="ltr">
<div style={{ minWidth }}>{children}</div>
<div className={cn("min-w-0 max-w-full overflow-y-hidden pb-2", shouldScroll ? "overflow-x-auto" : "overflow-x-hidden")} dir="ltr">
<div className="min-w-0 max-w-full" style={{ width: "100%", minWidth: shouldScroll ? minWidth : undefined }}>
{children}
</div>
</div>
);
}
@@ -354,6 +387,7 @@ function DashboardPointDetailModal({
}) {
const [search, setSearch] = React.useState("");
const [sortBy, setSortBy] = React.useState<"value" | "label">("value");
const isMobile = useIsMobile();
const filteredData = React.useMemo(() => {
const normalizedSearch = search.trim().toLocaleLowerCase("fa-IR");
const filtered = normalizedSearch
@@ -390,16 +424,16 @@ function DashboardPointDetailModal({
<EmptyChart label="موردی با این جستجو پیدا نشد." />
) : (
<>
<ChartViewport minWidth={680}>
<ChartViewport minWidth={680} scrollable>
<ChartContainer
config={{ value: { label: "مقدار", color } }}
className="w-full"
style={{ height: Math.min(Math.max(filteredData.length * 34 + 100, 360), 780) }}
style={{ height: Math.min(Math.max(filteredData.length * (isMobile ? 28 : 34) + 100, isMobile ? 300 : 360), 780) }}
>
<BarChart
data={filteredData}
layout="vertical"
margin={{ top: 12, right: 8, bottom: 24, left: 32 }}
margin={isMobile ? { top: 8, right: 2, bottom: 22, left: 20 } : { top: 12, right: 8, bottom: 24, left: 32 }}
>
<CartesianGrid horizontal={false} strokeDasharray="3 3" />
<XAxis
@@ -415,11 +449,11 @@ function DashboardPointDetailModal({
dataKey="label"
type="category"
orientation="right"
width={axisWidth(filteredData)}
width={axisWidth(filteredData, isMobile)}
tickLine={false}
axisLine={false}
tickMargin={10}
tickFormatter={(value) => truncateLabel(String(value), 24)}
tickMargin={isMobile ? 4 : 10}
tickFormatter={(value) => truncateLabel(String(value), isMobile ? 12 : 24)}
/>
<ChartTooltip content={<CustomValueTooltip unit={unit} formatter={formatter} />} />
<Bar dataKey="value" radius={[8, 8, 8, 8]} fill="var(--color-value)" />
@@ -484,6 +518,7 @@ function BlogPostEngagementModal({
}) {
const [search, setSearch] = React.useState("");
const [sortBy, setSortBy] = React.useState<"score" | "likes" | "saves" | "comments" | "title">("score");
const isMobile = useIsMobile();
const data = React.useMemo(() => {
const normalizedSearch = search.trim().toLocaleLowerCase("fa-IR");
const filtered = normalizedSearch
@@ -530,7 +565,7 @@ function BlogPostEngagementModal({
<EmptyChart label="نوشته‌ای با این جستجو پیدا نشد." />
) : (
<>
<ChartViewport minWidth={760}>
<ChartViewport minWidth={760} scrollable>
<ChartContainer
config={{
likes: { label: "لایک", color: PALETTE.rose },
@@ -538,12 +573,12 @@ function BlogPostEngagementModal({
comments: { label: "کامنت", color: PALETTE.amber },
}}
className="w-full"
style={{ height: Math.min(Math.max(data.length * 34 + 100, 380), 820) }}
style={{ height: Math.min(Math.max(data.length * (isMobile ? 28 : 34) + 100, isMobile ? 320 : 380), 820) }}
>
<BarChart
data={data}
layout="vertical"
margin={{ top: 12, right: 8, bottom: 24, left: 32 }}
margin={isMobile ? { top: 8, right: 2, bottom: 22, left: 20 } : { top: 12, right: 8, bottom: 24, left: 32 }}
>
<CartesianGrid horizontal={false} strokeDasharray="3 3" />
<XAxis
@@ -559,11 +594,11 @@ function BlogPostEngagementModal({
dataKey="label"
type="category"
orientation="right"
width={axisWidth(data.map((post) => ({ label: post.title, value: post.score })))}
width={axisWidth(data.map((post) => ({ label: post.title, value: post.score })), isMobile)}
tickLine={false}
axisLine={false}
tickMargin={10}
tickFormatter={(value) => truncateLabel(String(value), 26)}
tickMargin={isMobile ? 4 : 10}
tickFormatter={(value) => truncateLabel(String(value), isMobile ? 12 : 26)}
/>
<ChartTooltip content={<PostEngagementTooltip />} />
<Bar dataKey="likes" stackId="engagement" fill="var(--color-likes)" radius={[0, 0, 0, 0]} />
@@ -651,8 +686,9 @@ function HorizontalBarCard({
const data = dataWithOtherNotice(group);
const allData = fullGroupItems(group);
const [detailsOpen, setDetailsOpen] = React.useState(false);
const isMobile = useIsMobile();
return (
<Card>
<Card className="min-w-0 overflow-hidden">
<CardHeader className="p-4 sm:p-6">
<CardTitle className="text-base sm:text-lg">{title}</CardTitle>
<CardDescription>{description}</CardDescription>
@@ -666,9 +702,13 @@ function HorizontalBarCard({
<ChartContainer
config={{ value: { label: "مقدار", color } }}
className="w-full"
style={{ height: chartHeight(data.length) }}
style={{ height: chartHeight(data.length, 280, isMobile) }}
>
<BarChart data={data} layout="vertical" margin={{ top: 12, right: 8, bottom: 24, left: 32 }}>
<BarChart
data={data}
layout="vertical"
margin={isMobile ? { top: 8, right: 2, bottom: 22, left: 18 } : { top: 12, right: 8, bottom: 24, left: 32 }}
>
<CartesianGrid horizontal={false} strokeDasharray="3 3" />
<XAxis
type="number"
@@ -683,11 +723,11 @@ function HorizontalBarCard({
dataKey="label"
type="category"
orientation="right"
width={axisWidth(data)}
width={axisWidth(data, isMobile)}
tickLine={false}
axisLine={false}
tickMargin={10}
tickFormatter={(value) => truncateLabel(String(value))}
tickMargin={isMobile ? 4 : 10}
tickFormatter={(value) => truncateLabel(String(value), isMobile ? 10 : 18)}
/>
<ChartTooltip content={<CustomValueTooltip unit={unit} formatter={valueFormatter} />} />
<Bar dataKey="value" radius={[8, 8, 8, 8]} fill="var(--color-value)" />
@@ -726,8 +766,9 @@ function TrendLineCard({
color?: string;
valueFormatter?: (value: number) => string;
}) {
const isMobile = useIsMobile();
return (
<Card>
<Card className="min-w-0 overflow-hidden">
<CardHeader className="p-4 sm:p-6">
<CardTitle className="flex items-center gap-2 text-base sm:text-lg">
<LineChartIcon className="h-5 w-5 text-primary" />
@@ -740,24 +781,27 @@ function TrendLineCard({
<EmptyChart />
) : (
<ChartViewport>
<ChartContainer config={{ value: { label: "مقدار", color } }} className="h-[260px] w-full sm:h-[300px]">
<LineChart data={data} margin={{ top: 16, right: 12, bottom: 32, left: 18 }}>
<ChartContainer config={{ value: { label: "مقدار", color } }} className="h-[220px] w-full sm:h-[300px]">
<LineChart
data={data}
margin={isMobile ? { top: 12, right: 4, bottom: 26, left: 8 } : { top: 16, right: 12, bottom: 32, left: 18 }}
>
<CartesianGrid vertical={false} strokeDasharray="3 3" />
<XAxis
dataKey="date"
reversed
tickLine={false}
axisLine={false}
minTickGap={34}
tickMargin={10}
minTickGap={isMobile ? 18 : 34}
tickMargin={isMobile ? 6 : 10}
tickFormatter={formatJalaliTick}
/>
<YAxis
orientation="right"
width={76}
width={isMobile ? 46 : 76}
tickLine={false}
axisLine={false}
tickMargin={10}
tickMargin={isMobile ? 4 : 10}
tickFormatter={(value) => valueFormatter(Number(value))}
/>
<ChartTooltip
@@ -791,8 +835,9 @@ function StatusChartCard({
description: string;
data: Array<{ status: string; label: string; value: number }>;
}) {
const isMobile = useIsMobile();
return (
<Card>
<Card className="min-w-0 overflow-hidden">
<CardHeader className="p-4 sm:p-6">
<CardTitle className="text-base sm:text-lg">{title}</CardTitle>
<CardDescription>{description}</CardDescription>
@@ -802,9 +847,13 @@ function StatusChartCard({
<EmptyChart />
) : (
<>
<ChartViewport minWidth={400}>
<ChartContainer config={{ value: { label: "تعداد", color: PALETTE.teal } }} className="h-[260px] w-full sm:h-[300px]">
<BarChart data={data} layout="vertical" margin={{ top: 14, right: 8, bottom: 28, left: 32 }}>
<ChartViewport>
<ChartContainer config={{ value: { label: "تعداد", color: PALETTE.teal } }} className="h-[220px] w-full sm:h-[300px]">
<BarChart
data={data}
layout="vertical"
margin={isMobile ? { top: 10, right: 2, bottom: 22, left: 18 } : { top: 14, right: 8, bottom: 28, left: 32 }}
>
<CartesianGrid horizontal={false} strokeDasharray="3 3" />
<XAxis
type="number"
@@ -819,11 +868,11 @@ function StatusChartCard({
dataKey="label"
type="category"
orientation="right"
width={108}
width={isMobile ? 74 : 108}
tickLine={false}
axisLine={false}
tickMargin={10}
tickFormatter={(value) => truncateLabel(String(value), 14)}
tickMargin={isMobile ? 4 : 10}
tickFormatter={(value) => truncateLabel(String(value), isMobile ? 9 : 14)}
/>
<ChartTooltip content={<CustomValueTooltip />} />
<Bar dataKey="value" radius={[8, 8, 8, 8]}>
@@ -843,8 +892,9 @@ function StatusChartCard({
}
function ActivityTrendCard({ data }: { data: BlogAnalyticsSchema["activity_trend"] }) {
const isMobile = useIsMobile();
return (
<Card>
<Card className="min-w-0 overflow-hidden">
<CardHeader className="p-4 sm:p-6">
<CardTitle className="text-base sm:text-lg">روند تعاملات بلاگ</CardTitle>
<CardDescription>لایک، ذخیره و کامنت در بازه انتخابی</CardDescription>
@@ -860,17 +910,20 @@ function ActivityTrendCard({ data }: { data: BlogAnalyticsSchema["activity_trend
saves: { label: "ذخیره", color: PALETTE.cyan },
comments: { label: "کامنت", color: PALETTE.amber },
}}
className="h-[280px] w-full sm:h-[320px]"
className="h-[230px] w-full sm:h-[320px]"
>
<LineChart data={data} margin={{ top: 16, right: 12, bottom: 32, left: 18 }}>
<LineChart
data={data}
margin={isMobile ? { top: 12, right: 4, bottom: 26, left: 8 } : { top: 16, right: 12, bottom: 32, left: 18 }}
>
<CartesianGrid vertical={false} strokeDasharray="3 3" />
<XAxis dataKey="date" reversed tickLine={false} axisLine={false} tickFormatter={formatJalaliTick} minTickGap={34} tickMargin={10} />
<XAxis dataKey="date" reversed tickLine={false} axisLine={false} tickFormatter={formatJalaliTick} minTickGap={isMobile ? 18 : 34} tickMargin={isMobile ? 6 : 10} />
<YAxis
orientation="right"
width={64}
width={isMobile ? 44 : 64}
tickLine={false}
axisLine={false}
tickMargin={10}
tickMargin={isMobile ? 4 : 10}
tickFormatter={(value) => formatNumberPersian(Number(value))}
/>
<ChartTooltip content={<ChartTooltipContent />} />
@@ -890,9 +943,10 @@ function BlogEngagementCard({ group }: { group: BlogAnalyticsSchema["post_popula
const data = toPostEngagementData(group.top_items);
const allPosts = group.items?.length ? group.items : group.top_items;
const [detailsOpen, setDetailsOpen] = React.useState(false);
const labelAxisWidth = axisWidth(data.map((post) => ({ label: post.title, value: post.score })));
const isMobile = useIsMobile();
const labelAxisWidth = axisWidth(data.map((post) => ({ label: post.title, value: post.score })), isMobile);
return (
<Card>
<Card className="min-w-0 overflow-hidden">
<CardHeader className="p-4 sm:p-6">
<CardTitle className="text-base sm:text-lg">محبوبیت نوشته‌ها</CardTitle>
<CardDescription>رتبه‌بندی بر اساس مجموع لایک، ذخیره و کامنت</CardDescription>
@@ -902,7 +956,7 @@ function BlogEngagementCard({ group }: { group: BlogAnalyticsSchema["post_popula
<EmptyChart />
) : (
<>
<ChartViewport minWidth={460}>
<ChartViewport>
<ChartContainer
config={{
likes: { label: "لایک", color: PALETTE.rose },
@@ -910,9 +964,13 @@ function BlogEngagementCard({ group }: { group: BlogAnalyticsSchema["post_popula
comments: { label: "کامنت", color: PALETTE.amber },
}}
className="w-full"
style={{ height: chartHeight(data.length, 320) }}
style={{ height: chartHeight(data.length, 320, isMobile) }}
>
<BarChart data={data} layout="vertical" margin={{ top: 12, right: 8, bottom: 24, left: 32 }}>
<BarChart
data={data}
layout="vertical"
margin={isMobile ? { top: 8, right: 2, bottom: 22, left: 18 } : { top: 12, right: 8, bottom: 24, left: 32 }}
>
<CartesianGrid horizontal={false} strokeDasharray="3 3" />
<XAxis
type="number"
@@ -929,8 +987,8 @@ function BlogEngagementCard({ group }: { group: BlogAnalyticsSchema["post_popula
width={labelAxisWidth}
tickLine={false}
axisLine={false}
tickMargin={10}
tickFormatter={(value) => truncateLabel(String(value), 22)}
tickMargin={isMobile ? 4 : 10}
tickFormatter={(value) => truncateLabel(String(value), isMobile ? 10 : 22)}
/>
<ChartTooltip content={<PostEngagementTooltip />} />
<Bar dataKey="likes" stackId="engagement" fill="var(--color-likes)" radius={[0, 0, 0, 0]} />
@@ -965,7 +1023,13 @@ function TopEventsCard({ group }: { group: EventAnalyticsSchema["top_events"] })
<CardContent className="space-y-3 p-4 pt-0 sm:p-6 sm:pt-0">
{group.top_items.length ? (
group.top_items.map((event, index) => (
<div key={event.id} className="flex items-center justify-between gap-3 rounded-xl border bg-background/70 p-3">
<a
key={event.id}
href={`/events/${event.slug}`}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-between gap-3 rounded-xl border bg-background/70 p-3 transition hover:border-primary/50 hover:bg-muted/40"
>
<div className="min-w-0 text-right">
<p className="truncate font-medium">{event.title}</p>
<p className="mt-1 text-xs text-muted-foreground">
@@ -975,7 +1039,7 @@ function TopEventsCard({ group }: { group: EventAnalyticsSchema["top_events"] })
</p>
</div>
<Badge variant="secondary">{toPersianDigits(index + 1)}</Badge>
</div>
</a>
))
) : (
<p className="text-sm text-muted-foreground">داده‌ای وجود ندارد.</p>
@@ -1000,7 +1064,13 @@ function TopPostsCard({ posts }: { posts: BlogAnalyticsSchema["top_posts"] }) {
<CardContent className="space-y-3 p-4 pt-0 sm:p-6 sm:pt-0">
{posts.length ? (
posts.map((post, index) => (
<div key={post.id} className="flex items-center justify-between gap-3 rounded-xl border bg-background/70 p-3">
<a
key={post.id}
href={`/blog/${post.slug}`}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-between gap-3 rounded-xl border bg-background/70 p-3 transition hover:border-primary/50 hover:bg-muted/40"
>
<div className="min-w-0 text-right">
<p className="truncate font-medium">{post.title}</p>
<p className="mt-1 text-xs text-muted-foreground">
@@ -1008,8 +1078,7 @@ function TopPostsCard({ posts }: { posts: BlogAnalyticsSchema["top_posts"] }) {
{formatNumberPersian(post.comments)} کامنت
</p>
</div>
<Badge variant="secondary">{toPersianDigits(index + 1)}</Badge>
</div>
</a>
))
) : (
<p className="text-sm text-muted-foreground">داده‌ای وجود ندارد.</p>
@@ -1034,7 +1103,12 @@ function UsersSection({
return (
<div className="space-y-6" dir="rtl">
<FilterCard title="فیلتر کاربران" description="این فیلتر فقط روی کاربران و تاریخ عضویت آن‌ها اعمال می‌شود.">
<DateRangeFilter value={filters} onChange={onFiltersChange} onReset={() => onFiltersChange({ from: "", to: "" })} />
<DateRangeFilter
value={filters}
onChange={onFiltersChange}
onReset={() => onFiltersChange({ from: "", to: "" })}
resetDisabled={!filters.from && !filters.to}
/>
</FilterCard>
{query.isLoading ? <SectionLoading /> : null}
{query.isError ? <SectionError error={query.error} /> : null}
@@ -1092,12 +1166,13 @@ function EventsSection({
return (
<div className="space-y-6">
<FilterCard title="فیلتر رویدادها" description="این فیلتر فقط روی آمار رویداد، ثبت‌نام، درآمد و تنوع شرکت‌کنندگان اعمال می‌شود.">
<div className="grid gap-3 xl:grid-cols-[2fr_1.2fr]">
<div className="grid gap-3 xl:grid-cols-[2fr_1.2fr_auto]">
<div>
<DateRangeFilter
value={filters}
onChange={(next) => onFiltersChange({ ...filters, ...next })}
onReset={reset}
showReset={false}
/>
</div>
<div className="space-y-2">
@@ -1120,6 +1195,9 @@ function EventsSection({
emptyText="رویدادی پیدا نشد."
/>
</div>
<div className="flex items-end">
<FilterResetButton disabled={!filters.from && !filters.to && !filters.eventId} onClick={reset} />
</div>
</div>
</FilterCard>
{query.isLoading ? <SectionLoading /> : null}
@@ -1183,7 +1261,12 @@ function BlogSection({
return (
<div className="space-y-6">
<FilterCard title="فیلتر بلاگ" description="این فیلتر فقط روی نوشته‌ها و تعاملات بلاگ اعمال می‌شود و به رویدادها وابسته نیست.">
<DateRangeFilter value={filters} onChange={onFiltersChange} onReset={() => onFiltersChange({ from: "", to: "" })} />
<DateRangeFilter
value={filters}
onChange={onFiltersChange}
onReset={() => onFiltersChange({ from: "", to: "" })}
resetDisabled={!filters.from && !filters.to}
/>
</FilterCard>
{query.isLoading ? <SectionLoading /> : null}
{query.isError ? <SectionError error={query.error} /> : null}

48
src/views/AdminLayout.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import type { ReactNode } from "react";
import { useMemo } from "react";
import { useMemo, useState } from "react";
import {
Building2,
CalendarDays,
@@ -10,6 +10,8 @@ import {
GraduationCap,
LayoutDashboard,
Menu,
PanelRightClose,
PanelRightOpen,
ShieldCheck,
Tags,
TicketPercent,
@@ -63,6 +65,7 @@ type NavItem = (typeof navGroups)[number]["items"][number];
export default function AdminLayout({ children }: { children: ReactNode }) {
const location = useLocation();
const { user, isAuthenticated, loading } = useAuth();
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const canAccessAdmin = useMemo(
() => isAuthenticated && Boolean(user?.is_staff || user?.is_superuser || user?.can_access_blog_admin),
[isAuthenticated, user?.can_access_blog_admin, user?.is_staff, user?.is_superuser],
@@ -106,16 +109,43 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
<div className="min-h-screen bg-muted/15" dir="rtl">
<div className="flex min-h-screen">
<aside
className="sticky top-0 hidden h-screen w-72 shrink-0 border-l bg-background/95 shadow-sm backdrop-blur lg:flex lg:flex-col"
className={cn(
"sticky top-0 hidden h-screen shrink-0 border-l bg-background/95 shadow-sm backdrop-blur transition-[width] duration-300 lg:flex lg:flex-col",
sidebarCollapsed ? "w-20" : "w-72",
)}
>
<div className="border-b p-4 text-right">
<h1 className="text-lg font-bold">پنل مدیریت</h1>
<p className="text-xs text-muted-foreground">انجمن علمی مهندسی کامپیوتر</p>
<div className={cn("border-b p-4", sidebarCollapsed ? "text-center" : "text-right")}>
<div className={cn("flex items-center gap-2", sidebarCollapsed ? "justify-center" : "justify-start")}>
<Button
type="button"
variant="ghost"
size="icon"
className="h-9 w-9 shrink-0 rounded-2xl"
onClick={() => setSidebarCollapsed((value) => !value)}
aria-label={sidebarCollapsed ? "باز کردن منوی مدیریت" : "جمع کردن منوی مدیریت"}
title={sidebarCollapsed ? "باز کردن منو" : "جمع کردن منو"}
>
{sidebarCollapsed ? <PanelRightOpen className="h-4 w-4" /> : <PanelRightClose className="h-4 w-4" />}
</Button>
{!sidebarCollapsed ? (
<div className="min-w-0">
<h1 className="text-lg font-bold">پنل مدیریت</h1>
<p className="text-xs text-muted-foreground">انجمن علمی مهندسی کامپیوتر</p>
</div>
) : null}
</div>
</div>
<nav className="flex-1 space-y-3 p-3">
{visibleGroups.map((group) => (
<div key={group.key} className="space-y-2">
<p className="px-3 py-2 text-xs font-semibold text-muted-foreground">{group.label}</p>
<p
className={cn(
"px-3 py-2 text-xs font-semibold text-muted-foreground transition-opacity",
sidebarCollapsed && "sr-only",
)}
>
{group.label}
</p>
{group.items.map((item) => {
const Icon = item.icon;
const active = isItemActive(item.to);
@@ -123,15 +153,17 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
<NavLink
key={item.to}
to={item.to}
title={sidebarCollapsed ? item.label : undefined}
className={cn(
"flex items-center gap-3 rounded-2xl px-3 py-3 text-sm transition",
"flex items-center rounded-2xl px-3 py-3 text-sm transition",
sidebarCollapsed ? "justify-center" : "gap-3",
active
? "bg-primary text-primary-foreground shadow"
: "text-muted-foreground hover:bg-muted hover:text-foreground",
)}
>
<Icon className="h-5 w-5 shrink-0" />
<span className="font-medium">{item.label}</span>
<span className={cn("font-medium", sidebarCollapsed && "sr-only")}>{item.label}</span>
</NavLink>
);
})}