هذا المشروع عبارة عن نظام نقاط بيع (POS) حديث ومتكامل مصمم خصيصاً لمتاجر الأجهزة الكهربائية. تم بناؤه باستخدام React (JavaScript) في الواجهة الأمامية و ASP.NET Core 8 في الخلفية.

• React 18+ (JavaScript / JSX)
• React Router v6 - للتنقل بين الصفحات
• React Hook Form - لإدارة النماذج والتحقق من البيانات
• Zustand - لإدارة الحالة العامة
• TanStack Query - لإدارة البيانات والتخزين المؤقت
• Tailwind CSS - للتصميم والواجهة
• Headless UI - للمكونات التفاعلية
• React Icons - للأيقونات
• Recharts - للرسوم البيانية
• React Hot Toast - للإشعارات
• SignalR Client - للتحديثات المباشرة
• Axios - للاتصال بـ API
• React Number Format - لتنسيق الأرقام العربية
• React Select - للقوائم المنسدلة المتقدمة
• React DatePicker - لاختيار التواريخ
• React Intl - للترجمة والتوطين
• Date-fns - لمعالجة التواريخ بالعربية
• Moment Hijri - للتقويم الهجري
• Bidi-js - لدعم النصوص ثنائية الاتجاه
• RTL Detect - لكشف اتجاه النصوص

• ASP.NET Core 8 Web API
• SignalR - للاتصال المباشر
• SQL Server/PostgreSQL - قاعدة البيانات
• JWT Authentication - للمصادقة
• Role-based Access Control - للصلاحيات

• تسجيل دخول آمن باستخدام JWT
• مصادقة ثنائية (2FA) اختيارية
• نظام أدوار وصلاحيات متقدم
• حماية الصفحات والمكونات

• إنشاء وإدارة المستخدمين
• تحديد الأدوار والصلاحيات
• صلاحيات مفصلة لكل وحدة (عرض، تعديل، حذف)
• إدارة كلمات المرور والمصادقة

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

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

• إضافة المنتجات مع التفاصيل الكاملة
• ربط المنتجات بالموردين والفئات
• إدارة أسعار الشراء والبيع
• متابعة المخزون والحد الأدنى
• باركود وأكواد المنتجات

• تسجيل المبيعات مع تفاصيل كاملة
• تتبع المخزون تلقائياً
• ربط المبيعات بالعملاء والمستخدمين
• حساب الخصومات والضرائب
• طباعة الفواتير

• قاعدة بيانات شاملة للعملاء
• تتبع تاريخ المشتريات
• دعم العملاء الأفراد والشركات
• إحصائيات العملاء المتقدمة

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

• تحديث المخزون فورياً عبر SignalR
• إشعارات المبيعات المباشرة
• دعم متعدد المحطات

• تصميم عصري ومتجاوب
• دعم كامل للغة العربية (RTL)
• سهولة الاستخدام والتنقل
• إشعارات تفاعلية
• مكونات UI قابلة لإعادة الاستخدام

• Node.js 18+
• npm أو yarn
• Git

# استنساخ المشروع
git clone <repository-url>
cd POS-System

# تثبيت التبعيات
npm install

# تشغيل السيرفر التطويري
npm run dev

إنشاء ملف .env في المجلد الرئيسي:

VITE_API_URL=https://localhost:7001/api
VITE_SIGNALR_URL=https://localhost:7001/hubs
VITE_APP_NAME=نظام نقاط البيع

# بناء المشروع
npm run build

# معاينة النسخة المبنية
npm run preview

src/
├── components/          # المكونات القابلة لإعادة الاستخدام
│   ├── Auth/           # مكونات المصادقة
│   ├── Layout/         # مكونات التخطيط
│   └── UI/             # مكونات واجهة المستخدم
├── pages/              # صفحات التطبيق
│   ├── Auth/           # صفحات المصادقة
│   ├── Dashboard/      # لوحة التحكم
│   ├── Suppliers/      # إدارة الموردين
│   ├── Categories/     # إدارة الفئات
│   ├── Items/          # إدارة المنتجات
│   ├── Sales/          # إدارة المبيعات
│   ├── Customers/      # إدارة العملاء
│   ├── Reports/        # التقارير
│   ├── Users/          # إدارة المستخدمين
│   └── Roles/          # إدارة الأدوار
├── services/           # خدمات API
├── stores/             # إدارة الحالة (Zustand)
├── utils/              # الأدوات المساعدة
└── config/             # إعدادات التطبيق

• مدير النظام: صلاحيات كاملة
• مدير المتجر: إدارة المبيعات والمخزون
• موظف المبيعات: تسجيل المبيعات فقط
• موظف المخزون: إدارة المنتجات والمخزون

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

• إجمالي المبيعات اليومية/الشهرية/السنوية
• عدد المنتجات في المخزون
• تنبيهات المخزون المنخفض
• عدد المبيعات الأخيرة
• أداء المبيعات مقارنة بالفترة السابقة

• رسم بياني لاتجاهات المبيعات
• توزيع المبيعات حسب الفئة
• أداء المنتجات الأكثر مبيعاً
• تحليل العملاء

• معلومات المتجر الأساسية
• إعدادات الفواتير والطباعة
• إعدادات الضرائب والخصومات
• إعدادات العملة والتنسيق

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

• تشفير كلمات المرور
• JWT tokens للمصادقة
• HTTPS للاتصال الآمن
• التحقق من الصلاحيات على كل عملية
• تسجيل العمليات (Audit Trail)

