index.html

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#4137A8" />
  <title>إدارة ومطابقة عينات المسوح</title>
  <link rel="icon" href="data:," />
  <link rel="stylesheet" href="./style.css" />
</head>
<body>
  <section id="loginGate" class="login-gate" aria-label="تسجيل الدخول">
    <div class="login-card">
      <span class="login-logo" aria-hidden="true"></span>
      <p class="eyebrow">إدارة عينات المسوح</p>
      <h1>ادخل الرقم السري</h1>
      <form id="loginForm">
        <input class="sr-only" type="text" autocomplete="username" value="gastat" tabindex="-1" aria-hidden="true" />
        <input id="passcodeInput" class="passcode-input" type="password" inputmode="numeric" autocomplete="current-password" maxlength="4" aria-label="الرقم السري" />
      </form>
      <p class="hint">تفتح الأداة تلقائيًا عند إدخال الرقم الصحيح.</p>
    </div>
  </section>
  <div class="wrap">
    <header class="site-header">
      <a class="brand" href="#home" aria-label="الصفحة الرئيسية"><span class="logo" aria-hidden="true"></span><span><strong>إدارة عينات المسوح</strong><small>البحث والمطابقة ومتابعة العينات</small></span></a>
      <nav class="nav" aria-label="التنقل الرئيسي">
        <button class="nav-link active" data-view="home">الرئيسية</button>
        <button class="nav-link" data-view="search">البحث</button>
        <button class="nav-link" data-view="batch">فحص السجلات</button>
        <button class="nav-link" data-view="intersections">التقاطعات</button>
        <button class="nav-link" data-view="researchers">الباحثون</button>
        <button class="nav-link" data-view="surveys">المسوح</button>
      </nav>
    </header>

    <main>
      <section id="home" class="view active">
        <div class="hero"><div><p class="eyebrow">لوحة التحكم</p><h1>مؤشرات عينات المسوح</h1><p>ملخص مباشر للتقاطعات واختلاف حالات الاستيفاء والمنشآت المشتركة بين المسوح.</p></div></div>
        <div id="metrics" class="metrics dashboard-metrics" aria-label="مؤشرات لوحة التحكم"></div>
        <section id="dashboardDetails" class="dashboard-details empty-state">اختر إحدى البطاقات لعرض التفاصيل هنا.</section>
      </section>

      <section id="search" class="view">
        <div class="hero"><div><p class="eyebrow">البحث الموحد</p><h1>ابحث عن المنشأة أو السجل أو الباحث</h1><p>تُعرض جميع مرات الظهور من مصدر البيانات نفسه في نتيجة واحدة واضحة.</p></div></div>
        <section class="search-card card" aria-label="البحث الموحد">
          <label for="q">البحث الموحد</label>
          <div class="search-row"><input id="q" type="search" inputmode="search" autocomplete="off" placeholder="ابدأ بالكتابة: رقم السجل التجاري، اسم المنشأة، أو اسم الباحث" /><button id="btnClear" class="btn secondary">مسح</button></div>
          <p class="hint">البحث يعمل تلقائيًا أثناء الكتابة، ويُعطى رقم السجل التجاري أولوية عند توفره في البيانات.</p>
        </section>
        <section class="result-section"><div class="section-heading"><div><h2>نتائج البحث</h2><p id="searchMeta">اكتب عبارة بحث للبدء.</p></div></div><div id="searchResults" class="results empty-state">اكتب رقم سجل أو اسم منشأة أو اسم باحث.</div></section>
      </section>

      <section id="batch" class="view">
        <div class="section-heading"><div><p class="eyebrow">فحص سريع</p><h1>فحص السجلات</h1><p>انسخ عمود السجل التجاري من Excel والصقه هنا، ثم اختر فحص السجلات وبعد ظهور النتائج صدّر الملف.</p></div></div>
        <section class="card batch-card"><label for="batchInput">قائمة السجلات التجارية</label><p class="hint strong-hint">ضع أرقامًا فقط بدون أحرف أو رموز. يمكن لصق كل سجل في سطر مستقل.</p><textarea id="batchInput" rows="10" placeholder="مثال:
1111
2222
3333
1111"></textarea><div class="batch-actions"><span id="batchHint" class="hint">لم تُدخل أي سجلات بعد.</span><div><button id="btnBatchClear" class="btn secondary">مسح القائمة</button><button id="btnBatch" class="btn primary">فحص السجلات</button></div></div></section>
        <div id="batchSummary" class="metrics compact"></div>
        <section class="result-section"><div class="section-heading"><div><h2>نتائج الفحص</h2><p id="batchMeta">ستبقى السجلات غير الموجودة ظاهرة في النتائج والتصدير.</p></div><button id="btnExport" class="btn secondary" disabled>تحميل النتائج Excel</button></div><div id="batchResults" class="results empty-state">الصق قائمة السجلات ثم اختر «فحص السجلات».</div></section>
      </section>

      <section id="intersections" class="view"><div class="section-heading"><div><p class="eyebrow">تداخل العينات</p><h1>التقاطعات بين المسوح</h1><p>السجلات التي يظهر لها أكثر من مسح فقط.</p></div></div><div id="intersectionMetrics" class="metrics compact"></div><div id="intersectionResults" class="results empty-state">يجري تحميل البيانات…</div></section>
      <section id="researchers" class="view"><div class="section-heading"><div><p class="eyebrow">المسؤوليات</p><h1>الباحثون</h1><p>ابحث باسم الباحث لعرض مؤشرات العينات والمسوح.</p></div><input id="researcherFilter" class="small-search" placeholder="ابحث باسم الباحث" /></div><div id="researcherResults" class="results"></div></section>
      <section id="surveys" class="view"><div class="section-heading"><div><p class="eyebrow">مصدر البيانات</p><h1>المسوح</h1><p>ملخص كل مسح محمّل في النظام.</p></div></div><div id="surveyResults" class="survey-grid"></div></section>
    </main>
  </div>
  <div id="toast" class="toast" role="status" aria-live="polite"></div>
  <footer>تصميم وإعداد <b>نوف الناصر</b> · تطوير إدارة عينات المسوح</footer>
  <script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>
  <script src="./data.js"></script>
  <script src="./script.js"></script>
</body>
</html>