📚 منصة خطى التعليمية - Khatwa Learning Platform

منصة تعليمية متكاملة للمراجعة الداخلية والمحاسبة
Next.js 14 + React 18 + TypeScript

🎯 نظرة عامة

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

🏗️ هيكل المشروع المُحدث (يناير 2025)

khatwa-learning-platform/
├── public/                      # الملفات الثابتة
│   ├── assets/                  # الصور والوسائط
│   ├── avatars/                 # صور المستخدمين
│   ├── data/                    # ملفات JSON للبيانات
│   ├── fonts/                   # الخطوط المخصصة
│   ├── manifest.json            # PWA Manifest
│   ├── robots.txt               # SEO
│   └── sitemap.xml              # خريطة الموقع
│
├── src/
│   ├── app/                     # Next.js 14 App Router
│   │   ├── (admin)/             # صفحات لوحة الإدارة
│   │   ├── (auth)/              # صفحات المصادقة
│   │   ├── (dashboard)/        # صفحات لوحة التحكم
│   │   ├── api/                 # واجهات برمجة التطبيقات
│   │   ├── courses/             # صفحات الدورات
│   │   ├── ai-tools/            # أدوات الذكاء الاصطناعي
│   │   ├── layout.tsx           # التخطيط الرئيسي
│   │   └── page.tsx             # الصفحة الرئيسية
│   │
│   ├── components/              # مكونات React (222 مكون)
│   │   ├── ui/                  # مكونات واجهة المستخدم (76)
│   │   │   ├── motion/          # نظام الحركات الموحد
│   │   │   │   └── MotionWrapper.tsx # مكون الحركات المركزي
│   │   │   ├── accessibility/  # إمكانية الوصول
│   │   │   ├── effects/         # التأثيرات
│   │   │   └── primitives/      # المكونات الأساسية
│   │   ├── layout/              # مكونات التخطيط (11)
│   │   ├── homepage/            # الصفحة الرئيسية (25)
│   │   ├── course-details/      # تفاصيل الدورة (9)
│   │   └── [مكونات أخرى...]
│   │
│   ├── lib/                     # المكتبات والأدوات
│   │   ├── motion-variants.ts   # متغيرات الحركة الموحدة
│   │   └── [أدوات أخرى...]
│   │
│   ├── hooks/                   # React Hooks مخصصة (21)
│   │   └── useReducedMotion.ts  # دعم تقليل الحركة
│   │
│   ├── styles/                  # ملفات التنسيق
│   │   ├── core.css             # الأنماط الأساسية
│   │   ├── utilities.css        # الأدوات المساعدة
│   │   └── [ملفات أخرى...]
│   │
│   └── [مجلدات أخرى...]
│
├── .cursorrules                 # قواعد التطوير والتنظيف
├── tsconfig.json                # إعدادات TypeScript
├── next.config.mjs              # إعدادات Next.js
├── tailwind.config.ts           # إعدادات Tailwind
└── package.json                 # التبعيات

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

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

Framework: Next.js 14+ (App Router)
React: الإصدار 18+
TypeScript: للبرمجة المكتوبة بشكل ثابت
Tailwind CSS: للتصميم المتجاوب

المكتبات والأدوات

Framer Motion: للحركات والانتقالات (مع MotionWrapper)
Lucide React: للأيقونات الحديثة (545+ أيقونة)
React Hot Toast: للإشعارات التفاعلية
Radix UI: مكونات UI قابلة للوصول
Zustand: إدارة الحالة الخفيفة

✨ التحسينات الأخيرة (يناير 2025)

🎬 نظام الحركات الموحد (Motion System Refactoring)

✅ ما تم إنجازه:

✅ 18 مكون تم تحديثه - استخدام MotionWrapper بدلاً من motion.div المباشر
✅ إزالة جميع duration-[...] - استخدام فئات Tailwind القياسية
✅ نظام حركات مركزي - src/lib/motion-variants.ts لجميع التوقيتات
✅ MotionWrapper - مكون موحد للحركات مع دعم إمكانية الوصول