• متوافق مع جميع المتصفحات الحديثة
• تصميم متجاوب لجميع الأجهزة
• دعم اللمس للأجهزة اللوحية
• تحسين الأداء للأجهزة الضعيفة

1. Fork المشروع
2. إنشاء branch جديد (git checkout -b feature/amazing-feature)
3. Commit التغييرات (git commit -m 'Add amazing feature')
4. Push للـ branch (git push origin feature/amazing-feature)
5. إنشاء Pull Request

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

للاستفسارات والدعم الفني، يُرجى التواصل معنا.

• تطبيق الهاتف المحمول
• تكامل مع أنظمة الدفع الإلكتروني
• API للتكامل مع الأنظمة الخارجية
• تحليلات متقدمة بالذكاء الاصطناعي
• دعم متعدد اللغات
• نظام إدارة المحتوى

تم تطوير هذا النظام بكل حب واهتمام ليخدم احتياجات متاجر الأجهزة الكهربائية في المنطقة العربية 🇸🇦

• Node.js 18+
• npm أو yarn
• متصفح حديث

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

git clone [repository-url]
cd POS-System

2. تثبيت الحزم

npm install

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

cp .env.example .env
# قم بتعديل ملف .env حسب إعداداتك

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

npm run dev

المشروع سيعمل على http://localhost:3000

src/
├── components/          # المكونات المشتركة
│   ├── Layout/         # مكونات التخطيط العام
│   ├── UI/             # مكونات واجهة المستخدم
│   └── Auth/           # مكونات المصادقة
├── pages/              # صفحات التطبيق
│   ├── Auth/           # صفحات المصادقة
│   ├── Dashboard/      # لوحة التحكم
│   ├── Suppliers/      # إدارة الموردين
│   ├── Categories/     # إدارة الفئات
│   ├── Items/          # إدارة المنتجات
│   ├── Sales/          # إدارة المبيعات
│   ├── Customers/      # إدارة العملاء
│   ├── Reports/        # التقارير
│   ├── Users/          # إدارة المستخدمين
│   └── Roles/          # إدارة الأدوار
├── stores/             # إدارة الحالة (Zustand)
├── services/           # خدمات API
├── config/             # إعدادات التطبيق
└── hooks/              # Custom React Hooks

# تشغيل التطبيق في وضع التطوير
npm run dev

# بناء التطبيق للإنتاج
npm run build

# معاينة النسخة المبنية
npm run preview

# فحص الكود
npm run lint

يحتاج هذا التطبيق إلى خلفية ASP.NET Core 8. قم بتحديث رابط API في ملف .env:

VITE_API_BASE_URL=https://your-api-domain.com/api

• ✅ أجهزة سطح المكتب
• ✅ الأجهزة اللوحية
• ✅ الهواتف الذكية
• ✅ جميع المتصفحات الحديثة

• 🔄 استبدال الأنظمة القديمة أو الورقية
• 📈 تحسين الشفافية والمساءلة
• ⚡ تتبع المخزون والمبيعات في الوقت الفعلي
• 👥 دعم متعدد المستخدمين مع صلاحيات محددة
• 📊 توفير تحليلات مفيدة لاتخاذ القرارات

• ⚡ متاجر الأجهزة الكهربائية
• 🪑 متاجر الأثاث
• 🛒 السوبر ماركت
• 🏪 متاجر التجزئة الصغيرة والمتوسطة
• 🔗 السلاسل التجارية متعددة الفروع

نرحب بالمساهمات! يرجى قراءة دليل المساهمة قبل تقديم أي تغييرات.

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

لأي استفسارات أو مشاكل، يرجى فتح issue جديد.

نظام نقاط البيع للأجهزة الكهربائية - حل متكامل لإدارة أعمالك بكفاءة واحترافية

• ArabicInput - حقل إدخال ذكي يدعم كشف اتجاه النص تلقائياً
• ArabicNumberInput - حقل إدخال الأرقام مع التنسيق العربي
• ArabicSelect - قائمة منسدلة تدعم البحث العربي
• ArabicDatePicker - منتقي تاريخ بالتقويم العربي
• ArabicForm - مكون شامل لإنشاء النماذج العربية

• ✅ كشف اتجاه النص تلقائياً - يتعرف على النصوص العربية والإنجليزية
• ✅ تنسيق الأرقام العربية - عرض الأرقام بالتنسيق السعودي
• ✅ تنسيق العملة - عرض الأسعار بالريال السعودي
• ✅ تنسيق التواريخ - عرض التواريخ بالتقويم الميلادي والهجري
• ✅ البحث الذكي - البحث يدعم النصوص العربية المختلفة
• ✅ التحقق من صحة البيانات - قواعد تحقق مخصصة للعربية
• ✅ رسائل الخطأ العربية - رسائل خطأ واضحة بالعربية
• ✅ دعم لوحة المفاتيح العربية - خريطة للتحويل بين الأحرف
• ✅ الترتيب العربي - ترتيب النصوص حسب الأبجدية العربية

// استخدام المكونات العربية
import { ArabicInput, ArabicNumberInput, ArabicSelect } from "./components/UI";
import {
  formatArabicCurrency,
  formatArabicDate,
} from "./utils/arabicLocalization";

// تنسيق العملة
const price = formatArabicCurrency(1500); // "1,500.00 ر.س"

// تنسيق التاريخ
const date = formatArabicDate(new Date()); // "٢٥/٠٧/٢٠٢٥"

import { formatHijriDate } from "./utils/arabicLocalization";

// التاريخ الهجري
const hijriDate = formatHijriDate(new Date()); // "١٥ محرم ١٤٤٧"