كيف تبني لوحة تحكم مالية بـ Next.js خطوة بخطوة

يوضح هذا الدليل كيف تبني لوحة تحكم مالية (فينتك أو تمويل شخصي) بـ Next.js، بالإنجليزية والعربية، انطلاقًا من قالب Financial Dashboard من Aniq UI. ستشغّله، وتضيف علامتك التجارية، وتستبدل بيانات العينة ببياناتك، وتنشره على الإنترنت، وأنت تعرف بوضوح أي الأجزاء ستربطها بنفسك.

هذه النقطة الأخيرة مهمة، لذلك نذكرها من البداية: القالب واجهة أمامية فقط. ليس فيه قاعدة بيانات ولا خادم خلفي ولا تسجيل دخول حقيقي. كل رصيد وبطاقة ومعاملة تراها على الشاشة هي بيانات عينة مكتوبة في الكود. ما تحصل عليه واجهة جاهزة تعمل، ومهيأة لواجهة API الخاصة بك. توضح الخطوات أدناه أين تُوصَل هذه الواجهة وماذا تفحص في كل مرحلة.

قبل أن تبدأ: قرارات يجب اتخاذها

من السهل أن تبدأ واجهة مالية ومن الصعب أن تنهيها إذا بقيت الأسئلة الكبيرة مفتوحة. أجب عنها أولًا على الورق.

• من أين تأتي البيانات؟ القالب لا يحتوي على أي بيانات. تحتاج إلى واجهة API خاصة بك، أو خدمة تستخدمها بالفعل، تعيد الأرصدة والبطاقات والمعاملات. قرر من يبنيها ومتى، فالشاشات ستنتظرها.
• كيف يسجّل الناس الدخول؟ تسجيل الدخول المرفق بديل مؤقت يعمل داخل المتصفح. اختر الطريقة الحقيقية (حسابات خاصة بك أو مزود هوية أو غير ذلك) وحدد من يملك الجلسة على الخادم.
• ما الإجراءات التي يجب أن تعمل فعلًا من اليوم الأول؟ البحث في المعاملات وتصديرها يعملان أصلًا في المتصفح. أما إضافة معاملة وإضافة بطاقة وإرسال تحويل فلا تحفظ شيئًا بعد. اكتب قائمة بما ستُبقيه وما ستخفيه.
• ما اللغات وما اتجاه القراءة؟ الإنجليزية والعربية مرفقتان، والصفحات العربية تُعرض من اليمين إلى اليسار. لغة ثالثة ممكنة لكنها تحتاج بعض التعديلات، فقرر ذلك مبكرًا.
• ما القواعد المتعلقة ببيانات الأموال؟ التعامل مع الأرصدة وبيانات البطاقات قد يرتبط بمتطلبات قانونية وأمنية ومتطلبات شركاء تختلف بحسب البلد الذي تعمل فيه. القالب لا يقرر ذلك نيابة عنك. تحدث إلى شريكك في الدفع أو المصرف، وإلى الجهة المنظِّمة إن لزم، قبل أن تصل أي بيانات حقيقية إلى الشاشات.
• أين سيُستضاف؟ يصلح Vercel أو خادم Node.js أو مضيف Docker. اختر واحدًا قبل أن تشتري نطاقًا.

المطلوب

Kestrel Budget تطبيق ميزانية للمستقلين الذين تصل دخولهم على دفعات. يقرأ العملاء بالإنجليزية أو بالعربية. يطلب الفريق ما يلي:

• شاشة واحدة تعرض الرصيد وبطاقات الدفع وآخر المعاملات فور تسجيل الدخول.
• صفحة معاملات يستطيع فيها المستقل البحث والتصفية بالتاريخ وتصدير ملف لمحاسبه.
• رسوم بيانية تقارن الدخل بالمصروفات وتقسّم الإنفاق إلى فئات، لأن أشهر المستقل تتفاوت كثيرًا.
• صفحة بطاقات يستطيع فيها العميل قفل بطاقة ورؤية تفاصيلها.
• الإنجليزية والعربية، مع تخطيط النسخة العربية من اليمين إلى اليسار.
• اسم الشركة وشعارها ولون علامتها، في الوضعين الفاتح والداكن.
• تسجيل دخول حقيقي وبيانات حقيقية من واجهة API الخاصة بـ Kestrel قبل أن يراها أي عميل.

كيف يغطي القالب المطلوب

