ghorbani
/
aqila_panel
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
14 Commits
1 Branch
0 Tags
2.4 MiB
 
 
 
Tree: ad4b770334
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ad4b770334'
${ noResults }
aqila_panel/guide/aqila_panel_ui_design_syste...

33 KiB
Raw Blame History

سند جامع سیستم طراحی بصری، تایپوگرافی و معماری رسپانسیو پنل مدیریت عقیله (UI Design System & Responsive Standard)

سامانه پلتفرم و پنل مدیریت عقیله (Aqila Web Panel)
مرجع سیستم: کلاینت وب (aqila_panel) و راهنمای سراسری هوش مصنوعی و توسعه‌دهندگان (Single Source of Truth)
نسخه: 2.0.0 (ویرایش جامع دسکتاپ، تبلت و موبایل)
وضعیت: مصوب و الزامی (Mandatory Reference)

۱. هدف و دامنه کاربرد (Objective & Scope)

این سند، مرجع قطعی، جامع و غیرقابل‌تغییر برای تمامی استانداردهای بصری، تایپوگرافی، پالت رنگی خنثی، نقاط شکست (Breakpoints)، چیدمان‌های چندستونه دسکتاپ و واکنش‌گرایی موبایل (Mobile Responsiveness) در پنل مدیریت عقیله است.

[!IMPORTANT] قانون الزام‌آور هوش مصنوعی و توسعه‌دهندگان (AI Agent & Dev Directive):
در هنگام ایجاد هر صفحه جدید، کامپوننت، فرم، فیلتر، جدول، دیالوگ، شیت یا وضعیت بارگذاری (Loading)، باید ابتدا و بدون استثنا کلیه بندهای این سند به عنوان استاندارد قطعی اعمال شوند.
هرگونه کدنویسی بصری سلیقه‌ای، استفاده از رنگ‌های رنگین‌کمانی مدادرنگی (Crayon-like UI)، فونت‌های متفرقه، پدینگ‌های هاردکدشده بدون مدیاکوئری، یا جدول‌های غیرریسپانسیو که در موبایل سرریز (Overflow) نامناسب ایجاد کنند، اکیداً ممنوع و مردود است.

۲. نقاط شکست و معماری چیدمان رسپانسیو (Breakpoints & Layout Architecture)

پنل مدیریت عقیله باید تجربه‌ای بی‌نقص و روان از مانیتورهای عریض دسکتاپ تا گوشی‌های هوشمند ارائه دهد. نقاط شکست استاندارد پروژه مطابق با سیستم رسمی Tailwind CSS و متناسب با ابعاد داشبورد به شرح زیر تعریف شده است:

┌──────────────────────────────────────────────────────────────────────────────────────────────────┐
│                             جدول نقاط شکست رسپانسیو پنل عقیله                                    │
├───────────┬──────────────┬──────────────────┬────────────────────────────────────────────────────┤
│ نقطه شکست │ بازه عرضی    │ دستگاه هدف       │ رفتار چیدمان و اسکلت اصلی                          │
├───────────┼──────────────┼──────────────────┼────────────────────────────────────────────────────┤
│ xs / Base │ < 640px      │ گوشی‌های هوشمند   │ تک‌ستونه، سایدبار منوی همبرگری، فیلترهای استک‌شده، │
│           │              │ (Mobile Portrait)│ تبدیل جداول به کارت/اسکرول افقی، دیالوگ باتم‌شیت   │
├───────────┼──────────────┼──────────────────┼────────────────────────────────────────────────────┤
│ sm        │ 640px-767px  │ فبلت و موبایل افقی│ فرم‌های ۲ ستونه، فیلترهای منعطف، پدینگ‌های میانی   │
├───────────┼──────────────┼──────────────────┼────────────────────────────────────────────────────┤
│ md        │ 768px-1023px │ تبلت (Tablet)    │ سایدبار کشویی (Overlay)، جداول فشرده با اسکرول،    │
│           │              │                  │ کارت‌های آماری ۲ الی ۳ ستونه                       │
├───────────┼──────────────┼──────────────────┼────────────────────────────────────────────────────┤
│ lg        │ 1024px-1279px│ لپ‌تاپ / دسکتاپ  │ سایدبار ثابت راست (240px)، هدر کامل، جداول جامع    │
├───────────┼──────────────┼──────────────────┼────────────────────────────────────────────────────┤
│ xl        │ 1280px-1535px│ مانیتور استاندارد│ نمایش سه‌ستونه: سایدبار راست + محتوا + پنل اسلاید چپ│
├───────────┼──────────────┼──────────────────┼────────────────────────────────────────────────────┤
│ 2xl       │ ≥ 1536px     │ مانیتورهای عریض   │ حداکثر خوانایی، گرید ۴ ستونه کارت‌های KPI و آمار   │
└───────────┴──────────────┴──────────────────┴────────────────────────────────────────────────────┘

