ما هو القالب
لوحة تحكم مالية لبنك أو شركة تقنية مالية أو تطبيق للمال. هي تطبيق Next.js واحد بلا قاعدة بيانات ولا خلفية: كل رقم وبطاقة ومعاملة بيانات نموذجية في الكود، وتسجيل الدخول مؤقت يعمل في المتصفح. لا يلزم ضبط أي شيء قبل التشغيل الأول.
فيه صفحة تسجيل دخول، ونظرة عامة، وتحليلات، ومعاملات، وبطاقات، وإعدادات، وصفحة تعرض كل مكوّن واجهة قابل لإعادة الاستخدام مع أمثلة حية. يعمل بالإنجليزية والعربية، من اليمين إلى اليسار، وبوضعين داكن وفاتح.
نظرة على لوحة التحكم
التقنيات المستخدمة
| التقنية | دورها هنا |
|---|---|
| Next.js 16 (App Router) | إطار العمل، والصفحات، والبيانات الوصفية، وخادم الإنتاج |
| React 19 و TypeScript | كل المكونات وملفات المصدر |
| Tailwind CSS 4 | كل التنسيقات، مع متغيرات الألوان للوضعين الفاتح والداكن |
| next-intl | النصوص الإنجليزية والعربية، واللغة في كل عنوان |
| Redux Toolkit | المستخدم المسجَّل الدخول وحالة تسجيل الدخول |
| React Hook Form و Zod | نموذجا تسجيل الدخول والتحويل السريع وعمليات التحقق منهما |
| Recharts و react-simple-maps | المخططات وخريطة العالم |
| TanStack Table و dnd-kit | جدول المعاملات وبطاقات الإحصاءات القابلة للسحب |
| Radix UI و Lucide و Tabler Icons | القوائم والحوارات والتبويبات التي يسهل الوصول إليها، والأيقونات |
كل اعتمادية مثبّتة على إصدار محدد في package.json، والملف yarn.lock مرفق، فيحصل تثبيتك على الإصدارات نفسها التي اختُبر بها القالب.
محتويات التنزيل
يُفك ضغط ملف ZIP في مجلد اسمه dashboard-template-1:
| المسار | ما هو |
|---|---|
src/ | التطبيق: الصفحات، والشريط الجانبي والترويسة، والمخططات والودجات، وتسجيل الدخول وإعداد اللغات |
messages/ | كل نص ظاهر، بالإنجليزية والعربية |
public/ | الشعار، وتصاميم البطاقات، والصور الرمزية النموذجية |
Dockerfile, .dockerignore | ابنِ التطبيق في صورة تقدّمه على المنفذ 3030 |
.env.example | الإعدادات الاختيارية، مع قيمها الافتراضية |
README.md | دليل الإعداد والتخصيص |
LICENSE.md | رخصتك التجارية |
package.json, yarn.lock, .yarnrc.yml | الاعتماديات وإعداد Yarn 4 |
أمور تحسن معرفتها قبل البناء عليه
- تسجيل الدخول مؤقت: حساب واحد يُفحص في المتصفح. اربطه بواجهتك البرمجية قبل الإطلاق.
- الأرقام والبطاقات والأشخاص والمعاملات بيانات نموذجية لتستبدلها ببياناتك، أو ببيانات من واجهتك البرمجية.
- الأزرار التي ستغيّر بيانات على الخادم، مثل إرسال تحويل أو إضافة معاملة، لا تحفظ شيئًا حتى تربطها.
- يبدأ في الوضع الداكن، بلون العلامة البرتقالي. تتوفر أربع سمات ألوان، وتختار إحداها بسطر واحد.
تأتي لوحة التحكم بالإنجليزية والعربية. يبدأ كل عنوان برمز لغته، مثل /en/dashboard أو /ar/dashboard، وتُعرض الصفحات العربية من اليمين إلى اليسار.
على Windows، استخدم PowerShell أو Git Bash لتنفيذ الأوامر الواردة في هذه الأدلة.