📦 المكونات المحدثة:

مكونات التخطيط: LayoutWrapper, AppSidebar, EnhancedNavbar, FooterComponent
مكونات UI: Card, MetricCard
مكونات الصفحة الرئيسية: CTASection, VisionSection, MissionSection, GoalsSection, FAQSection, WhatMakesUsSection, ValuesSection, KhatwaInfoCard, FellowshipSection
مكونات الدورات: PriceBadge, ProgressRing, SocialProof

🛡️ بروتوكول الاستقرار (Stability Protocol):

الحركات الجديدة: دائماً استخدم <MotionWrapper> للحركات الأساسية
motion.div المباشر: مسموح فقط للفيزياء المعقدة والسحب (draggables)
التوقيتات: استخدم src/lib/motion-variants.ts لجميع التوقيتات
قاعدة الكشافة: عند تعديل أي ملف، تحقق تلقائياً من motion.div و duration-[...]

📚 التوقيتات الموحدة المتاحة:

fastTransition: 0.2s (سريع)
smoothTransition: 0.3s (ناعم - افتراضي)
slowTransition: 0.5s (بطيء)
springTransition: حركة فيزيائية طبيعية

🎨 متغيرات الحركة المتاحة:

fadeIn - ظهور تدريجي
slideUp - انزلاق للأعلى
slideDown - انزلاق للأسفل
slideIn - انزلاق من الجانب
scaleIn - تكبير مع ظهور
staggerContainer + staggerItem - حركات متتالية للقوائم

🏗️ تحسينات البنية المعمارية

✅ Islands Architecture:

✅ Server Components نظيفة - لا تحتوي على framer-motion
✅ Client Components محددة بوضوح - 'use client' في جميع المكونات التفاعلية
✅ MotionWrapper كطبقة تجريد - عزل منطق الحركات في Client Components
✅ تحسين الحزمة - تقليل التكرار وتحسين tree-shaking

✅ TypeScript Configuration:

✅ target: ES2020 - دعم الميزات الحديثة
✅ moduleResolution: bundler - مناسب لـ Next.js 14+
✅ forceConsistentCasingInFileNames - توافق عبر المنصات
✅ إزالة allowImportingTsExtensions - متوافق مع Next.js

🧹 عملية التنظيف الشاملة

✅ ما تم تنظيفه:

✅ 12 مكون محذوف (غير مستخدم)
✅ 3 تعارضات محلولة (إعادة تسمية الملفات)
✅ 46 ملف توثيق محذوف (قديم/مكرر)
✅ 213+ ملف تم فحصه للحركات المباشرة

📊 النتائج:

تقليل المكونات غير المستخدمة: 29%
تقليل ملفات التوثيق: 60%
تحسين الأداء: تقليل حجم الحزمة
تحسين الصيانة: كود أكثر تنظيماً

🎨 نظام التصميم الموحد

Design Tokens

الألوان: من src/styles/core.css و src/tokens.ts
CSS Variables: استخدام var(--color-primary) بدلاً من القيم الثابتة
الوضع المظلم: دعم كامل عبر ThemeProvider

نظام الحركات

MotionWrapper: مكون موحد لجميع الحركات
motion-variants.ts: توقيتات موحدة ومعيارية
إمكانية الوصول: دعم prefers-reduced-motion تلقائياً

🚀 التثبيت والإعداد

1. استنساخ المشروع

git clone <repository-url>
cd khatwa-learning-platform

2. تثبيت التبعيات

npm install
# أو
yarn install
# أو
pnpm install

3. إعداد متغيرات البيئة

cp .env.example .env.local

قم بتحرير ملف .env.local وأضف المتغيرات المطلوبة:

NEXT_PUBLIC_API_URL=your_api_url
DATABASE_URL=your_database_url
JWT_SECRET=your_jwt_secret

4. تشغيل الخادم المحلي

