admin.html

<!doctype html><html lang="ar" dir="rtl"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#1f7565"><meta name="description" content="إيفاء 360 - منظومة رقمية لمنظومة رقمية موحدة لمتابعة المستفيد">
<title>إيفاء 360 | لوحة الإدارة</title><link rel="stylesheet" href="assets/css/style.css"></head><body>

<a class="skip-link" href="#main">تجاوز إلى المحتوى</a>
<header class="topbar">
  <div class="container topbar-inner">
    <a class="brand" href="index.html" aria-label="إيفاء 360 - الرئيسية">
      <span class="brand-mark"><img src="https://psrc.org.sa/wp-content/uploads/sites/3740/2026/08/IMG_1690.png" alt="شعار إيفاء" loading="eager"></span>
      <span class="brand-copy"><strong>إيفاء 360</strong><span>مجمع الأمير سلطان للتأهيل</span></span>
    </a>
    <button class="icon-btn" data-acc aria-label="إمكانية الوصول">Aa</button>
    <button class="icon-btn" data-role-switch aria-label="تبديل الدور">☷</button>
  </div>
</header>
<main id="main" class="page-shell">
<div class="container admin-command">
  <section class="admin-topbar">
    <div>
      <span class="eyebrow">لوحة الإدارة</span>
      <h1>نظرة شاملة على رحلة المستفيد</h1>
      <p>التعليم، المتابعة، الأسرة، وإيفاء كلينك أمام الإدارة في شاشة واحدة.</p>
    </div>
    <div class="admin-filters">
      <button class="filter-btn active" data-range="today">اليوم</button>
      <button class="filter-btn" data-range="week">الأسبوع</button>
      <button class="filter-btn" data-range="month">الشهر</button>
    </div>
  </section>

  <section class="kpi-grid">
    <article class="kpi-card"><span>إجمالي المستفيدين</span><strong id="kpi-beneficiaries">86</strong><small>جميع البرامج</small></article>
    <article class="kpi-card"><span>الحضور اليوم</span><strong id="kpi-present">74</strong><small>86% من المستفيدين</small></article>
    <article class="kpi-card"><span>الجلسات اليوم</span><strong id="kpi-sessions">18</strong><small>4 تخصصات تأهيلية</small></article>
    <article class="kpi-card"><span>جلسات مكتملة</span><strong id="kpi-completed">14</strong><small>78% من جلسات اليوم</small></article>
    <article class="kpi-card"><span>إشعارات الأسر</span><strong id="kpi-notices">11</strong><small>تم إرسالها اليوم</small></article>
    <article class="kpi-card alert"><span>يحتاج تدخل</span><strong id="kpi-intervention">5</strong><small>غياب / متابعة / جلسات</small></article>
  </section>

  <section class="admin-grid two">
    <article class="dash-panel">
      <div class="panel-head"><div><span>مؤشر الحضور</span><strong>الأداء خلال الفترة</strong></div><b id="attendance-rate">86%</b></div>
      <div class="bar-chart" id="attendance-bars">
        <div><i style="--h:72%"></i><span>الأحد</span></div><div><i style="--h:82%"></i><span>الاثنين</span></div>
        <div><i style="--h:76%"></i><span>الثلاثاء</span></div><div><i style="--h:90%"></i><span>الأربعاء</span></div>
        <div><i style="--h:86%"></i><span>الخميس</span></div>
      </div>
    </article>

    <article class="dash-panel">
      <div class="panel-head"><div><span>إيفاء كلينك</span><strong>توزيع الجلسات حسب التخصص</strong></div><b id="clinic-total">18</b></div>
      <div class="donut-wrap">
        <div class="donut"></div>
        <div class="legend">
          <button class="legend-item active" data-clinic="all"><i class="c1"></i><span>الكل</span><b>18</b></button>
          <button class="legend-item" data-clinic="ot"><i class="c2"></i><span>علاج وظيفي</span><b>6</b></button>
          <button class="legend-item" data-clinic="pt"><i class="c3"></i><span>علاج طبيعي</span><b>5</b></button>
          <button class="legend-item" data-clinic="speech"><i class="c4"></i><span>تخاطب</span><b>4</b></button>
          <button class="legend-item" data-clinic="behavior"><i class="c5"></i><span>علاج سلوكي</span><b>3</b></button>
        </div>
      </div>
    </article>
  </section>

  <section class="admin-grid three">
    <article class="dash-panel metric-list"><div class="panel-head"><div><span>التعليم والمتابعة</span><strong>ملخص الحالات</strong></div></div>
      <div class="metric-row"><span>حضور مكتمل</span><b>74</b></div><div class="metric-row"><span>غياب</span><b>8</b></div>
      <div class="metric-row"><span>انصراف مبكر</span><b>4</b></div><div class="metric-row"><span>ملاحظات معلمين</span><b>16</b></div>
    </article>
    <article class="dash-panel metric-list"><div class="panel-head"><div><span>إيفاء كلينك</span><strong>حالة الجلسات</strong></div></div>
      <div class="metric-row"><span>مكتملة</span><b>14</b></div><div class="metric-row"><span>قادمة</span><b>3</b></div>
      <div class="metric-row"><span>ملغاة</span><b>1</b></div><div class="metric-row"><span>تحديثات خطط</span><b>9</b></div>
    </article>
    <article class="dash-panel metric-list"><div class="panel-head"><div><span>الأسرة</span><strong>التواصل والمتابعة</strong></div></div>
      <div class="metric-row"><span>إشعارات مرسلة</span><b>11</b></div><div class="metric-row"><span>تحتاج تواصل</span><b>3</b></div>
      <div class="metric-row"><span>تم الاطلاع</span><b>9</b></div><div class="metric-row"><span>متابعات مفتوحة</span><b>2</b></div>
    </article>
  </section>

  <section class="admin-grid two">
    <article class="dash-panel">
      <div class="panel-head"><div><span>جلسات اليوم</span><strong>الجدول التأهيلي</strong></div><button class="text-btn" id="toggle-all-sessions">عرض الكل</button></div>
      <div class="session-table">
        <div class="session-row" data-type="ot"><span class="time">10:00</span><div><b>محمد خالد</b><small>علاج وظيفي • أ. سارة أحمد</small></div><em class="status upcoming">قادمة</em></div>
        <div class="session-row" data-type="pt"><span class="time">11:00</span><div><b>سلمان فهد</b><small>علاج طبيعي • أ. خالد علي</small></div><em class="status done">مكتملة</em></div>
        <div class="session-row" data-type="speech"><span class="time">12:00</span><div><b>يوسف ناصر</b><small>تخاطب • أ. ريم ناصر</small></div><em class="status upcoming">قادمة</em></div>
        <div class="session-row" data-type="behavior"><span class="time">13:00</span><div><b>ريان علي</b><small>علاج سلوكي • أ. نورة سعد</small></div><em class="status cancelled">ملغاة</em></div>
        <div class="session-row extra" data-type="ot"><span class="time">13:30</span><div><b>عبدالله أحمد</b><small>علاج وظيفي • أ. هدى محمد</small></div><em class="status done">مكتملة</em></div>
        <div class="session-row extra" data-type="pt"><span class="time">14:00</span><div><b>عمر سعد</b><small>علاج طبيعي • أ. وليد سالم</small></div><em class="status upcoming">قادمة</em></div>
      </div>
    </article>

    <article class="dash-panel">
      <div class="panel-head"><div><span>يحتاج تدخل</span><strong>أولوية المتابعة الإدارية</strong></div><b class="danger-count">5 حالات</b></div>
      <div class="attention-list">
        <button class="attention-case"><i class="red"></i><div><b>عبدالله أحمد</b><small>غياب متكرر هذا الأسبوع</small></div><span>متابعة</span></button>
        <button class="attention-case"><i class="orange"></i><div><b>ريان علي</b><small>إلغاء جلسة سلوكية اليوم</small></div><span>مراجعة</span></button>
        <button class="attention-case"><i class="blue"></i><div><b>يوسف ناصر</b><small>ملاحظة معلم تحتاج إشعار الأسرة</small></div><span>إشعار</span></button>
        <button class="attention-case"><i class="cyan"></i><div><b>محمد خالد</b><small>تقدم الخطة دون المستهدف</small></div><span>الخطة</span></button>
      </div>
    </article>
  </section>

  <section class="dash-panel beneficiaries-panel">
    <div class="panel-head"><div><span>المستفيدون</span><strong>متابعة موحدة للتعليم والتأهيل</strong></div><input id="beneficiary-search" type="search" placeholder="بحث باسم المستفيد"></div>
    <div class="beneficiary-table">
      <div class="beneficiary-head"><span>المستفيد</span><span>الحضور</span><span>آخر جلسة</span><span>التقدم</span><span>المتابعة</span></div>
      <div class="beneficiary-row"><div><b>محمد خالد</b><small>المهارات التعليمية</small></div><span class="tag ok">حاضر</span><span>علاج وظيفي</span><span>92%</span><span class="tag warn">متابعة</span></div>
      <div class="beneficiary-row"><div><b>سلمان فهد</b><small>البرنامج التعليمي</small></div><span class="tag ok">حاضر</span><span>علاج طبيعي</span><span>88%</span><span class="tag ok">مستقر</span></div>
      <div class="beneficiary-row"><div><b>يوسف ناصر</b><small>مهارات التواصل</small></div><span class="tag ok">حاضر</span><span>تخاطب</span><span>79%</span><span class="tag warn">إشعار أسرة</span></div>
      <div class="beneficiary-row"><div><b>ريان علي</b><small>التأهيل السلوكي</small></div><span class="tag left">انصرف</span><span>علاج سلوكي</span><span>71%</span><span class="tag danger">تدخل</span></div>
      <div class="beneficiary-row"><div><b>عبدالله أحمد</b><small>البرنامج التعليمي</small></div><span class="tag danger">غائب</span><span>علاج وظيفي</span><span>68%</span><span class="tag danger">تدخل</span></div>
    </div>
  </section>
