تطبيق ويب عصري لإنشاء وإدارة الفواتير مع دعم كامل للعربية والإنجليزية، بصيغة PWA للعمل بدون إنترنت.
English: A modern web application for creating and managing invoices with full Arabic/English support as a PWA for offline functionality.
- ✅ دعم كامل للعربية (RTL) والإنجليزية (LTR)
- ✅ خطوط عربية احترافية (Noto Sans Arabic)
- ✅ تبديل لحظي بين اللغات
- ✅ تصميم متجاوب (Responsive) - هواتف وحاسبات
- ✅ اسم الشركة: نص شعار مع حجم وألوان قابلة للتخصيص
- ✅ شعار الشركة: رفع صور PNG/JPG (حتى 500KB)
- ✅ 6 ألوان ثيم: أزرق، أخضر، أحمر، برتقالي، بنفسجي، أسود
- ✅ حفظ تلقائي: الثيم يُطبق على جميع الفواتير المستقبلية
- ✅ بيانات العميل: الاسم، الهاتف، العنوان، البريد الإلكتروني
- ✅ نوع الفاتورة: مبدئية أو نهائية
- ✅ جدول منظم:
- اسم العنصر | السعر | الكمية | الإجمالي
- حساب تلقائي للإجمالي الكلي
- تتبع المدفوع والمتبقي
- ✅ رقم تسلسلي ذكي:
YYYYMMDD-{UUID}(مثال: 20260102-ab12cd34)
- ✅ تخزين 100+ فاتورة محلياً
- ✅ بدون حاجة لقاعدة بيانات
- ✅ الفواتير تبقى حتى بعد إغلاق المتصفح
- ✅ معاينة PDF: عرض فوري في tab جديد
- ✅ تصدير PDF: مع شعار الشركة والألوان المخصصة
- ✅ Barcode: رقم تسلسلي في شكل باركود
- ✅ تصدير/استيراد JSON: نسخ احتياطية كاملة
- ✅ نسخ النص: انسخ تفاصيل الفاتورة للصق
- ✅
manifest.jsonللإضافة إلى الشاشة الرئيسية - ✅ Service Worker للعمل بدون إنترنت
- ✅ حجم صغير جداً: < 20KB (HTML + CSS + JS)
- ✅ تحميل فوري بدون تأخير
- متصفح حديث يدعم:
- ES6 JavaScript
- LocalStorage API
- Service Workers
- jsPDF و JsBarcode (عبر CDN)
# 1. نسخ المستودع
git clone https://github.com/abumregha/wasel.git
cd wasel
# 2. تشغيل خادم محلي
python3 -m http.server 8000
# 3. فتح في المتصفح
# http://localhost:8000يمكن استضافة التطبيق على:
- GitHub Pages
- Vercel
- Netlify
- أي خادم ويب عادي (Apache, Nginx, إلخ)
1. اضغط على "تخصيص الشركة" (Customize Company)
2. أدخل اسم شركتك
3. اختر اللون المفضل (6 خيارات)
4. اضغط "حفظ" (Save)
1. اضغط على "فاتورة جديدة" (New Invoice)
2. اختر نوع الفاتورة (مبدئية/نهائية)
3. أدخل بيانات العميل
4. أضف العناصر في الجدول:
- اسم العنصر
- السعر
- الكمية
- الإجمالي (يُحسب تلقائياً)
5. أدخل المبلغ المدفوع
1. اضغط "معاينة" (Preview) لرؤية PDF
2. اضغط "تصدير" (Export) لتحميل PDF
3. اضغط "حفظ" (Save) لحفظ في localStorage
- تصدير JSON: احفظ جميع الفواتير كملف
- استيراد JSON: استعد من نسخة احتياطية
- نسخ النص: انسخ تفاصيل الفاتورة
wasel/
├── index.html # الهيكل الأساسي
├── style.css # التصميم والثيمات
├── script.js # كل الوظائف (خوارزميات، حسابات، أحداث)
├── manifest.json # إعدادات PWA
├── sw.js # Service Worker (offline)
├── README.md # هذا الملف
└── LICENSE # الرخصة
| المكون | التقنية |
|---|---|
| الواجهة | HTML5 + CSS3 + Vanilla JavaScript |
| الخطوط | Google Fonts (Noto Sans Arabic) |
| jsPDF 2.5.1 | |
| Barcode | JsBarcode 3.11.5 |
| PWA | Service Workers + Manifest |
| التخزين | LocalStorage API |
- حجم صغير: < 20KB (بدون مكتبات خارجية كبيرة)
- تحميل فوري: بدون تأخير على الهواتف
- بدون قاعدة بيانات: LocalStorage محلي فقط
- ✅ دعم RTL/LTR
- ✅ ألوان حقيقية وليست ملصقة
- ✅ عناصر HTML سيمانتية
- ✅ بدون إرسال بيانات للخادم
- ✅ البيانات تبقى محلياً فقط
- ✅ JSON export للنسخ الاحتياطية اليدوية
تخصيص الشركة → فاتورة جديدة → إضافة عناصر → معاينة PDF → التصدير
↓ ↓ ↓ ↓ ↓
اسم + لون عميل + نوع جدول منظم PDF احترافي حفظ/مشاركة
- تخزين تلقائي لكل فاتورة
- حتى 100+ فاتورة (حسب قدرة المتصفح)
- بيانات دائمة حتى حذفك يدوياً
{
"id": "20260102-ab12cd34",
"date": "2026-01-02T...",
"type": "نهائية",
"client": {
"name": "اسم العميل",
"phone": "...",
"email": "..."
},
"items": [
{
"desc": "العنصر 1",
"price": 100,
"qty": 2,
"total": 200
}
],
"grandTotal": 200,
"paid": 100,
"remaining": 100
}- الأيقونات (icons) قد تحتاج تخصيص لـ PWA المثالية
- jsPDF يعتمد على CDN (يحتاج إنترنت للتحميل الأول)
هذا المشروع مفتوح المصدر! يمكنك:
- 🐛 الإبلاغ عن الأخطاء
- 💡 اقتراح ميزات جديدة
- 🔄 إرسال Pull Requests
MIT License - يمكن الاستخدام الحر مع ذكر المصدر
- 👤 GitHub: @abumregha
- 📧 Issues: wasel/issues
- إرسال الفواتير عبر البريد الإلكتروني
- دعم عملات مختلفة
- رفع الشعارات المخصصة
- تقارير وإحصائيات
- نسخ احتياطية سحابية
- تطبيق الويب التطبيق (Web App)
شكراً لاستخدام مولد الفواتير! 🎉
Thank you for using Invoice Generator!