الحاجة	أين توجد	ما الذي تستخدمه
الرصيد والبطاقات وآخر النشاط	الموقع (تطبيق Next.js)	صفحة نظرة عامة (Overview) على /en/dashboard
البحث والتصفية والتصدير	الموقع	صفحة Transactions مع نطاق التاريخ ونافذة التصفية وتصدير CSV
الدخل مقابل المصروفات والفئات	الموقع	صفحة Analytics برسوم Recharts يمكن تنزيلها بصيغة PNG
التحكم في البطاقات	الموقع؛ والحفظ يحتاج واجهة API الخاصة بك	صفحة Your Cards مع القفل والحذف وإظهار الرقم
الإنجليزية والعربية	الموقع	العنوانان /en و/ar، والملفات في messages/
العلامة التجارية والأوضاع	الموقع	ملفات الرسائل، logo.svg، DEFAULT_THEME_COLOR
بيانات حقيقية وتسجيل دخول حقيقي	واجهة API الخاصة بك (غير مرفقة)	ملفات بيانات العينة بجانب كل عنصر؛ وكود تسجيل الدخول الذي تستبدله

قالب جاهز أم بناء من الصفر أم أداة مستضافة

هناك ثلاث طرق للوصول إلى لوحة تحكم مالية، والطريقة المناسبة تعتمد على فريقك.

من الصفر. تتحكم في كل التفاصيل، لكنك أيضًا تصمم وتبني التخطيط والرسوم والجداول والبطاقات القابلة للسحب والوضعين الفاتح والداكن والنسخة من اليمين إلى اليسار قبل أن تصل إلى ما يخص منتجك فعلًا. هذا خيار معقول إذا كانت الواجهة نفسها هي ميزتك التنافسية.

لوحة تحكم مستضافة أو أداة ذكاء أعمال. تتصل هذه الأدوات بمصادر البيانات وترسم الرسوم بسرعة، ولا تحتاج إلى إدارة الاستضافة. المقابل أن النتيجة تشبه الأداة أكثر مما تشبه منتجك، وغالبًا يلاحظ العملاء حدودها في العلامة والتخطيط، وقد لا تدعم تجربة عربية من اليمين إلى اليسار. راجع أسعارها وخيارات التضمين فيها وطريقة التصدير قبل أن تعتمد عليها.

قالب مع الكود المصدري. تحصل على الواجهة الجاهزة، وتملك الكود، وتستضيفه حيث تشاء. الثمن هو العمل الذي رأيته في القرارات أعلاه: أنت توفر واجهة API وتسجيل الدخول وأعمال الامتثال. بالنسبة لفريق لديه خادم خلفي أو ميزانية لبنائه، هذا التقسيم فعّال، لأن ما يبقى هو ما لا يستطيع غيرك إنجازه.

لدى Kestrel مطور واحد وخطة لواجهة API صغيرة، لذلك تختار القالب. أما الفريق الذي لا يضم مطورًا فعليه أن ينظر في خيار مستضاف.

مثال على خطة إطلاق أسبوعًا بأسبوع

هذا الجدول مثال لـ Kestrel، وليس وعدًا بالمدة التي سيستغرقها مشروعك.

• الأسبوع 1، التشغيل والمراجعة. شغّل القالب، وتصفح كل صفحة باللغتين وبالوضعين، واحسم القرارات المذكورة أعلاه.
• الأسبوع 2، العلامة والتقليص. غيّر الاسم والشعار واللون، وترجم النصوص الجديدة، وأخفِ الصفحات والأزرار التي لن تبنيها.
• الأسبوع 3، اربط أول البيانات. استبدل المستخدم المسجَّل والمعاملات باستدعاءات حقيقية لواجهة API. اترك الباقي على بيانات العينة الآن.
• الأسبوع 4، اربط الباقي وسجّل الدخول بشكل صحيح. البطاقات وأرقام التحليلات وتسجيل الدخول الحقيقي، مع التحقق من الجلسة على الخادم.
• الأسبوع 5، الاختبار والنشر. بناء الإنتاج، وفحص الهاتف وسطح المكتب، وقائمة تحقق الإطلاق، ثم النشر.

خطوة بخطوة

1. حدّد ما ستربطه بنفسك

قبل أن تفتح الكود، اكتب الأمور الثلاثة التي يتركها القالب لك: من هو المستخدم المسجَّل، ومن أين تأتي الأرقام، وماذا يحدث حين يضغط العميل زرًا يغيّر شيئًا. في حالة Kestrel هذا يعني خدمة لتسجيل الدخول، وواجهة API تعيد الأرصدة والبطاقات والمعاملات، ونقاط نهاية (endpoints) للإجراءات (إضافة معاملة، حفظ الإعدادات).

يعطيك القالب الشاشات والرسوم والنماذج وفحوصاتها. وأنت تعطيه البيانات. هذا التقسيم مفيد، لأنك تستطيع بناء واجهة API بالسرعة التي تناسبك بينما تبدو الواجهة مكتملة منذ الآن.

