# Smart Nutrition Experience — Saudi German Hospital

تصور رقمي متكامل (Concept Package) لتحويل تجربة تغذية المرضى في المستشفى السعودي الألماني من عملية ورقية تقليدية إلى منظومة رقمية ذكية، آمنة، وشخصية بالكامل — تشمل الهوية البصرية، نظام التصميم، أبحاث تجربة المستخدم، نماذج تفاعلية قابلة للنقر لكل الأدوار، لوحات معلومات تنفيذية، العمارة التقنية، وخطة التنفيذ التشغيلية.

> ⚠️ **هذا موقع ثابت (Static Website) تصوّري بالكامل.** لا يوجد خادم فعلي، ولا اتصال حقيقي بواتساب Business API أو أنظمة المستشفى (HIS/EMR/ADT/LIS/الصيدلية/الفوترة) أو محرك ذكاء اصطناعي حقيقي. كل الشاشات، البيانات، والتفاعلات هي محاكاة (mock) لأغراض العرض والتقييم فقط.

---

## 🎯 نظرة عامة على المشروع

| | |
|---|---|
| **اسم المشروع** | Smart Nutrition Experience |
| **الجهة** | المستشفى السعودي الألماني (Saudi German Hospital) |
| **الهدف** | حزمة تحوّل رقمي كاملة لخدمة التغذية العلاجية، جاهزة للعرض على لجنة التقييم "كأنها جاهزة للتنفيذ الفعلي من اليوم الأول" |
| **اللغة** | عربي (RTL) أساسي + إنجليزي ثنائي اللغة |
| **الخط** | IBM Plex Sans Arabic (عربي) + Inter (إنجليزي) |
| **قناة التواصل الرسمية** | **واتساب فقط** — لا يوجد تسجيل أو تحقق برسائل SMS |

---

## ✅ الميزات المكتملة

### 1) الهوية والتصميم
- **Brand Book** (`brand-book.html`) — الهوية الأساسية، قواعد الشعار، الطباعة، **دليل ألوان الحميات الرسمي الكامل (29 حمية — الإصدار v2.0)**.
- **Design System / UI Kit** (`ui-kit.html`) — مكتبة مكوّنات: أزرار، بطاقات، بطاقة وجبة، شرائح حميات، نماذج وOTP عبر واتساب، حالات نظام، تجربة تابلت وباركود.
- **دليل ألوان الحميات — مصدر واحد للحقيقة**: 18 حمية أصلية من `Dietary_Color_Codes_Guide.pdf` + **11 حمية جديدة** من الإصدار المحدَّث `Dietary_Color_Codes_Guide_SGH.pdf` (v2.0)، مُدارة بالكامل عبر `js/diet-colors.js` و `css/tokens.css` (متغيرات CSS مركزية).

### 2) أبحاث تجربة المستخدم
- **UX Research** (`ux-research.html`) — Personas لكل الأدوار (مريض، مرافق، طبيب، أخصائي تغذية)، رحلة المريض والمرافق (منفصلتان تماماً)، Service Blueprint، بنية المعلومات.
- **Storyboard** (`storyboard.html`) — 8 لقطات بصرية لقصة المريض الكاملة، تشمل لقطة مخصّصة لرابط واتساب الذكي.

