From 66bb2fa1075bb97f70ef7179a0abc1affae1c232 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Wed, 20 May 2026 16:04:36 +0330
Subject: [PATCH] feat(frontend): add mobile bottom nav and redesign profile

---
 src/app/layout.tsx                 |    8 +-
 src/components/MobileBottomNav.tsx |   99 ++
 src/components/Navbar.tsx          |  236 ++---
 src/views/Profile.tsx              | 1416 ++++++++++++++++++----------
 4 files changed, 1072 insertions(+), 687 deletions(-)
 create mode 100644 src/components/MobileBottomNav.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6a254f6..75f25c3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import { Suspense } from "react";
+import MobileBottomNav from "@/components/MobileBottomNav";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import Providers from "@/components/providers";
@@ -39,8 +40,11 @@ export default function RootLayout({
             <RouteProgress />
           </Suspense>
           <Navbar />
-          {children}
-          <Footer />
+          <div className="min-h-screen pb-28 md:pb-0">
+            {children}
+            <Footer />
+          </div>
+          <MobileBottomNav />
         </Providers>
       </body>
     </html>
diff --git a/src/components/MobileBottomNav.tsx b/src/components/MobileBottomNav.tsx
new file mode 100644
index 0000000..14fcc6a
--- /dev/null
+++ b/src/components/MobileBottomNav.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import type { ComponentType } from "react";
+import { CalendarDays, CircleUserRound, Home, Newspaper } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { useAuth } from "@/contexts/AuthContext";
+import { Link } from "@/lib/router";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  key: string;
+  label: string;
+  href: string;
+  icon: ComponentType<{ className?: string }>;
+  matches: (pathname: string) => boolean;
+};
+
+const isProfileOrAuthPath = (pathname: string) =>
+  pathname === "/profile" ||
+  pathname.startsWith("/profile/") ||
+  pathname === "/auth" ||
+  pathname.startsWith("/auth/") ||
+  pathname.startsWith("/reset-password") ||
+  pathname.startsWith("/verify-email");
+
+export default function MobileBottomNav() {
+  const pathname = usePathname() || "/";
+  const { isAuthenticated } = useAuth();
+
+  if (pathname.startsWith("/admin") || pathname === "/logout") {
+    return null;
+  }
+
+  const items: NavItem[] = [
+    {
+      key: "home",
+      label: "خانه",
+      href: "/",
+      icon: Home,
+      matches: (current) => current === "/",
+    },
+    {
+      key: "events",
+      label: "رویدادها",
+      href: "/events",
+      icon: CalendarDays,
+      matches: (current) => current === "/events" || current.startsWith("/events/"),
+    },
+    {
+      key: "blog",
+      label: "بلاگ",
+      href: "/blog",
+      icon: Newspaper,
+      matches: (current) => current === "/blog" || current.startsWith("/blog/"),
+    },
+    {
+      key: "account",
+      label: isAuthenticated ? "پروفایل" : "حساب",
+      href: isAuthenticated ? "/profile" : "/auth",
+      icon: CircleUserRound,
+      matches: isProfileOrAuthPath,
+    },
+  ];
+
+  return (
+    <div
+      className="fixed inset-x-0 z-50 px-4 md:hidden"
+      style={{ bottom: "calc(env(safe-area-inset-bottom) + 0.9rem)" }}
+    >
+      <nav
+        aria-label="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"
+      >
+        {items.map((item) => {
+          const active = item.matches(pathname);
+          const Icon = item.icon;
+
+          return (
+            <Link
+              key={item.key}
+              to={item.href}
+              className={cn(
+                "flex min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-2xl px-2 py-2 text-[11px] 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>{item.label}</span>
+            </Link>
+          );
+        })}
+      </nav>
+    </div>
+  );
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 8790b19..666a7e0 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,39 +1,30 @@
 "use client";
 
-import { useMemo, useState } from 'react';
-import { Link, NavLink, useNavigate } from '@/lib/router';
-import { Menu, ChevronDown } from 'lucide-react';
-import { useAuth } from '@/contexts/AuthContext';
-import { Button } from '@/components/ui/button';
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
-import ModeToggle from '@/components/ModeToggle';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import type { ReactNode } from "react";
+import { useMemo } from "react";
+import { Link, NavLink } from "@/lib/router";
+import { useAuth } from "@/contexts/AuthContext";
+import ModeToggle from "@/components/ModeToggle";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 const NavItem = ({
   to,
   children,
-  onClick,
 }: {
   to: string;
-  children: React.ReactNode;
-  onClick?: () => void;
+  children: ReactNode;
 }) => (
   <NavLink
     to={to}
-    onClick={onClick}
     className={({ isActive }) =>
-      [
-        'px-2 py-1 rounded-md transition-colors',
-        isActive ? 'text-primary' : 'text-muted-foreground hover:text-foreground',
-      ].join(' ')
+      cn(
+        "rounded-full px-3 py-2 text-sm font-medium transition-colors",
+        isActive
+          ? "bg-primary text-primary-foreground"
+          : "text-muted-foreground hover:bg-muted hover:text-foreground",
+      )
     }
   >
     {children}
@@ -41,164 +32,81 @@ const NavItem = ({
 );
 
 export default function Navbar() {
-  const navigate = useNavigate();
   const { user, isAuthenticated } = useAuth();
-  const isAdminUser = isAuthenticated && ((user?.is_staff || user?.is_superuser) ?? false);
-  const [open, setOpen] = useState(false);
+  const isAdminUser = isAuthenticated && Boolean(user?.is_staff || user?.is_superuser);
 
   const avatarInitials = useMemo(
-    () => (user?.first_name?.[0] || user?.last_name?.[0] || user?.username?.[0] || '?').toUpperCase(),
+    () =>
+      (user?.first_name?.[0] ||
+        user?.last_name?.[0] ||
+        user?.username?.[0] ||
+        "?").toUpperCase(),
     [user?.first_name, user?.last_name, user?.username],
   );
 
-  const UserDropdown = () => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button
-          type="button"
-          className="flex items-center gap-2 rounded-full border border-border/60 bg-muted/40 px-2 py-1 pr-2.5 transition hover:bg-muted"
-        >
-          <Avatar className="h-9 w-9">
-            <AvatarImage src={user?.profile_picture || undefined} alt={user?.username || 'profile'} />
-            <AvatarFallback>{avatarInitials}</AvatarFallback>
-          </Avatar>
-          <ChevronDown className="h-4 w-4 text-muted-foreground" />
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-56 text-right">
-        <DropdownMenuLabel className="text-xs text-muted-foreground">
-          {user?.first_name || user?.last_name ? `${user?.first_name || ''} ${user?.last_name || ''}`.trim() : user?.username}
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem asChild>
-          <Link to="/profile">پروفایل</Link>
-        </DropdownMenuItem>
-        {isAdminUser && (
-          <DropdownMenuItem asChild>
-            <Link to="/admin">داشبورد مدیریت</Link>
-          </DropdownMenuItem>
-        )}
-        <DropdownMenuItem
-          onSelect={(e) => e.preventDefault()}
-          className="flex items-center justify-between gap-2"
-        >
-          <span>حالت نمایش</span>
-          <ModeToggle />
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onSelect={(e) => {
-            e.preventDefault();
-            navigate('/logout');
-          }}
-          className="text-red-600 focus:text-red-600"
-        >
-          خروج
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-
   return (
-    <nav className="sticky top-0 z-40 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60" dir="rtl">
+    <nav
+      className="sticky top-0 z-40 border-b bg-background/75 backdrop-blur-xl supports-[backdrop-filter]:bg-background/55"
+      dir="rtl"
+    >
       <div className="container mx-auto px-4 py-3">
-        <div className="flex flex-row-reverse items-center justify-between gap-3">
-          <Link to="/" className="order-2 flex items-center gap-2">
-            <span className="sm:inline text-2xl font-bold text-primary">
-              انجمن علمی کامپیوتر گیلان
-            </span>
+        <div className="flex items-center justify-between gap-4">
+          <Link to="/" className="flex min-w-0 items-center gap-3">
+            <div className="hidden h-10 w-10 items-center justify-center rounded-2xl border border-border/70 bg-background/90 shadow-sm sm:flex">
+              <span className="text-lg font-bold text-primary">گ</span>
+            </div>
+            <div className="min-w-0">
+              <p className="truncate text-sm font-semibold text-foreground sm:text-base">
+                انجمن علمی کامپیوتر گیلان
+              </p>
+              <p className="hidden text-xs text-muted-foreground sm:block">
+                رویدادها، بلاگ و حساب کاربری
+              </p>
+            </div>
           </Link>
 
-          <div className="order-1 hidden md:flex items-center gap-2">
+          <div className="hidden items-center gap-2 md:flex">
             <NavItem to="/">خانه</NavItem>
             <NavItem to="/blog">بلاگ</NavItem>
             <NavItem to="/events">رویدادها</NavItem>
+            <ModeToggle />
+
             {isAuthenticated ? (
-              <UserDropdown />
+              <Link
+                to="/profile"
+                className="flex items-center gap-3 rounded-full border border-border/70 bg-background/85 px-2 py-1.5 transition hover:bg-muted/70"
+              >
+                <Avatar className="h-9 w-9">
+                  <AvatarImage
+                    src={
+                      user?.profile_picture_preview_url ||
+                      user?.profile_picture ||
+                      undefined
+                    }
+                    alt={user?.username || "profile"}
+                  />
+                  <AvatarFallback>{avatarInitials}</AvatarFallback>
+                </Avatar>
+                <div className="min-w-0 text-right">
+                  <p className="max-w-36 truncate text-sm font-medium text-foreground">
+                    {user?.first_name || user?.last_name
+                      ? `${user?.first_name || ""} ${user?.last_name || ""}`.trim()
+                      : user?.username}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {isAdminUser ? "پروفایل و مدیریت حساب" : "پروفایل من"}
+                  </p>
+                </div>
+              </Link>
             ) : (
-              <>
-                <Link to="/auth">
-                  <Button size="sm">ورود / ثبت‌نام</Button>
-                </Link>
-                <ModeToggle />
-              </>
+              <Link to="/auth">
+                <Button className="rounded-full px-5">ورود / ثبت‌نام</Button>
+              </Link>
             )}
           </div>
 
-          <div className="order-1 md:hidden">
-            <Sheet open={open} onOpenChange={setOpen}>
-              <SheetTrigger asChild>
-                <Button variant="outline" size="icon" aria-label="U.U+U^">
-                  <Menu className="h-5 w-5" />
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="right" className="w-[80vw] sm:w-[360px]" dir="rtl">
-                <div className="mt-6 flex flex-col gap-4 text-right">
-                  <Link
-                    to="/"
-                    onClick={() => setOpen(false)}
-                    className="flex items-center gap-2"
-                  >
-                    <img src="/favicon.ico" alt="لوگو" className="h-8 w-auto" height={32} width={32} />
-                    <span className="text-xl font-semibold text-primary">انجمن علمی کامپیوتر گیلان</span>
-                  </Link>
-
-                  <div className="grid gap-2">
-                    <NavItem to="/"        onClick={() => setOpen(false)}>خانه</NavItem>
-                    <NavItem to="/blog"    onClick={() => setOpen(false)}>بلاگ</NavItem>
-                    <NavItem to="/events"  onClick={() => setOpen(false)}>رویدادها</NavItem>
-                  </div>
-
-                  <div className="pt-4 border-t grid gap-3">
-                    {isAuthenticated ? (
-                      <>
-                        <div className="flex items-center gap-3 rounded-md border px-3 py-2">
-                          <Avatar className="h-10 w-10">
-                            <AvatarImage src={user?.profile_picture || undefined} alt={user?.username || 'profile'} />
-                            <AvatarFallback>{avatarInitials}</AvatarFallback>
-                          </Avatar>
-                          <div className="flex-1 text-right">
-                            <div className="font-medium">{user?.username}</div>
-                            {user?.email ? <div className="text-xs text-muted-foreground">{user.email}</div> : null}
-                          </div>
-                        </div>
-                        <div className="grid gap-2">
-                          <Button variant="ghost" className="justify-between" asChild onClick={() => setOpen(false)}>
-                            <Link to="/profile">پروفایل</Link>
-                          </Button>
-                          {isAdminUser && (
-                            <Button variant="ghost" className="justify-between" asChild onClick={() => setOpen(false)}>
-                              <Link to="/admin">داشبورد مدیریت</Link>
-                            </Button>
-                          )}
-                          <div className="flex items-center justify-between rounded-md border px-3 py-2">
-                            <span className="text-sm text-muted-foreground">حالت نمایش</span>
-                            <ModeToggle />
-                          </div>
-                          <Button
-                            variant="outline"
-                            className="justify-between text-red-600 border-red-600 hover:bg-red-50 dark:text-red-400 dark:border-red-400 dark:hover:bg-red-950/30"
-                            onClick={() => { setOpen(false); navigate('/logout'); }}
-                          >
-                            خروج
-                          </Button>
-                        </div>
-                      </>
-                    ) : (
-                      <div className="grid gap-2">
-                        <Link to="/auth" onClick={() => setOpen(false)}>
-                          <Button className="w-full">ورود / ثبت‌نام</Button>
-                        </Link>
-                        <div className="flex items-center justify-between rounded-md border px-3 py-2">
-                          <span className="text-sm text-muted-foreground">حالت نمایش</span>
-                          <ModeToggle />
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </SheetContent>
-            </Sheet>
+          <div className="flex items-center gap-2 md:hidden">
+            <ModeToggle />
           </div>
         </div>
       </div>
diff --git a/src/views/Profile.tsx b/src/views/Profile.tsx
index ec25f01..5596bea 100644
--- a/src/views/Profile.tsx
+++ b/src/views/Profile.tsx
@@ -1,132 +1,421 @@
 "use client";
 
-import type * as Types from '@/lib/types';
-import { useEffect, useRef, useState, useMemo } from 'react';
-import { Navigate, Link } from '@/lib/router';
-import { Helmet } from '@/lib/helmet';
-import { useAuth } from '@/contexts/AuthContext';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { useToast } from '@/hooks/use-toast';
-import { api } from '@/lib/api';
-import { Loader2, Upload, Trash2 } from 'lucide-react';
-import { formatJalali, formatNumberPersian, resolveErrorMessage, toPersianDigits } from '@/lib/utils';
-import Markdown from '@/components/Markdown';
-import { useQuery } from '@tanstack/react-query';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import type * as Types from "@/lib/types";
+import type { ComponentType, ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Navigate, Link, useNavigate } from "@/lib/router";
+import { Helmet } from "@/lib/helmet";
+import { useAuth } from "@/contexts/AuthContext";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { useToast } from "@/hooks/use-toast";
+import { api } from "@/lib/api";
+import {
+  BadgeCheck,
+  Bookmark,
+  CalendarClock,
+  Camera,
+  CheckCircle2,
+  Clock3,
+  Heart,
+  Loader2,
+  LogOut,
+  Mail,
+  MessageSquareText,
+  PencilLine,
+  Reply,
+  Shield,
+  Trash2,
+  UserRound,
+  XCircle,
+} from "lucide-react";
+import {
+  formatJalali,
+  formatNumberPersian,
+  resolveErrorMessage,
+  toPersianDigits,
+} from "@/lib/utils";
+import Markdown from "@/components/Markdown";
+import { useQuery } from "@tanstack/react-query";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
+type ActivityCardProps = {
+  icon: ComponentType<{ className?: string }>;
+  title: string;
+  count: number | string;
+  description: string;
+};
+
+function ActivityPlaceholderCard({
+  icon: Icon,
+  title,
+  count,
+  description,
+}: ActivityCardProps) {
+  return (
+    <Card className="h-full rounded-2xl border border-border/70 bg-background/75 shadow-sm">
+      <CardContent className="flex h-full flex-col gap-4 p-5 text-right">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <p className="font-semibold">{title}</p>
+            <p className="mt-1 text-xs text-muted-foreground">{description}</p>
+          </div>
+          <div className="rounded-2xl border border-border/70 bg-muted/40 p-3">
+            <Icon className="h-5 w-5 text-primary" />
+          </div>
+        </div>
+        <div className="mt-auto flex items-center justify-between">
+          <Badge variant="secondary" className="rounded-full px-3 py-1">
+            به‌زودی
+          </Badge>
+          <p className="text-2xl font-semibold">{count}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function InfoRow({
+  label,
+  value,
+}: {
+  label: string;
+  value: ReactNode;
+}) {
+  return (
+    <div className="flex items-start justify-between gap-4 border-b border-border/50 py-3 text-sm last:border-b-0">
+      <div className="text-right">{value ?? "—"}</div>
+      <div className="shrink-0 text-muted-foreground">{label}</div>
+    </div>
+  );
+}
 
 export default function Profile() {
   const { user, isAuthenticated, loading } = useAuth();
+  const navigate = useNavigate();
   const { toast } = useToast();
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const {
     data: myRegs,
     isLoading: regsLoading,
     isError: regsError,
   } = useQuery({
-    queryKey: ['my-registrations'],
+    queryKey: ["my-registrations"],
     queryFn: () => api.getMyRegistrations(),
     enabled: isAuthenticated,
   });
 
   const { data: majors, isLoading: majorsLoading } = useQuery({
-    queryKey: ['majors'],
+    queryKey: ["majors"],
     queryFn: () => api.getMajors(),
     staleTime: 7 * 24 * 60 * 60 * 1000,
   });
 
   const { data: universities, isLoading: universitiesLoading } = useQuery({
-    queryKey: ['universities'],
+    queryKey: ["universities"],
     queryFn: () => api.getUniversities(),
     staleTime: 7 * 24 * 60 * 60 * 1000,
   });
 
-  const confirmedRegistrations = useMemo(
-    () => myRegs?.filter((reg) => reg.status === 'confirmed' || reg.status === 'attended') ?? [],
-    [myRegs],
-  );
-  const pendingRegistrations = useMemo(
-    () => myRegs?.filter((reg) => reg.status === 'pending') ?? [],
-    [myRegs],
-  );
-  const canceledRegistrations = useMemo(
-    () => myRegs?.filter((reg) => reg.status === 'cancelled') ?? [],
-    [myRegs],
-  );
-
   const [me, setMe] = useState<Types.UserProfileSchema | null>(user ?? null);
   const [fetching, setFetching] = useState(false);
   const [editing, setEditing] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
-
+  const [uploading, setUploading] = useState(false);
   const [formData, setFormData] = useState<Types.UserUpdateSchema>({
-    first_name: '',
-    last_name: '',
-    bio: '',
+    first_name: "",
+    last_name: "",
+    bio: "",
     year_of_study: null,
     major: null,
     university: null,
-    student_id: '',
+    student_id: "",
   });
 
-  const siteUrl = 'https://east-guilan-ce.ir';
-  const siteName = 'انجمن علمی کامپیوتر شرق دانشگاه گیلان';
+  const isAdminUser = Boolean(me?.is_staff || me?.is_superuser);
+
+  const confirmedRegistrations = useMemo(
+    () => myRegs?.filter((reg) => reg.status === "confirmed" || reg.status === "attended") ?? [],
+    [myRegs],
+  );
+  const pendingRegistrations = useMemo(
+    () => myRegs?.filter((reg) => reg.status === "pending") ?? [],
+    [myRegs],
+  );
+  const canceledRegistrations = useMemo(
+    () => myRegs?.filter((reg) => reg.status === "cancelled") ?? [],
+    [myRegs],
+  );
+
+  const siteUrl = "https://east-guilan-ce.ir";
+  const siteName = "انجمن علمی کامپیوتر شرق دانشگاه گیلان";
   const canonicalUrl = `${siteUrl}/profile`;
-  const toAbsoluteSiteUrl = (url?: string | null) => {
+  const toAbsoluteSiteUrl = useCallback((url?: string | null) => {
     if (!url) return undefined;
-    if (url.startsWith('http')) return url;
-    const normalizedSite = siteUrl.endsWith('/') ? siteUrl.slice(0, -1) : siteUrl;
-    const normalizedPath = url.startsWith('/') ? url.slice(1) : url;
+    if (url.startsWith("http")) return url;
+    const normalizedSite = siteUrl.endsWith("/") ? siteUrl.slice(0, -1) : siteUrl;
+    const normalizedPath = url.startsWith("/") ? url.slice(1) : url;
     return `${normalizedSite}/${normalizedPath}`;
-  };
+  }, [siteUrl]);
 
-  const statusLabels: Record<Types.MyEventRegistrationSchema['status'], string> = {
-    confirmed: 'تایید شده',
-    cancelled: 'لغو شده',
-    pending: 'در انتظار',
-    attended: 'حضور یافت',
-  };
+  const majorLabel = useMemo(() => {
+    if (!me?.major) return "—";
+    const found = majors?.find((item) => item.code === me.major || item.label === me.major);
+    return found?.label ?? me.major;
+  }, [majors, me?.major]);
 
-  const renderRegistrationRow = (registration: Types.MyEventRegistrationSchema) => {
-    const eventWithOptionalDate = registration.event as Types.EventListItemSchema & {
-      start_date?: string;
-    };
-    const rawDate = eventWithOptionalDate.start_date ?? eventWithOptionalDate.start_time;
-    const dateLabel = rawDate ? `تاریخ شروع: ${formatJalali(rawDate)}` : '';
-    const statusLabel = statusLabels[registration.status] ?? registration.status;
-
-    return (
-      <div
-        key={registration.id}
-        className="flex items-center justify-between rounded-lg border p-3"
-      >
-        <div>
-          <div className="font-medium">{registration.event.title}</div>
-          <div className="text-xs text-muted-foreground">
-            {statusLabel}
-            {dateLabel ? ` • ${dateLabel}` : ''}
-          </div>
-        </div>
-        <Link to={`/events/${registration.event.slug}`} className="text-primary text-sm">
-          مشاهده رویداد
-        </Link>
-      </div>
+  const universityLabel = useMemo(() => {
+    if (!me?.university) return "—";
+    const found = universities?.find(
+      (item) => item.code === me.university || item.label === me.university,
     );
+    return found?.label ?? me.university;
+  }, [me?.university, universities]);
+
+  const statusLabels: Record<Types.MyEventRegistrationSchema["status"], string> = {
+    confirmed: "تأیید شده",
+    cancelled: "لغو شده",
+    pending: "در انتظار",
+    attended: "حضور یافت",
   };
 
   const { pageTitle, pageDescription, ogImage } = useMemo(() => {
     const nameParts = [me?.first_name, me?.last_name].filter(Boolean) as string[];
-    const displayName = nameParts.join(' ').trim();
-    const identifier = displayName || me?.username || me?.email || 'عضو';
-    const title = `پروفایل ${identifier} | ${siteName}`;
-    const description = `مدیریت پروفایل ${identifier} در انجمن علمی کامپیوتر شرق گیلان؛ به‌روزرسانی اطلاعات شخصی و مرور ثبت‌نام‌ رویدادها.`;
-    const image = toAbsoluteSiteUrl(me?.profile_picture) ?? `${siteUrl}/favicon.ico`;
-    return { pageTitle: title, pageDescription: description, ogImage: image };
-  }, [me?.first_name, me?.last_name, me?.username, me?.email, me?.profile_picture, siteName, siteUrl]);
+    const displayName = nameParts.join(" ").trim();
+    const identifier = displayName || me?.username || me?.email || "عضو";
+    return {
+      pageTitle: `پروفایل ${identifier} | ${siteName}`,
+      pageDescription: `داشبورد حساب ${identifier} در انجمن علمی کامپیوتر شرق گیلان؛ مدیریت اطلاعات شخصی، وضعیت حساب و فعالیت‌های رویدادی و بلاگ.`,
+      ogImage: toAbsoluteSiteUrl(me?.profile_picture_preview_url || me?.profile_picture) ?? `${siteUrl}/favicon.ico`,
+    };
+  }, [
+    me?.email,
+    me?.first_name,
+    me?.last_name,
+    me?.profile_picture,
+    me?.profile_picture_preview_url,
+    me?.username,
+    siteName,
+    siteUrl,
+    toAbsoluteSiteUrl,
+  ]);
+
+  const avatarFallback = useMemo(
+    () =>
+      (me?.first_name?.[0] || me?.last_name?.[0] || me?.username?.[0] || me?.email?.[0] || "?").toUpperCase(),
+    [me?.email, me?.first_name, me?.last_name, me?.username],
+  );
+
+  const syncProfileToForm = useCallback((profile: Types.UserProfileSchema) => {
+    setFormData({
+      first_name: profile.first_name ?? "",
+      last_name: profile.last_name ?? "",
+      bio: profile.bio ?? "",
+      year_of_study: typeof profile.year_of_study === "number" ? profile.year_of_study : null,
+      major: profile.major ?? null,
+      university: profile.university ?? null,
+      student_id: profile.student_id ?? "",
+    });
+  }, []);
+
+  const loadProfile = useCallback(async () => {
+    try {
+      setFetching(true);
+      const profile = await api.getProfile();
+      setMe(profile);
+      syncProfileToForm(profile);
+    } catch (error: unknown) {
+      toast({
+        title: "خطا در دریافت پروفایل",
+        description: resolveErrorMessage(error, "مشکلی پیش آمد"),
+        variant: "destructive",
+      });
+    } finally {
+      setFetching(false);
+    }
+  }, [syncProfileToForm, toast]);
+
+  useEffect(() => {
+    if (user) {
+      setMe(user);
+      syncProfileToForm(user);
+    }
+  }, [syncProfileToForm, user]);
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      loadProfile();
+    }
+  }, [isAuthenticated, loadProfile]);
+
+  useEffect(() => {
+    if (!majors || !me?.major) return;
+    const found = majors.find((item) => item.code === me.major || item.label === me.major);
+    if (found && formData.major !== found.code) {
+      setFormData((prev) => ({ ...prev, major: found.code }));
+    }
+  }, [formData.major, majors, me?.major]);
+
+  useEffect(() => {
+    if (!universities || !me?.university) return;
+    const found = universities.find(
+      (item) => item.code === me.university || item.label === me.university,
+    );
+    if (found && formData.university !== found.code) {
+      setFormData((prev) => ({ ...prev, university: found.code }));
+    }
+  }, [formData.university, me?.university, universities]);
+
+  const onPickFile = () => fileInputRef.current?.click();
+
+  const onUpload = async (file: File) => {
+    try {
+      setUploading(true);
+      await api.uploadProfilePicture(file);
+      await loadProfile();
+      toast({ title: "تصویر پروفایل به‌روزرسانی شد", variant: "success" });
+    } catch (error: unknown) {
+      toast({
+        title: "خطا در آپلود تصویر",
+        description: resolveErrorMessage(error, "مشکلی پیش آمد"),
+        variant: "destructive",
+      });
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const onDeletePicture = async () => {
+    try {
+      await api.deleteProfilePicture();
+      await loadProfile();
+      toast({ title: "تصویر پروفایل حذف شد", variant: "success" });
+    } catch (error: unknown) {
+      toast({
+        title: "خطا در حذف تصویر",
+        description: resolveErrorMessage(error, "مشکلی پیش آمد"),
+        variant: "destructive",
+      });
+    }
+  };
+
+  const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      onUpload(file);
+    }
+    event.currentTarget.value = "";
+  };
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    try {
+      const payload: Types.UserUpdateSchema = {
+        first_name: formData.first_name ?? "",
+        last_name: formData.last_name ?? "",
+        bio: formData.bio ?? "",
+        year_of_study:
+          formData.year_of_study === undefined || formData.year_of_study === null
+            ? null
+            : Number(formData.year_of_study),
+        major: formData.major || null,
+        university: formData.university || null,
+        student_id: formData.student_id || null,
+      };
+
+      const updated = await api.updateProfile(payload);
+      setMe(updated);
+      syncProfileToForm(updated);
+      setEditing(false);
+      toast({ title: "پروفایل به‌روزرسانی شد", variant: "success" });
+    } catch (error: unknown) {
+      toast({
+        title: "خطا در ذخیره پروفایل",
+        description: resolveErrorMessage(error, "مشکلی پیش آمد"),
+        variant: "destructive",
+      });
+    }
+  };
+
+  const renderRegistrationRow = (registration: Types.MyEventRegistrationSchema) => {
+    const eventData = registration.event as Types.EventListItemSchema & { start_date?: string };
+    const rawDate = eventData.start_date ?? eventData.start_time;
+    return (
+      <div
+        key={registration.id}
+        className="flex items-center justify-between gap-3 rounded-2xl border border-border/70 bg-background/80 px-4 py-3"
+      >
+        <Link
+          to={`/events/${registration.event.slug}`}
+          className="rounded-full border border-border/70 px-3 py-1 text-xs text-primary transition hover:bg-muted"
+        >
+          مشاهده رویداد
+        </Link>
+        <div className="min-w-0 text-right">
+          <p className="truncate font-medium">{registration.event.title}</p>
+          <div className="mt-1 flex flex-wrap items-center justify-end gap-2 text-xs text-muted-foreground">
+            <span>{statusLabels[registration.status] ?? registration.status}</span>
+            {rawDate ? <span>• {formatJalali(rawDate)}</span> : null}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderRegistrationGroup = ({
+    title,
+    description,
+    items,
+    icon: Icon,
+    badgeVariant,
+  }: {
+    title: string;
+    description: string;
+    items: Types.MyEventRegistrationSchema[];
+    icon: React.ComponentType<{ className?: string }>;
+    badgeVariant: "default" | "secondary" | "destructive";
+  }) => (
+    <Card className="rounded-2xl border border-border/70 bg-card/90 shadow-sm">
+      <CardHeader className="flex flex-row-reverse items-start justify-between gap-3 space-y-0">
+        <div className="rounded-2xl border border-border/70 bg-muted/35 p-3">
+          <Icon className="h-5 w-5 text-primary" />
+        </div>
+        <div className="text-right">
+          <div className="flex items-center justify-end gap-2">
+            <Badge variant={badgeVariant}>{formatNumberPersian(items.length)}</Badge>
+            <CardTitle className="text-base">{title}</CardTitle>
+          </div>
+          <CardDescription className="mt-2">{description}</CardDescription>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {items.length > 0 ? (
+          items.map(renderRegistrationRow)
+        ) : (
+          <div className="rounded-2xl border border-dashed border-border/70 bg-muted/20 px-4 py-6 text-center text-sm text-muted-foreground">
+            موردی در این بخش ثبت نشده است.
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+
+  if (!loading && !isAuthenticated) {
+    return (
+      <>
+        <Helmet>
+          <title>{pageTitle}</title>
+          <meta name="description" content={pageDescription} />
+        </Helmet>
+        <Navigate to="/auth" replace />
+      </>
+    );
+  }
 
   const helmet = (
     <Helmet>
@@ -148,460 +437,545 @@ export default function Profile() {
     </Helmet>
   );
 
-  const loadProfile = async () => {
-    try {
-      setFetching(true);
-      const profile = await api.getProfile();
-      setMe(profile);
-      setFormData({
-        first_name: profile.first_name ?? '',
-        last_name: profile.last_name ?? '',
-        bio: profile.bio ?? '',
-        year_of_study: typeof profile.year_of_study === 'number' ? profile.year_of_study : null,
-        major: profile.major ?? null,
-        university: profile.university ?? null,
-        student_id: profile.student_id ?? null,
-      });
-
-    } catch (error: unknown) {
-      toast({
-        title: 'خطا در دریافت پروفایل',
-        description: resolveErrorMessage(error, 'مشکلی پیش آمد'),
-        variant: 'destructive',
-      });
-    } finally {
-      setFetching(false);
-    }
-  };
-
-  useEffect(() => {
-    if (isAuthenticated) loadProfile();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isAuthenticated]);
-
-  useEffect(() => {
-    if (!majors) return;
-    if (me?.major) {
-      const found = majors.find(m => m.code === me.major || m.label === me.major);
-      if (found && formData.major !== found.code) {
-        setFormData(prev => ({ ...prev, major: found.code }));
-      }
-    }
-  }, [majors, me?.major]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const majorLabel = useMemo(() => {
-    if (!me?.major) return '—';
-    if (majors) {
-      const f = majors.find(m => m.code === me.major || m.label === me.major);
-      return f?.label ?? me.major;
-    }
-    return me.major;
-  }, [majors, me?.major]);
-  
-  useEffect(() => {
-    if (!universities) return;
-    if (me?.university) {
-      const found = universities.find(u => u.code === me.university || u.label === me.university);
-      if (found && formData.university !== found.code) {
-        setFormData(prev => ({ ...prev, university: found.code }));
-      }
-    }
-  }, [universities, me?.university]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const universityLabel = useMemo(() => {
-    if (!me?.university) return '—';
-    if (universities) {
-      const f = universities.find(u => u.code === me.university || u.label === me.university);
-      return f?.label ?? me.university;
-    }
-    return me.university;
-  }, [universities, me?.university]);
-
-  const [uploading, setUploading] = useState(false);
-
-  const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const f = e.target.files?.[0];
-    if (f) onUpload(f);
-    e.currentTarget.value = ''; // allow picking the same file again later
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      const payload: Types.UserUpdateSchema = {
-        first_name: formData.first_name ?? '',
-        last_name: formData.last_name ?? '',
-        bio: formData.bio ?? '',
-        year_of_study:
-          formData.year_of_study === undefined || formData.year_of_study === null
-            ? null
-            : Number(formData.year_of_study),
-        major: formData.major || null,
-        university: formData.university || null,
-        student_id: formData.student_id || null,
-      };
-
-      const updated = await api.updateProfile(payload);
-      setMe(updated);
-      setEditing(false);
-      toast({ title: 'پروفایل به‌روزرسانی شد', variant: 'success' });
-    } catch (error: unknown) {
-      toast({
-        title: 'خطا در ذخیره پروفایل',
-        description: resolveErrorMessage(error, 'مشکلی پیش آمد'),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onPickFile = () => fileInputRef.current?.click();
-
-  const onUpload = async (file: File) => {
-    try {
-      setUploading(true);
-      toast({ title: 'در حال آپلود تصویر...' });
-      await api.uploadProfilePicture(file); // POST /api/auth/profile/picture
-      await loadProfile();
-      toast({ title: 'تصویر پروفایل به‌روزرسانی شد', variant: 'success' });
-    } catch (error: unknown) {
-      toast({
-        title: 'خطا در آپلود تصویر',
-        description: resolveErrorMessage(error, 'مشکلی پیش آمد'),
-        variant: 'destructive',
-      });
-    } finally {
-      setUploading(false);
-    }
-  };
-
-  const onDeletePicture = async () => {
-    try {
-      await api.deleteProfilePicture();
-      await loadProfile();
-      toast({ title: 'تصویر پروفایل حذف شد' });
-    } catch (error: unknown) {
-      toast({
-        title: 'خطا در حذف تصویر',
-        description: resolveErrorMessage(error, 'مشکلی پیش آمد'),
-        variant: 'destructive',
-      });
-    }
-  };
-
-
-  if (!loading && !isAuthenticated) {
-    return (
-      <>
-        {helmet}
-        <Navigate to="/auth" replace />
-      </>
-    );
-  }
-
-  const kv = (label: string, value: React.ReactNode) => (
-    <div className="grid grid-cols-3 gap-3 items-center py-2" dir="rtl">
-      <div className="text-sm text-muted-foreground text-right">{label}</div>
-      <div className="col-span-2 text-sm text-right">{value ?? '—'}</div>
-    </div>
-  );
-
   return (
     <>
       {helmet}
-      <div className="min-h-[70vh] flex flex-col items-center justify-center bg-background p-4">
-        <div className="w-full max-w-3xl">
-          <Card>
-          <CardHeader dir="rtl" className="text-right">
-            <div className="flex flex-col gap-4 items-center sm:flex-row">
-
-              <div className="relative shrink-0">
-                {/* CLICKABLE AVATAR */}
-                <button
-                  type="button"
-                  onClick={onPickFile}
-                  aria-label="تغییر عکس پروفایل"
-                  className="
-                    group relative h-20 w-20 sm:h-20 sm:w-20 rounded-full overflow-hidden
-                    bg-muted flex items-center justify-center
-                    ring-0 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
-                    cursor-pointer
-                  "
-                  title="تغییر عکس پروفایل"
-                  style={{ WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation' }}
-                >
-                  {me?.profile_picture ? (
-                    <img
-                      src={me.profile_picture}
-                      alt="avatar"
-                      className="h-full w-full object-cover transition-transform group-active:scale-95"
-                    />
-                  ) : (
-                    <span className="text-xl transition-transform group-active:scale-95">
-                      {(me?.first_name?.[0] || me?.last_name?.[0] || me?.email?.[0] || '?').toUpperCase()}
-                    </span>
-                  )}
-
-                  {/* SPINNER OVERLAY DURING UPLOAD */}
-                  {uploading && (
-                    <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
-                      <Loader2 className="h-5 w-5 animate-spin text-white" />
-                    </div>
-                  )}
-                </button>
-
-                {/* FLOATING TRASH ICON (bigger touch target, only if picture exists) */}
-                {me?.profile_picture && (
-                  <button
-                    type="button"
-                    onClick={onDeletePicture}
-                    aria-label="حذف تصویر پروفایل"
-                    className="
-                      absolute -bottom-3
-                      rounded-full bg-destructive text-destructive-foreground
-                      p-2 shadow-lg hover:opacity-95 active:scale-95
-                      focus:outline-none focus:ring-2 focus:ring-destructive/70
-                    "
-                    title="حذف تصویر"
-                    style={{ WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation' }}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </button>
-                )}
-              </div>
-
-              <div className="min-w-0 text-center sm:text-start">
-                <div className="text-xl font-semibold truncate">{me?.first_name || '—'} { me?.last_name }</div>
-                <div className="text-sm text-muted-foreground truncate">{me?.email || '—'}</div>
-              </div>
+      <div className="bg-background px-4 py-8 md:py-10" dir="rtl">
+        <div className="container mx-auto max-w-6xl space-y-6">
+          {(loading || fetching) && !me ? (
+            <div className="flex min-h-[50vh] items-center justify-center gap-3 text-muted-foreground">
+              <Loader2 className="h-5 w-5 animate-spin" />
+              <span>در حال بارگذاری پروفایل...</span>
             </div>
-
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept="image/*"
-              className="hidden"
-              onChange={onFileChange}
-            />
-          </CardHeader>
-
-
-          <CardContent>
-            {loading || fetching ? (
-              <div className="flex items-center gap-3 text-muted-foreground justify-center py-12">
-                <Loader2 className="h-5 w-5 animate-spin" />
-                <span>در حال بارگذاری پروفایل...</span>
-              </div>
-            ) : !editing ? (
-              /* حالت مشاهده */
-              <div className="space-y-2" dir="rtl">
-                <div className="mb-2">
-                  {me?.bio && ( <Markdown content={me.bio} justify /> )}
-                </div>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  <Card className="border-none shadow-none">
-                    <CardHeader className="px-0 pt-0 pb-2">
-                      <CardTitle className="text-base text-right">اطلاعات شخصی</CardTitle>
-                      <CardDescription className="text-right">مشاهده اطلاعات شما</CardDescription>
-                    </CardHeader>
-                    <CardContent className="px-0">
-                      {kv('نام', me?.first_name || '—')}
-                      {kv('نام خانوادگی', me?.last_name || '—')}
-                      {kv('شماره دانشجویی', me?.student_id ? toPersianDigits(me.student_id) : '—')}
-                      {kv('دانشگاه', universityLabel)}
-                      {kv('رشته', majorLabel)}
-                      {kv('سال ورود', typeof me?.year_of_study === 'number' ? toPersianDigits(String(me?.year_of_study)) : '—')}
-
-                    </CardContent>
-                  </Card>
-
-                  <Card className="border-none shadow-none">
-                    <CardHeader className="px-0 pt-0 pb-2">
-                      <CardTitle className="text-base text-right">اطلاعات حساب</CardTitle>
-                      <CardDescription className="text-right">جزئیات مربوط به حساب کاربری</CardDescription>
-                    </CardHeader>
-                    <CardContent className="px-0">
-                      {kv('ایمیل', me?.email || '—')}
-                      {kv('نام کاربری', me?.username || '—')}
-                      {kv('تاریخ عضویت', formatJalali(me?.date_joined))}
-                      {kv('تغییر رمز عبور', <Link to="/reset-password" className="block text-xs text-muted-foreground hover:text-foreground underline underline-offset-4 text-right">ارسال ایمیل فراموشی رمز عبور</Link>)}
-                    </CardContent>
-                  </Card>
+          ) : editing ? (
+            <Card className="rounded-[2rem] border border-border/70 shadow-lg">
+              <CardHeader className="space-y-5 bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.12),transparent_45%),radial-gradient(circle_at_bottom_left,rgba(15,23,42,0.06),transparent_40%)]">
+                <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
+                  <div className="text-center md:text-right">
+                    <CardTitle className="text-2xl">ویرایش پروفایل</CardTitle>
+                    <CardDescription className="mt-2">
+                      اطلاعات شخصی و دانشگاهی خود را با دقت به‌روزرسانی کنید.
+                    </CardDescription>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <Button variant="outline" onClick={() => setEditing(false)}>
+                      انصراف
+                    </Button>
+                    <Button onClick={onPickFile} variant="secondary" disabled={uploading}>
+                      <Camera className="ml-2 h-4 w-4" />
+                      تغییر تصویر
+                    </Button>
+                  </div>
                 </div>
 
-                <div className="mt-4 text-right">
-                  <Button onClick={() => setEditing(true)}>ویرایش پروفایل</Button>
-                </div>
-              </div>
-            ) : (
-              /* حالت ویرایش: فقط فیلدهای UserUpdateSchema */
-              <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4" dir="rtl">
-                <div>
-                  <Label htmlFor="first_name" className="block text-right">نام</Label>
-                  <Input
-                    id="first_name"
-                    dir="rtl"
-                    value={formData.first_name ?? ''}
-                    onChange={(e) => setFormData({ ...formData, first_name: e.target.value })}
-                  />
+                <div className="flex flex-col items-center gap-3 md:flex-row md:justify-end">
+                  <div className="text-center md:text-right">
+                    <p className="font-medium">{me?.username}</p>
+                    <p className="text-sm text-muted-foreground">{me?.email}</p>
+                  </div>
+                  <div className="relative">
+                    <Avatar className="h-24 w-24 border border-border/70 shadow-sm">
+                      <AvatarImage
+                        src={me?.profile_picture_preview_url || me?.profile_picture || undefined}
+                        alt={me?.username || "profile"}
+                      />
+                      <AvatarFallback className="text-xl">{avatarFallback}</AvatarFallback>
+                    </Avatar>
+                    {uploading ? (
+                      <div className="absolute inset-0 flex items-center justify-center rounded-full bg-black/35">
+                        <Loader2 className="h-5 w-5 animate-spin text-white" />
+                      </div>
+                    ) : null}
+                  </div>
                 </div>
 
-                <div>
-                  <Label htmlFor="last_name" className="block text-right">نام خانوادگی</Label>
-                  <Input
-                    id="last_name"
-                    dir="rtl"
-                    value={formData.last_name ?? ''}
-                    onChange={(e) => setFormData({ ...formData, last_name: e.target.value })}
-                  />
-                </div>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={onFileChange}
+                />
+              </CardHeader>
 
-                <div>
-                  <Label htmlFor="year_of_study" className="block text-right">سال ورود</Label>
-                  <Input
-                    id="year_of_study"
-                    dir="rtl"
-                    type="number"
-                    inputMode="numeric"
-                    value={formData.year_of_study ?? ''}
-                    onChange={(e) =>
-                      setFormData({
-                        ...formData,
-                        year_of_study: e.target.value === '' ? null : Number(e.target.value),
-                      })
-                    }
-                  />
-                </div>
+              <CardContent className="p-6">
+                <form onSubmit={handleSubmit} className="grid grid-cols-1 gap-5 md:grid-cols-2">
+                  <div>
+                    <Label htmlFor="first_name" className="mb-2 block text-right">
+                      نام
+                    </Label>
+                    <Input
+                      id="first_name"
+                      value={formData.first_name ?? ""}
+                      onChange={(event) =>
+                        setFormData((prev) => ({ ...prev, first_name: event.target.value }))
+                      }
+                    />
+                  </div>
 
-                <div>
-                  <Label htmlFor="university" className="block text-right">دانشگاه</Label>
-                  {universitiesLoading ? (
-                    <div className="h-10 w-full animate-pulse rounded-md bg-muted" />
-                  ) : (
-                    <Select
-                      value={formData.university ?? ''}
-                      onValueChange={(v) => setFormData({ ...formData, university: v || null })}
+                  <div>
+                    <Label htmlFor="last_name" className="mb-2 block text-right">
+                      نام خانوادگی
+                    </Label>
+                    <Input
+                      id="last_name"
+                      value={formData.last_name ?? ""}
+                      onChange={(event) =>
+                        setFormData((prev) => ({ ...prev, last_name: event.target.value }))
+                      }
+                    />
+                  </div>
+
+                  <div>
+                    <Label htmlFor="year_of_study" className="mb-2 block text-right">
+                      سال ورود
+                    </Label>
+                    <Input
+                      id="year_of_study"
+                      type="number"
+                      inputMode="numeric"
+                      value={formData.year_of_study ?? ""}
+                      onChange={(event) =>
+                        setFormData((prev) => ({
+                          ...prev,
+                          year_of_study: event.target.value === "" ? null : Number(event.target.value),
+                        }))
+                      }
+                    />
+                  </div>
+
+                  <div>
+                    <Label htmlFor="student_id" className="mb-2 block text-right">
+                      شماره دانشجویی
+                    </Label>
+                    <Input
+                      id="student_id"
+                      value={formData.student_id ?? ""}
+                      onChange={(event) =>
+                        setFormData((prev) => ({ ...prev, student_id: event.target.value }))
+                      }
+                    />
+                  </div>
+
+                  <div>
+                    <Label htmlFor="university" className="mb-2 block text-right">
+                      دانشگاه
+                    </Label>
+                    {universitiesLoading ? (
+                      <div className="h-10 w-full animate-pulse rounded-md bg-muted" />
+                    ) : (
+                      <Select
+                        value={formData.university ?? ""}
+                        onValueChange={(value) =>
+                          setFormData((prev) => ({ ...prev, university: value || null }))
+                        }
+                      >
+                        <SelectTrigger id="university" className="justify-between">
+                          <SelectValue placeholder="انتخاب دانشگاه" />
+                        </SelectTrigger>
+                        <SelectContent dir="rtl" className="max-h-64">
+                          {universities?.map((item) => (
+                            <SelectItem key={item.code} value={item.code}>
+                              {item.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  </div>
+
+                  <div>
+                    <Label htmlFor="major" className="mb-2 block text-right">
+                      رشته
+                    </Label>
+                    {majorsLoading ? (
+                      <div className="h-10 w-full animate-pulse rounded-md bg-muted" />
+                    ) : (
+                      <Select
+                        value={formData.major ?? ""}
+                        onValueChange={(value) =>
+                          setFormData((prev) => ({ ...prev, major: value || null }))
+                        }
+                      >
+                        <SelectTrigger id="major" className="justify-between">
+                          <SelectValue placeholder="انتخاب رشته" />
+                        </SelectTrigger>
+                        <SelectContent dir="rtl" className="max-h-64">
+                          {majors?.map((item) => (
+                            <SelectItem key={item.code} value={item.code}>
+                              {item.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  </div>
+
+                  <div className="md:col-span-2">
+                    <Label htmlFor="bio" className="mb-2 block text-right">
+                      بیو
+                    </Label>
+                    <Textarea
+                      id="bio"
+                      rows={8}
+                      className="resize-y"
+                      value={formData.bio ?? ""}
+                      onChange={(event) =>
+                        setFormData((prev) => ({ ...prev, bio: event.target.value }))
+                      }
+                    />
+                  </div>
+
+                  <div className="md:col-span-2 flex justify-end gap-3">
+                    <Button type="button" variant="outline" onClick={() => setEditing(false)}>
+                      انصراف
+                    </Button>
+                    <Button type="submit">ذخیره تغییرات</Button>
+                  </div>
+                </form>
+              </CardContent>
+            </Card>
+          ) : (
+            <>
+              <Card className="overflow-hidden rounded-[2rem] border border-border/70 shadow-lg">
+                <CardContent className="p-0">
+                  <div className="relative overflow-hidden bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.16),transparent_38%),radial-gradient(circle_at_bottom_left,rgba(15,23,42,0.08),transparent_42%)] px-6 py-7">
+                    <div className="flex flex-col items-start justify-between gap-8 lg:flex-row-reverse">
+                      <div className="flex flex-1 flex-col items-start gap-5 text-right lg:items-end">
+                        <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+                          <Badge variant={me?.is_email_verified ? "default" : "secondary"}>
+                            {me?.is_email_verified ? "ایمیل تأیید شده" : "در انتظار تأیید ایمیل"}
+                          </Badge>
+                          {isAdminUser ? <Badge variant="outline">دسترسی مدیریتی</Badge> : null}
+                          <Badge variant="secondary">
+                            عضویت از {formatJalali(me?.date_joined, false)}
+                          </Badge>
+                        </div>
+
+                        <div>
+                          <h1 className="text-3xl font-semibold">
+                            {me?.first_name || "عضو"} {me?.last_name || ""}
+                          </h1>
+                          <p className="mt-2 text-base text-muted-foreground">{me?.email}</p>
+                        </div>
+
+                        <div className="max-w-2xl text-sm leading-7 text-muted-foreground">
+                          {me?.bio ? (
+                            <Markdown content={me.bio} justify />
+                          ) : (
+                            <p>
+                              اینجا مرکز مدیریت حساب شماست؛ از ثبت‌نام‌های رویدادی تا بخش‌هایی که بعداً
+                              برای فعالیت‌های بلاگ تکمیل خواهند شد.
+                            </p>
+                          )}
+                        </div>
+
+                        <div className="flex flex-wrap justify-end gap-3">
+                          <Button onClick={() => setEditing(true)}>
+                            <PencilLine className="ml-2 h-4 w-4" />
+                            ویرایش پروفایل
+                          </Button>
+                          <Button variant="secondary" onClick={onPickFile} disabled={uploading}>
+                            <Camera className="ml-2 h-4 w-4" />
+                            تغییر تصویر
+                          </Button>
+                          {me?.profile_picture ? (
+                            <Button variant="outline" onClick={onDeletePicture}>
+                              <Trash2 className="ml-2 h-4 w-4" />
+                              حذف تصویر
+                            </Button>
+                          ) : null}
+                        </div>
+                      </div>
+
+                      <div className="flex w-full max-w-sm flex-col items-center gap-4 rounded-[1.75rem] border border-border/70 bg-background/80 p-5 backdrop-blur-sm">
+                        <div className="relative">
+                          <Avatar className="h-28 w-28 border border-border/70 shadow-sm">
+                            <AvatarImage
+                              src={me?.profile_picture_preview_url || me?.profile_picture || undefined}
+                              alt={me?.username || "profile"}
+                            />
+                            <AvatarFallback className="text-2xl">{avatarFallback}</AvatarFallback>
+                          </Avatar>
+                          {uploading ? (
+                            <div className="absolute inset-0 flex items-center justify-center rounded-full bg-black/35">
+                              <Loader2 className="h-5 w-5 animate-spin text-white" />
+                            </div>
+                          ) : null}
+                        </div>
+
+                        <div className="text-center">
+                          <p className="font-semibold">{me?.username}</p>
+                          <p className="mt-1 text-sm text-muted-foreground">
+                            {me?.student_id ? `شماره دانشجویی ${toPersianDigits(me.student_id)}` : "حساب کاربری فعال"}
+                          </p>
+                        </div>
+
+                        <div className="grid w-full grid-cols-2 gap-3">
+                          <Card className="rounded-2xl border border-border/70 bg-muted/25 shadow-none">
+                            <CardContent className="p-4 text-center">
+                              <p className="text-xl font-semibold">
+                                {formatNumberPersian(confirmedRegistrations.length)}
+                              </p>
+                              <p className="mt-1 text-xs text-muted-foreground">رویداد تأیید شده</p>
+                            </CardContent>
+                          </Card>
+                          <Card className="rounded-2xl border border-border/70 bg-muted/25 shadow-none">
+                            <CardContent className="p-4 text-center">
+                              <p className="text-xl font-semibold">
+                                {formatNumberPersian(pendingRegistrations.length)}
+                              </p>
+                              <p className="mt-1 text-xs text-muted-foreground">در انتظار</p>
+                            </CardContent>
+                          </Card>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={onFileChange}
+              />
+
+              <section className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
+                <Card className="rounded-[1.75rem] border border-border/70 shadow-sm">
+                  <CardHeader className="flex flex-row-reverse items-start justify-between gap-4 space-y-0">
+                    <div className="rounded-2xl border border-border/70 bg-muted/35 p-3">
+                      <UserRound className="h-5 w-5 text-primary" />
+                    </div>
+                    <div className="text-right">
+                      <CardTitle>اطلاعات شخصی و حساب</CardTitle>
+                      <CardDescription className="mt-2">
+                        تفکیک روشن برای اطلاعات فردی، دانشگاهی و وضعیت دسترسی حساب.
+                      </CardDescription>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="grid gap-6 md:grid-cols-2">
+                    <Card className="rounded-2xl border border-border/70 bg-background/70 shadow-none">
+                      <CardHeader className="pb-3 text-right">
+                        <CardTitle className="text-base">جزئیات فردی</CardTitle>
+                      </CardHeader>
+                      <CardContent className="space-y-1">
+                        <InfoRow label="نام" value={me?.first_name || "—"} />
+                        <InfoRow label="نام خانوادگی" value={me?.last_name || "—"} />
+                        <InfoRow label="دانشگاه" value={universityLabel} />
+                        <InfoRow label="رشته" value={majorLabel} />
+                        <InfoRow
+                          label="سال ورود"
+                          value={
+                            typeof me?.year_of_study === "number"
+                              ? toPersianDigits(String(me.year_of_study))
+                              : "—"
+                          }
+                        />
+                        <InfoRow
+                          label="شماره دانشجویی"
+                          value={me?.student_id ? toPersianDigits(me.student_id) : "—"}
+                        />
+                      </CardContent>
+                    </Card>
+
+                    <Card className="rounded-2xl border border-border/70 bg-background/70 shadow-none">
+                      <CardHeader className="pb-3 text-right">
+                        <CardTitle className="text-base">وضعیت حساب</CardTitle>
+                      </CardHeader>
+                      <CardContent className="space-y-1">
+                        <InfoRow label="ایمیل" value={me?.email || "—"} />
+                        <InfoRow label="نام کاربری" value={me?.username || "—"} />
+                        <InfoRow
+                          label="تاریخ عضویت"
+                          value={me?.date_joined ? formatJalali(me.date_joined, false) : "—"}
+                        />
+                        <InfoRow
+                          label="تأیید ایمیل"
+                          value={
+                            <span className="inline-flex items-center gap-2">
+                              {me?.is_email_verified ? (
+                                <BadgeCheck className="h-4 w-4 text-emerald-600" />
+                              ) : (
+                                <Clock3 className="h-4 w-4 text-amber-600" />
+                              )}
+                              {me?.is_email_verified ? "تأیید شده" : "در انتظار"}
+                            </span>
+                          }
+                        />
+                        <InfoRow
+                          label="سطح دسترسی"
+                          value={isAdminUser ? "مدیریتی" : "کاربر عادی"}
+                        />
+                      </CardContent>
+                    </Card>
+                  </CardContent>
+                </Card>
+
+                <Card className="rounded-[1.75rem] border border-border/70 shadow-sm">
+                  <CardHeader className="text-right">
+                    <CardTitle>اقدام‌های سریع</CardTitle>
+                    <CardDescription>
+                      میان‌برهایی که از این پس جای خروج و مدیریت پنل را می‌گیرند.
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="grid gap-3">
+                    <Button className="justify-between rounded-2xl py-6" onClick={() => setEditing(true)}>
+                      <span>ویرایش اطلاعات و بیو</span>
+                      <PencilLine className="h-4 w-4" />
+                    </Button>
+
+                    <Button variant="secondary" className="justify-between rounded-2xl py-6" asChild>
+                      <Link to="/reset-password">
+                        <span>درخواست تغییر رمز عبور</span>
+                        <Mail className="h-4 w-4" />
+                      </Link>
+                    </Button>
+
+                    {isAdminUser ? (
+                      <Button variant="outline" className="justify-between rounded-2xl py-6" asChild>
+                        <Link to="/admin">
+                          <span>ورود به داشبورد مدیریت</span>
+                          <Shield className="h-4 w-4" />
+                        </Link>
+                      </Button>
+                    ) : null}
+
+                    <Button
+                      variant="outline"
+                      className="justify-between rounded-2xl border-destructive/40 py-6 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                      onClick={() => navigate("/logout")}
                     >
-                      <SelectTrigger id="university" dir="rtl" className="justify-between">
-                        <SelectValue placeholder="انتخاب دانشگاه" />
-                      </SelectTrigger>
-                      <SelectContent dir="rtl" className="max-h-64">
-                        {universities?.map((u) => (
-                          <SelectItem key={u.code} value={u.code}>
-                            {u.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  )}
-                </div>
+                      <span>خروج از حساب</span>
+                      <LogOut className="h-4 w-4" />
+                    </Button>
+                  </CardContent>
+                </Card>
+              </section>
 
-                <div>
-                  <Label htmlFor="major" className="block text-right">رشته</Label>
+              <section className="grid gap-6 lg:grid-cols-3">
+                <Card className="rounded-[1.75rem] border border-border/70 shadow-sm">
+                  <CardContent className="flex items-center justify-between gap-3 p-5">
+                    <div className="rounded-2xl border border-border/70 bg-emerald-500/10 p-3">
+                      <CheckCircle2 className="h-5 w-5 text-emerald-600" />
+                    </div>
+                    <div className="text-right">
+                      <p className="text-2xl font-semibold">
+                        {formatNumberPersian(confirmedRegistrations.length)}
+                      </p>
+                      <p className="text-sm text-muted-foreground">رویدادهای تأیید شده</p>
+                    </div>
+                  </CardContent>
+                </Card>
 
-                  {majorsLoading ? (
-                    <div className="h-10 w-full animate-pulse rounded-md bg-muted" />
-                  ) : (
-                    <Select
-                      value={formData.major ?? ''}
-                      onValueChange={(v) => setFormData({ ...formData, major: v || null })}
-                    >
-                      <SelectTrigger id="major" dir="rtl" className="justify-between">
-                        <SelectValue placeholder="انتخاب رشته" />
-                      </SelectTrigger>
-                      <SelectContent dir="rtl" className="max-h-64">
-                        {majors?.map((m) => (
-                          <SelectItem key={m.code} value={m.code}>
-                            {m.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  )}
-                </div>
+                <Card className="rounded-[1.75rem] border border-border/70 shadow-sm">
+                  <CardContent className="flex items-center justify-between gap-3 p-5">
+                    <div className="rounded-2xl border border-border/70 bg-amber-500/10 p-3">
+                      <Clock3 className="h-5 w-5 text-amber-600" />
+                    </div>
+                    <div className="text-right">
+                      <p className="text-2xl font-semibold">
+                        {formatNumberPersian(pendingRegistrations.length)}
+                      </p>
+                      <p className="text-sm text-muted-foreground">ثبت‌نام‌های در انتظار</p>
+                    </div>
+                  </CardContent>
+                </Card>
 
-                <div>
-                  <Label htmlFor="student_id" className="block text-right">شماره دانشجویی</Label>
-                  <Input
-                    id="student_id"
-                    dir="rtl"
-                    value={formData.student_id ?? ''}
-                    onChange={(e) => setFormData({ ...formData, student_id: e.target.value })}
+                <Card className="rounded-[1.75rem] border border-border/70 shadow-sm">
+                  <CardContent className="flex items-center justify-between gap-3 p-5">
+                    <div className="rounded-2xl border border-border/70 bg-rose-500/10 p-3">
+                      <XCircle className="h-5 w-5 text-rose-600" />
+                    </div>
+                    <div className="text-right">
+                      <p className="text-2xl font-semibold">
+                        {formatNumberPersian(canceledRegistrations.length)}
+                      </p>
+                      <p className="text-sm text-muted-foreground">رویدادهای لغو شده</p>
+                    </div>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Card className="rounded-[1.75rem] border border-border/70 shadow-sm">
+                <CardHeader className="text-right">
+                  <CardTitle>فعالیت‌های رویدادی</CardTitle>
+                  <CardDescription>
+                    ثبت‌نام‌های شما با تفکیک وضعیت، بدون نیاز به جست‌وجو در کل سایت.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="grid gap-5 xl:grid-cols-3">
+                  {renderRegistrationGroup({
+                    title: "تأیید شده",
+                    description: "رویدادهایی که ثبت‌نام آن‌ها تکمیل یا حضور شما ثبت شده است.",
+                    items: confirmedRegistrations,
+                    icon: CheckCircle2,
+                    badgeVariant: "default",
+                  })}
+                  {renderRegistrationGroup({
+                    title: "در انتظار",
+                    description: "ثبت‌نام‌هایی که هنوز نهایی یا تأیید نشده‌اند.",
+                    items: pendingRegistrations,
+                    icon: CalendarClock,
+                    badgeVariant: "secondary",
+                  })}
+                  {renderRegistrationGroup({
+                    title: "لغو شده",
+                    description: "رویدادهایی که ثبت‌نام آن‌ها لغو شده یا ادامه پیدا نکرده است.",
+                    items: canceledRegistrations,
+                    icon: XCircle,
+                    badgeVariant: "destructive",
+                  })}
+                </CardContent>
+                {regsLoading ? (
+                  <div className="px-6 pb-6 text-sm text-muted-foreground">در حال بارگذاری فعالیت‌های رویدادی...</div>
+                ) : null}
+                {regsError ? (
+                  <div className="px-6 pb-6 text-sm text-destructive">
+                    خطا در دریافت ثبت‌نام‌های رویدادی
+                  </div>
+                ) : null}
+              </Card>
+
+              <Card className="rounded-[1.75rem] border border-border/70 shadow-sm">
+                <CardHeader className="text-right">
+                  <CardTitle>فعالیت‌های بلاگ</CardTitle>
+                  <CardDescription>
+                    این ساختار برای نسخه‌های بعدی آماده شده تا بدون بازطراحی دوباره، لایک‌ها،
+                    پست‌های ذخیره‌شده، نظرها و پاسخ‌ها را نشان دهد.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+                  <ActivityPlaceholderCard
+                    icon={Heart}
+                    title="پست‌های لایک‌شده"
+                    count={0}
+                    description="فهرست تعامل‌های مثبت شما با محتوای بلاگ در این بخش قرار می‌گیرد."
                   />
-                </div>
-
-
-                <div className="md:col-span-2">
-                  <Label htmlFor="bio" className="block text-right">بیو</Label>
-                  <Textarea
-                    id="bio"
-                    dir="rtl"
-                    rows={10}
-                    className="resize-y"
-                    value={formData.bio ?? ''}
-                    onChange={(e) => setFormData({ ...formData, bio: e.target.value })}
+                  <ActivityPlaceholderCard
+                    icon={Bookmark}
+                    title="پست‌های ذخیره‌شده"
+                    count={0}
+                    description="بخش ذخیره‌سازی بعداً به مدل و API واقعی وصل می‌شود، اما جای آن از حالا تثبیت شده است."
                   />
-                </div>
-
-                <div className="md:col-span-2 flex gap-2 mt-2 justify-end">
-                  <Button type="submit">ذخیره</Button>
-                  <Button type="button" variant="outline" onClick={() => setEditing(false)}>
-                    انصراف
-                  </Button>
-                </div>
-              </form>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="mt-6 w-full max-w-3xl">
-        <Card>
-          <CardHeader>
-            <CardTitle>ثبت‌نام‌های من</CardTitle>
-            <CardDescription>رویدادهایی که در آن‌ها ثبت‌نام کرده‌اید</CardDescription>
-          </CardHeader>
-          <CardContent>
-            {regsLoading && <div className="text-sm text-muted-foreground">در حال بارگذاری…</div>}
-            {regsError && <div className="text-sm text-red-500">خطا در دریافت ثبت‌نام‌ها</div>}
-            {!regsLoading && !regsError && (!myRegs || myRegs.length === 0) && (
-              <div className="text-sm text-muted-foreground">هنوز در رویدادی ثبت‌نام نکرده‌اید.</div>
-            )}
-            {!regsLoading && !regsError && myRegs && myRegs.length > 0 && (
-              <div className="space-y-6">
-                {confirmedRegistrations.length > 0 && (
-                  <section className="space-y-3">
-                    <div className="text-sm font-semibold text-muted-foreground">
-                      ثبت‌نام‌های تأیید شده
-                    </div>
-                    <div className="space-y-3">
-                      {confirmedRegistrations.map(renderRegistrationRow)}
-                    </div>
-                  </section>
-                )}
-                {pendingRegistrations.length > 0 && (
-                  <section className="space-y-3">
-                    <div className="text-sm font-semibold text-muted-foreground">
-                      ثبت‌نام‌های در انتظار
-                    </div>
-                    <div className="space-y-3">
-                      {pendingRegistrations.map(renderRegistrationRow)}
-                    </div>
-                  </section>
-                )}
-                {canceledRegistrations.length > 0 && (
-                  <section className="space-y-3">
-                    <div className="text-sm font-semibold text-muted-foreground">
-                      ثبت‌نام‌های لغو شده
-                    </div>
-                    <div className="space-y-3">
-                      {canceledRegistrations.map(renderRegistrationRow)}
-                    </div>
-                  </section>
-                )}
-              </div>
-            )}
-          </CardContent>
-          </Card>
+                  <ActivityPlaceholderCard
+                    icon={MessageSquareText}
+                    title="نظرهای من"
+                    count={0}
+                    description="نظرهایی که روی پست‌ها می‌گذارید بعداً با جزئیات زمانی و لینک نمایش داده می‌شوند."
+                  />
+                  <ActivityPlaceholderCard
+                    icon={Reply}
+                    title="پاسخ‌ها"
+                    count={0}
+                    description="پاسخ‌های شما به بحث‌های بلاگ در نمایی مستقل اما هماهنگ با نظرها قرار می‌گیرند."
+                  />
+                </CardContent>
+              </Card>
+            </>
+          )}
         </div>
       </div>
     </>