التحقق: لديك قائمة قصيرة مكتوبة بعنوان "ما أربطه أنا"، مع مسؤول عن كل بند وترتيب تقريبي. ما يسوء عادة: تفترض الفرق أن شاشة تسجيل الدخول تعمل فعلًا، ثم تكتشف الفجوة متأخرة.

2. شغّله على جهازك

ثبّت Docker Desktop، ثم اتبع هذه الخطوات الفرعية.

2a. التنزيل. من حسابك في Aniq UI، افتح قوالبي (My templates) ونزّل ملف ZIP.

انظر إلى مكان زر التنزيل في صفحة قوالبي.

2b. فك الضغط وافتح المجلد. فك ضغط الأرشيف وافتح الطرفية (terminal) داخل المجلد dashboard-template-1.

انظر إلى المسار في الطرفية: كل الأوامر اللاحقة تُنفَّذ من هذا المجلد.

2c. ابنِ الصورة ثم شغّل حاوية.

docker build -t financial-dashboard .
docker run -p 3030:3030 financial-dashboard

توقع أن يستغرق البناء الأول بضع دقائق، ويلزم اتصال بالإنترنت، لأن تثبيت الاعتماديات وبناء التطبيق يحدثان داخل الصورة.

انظر إلى سجل البناء، فهو ينتهي حين تصبح الصورة جاهزة للتشغيل.

2d. افتحه. انتقل إلى localhost:3030/en/login وسجّل الدخول بالبريد admin@dashboard.com وكلمة المرور Admin@123. إذا كان المنفذ 3030 مشغولًا، غيّر الرقم الأول في الخيار -p واترك الثاني كما هو، مثل docker run -p 3041:3030 financial-dashboard.

تفضّل Node.js؟ ثبّت الإصدار 20.9 أو أحدث، ونفّذ corepack enable مرة واحدة، ثم yarn install وyarn dev. المشروع يثبّت Yarn 4، فاستخدم Yarn بدل npm.

ما الذي تتحقق منه: تفتح صفحة النظرة العامة وفيها رصيد وكومة بطاقات وقائمة معاملات. ما يسوء عادة: Docker غير مشغَّل (شغّل Docker Desktop وانتظر حتى يجهز المحرك)، أو منفذ مشغول، أو أن Yarn يرد بالإصدار 1.22 لأن Corepack غير مفعّل. لإيقاف الحاوية اضغط Ctrl+C، أو استخدم docker stop مع المعرّف الظاهر في docker ps. التعديلات لا تصل إلى صورة مبنية، لذلك أعد بناءها بعد تغيير أي ملف.

انظر كيف تُرتَّب الصفحة على شكل بنتو من العناصر: بطاقات ومعاملات وإحصاءات وخريطة ورسم للمحفظة.

3. تجوّل في كل صفحة

يضم القالب هذه الصفحات، وكل منها تحت /en و/ar:

• النظرة العامة (Overview): شاشة الوصول بعد تسجيل الدخول، وفيها نموذج تحويل سريع، والرصيد فوق كومة بطاقات الدفع، وقائمة متابعة للأسهم، وأحدث المعاملات، ورسم إحصائي، وخريطة للتحويلات، ورسم للمحفظة.
• التحليلات (Analytics): أربعة أرقام رئيسية، ثم رسوم للدخل مقابل التكاليف، وللإنفاق بحسب الفئة، وللنشاط على مدار الأسبوع، مع جدول بأحدث المعاملات أسفلها.
• المعاملات (Transactions): السجل الكامل، مع البحث والتصفية والفرز والتقسيم إلى صفحات وزر للتصدير.
• بطاقاتك (Your Cards): قائمة البطاقات مع تفاصيل البطاقة المحددة.
• الإعدادات (Settings): الملف الشخصي والأمان والإشعارات والتفضيلات.
• مكونات الواجهة (UI Components): كل عنصر قابل لإعادة الاستخدام، مع أمثلة حية.

انظر إلى الشريط الجانبي، فهو خريطة كل ما ستضيف إليه علامتك وتترجمه وتربطه.

قرر أي الصفحات ستُبقي. تُبقي Kestrel كل الصفحات، لكن أداة ميزانية بلا منتج بطاقات يمكنها حذف صفحة البطاقات ورابطها في الشريط الجانبي.

انظر إلى صف الأرقام في الأعلى ولوحة تفاصيل البطاقة المحددة.

انظر إلى التبويبات في صفحة المكونات: الشاشات الجديدة التي تبنيها لاحقًا تستطيع إعادة استخدام أي من هذه العناصر. أضف ?tab= ومعرّف تبويب مثل tables لفتح تبويب مباشرة.