### 3) النماذج التفاعلية القابلة للنقر
- **بوابة المريض والمرافق** (`prototype-patient.html`):
  - **حسابان مستقلان تماماً** — لا يوجد أي تبديل أدوار (toggle) داخل حساب واحد؛ شاشة دخول محايدة لاختيار الحساب (مريض / مرافق).
  - **الدخول والتسجيل عبر واتساب فقط**، بواسطة **رقم الجوال المسجّل** لكل حساب (رقم مختلف للمريض وللمرافق).
  - **رقم جوال تجريبي جاهز للعرض: `00966547070721`**.
  - **طلب الوجبة الرئيسية يوماً كاملاً مسبقاً** (Day-Ahead Ordering) مع بانرات توضّح موعد القطع (Cutoff) بوضوح.
  - **الإضافات والزيادات** («إضافات وزيادات») تُطلب أثناء التقديم الرئيسي أو بعده، بشاشة مستقلة (`s-extras`) تعرض **المتاح فقط**.
  - **موعد التسليم قابل للاختيار الفعلي من المريض/المرافق** (Selectable) عبر مجموعة أزرار راديو (`role="radiogroup"`) لأي من نوافذ التسليم الرسمية الثلاث المطابقة لأوقات تقديم الوجبات الفعلية بالمطبخ (مُستخرجة من `High_Calorie_Diet.pdf`): الفطور ٧:٠٠–٩:٠٠ ص، الغداء ١٢:٠٠–٢:٣٠ م، العشاء ٧:٠٠–٩:٣٠ م — لا يمكن اختيار وقت تسليم خارج هذه النافذة الرسمية.
  - **لا يوجد حقل رقم الملف الطبي (MRN) في واجهة المريض/المرافق نهائياً** — الدخول والتعرّف على الحساب عبر رقم الجوال المسجّل فقط؛ رقم الملف الطبي أصبح للاستخدام الداخلي من طرف التمريض/أخصائي التغذية فقط (انظر بوابة الطاقم أدناه).
  - **تلوين تلقائي للواجهة بالكامل بلون الحمية المعتمدة للمريض** (Diet-Aware Theming) — عند اعتماد الطبيب/أخصائي التغذية لحمية معيّنة، تتحول ألوان التطبيق (البطاقة الرئيسية، الأزرار، الأيقونات) بالكامل لتطابق لون تلك الحمية من الدليل الرسمي. تتضمّن الشاشة الرئيسية قائمة منسدلة توضيحية (Demo) لتبديل الحمية ومعاينة التلوين مباشرة.
- **بوابات الطاقم الطبي والمطبخ** (`prototype-staff.html`) — أخصائي التغذية، الطبيب، لوحة المطبخ (Kanban)، التمريض، الإدارة.
  - **بحث بالوكالة عبر رقم الملف الطبي (MRN) — محصور بصلاحية التمريض/أخصائي التغذية**: شاشة التمريض تتيح البحث برقم الملف الطبي وتنفيذ طلب الوجبة ووقت التسليم بالوكالة عن المريض في حال تعذّر اختياره بنفسه، مع بانر توضيحي وسجلّ تتبّع (Audit) — المريض لا يرى أو يُدخل رقم الملف الطبي في تطبيقه أبداً.
  - **لوحة إدارة الحميات وألوانها بلا حد أعلى**: بوابة الإدارة تتيح لأخصائي التغذية/مدير النظام إضافة أي عدد من الحميات الجديدة وألوانها في أي وقت، مخزَّنة عبر RESTful Table API حقيقي (`tables/diets`) بدل قائمة ثابتة مغلقة.
- **لوحات المعلومات التنفيذية** (`dashboards.html`) — مؤشرات أداء تشغيلية وسريرية مبنية على Chart.js.

