Nextgen Garage Management System -- 2

### **Nextgen Garage Management System**

#### **Project Overview**

The Nextgen Garage Management System is a modern, full-stack web application designed to streamline garage and automotive service operations. This comprehensive platform enables efficient management of vehicles, customer visits, multiple branch locations, and service workflows through an intuitive user interface.

#### **Technology Stack**

**Backend:**
- Node.js with Express.js
- MongoDB (NoSQL Database)
- Authentication: JWT (JSON Web Tokens)
- Real-time Communication: Socket.io
- Security: bcryptjs for password hashing
- Additional: QR Code generation, Excel file processing (XLSX)

**Frontend:**
- React with TypeScript
- Vite (Modern build tool)
- Tailwind CSS (Responsive UI)
- Radix UI (Component library)
- React Hook Form (Form management)
- Responsive design for desktop, tablet, and mobile

**Deployment:**
- Backend: Vercel (compatible with IIS Node)
- Frontend: Cloudflare Pages
- Database: MongoDB Atlas

#### **Key Features**

1. **User Management & Authentication**
- Role-based access control (Admin, Worker, User)
- JWT authentication with secure password hashing
- User profile management
- Multi-level authorization

2. **Vehicle Management**
- Register and track vehicles
- Vehicle information storage
- QR code generation for quick identification
- Vehicle history tracking

3. **Service Visits & Tracking**
- Schedule and manage service visits
- Active visit status tracking
- Visit history records
- Service duration monitoring

4. **Multi-Branch Management**
- Support for multiple garage locations
- Branch-specific configurations
- Centralized control panel
- Per-branch analytics

5. **QR Code Scanner**
- Mobile-optimized QR scanning
- Quick vehicle identification
- Automated check-in/check-out system
- Real-time data synchronization

6. **Admin Dashboard**
- System-wide analytics
- User and vehicle management
- Settings configuration
- System monitoring

7. **Worker Dashboard**
- Task management
- Service request handling
- Real-time notifications
- Performance tracking

8. **Pickup Request System**
- Schedule vehicle pickups
- Track pickup status
- Customer notifications

#### **Project Structure**

- **Backend-API**: RESTful API with multiple controllers (Auth, Car, Visit, Branch, Settings)
- **Frontend**: React SPA with multiple pages and components
- **Database Models**: User, Car, ActiveVisit, VisitHistory, Branch, Settings

#### **Current Status**

The project includes:
- Fully functional backend API with all core endpoints
- Complete frontend with all major pages and components
- User authentication and authorization system
- QR scanning functionality
- Multi-role dashboard system
- Responsive UI design with Tailwind CSS

---

### **النسخة العربية**

---

### **نظام إدارة الكراجات Nextgen**

#### **نظرة عامة على المشروع**

نظام إدارة الكراجات Nextgen هو تطبيق ويب حديث وكامل المستوى مصمم لتبسيط عمليات الكراج والخدمات السيارية. توفر هذه المنصة الشاملة إدارة فعالة للمركبات والزيارات والمواقع المتعددة وعمليات الخدمة من خلال واجهة مستخدم بديهية.

#### **مجموعة التكنولوجيا**

**الخادم الخلفي:**
- Node.js مع Express.js
- MongoDB (قاعدة بيانات NoSQL)
- المصادقة: JWT (JSON Web Tokens)
- الاتصال في الوقت الفعلي: Socket.io
- الأمان: تشفير bcryptjs
- إضافي: توليد رموز QR، معالجة ملفات Excel

**الواجهة الأمامية:**
- React مع TypeScript
- Vite (أداة البناء الحديثة)
- Tailwind CSS (تصميم استجابي)
- مكتبة Radix UI (مكونات واجهة المستخدم)
- React Hook Form (إدارة النماذج)
- تصميم يعمل على أجهزة سطح المكتب والأجهزة اللوحية والهواتف الذكية

**النشر:**
- الخادم الخلفي: Vercel
- الواجهة الأمامية: Cloudflare Pages
- قاعدة البيانات: MongoDB Atlas

#### **الميزات الرئيسية**

1. **إدارة المستخدمين والمصادقة**
- التحكم في الوصول بناءً على الأدوار (مسؤول، عامل، مستخدم)
- مصادقة JWT مع تشفير آمن للكلمات المرورية
- إدارة ملف المستخدم الشخصي
- ترخيص متعدد المستويات

2. **إدارة المركبات**
- تسجيل وتتبع المركبات
- تخزين معلومات المركبة
- توليد رموز QR للتعرف السريع
- تتبع سجل المركبة

3. **زيارات وتتبع الخدمة**
- جدولة وإدارة زيارات الخدمة
- تتبع حالة الزيارة النشطة
- سجلات سجل الزيارة
- مراقبة مدة الخدمة

4. **إدارة الفروع المتعددة**
- دعم مواقع الكراج المتعددة
- التكوينات الخاصة بكل فرع
- لوحة تحكم مركزية
- تحليلات خاصة بكل فرع

5. **ماسح رموز QR**
- ماسح محسّن للهواتف الذكية
- التعرف السريع على المركبة
- نظام تسجيل الدخول والخروج الآلي
- مزامنة البيانات في الوقت الفعلي

6. **لوحة معلومات الإدارة**
- تحليلات شاملة للنظام
- إدارة المستخدمين والمركبات
- تكوين الإعدادات
- مراقبة النظام

7. **لوحة معلومات العامل**
- إدارة المهام
- معالجة طلبات الخدمة
- الإشعارات الفورية
- تتبع الأداء

8. **نظام طلب الاستقطاع**
- جدولة استقطاع المركبات
- تتبع حالة الاستقطاع
- إخطارات العملاء

#### **هيكل المشروع**

- **Backend-API**: API RESTful مع عدة وحدات تحكم (المصادقة، السيارة، الزيارة، الفرع، الإعدادات)
- **الواجهة الأمامية**: تطبيق React SPA مع عدة صفحات ومكونات
- **نماذج قاعدة البيانات**: المستخدم، السيارة، الزيارة النشطة، سجل الزيارات، الفرع، الإعدادات

#### **الحالة الحالية للمشروع**

يتضمن المشروع:
- واجهة برمجية خلفية كاملة الوظائف مع جميع نقاط النهاية الأساسية
- واجهة أمامية كاملة مع جميع الصفحات والمكونات الرئيسية
- نظام المصادقة والتصريح للمستخدمين
- وظيفة ماسح QR
- نظام لوحة معلومات متعدد الأدوار
- تصميم واجهة مستخدم استجابي مع Tailwind CSS