۲.۱. ساختار شل اصلی در دسکتاپ در برابر موبایل (Responsive Shell Structure)

شل اصلی اپلیکیشن (AuthenticatedShell) به صورت داینامیک بین دو حالت سوئیچ می‌کند:

  1. نمای دسکتاپ و مانیتورهای بزرگ (lg و بالاتر / ≥ 1024px):

    • سایدبار ناوبری راست (AppSidebar): عرض ثابت 240px، همیشه قابل مشاهده و قابل جمع‌شدن به صورت آیکونی.
    • بخش میانی محتوا (SidebarInset): شامل Topbar با ارتفاع h-16 و محتوای اصلی با پدینگ px-8 py-6.
    • پنل جزئیات سمت چپ (PanelSlot): در ابعاد ≥ 1280px به صورت ستون کناری ثابت (Off-canvas با عرض 384px) باز شده و محتوا را به نرمی جمع می‌کند.

  2. نمای تبلت و موبایل (< 1024px):

    • سایدبار ناوبری: به صورت کشوی مدال (Sheet / Drawer) با کلیک روی دکمه همبرگری هدر باز می‌شود.
    • پنل جزئیات (PanelSlot): به صورت Sheet تمام‌صفحه یا با عرض w-[min(88vw,384px)] روی صفحه شناور می‌شود.
    • پدینگ محتوا: پدینگ به px-4 py-4 pb-12 کاهش می‌یابد تا بیشترین فضای مفید به داده‌ها اختصاص یابد.
// ساختار استاندارد کانتینر اصلی محتوای هر صفحه
<div className="space-y-4 sm:space-y-6">
  {/* هدر صفحه: در موبایل عمودی و در دسکتاپ افقی */}
  <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <div>
      <h1 className="text-lg font-black text-foreground sm:text-xl md:text-2xl">
        {pageTitle}
      </h1>
      <p className="text-xs text-muted-foreground sm:text-sm">
        {pageDescription}
      </p>
    </div>
    <div className="flex items-center gap-2">
      {headerActions}
    </div>
  </div>

  {/* بدنه محتوا */}
  {children}
</div>

۳. سیستم تایپوگرافی و مقیاس متنی رسپانسیو (Responsive Typography Matrix)

تایپوگرافی در پنل عقیله باید در مانیتورهای بزرگ کاملاً شارپ و خوانا، و در موبایل بدون ایجاد شکستگی‌های نامطلوب یا سرریز کلمات باشد:

┌──────────────────────────────────────────────────────────────────────────────────────────────────┐
│                              مقیاس تایپوگرافی تطبیقی (Responsive Typography)                    │
├───────────────────┬──────────────┬──────────────┬─────────┬──────────────┬───────────────────────┤
│ سطح متنی (Role)   │ سایز موبایل  │ سایز دسکتاپ  │ وزن (Wt)│ Line-Height  │ کلاس Tailwind پیشنهادی│
├───────────────────┼──────────────┼──────────────┼─────────┼──────────────┼───────────────────────┤
│ Display / H1      │ 20px (1.25r) │ 24px (1.5r)  │ 900/Bold│ 1.35 (32px)  │ text-xl md:text-2xl   │
│ Page Title / H2   │ 18px (1.12r) │ 20px (1.25r) │ 800/Bold│ 1.4  (28px)  │ text-lg md:text-xl    │
│ Section Title / H3│ 15px (.937r) │ 16px (1.0r)  │ 700/Bold│ 1.45 (24px)  │ text-[15px] md:text-base│
│ Card Title / H4   │ 13px (.812r) │ 14px (.875r) │ 700/Bold│ 1.5  (21px)  │ text-xs sm:text-sm    │
│ Body Text (اصلی)  │ 13px (.812r) │ 14px (.875r) │ 500/Med │ 1.6  (22px)  │ text-xs sm:text-sm    │
│ Secondary / Muted │ 11px (.687r) │ 12px (.75r)  │ 400/Reg │ 1.5  (18px)  │ text-[11px] sm:text-xs│
│ Caption / Footnote│ 10px (.625r) │ 11px (.687r) │ 500/Med │ 1.4  (16px)  │ text-[10px] sm:text-[11px]│
│ Badge / Tag Label │ 10px (.625r) │ 11px (.687r) │ 700/Bold│ 1.0  (12px)  │ text-[10px] sm:text-[11px]│
│ Monospace / Stats │ 14px-20px    │ 16px-24px    │ 900/Mono│ 1.2 (Tabular)│ font-mono tabular-nums│
└───────────────────┴──────────────┴──────────────┴─────────┴──────────────┴───────────────────────┘