### 4) البنية والتخطيط التنفيذي
- **العمارة التقنية** (`architecture.html`) — طبقات النظام، تدفّق الطلبات، التكامل (HIS/EMR/LIS/الصيدلية/**واتساب Business API**)، الأمن، ونموذج البيانات (ERD يشمل كيان Companion كحساب مستقل بالكامل).
- **خطة التنفيذ** (`roadmap.html`) — 4 مراحل (26 أسبوعاً)، إدارة التغيير، التدريب، سجل المخاطر، استمرارية التشغيل.
- **البروشور التنفيذي** (`brochure.html`) — ملخّص قابل للطباعة، بزر طباعة مباشر.
- **فهرس كل المخرجات** (`deliverables.html`) — فهرس مركزي بكل صفحات المشروع.

---

## 🔗 خريطة الصفحات (Entry URIs)

| المسار | المحتوى |
|---|---|
| `index.html` | الصفحة الرئيسية — نظرة عامة، شريط ألوان الحميات، فهرس المخرجات، رحلة المريض |
| `brand-book.html` | Chapter 01 — الهوية البصرية + دليل ألوان الحميات (29 حمية) |
| `ui-kit.html` | Chapter 02 — مكتبة مكوّنات التصميم |
| `ux-research.html` | Chapter 03 — Personas، الرحلات، Service Blueprint |
| `storyboard.html` | Chapter 04 — القصة البصرية (8 لقطات) |
| `prototype-patient.html` | Chapter 05 — بوابة المريض والمرافق (نموذج تفاعلي) |
| `prototype-staff.html` | Chapter 06 — بوابات الطاقم والمطبخ والإدارة |
| `dashboards.html` | Chapter 07 — لوحات المعلومات التنفيذية |
| `architecture.html` | Chapter 08 — العمارة التقنية والتكامل |
| `roadmap.html` | Chapter 09 — خطة التنفيذ التشغيلية |
| `brochure.html` | Chapter 10 — البروشور التنفيذي (قابل للطباعة) |
| `deliverables.html` | فهرس شامل لكل المخرجات |

لا توجد معاملات URL ديناميكية — كل التنقّل داخل صفحات النماذج التفاعلية (`prototype-patient.html`, `prototype-staff.html`) يتم عبر JavaScript من جانب العميل فقط (`go(screenId)` وتبويبات `.portal-tabs`).

---

## 🎨 دليل ألوان الحميات — 29 حمية (v2.0)

المصدر: `reference/Dietary_Color_Codes_Guide.pdf` (18 حمية أصلية) + `reference/Dietary_Color_Codes_Guide_SGH.pdf` (الإصدار v2.0 المحدَّث، يضيف 11 حمية جديدة).

- **18 حمية أصلية**: قيم الألوان مأخوذة حرفياً ومؤكّدة من الدليل الأصلي — **لا تُعدَّل**.
- **11 حمية جديدة** (Toddler, School-Age, Adolescent, Vegan, Cardiac/Heart-Healthy, High Fiber, Low Potassium, Neutropenic, Bariatric, Ketogenic, Infant): تحمل ألوان مؤقتة **جيدة ومتّسقة** مع النظام البصري الحالي (مُعلَّمة بـ `isNew:true` وبشارة "جديد" في واجهة Brand Book)، لحين استلام ملف الترميز اللوني الرسمي المخصّص للحميات الجديدة من العميل. عند استلامه، يكفي تحديث قيم `hex` في `js/diet-colors.js` و `css/tokens.css` فقط — كل الشاشات ستتحدث تلقائياً لأن كل الواجهات تستهلك هذا المصدر الموحّد.
- **التلوين التلقائي للتطبيق**: في `prototype-patient.html`، تتلوّن واجهة المريض بالكامل تلقائياً بلون حميته المعتمدة (وليس لوناً ثابتاً)، مطبَّقة عبر متغيرات CSS ديناميكية (`--diet-theme-color`) يتم تحديثها بجافاسكريبت عند اعتماد/تبديل الحمية.

---

## ⏱️ نموذج توقيت الطلبات

مستخرج من ملف القائمة الرسمي `reference/High_Calorie_Diet.pdf` (نماذج طلب الوجبات لكل يوم تتضمّن حقل "أوقات تقديم الوجبة"):

| الوجبة | نافذة التسليم الرسمية |
|---|---|
| الفطور | ٧:٠٠ – ٩:٠٠ صباحاً |
| الغداء | ١٢:٠٠ – ٢:٣٠ ظهراً |
| العشاء | ٧:٠٠ – ٩:٣٠ مساءً |

- **الوجبة الرئيسية**: تُطلب يوماً كاملاً مسبقاً (Day-Ahead)، مع موعد قطع (Cutoff) واضح — بعده تُغلق نافذة الطلب الرئيسي ليوم الغد.
- **الإضافات والزيادات**: تبقى مرنة — يمكن طلبها أثناء تقديم الطلب الرئيسي أو بعده، وحتى قرب وقت التسليم مباشرة، وتُعرض **فقط الوجبات المتاحة حالياً** حسب مطبخ اليوم وحمية المريض المعتمدة.

---

## 📱 نموذج المصادقة (Authentication Concept)

- **القناة الرسمية الوحيدة: واتساب** — لا يوجد أي مسار تسجيل أو تحقق عبر رسائل SMS في أي شاشة.
- **الدخول عبر رقم الجوال المسجّل فقط** — لا يُطلب من المريض إدخال أو معرفة رقم الملف الطبي (MRN) في أي وقت. رقم الملف الطبي أصبح للاستخدام الداخلي فقط من طرف التمريض/أخصائي التغذية (بوابة الطاقم)، لحالات تعذّر اختيار المريض بنفسه (طلب بالوكالة).
- **رقم جوال تجريبي للعرض والاختبار: `00966547070721`**.
- **فصل كامل بين حساب المريض وحساب المرافق**: كل حساب له رقم جواله الخاص، رمز تحقق (OTP) خاص به، وسجلّ طلبات وفاتورة مستقلة تماماً. المرافق يحصل على ربط "قراءة فقط" باسم/غرفة المريض دون أي صلاحية على حميته أو طلباته الطبية.

---

## 🚧 ميزات غير مكتملة / خارج نطاق الموقع الثابت

1. **لا يوجد إرسال واتساب حقيقي** — كل رسائل الواتساب المعروضة (`.wa-preview`) هي معاينة مرئية ثابتة، وليست متصلة بـ WhatsApp Business API فعلياً.
2. **لا يوجد تحقق OTP حقيقي** — الرموز المعروضة (مثل `482917`) ثابتة في الكود لأغراض العرض.
3. **لا يوجد تكامل فعلي** مع HIS / EMR / ADT / LIS / نظام الصيدلية / نظام الفوترة — كل ما ورد في `architecture.html` هو تصميم/توصية معمارية موثّقة، غير مُنفَّذ.
4. **لا يوجد محرك ذكاء اصطناعي حقيقي** للتوصيات الغذائية أو التنبؤ بالطلب — التوصيات المعروضة نصوص توضيحية ثابتة.
5. **الألوان الرسمية لـ 11 الحمية الجديدة (v2.0) مؤقتة** — تنتظر ملف الترميز اللوني الرسمي المخصّص من العميل (راجع القسم أعلاه).
6. **لا توجد قاعدة بيانات فعلية لبيانات المرضى/الطلبات** — بيانات `js/meals-data.js` ثابتة (Static Array)، وقائمة بحث المرضى التجريبية في شاشة التمريض (`NURSE_DEMO_PATIENTS`) بيانات محاكاة ثابتة فقط، وليست اتصالاً حقيقياً بنظام HIS/ADT للمستشفى.
7. **`dashboards.html`** لم تُدخَل عليه التعديلات الخاصة بواتساب/فصل المرافق لأنها غير معنية به مباشرة — بحاجة لمراجعة مستقبلية إذا تغيّر ذلك الافتراض.
8. **مصدرا بيانات الحميات غير موحَّدين برمجياً بعد**: القائمة الثابتة `js/diet-colors.js` (تستخدمها `brand-book.html` ومُحدِّد التلوين في `prototype-patient.html`) وجدول `diets` عبر Table API (يستخدمه فقط لوحة «إدارة الحميات» الجديدة في `prototype-staff.html`) مصدران منفصلان حالياً — حمية تُضاف من لوحة الإدارة تُحفظ في جدول `diets` ولا تنعكس تلقائياً بعد على `js/diet-colors.js`. التوحيد الكامل بينهما بند مستقبلي.
9. **ملف الترميز اللوني الإضافي** الذي أشار العميل لإرفاقه (لحميات/ألوان جديدة إضافية بعد الإصدار v2.0) لم يصل بعد بمحتواه الفعلي إلى فريق التنفيذ — بحاجة لإعادة رفعه لتحديث القيم الرسمية.

---

## 🎯 الخطوات التالية الموصى بها

### أولوية عالية
1. استلام ملف الترميز اللوني الرسمي المحدَّث (الذي أشار العميل لإرفاقه) لأي حميات/ألوان إضافية جديدة، وتحديث القيم الرسمية في جدول `diets` (Table API) و/أو `js/diet-colors.js` + `css/tokens.css`.
2. توحيد مصدر بيانات الحميات: ربط `brand-book.html` ومُحدِّد التلوين في `prototype-patient.html` بجدول `diets` (Table API) ليصبح مصدراً واحداً حقيقياً، بدل الاعتماد على `js/diet-colors.js` الثابت فقط — بما يضمن أن أي حمية تُضاف من لوحة إدارة الحميات في `prototype-staff.html` تنعكس فوراً في كل شاشات الموقع.
3. ربط فعلي بـ WhatsApp Business API (اعتماد Provider معتمد من المستشفى) لاستبدال معاينات الرسائل الثابتة برسائل حقيقية.
4. تصميم/تأكيد سياسة موعد القطع (Cutoff) الدقيقة لكل وجبة رئيسية مع فريق التغذية والمطبخ (الوقت المعروض حالياً 4:00 م هو افتراض توضيحي فقط، وليس مستخرجاً حرفياً من ملف القائمة).

### أولوية متوسطة
5. تنفيذ تكامل HIS/EMR/ADT فعلي حسب التصميم الموثّق في `architecture.html`، لاستبدال قائمة البحث التجريبية `NURSE_DEMO_PATIENTS` في شاشة التمريض ببحث فعلي عن ملفات المرضى الحقيقية.
6. بناء سجل تدقيق (Audit Log) فعلي ومخزَّن للطلبات بالوكالة (Proxy Orders) التي ينفّذها التمريض/أخصائي التغذية عبر بحث رقم الملف الطبي (MRN)، بدل العنصر التوضيحي الحالي في الواجهة فقط.
7. بناء لوحة تحكم فعلية لأخصائي التغذية لتعديل/اعتماد الحمية وربطها مباشرة بآلية التلوين التلقائي في واجهة المريض.
8. مراجعة `dashboards.html` لأي حاجة مستقبلية لدعم واتساب أو حسابات مرافقين.

### أولوية منخفضة
9. توسيع مكتبة الوجبات في `js/meals-data.js` لتشمل بقية أيام الأسبوع من `High_Calorie_Diet.pdf` (حالياً الأحد والاثنين فقط).
10. إضافة دعم تعدد اللغات الكامل (تبديل عربي/إنجليزي فعلي بدلاً من ثنائية اللغة الثابتة الحالية).

---

## 🗂️ نماذج البيانات (Data Models)

معظم بيانات الموقع ثابتة (Static) داخل ملفات JavaScript لأن الهدف تصوّري/عرضي بالكامل. **استثناء واحد**: جدول `diets` الذي يستخدم RESTful Table API حقيقياً (`tables/diets`) لدعم ميزة «إضافة عدد غير محدود من الحميات» من لوحة الإدارة.

### `js/diet-colors.js` — `DIET_COLORS[]` (ثابت — Static)
```js
{ id, nameAr, nameEn, hex, isNew? }
```
29 عنصراً (18 أصلي + 11 جديد بعلامة `isNew:true`). دالة مساعدة: `dietById(id)`. يُستخدم حالياً في `brand-book.html` ومُحدِّد التلوين في `prototype-patient.html`.

### `tables/diets` — Table API (ديناميكي — Dynamic)
```js
{
  id, name_ar, name_en, hex_color,
  is_new, is_provisional_color, is_active,
  notes, added_by_role  // system_seed | dietitian | doctor | admin
}
```
مبدوء بـ 29 صفاً مطابقاً لـ `DIET_COLORS[]`. تستخدمه حالياً فقط لوحة «إدارة الحميات وألوانها» في بوابة الإدارة (`prototype-staff.html`)، التي تسمح لأخصائي التغذية/مدير النظام بإضافة **أي عدد** من الحميات الجديدة وألوانها في أي وقت دون حد أعلى ودون تعديل برمجي. **ملاحظة**: هذا الجدول غير موحَّد بعد مع `js/diet-colors.js` الثابت (انظر البند 8 في قسم الميزات غير المكتملة).

### `js/meals-data.js` — `MEALS[]` (ثابت — Static)
```js
{
  id, diet, day, course,
  nameAr, nameEn, img,
  kcal, protein, carbs, fat, sodium, fiber,
  allergens[], prepTime, tags[],
  suitableFor, notFor,
  extra?  // true = وجبة "إضافات وزيادات" بتوقيت مرن، بخلاف الوجبة الرئيسية (يوم مسبق)
}
```
16 وجبة حقيقية من قائمة "حمية عالية السعرات" الرسمية (يومي الأحد والاثنين). دالة مساعدة: `mealsByDiet(dietId)`.

---

## 🌐 عناوين النشر (Public URLs)

هذا مشروع موقع ثابت (Static Site) — للنشر ومشاهدة الموقع مباشرة على الإنترنت، استخدم **تبويب النشر (Publish tab)** في أعلى الواجهة، والذي سيتولى عملية النشر بالكامل ويوفّر رابط الموقع المباشر (Live URL) تلقائياً.

---

## 🛠️ البنية التقنية

- **HTML5 + CSS3 (متغيرات مخصّصة/Design Tokens) + Vanilla JavaScript** — بدون أي إطار عمل (Framework).
- **Font Awesome 6.4** (أيقونات، عبر jsDelivr CDN) — تشمل `fa-brands fa-whatsapp` لعلامة واتساب.
- **Chart.js** (عبر jsDelivr CDN) — للوحات المعلومات التنفيذية في `dashboards.html`.
- **Google Fonts**: IBM Plex Sans Arabic + Inter.
- **بنية الملفات**:
```
index.html                 صفحة رئيسية
brand-book.html             Chapter 01
ui-kit.html                 Chapter 02
ux-research.html            Chapter 03
storyboard.html              Chapter 04
prototype-patient.html      Chapter 05 — بوابة المريض/المرافق
prototype-staff.html        Chapter 06 — بوابات الطاقم
dashboards.html              Chapter 07
architecture.html            Chapter 08
roadmap.html                  Chapter 09
brochure.html                 Chapter 10
deliverables.html            فهرس المخرجات
css/
  tokens.css                 متغيرات التصميم + ألوان الحميات (29)
  base.css                   إعادة ضبط + طباعة + هيكل الصفحة العام
  components.css              مكتبة المكوّنات القابلة لإعادة الاستخدام
js/
  diet-colors.js              DIET_COLORS[] + dietById()
  meals-data.js                MEALS[] + mealsByDiet()
images/                        صور الوجبات، الشعارات
reference/                     ملفات PDF المرجعية الرسمية (لا تُنشر كصفحات مستخدم)
```

---

## 📄 ملاحظة الملكية

جميع المحتويات النصية، الألوان، وأسماء الوجبات مبنية على ملفات رسمية زوّدنا بها المستشفى السعودي الألماني (`Dietary_Color_Codes_Guide.pdf`, `Dietary_Color_Codes_Guide_SGH.pdf`, `High_Calorie_Diet.pdf`) ولا تُستخدم لأي غرض آخر خارج نطاق هذا التصوّر الرقمي.

---

**حالة المشروع**: ✅ حزمة تصوّرية كاملة (12 مخرجاً) — جاهزة للعرض والتقييم.