</div>
</main><footer class="eefaa-footer"><div class="container"><strong>تصميم وإعداد | نوف الناصر</strong></div></footer>
<div id="accessibilityPanel" class="accessibility-panel">
  <div class="section-head"><div><strong>إمكانية الوصول</strong><p class="section-sub">خصص العرض بالطريقة الأنسب لك</p></div></div>
  <div class="acc-grid">
    <button data-font-plus>تكبير الخط +</button><button data-font-minus>تصغير الخط −</button>
    <button data-contrast>تباين مرتفع</button><button data-motion>تقليل الحركة</button>
    <button data-reset-acc style="grid-column:1/-1">إعادة الإعدادات</button>
  </div>
</div>
<div id="roleSheet" class="sheet">
  <div class="sheet-handle"></div>
  <div class="section-head"><div><strong>تبديل الدور</strong><p class="section-sub">استعرض النظام من منظور مختلف</p></div><button class="icon-btn" data-close-sheet>×</button></div>
  <div class="role-links">
    <a href="teacher.html">بوابة المعلم / المعلمة</a><a href="admin.html">لوحة الإدارة</a><a href="parent.html">بوابة ولي الأمر</a><a href="clinic.html">إيفاء كلينك</a>
    <button class="btn ghost" data-reset-demo>إعادة البيانات التجريبية</button>
  </div>
</div>
<div class="sheet-backdrop" data-close-sheet></div>

<script src="assets/js/app.js"></script><script src="assets/js/admin.js"></script></body></html>