Skip to content

Latest commit

 

History

21 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 

Repository files navigation

مولد الفواتير - Invoice Generator

تطبيق ويب عصري لإنشاء وإدارة الفواتير مع دعم كامل للعربية والإنجليزية، بصيغة PWA للعمل بدون إنترنت.

English: A modern web application for creating and managing invoices with full Arabic/English support as a PWA for offline functionality.


✨ المميزات الرئيسية | Key Features

🌍 واجهة متعددة اللغات | Bilingual Interface

  • ✅ دعم كامل للعربية (RTL) والإنجليزية (LTR)
  • ✅ خطوط عربية احترافية (Noto Sans Arabic)
  • ✅ تبديل لحظي بين اللغات
  • ✅ تصميم متجاوب (Responsive) - هواتف وحاسبات

🎨 تخصيص شامل | Full Customization

  • اسم الشركة: نص شعار مع حجم وألوان قابلة للتخصيص
  • شعار الشركة: رفع صور PNG/JPG (حتى 500KB)
  • 6 ألوان ثيم: أزرق، أخضر، أحمر، برتقالي، بنفسجي، أسود
  • حفظ تلقائي: الثيم يُطبق على جميع الفواتير المستقبلية

📄 إنشاء الفواتير | Invoice Creation

  • بيانات العميل: الاسم، الهاتف، العنوان، البريد الإلكتروني
  • نوع الفاتورة: مبدئية أو نهائية
  • جدول منظم:
    • اسم العنصر | السعر | الكمية | الإجمالي
    • حساب تلقائي للإجمالي الكلي
    • تتبع المدفوع والمتبقي
  • رقم تسلسلي ذكي: YYYYMMDD-{UUID} (مثال: 20260102-ab12cd34)

📦 التخزين المحلي | Local Storage

  • ✅ تخزين 100+ فاتورة محلياً
  • ✅ بدون حاجة لقاعدة بيانات
  • ✅ الفواتير تبقى حتى بعد إغلاق المتصفح

📊 التصدير والمشاركة | Export & Sharing

  • معاينة PDF: عرض فوري في tab جديد
  • تصدير PDF: مع شعار الشركة والألوان المخصصة
  • Barcode: رقم تسلسلي في شكل باركود
  • تصدير/استيراد JSON: نسخ احتياطية كاملة
  • نسخ النص: انسخ تفاصيل الفاتورة للصق

📱 PWA كامل | Full Progressive Web App

  • manifest.json للإضافة إلى الشاشة الرئيسية
  • ✅ Service Worker للعمل بدون إنترنت
  • ✅ حجم صغير جداً: < 20KB (HTML + CSS + JS)
  • ✅ تحميل فوري بدون تأخير

🚀 الإعدادات السريعة | Quick Setup

المتطلبات | Requirements

  • متصفح حديث يدعم:
    • ES6 JavaScript
    • LocalStorage API
    • Service Workers
    • jsPDF و JsBarcode (عبر CDN)

التشغيل المحلي | Local Development

# 1. نسخ المستودع
git clone https://github.com/abumregha/wasel.git
cd wasel

# 2. تشغيل خادم محلي
python3 -m http.server 8000

# 3. فتح في المتصفح
# http://localhost:8000

الاستضافة | Hosting

يمكن استضافة التطبيق على:

  • GitHub Pages
  • Vercel
  • Netlify
  • أي خادم ويب عادي (Apache, Nginx, إلخ)

📖 كيفية الاستخدام | Usage Guide

1️⃣ تخصيص الشركة | Customize Company

1. اضغط على "تخصيص الشركة" (Customize Company)
2. أدخل اسم شركتك
3. اختر اللون المفضل (6 خيارات)
4. اضغط "حفظ" (Save)

2️⃣ إنشاء فاتورة جديدة | Create Invoice

