لوحة التحكم الصناعية - Fab Tech

🎯 نظرة عامة

لوحة تحكم تفاعلية شاملة لإدارة العمليات الصناعية في شركة Fab Tech المتخصصة في أجهزة Fiber Laser و CNC. تتضمن أربعة أقسام رئيسية للإنتاج والصيانة والمبيعات والتدريب.

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

🏭 قسم الإنتاج

• مراقبة لحظية لحالة الآلات
• مؤشرات OEE (Overall Equipment Effectiveness)
• تتبع الإنتاج والجودة
• تحليل اتجاهات الإنتاج

🔧 قسم الصيانة التنبؤية

• تنبيهات الصيانة الذكية
• مراقبة أجهزة الاستشعار (درجة الحرارة، الاهتزاز)
• التحليل التنبؤي بالذكاء الاصطناعي
• سجل الصيانة التاريخي

📊 قسم المبيعات

• تحليل الإيرادات والمبيعات
• تقسيم العملاء حسب القطاعات
• أداء المنتجات وهوامش الربح
• تتبع الأهداف والنمو

🎓 قسم التدريب الداخلي

• متابعة تقدم الموظفين
• إدارة البرامج التدريبية
• تحليل تطور المهارات
• تقويم الجلسات التدريبية

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

• React 18 - إطار العمل الأساسي
• Tailwind CSS - التصميم والتنسيق
• Recharts - الرسوم البيانية التفاعلية
• Lucide React - الأيقونات
• JavaScript ES6+ - لغة البرمجة

📱 التصميم

• واجهة مستخدم حديثة وجذابة
• تصميم متجاوب لجميع الأجهزة
• دعم اللغة العربية (RTL)
• ألوان متناسقة ومريحة للعين
• تأثيرات تفاعلية سلسة

🛠️ كيفية التشغيل

المتطلبات المسبقة

• Node.js (الإصدار 14 أو أحدث)
• npm أو yarn

خطوات التثبيت

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

   git clone <repository-url>
   cd fab-tech-dashboard

2. تثبيت المتطلبات

   npm install

3. تشغيل المشروع

   npm start

4. فتح المتصفح ادخل على http://localhost:3000

📊 البيانات التجريبية

يتضمن المشروع بيانات تجريبية شاملة في ملف src/data/mockData.js:

• بيانات الإنتاج: 4 آلات مع مؤشرات OEE
• بيانات الصيانة: تنبيهات وسجل صيانة
• بيانات المبيعات: إيرادات وقطاعات عملاء
• بيانات التدريب: برامج ومهارات الموظفين

🎨 الألوان والتصميم

نظام الألوان

• الأزرق: العناصر الأساسية والأيقونات
• الأخضر: حالات النجاح والإكمال
• البرتقالي: التحذيرات والانتباه
• الأحمر: الأخطاء والمشاكل
• البنفسجي: المميزات الخاصة

المكونات

• Card: بطاقات المحتوى الأساسية
• MetricCard: عرض المؤشرات الرقمية
• StatusBadge: شارات الحالة
• Charts: مخططات تفاعلية متنوعة

📁 هيكل المشروع

src/
├── components/
│   ├── Common/           # المكونات المشتركة
│   ├── Layout/           # مكونات التخطيط
│   ├── Production/       # مكونات الإنتاج
│   ├── Maintenance/      # مكونات الصيانة
│   ├── Sales/           # مكونات المبيعات
│   └── Training/        # مكونات التدريب
├── data/
│   └── mockData.js      # البيانات التجريبية
├── App.js              # المكون الرئيسي
├── index.js            # نقطة الدخول
└── index.css           # الأنماط العامة

🔧 التخصيص

يمكن تخصيص اللوحة بسهولة:

1. تعديل البيانات: غيّر البيانات في mockData.js
2. تغيير الألوان: عدّل نظام الألوان في tailwind.config.js
3. إضافة مكونات: أضف مكونات جديدة في مجلدات components
4. تعديل التخطيط: غيّر التخطيط في Sidebar.js و Header.js

📈 المميزات المتقدمة

• التحديث اللحظي: إمكانية ربط البيانات الحقيقية
• التصدير: تصدير التقارير والمخططات
• التنبيهات: نظام تنبيهات ذكي
• الأمان: إمكانية إضافة نظام مصادقة

🌟 أمثلة الاستخدام

للمدير العام

• مراقبة الأداء العام لجميع الأقسام
• اتخاذ قرارات استراتيجية مبنية على البيانات

لمدير الإنتاج

• متابعة كفاءة الآلات ومؤشرات OEE
• تحديد مناطق التحسين في الإنتاج

لمدير الصيانة

• التنبؤ بالأعطال قبل حدوثها
• تحسين جدولة الصيانة الوقائية

لمدير المبيعات

• تحليل أداء المبيعات والعملاء
• تحديد الفرص الجديدة والأسواق المربحة

لمدير الموارد البشرية

• متابعة تطور مهارات الموظفين
• تخطيط البرامج التدريبية

🚀 المرحلة التالية

• ربط قاعدة البيانات: ربط البيانات الحقيقية
• التحديث اللحظي: WebSocket للبيانات المباشرة
• التطبيق المحمول: نسخة للهواتف الذكية
• التحليلات المتقدمة: ذكاء اصطناعي أكثر تطوراً

📞 الدعم والمساعدة

لأي استفسارات أو مساعدة، يرجى التواصل مع فريق التطوير.

---

تم تطوير هذا المشروع خصيصاً لشركة Fab Tech كحل متكامل لإدارة العمليات الصناعية.