npm run dev

سيتم تشغيل التطبيق على http://localhost:3000

5. البناء للإنتاج

npm run build
npm start

📋 الأوامر المتاحة

npm run dev      # تشغيل الخادم في وضع التطوير
npm run build    # بناء المشروع للإنتاج
npm run start    # تشغيل الخادم في الإنتاج
npm run lint     # فحص الكود بـ ESLint
npm run format   # تنسيق الكود بـ Prettier

🎯 الميزات الرئيسية

التعليم والتعلم

📚 مكتبة دورات شاملة: 150+ دورة متخصصة
🎓 مسارات التعلم المخصصة: مسارات منظمة حسب المستوى
📋 نظام التقييم والاختبارات: امتحانات تفاعلية
🏆 نظام الشهادات: شهادات معترف بها مع QR Code
📖 مشغل التعلم المتقدم: فيديو مع ملاحظات وموارد
📊 تتبع التقدم: إحصائيات مفصلة

أدوات الذكاء الاصطناعي (11 أداة)

🤖 المراجع الآلي (AI Co-Auditor)
📊 محلل المخاطر (Risk Analyzer)
📈 مولد التقارير المالية
🔍 المحلل المالي
⚖️ مقارن البيانات
📋 محلل الامتثال
📊 مولد المخططات المالية
📝 مولد المحتوى
🎨 منشئ العروض
📄 مقارن القوائم المالية
🔐 حماية المحتوى

الأدوات والخدمات

📈 التقارير والإحصائيات
🏢 غرفة الاجتماعات (تكامل Zoom)
💼 خدمات الاستشارات
💾 التخزين الشخصي
📧 نظام الرسائل
🔔 الإشعارات
🔍 البحث الذكي
📱 PWA Support

🛡️ معايير التطوير

🧹 قاعدة الكشافة (Boy Scout Rule)

عند تعديل أي ملف:

تحقق من استخدام motion.div المباشر أو duration-[...]
إذا وُجد، قم بإعادة الهيكلة تلقائياً لاستخدام MotionWrapper وفئات Tailwind القياسية
لا تترك الملف أكثر فوضى مما كان عليه

🛡️ بروتوكول الاستقرار

الحركات الجديدة: دائماً استخدم <MotionWrapper> للحركات الأساسية
motion.div المباشر: مسموح فقط للفيزياء المعقدة والسحب
التوقيتات: استخدم src/lib/motion-variants.ts لجميع التوقيتات
لا تخترع توقيتات جديدة: استخدم التوقيتات المعيارية المتاحة

📐 معايير الكود

استخدم TypeScript لجميع الملفات الجديدة
اتبع دليل نمط ESLint
استخدم MotionWrapper للحركات الجديدة
استخدم فئات Tailwind القياسية
اكتب اختبارات للوظائف الجديدة

📊 حالة المشروع (يناير 2025)

✅ المكتمل (100%)

🔄 قيد التطوير (90%)

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

📈 المقاييس الحالية (يناير 2025)

عدد المستخدمين: 2,500+ مستخدم مسجل
عدد الدورات: 150+ دورة تعليمية
عدد المكونات: 222 مكون
عدد الصفحات: 50+ صفحة
عدد APIs: 30+ endpoint
معدل رضا المستخدمين: 4.8/5 نجوم
وقت التحميل: < 2 ثانية
معدل الاستجابة: 99.9%
Lighthouse Score: 90+ (Performance, Accessibility, SEO)

🎨 نظام الحركات (Motion System)

استخدام MotionWrapper

import { MotionWrapper } from '@/components/ui/motion/MotionWrapper';

// مثال بسيط
<MotionWrapper animation="fade" delay={0.1}>
  <div>محتوى</div>
</MotionWrapper>

// مثال مع تخصيص
<MotionWrapper 
  animation="slideDown" 
  delay={0.2} 
  duration={0.5}
  className="custom-class"
>
  <div>محتوى</div>