1. اضغط على "فاتورة جديدة" (New Invoice)
2. اختر نوع الفاتورة (مبدئية/نهائية)
3. أدخل بيانات العميل
4. أضف العناصر في الجدول:
   - اسم العنصر
   - السعر
   - الكمية
   - الإجمالي (يُحسب تلقائياً)
5. أدخل المبلغ المدفوع

3️⃣ معاينة وتصدير | Preview & Export

1. اضغط "معاينة" (Preview) لرؤية PDF
2. اضغط "تصدير" (Export) لتحميل PDF
3. اضغط "حفظ" (Save) لحفظ في localStorage

4️⃣ تصدير/استيراد | Export/Import Data

- تصدير JSON: احفظ جميع الفواتير كملف
- استيراد JSON: استعد من نسخة احتياطية
- نسخ النص: انسخ تفاصيل الفاتورة

📁 هيكل المشروع | Project Structure

wasel/
├── index.html           # الهيكل الأساسي
├── style.css           # التصميم والثيمات
├── script.js           # كل الوظائف (خوارزميات، حسابات، أحداث)
├── manifest.json       # إعدادات PWA
├── sw.js               # Service Worker (offline)
├── README.md           # هذا الملف
└── LICENSE             # الرخصة

🛠️ التكنولوجيا المستخدمة | Technology Stack

المكون التقنية
الواجهة HTML5 + CSS3 + Vanilla JavaScript
الخطوط Google Fonts (Noto Sans Arabic)
PDF jsPDF 2.5.1
Barcode JsBarcode 3.11.5
PWA Service Workers + Manifest
التخزين LocalStorage API

📊 الميزات التقنية | Technical Features

Performance | الأداء

  • حجم صغير: < 20KB (بدون مكتبات خارجية كبيرة)
  • تحميل فوري: بدون تأخير على الهواتف
  • بدون قاعدة بيانات: LocalStorage محلي فقط

Accessibility | إمكانية الوصول

  • ✅ دعم RTL/LTR
  • ✅ ألوان حقيقية وليست ملصقة
  • ✅ عناصر HTML سيمانتية

Security | الأمان

  • ✅ بدون إرسال بيانات للخادم
  • ✅ البيانات تبقى محلياً فقط
  • ✅ JSON export للنسخ الاحتياطية اليدوية

🔄 سير العمل | Workflow

تخصيص الشركة → فاتورة جديدة → إضافة عناصر → معاينة PDF → التصدير
     ↓              ↓               ↓              ↓            ↓
  اسم + لون    عميل + نوع      جدول منظم      PDF احترافي   حفظ/مشاركة

💾 حفظ البيانات | Data Management

LocalStorage

  • تخزين تلقائي لكل فاتورة
  • حتى 100+ فاتورة (حسب قدرة المتصفح)
  • بيانات دائمة حتى حذفك يدوياً

JSON Export

{
  "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
}

🐛 الأخطاء المعروفة | Known Issues

  • الأيقونات (icons) قد تحتاج تخصيص لـ PWA المثالية
  • jsPDF يعتمد على CDN (يحتاج إنترنت للتحميل الأول)

🤝 المساهمة | Contributing

هذا المشروع مفتوح المصدر! يمكنك:

  • 🐛 الإبلاغ عن الأخطاء
  • 💡 اقتراح ميزات جديدة
  • 🔄 إرسال Pull Requests

📄 الرخصة | License

MIT License - يمكن الاستخدام الحر مع ذكر المصدر


📞 التواصل | Contact


🎯 الخطوات المستقبلية | Future Enhancements

  • إرسال الفواتير عبر البريد الإلكتروني
  • دعم عملات مختلفة
  • رفع الشعارات المخصصة
  • تقارير وإحصائيات
  • نسخ احتياطية سحابية
  • تطبيق الويب التطبيق (Web App)

شكراً لاستخدام مولد الفواتير! 🎉

Thank you for using Invoice Generator!

About

Invoice generator with custom logo, print and send invoices

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages