| <!doctype html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <meta name="theme-color" content="#4137A8" /> |
| <meta name="robots" content="noindex, nofollow" /> |
| <title>رصد بيانات المنشآت</title> |
| <link rel="stylesheet" href="style.css" /> |
| </head> |
| <body> |
| <main> |
| <section id="loginView" class="login-view"> |
| <form id="loginForm" class="login-card" autocomplete="off"> |
| <div class="brand-mark" aria-hidden="true"> |
| <svg viewBox="0 0 24 24"><path d="M4 20V8l8-4 8 4v12H4Z" /><path d="M8 20v-7h8v7" /></svg> |
| </div> |
| <p class="eyebrow">مشروع رصد بيانات المنشآت</p> |
| <h1>تسجيل الدخول</h1> |
| <p class="login-description">اختر اسم الباحث، ثم أدخل الرقم السري للمتابعة.</p> |
|
|
| <label for="researcherSelect">اسم المستخدم</label> |
| <div class="select-wrap"> |
| <select id="researcherSelect" required> |
| <option value="">جاري تحميل الباحثين...</option> |
| </select> |
| <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg> |
| </div> |
|
|
| <label for="password">الرقم السري</label> |
| <div class="password-field"> |
| <input id="password" type="password" inputmode="numeric" autocomplete="new-password" placeholder="****" required /> |
| <button id="togglePassword" type="button" class="icon-button" aria-label="إظهار الرقم السري"> |
| <svg viewBox="0 0 24 24"><path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" /><circle cx="12" cy="12" r="2.8" /></svg> |
| </button> |
| </div> |
| <p id="loginError" class="form-error" role="alert"></p> |
| <button id="loginButton" class="primary-button" type="submit"> |
| <span>دخول</span> |
| <svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6" /></svg> |
| </button> |
| </form> |
| </section> |
|
|
| <section id="appView" class="app-view" hidden> |
| <header class="topbar"> |
| <div class="topbar-brand"> |
| <div class="brand-mark small" aria-hidden="true"> |
| <svg viewBox="0 0 24 24"><path d="M4 20V8l8-4 8 4v12H4Z" /><path d="M8 20v-7h8v7" /></svg> |
| </div> |
| <div> |
| <p id="roleLabel">لوحة الباحث</p> |
| <h1>رصد بيانات المنشآت</h1> |
| </div> |
| </div> |
| <div class="topbar-actions"> |
| <button id="refreshButton" class="secondary-button compact" type="button"> |
| <svg viewBox="0 0 24 24"><path d="M20 6v5h-5M4 18v-5h5M18 9a7 7 0 0 0-11.8-3M6 15a7 7 0 0 0 11.8 3" /></svg> |
| تحديث |
| </button> |
| <button id="logoutButton" class="secondary-button compact" type="button"> |
| <svg viewBox="0 0 24 24"><path d="M10 17l5-5-5-5M15 12H3M15 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4" /></svg> |
| خروج |
| </button> |
| </div> |
| </header> |
|
|
| <div class="dashboard-shell"> |
| <section class="hero-panel"> |
| <div> |
| <p class="eyebrow" id="welcomeLabel">مرحبًا</p> |
| <h2 id="heroTitle">متابعة وتحديث بيانات المنشآت</h2> |
| <p id="heroDescription">تظهر المنشآت المسندة لك فقط، مع إمكانية البحث والتحديث المباشر.</p> |
| </div> |
| <div class="quick-stats"> |
| <div><span>الإجمالي</span><strong id="totalCount">0</strong></div> |
| <div><span>المكتملة</span><strong id="enteredCount">0</strong></div> |
| <div><span>غير المكتملة</span><strong id="missingCount">0</strong></div> |
| <div><span>الإنجاز</span><strong id="progressCount">0%</strong></div> |
| </div> |
| <div class="progress-wrap"> |
| <span id="progressLabel">نسبة الإنجاز 0%</span> |
| <div class="progress-track"><i id="progressBar"></i></div> |
| </div> |
| </section> |
|
|
| <section id="adminStats" class="admin-stats" hidden> |
| <div class="section-heading"> |
| <div> |
| <p class="eyebrow">إحصائية الباحثين</p> |
| <h2>ملخص الإنجاز حسب كل باحث</h2> |
| </div> |
| <div class="export-actions"> |
| <button id="exportSummaryButton" class="secondary-button" type="button">تصدير ملف إحصائي مختصر</button> |
| <button id="exportFullButton" class="secondary-button" type="button">تصدير ملف تفصيلي كامل</button> |
| </div> |
| </div> |
| <div id="researcherStatsGrid" class="researcher-stats-grid"></div> |
| <div class="leader-grid"> |
| <div class="leader-card"> |
| <span>أكثر الباحثين إنجازًا</span> |
| <strong id="bestResearcher">-</strong> |
| </div> |
| <div class="leader-card"> |
| <span>أقل الباحثين إنجازًا</span> |
| <strong id="leastResearcher">-</strong> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="controls-panel"> |
| <div class="filters-grid"> |
| <div class="field-group search-group"> |
| <label for="searchInput">البحث</label> |
| <div class="search-wrap"> |
| <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg> |
| <input id="searchInput" type="search" placeholder="اسم المنشأة، السجل التجاري، الحي، الباحث..." /> |
| </div> |
| </div> |
| <div id="researcherFilterGroup" class="field-group"> |
| <label for="researcherFilter">الباحث</label> |
| <div class="select-wrap"> |
| <select id="researcherFilter"><option value="">كل الباحثين</option></select> |
| <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg> |
| </div> |
| </div> |
| <div class="field-group"> |
| <label for="regionFilter">المنطقة</label> |
| <div class="select-wrap"> |
| <select id="regionFilter"><option value="">كل المناطق</option></select> |
| <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg> |
| </div> |
| </div> |
| <div class="field-group"> |
| <label for="districtFilter">الحي</label> |
| <div class="select-wrap"> |
| <select id="districtFilter"><option value="">كل الأحياء</option></select> |
| <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg> |
| </div> |
| </div> |
| <div class="field-group"> |
| <label for="statusFilter">حالة الإدخال</label> |
| <div class="select-wrap"> |
| <select id="statusFilter"> |
| <option value="">كل الحالات</option> |
| <option value="entered">مكتملة</option> |
| <option value="missing">غير مكتملة</option> |
| </select> |
| <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg> |
| </div> |
| </div> |
| </div> |
| <div class="quick-filter-row"> |
| <button class="quick-filter active" type="button" data-status="">الكل</button> |
| <button class="quick-filter" type="button" data-status="entered">مكتملة</button> |
| <button class="quick-filter" type="button" data-status="missing">غير مكتملة</button> |
| <button id="saveAllButton" class="primary-button save-all-button" type="button" disabled>حفظ الكل</button> |
| </div> |
| </section> |
|
|
| <section class="table-section"> |
| <div class="section-heading compact-heading"> |
| <div> |
| <p id="resultsMeta" class="results-meta"></p> |
| <h2 id="resultsTitle">بيانات المنشآت</h2> |
| </div> |
| </div> |
| <div class="table-wrap"> |
| <table> |
| <thead> |
| <tr id="tableHead"></tr> |
| </thead> |
| <tbody id="tableBody"></tbody> |
| </table> |
| </div> |
| <div id="cardsGrid" class="cards-grid"></div> |
| <div id="emptyState" class="empty-state" hidden> |
| <h3>لا توجد نتائج مطابقة</h3> |
| <p>جرّب تغيير كلمات البحث أو التصفية.</p> |
| </div> |
| </section> |
| </div> |
| </section> |
| </main> |
| <div id="toast" class="toast" role="status" aria-live="polite"></div> |
| <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script> |
| <script src="app.js"></script> |
| </body> |
| </html> |
|
|
