داشبورد Panelify

معرفی

Panelify یک داشبورد آماده و قابل شخصی‌سازی است که پس از دریافت سورس‌کد آن، می‌توانید متناسب با نیاز پروژه خود آن را تنظیم و توسعه دهید. این داشبورد برای پروژه‌های فارسی و انگلیسی طراحی شده و از ساختار ماژولار و منعطفی برخوردار است.

---

ساختار Config

برای شروع شخصی‌سازی داشبورد، ابتدا باید تنظیمات اولیه را در دایرکتوری Config انجام دهید.

Global.json

در این فایل، اطلاعات پایه و سراسری داشبورد تعریف می‌شود:

• Colors لیست رنگ‌های اصلی داشبورد که در بخش‌های مختلف استفاده می‌شوند.

• Main_info شامل تنظیمات عمومی مانند:

  • زبان پیش‌فرض داشبورد
  • جهت نمایش (RTL برای داشبورد فارسی و LTR برای داشبورد انگلیسی)

• Auth تنظیمات مربوط به احراز هویت:

  • اگر مقدار enable برابر با true باشد و مقدار token_key در کوکی‌ها ذخیره نشده باشد، کاربر به‌صورت خودکار به صفحه احراز هویت هدایت می‌شود.

---

Sidebar.json

این فایل مربوط به تنظیمات سایدبار داشبورد است.

Main_info

در این بخش موارد زیر تعریف می‌شوند:

• عنوان اصلی داشبورد (مثلاً: «مدیریت وبسایت کندو»)
• لوگوی حالت Dark Mode و Light Mode

نکته: فایل لوگو باید حتماً داخل دایرکتوری public قرار بگیرد.

Buttons

برای تعریف دکمه‌های سایدبار، باید از بخش buttons استفاده کنید. هر دکمه شامل تنظیمات زیر است:

• title عنوان دکمه

• icon آیکن دکمه که نام آن باید از پکیج react-icons انتخاب شود. در صورتی که آیکن نمایش داده نشد یا با خطا مواجه شدید، باید آن را در فایل iconMapper.js ایمپورت کنید.

• path مسیر صفحه‌ای که دکمه به آن هدایت می‌شود.

• family گروه یا خانواده دکمه. اگر چند دکمه دارای یک family مشترک باشند (مثلاً «کاربران»)، زیر یک عنوان گروه‌بندی می‌شوند.

• uniqID شناسه یکتا برای هر دکمه که باید با سایر دکمه‌ها متفاوت باشد.

• subItems لیست دکمه‌های زیرمجموعه. در صورتی که یک دکمه دارای فرزند باشد، می‌توانید برای هر آیتم مقادیر title و path را تعریف کنید.

نکته مهم: برای هر صفحه‌ای که ایجاد می‌کنید، باید یک فایل در دایرکتوری pages بسازید، آن را در فایل App.jsx ایمپورت کنید و در بخش Routes تعریف نمایید. در غیر این صورت، صفحه موردنظر در دسترس نخواهد بود.

---

احراز هویت صفحات

اگر می‌خواهید یک صفحه شامل احراز هویت باشد، باید کامپوننت مربوط به آن صفحه را در بخش Route زیرمجموعه‌ی AuthGuard قرار دهید.

---

کامپوننت‌ها

Panelify شامل بیش از 100 کامپوننت شخصی‌سازی‌شده است که فرآیند توسعه داشبورد را سریع‌تر و حرفه‌ای‌تر می‌کند.

Topbar.js

کامپوننت نوار بالایی داشبورد که معمولاً در فایل layout.js استفاده می‌شود. به‌صورت پیش‌فرض:

• یک تاپ‌بار Sticky ایجاد می‌کند
• همراه با اسکرول صفحه حرکت می‌کند
• امکان افزودن کامپوننت‌های دلخواه درون تاپ‌بار را فراهم می‌سازد

TopBarSearchButton

این کامپوننت یک دکمه جستجو به همراه یک مودال از پیش تعریف‌شده ایجاد می‌کند که می‌توانید آن را به‌دلخواه خود شخصی‌سازی کنید.

TopbarAlarms

نمایش اعلان‌های مربوط به حساب کاربری (ادمین یا کاربر) به‌صورت Popover در داشبورد.

TopBarThemeButton

دکمه تغییر تم داشبورد بین حالت Dark Mode و Light Mode. همچنین می‌توانید بر اساس این کامپوننت، سیستم تغییر تم اختصاصی خودتان را پیاده‌سازی کنید.

ProfileButton

کامپوننت نمایش پروفایل کاربر که امکانات زیر را فراهم می‌کند:

• نمایش تصویر پروفایل
• دسترسی به تنظیمات حساب کاربری
• خروج از حساب کاربری و سایر عملیات مرتبط

---

ImageUploader Component

معرفی

کامپوننت ImageUploader برای آپلود تصاویر در داشبورد طراحی شده است و امکان آپلود خودکار تصویر روی سرور یا دریافت دستی فایل را در اختیار شما قرار می‌دهد.

نحوه استفاده

<ImageUploader
  apiUrl=""
  onUploaded={setFile}
  manualUpload={false}
  defaultPreview={false}
/>

Props

• apiUrl آدرس API جهت آپلود خودکار تصویر روی سرور.

• onUploaded یک state یا تابع callback که پس از آپلود (یا انتخاب فایل) اطلاعات فایل را دریافت می‌کند.

• manualUpload اگر مقدار آن true باشد، تصویر به‌صورت خودکار روی سرور آپلود نمی‌شود و فقط اطلاعات فایل از طریق onUploaded برگردانده می‌شود تا بتوانید به‌صورت دستی از آن استفاده کنید.

