feat(admin): add collapsible desktop sidebar

src/lib/api.ts

@@ -432,6 +432,44 @@ class ApiClient {
     );
   }
 
+  async getAdminUserAnalytics(params?: { date_from?: string; date_to?: string }) {
+    const query = new URLSearchParams();
+    if (params?.date_from) query.set('date_from', params.date_from);
+    if (params?.date_to) query.set('date_to', params.date_to);
+    return this.request<Types.UserAnalyticsSchema>(
+      `/api/analytics/admin/users${query.toString() ? `?${query.toString()}` : ''}`,
+    );
+  }
+
+  async getAdminEventAnalytics(params?: { date_from?: string; date_to?: string; event_id?: number }) {
+    const query = new URLSearchParams();
+    if (params?.date_from) query.set('date_from', params.date_from);
+    if (params?.date_to) query.set('date_to', params.date_to);
+    if (params?.event_id != null) query.set('event_id', String(params.event_id));
+    return this.request<Types.EventAnalyticsSchema>(
+      `/api/analytics/admin/events${query.toString() ? `?${query.toString()}` : ''}`,
+    );
+  }
+
+  async getAdminBlogAnalytics(params?: { date_from?: string; date_to?: string }) {
+    const query = new URLSearchParams();
+    if (params?.date_from) query.set('date_from', params.date_from);
+    if (params?.date_to) query.set('date_to', params.date_to);
+    return this.request<Types.BlogAnalyticsSchema>(
+      `/api/analytics/admin/blog${query.toString() ? `?${query.toString()}` : ''}`,
+    );
+  }
+
+  async getAdminDashboardEventOptions(params?: { search?: string; limit?: number; offset?: number }) {
+    const query = new URLSearchParams();
+    if (params?.search) query.set('search', params.search);
+    if (params?.limit != null) query.set('limit', String(params.limit));
+    if (params?.offset != null) query.set('offset', String(params.offset));
+    return this.request<Types.AnalyticsEventOptionsSchema>(
+      `/api/analytics/admin/events/options${query.toString() ? `?${query.toString()}` : ''}`,
+    );
+  }
+
   // ============= Blog Endpoints =============
   
   async getPosts(params?: {

src/lib/types.ts

@@ -759,6 +759,13 @@ export interface AnalyticsPointSchema {
   value: number;
 }
 
+export interface AnalyticsPointGroupSchema {
+  items: AnalyticsPointSchema[];
+  top_items: AnalyticsPointSchema[];
+  other_count: number;
+  total_count: number;
+}
+
 export interface AnalyticsTrendPointSchema {
   date: string;
   label: string;
@@ -790,6 +797,13 @@ export interface AnalyticsPostPopularitySchema {
   comments: number;
 }
 
+export interface AnalyticsPostPopularityGroupSchema {
+  items: AnalyticsPostPopularitySchema[];
+  top_items: AnalyticsPostPopularitySchema[];
+  other_count: number;
+  total_count: number;
+}
+
 export interface AnalyticsTopPostSchema extends AnalyticsPostPopularitySchema {
   score: number;
 }
@@ -855,6 +869,81 @@ export interface AdminDashboardAnalyticsSchema {
   };
 }
 
+export interface AnalyticsEventOptionsSchema {
+  count: number;
+  results: Array<{
+    value: string;
+    label: string;
+    description?: string | null;
+  }>;
+}
+
+export interface UserAnalyticsSchema {
+  filters: {
+    date_from?: string | null;
+    date_to?: string | null;
+    granularity: 'day' | 'week' | 'month';
+  };
+  summary: {
+    total_users: number;
+    verified_users: number;
+    unverified_users: number;
+    profile_completion_rate: number;
+  };
+  signup_trend: AnalyticsTrendPointSchema[];
+  by_major: AnalyticsPointGroupSchema;
+  by_university: AnalyticsPointGroupSchema;
+  by_year: AnalyticsPointGroupSchema;
+}
+
+export interface EventAnalyticsSchema {
+  filters: {
+    date_from?: string | null;
+    date_to?: string | null;
+    event_id?: number | null;
+  };
+  summary: {
+    total_events: number;
+    total_registrations: number;
+    distinct_participants: number;
+    total_revenue: number;
+    total_discount: number;
+    total_base: number;
+    learning_hours: number;
+  };
+  registration_status: AnalyticsRegistrationStatusSchema[];
+  payment_status: AnalyticsRegistrationStatusSchema[];
+  attendee_by_major: AnalyticsPointGroupSchema;
+  attendee_by_university: AnalyticsPointGroupSchema;
+  registration_trend: AnalyticsTrendPointSchema[];
+  revenue_trend: AnalyticsTrendPointSchema[];
+  revenue_by_event: AnalyticsPointGroupSchema;
+  top_events: {
+    top_items: AnalyticsTopEventSchema[];
+    other_count: number;
+    total_count: number;
+  };
+}
+
+export interface BlogAnalyticsSchema {
+  filters: {
+    date_from?: string | null;
+    date_to?: string | null;
+  };
+  summary: {
+    published_posts: number;
+    total_likes: number;
+    total_saves: number;
+    total_comments: number;
+    community_engagement: number;
+  };
+  activity_trend: Array<{ date: string; likes: number; saves: number; comments: number }>;
+  post_popularity: AnalyticsPostPopularityGroupSchema;
+  top_posts: AnalyticsTopPostSchema[];
+  by_category: AnalyticsPointGroupSchema;
+  by_tag: AnalyticsPointGroupSchema;
+}
+
 // payment
 export interface CreatePaymentOut {
   start_pay_url: string;

src/views/AdminLayout.tsx

@@ -1,15 +1,15 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import {
   Building2,
   CalendarDays,
-  ChevronDown,
   FileText,
   FolderTree,
   GraduationCap,
   LayoutDashboard,
+  Menu,
   PanelRightClose,
   PanelRightOpen,
   ShieldCheck,
@@ -20,7 +20,7 @@ import {
 import { Navigate, NavLink, useLocation } from "@/lib/router";
 import { useAuth } from "@/contexts/AuthContext";
 import { Button } from "@/components/ui/button";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { cn } from "@/lib/utils";
 
 const navGroups = [
@@ -65,31 +65,12 @@ type NavItem = (typeof navGroups)[number]["items"][number];
 export default function AdminLayout({ children }: { children: ReactNode }) {
   const location = useLocation();
   const { user, isAuthenticated, loading } = useAuth();
-  const [collapsed, setCollapsed] = useState(false);
-  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({
-    dashboard: true,
-    users: true,
-    events: true,
-    blog: true,
-  });
+  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],
   );
 
-  useEffect(() => {
-    const saved = window.localStorage.getItem("admin-sidebar-collapsed");
-    if (saved) setCollapsed(saved === "true");
-  }, []);
-
-  const toggleCollapsed = () => {
-    setCollapsed((current) => {
-      const next = !current;
-      window.localStorage.setItem("admin-sidebar-collapsed", String(next));
-      return next;
-    });
-  };
-
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center text-muted-foreground" dir="rtl">
@@ -112,7 +93,6 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
   const visibleGroups = navGroups
     .map((group) => ({ ...group, items: group.items.filter(canSeeItem) }))
     .filter((group) => group.items.length > 0);
-  const visibleNavItems = visibleGroups.flatMap((group) => group.items);
 
   const isItemActive = (to: string) => {
     if (location.pathname === to) return true;
@@ -130,107 +110,129 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
       <div className="flex min-h-screen">
         <aside
           className={cn(
-            "sticky top-0 hidden h-screen shrink-0 border-l bg-background/95 shadow-sm backdrop-blur transition-[width] duration-300 ease-in-out lg:flex lg:flex-col",
-            collapsed ? "w-20" : "w-72",
+            "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="flex items-center justify-between gap-2 border-b p-4">
-            {!collapsed ? (
-              <div className="text-right">
-                <h1 className="text-lg font-bold">پنل مدیریت</h1>
-                <p className="text-xs text-muted-foreground">انجمن علمی مهندسی کامپیوتر</p>
-              </div>
-            ) : null}
-            <Button variant="ghost" size="icon" onClick={toggleCollapsed} aria-label="باز و بسته کردن منوی مدیریت">
-              {collapsed ? <PanelRightOpen className="h-5 w-5" /> : <PanelRightClose className="h-5 w-5" />}
-            </Button>
+          <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) => (
-              <Collapsible
-                key={group.key}
-                open={collapsed ? true : openGroups[group.key]}
-                onOpenChange={(open) => setOpenGroups((current) => ({ ...current, [group.key]: open }))}
-              >
-                {!collapsed ? (
-                  <CollapsibleTrigger className="mb-1 flex w-full items-center justify-between rounded-xl px-3 py-2 text-xs font-semibold text-muted-foreground hover:bg-muted/70">
-                    <span>{group.label}</span>
-                    <ChevronDown
-                      className={cn("h-4 w-4 transition-transform", openGroups[group.key] ? "rotate-180" : "")}
-                    />
-                  </CollapsibleTrigger>
-                ) : null}
-                <CollapsibleContent className="space-y-2">
-                  {group.items.map((item) => {
-                    const Icon = item.icon;
-                    const active = isItemActive(item.to);
-                    return (
-                      <NavLink
-                        key={item.to}
-                        to={item.to}
-                        title={collapsed ? item.label : undefined}
-                        className={cn(
-                          "flex items-center gap-3 rounded-2xl px-3 py-3 text-sm transition",
-                          collapsed ? "justify-center" : "justify-start",
-                          active
-                            ? "bg-primary text-primary-foreground shadow"
-                            : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                        )}
-                      >
-                        <Icon className="h-5 w-5 shrink-0" />
-                        {!collapsed ? <span className="font-medium">{item.label}</span> : null}
-                      </NavLink>
-                    );
-                  })}
-                </CollapsibleContent>
-              </Collapsible>
+              <div key={group.key} className="space-y-2">
+                <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);
+                  return (
+                    <NavLink
+                      key={item.to}
+                      to={item.to}
+                      title={sidebarCollapsed ? item.label : undefined}
+                      className={cn(
+                        "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={cn("font-medium", sidebarCollapsed && "sr-only")}>{item.label}</span>
+                    </NavLink>
+                  );
+                })}
+              </div>
             ))}
           </nav>
         </aside>
 
         <div className="min-w-0 flex-1">
           <div className="border-b bg-background/90 lg:hidden">
-            <div className="px-4 py-3 text-right">
-              <h1 className="text-lg font-bold">پنل مدیریت</h1>
-              <p className="text-xs text-muted-foreground">مدیریت بخش‌های سامانه</p>
+            <div className="flex items-center justify-between gap-3 px-4 py-3">
+              <div className="text-right">
+                <h1 className="text-lg font-bold">پنل مدیریت</h1>
+                <p className="text-xs text-muted-foreground">مدیریت بخش‌های سامانه</p>
+              </div>
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button variant="outline" size="sm" className="gap-2 rounded-2xl">
+                    <Menu className="h-4 w-4" />
+                    منو
+                  </Button>
+                </SheetTrigger>
+                <SheetContent
+                  side="bottom"
+                  className="max-h-[82vh] overflow-y-auto rounded-t-[2rem] border-t p-4 pb-[calc(env(safe-area-inset-bottom)+1rem)]"
+                  dir="rtl"
+                >
+                  <SheetHeader className="mt-6 text-right">
+                    <SheetTitle>بخش‌های پنل مدیریت</SheetTitle>
+                  </SheetHeader>
+                  <nav className="mt-5 space-y-5">
+                    {visibleGroups.map((group) => (
+                      <div key={group.key} className="space-y-2">
+                        <p className="px-2 text-xs font-semibold text-muted-foreground">{group.label}</p>
+                        <div className="grid gap-2 sm:grid-cols-2">
+                          {group.items.map((item) => {
+                            const Icon = item.icon;
+                            const active = isItemActive(item.to);
+                            return (
+                              <SheetClose asChild key={item.to}>
+                                <NavLink
+                                  to={item.to}
+                                  className={cn(
+                                    "flex items-center gap-3 rounded-2xl border px-3 py-3 text-sm transition",
+                                    active
+                                      ? "border-primary bg-primary text-primary-foreground shadow"
+                                      : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
+                                  )}
+                                  aria-current={active ? "page" : undefined}
+                                >
+                                  <Icon className="h-5 w-5 shrink-0" />
+                                  <span className="font-medium">{item.label}</span>
+                                </NavLink>
+                              </SheetClose>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    ))}
+                  </nav>
+                </SheetContent>
+              </Sheet>
             </div>
           </div>
-          <div className="container mx-auto min-w-0 px-3 pb-28 pt-4 sm:px-4 lg:py-6">
+          <div className="container mx-auto min-w-0 px-3 pb-8 pt-4 sm:px-4 lg:py-6">
             {children}
           </div>
         </div>
       </div>
-      <div
-        className="fixed inset-x-0 z-50 px-4 lg:hidden"
-        style={{ bottom: "calc(env(safe-area-inset-bottom) + 0.9rem)" }}
-      >
-        <nav
-          aria-label="Admin mobile navigation"
-          className="mx-auto flex w-full max-w-sm items-center justify-between rounded-[1.75rem] border border-white/20 bg-background/70 px-2 py-2 shadow-[0_18px_60px_rgba(15,23,42,0.18)] backdrop-blur-2xl dark:border-white/10 dark:bg-slate-950/65"
-          dir="rtl"
-        >
-          {visibleNavItems.map((item) => {
-            const Icon = item.icon;
-            const active = isItemActive(item.to);
-            return (
-              <NavLink
-                key={item.to}
-                to={item.to}
-                className={cn(
-                  "flex min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-2xl px-2 py-2 text-[10px] font-medium transition-all",
-                  active
-                    ? "bg-primary text-primary-foreground shadow-sm"
-                    : "text-muted-foreground hover:bg-white/30 hover:text-foreground dark:hover:bg-white/10",
-                )}
-                aria-current={active ? "page" : undefined}
-              >
-                <Icon className={cn("h-5 w-5", active ? "scale-105" : "")} />
-                <span className="max-w-full truncate">{item.label}</span>
-              </NavLink>
-            );
-          })}
-        </nav>
-      </div>
     </div>
   );
 }