Admin Kit
قالب پنل مدیریت: پوسته‌ی واکنش‌گرا (سایدبار + نوار بالا)، سربرگ صفحه، کارت‌های آمار، نوار ابزار جدول و صفحه‌ی ورود. فقط CSS و HTML است و جاوااسکریپت جدیدی ندارد؛ جدول، فرم و Schema همان ماژول‌های قبلی‌اند. ۵۷ صفحهٔ آماده در templates/admin/ و چهار مجموعهٔ مستقل با شخصیت متفاوت در templates/crm، finance، shop و projects (هرکدام ۶ صفحه) هست.
<div ui="admin">
<aside id="admin-nav" popover aria-label="منوی اصلی">
<a ui="brand" href="/">پنل</a>
<nav ui="sidebar-nav"><ul><li><a href="/" aria-current="page">داشبورد</a></li></ul></nav>
</aside>
<header>
<button ui="icon ghost" data-admin-menu popovertarget="admin-nav" aria-label="باز کردن منو"><bana-icon name="menu"></bana-icon></button>
<span ui="spacer"></span>
</header>
<main>
<div ui="page-header"><div><h1>کاربران</h1><p>توضیح کوتاه</p></div><div ui="actions"><a ui="primary button" href="/new">جدید</a></div></div>
<dl ui="stats"><div ui="stat"><dt>کاربران فعال</dt><dd>۱٬۲۸۴</dd><small data-trend="up">۱۲٪ بیشتر</small></div></dl>
<section ui="card"><h2>فهرست</h2>…</section>
</main>
</div>| صفت | کار |
|---|---|
| ui="admin" | پوسته: از ۶۰rem به بالا سایدبار ثابت در ستون کناری؛ در صفحه‌ی باریک، aside[popover] با دکمه‌ی popovertarget باز می‌شود (بدون JavaScript، با بستن با Escape و کلیک بیرون). پهنا با --bana-admin-sidebar. |
| ui="page-header" | عنوان، توضیح، مسیر (breadcrumb) و ui="actions". |
| ui="stats" / ui="stat" | شبکه‌ی خودکار کارت آمار؛ data-trend="up|down" روی small. |
| ui="toolbar" | نوار فیلتر بالای جدول. |
| ui="auth" | صفحه‌ی تک‌کارتی برای ورود/بازیابی. |
Admin Kit کامل: ۵۱ صفحه
بسته‌ی ادمین جداست تا بسته‌ی اصلی سبک بماند: bana-admin.min.css (حدود ۶٫۵ کیلوبایت gzip) و bana-admin.js (حدود ۲۶ کیلوبایت gzip، بالای bana.js). صفحه‌ها در templates/admin هستند و با npm run admin ساخته می‌شوند.
سبک‌ها و رنگ منو
ظاهر کل پنل با دو صفت روی <html> عوض می‌شود؛ هر دو فقط توکن‌های CSS را تغییر می‌دهند و در پنل «ظاهر» هر صفحه هم انتخاب‌شدنی‌اند (و در مرورگر یادآوری می‌شوند).
| صفت | مقدارها |
|---|---|
| data-skin | flat (تخت، بدون سایه) · soft (گوشه‌گرد و شناور) · bold (پررنگ) · mono (تک‌رنگ و گوشه‌دار) · glass (شیشه‌ای). بدون مقدار = کلاسیک. |
| data-sidebar | dark یا brand (رنگ برند). بدون مقدار = هم‌رنگ صفحه. |
| data-palette · data-theme · data-density | همان توکن‌های Bana (۱۰ پالت، روشن/تیره، سه تراکم). |
مجموعه‌های قالب
| پوشه | موضوع | ظاهر پیش‌فرض | صفحه‌ها |
|---|---|---|---|
| templates/crm | مشتری‌یار — فروش و ارتباط با مشتری | تخت + منوی تیره + فیروزه‌ای | ۲۱ صفحه: نمای کلی، سرنخ‌ها، معامله‌ها (کانبان)، پیش‌فاکتور و سازندهٔ آن، پیش‌بینی فروش، مشتریان، مخاطبین، شرکت‌ها، تقویم، ایمیل، کمپین، تیکت و جزئیات، عملکرد تیم، مراحل قیف، تنظیمات و… |
| templates/finance | پول‌نما — مالی شخصی | نرم + زمردی | ۲۱ صفحه: خلاصه، تراکنش‌ها، انتقال، کارت‌ها، ارز و طلا، بودجه، دسته‌ها، هدف‌های پس‌انداز، اشتراک‌ها، قبض‌ها، فاکتور، سرمایه‌گذاری، وام، مالیات، گزارش ماهانه، امنیت، تنظیمات و راهنما |
| templates/shop | بازارچه — مدیریت فروشگاه | پررنگ + منوی رنگی + انار | ۲۱ صفحه: داشبورد، سفارش و جزئیات، ثبت سفارش، سبد رهاشده، مرجوعی، پرداخت، محصولات، دسته‌ها، انبار، نظرها، کد تخفیف، بنر، ارسال، مشتریان، کارکنان، گزارش فروش، تنظیمات و… |
| templates/projects | کارگاه — مدیریت پروژه | تک‌رنگ + مرکب | ۲۱ صفحه: نمای کلی، نقشهٔ راه، زمان‌بندی، نقاط عطف، تقویم، انتشارها، بک‌لاگ، تخته، اسپرینت، جزئیات کار، ثبت زمان، بودجه، ریسک‌ها، گزارش‌ها، جلسه‌ها، بازاندیشی، دسترسی‌ها، یکپارچگی‌ها و… |
هر مجموعه حالا ۲۱ صفحه و منوی گروه‌بندی‌شده دارد (۸۴ صفحه در چهار مجموعه). اجزای تازه: بنر .ad-hero، آمار با آیکن .ad-stat-i، کاشی‌ها .ad-tiles، چیپ‌های فیلتر [data-chips] و نمودار گانت .ad-gantt.
پنج صفحهٔ تازهٔ کیت اصلی هم اضافه شد: تنظیمات و صورتحساب، مرکز اعلان‌ها، ویزارد چندمرحله‌ای (data-wizard)، مدیریت فایل و نقش‌ها و دسترسی‌ها. دکمه‌های data-toast="success|info|warning|danger" (با data-toast-message) اعلان نشان می‌دهند.
| در AdminLTE | در Bana | وضعیت |
|---|---|---|
| داشبورد ۱، ۲، ۳ | index، dashboard2، dashboard3 | کامل |
| Info box، Small box، ابزارهای کارت | ui="info-box"، ui="small-box"، data-card-tool | کامل |
| چیدمان: بالا، کادربندی، ثابت، جمع‌شده | data-layout و data-collapsed | کامل (چهار صفحه‌ی نمونه) |
| نمودارها (ChartJS، Flot، Inline) | data-chart — ۹ نوع SVG خالص | جایگزین؛ نه نسخه‌ی ChartJS (بدون بزرگ‌نمایی، تقریب و انیمیشن) |
| UI: دکمه، آیکن، لغزنده، مودال، تب، Timeline، Ribbon | ui-* (۸ صفحه) | کامل |
| فرم‌ها: عمومی، پیشرفته، ویرایشگر، اعتبارسنجی | forms-* (۴ صفحه) | کامل؛ ویرایشگر سبک است (نه Summernote) |
| Select2، Datepicker، Dual listbox، Dropzone | data-combobox، data-datepicker و data-timepicker (شمسی)، ui="transfer"، ui="upload" | معادل؛ بدون انتخاب رنگ، ماسک ورودی و Slider دوسر |
| جدول‌ها: ساده، DataTables، jsGrid | ui="data-table" | جست‌وجو/مرتب‌سازی/صفحه‌بندی؛ بدون ویرایش درجا و گروه‌بندی |
| تقویم، گالری، کانبان، ایمیل | data-calendar، data-lightbox، data-kanban، ui="mailbox" | تقویم شمسی با تعطیلات ثابت؛ تعطیلات قمری نیست |
| فاکتور، پروفایل، فروشگاه، پروژه‌ها، مخاطبین، FAQ، تماس، جست‌وجو | صفحه‌های هم‌نام | کامل (داده‌ی نمونه) |
| ورود، ثبت‌نام، قفل، بازیابی، ۴۰۴، ۵۰۰، خالی، شروع | صفحه‌های هم‌نام | کامل (احراز هویت واقعی با سرور شماست) |
| پیام و اعلان نوار بالا، منوی کاربر، نوار کنترل، تمام‌صفحه | popover بومی و ui="control" | کامل |
| Flot زنده، jVectorMap، Sparkline جی‌کوئری، Toastr، SweetAlert | — | ساخته نشد؛ Toast و Dialog خود Bana جایگزین است |
npm run serve:admin # http://localhost:4173/templates/admin/index.html
# a real demo: static pages + /api/users behind the Bana guard (CSRF, Idempotency-Key, Schema validation, strict CSP)serve-admin.mjs) فقط برای توسعه است (حافظه‌ی داخل پردازش، کوکی بدون Secure). نمودار، Tab چندصفحه‌ای و ساختار نقش/دسترسی در این نسخه نیست؛ مجوزدهی باید در سرور شما باشد.