تركيبة التطبيق
تم بناء رصد باستخدام مجموعة من التقنيات الحديثة المفتوحة المصدر:
- Next.js (App Router) — إطار عمل React للتطبيقات الحديثة، مع تصدير ثابت (Static Export) للنشر على GitHub Pages
- Leaflet + leaflet-draw — مكتبة الخرائط التفاعلية مفتوحة المصدر مع دعم رسم الأشكال، مُعرَّبة بالكامل
- OpenStreetMap — بيانات الخرائط المجانية والمفتوحة
- shadcn/ui + Tailwind CSS — مكونات الواجهة والتصميم
- SheetJS (xlsx) — استيراد وتصدير ملفات Excel بدون خادم
- Lucide React — أيقونات SVG تُستخدم في الواجهة وعلى الخريطة بنفس الشكل
- IBM Plex Sans Arabic — الخط المستخدم في التطبيق
كيف يعمل التطبيق
البيانات في الذاكرة فقط
لا يوجد قاعدة بيانات ولا خادم خلفي. جميع العلامات والأشكال التي تضيفها تعيش فقط في ذاكرة المتصفح (useState / useReducer عبر React Context). عند إغلاق أو تحديث الصفحة تختفي البيانات تلقائياً — استخدم زر حفظ لتصدير ملف XLSX على جهازك.
الاستيراد والتصدير (XLSX)
يُصدَّر ملف إكسل بورقتين:
- Data — جميع النقاط والأشكال (خطوط، مضلعات، دوائر) بعناوين عربية
- Templates — إعدادات قوالب البريد الإلكتروني (رأس، نص، ذيل، موظف، منظمة، قائمة البنود)
عند الاستيراد، يُقبل الملف بعناوين عربية أو إنجليزية (توافق مع الإصدارات القديمة).
دائرة البحث
انقر بزر الفأرة الأيمن على الخريطة واختر "بحث في هذه المنطقة". يمكنك:
- ضبط نطاق الدائرة بالشريط أو بإدخال الإحداثيات مباشرة
- حفظ الدائرة كشكل دائم
- النقر على دائرة محفوظة لتصفية القائمة الجانبية بما بداخلها
- توليد قالب بريد إلكتروني جاهز للإرسال لكل شركة داخل الدائرة
قائمة العناصر الموحدة
جميع النقاط والأشكال في قائمة واحدة مرتبة بالمسافة من مركز الخريطة. الفلاتر المتاحة:
- نوع العنصر — نقاط / خطوط / مضلعات / دوائر
- نوع الأيقونة — برج اتصالات / كاميرا / سيارة / شخص / افتراضي
- الشركة — أسماء الشركات المُدخلة + "بلا منظمة"
عند تفعيل أي فلتر، تختفي العناصر غير المطابقة من الخريطة تلقائياً.
بلوك خرائط OpenStreetMap
الخريطة نفسها تُحمَّل من خوادم OpenStreetMap العامة. مزود الخرائط يعلم بأن مربعات خريطة معينة طُلبت من عنوان IP خاص بك، لكنه لا يرى النقاط أو البيانات التي تضيفها — لأنها لا تُرسل إليه أبداً.
المستودع
الكود المصدري متاح على github.com/mo9a7i/majd-maps.
الأمان وأدوات المطورين
يمكنك التحقق من سلوك التطبيق بنفسك:
- افتح أدوات المطور في المتصفح (F12)
- انتقل إلى تبويب Network
- أضف علامة وراقب أن لا طلبات شبكة تُرسَل لخوادمنا
- انظر إلى تبويب Application → Local Storage — ستجده فارغاً تماماً