4. اجعله باسم Kestrel

شغّل yarn dev أثناء التعديل، وستُحدَّث الصفحة مع كل حفظ. هذه هي الأماكن التي تغيّرها:

• الاسم وعنوان التبويب والوصف: كتلة Metadata في messages/common/en.json وar.json.
• الاسم في صفحتي تسجيل الدخول والترحيب: Login.title وHero.title في messages/auth/.
• الشعار: public/assets/images/icons/logo.svg. يستخدمه الشريط الجانبي وزاوية كل بطاقة دفع.
• لون العلامة: DEFAULT_THEME_COLOR في src/Demo/ThemeColorSwitcher/themes.ts. يأتي القالب بأربعة أوضاع لونية: البرتقالي (الافتراضي) والأزرق والذهبي والفضي.
• الأيقونة المصغرة (favicon): src/app/favicon.ico. وسطر الاعتماد في التذييل: src/app/[locale]/dashboard/layout.tsx.

شعار العينة رمادي فاتح، لذلك يعتّمه الشريط الجانبي في الوضع الفاتح كي يبقى ظاهرًا. إذا كان شعارك داكنًا أصلًا، فاحذف brightness-50 من الفئات في src/layouts/Sidebar/components/SidebarLogo.tsx. تختار Kestrel اللون الأزرق وتضبط DEFAULT_THEME_COLOR ليطابقه؛ ولاستخدام لون مخصص بالكامل، غيّر قيم أحد الأوضاع في الملف نفسه واترك قيمة id الخاصة به في الثابت.

يغيّر لون التمييز شكل البطاقات وإبرازات الرسوم والأزرار وعنصر القائمة النشط معًا. تعرض هذه اللقطات الثلاث النظرة العامة نفسها بالأزرق والذهبي والجرافيت.

انظر إلى اللون الأزرق على البطاقة وإبرازات الرسوم وعنصر الشريط الجانبي النشط.

انظر كيف تأخذ العناصر نفسها اللون الذهبي، بينما تبقى الخلفيات المحايدة كما كانت.

انظر إلى اللون الجرافيتي الأهدأ، وهو يناسب علامة أكثر تحفظًا.

الوضعان الفاتح والداكن كلاهما مكتمل. تبدأ لوحة التحكم في الوضع الداكن، وزر الشمس والقمر يبدّل بينهما، ويتذكر المتصفح اختيار كل شخص. وهذا الاختيار نفسه، مع اللغة، موجود في Settings ثم Preferences.

انظر إلى التبويبات في أعلى الإعدادات: الملف الشخصي والأمان والإشعارات والتفضيلات.

انظر إلى النسخة الفاتحة من النظرة العامة، فهي تستخدم المكونات نفسها المستخدمة في الداكنة. الخلفيات والحدود وألوان النص موجودة في src/styles/theme.css: القيم الفاتحة في :root والداكنة في .dark.

ما الذي تتحقق منه: افتح لوحة التحكم في الوضعين بعد تغيير لون العلامة. ما يسوء عادة: لون جديد لا يظهر. حين يكون وضع العرض التجريبي (demo mode) مفعّلًا، يحفظ مبدّل ألوان عائم اختياره في المتصفح ويتغلب هذا الاختيار على الكود. امسح بيانات الموقع، أو أبقِ وضع العرض التجريبي مغلقًا.

5. استبدل بيانات العينة، عنصرًا واحدًا في كل مرة

لكل عنصر ملف بيانات عينة خاص به، موجود بجانب الشاشة التي تعرضه. وهذا مقصود: تستطيع تحويل جدول المعاملات إلى واجهة API الخاصة بك هذا الأسبوع وترك خريطة العالم لوقت لاحق. ترتيب عملي لـ Kestrel هو: المستخدم المسجَّل، ثم المعاملات، ثم البطاقات، ثم أرقام التحليلات.

اعرف ما يعمل أصلًا دون خادم حتى لا تعيد بناءه. البحث في المعاملات وفرزها وتقسيمها إلى صفحات ونطاق التاريخ ونافذة التصفية كلها تعمل في المتصفح. وكذلك تصدير CSV وPNG، وإعادة ترتيب بطاقات الأرقام الرئيسية بالسحب (يتذكر المتصفح الترتيب)، وقفل البطاقة أو حذفها حتى إعادة التحميل التالية.

واعرف ما لا يحفظ شيئًا بعد. Add Transaction وAdd Card والتحويل السريع والتحويل العاجل وSave Changes في الإعدادات تفحص ما يكتبه العميل ثم تتوقف. هذه هي الأماكن الدقيقة التي تذهب إليها استدعاءات API الخاصة بك. تستخدم النماذج React Hook Form مع Zod، لذلك فحوصات الحقول مكتوبة أصلًا.

