Upload 6 files

README.md

@@ -1,12 +1,24 @@
 ---
 title: DE
-emoji: 📊
-colorFrom: green
+emoji: "\U0001F5C2"
+colorFrom: blue
 colorTo: green
 sdk: static
 pinned: false
 license: mit
-short_description: DE
+short_description: نظام متابعة العينات
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# نظام متابعة العينات
+
+واجهة عربية للاستعلام عن العينات وبيانات التواصل حسب المشرف والباحث.
+
+## تحديث البيانات
+
+يشفر الأمر التالي بيانات ملف Excel وينشئ ملف `data.js` مستقلًا:
+
+```powershell
+node generate-data.mjs "path\to\input.xlsx" "data.js" "PASSWORD"
+```
+
+لا ترفع ملف Excel الأصلي إلى المستودع.

app.js

@@ -0,0 +1,408 @@
+"use strict";
+
+const FIELD_LABELS = [
+  "اسم المشرف",
+  "اسم الباحث",
+  "رقم السجل(العينة)",
+  "اسم العينة",
+  "حالة الاكتمال",
+  "حالة الاقرار",
+  "حالة الاستيفاء",
+  "نوع الاستيفاء",
+  "حالة الاعتماد",
+  "النشاط",
+  "الايميل",
+  "الموقع",
+  "رقم التواصل",
+];
+
+const FIELD_KEYS = [
+  "supervisor",
+  "researcher",
+  "recordNumber",
+  "sampleName",
+  "completionStatus",
+  "declarationStatus",
+  "fulfillmentStatus",
+  "fulfillmentType",
+  "approvalStatus",
+  "activity",
+  "email",
+  "location",
+  "phone",
+];
+
+const DISPLAY_FIELDS = [
+  ["recordNumber", "رقم السجل", false],
+  ["completionStatus", "حالة الاكتمال", false],
+  ["declarationStatus", "حالة الإقرار", false],
+  ["fulfillmentType", "نوع الاستيفاء", false],
+  ["approvalStatus", "حالة الاعتماد", false],
+  ["activity", "النشاط", true],
+  ["email", "البريد الإلكتروني", true],
+  ["location", "الموقع", true],
+  ["phone", "رقم التواصل", true],
+];
+
+const loginView = document.getElementById("loginView");
+const dashboardView = document.getElementById("dashboardView");
+const loginForm = document.getElementById("loginForm");
+const passwordInput = document.getElementById("password");
+const loginButton = document.getElementById("loginButton");
+const loginError = document.getElementById("loginError");
+const togglePassword = document.getElementById("togglePassword");
+const logoutButton = document.getElementById("logoutButton");
+const supervisorSelect = document.getElementById("supervisorSelect");
+const researcherSelect = document.getElementById("researcherSelect");
+const statusSelect = document.getElementById("statusSelect");
+const searchInput = document.getElementById("searchInput");
+const emptyState = document.getElementById("emptyState");
+const resultsSection = document.getElementById("resultsSection");
+const resultsMeta = document.getElementById("resultsMeta");
+const resultsTitle = document.getElementById("resultsTitle");
+const statusChips = document.getElementById("statusChips");
+const samplesGrid = document.getElementById("samplesGrid");
+const noResults = document.getElementById("noResults");
+const copyAllButton = document.getElementById("copyAllButton");
+const toast = document.getElementById("toast");
+
+let allRows = [];
+let visibleRows = [];
+let failedAttempts = 0;
+let toastTimer;
+
+function base64ToBytes(value) {
+  const binary = atob(value);
+  return Uint8Array.from(binary, (char) => char.charCodeAt(0));
+}
+
+async function deriveKey(password, salt) {
+  const material = await crypto.subtle.importKey(
+    "raw",
+    new TextEncoder().encode(password),
+    "PBKDF2",
+    false,
+    ["deriveKey"],
+  );
+
+  return crypto.subtle.deriveKey(
+    {
+      name: "PBKDF2",
+      salt,
+      iterations: ENCRYPTED_DATA.iterations,
+      hash: "SHA-256",
+    },
+    material,
+    { name: "AES-GCM", length: 256 },
+    false,
+    ["decrypt"],
+  );
+}
+
+async function decryptData(password) {
+  const salt = base64ToBytes(ENCRYPTED_DATA.salt);
+  const iv = base64ToBytes(ENCRYPTED_DATA.iv);
+  const cipherText = base64ToBytes(ENCRYPTED_DATA.payload);
+  const key = await deriveKey(password, salt);
+  const plainBuffer = await crypto.subtle.decrypt({ name: "AES-GCM", iv }, key, cipherText);
+  return JSON.parse(new TextDecoder().decode(plainBuffer));
+}
+
+function normalize(value) {
+  return String(value ?? "")
+    .normalize("NFKD")
+    .replace(/[\u064B-\u065F\u0670]/g, "")
+    .replace(/[أإآ]/g, "ا")
+    .replace(/ى/g, "ي")
+    .replace(/ة/g, "ه")
+    .replace(/\s+/g, " ")
+    .trim()
+    .toLowerCase();
+}
+
+function rowToObject(row) {
+  return Object.fromEntries(FIELD_KEYS.map((key, index) => [key, row[index] ?? ""]));
+}
+
+function uniqueSorted(values) {
+  return [...new Set(values.filter(Boolean))].sort((a, b) =>
+    String(a).localeCompare(String(b), "ar", { sensitivity: "base" }),
+  );
+}
+
+function setOptions(select, values, placeholder) {
+  select.replaceChildren(new Option(placeholder, ""));
+  values.forEach((value) => select.add(new Option(value, value)));
+}
+
+function showToast(message) {
+  clearTimeout(toastTimer);
+  toast.textContent = message;
+  toast.classList.add("show");
+  toastTimer = setTimeout(() => toast.classList.remove("show"), 2300);
+}
+
+async function copyText(text, successMessage) {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    const area = document.createElement("textarea");
+    area.value = text;
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    document.body.append(area);
+    area.select();
+    document.execCommand("copy");
+    area.remove();
+  }
+  showToast(successMessage);
+}
+
+function buildMessage(row, index = null) {
+  const title = index === null ? "بيانات العينة المطلوبة للتواصل:" : `العينة رقم ${index}:`;
+  const lines = [
+    title,
+    row.sampleName && `اسم العينة: ${row.sampleName}`,
+    row.recordNumber && `رقم السجل: ${row.recordNumber}`,
+    row.fulfillmentStatus && `حالة الاستيفاء: ${row.fulfillmentStatus}`,
+    row.activity && `النشاط: ${row.activity}`,
+    row.phone && `رقم التواصل: ${row.phone}`,
+    row.email && `البريد الإلكتروني: ${row.email}`,
+    row.location && `الموقع: ${row.location}`,
+  ].filter(Boolean);
+  return lines.join("\n");
+}
+
+function createDetail(key, label, isContact, value) {
+  const wrapper = document.createElement("div");
+  wrapper.className = `detail-item${isContact ? " contact-detail" : ""}`;
+
+  const labelElement = document.createElement("span");
+  labelElement.className = "detail-label";
+  labelElement.textContent = label;
+
+  const valueElement = document.createElement("span");
+  valueElement.className = "detail-value";
+  valueElement.textContent = String(value);
+  if (key === "phone" || key === "recordNumber") {
+    valueElement.dir = "ltr";
+    valueElement.style.textAlign = "right";
+  }
+
+  wrapper.append(labelElement, valueElement);
+  return wrapper;
+}
+
+function createSampleCard(row, index) {
+  const card = document.createElement("article");
+  card.className = "sample-card";
+
+  const header = document.createElement("div");
+  header.className = "sample-card-header";
+
+  const headingWrap = document.createElement("div");
+  const number = document.createElement("span");
+  number.className = "sample-index";
+  number.textContent = `العينة ${index + 1}`;
+  const title = document.createElement("h3");
+  title.textContent = row.sampleName || "عينة دون اسم";
+  headingWrap.append(number, title);
+
+  const badge = document.createElement("span");
+  badge.className = "status-badge";
+  badge.textContent = row.fulfillmentStatus || "غير محدد";
+  header.append(headingWrap, badge);
+
+  const details = document.createElement("div");
+  details.className = "sample-details";
+  DISPLAY_FIELDS.forEach(([key, label, isContact]) => {
+    if (String(row[key] ?? "").trim()) {
+      details.append(createDetail(key, label, isContact, row[key]));
+    }
+  });
+
+  const footer = document.createElement("div");
+  footer.className = "sample-card-footer";
+  const copyButton = document.createElement("button");
+  copyButton.className = "copy-sample";
+  copyButton.type = "button";
+  copyButton.textContent = "نسخ رسالة هذه العينة";
+  copyButton.addEventListener("click", () =>
+    copyText(buildMessage(row), "تم نسخ رسالة العينة"),
+  );
+  footer.append(copyButton);
+
+  card.append(header, details, footer);
+  return card;
+}
+
+function renderStatusChips(rows) {
+  const counts = new Map();
+  rows.forEach((row) => {
+    const status = row.fulfillmentStatus || "غير محدد";
+    counts.set(status, (counts.get(status) || 0) + 1);
+  });
+
+  statusChips.replaceChildren(
+    ...[...counts.entries()].map(([status, count]) => {
+      const chip = document.createElement("span");
+      chip.className = "status-chip";
+      chip.append(document.createTextNode(status));
+      const strong = document.createElement("strong");
+      strong.textContent = count;
+      chip.append(strong);
+      return chip;
+    }),
+  );
+}
+
+function applyFilters() {
+  const researcher = researcherSelect.value;
+  if (!researcher) {
+    resultsSection.hidden = true;
+    emptyState.hidden = false;
+    return;
+  }
+
+  const status = statusSelect.value;
+  const query = normalize(searchInput.value);
+  const researcherRows = allRows.filter(
+    (row) => row.supervisor === supervisorSelect.value && row.researcher === researcher,
+  );
+
+  visibleRows = researcherRows.filter((row) => {
+    const matchesStatus = !status || row.fulfillmentStatus === status;
+    const matchesSearch =
+      !query ||
+      normalize(row.sampleName).includes(query) ||
+      normalize(row.recordNumber).includes(query);
+    return matchesStatus && matchesSearch;
+  });
+
+  emptyState.hidden = true;
+  resultsSection.hidden = false;
+  resultsTitle.textContent = researcher;
+  resultsMeta.textContent = `${visibleRows.length} من أصل ${researcherRows.length} عينة`;
+  copyAllButton.disabled = visibleRows.length === 0;
+  renderStatusChips(researcherRows);
+
+  samplesGrid.replaceChildren(
+    ...visibleRows.map((row, index) => createSampleCard(row, index)),
+  );
+  noResults.hidden = visibleRows.length !== 0;
+}
+
+function resetResearcherControls() {
+  setOptions(researcherSelect, [], "اختر الباحث");
+  setOptions(statusSelect, [], "جميع الحالات");
+  researcherSelect.disabled = true;
+  statusSelect.disabled = true;
+  searchInput.disabled = true;
+  searchInput.value = "";
+  resultsSection.hidden = true;
+  emptyState.hidden = false;
+  emptyState.querySelector("h3").textContent = supervisorSelect.value
+    ? "اختر الباحث"
+    : "ابدأ باختيار المشرف";
+  emptyState.querySelector("p").textContent = supervisorSelect.value
+    ? "اختر اسم الباحث لعرض العينات المسندة إليه."
+    : "لن تظهر أي بيانات للعينات حتى يتم اختيار المشرف والباحث.";
+}
+
+function initializeDashboard(data) {
+  allRows = data.rows.map(rowToObject);
+  setOptions(
+    supervisorSelect,
+    uniqueSorted(allRows.map((row) => row.supervisor)),
+    "اختر المشرف",
+  );
+  resetResearcherControls();
+}
+
+loginForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const password = passwordInput.value.trim();
+  if (!password) return;
+
+  loginButton.disabled = true;
+  loginButton.querySelector("span").textContent = "جارٍ التحقق...";
+  loginError.textContent = "";
+
+  if (failedAttempts >= 3) {
+    await new Promise((resolve) => setTimeout(resolve, Math.min(failedAttempts * 800, 5000)));
+  }
+
+  try {
+    const data = await decryptData(password);
+    initializeDashboard(data);
+    passwordInput.value = "";
+    loginView.hidden = true;
+    dashboardView.hidden = false;
+    failedAttempts = 0;
+  } catch {
+    failedAttempts += 1;
+    loginError.textContent = "رمز الدخول غير صحيح. تحقق منه وحاول مرة أخرى.";
+    passwordInput.select();
+  } finally {
+    loginButton.disabled = false;
+    loginButton.querySelector("span").textContent = "دخول آمن";
+  }
+});
+
+togglePassword.addEventListener("click", () => {
+  const showing = passwordInput.type === "text";
+  passwordInput.type = showing ? "password" : "text";
+  togglePassword.setAttribute("aria-label", showing ? "إظهار رمز الدخول" : "إخفاء رمز الدخول");
+});
+
+logoutButton.addEventListener("click", () => {
+  allRows = [];
+  visibleRows = [];
+  supervisorSelect.value = "";
+  resetResearcherControls();
+  dashboardView.hidden = true;
+  loginView.hidden = false;
+  passwordInput.focus();
+});
+
+supervisorSelect.addEventListener("change", () => {
+  resetResearcherControls();
+  if (!supervisorSelect.value) return;
+
+  const researchers = uniqueSorted(
+    allRows
+      .filter((row) => row.supervisor === supervisorSelect.value)
+      .map((row) => row.researcher),
+  );
+  setOptions(researcherSelect, researchers, "اختر الباحث");
+  researcherSelect.disabled = false;
+});
+
+researcherSelect.addEventListener("change", () => {
+  const rows = allRows.filter(
+    (row) =>
+      row.supervisor === supervisorSelect.value &&
+      row.researcher === researcherSelect.value,
+  );
+  const statuses = uniqueSorted(rows.map((row) => row.fulfillmentStatus));
+  setOptions(statusSelect, statuses, "جميع الحالات");
+  statusSelect.disabled = !researcherSelect.value;
+  searchInput.disabled = !researcherSelect.value;
+  searchInput.value = "";
+  applyFilters();
+});
+
+statusSelect.addEventListener("change", applyFilters);
+searchInput.addEventListener("input", applyFilters);
+
+copyAllButton.addEventListener("click", () => {
+  if (!visibleRows.length) return;
+  const heading = `بيانات العينات الخاصة بالباحث: ${researcherSelect.value}`;
+  const messages = visibleRows.map((row, index) => buildMessage(row, index + 1));
+  copyText([heading, ...messages].join("\n\n--------------------\n\n"), "تم نسخ جميع العينات المعروضة");
+});
+
+if (!window.crypto?.subtle || typeof ENCRYPTED_DATA === "undefined") {
+  loginButton.disabled = true;
+  loginError.textContent = "تعذر تشغيل التشفير في هذا المتصفح. استخدم متصفحًا حديثًا.";
+}