• defaultPreview یک URL تصویر دریافت می‌کند و برای نمایش تصویر پیش‌فرض (مثلاً در حالت ویرایش) استفاده می‌شود.

---

Button Component

معرفی

کامپوننت Button برای ایجاد دکمه‌های قابل شخصی‌سازی در داشبورد استفاده می‌شود.

نحوه استفاده

<Button
  Title="عنوان دکمه"
  Icon={<Icon />}
  Size="fit"
  Color="#f33333"
  onClick={() => alert('HI')}
/>

Props

• Title متن یا محتوای دکمه. می‌تواند یک string ساده، تگ HTML یا حتی یک کامپوننت React باشد.

• Icon آیکن دکمه. در صورتی که این مقدار تعریف نشود، دکمه بدون آیکن نمایش داده می‌شود. آیکن باید از پکیج react-icons باشد.

• onClick تابعی که هنگام کلیک روی دکمه اجرا می‌شود.

• Color رنگ دکمه (به‌صورت HEX یا مقدار CSS معتبر).

• Size تعیین‌کننده اندازه دکمه:

  • fit : دکمه به اندازه محتوای داخلی خود نمایش داده می‌شود
  • screen : دکمه تمام عرض کانتینر والد را اشغال می‌کند

دیگر دکمه ها شامل EmptyButton, TextButton, IconButton هستند که به ترتیب

• EmptyButton یک دکمه با پس زمینه خالی که فقط رنگ روی متن و Border آن اعمال میشود

• TextButton یک دکمه که نه Border دارد نه رنگ پس زمینه و متن خالی است

• IconButton تنها شامل یک آیکن میشود (برای دکمه ویرایش ، حذف و ... در جدول ها بیشتر کاربرد دارد)

Table Component

معرفی

جهت پیاده سازی جدول درون پروژه میتوانید از کامپوننت Table استفاده کنید ، این جدول قابلیت sort ، Render و ... را درون خود دارد که میتوانید به صورت کامل نیازهای شما برای پروژه را تامین کند.

<Table 
  data = {}
  columns = {}
/>

• columns این پراپ ستون های جدول را میسازد که بخش بسیار مهمی است زیرا میتواند شکل نمایش دیتاها ، مرتب سازی و ... را تعریف کند

   const columns = [
            { key: "id", label: "شناسه", sortable: true },
            { key: "title", label: "عنوان مقاله", sortable: true },
            { key: "category", label: "دسته بندی", sortable: true },
            { key: "date", label: "تاریخ انتشار", sortable: true },
            { key: "views", label: "بازدید", sortable: true },
            { key: "likes", label: "پسندیده", sortable: true, render: (value) => <span className="text-blue-600 font-medium">{value}</span>, },
           
            {
                key: "ops",
                label: "عملیات",
                type: "actions",
                actions: [
                  { label: <FaPen/>, onClick: (row) => console.log("view", row), className: "px-2 py-1 rounded-lg bg-green-500/20 text-green-600" },
                  { label: <FaTrash/>, onClick: (row) => console.log("delete", row), className: "px-2 py-1 rounded-lg bg-red-500/20 text-red-600" },
                ],
              },
            ];

در این بخش ستون ها شامل key یا همان شناسه ستون , label یا همان عنوان ستون و sortable که مقدار آن false یا true است میشود که در صورت true بودن امکان مرتبط سازی را به جدول میدهیم

actions زمانی که میخواهیم درون ستون دکمه ای تعریف کنیم که با کلیک بر روی آن یک تابع صدا زده شود از این بخش استفاده میکنیم render زمانی که میخواهیم شکل نمایش مقادیر درون ستون را تغییر بدهیم ، به عنوان مثال در صورتی که مقدار آن برابر "درحال پردازش" بود رنگ آن به نارنجی تغییر پیدا کند و ...

• data این پراپ لیست ردیف های جدول را تعریف میکند که با مثال زیر میتوانند پیاده سازی شوند

  const dataList = [
                { id: "#95421", title: "بهترین داشبوردهای React در سال 2025", category: "React", date: "1404/05/01", views: 2450, likes: 34 },
                { id: "#95422", title: "مقایسه React و Vue برای پروژه‌های واقعی", category: "Frontend", date: "1404/05/02", views: 1980, likes: 27 },
    ];

ModalComponent

امکان ایجاد مودال شخصی شما وجود دارد و آن هم در ساده ترین حالت ممکن برای ایجاد یک مودال تنها کافی است از چند کامپوننت استفاده کنید

• ModalComponent هدف این کامپوننت پیاده سازی کانیتر اصلی مودال است
• Modal این کامپوننت اصلی مودال است که درون ModalComponent قرار میگیرد
• ModalHeader هدف مودال که تایتل اصلی مودال + دکمه بستن مودال به صورت خودکار در آن درج میشود

به مثال زیر دقت کنید

  <ModalComponent>
    <Modal>
      <ModalHeader title = "مودال"/>
    </Modal>
  </ModalComponent>

الان ما یک مودال ساده داریم اما چگونه آن را به نمایش در بیاوریم؟ اینجا است که Context های پنلیفای بدرد ما میخورد

  const {openModal, closeModal} = useModal()

شما میتوانید با ایمپورت کردن useModal و مثال بالا تابع openModal را داشته باشید ، درون این تابع تنها کافی است مودال خود را قرار بدهید

  import useModal from "components/modal"

  const Page = ()=>{
      const {openModal, closeModal} = useModal()

      // باز کردن مودال از طریق تابع openModal
      openModal(<MyModal/>)
  }

  const MyModal = ()=>{
    return (
      <ModalComponent>
    <Modal>
      <ModalHeader title = "مودال"/>
    </Modal>
  </ModalComponent>
    )
  }