هناك تفصيلان يوفران الوقت. معاملات العينة مؤرَّخة نسبةً إلى اليوم، فأحدثها دائمًا حديثة، وتفتح صفحة المعاملات على نافذة مدتها 30 يومًا. حين تربط بيانات حقيقية، تأكد أن تواريخك تقع داخل النطاق الذي تفتح عليه الصفحة، وإلا بدا الجدول فارغًا.

انظر إلى أزرار النطاق في رسم الإيرادات (يومي وأسبوعي وشهري وسنوي): ستحتاج واجهة API إلى الرد على كل نطاق، أو يمكنك حذف ما لا تدعمه.

انظر إلى الرسوم في الوضع الفاتح: فهي تتبع لون العلامة والوضع، وتسمياتها مترجمة.

بالنسبة لـ Kestrel، يبدو ترتيب الربط هكذا، ويمكنك نسخ النمط لمنتجك:

1. المستخدم. استدعاء واحد يعيد اسم الشخص المسجَّل وصورته، فتتوقف قائمة الترويسة عن عرض الحساب الافتراضي.
2. المعاملات. قراءة واحدة للجدول تحترم نطاق التاريخ، مع الأرقام الرئيسية فوقه.
3. البطاقات. قراءة للقائمة ولتفاصيل البطاقة المحددة، ثم عمليات كتابة للقفل والحذف.
4. التحليلات. سلسلة الإيرادات والمصروفات لكل نطاق، وتوزيع الفئات، والنشاط الأسبوعي.
5. الإعدادات. حفظ الملف الشخصي والتفضيلات، فيصبح لزر Save Changes أخيرًا أثر.

طريقة معقولة لتخطيط واجهة API هي قراءة واحدة لكل عنصر، وكتابة واحدة لكل إجراء تُبقيه. ابدأ بالقراءات لأنها تفعّل الشاشات، ثم أضف الكتابات بالترتيب الذي يحتاجه العملاء. بيانات العينة وصف جاهز للشكل الذي تتوقعه كل شاشة.

ما الذي تتحقق منه: بعد استبدال عنصر واحد، أعد التحميل باللغتين ومع نتيجة فارغة، لترى الحالة الفارغة. ما يسوء عادة: واجهة API تعيد المبالغ كنص، فينكسر الفرز. أعد أرقامًا ونسّقها في الصفحة.

6. استبدل تسجيل الدخول المؤقت

الحساب الذي استخدمته في الخطوة 2 يُفحص داخل المتصفح، وبياناته موجودة في الكود الذي ينزّله كل زائر. كل صفحة تحت /dashboard تحوّل من لم يسجّل الدخول إلى /login، لكن هذا الفحص أيضًا يعمل في المتصفح. في منتج مالي هذا بديل مؤقت وليس حماية.

قبل أن يصل عملاء حقيقيون أو بيانات أموال حقيقية إلى الموقع، اربط تسجيل الدخول بواجهة API خاصة بك، وتحقق من الجلسة على جانب الخادم. يحتفظ Redux Toolkit بالمستخدم المسجَّل في التطبيق، وتعرض قائمة الترويسة المستخدم الذي تعيده واجهة API الخاصة بك (وهي تعرض اليوم الحساب الافتراضي John Carter من src/config/demo-account.ts). تتضمن وثائق القالب الكود الذي يجب تغييره ومثالًا عمليًا لذلك. أبقِ الأسرار على خادمك: أي قيمة NEXT_PUBLIC_ يمكن لكل زائر قراءتها.

أزرار Apple وGoogle وRemember me وForgot password لا تفعل شيئًا بعد، لذا قرر هل تحتاجها طريقة تسجيل الدخول لديك. احذف ما لا تحتاجه.

ما الذي تتحقق منه: افتح نافذة خاصة وزر عنوانًا داخل لوحة التحكم مباشرة. يجب أن تصل إلى صفحة تسجيل الدخول. ما يسوء عادة: ينجح التحويل في المتصفح فتبدو الصفحة محمية بينما البيانات خلفها غير محمية. احمِ واجهة API دائمًا.

7. افحص النسخة العربية

افتح /ar. يضبط التخطيط lang="ar" وdir="rtl"، فينتقل الشريط الجانبي إلى الحافة اليمنى وتنعكس كل بطاقة وجدول وقائمة. يستخدم النص العربي خط Noto Sans Arabic وتستخدم الإنجليزية خط Inter. عند فتح / يُحوَّل الزائر إلى /ar إذا كان متصفحه يفضّل العربية، وإلى /en في غير ذلك.