generate-data.mjs

@@ -0,0 +1,60 @@
+import fs from "node:fs/promises";
+import crypto from "node:crypto";
+import { FileBlob, SpreadsheetFile } from "@oai/artifact-tool";
+
+const [inputPath, outputPath, password] = process.argv.slice(2);
+
+if (!inputPath || !outputPath || !password) {
+  console.error("Usage: node generate-data.mjs <input.xlsx> <output.js> <password>");
+  process.exitCode = 1;
+} else {
+  const blob = await FileBlob.load(inputPath);
+  const workbook = await SpreadsheetFile.importXlsx(blob);
+  const sheet = workbook.worksheets.getItemAt(0);
+  const values = sheet.getUsedRange(true).values;
+  const headers = values[0].map((value) => String(value ?? "").trim());
+  const rows = values.slice(1).map((row) =>
+    headers.map((_, index) => {
+      const value = row[index];
+      if (value === null || value === undefined) return "";
+      return typeof value === "string" ? value.trim() : String(value);
+    }),
+  );
+
+  const payload = JSON.stringify({
+    version: 1,
+    generatedAt: new Date().toISOString(),
+    headers,
+    rows,
+  });
+
+  const iterations = 310000;
+  const salt = crypto.randomBytes(16);
+  const iv = crypto.randomBytes(12);
+  const key = crypto.pbkdf2Sync(password, salt, iterations, 32, "sha256");
+  const cipher = crypto.createCipheriv("aes-256-gcm", key, iv);
+  const encrypted = Buffer.concat([cipher.update(payload, "utf8"), cipher.final()]);
+  const authTag = cipher.getAuthTag();
+  const combined = Buffer.concat([encrypted, authTag]);
+
+  const output = [
+    "/* Generated encrypted data. Replace this file using generate-data.mjs when the workbook changes. */",
+    "const ENCRYPTED_DATA = Object.freeze({",
+    `  iterations: ${iterations},`,
+    `  salt: "${salt.toString("base64")}",`,
+    `  iv: "${iv.toString("base64")}",`,
+    `  payload: "${combined.toString("base64")}",`,
+    "});",
+    "",
+  ].join("\n");
+
+  await fs.writeFile(outputPath, output, "utf8");
+  console.log(
+    JSON.stringify({
+      rows: rows.length,
+      columns: headers.length,
+      encryptedBytes: combined.length,
+      outputPath,
+    }),
+  );
+}