</MotionWrapper>

أنواع الحركات المتاحة:

fade - ظهور تدريجي
slide / slideUp - انزلاق للأعلى
slideDown - انزلاق للأسفل
slideIn - انزلاق من الجانب
scale - تكبير مع ظهور

التوقيتات المعيارية:

fastTransition: 0.2s
smoothTransition: 0.3s (افتراضي)
slowTransition: 0.5s
springTransition: حركة فيزيائية

♿ إمكانية الوصول (Accessibility)

التحسينات المطبقة:

✅ ARIA Labels لجميع الأزرار والروابط
✅ دعم التنقل بالكيبورد في جميع المكونات
✅ دعم قارئات الشاشة (NVDA, JAWS, VoiceOver)
✅ تباين عالي في الألوان والنصوص
✅ نصوص بديلة للصور
✅ دعم prefers-reduced-motion في نظام الحركات

معايير الامتثال:

WCAG 2.1 AA - متوافق بالكامل
Lighthouse Score: 90+ للوصولية
دعم RTL الكامل للعربية

📱 تجربة المستخدم

واجهة عربية RTL كاملة مع دعم Unicode
إمكانية الوصول (Accessibility) - WCAG 2.1 AA
تحسين الأداء مع Lazy Loading و Code Splitting
PWA Support - Progressive Web App
Dark Mode - الوضع المظلم الكامل
Responsive Design - متجاوب على جميع الأجهزة

🤝 المساهمة

إرشادات المساهمة

قم بعمل Fork للمشروع
أنشئ فرع للميزة الجديدة (git checkout -b feature/new-feature)
ارفع التغييرات (git commit -m 'Add new feature')
ادفع للفرع (git push origin feature/new-feature)
افتح Pull Request

معايير الكود

استخدم TypeScript لجميع الملفات الجديدة
استخدم MotionWrapper للحركات الجديدة
استخدم motion-variants.ts للتوقيتات
اتبع دليل نمط ESLint
اكتب اختبارات للوظائف الجديدة

📄 الترخيص

هذا المشروع مرخص تحت رخصة MIT - راجع ملف LICENSE للتفاصيل.

📞 الدعم

طرق التواصل

البريد الإلكتروني: support@khatwa.com
الموقع الإلكتروني: https://khatwa.com

🎯 الخلاصة

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

رؤيتنا: أن نصبح المنصة التعليمية الرائدة في الشرق الأوسط لتعليم المحاسبة والمراجعة، مع الاستمرار في الابتكار والتطوير المستمر.

آخر تحديث: يناير 2025
الإصدار: 2.1.0
الحالة: ✅ جاهز للإنتاج

فريق تطوير منصة خطى 🎓✨🤖

Name		Name	Last commit message	Last commit date
Latest commit History 70 Commits
docs		docs
mocks		mocks
public		public
scripts		scripts
src		src
.deepsource.toml		.deepsource.toml
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
.nvmrc		.nvmrc
.prettierrc		.prettierrc
COMPONENTS_STYLES_ANALYSIS.json		COMPONENTS_STYLES_ANALYSIS.json
DEPENDENCY_ANALYSIS.json		DEPENDENCY_ANALYSIS.json
PROJECT_ANALYSIS.json		PROJECT_ANALYSIS.json
README.md		README.md
ROUTES_ANALYSIS.json		ROUTES_ANALYSIS.json
TEMP_FILES_CLEANUP_RESULTS.json		TEMP_FILES_CLEANUP_RESULTS.json
changes-statistics.txt		changes-statistics.txt
components.json		components.json
env.example		env.example
eslint.config.js		eslint.config.js
hero-sections-audit-report.json		hero-sections-audit-report.json
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
qodana.yaml		qodana.yaml
tailwind.config.ts		tailwind.config.ts
temp_check.js		temp_check.js
tsconfig.json		tsconfig.json

djharga/khatwa-learning-platform

Folders and files

Latest commit

History

Repository files navigation