النصوص مقسَّمة بحسب الصفحة داخل messages/، وفي كل مجلد ملفان en.json وar.json. عند إضافة عناصر جديدة استخدم فئات منطقية مثل ms-2 وpe-4 وtext-start؛ أما الفئات المرتبطة بجهة معينة مثل ml-2 فتكسر الصفحة من اليمين إلى اليسار. اختبر تصدير CSV بالعربية أيضًا. يفتح Excel الملف والنص العربي سليم، وتبدأ المبالغ بـ + أو -.

ما الذي تتحقق منه: كل صفحة غيّرتها، في /ar، بأسماء بطول حقيقي وأرقام طويلة. ما يسوء عادة: نص أُضيف إلى en.json فقط، فيترك مفتاحًا ناقصًا في العربية.

8. نفّذ فحوصات ما قبل الإطلاق

ابنِ نسخة الإنتاج وانظر إليها كما سيراها العميل:

yarn build
yarn start

افتحها على هاتف وعلى حاسوب محمول، وباللغتين وبالوضعين. أغلق وضع العرض التجريبي: حين تكون قيمة NEXT_PUBLIC_DEMO_MODE هي true، تعرض صفحة تسجيل الدخول بيانات العرض وتعبئها وتضيف مبدّل ألوان عائمًا. وهو مغلق افتراضيًا. تذكّر أيضًا أن خريطة العالم في النظرة العامة تجلب حدود الدول من cdn.jsdelivr.net، لذلك تبقى فارغة خلف جدار حماية يحجب هذا العنوان.

يختلف أمرا التطوير والإنتاج في نقطة مفيدة: yarn start يقدّم آخر بناء، لذا نفّذ yarn build مجددًا بعد كل تغيير. وحين تظهر أخطاء لا يفسرها كودك، احذف المجلد .next وابنِ من جديد.

استخدم هذه المراجعة كبروفة قصيرة ليوم الإطلاق. امشِ في رحلة العميل كاملة مرة واحدة، ببطء:

1. افتح صفحة الترحيب وادخل إلى لوحة التحكم كما يفعل عميل جديد.
2. ابحث في المعاملات، وضيّقها بنطاق التاريخ، وصدّر الملف. افتحه في برنامج جداول.
3. اقفل بطاقة ثم افتحها، ثم أعد التحميل لترى ما الذي يبقى. أي شيء يتراجع هو مكان لواجهة API الخاصة بك.
4. انتقل إلى العربية وكرر المسار نفسه.
5. صغّر النافذة إلى عرض هاتف وابحث عن أرقام أو أزرار مقصوصة.

دوّن كل مفاجأة. كل واحدة ستصبح إصلاحًا أو زرًا مخفيًا أو سطرًا في ملاحظات الدعم لديك.

9. انشره على الإنترنت

لا شيء يحتاج إلى إعداد: لا قاعدة بيانات ولا أسرار ولا متغيرات إلزامية. النشر قصير. أمامك ثلاث طرق:

• Vercel. ارفع المجلد إلى مستودع Git خاص (الترخيص لا يسمح بكود مصدري علني)، واستورده، وأبقِ إعدادات Next.js الافتراضية، وأضف ENABLE_EXPERIMENTAL_COREPACK بالقيمة 1 ليستخدم Vercel إصدار Yarn المثبَّت. ثم أضف نطاقك.
• خادم Node.js. استخدم Node.js 20.9 أو أحدث، ثم ثبّت وابنِ وشغّل. يستمع على المنفذ 3030، فضع Nginx أو Caddy أمامه لخدمة نطاقك عبر HTTPS، وأبقِ yarn start يعمل بمدير عمليات. على مضيف يحدد المنفذ بنفسه استخدم yarn start -p $PORT.
• Docker. يبني ملف Dockerfile المرفق صورة صغيرة تعمل بمستخدم بلا صلاحيات مدير.

بعد أي تغيير في قيمة NEXT_PUBLIC_، ابنِ من جديد. تُدمج هذه القيم في الكود عند بناء التطبيق.

ما الذي تتحقق منه: حمّل العنوان المباشر، وبدّل اللغة، وبدّل الوضع، وسجّل الدخول بطريقتك الحقيقية. ما يسوء عادة: مضيف يحدد منفذه الخاص بينما يظل yarn start يستمع على 3030.

التشغيل يومًا بيوم

بعد الإطلاق، معظم العمل صغير ويتكرر.