۳.۱. فونت‌ها و ترکیب دوزبانه (Fonts & Multi-Language)

  1. فارسی و عربی (RTL):
    • فونت رسمی: Vazirmatn (وزن‌های 400، 500، 600، 700، 800، 900).
    • برای خطوط فارسی و عربی به هیچ عنوان از letter-spacing (کلاس‌های tracking-wide یا tracking-widest) استفاده نشود زیرا اتصالات حروف شکسته می‌شود.
  2. انگلیسی و متون فنی (LTR):
    • فونت استاندارد: Inter, system-ui, sans-serif.
  3. ارقام مالی، شناسه‌ها، مبالغ و کدها:
    • منحصراً از کلاس font-mono tabular-nums همراه با جهت dir="ltr" برای نمایش ارقام انگلیسی، قیمت‌ها ($1,250 یا 25,000 IQD)، شناسه‌های سیستمی (#TRIP-1082) و تاریخ‌های لاگ استفاده شود.
    • در عناوین و متون فارسی توضیحی از متد کمکی toFa(number) برای نمایش بومی اعداد بهره گرفته شود.

۴. مقیاس فواصل، پدینگ‌ها، ابعاد و ارگونومی لمسی (Spacing & Touch Targets)

رعایت سیستم فاصله‌گذاری مضرب ۴ و ۸ پیکسلی برای حفظ ریتم عمودی و افقی الزامی است:

┌──────────────────────────────────────────────────────────────────────────────────────────────────┐
│                              ماتریس فواصل و پدینگ‌های رسپانسیو                                   │
├─────────────┬─────────────┬─────────────┬────────────────────────────────────────────────────────┤
│ نام توکن    │ موبایل (px) │ دسکتاپ (px) │ کاربرد و موارد استفاده                                 │
├─────────────┼─────────────┼──────────────────────────────────────────────────────────────────────┤
│ Page Padding│ 16px (px-4) │ 32px (px-8) │ پدینگ افقی دیواره‌های اصلی صفحه به محتوا                │
│ Card Padding│ 14px (p-3.5)│ 24px (p-6)  │ پدینگ داخلی کارت‌های آماری، فرم‌ها و جداول             │
│ Form Gap    │ 12px (gap-3)│ 16px (gap-4)│ فاصله عمودی و افقی بین فیلدهای ورودی فرم               │
│ Section Gap │ 16px (gap-4)│ 24px (gap-6)│ فاصله بین بلوک‌های اصلی و سکشن‌های صفحه                │
│ Table Cell  │ 12px (p-3)  │ 16px (p-4)  │ پدینگ سلول‌های جدول داده‌ها                            │
└─────────────┴─────────────┴─────────────┴────────────────────────────────────────────────────────┘

۴.۱. حداقل ابعاد تعاملی برای لمس در موبایل (Mobile Touch Targets)

در موبایل، کاربر با انگشت با صفحه تعامل دارد نه با نشانگر دقیق ماوس. لذا:

  • ارتفاع دکمه‌ها و فیلدها: حداقل 38px الی 44px در موبایل (h-10 sm:h-9).
  • آیکون‌باتن‌های عملیاتی: کادر کلیک‌پذیر حداقل 36x36px با پدینگ امن (size-9 p-1.5).
  • فاصله بین دکمه‌های مجاور: حداقل 8px (gap-2) تا از کلیک اشتباه جلوگیری شود.

۴.۲. شعاع انحنای المان‌ها (Border Radii)

  • تگ‌ها، بج‌ها و المان‌های ریز: rounded-lg (8px الی 10px).
  • فیلدهای ورودی و دکمه‌ها: rounded-xl (12px الی 14px).
  • کارت‌ها، سکشن‌ها و جداول: rounded-2xl (16px).
  • دیالوگ‌ها در دسکتاپ: rounded-2xl الی rounded-3xl (20px الی 24px).
  • دیالوگ‌ها در موبایل (Bottom Sheet): لبه‌های بالا گرد rounded-t-2xl و لبه‌های پایین صاف rounded-b-none.
  • بج‌های کپسولی / قرصی: rounded-full (9999px).

۵. پالت رنگی خنثی، بدون مدادرنگی (Neutral Slate Color Palette)

[!CAUTION] قانون قطعی ۹۰٪ خنثی (Strict 90% Neutral Rule):
بیش از ۹۰ درصد محیط بصری پنل مدیریت باید از رنگ‌های خنثی (مشکی تیره مات، زغالی، اسلیت، خاکستری، سفید) تشکیل شود. استفاده از رنگ‌های تند و رنگین‌کمانی برای پس‌زمینه کارت‌ها، هدرها، ستون‌های جدول یا تگ‌های معمولی اکیداً ممنوع است.

┌──────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                 پالت رنگی رسمی پنل مدیریت عقیله                                  │
├───────────────────┬───────────────────────────────┬──────────────────────────────────────────────┤
│ توکن معنایی       │ تم دارک (Dark Mode - پیش‌فرض) │ تم لایت (Light Mode)                         │
├───────────────────┼───────────────────────────────┼──────────────────────────────────────────────┤
│ background        │ #18191D (تیره مات و عمیق)     │ #F8FAFC (سفید-خاکستری لطیف)                  │
│ surface / card    │ #22252C (کارت پایه زغالی)     │ #FFFFFF (سفید خالص)                          │
│ popover / panel   │ #1E2128 (پنل‌های اسلاید)      │ #FFFFFF                                      │
│ border            │ rgba(255, 255, 255, 0.12)     │ rgba(15, 23, 42, 0.12)                       │
│ border-soft       │ rgba(255, 255, 255, 0.07)     │ rgba(15, 23, 42, 0.07)                       │
│ primary (برنز برند)│ #D09460                       │ #D09460                                      │
│ primary-muted     │ rgba(208, 148, 96, 0.15)      │ rgba(208, 148, 96, 0.10)                     │
│ text-foreground   │ #FFFFFF                       │ #0F172A                                      │
│ text-muted        │ #8B8B8B                       │ #64748B                                      │
│ text-subtle       │ #4D4D4D                       │ #94A3B8                                      │
└───────────────────┴───────────────────────────────┴──────────────────────────────────────────────┘

۵.۱. بج‌های وضعیتی استاندارد (Semantic Badges)

رنگ‌های اشباع منحصراً و صرفاً برای ۴ حالت سیستم مجاز هستند:

// ۱. تگ خنثی معمولی (دسته‌بندی، کشور، نسخه، برچسب‌ها) - بیش از ۸۰٪ تگ‌ها
<Badge variant="outline" className="border-border-soft bg-muted/40 text-muted-foreground text-[10px] sm:text-[11px] font-medium px-2 py-0.5 rounded-lg">
  بلیت و پرواز
</Badge>

// ۲. وضعیت موفق / فعال / تایید شده (Success)
<span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-0.5 text-[10px] sm:text-[11px] font-bold text-emerald-600 dark:text-emerald-400">
  <span className="size-1.5 rounded-full bg-emerald-500" />
  تأیید شده
</span>

// ۳. وضعیت هشدار / در حال پردازش (Warning / Pending)
<span className="inline-flex items-center gap-1.5 rounded-full bg-amber-500/10 border border-amber-500/20 px-2.5 py-0.5 text-[10px] sm:text-[11px] font-bold text-amber-600 dark:text-amber-400">
  <span className="size-1.5 rounded-full bg-amber-500 animate-pulse" />
  در انتظار بررسی
</span>

// ۴. وضعیت خطا / لغوشده / حذف (Error / Destructive)
<span className="inline-flex items-center gap-1.5 rounded-full bg-rose-500/10 border border-rose-500/20 px-2.5 py-0.5 text-[10px] sm:text-[11px] font-bold text-rose-600 dark:text-rose-400">
  <span className="size-1.5 rounded-full bg-rose-500" />
  رد شده
</span>

۶. استاندارد جامع جداول داده‌ای و تطبیق با موبایل (Responsive Data Tables)

جداول عریض داده‌ای مهم‌ترین چالش در صفحات وب هستند. در پنل عقیله باید از یکی از دو الگوی استاندارد زیر استفاده شود:

الگوی اول: نمایش دوگانه (جدول در دسکتاپ + لیست کارت در موبایل - الگو طلایی)

در این الگو، برای صفحات موبایل (< 768px) به جای جدول پهن ناخوانا، داده‌ها به صورت کارت‌های مدرن و شکیل نمایش داده می‌شوند:

{/* نمای دسکتاپ و تبلت (md به بالا) */}
<div className="hidden md:block rounded-2xl border border-border-soft bg-card overflow-hidden">
  <div className="overflow-x-auto">
    <table className="w-full text-start text-xs">
      <thead className="border-b border-border-soft bg-muted/40 text-muted-foreground font-bold">
        <tr>
          <th className="p-4 text-start">عنوان سرویس</th>
          <th className="p-4 text-start">دسته‌بندی</th>
          <th className="p-4 text-start">مبلغ</th>
          <th className="p-4 text-start">وضعیت</th>
          <th className="p-4 text-end">عملیات</th>
        </tr>
      </thead>
      <tbody className="divide-y divide-border-soft">
        {items.map((item) => (
          <tr key={item.id} className="hover:bg-muted/20 transition-colors">
            <td className="p-4 font-medium text-foreground">{item.title}</td>
            <td className="p-4 text-muted-foreground">{item.category}</td>
            <td className="p-4 font-mono font-bold">{toFa(item.price)} د.ع</td>
            <td className="p-4">{/* بج وضعیت */}</td>
            <td className="p-4 text-end">{/* دکمه‌های ویرایش/حذف */}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
</div>

{/* نمای موبایل (زیر md) - کارت‌های مجزا */}
<div className="flex flex-col gap-3 md:hidden">
  {items.map((item) => (
    <Card key={item.id} className="border-border-soft bg-card p-4 rounded-2xl">
      <div className="flex items-start justify-between gap-2 border-b border-border-soft pb-3">
        <div>
          <p className="font-bold text-sm text-foreground">{item.title}</p>
          <span className="text-[11px] text-muted-foreground">{item.category}</span>
        </div>
        <div>{/* بج وضعیت */}</div>
      </div>
      <div className="flex items-center justify-between pt-3 text-xs">
        <span className="text-muted-foreground">مبلغ کل:</span>
        <span className="font-mono font-black text-foreground">{toFa(item.price)} د.ع</span>
      </div>
      <div className="mt-3 flex items-center justify-end gap-2 border-t border-border-soft pt-3">
        <Button variant="ghost" size="sm" className="h-8 text-xs">مشاهده جزئیات</Button>
        <Button variant="outline" size="sm" className="h-8 text-xs">ویرایش</Button>
      </div>
    </Card>
  ))}
</div>

الگوی دوم: جدول با اسکرول افقی نرم و ستون عملیات چسبان (Sticky Action Column)

چنانچه اطلاعات جدول بسیار متراکم است، کل جدول درون کانتینر overflow-x-auto قرار گرفته و ستون عملیات در سمت چپ (یا انتهای RTL) چسبان (sticky end-0) می‌ماند:

<div className="rounded-2xl border border-border-soft bg-card overflow-hidden">
  <div className="overflow-x-auto no-scrollbar sm:overflow-x-auto">
    <table className="w-full min-w-[680px] text-start text-xs">
      {/* ردیف‌ها */}
    </table>
  </div>
</div>

۷. نوار فیلترها، جستجو و فرم‌ها در وب و موبایل (Filters & Forms)

۷.۱. نوار فیلترهای بالا (Filter Bar)

  • دسکتاپ (sm به بالا): چینش افقی flex flex-row items-center justify-between gap-3. فیلد سرچ گسترده و فیلترهای دراپ‌داون در امتداد یک خط.
  • موبایل: چینش عمودی استک‌شده flex flex-col gap-2.5 items-stretch. سرچ تمام‌عرض در بالا و دکمه‌های فیلتر/اکشن در زیر.
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
  {/* بخش جستجو و انتخابگرها */}
  <div className="flex flex-1 flex-col gap-2 sm:flex-row sm:items-center">
    <div className="relative flex-1 sm:max-w-xs">
      <Input
        placeholder="جستجو در اطلاعات..."
        className="h-9 w-full bg-card/60 text-xs ps-8 rounded-xl border-border-soft"
      />
      <Ic.Search className="absolute start-2.5 top-2.5 size-4 text-muted-foreground" />
    </div>
    <div className="flex items-center gap-2">
      {/* دراپ‌داون وضعیت یا سرویس */}
    </div>
  </div>

  {/* دکمه عملیات اصلی */}
  <Button className="h-9 gap-1.5 rounded-xl bg-primary text-xs font-bold text-primary-foreground sm:w-auto w-full">
    <Ic.Plus className="size-4" />
    افزودن آیتم جدید
  </Button>
</div>

۷.۲. گرید فیلدهای فرم (Responsive Form Grids)

فرم‌ها در دیالوگ‌ها یا صفحات باید به صورت واکنش‌گرا ستون‌بندی شوند:

  • موبایل: ۱ ستونه (grid-cols-1).
  • تبلت و فبلت: ۲ ستونه (sm:grid-cols-2).
  • دسکتاپ عریض: ۳ ستونه (lg:grid-cols-3).
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 sm:gap-4">
  <div className="space-y-1.5">
    <label className="text-xs font-bold text-muted-foreground">عنوان فارسی</label>
    <Input className="h-9 text-xs rounded-xl bg-card border-border-soft" />
  </div>
  <div className="space-y-1.5">
    <label className="text-xs font-bold text-muted-foreground">عنوان عربی</label>
    <Input className="h-9 text-xs rounded-xl bg-card border-border-soft" />
  </div>
  <div className="space-y-1.5 sm:col-span-2 lg:col-span-1">
    <label className="text-xs font-bold text-muted-foreground">عنوان انگلیسی</label>
    <Input className="h-9 text-xs rounded-xl bg-card border-border-soft" dir="ltr" />
  </div>
</div>

۸. دیالوگ‌ها، مودال‌ها و باتم‌شیت‌ها (Modals & Bottom Sheets)

دیالوگ‌های پنل عقیله باید در دسکتاپ در مرکز تصویر باز شده و در موبایل به صورت سازگار با انگشت دست عمل کنند:

<Dialog open={isOpen} onOpenChange={setIsOpen}>
  <DialogContent className="w-full max-w-full sm:max-w-xl md:max-w-2xl max-h-[92vh] flex flex-col p-0 rounded-t-2xl sm:rounded-2xl border-border-soft bg-[#22252c] overflow-hidden">
    {/* هدر ثابت دیالوگ */}
    <DialogHeader className="p-4 sm:p-5 border-b border-border-soft bg-card/60">
      <DialogTitle className="text-base font-extrabold text-foreground">
        ویرایش مشخصات سرویس
      </DialogTitle>
      <DialogDescription className="text-xs text-muted-foreground">
        اطلاعات را به دقت در هر سه زبان تکمیل نمایید.
      </DialogDescription>
    </DialogHeader>

    {/* محتوای دارای اسکرول عمودی */}
    <div className="flex-1 overflow-y-auto p-4 sm:p-6 space-y-4">
      {/* فیلدهای ورودی */}
    </div>

    {/* فوتر چسبان دیالوگ با دکمه‌های منظم */}
    <DialogFooter className="p-3 sm:p-4 border-t border-border-soft bg-card/60 flex flex-col-reverse sm:flex-row gap-2 sm:justify-end">
      <Button variant="outline" onClick={() => setIsOpen(false)} className="h-9 text-xs w-full sm:w-auto rounded-xl">
        انصراف
      </Button>
      <Button className="h-9 text-xs font-bold w-full sm:w-auto rounded-xl bg-primary text-primary-foreground">
        ذخیره تغییرات
      </Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

۹. استاندارد سراسری اسکلتون لودینگ (Shimmer Loading Standard)

[!IMPORTANT] الگوی واحد لودینگ: تمام صفحات، جداول و کارت‌ها در هنگام دریافت اطلاعات باید از کامپوننت سراسری @/components/shared/Shimmer با انیمیشن پالس و پالت خنثی استفاده کنند.

۹.۱. توکن‌های رنگی و دوره تناوب شیمر

  • تم لایت: رنگ پایه #E2E8F0، هایلایت #F8FAFC.
  • تم دارک: رنگ پایه #22252C، هایلایت #333742.
  • دوره انیمیشن: دقیقاً 1500ms با انیمیشن ملایم پالس.
import { Shimmer } from '@/components/shared/Shimmer'

{isLoading ? (
  <div className="space-y-4">
    {/* اسکلتون کارت‌های آماری */}
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4">
      <Shimmer className="h-24 rounded-2xl" />
      <Shimmer className="h-24 rounded-2xl" />
      <Shimmer className="h-24 rounded-2xl" />
      <Shimmer className="h-24 rounded-2xl" />
    </div>
    {/* اسکلتون جدول داده‌ها */}
    <Shimmer withCard cardHeaderTitle="در حال بارگذاری اطلاعات..." rows={6} />
  </div>
) : (
  <MainPageContent />
)}

۱۰. دسترسی‌پذیری، ارگونومی و مناطق امن (Accessibility & Safe Areas)

  1. کنتراست استاندارد متون (WCAG AA):
    • متن اصلی در برابر پس‌زمینه حداقل نسبت 4.5:1 داشته باشد.
    • از متن‌های خاکستری کم‌کنتراست در تم دارک پرهیز شود.
  2. منطقه امن دکمه‌های پایین موبایل (Safe Area Inset):
    • نوارهای عملیاتی چسبان پایین صفحه (Sticky Bottom Bar) باید دارای پدینگ pb-[calc(0.75rem+env(safe-area-inset-bottom))] باشند تا با نوار هوم‌بار آیفون تداخل پیدا نکنند.
  3. حالت فوکوس کیبورد (Focus Visibility):
    • تمامی دکمه‌ها و فیلدها باید دارای کادر فوکوس واضح با focus-visible:ring-2 focus-visible:ring-primary/50 باشند.

۱۱. چک‌لیست طلایی هوش مصنوعی قبل از تحویل هر تسک وب و پنل (AI Golden Checklist)

قبل از نهایی کردن هرگونه تغییر در پنل مدیریت، بررسی موارد زیر الزامی است:

  • ۱. پالت خنثی و بدون رنگین‌کمان: آیا بیش از ۹۰٪ المان‌ها دارای رنگ‌های خنثی بوده و از رنگ‌های فسفری/تند پرهیز شده است؟
  • ۲. سازگاری کامل با موبایل (Responsive): آیا صفحه در ابعاد موبایل (375px و 414px) تست شده و اسکرول افقی نامطلوب (Horizontal Overflow) ندارد؟
  • ۳. تایپوگرافی چندزبانه: آیا فونت متون فارسی/عربی Vazirmatn و ارقام/مبالغ/کدها font-mono tabular-nums با dir="ltr" است؟
  • ۴. ابعاد کلیک‌پذیر (Touch Targets): آیا دکمه‌ها و فیلدها در موبایل ارتفاع کافی (حداقل 38px تا 44px) دارند؟
  • ۵. لودینگ یکدست (Shimmer): آیا در حالت لودینگ از کامپوننت استاندارد Shimmer با پالت خنثی استفاده شده است؟
  • ۶. دوگانگی تم: آیا کنتراست صفحه در هر دو حالت Light Mode و Dark Mode خوانا و استاندارد است؟
  • ۷. منطق بیزینس و کلیدهای انگلیسی: آیا تمامی مقایسه‌ها و شرط‌های کد بر اساس کلیدهای استاندارد انگلیسی API پیاده شده‌اند؟