قالب لوحة تحكم مالية

لوحة تحكم مالية حديثة مبنية باستخدام Next.js 15 و React 19، تتميز بدعم متعدد اللغات، نظام مصادقة، وودجات تفاعلية ديناميكية.

أبرز الميزات

• التدويل (i18n): دعم الإنجليزية والعربية عبر next-intl
• المصادقة: نظام مخصص يعتمد على Redux مع رموز JWT
• السحب والإفلات: ودجات تفاعلية باستخدام @dnd-kit
• الرسوم والتحليلات: عرض البيانات باستخدام Recharts
• الوضع المظلم/الفاتح: تبديل تلقائي مع كشف إعداد النظام
• تصميم متجاوب: يعمل عبر جميع الأجهزة
• حالة Redux: إدارة مركزية للحالة

التقنية المستخدمة

التقنيات الأساسية:

• Next.js 15.3.4 مع App Router و Turbopack
• React 19.0.0 بخصائص حديثة
• TypeScript 5 لأمان الأنواع
• إطار Tailwind CSS 4

مكتبات رئيسية:

• الواجهة: Radix UI, Lucide React, Framer Motion
• الحالة: Redux Toolkit, React Redux
• النماذج: React Hook Form مع التحقق باستخدام Zod
• المصادقة: bcryptjs, jsonwebtoken, localStorage
• التدويل: next-intl مع التوجيه
• الرسوم: Recharts, @tanstack/react-table
• السحب والإفلات: حزمة @dnd-kit (core, sortable, modifiers)
• التواريخ: react-day-picker, date-fns
• أدوات: clsx, tailwind-merge, class-variance-authority

نظرة على المكونات

ودجات اللوحة:

• DashboardGrid — تخطيط رئيسي مع ودجات قابلة للسحب
• BarChartWidget, StatisticsChart — عرض بيانات مالية
• SmartInvestPanel — تتبع الاستثمارات
• TransactionsPanel — أحدث المعاملات
• WorldMapWidget — بيانات جغرافية
• CardSection — إدارة البطاقات الائتمانية

الميزات الأساسية:

• التحليلات: RevenueChart, CategoryChart
• المعاملات: جدول مع تصفية وحوارات إضافة/تصدير
• المصادقة: LoginForm، أزرار اجتماعية، حماية المسارات
• التخطيط: رأس مع إشعارات، شريط جانبي متعدد اللغات
• مكتبة واجهة: أكثر من 36 مكوناً قابلاً لإعادة الاستخدام

البدء

التثبيت:

1. حمّل الملف المضغوط واستخرجه
2. نفّذ npm install أو yarn install
3. نفّذ npm run dev أو yarn dev
4. افتح http://localhost:3000

ملفات مهيأة مسبقاً:

• next.config.js — إعداد Next.js مع Turbopack ومعالجة SVG
• tailwind.config.mjs — إعداد Tailwind CSS v4
• messages/ — ترجمات الإنجليزية والعربية
• جميع ملفات TypeScript و ESLint وإعدادات المكونات

التخصيص

نظام الثيم:

• متغيرات CSS للوضعين الفاتح والمظلم
• دعم الاتجاه من اليمين لليسار (RTL) للعربية
• تكامل Tailwind مع متغيرات العناصر

إضافة صفحات جديدة:

1. أنشئ src/app/[locale]/dashboard/your-page/page.tsx
2. أضف الرابط في src/components/layout/Sidebar/config.tsx
3. أضف الترجمات داخل messages/en.json و messages/ar.json

التدويل:

• حدّث src/i18n/routing.ts للغات جديدة
• أنشئ ملفات رسائل داخل مجلد messages/

الأداء والهندسة

التحسينات:

• Next.js 15 مع Turbopack لبناء أسرع
• تقسيم تلقائي للكود و Lazy Loading
• تحسين SVG بواسطة @svgr/webpack

دعم المتصفحات: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

Scripts: dev, build, start, lint, type-check, build:analyze