• ربط عنصر آخر. اختر عنصرًا، واستبدل ملف العينة الخاص به باستدعاء لواجهة API الخاصة بك، واختبره باللغتين، وانشره وحده.
• تغيير نص. عدّل القيمة في ملف en.json المناسب وفي ar.json المقابل، مع إبقاء المفاتيح كما هي وعدم المساس بما بين الأقواس المعقوفة. أعد تشغيل yarn dev أو أعد البناء.
• إضافة لغة. أضف الرمز في src/i18n/routing.ts، وانسخ en.json في كل مجلد من المجلدات الثمانية تحت messages/، وترجم القيم، وأضف اللغة إلى القائمة في src/components/LanguageSelector.tsx. العربية وحدها تُعامَل من اليمين إلى اليسار، فلغة أخرى من اليمين إلى اليسار تحتاج بعض التعديلات الإضافية.
• تغيير لون التمييز. عدّل سطرًا واحدًا، DEFAULT_THEME_COLOR، وأعد البناء.
• التعامل مع أسئلة الدعم. العميل الذي "فقد" تفضيلاته غالبًا مسح بيانات المتصفح، لأن المتصفح يتذكر ترتيب الأرقام الرئيسية واختيار الوضع، لكل متصفح على حدة.
• تحديث الاعتماديات. الاعتماديات بإصدارات محددة، مع ملف قفل في التنزيل. غيّر إصدارًا عن قصد، واختبر البناء، واستخدم Yarn ليبقى ملف القفل هو المرجع.

كم تكلف التشغيل

القالب عملية شراء لمرة واحدة بسعر يبدأ من $99، مع دعم مدى الحياة مذكور في صفحة المنتج. وتشغيل الواجهة الأمامية نفسها لا يكلف إلا الاستضافة.

البند الأكبر هو ما تبنيه خلفها. تدفع مقابل واجهة API وقاعدة البيانات وخدمة تسجيل الدخول وكل ما ينقل الأموال أو يقرأها، كل منها بأسعار مزوّده. تحقق مما يشترطه شريكك في الدفع أو المصرف والجهة المنظِّمة قبل أن تعرض أرصدة حقيقية. القالب لا يتضمن شيئًا من ذلك.

ما لا يكلف شيئًا: لا قاعدة بيانات تحتاج إلى ترخيص، ولا خدمة إلزامية، وتعمل بيانات العينة دون اتصال (باستثناء أشكال الخريطة والخطوط التي تُنزَّل وقت البناء).

ما الذي تخصصه بعد ذلك

• لون التمييز. جرّب الأوضاع الأربعة (البرتقالي والأزرق والذهبي والفضي) واختر ما يناسب العلامة. الرسوم والأزرار وشكل البطاقات تتبعه.
• العملة والفئات. غيّر فئات العينة إلى ما يستخدمه المستقلون فعلًا، مثل مخصص الضرائب والبرامج والسفر.
• صفحة الترحيب. الصفحة على /en فيها اسم المنتج وثلاث بطاقات وزر Enter Dashboard. أعد كتابتها لتكون نقطة دخولك.
• شاشات أكثر. تعرض صفحة UI Components العناصر (جداول ونوافذ حوار ولوحات وتبويبات ومحددات تاريخ)، فيمكن تركيب صفحة جديدة مثل Invoices منها بالأسلوب نفسه.
• لغة ثالثة. أضف الرمز في src/i18n/routing.ts، وانسخ كل en.json في مجلدات الرسائل الثمانية، وأضفها إلى قائمة اللغات.

قائمة تحقق الإطلاق

• حذف الحساب المؤقت وربط تسجيل دخول حقيقي، مع التحقق من الجلسة على الخادم.
• كل عنصر تُبقيه يقرأ من واجهة API الخاصة بك، وكل زر تُبقيه يحفظ في مكان ما.
• الأزرار التي لن تبنيها مخفية أو محذوفة.
• القيمة NEXT_PUBLIC_DEMO_MODE مغلقة.
• تغيير الاسم والشعار والأيقونة المصغرة واللون وسطر الاعتماد في التذييل.
• كل نص جديد موجود في en.json وar.json معًا.
• كل صفحة تغيّرت فُحصت في /ar، في الوضعين الفاتح والداكن، وعلى هاتف.
• تشغيل بناء الإنتاج بـ yarn build واختباره قبل النشر.
• النطاق وHTTPS وإعدادات الاستضافة في مكانها.
• تأكيد متطلبات شريكك والجهة المنظِّمة بشأن بيانات الأموال.

أخطاء شائعة

إطلاق المنتج بتسجيل الدخول المؤقت

حساب القالب علني بحكم تصميمه. يستطيع أي شخص يفتح مصدر الصفحة أن يجده. استبدله قبل الإطلاق.

توقع أن الأزرار تحفظ البيانات

Add Card وAdd Transaction وSave Changes لا تفعل شيئًا على الخادم لأنه لا يوجد خادم. اربط كل زر تُبقيه، وأخفِ ما لن تبنيه.

