تطبيق ويب (PWA) لحجز المواعيد وسجلات المرضىمنفّذ ومنشور
نظام حجز وإدارة المرضى
لصالح: عيادة د. حيدر عباس (عيادة الألم المزمن) · بغداد
تطبيق ويب يتيح للمريض حجز موعد بدون تسجيل، ويمنح الطبيب لوحة واحدة لاستقبال طلبات الحجز وإدارة السجل الطبي الكامل لكل مريض.
A web app (PWA) for appointment booking and patient recordsBuilt and deployed
Patient Booking & Management System
For: Dr. Haidar Abbas Clinic (chronic pain) · Baghdad
A web app that lets patients book an appointment without signing up, and gives the doctor one dashboard to receive booking requests and manage each patient's full medical record.
الحاجة
تحتاج العيادة إلى قناة حجز واضحة للمريض، ومكان منظّم للطبيب يجمع طلبات الحجز مع تفاصيل كل حالة: التاريخ المرضي، الفحص، الخطة العلاجية، وصور الفحوصات.
بدون نظام موحّد تتفرق هذه المعلومات بين المحادثات والملفات الورقية والصور المتفرقة، فيصعب البحث فيها أو متابعة المريض بين الزيارات.
الحل
بنينا تطبيقاً من صفحة واحدة يعمل على الموبايل والحاسبة ويمكن تثبيته كتطبيق. للمريض صفحة عامة بالعربية (من اليمين لليسار) فيها نموذج حجز قصير وأيقونات سريعة للتواصل مع العيادة (واتساب، فيسبوك، إنستغرام، يوتيوب، وموقع العيادة على Waze).
وللطبيب لوحة محمية بتسجيل الدخول: تصله طلبات الحجز مع إشعار فوري حتى والتطبيق مغلق، فيؤكدها أو يلغيها أو يحوّلها إلى سجل مريض بنقرة. ويدوّن كل شيء بنموذج منظّم، ثم يبحث في كل الحقول من مربع بحث واحد.
الميزات الرئيسية
حجز موعد من المريض بدون إنشاء حساب (الاسم، الهاتف، العمر، التاريخ المفضل، سبب الزيارة).
إشعارات فورية للطبيب عند وصول حجز جديد (Web Push) حتى لو كان التطبيق مغلقاً.
إدارة طلبات الحجز: تأكيد، إلغاء، حذف، تواصل عبر واتساب برابط مباشر، وتحويل الطلب إلى سجل مريض بنقرة.
سجل مريض منظّم: بيانات أساسية، تاريخ مرضي، وصف الألم ودرجته (VAS)، علامات الخطر، الفحص السريري، التشخيص والخطة العلاجية، وخطة المتابعة.
رسم موضع الألم مباشرة على مخطط الجسم (باللمس أو بالماوس) وحفظه مع السجل.
إرفاق صور الفحوصات (رنين، سونار، تحاليل) مع ضغطها تلقائياً داخل المتصفح قبل الحفظ.
بحث فوري في كل حقول سجلات المرضى.
استيراد الصور القديمة من مجلدات (مجلد لكل مريض) وربطها بسجل المريض.
الأدوار والصلاحيات
المريض (زائر بدون حساب)يرى الصفحة العامة ويرسل طلب حجز فقط، ولا يرى أي بيانات.
البيانات والدخولSupabase: PostgreSQL ومصادقة بالبريد وكلمة المرور
الإشعارات والصورWeb Push · Cloudinary للصور القديمة المستوردة
الحالة الحالية
منفّذ ومنشور.
لوحة الطبيب بالإنجليزية وصفحة المريض بالعربية.
يحتاج إنترنت للعمل؛ عند انقطاعه يفتح هيكل التطبيق فقط.
خطوة قادمة محتملة: تعريب لوحة الطبيب إن رغب الدكتور.
لقطات من النظام
الصفحة الرئيسية: الاختيار بين «حجز موعد» للمريض و«دخول الطبيب».نموذج حجز الموعد العام للمريض بالعربية (من اليمين لليسار).لوحة الطبيب: طلبات الحجز الجديدة مع عدّاد وأزرار التأكيد والإلغاء والتحويل إلى سجل.قائمة المرضى كبطاقات مع بحث فوري ومؤشرات الصور المرفقة.نافذة سجل المريض: بيانات أساسية وتاريخ مرضي وتفاصيل الحالة.نموذج مريض جديد: رسم موضع الألم على مخطط الجسم.
The need
A clinic needs a clear booking channel for patients and an organized place for the doctor that brings booking requests together with each case's details: history, examination, treatment plan and imaging.
Without one system this information scatters across chats, paper files and loose photos, making it hard to search or to follow a patient across visits.
The solution
We built a single-page app that works on mobile and desktop and installs like a native app. Patients get a public Arabic (right-to-left) page with a short booking form and quick links to the clinic (WhatsApp, Facebook, Instagram, YouTube and the clinic location on Waze).
The doctor gets a login-protected dashboard: booking requests arrive with an instant notification even when the app is closed, and can be confirmed, cancelled or turned into a patient record in one tap. Records are written in a structured form and searched across every field from one search box.
Key features
Patient booking with no account (name, phone, age, preferred date, reason for visit).
Instant doctor notifications for new bookings (Web Push), even when the app is closed.
Request management: confirm, cancel, delete, one-tap WhatsApp contact, and convert a request into a patient record.
Structured patient record: basic info, medical history, pain description and score (VAS), red-flag symptoms, clinical examination, diagnosis, treatment plan and follow-up plan.
Draw the pain location directly on a body diagram (touch or mouse) and save it with the record.
Attach imaging and lab images (MRI, ultrasound, labs), automatically compressed in the browser before saving.
Instant search across every patient-record field.
Bulk import of old photos from folders (one folder per patient), linked to the patient record.
Roles and permissions
Patient (anonymous visitor)Sees the public page and can only submit a booking request. Sees no data.
Doctor (signed in)Manages booking requests, records, images and settings.
Outcome
A system that works end to end, from booking to the full record, and is deployed online.
The interface was checked on mobile and desktop, and every feature above is implemented.
The interface was fully redesigned while keeping the same logic.
Technologies
InterfaceHTML · CSS · JavaScript with no UI framework · PWA (service worker and manifest)
Data and sign-inSupabase: PostgreSQL and email/password authentication
Notifications and imagesWeb Push · Cloudinary for imported legacy photos
Current status
Built and deployed.
The doctor dashboard is in English; the patient page is in Arabic.
It needs an internet connection; offline it only opens the app shell.
A possible next step: localizing the doctor dashboard to Arabic if the doctor wants it.
System screenshots
Home page: choose between «Book an appointment» for patients and «Doctor login».The public patient booking form in Arabic (right-to-left).Doctor dashboard: new booking requests with a counter and confirm, cancel and convert-to-record actions.Patient list as cards with instant search and attached-image indicators.Patient record view: basic info, medical history and case details.New-patient form: marking the pain location on the body diagram.