index.html

@@ -1,19 +1,203 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<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="#123c69" />
+    <meta name="robots" content="noindex, nofollow" />
+    <title>نظام متابعة العينات</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="background-shape shape-one"></div>
+    <div class="background-shape shape-two"></div>
+
+    <main>
+      <section id="loginView" class="login-view">
+        <div class="login-card">
+          <div class="brand-mark" aria-hidden="true">
+            <svg viewBox="0 0 48 48" role="img">
+              <path d="M24 4 42 14v20L24 44 6 34V14L24 4Z" />
+              <path d="M16 25.5 21.5 31 33 18.5" />
+            </svg>
+          </div>
+          <p class="eyebrow">بوابة العمل الميداني</p>
+          <h1>نظام متابعة العينات</h1>
+          <p class="login-description">
+            أدخل رمز الدخول للوصول إلى بيانات التواصل ومتابعة حالات العينات.
+          </p>
+
+          <form id="loginForm" class="login-form" autocomplete="off">
+            <label for="password">رمز الدخول</label>
+            <div class="password-field">
+              <input
+                id="password"
+                name="password"
+                type="password"
+                inputmode="numeric"
+                placeholder="أدخل رمز الدخول"
+                required
+                autofocus
+              />
+              <button id="togglePassword" type="button" class="icon-button" aria-label="إظهار رمز الدخول">
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <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" aria-hidden="true">
+                <path d="m9 18 6-6-6-6" />
+              </svg>
+            </button>
+          </form>
+
+          <div class="security-note">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <rect x="5" y="10" width="14" height="10" rx="2" />
+              <path d="M8 10V7a4 4 0 0 1 8 0v3" />
+            </svg>
+            <span>البيانات مشفرة ولا تُعرض قبل تسجيل الدخول.</span>
+          </div>
+        </div>
+      </section>
+
+      <section id="dashboardView" class="dashboard-view" hidden>
+        <header class="topbar">
+          <div class="topbar-brand">
+            <div class="brand-mark small" aria-hidden="true">
+              <svg viewBox="0 0 48 48">
+                <path d="M24 4 42 14v20L24 44 6 34V14L24 4Z" />
+                <path d="M16 25.5 21.5 31 33 18.5" />
+              </svg>
+            </div>
+            <div>
+              <p>بوابة العمل الميداني</p>
+              <h1>نظام متابعة العينات</h1>
+            </div>
+          </div>
+          <button id="logoutButton" class="secondary-button compact" type="button">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M10 17l5-5-5-5M15 12H3M15 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4" />
+            </svg>
+            خروج
+          </button>
+        </header>
+
+        <div class="dashboard-shell">
+          <section class="welcome-panel">
+            <div>
+              <p class="eyebrow">لوحة الاستعلام</p>
+              <h2>الوصول إلى بيانات العينة بسهولة</h2>
+              <p>اختر المشرف والباحث، ثم استخدم البحث والفلاتر للوصول إلى العينة المطلوبة.</p>
+            </div>
+            <div class="privacy-pill">
+              <span class="status-dot"></span>
+              جلسة خاصة
+            </div>
+          </section>
+
+          <section class="controls-card">
+            <div class="filters-grid">
+              <div class="field-group">
+                <label for="supervisorSelect">اسم المشرف</label>
+                <div class="select-wrap">
+                  <select id="supervisorSelect">
+                    <option value="">اختر المشرف</option>
+                  </select>
+                  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 10 5 5 5-5" /></svg>
+                </div>
+              </div>
+
+              <div class="field-group">
+                <label for="researcherSelect">اسم الباحث</label>
+                <div class="select-wrap">
+                  <select id="researcherSelect" disabled>
+                    <option value="">اختر الباحث</option>
+                  </select>
+                  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 10 5 5 5-5" /></svg>
+                </div>
+              </div>
+
+              <div class="field-group">
+                <label for="statusSelect">حالة الاستيفاء</label>
+                <div class="select-wrap">
+                  <select id="statusSelect" disabled>
+                    <option value="">جميع الحالات</option>
+                  </select>
+                  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 10 5 5 5-5" /></svg>
+                </div>
+              </div>
+
+              <div class="field-group search-group">
+                <label for="searchInput">البحث الذكي</label>
+                <div class="search-wrap">
+                  <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <circle cx="11" cy="11" r="7" />
+                    <path d="m20 20-4-4" />
+                  </svg>
+                  <input
+                    id="searchInput"
+                    type="search"
+                    placeholder="اسم العينة أو رقم السجل"
+                    disabled
+                  />
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section id="emptyState" class="empty-state">
+            <div class="empty-icon">
+              <svg viewBox="0 0 48 48" aria-hidden="true">
+                <path d="M8 13h32v27H8z" />
+                <path d="M15 8h18v10H15zM15 26h18M15 33h11" />
+              </svg>
+            </div>
+            <h3>ابدأ باختيار المشرف</h3>
+            <p>لن تظهر أي بيانات للعينات حتى يتم اختيار المشرف والباحث.</p>
+          </section>
+
+          <section id="resultsSection" class="results-section" hidden>
+            <div class="results-header">
+              <div>
+                <p id="resultsMeta" class="results-meta"></p>
+                <h2 id="resultsTitle">العينات</h2>
+              </div>
+              <button id="copyAllButton" class="primary-button copy-all" type="button">
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <rect x="8" y="8" width="11" height="11" rx="2" />
+                  <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" />
+                </svg>
+                نسخ جميع عينات الباحث
+              </button>
+            </div>
+
+            <div id="statusChips" class="status-chips" aria-label="ملخص الحالات"></div>
+            <div id="samplesGrid" class="samples-grid"></div>
+
+            <div id="noResults" class="no-results" hidden>
+              <h3>لا توجد نتائج مطابقة</h3>
+              <p>جرّب تغيير حالة الاستيفاء أو عبارة البحث.</p>
+            </div>
+          </section>
+        </div>
+      </section>
+    </main>
+
+    <footer id="footer">إعداد نوف الناصر</footer>
+    <div id="toast" class="toast" role="status" aria-live="polite"></div>
+
+    <script src="data.js"></script>
+    <script src="app.js"></script>
+  </body>
 </html>