ترك وضع العرض التجريبي مفعّلًا

يعرض وضع العرض التجريبي بيانات دخول تجريبية في صفحة تسجيل الدخول. أبقِ NEXT_PUBLIC_DEMO_MODE مغلقًا في منتج حقيقي.

نسيان إعادة البناء بعد تغيير إعداد

مع yarn start أو Docker، لا يفعل تغيير قيمة NEXT_PUBLIC_ شيئًا حتى يُبنى التطبيق من جديد.

نقل سلوك بطاقة العينة إلى بيانات بطاقات حقيقية

في صفحة Your Cards عنصر تحكم لإظهار الرقم، وهو يعمل على أرقام عينة مختلقة. قبل أن تنتقل بيانات بطاقات حقيقية إلى المتصفح، اسأل مزود البطاقات أو الدفع عما يسمح به، وصمّم ما تعرضه الشاشة (غالبًا آخر الأرقام فقط) بناءً على جوابه.

إخفاء المشكلة بدل إخفاء الزر

الزر الذي لا يفعل شيئًا يعلّم العملاء ألا يثقوا بالصفحة. إذا لم يكن الإجراء مبنيًا بعد، فأزله من الشاشة إلى أن يُبنى، بدل تركه يفشل بصمت.

الاختبار بالإنجليزية فقط

تتصرف الأرقام والتواريخ والتسميات الطويلة بشكل مختلف في التخطيطات من اليمين إلى اليسار. افتح كل صفحة غيّرتها في /ar قبل أن تعدّها منتهية.

الأسئلة الشائعة

كيف أبني لوحة تحكم فينتك بـ Next.js؟

ابدأ بواجهة جاهزة ثم اربط بياناتك. يوفر هذا القالب الصفحات والرسوم والنماذج، وأنت تربط واجهة API للأرصدة والبطاقات والمعاملات مع تسجيل دخول حقيقي.

هل أحتاج إلى خادم خلفي؟

نعم، لأي استخدام حقيقي. القالب ليس فيه خادم خلفي ولا قاعدة بيانات، لذا يحتاج المنتج الفعلي إلى واجهة API خاصة بك. تتيح لك بيانات العينة التصميم والعرض دونها.

هل يمكنه الاتصال بمصرف أو عرض حسابات حقيقية؟

ليس من تلقاء نفسه. إنه يعرض ما تعيده واجهة API الخاصة بك. أي اتصال بمصرف أو خدمة بطاقات أو مزود دفع تضيفه أنت على جانب الخادم.

هل يدعم العربية واتجاه RTL؟

نعم. كل تسمية ومفتاح رسم وعنوان جدول ورسالة نموذج موجودة بالإنجليزية والعربية، والصفحات العربية تُعرض من اليمين إلى اليسار.

ما الرسوم البيانية التي يستخدمها؟

ترسم Recharts الرسوم المساحية والشريطية والحلقية والخرائط الحرارية، ويمكن تنزيل كل منها بصيغة PNG. جدول المعاملات مبني بـ TanStack Table.

هل يمكنني استخدامه لعملائي؟

نعم. يغطي الترخيص التجاري عددًا غير محدود من المشاريع، بما فيها العمل المسلَّم إلى عميل. لا يجوز لك مشاركة الكود المصدري علنًا ولا إعادة بيعه كقالب.

هل تسجيل الدخول آمن كما هو؟

لا. إنه بديل مؤقت يُفحص في المتصفح، ومخصص لأن يُستبدل بتسجيل دخول مرتبط بواجهة API الخاصة بك قبل أن يستخدمه عملاء حقيقيون.

هل يتوفر الوضعان الداكن والفاتح؟

نعم. كلاهما مكتمل، وتبدأ لوحة التحكم بالداكن، ويتذكر المتصفح اختيار كل شخص. أما لون تمييز العلامة فهو إعداد منفصل.

هل يمكنني تصدير البيانات من لوحة التحكم؟

نعم. تصدّر صفحة المعاملات ملف CSV لنطاق التاريخ والمرشحات المختارة، ويمكن حفظ الرسوم كصور PNG. كلاهما يعمل في المتصفح مع بيانات العينة.

جرّبه بنفسك

افتح العرض التجريبي المباشر لترى كل صفحة. تحتوي صفحة منتج Financial Dashboard على التفاصيل، وتغطي الوثائق كل خطوة أعلاه. وللاطلاع على لوحات تحكم أخرى، تصفح فئة قوالب لوحة الإدارة، أو اقرأ كيف تُعالَج لوحات التحكم العربية وRTL.

هذا القالب أيضًا واحد من عشرة قوالب في Next.js Templates Bundle، إن كنت تتوقع بناء أكثر من نوع من المنتجات.