style.css

@@ -1,28 +1,798 @@
+:root {
+  --navy: #123c69;
+  --navy-dark: #0a2c50;
+  --blue: #1d659b;
+  --sky: #e9f4fb;
+  --teal: #12877d;
+  --teal-soft: #e8f6f3;
+  --ink: #172b3a;
+  --muted: #657786;
+  --line: #dce6ec;
+  --surface: #ffffff;
+  --page: #f4f8fa;
+  --danger: #b43d4f;
+  --shadow: 0 18px 50px rgba(15, 54, 82, 0.11);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-height: 100%;
+  background: var(--page);
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  min-height: 100vh;
+  margin: 0;
+  color: var(--ink);
+  font-family: "Tajawal", Arial, sans-serif;
+  background:
+    radial-gradient(circle at 10% 10%, rgba(41, 151, 173, 0.12), transparent 30%),
+    linear-gradient(145deg, #f9fbfc 0%, #eff6f8 100%);
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+svg {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
+}
+
+.background-shape {
+  position: fixed;
+  z-index: -1;
+  border-radius: 999px;
+  filter: blur(2px);
+  pointer-events: none;
+}
+
+.shape-one {
+  width: 340px;
+  height: 340px;
+  top: -170px;
+  right: -100px;
+  background: rgba(29, 101, 155, 0.1);
+}
+
+.shape-two {
+  width: 280px;
+  height: 280px;
+  bottom: -150px;
+  left: -80px;
+  background: rgba(18, 135, 125, 0.1);
+}
+
+.login-view {
+  min-height: calc(100vh - 56px);
+  display: grid;
+  place-items: center;
+  padding: 32px 20px;
+}
+
+.login-card {
+  width: min(100%, 450px);
+  padding: 42px;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(220, 230, 236, 0.9);
+  border-radius: 28px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px);
+}
+
+.brand-mark {
+  width: 72px;
+  height: 72px;
+  display: grid;
+  place-items: center;
+  margin: 0 auto 22px;
+  color: white;
+  background: linear-gradient(145deg, var(--navy), var(--blue));
+  border-radius: 22px;
+  box-shadow: 0 14px 30px rgba(18, 60, 105, 0.25);
+}
+
+.brand-mark svg {
+  width: 43px;
+  height: 43px;
+}
+
+.brand-mark svg path:first-child {
+  fill: rgba(255, 255, 255, 0.08);
+}
+
+.brand-mark svg path:last-child {
+  stroke-width: 3;
+}
+
+.brand-mark.small {
+  width: 48px;
+  height: 48px;
+  margin: 0;
+  border-radius: 15px;
+  box-shadow: none;
+}
+
+.brand-mark.small svg {
+  width: 29px;
+  height: 29px;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  color: var(--teal);
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+}
+
+.login-card h1 {
+  margin: 0;
+  color: var(--navy-dark);
+  font-size: clamp(27px, 5vw, 34px);
+  line-height: 1.35;
+}
+
+.login-description {
+  max-width: 340px;
+  margin: 12px auto 28px;
+  color: var(--muted);
+  font-size: 15px;
+  line-height: 1.8;
+}
+
+.login-form {
+  text-align: right;
+}
+
+.login-form label,
+.field-group label {
+  display: block;
+  margin-bottom: 8px;
+  color: #314b5e;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.password-field,
+.search-wrap,
+.select-wrap {
+  position: relative;
+}
+
+.password-field input,
+.search-wrap input,
+.select-wrap select {
+  width: 100%;
+  height: 52px;
+  color: var(--ink);
+  background: #fbfdfe;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
+}
+
+.password-field input {
+  padding: 0 16px 0 50px;
+}
+
+.password-field input:focus,
+.search-wrap input:focus,
+.select-wrap select:focus {
+  background: white;
+  border-color: var(--blue);
+  box-shadow: 0 0 0 4px rgba(29, 101, 155, 0.1);
+}
+
+.icon-button {
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  width: 38px;
+  height: 38px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  color: var(--muted);
+  background: transparent;
+  border: 0;
+  border-radius: 10px;
+  transform: translateY(-50%);
+}
+
+.icon-button:hover {
+  color: var(--navy);
+  background: var(--sky);
+}
+
+.icon-button svg {
+  width: 22px;
+  height: 22px;
+}
+
+.form-error {
+  min-height: 22px;
+  margin: 7px 2px 5px;
+  color: var(--danger);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.primary-button,
+.secondary-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  min-height: 48px;
+  padding: 0 20px;
+  font-weight: 700;
+  border-radius: 13px;
+  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
+}
+
+.primary-button {
+  color: white;
+  background: linear-gradient(135deg, var(--navy), var(--blue));
+  border: 0;
+  box-shadow: 0 9px 22px rgba(18, 60, 105, 0.2);
+}
+
+.login-form .primary-button {
+  width: 100%;
+}
+
+.primary-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 25px rgba(18, 60, 105, 0.26);
+}
+
+.primary-button:disabled {
+  cursor: wait;
+  opacity: 0.65;
+  transform: none;
+}
+
+.primary-button svg,
+.secondary-button svg {
+  width: 20px;
+  height: 20px;
+}
+
+.security-note {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 22px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.security-note svg {
+  width: 17px;
+  height: 17px;
+  color: var(--teal);
+}
+
+.topbar {
+  min-height: 78px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 13px max(20px, calc((100% - 1240px) / 2));
+  background: rgba(255, 255, 255, 0.92);
+  border-bottom: 1px solid var(--line);
+  box-shadow: 0 5px 22px rgba(27, 64, 90, 0.05);
+  backdrop-filter: blur(12px);
+}
+
+.topbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+}
+
+.topbar-brand p {
+  margin: 0 0 2px;
+  color: var(--teal);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.topbar-brand h1 {
+  margin: 0;
+  color: var(--navy-dark);
+  font-size: 20px;
+}
+
+.secondary-button {
+  color: var(--navy);
+  background: white;
+  border: 1px solid var(--line);
+}
+
+.secondary-button:hover {
+  background: var(--sky);
+  border-color: #b9d4e4;
+}
+
+.secondary-button.compact {
+  min-height: 42px;
+  padding: 0 15px;
+}
+
+.dashboard-shell {
+  width: min(1240px, calc(100% - 40px));
+  min-height: calc(100vh - 134px);
+  margin: 28px auto 44px;
+}
+
+.welcome-panel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 24px 28px;
+  color: white;
+  background:
+    linear-gradient(115deg, rgba(10, 44, 80, 0.98), rgba(29, 101, 155, 0.92)),
+    var(--navy);
+  border-radius: 22px;
+  box-shadow: 0 14px 32px rgba(18, 60, 105, 0.17);
+}
+
+.welcome-panel .eyebrow {
+  color: #91dfd6;
+}
+
+.welcome-panel h2 {
+  margin: 0 0 5px;
+  font-size: clamp(21px, 3vw, 28px);
+}
+
+.welcome-panel > div > p:last-child {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.77);
+  font-size: 14px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.privacy-pill {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  color: #d9fff9;
+  font-size: 13px;
+  font-weight: 700;
+  background: rgba(255, 255, 255, 0.11);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.status-dot {
+  width: 8px;
+  height: 8px;
+  background: #68ebce;
+  border-radius: 50%;
+  box-shadow: 0 0 0 5px rgba(104, 235, 206, 0.14);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.controls-card {
+  margin-top: 18px;
+  padding: 22px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  box-shadow: 0 10px 26px rgba(24, 66, 91, 0.06);
+}
+
+.filters-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(180px, 1fr)) minmax(220px, 1.2fr);
+  gap: 16px;
+}
+
+.select-wrap select {
+  padding: 0 15px 0 42px;
+  appearance: none;
+}
+
+.select-wrap > svg {
+  position: absolute;
+  top: 50%;
+  left: 15px;
+  width: 19px;
+  color: var(--muted);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.search-wrap input {
+  padding: 0 44px 0 14px;
+}
+
+.search-wrap > svg {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  width: 20px;
+  color: var(--muted);
+  transform: translateY(-50%);
+}
+
+select:disabled,
+input:disabled {
+  cursor: not-allowed;
+  color: #9aa8b2;
+  background: #f3f6f7;
+}
+
+.empty-state,
+.no-results {
+  margin-top: 18px;
+  padding: 64px 24px;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px dashed #bfd0da;
+  border-radius: 20px;
+}
+
+.empty-icon {
+  width: 72px;
+  height: 72px;
+  display: grid;
+  place-items: center;
+  margin: 0 auto 16px;
+  color: var(--blue);
+  background: var(--sky);
+  border-radius: 22px;
+}
+
+.empty-icon svg {
+  width: 39px;
+  height: 39px;
+}
+
+.empty-state h3,
+.no-results h3 {
+  margin: 0 0 7px;
+  color: var(--navy-dark);
+  font-size: 20px;
+}
+
+.empty-state p,
+.no-results p {
+  margin: 0;
+  color: var(--muted);
+}
+
+.results-section {
+  margin-top: 24px;
+}
+
+.results-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 14px;
+}
+
+.results-meta {
+  margin: 0 0 4px;
+  color: var(--teal);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.results-header h2 {
+  margin: 0;
+  color: var(--navy-dark);
+  font-size: 24px;
+}
+
+.copy-all {
+  min-height: 44px;
+  background: var(--teal);
+  box-shadow: 0 8px 20px rgba(18, 135, 125, 0.18);
+}
+
+.status-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 17px;
+}
+
+.status-chip {
+  padding: 7px 11px;
+  color: #466071;
+  font-size: 12px;
+  font-weight: 700;
+  background: white;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+}
+
+.status-chip strong {
+  margin-right: 5px;
+  color: var(--navy);
+}
+
+.samples-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.sample-card {
+  overflow: hidden;
+  background: white;
+  border: 1px solid var(--line);
+  border-radius: 19px;
+  box-shadow: 0 8px 24px rgba(26, 63, 87, 0.055);
+  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+}
+
+.sample-card:hover {
+  border-color: #b9d4e4;
+  box-shadow: 0 13px 30px rgba(26, 63, 87, 0.1);
+  transform: translateY(-2px);
+}
+
+.sample-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 18px 20px 15px;
+  background: linear-gradient(180deg, #fbfdfe, white);
+  border-bottom: 1px solid #edf2f5;
+}
+
+.sample-index {
+  display: inline-block;
+  margin-bottom: 5px;
+  color: var(--teal);
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.sample-card h3 {
+  margin: 0;
+  color: var(--navy-dark);
+  font-size: 17px;
+  line-height: 1.65;
+}
+
+.status-badge {
+  flex: 0 0 auto;
+  max-width: 155px;
+  padding: 7px 10px;
+  color: #8f4f16;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.4;
+  text-align: center;
+  background: #fff4e7;
+  border: 1px solid #f4d3aa;
+  border-radius: 999px;
+}
+
+.sample-details {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0;
+  padding: 4px 20px;
+}
+
+.detail-item {
+  min-width: 0;
+  padding: 13px 0;
+  border-bottom: 1px solid #edf2f5;
+}
+
+.detail-item:nth-child(odd) {
+  padding-left: 14px;
+  border-left: 1px solid #edf2f5;
+}
+
+.detail-item:nth-child(even) {
+  padding-right: 14px;
+}
+
+.detail-label {
+  display: block;
+  margin-bottom: 5px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.detail-value {
+  display: block;
+  overflow-wrap: anywhere;
+  color: #233d4f;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.6;
+}
+
+.contact-detail .detail-value {
+  color: var(--blue);
+}
+
+.sample-card-footer {
+  padding: 14px 20px 18px;
+}
+
+.copy-sample {
+  width: 100%;
+  min-height: 42px;
+  color: var(--navy);
+  font-weight: 800;
+  background: var(--sky);
+  border: 1px solid #cde2ee;
+  border-radius: 12px;
+}
+
+.copy-sample:hover {
+  color: white;
+  background: var(--navy);
+  border-color: var(--navy);
+}
+
+.no-results {
+  margin-top: 0;
+}
+
+footer {
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #70828f;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.toast {
+  position: fixed;
+  z-index: 30;
+  right: 50%;
+  bottom: 24px;
+  padding: 12px 18px;
+  color: white;
+  font-size: 14px;
+  font-weight: 700;
+  background: #173b52;
+  border-radius: 12px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  transform: translate(50%, 20px);
+  transition: opacity 0.25s, transform 0.25s;
+  pointer-events: none;
+}
+
+.toast.show {
+  opacity: 1;
+  transform: translate(50%, 0);
+}
+
+@media (max-width: 980px) {
+  .filters-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  .dashboard-shell {
+    width: min(100% - 24px, 1240px);
+    margin-top: 14px;
+  }
+
+  .welcome-panel,
+  .results-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .privacy-pill {
+    align-self: flex-start;
+  }
+
+  .samples-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .copy-all {
+    width: 100%;
+  }
+}
+
+@media (max-width: 560px) {
+  .login-card {
+    padding: 32px 22px;
+    border-radius: 22px;
+  }
+
+  .topbar {
+    padding: 11px 14px;
+  }
+
+  .topbar-brand p {
+    display: none;
+  }
+
+  .topbar-brand h1 {
+    font-size: 16px;
+  }
+
+  .brand-mark.small {
+    width: 42px;
+    height: 42px;
+  }
+
+  .secondary-button.compact {
+    padding: 0 12px;
+    font-size: 13px;
+  }
+
+  .welcome-panel,
+  .controls-card {
+    padding: 19px;
+    border-radius: 17px;
+  }
+
+  .filters-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .sample-card-header {
+    flex-direction: column;
+  }
+
+  .status-badge {
+    max-width: 100%;
+  }
+
+  .sample-details {
+    grid-template-columns: 1fr;
+  }
+
+  .detail-item:nth-child(odd),
+  .detail-item:nth-child(even) {
+    padding-right: 0;
+    padding-left: 0;
+    border-left: 0;
+  }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition: none !important;
+  }
 }