Upload 6 files

app.js

@@ -70,6 +70,7 @@ let allRows = [];
 let visibleRows = [];
 let failedAttempts = 0;
 let toastTimer;
+const ALL_SUPERVISORS_VALUE = "__all_supervisors__";
 
 function base64ToBytes(value) {
   const binary = atob(value);
@@ -120,8 +121,20 @@ function normalize(value) {
     .toLowerCase();
 }
 
+function formatPhone(value) {
+  const raw = String(value ?? "").trim();
+  if (!raw) return "";
+  const digits = raw.replace(/\D/g, "");
+  if (!digits) return raw;
+  if (digits.startsWith("0")) return digits;
+  if (digits.startsWith("966")) return `0${digits.slice(3)}`;
+  return `0${digits}`;
+}
+
 function rowToObject(row) {
-  return Object.fromEntries(FIELD_KEYS.map((key, index) => [key, row[index] ?? ""]));
+  const item = Object.fromEntries(FIELD_KEYS.map((key, index) => [key, row[index] ?? ""]));
+  item.phone = formatPhone(item.phone);
+  return item;
 }
 
 function uniqueSorted(values) {
@@ -159,18 +172,35 @@ async function copyText(text, successMessage) {
 }
 
 function buildMessage(row, index = null) {
-  const title = index === null ? "بيانات العينة المطلوبة للتواصل:" : `العينة رقم ${index}:`;
-  const lines = [
+  const title = index === null ? "بيانات العينة للتواصل" : `العينة رقم (${index})`;
+  const sampleLines = [
     title,
+    "────────────────────",
     row.sampleName && `اسم العينة: ${row.sampleName}`,
     row.recordNumber && `رقم السجل: ${row.recordNumber}`,
     row.fulfillmentStatus && `حالة الاستيفاء: ${row.fulfillmentStatus}`,
     row.activity && `النشاط: ${row.activity}`,
-    row.phone && `رقم التواصل: ${row.phone}`,
+  ].filter(Boolean);
+  const contactLines = [
+    "بيانات التواصل",
+    "────────────────────",
+    row.phone && `رقم التواصل: ${formatPhone(row.phone)}`,
     row.email && `البريد الإلكتروني: ${row.email}`,
     row.location && `الموقع: ${row.location}`,
   ].filter(Boolean);
-  return lines.join("\n");
+  const sections = [];
+
+  if (index === null) {
+    sections.push(
+      "السلام عليكم ورحمة الله وبركاته،",
+      "نأمل التكرم بالتواصل مع العينة التالية واستكمال الإجراء اللازم:",
+    );
+  }
+
+  sections.push(sampleLines.join("\n"));
+  if (contactLines.length > 2) sections.push(contactLines.join("\n"));
+  if (index === null) sections.push("شاكرين لكم تعاونكم.");
+  return sections.join("\n\n");
 }
 
 function createDetail(key, label, isContact, value) {
@@ -257,20 +287,26 @@ function renderStatusChips(rows) {
 }
 
 function applyFilters() {
+  const supervisor = supervisorSelect.value;
   const researcher = researcherSelect.value;
-  if (!researcher) {
+  const query = normalize(searchInput.value);
+
+  if (!supervisor && !query) {
     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 supervisorRows =
+    !supervisor || supervisor === ALL_SUPERVISORS_VALUE
+      ? allRows
+      : allRows.filter((row) => row.supervisor === supervisor);
+  const scopedRows = researcher
+    ? supervisorRows.filter((row) => row.researcher === researcher)
+    : supervisorRows;
+
+  visibleRows = scopedRows.filter((row) => {
     const matchesStatus = !status || row.fulfillmentStatus === status;
     const matchesSearch =
       !query ||
@@ -281,10 +317,17 @@ function applyFilters() {
 
   emptyState.hidden = true;
   resultsSection.hidden = false;
-  resultsTitle.textContent = researcher;
-  resultsMeta.textContent = `${visibleRows.length} من أصل ${researcherRows.length} عينة`;
+  resultsTitle.textContent =
+    researcher ||
+    (supervisor === ALL_SUPERVISORS_VALUE
+      ? "جميع العينات"
+      : supervisor
+        ? `عينات المشرف: ${supervisor}`
+        : "نتائج البحث");
+  resultsMeta.textContent = `${visibleRows.length} من أصل ${scopedRows.length} عينة`;
   copyAllButton.disabled = visibleRows.length === 0;
-  renderStatusChips(researcherRows);
+  copyAllButton.textContent = researcher ? "نسخ جميع عينات الباحث" : "نسخ جميع النتائج المعروضة";
+  renderStatusChips(scopedRows);
 
   samplesGrid.replaceChildren(
     ...visibleRows.map((row, index) => createSampleCard(row, index)),
@@ -293,29 +336,23 @@ function applyFilters() {
 }
 
 function resetResearcherControls() {
-  setOptions(researcherSelect, [], "اختر الباحث");
+  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
-    ? "اختر اسم الباحث لعرض العينات المسندة إليه."
-    : "لن تظهر أي بيانات للعينات حتى يتم اختيار المشرف والباحث.";
+  emptyState.querySelector("h3").textContent = "ابحث أو اختر المشرف";
+  emptyState.querySelector("p").textContent =
+    "يمكنك البحث مباشرة باسم العينة أو رقم السجل، أو اختيار المشرف لعرض كامل عيناته.";
 }
 
 function initializeDashboard(data) {
   allRows = data.rows.map(rowToObject);
-  setOptions(
-    supervisorSelect,
-    uniqueSorted(allRows.map((row) => row.supervisor)),
-    "اختر المشرف",
-  );
+  setOptions(supervisorSelect, uniqueSorted(allRows.map((row) => row.supervisor)), "اختر المشرف");
+  supervisorSelect.add(new Option("إبراهيم - جميع العينات", ALL_SUPERVISORS_VALUE), 1);
+  searchInput.value = "";
+  searchInput.disabled = false;
   resetResearcherControls();
 }
 
@@ -367,28 +404,48 @@ logoutButton.addEventListener("click", () => {
 
 supervisorSelect.addEventListener("change", () => {
   resetResearcherControls();
-  if (!supervisorSelect.value) return;
+  searchInput.value = "";
+  if (!supervisorSelect.value) {
+    applyFilters();
+    return;
+  }
 
   const researchers = uniqueSorted(
     allRows
-      .filter((row) => row.supervisor === supervisorSelect.value)
+      .filter(
+        (row) =>
+          supervisorSelect.value === ALL_SUPERVISORS_VALUE ||
+          row.supervisor === supervisorSelect.value,
+      )
       .map((row) => row.researcher),
   );
-  setOptions(researcherSelect, researchers, "اختر الباحث");
+  const scopeRows =
+    supervisorSelect.value === ALL_SUPERVISORS_VALUE
+      ? allRows
+      : allRows.filter((row) => row.supervisor === supervisorSelect.value);
+  setOptions(researcherSelect, researchers, "جميع الباحثين");
+  setOptions(
+    statusSelect,
+    uniqueSorted(scopeRows.map((row) => row.fulfillmentStatus)),
+    "جميع الحالات",
+  );
   researcherSelect.disabled = false;
+  statusSelect.disabled = false;
+  applyFilters();
 });
 
 researcherSelect.addEventListener("change", () => {
-  const rows = allRows.filter(
-    (row) =>
-      row.supervisor === supervisorSelect.value &&
-      row.researcher === researcherSelect.value,
-  );
+  const rows = allRows.filter((row) => {
+    const matchesSupervisor =
+      supervisorSelect.value === ALL_SUPERVISORS_VALUE ||
+      row.supervisor === supervisorSelect.value;
+    const matchesResearcher =
+      !researcherSelect.value || row.researcher === researcherSelect.value;
+    return matchesSupervisor && matchesResearcher;
+  });
   const statuses = uniqueSorted(rows.map((row) => row.fulfillmentStatus));
   setOptions(statusSelect, statuses, "جميع الحالات");
-  statusSelect.disabled = !researcherSelect.value;
-  searchInput.disabled = !researcherSelect.value;
-  searchInput.value = "";
+  statusSelect.disabled = false;
   applyFilters();
 });
 
@@ -397,9 +454,14 @@ searchInput.addEventListener("input", applyFilters);
 
 copyAllButton.addEventListener("click", () => {
   if (!visibleRows.length) return;
-  const heading = `بيانات العينات الخاصة بالباحث: ${researcherSelect.value}`;
+  const heading = researcherSelect.value
+    ? `بيانات العينات الخاصة بالباحث: ${researcherSelect.value}`
+    : `بيانات العينات المعروضة (${visibleRows.length} عينة)`;
   const messages = visibleRows.map((row, index) => buildMessage(row, index + 1));
-  copyText([heading, ...messages].join("\n\n--------------------\n\n"), "تم نسخ جميع العينات المعروضة");
+  copyText(
+    [heading, "════════════════════", ...messages].join("\n\n"),
+    "تم نسخ جميع العينات المعروضة",
+  );
 });
 
 if (!window.crypto?.subtle || typeof ENCRYPTED_DATA === "undefined") {

index.html

@@ -98,7 +98,7 @@
             <div>
               <p class="eyebrow">لوحة الاستعلام</p>
               <h2>الوصول إلى بيانات العينة بسهولة</h2>
-              <p>اختر المشرف والباحث، ثم استخدم البحث والفلاتر للوصول إلى العينة المطلوبة.</p>
+              <p>ابحث مباشرة، أو اختر المشرف لعرض عيناته ثم حدّد الباحث عند الحاجة.</p>
             </div>
             <div class="privacy-pill">
               <span class="status-dot"></span>
@@ -149,7 +149,6 @@
                     id="searchInput"
                     type="search"
                     placeholder="اسم العينة أو رقم السجل"
-                    disabled
                   />
                 </div>
               </div>
@@ -163,8 +162,8 @@
                 <path d="M15 8h18v10H15zM15 26h18M15 33h11" />
               </svg>
             </div>
-            <h3>ابدأ باختيار المشرف</h3>
-            <p>لن تظهر أي بيانات للعينات حتى يتم اختيار المشرف والباحث.</p>
+            <h3>ابحث أو اختر المشرف</h3>
+            <p>اكتب اسم العينة أو رقم السجل مباشرة، أو اختر المشرف لعرض كامل عيناته.</p>
           </section>
 
           <section id="resultsSection" class="results-section" hidden>

style.css

@@ -27,6 +27,7 @@ body {
   min-height: 100vh;
   margin: 0;
   color: var(--ink);
+  font-size: 16px;
   font-family: "Tajawal", Arial, sans-serif;
   background:
     radial-gradient(circle at 10% 10%, rgba(41, 151, 173, 0.12), transparent 30%),
@@ -154,7 +155,7 @@ svg {
   max-width: 340px;
   margin: 12px auto 28px;
   color: var(--muted);
-  font-size: 15px;
+  font-size: 16px;
   line-height: 1.8;
 }
 
@@ -167,7 +168,7 @@ svg {
   display: block;
   margin-bottom: 8px;
   color: #314b5e;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 700;
 }
 
@@ -186,6 +187,7 @@ svg {
   background: #fbfdfe;
   border: 1px solid var(--line);
   border-radius: 14px;
+  font-size: 16px;
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
 }
@@ -353,8 +355,11 @@ svg {
   gap: 24px;
   padding: 24px 28px;
   color: white;
+  overflow: hidden;
+  position: relative;
   background:
-    linear-gradient(115deg, rgba(10, 44, 80, 0.98), rgba(29, 101, 155, 0.92)),
+    radial-gradient(circle at 12% 130%, rgba(89, 223, 206, 0.28), transparent 32%),
+    linear-gradient(115deg, rgba(8, 39, 72, 0.99), rgba(25, 105, 161, 0.95)),
     var(--navy);
   border-radius: 22px;
   box-shadow: 0 14px 32px rgba(18, 60, 105, 0.17);
@@ -372,7 +377,7 @@ svg {
 .welcome-panel > div > p:last-child {
   margin: 0;
   color: rgba(255, 255, 255, 0.77);
-  font-size: 14px;
+  font-size: 15px;
 }
 
 .privacy-pill {
@@ -403,7 +408,7 @@ svg {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 20px;
-  box-shadow: 0 10px 26px rgba(24, 66, 91, 0.06);
+  box-shadow: 0 14px 34px rgba(24, 66, 91, 0.08);
 }
 
 .filters-grid {
@@ -501,14 +506,14 @@ input:disabled {
 .results-meta {
   margin: 0 0 4px;
   color: var(--teal);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 800;
 }
 
 .results-header h2 {
   margin: 0;
   color: var(--navy-dark);
-  font-size: 24px;
+  font-size: 26px;
 }
 
 .copy-all {
@@ -527,7 +532,7 @@ input:disabled {
 .status-chip {
   padding: 7px 11px;
   color: #466071;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 700;
   background: white;
   border: 1px solid var(--line);
@@ -549,8 +554,8 @@ input:disabled {
   overflow: hidden;
   background: white;
   border: 1px solid var(--line);
-  border-radius: 19px;
-  box-shadow: 0 8px 24px rgba(26, 63, 87, 0.055);
+  border-radius: 21px;
+  box-shadow: 0 10px 28px rgba(26, 63, 87, 0.07);
   transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
 }
 
@@ -568,20 +573,21 @@ input:disabled {
   padding: 18px 20px 15px;
   background: linear-gradient(180deg, #fbfdfe, white);
   border-bottom: 1px solid #edf2f5;
+  border-top: 4px solid var(--teal);
 }
 
 .sample-index {
   display: inline-block;
   margin-bottom: 5px;
   color: var(--teal);
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 800;
 }
 
 .sample-card h3 {
   margin: 0;
   color: var(--navy-dark);
-  font-size: 17px;
+  font-size: 19px;
   line-height: 1.65;
 }
 
@@ -590,7 +596,7 @@ input:disabled {
   max-width: 155px;
   padding: 7px 10px;
   color: #8f4f16;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 800;
   line-height: 1.4;
   text-align: center;
@@ -625,7 +631,7 @@ input:disabled {
   display: block;
   margin-bottom: 5px;
   color: var(--muted);
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 700;
 }
 
@@ -633,7 +639,7 @@ input:disabled {
   display: block;
   overflow-wrap: anywhere;
   color: #233d4f;
-  font-size: 13px;
+  font-size: 15px;
   font-weight: 600;
   line-height: 1.6;
 }
@@ -654,6 +660,7 @@ input:disabled {
   background: var(--sky);
   border: 1px solid #cde2ee;
   border-radius: 12px;
+  font-size: 15px;
 }
 
 .copy-sample:hover {
@@ -728,6 +735,10 @@ footer {
   .copy-all {
     width: 100%;
   }
+
+  .results-header h2 {
+    font-size: 23px;
+  }
 }
 
 @media (max-width: 560px) {
@@ -766,6 +777,18 @@ footer {
 
   .filters-grid {
     grid-template-columns: 1fr;
+    gap: 13px;
+  }
+
+  .search-group {
+    grid-row: 1;
+  }
+
+  .password-field input,
+  .search-wrap input,
+  .select-wrap select {
+    height: 56px;
+    font-size: 16px;
   }
 
   .sample-card-header {
@@ -778,6 +801,7 @@ footer {
 
   .sample-details {
     grid-template-columns: 1fr;
+    padding: 4px 17px;
   }
 
   .detail-item:nth-child(odd),
@@ -786,6 +810,25 @@ footer {
     padding-left: 0;
     border-left: 0;
   }
+
+  .sample-card-header,
+  .sample-card-footer {
+    padding-right: 17px;
+    padding-left: 17px;
+  }
+
+  .detail-label {
+    font-size: 13px;
+  }
+
+  .detail-value {
+    font-size: 16px;
+  }
+
+  .copy-sample {
+    min-height: 48px;
+    font-size: 16px;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {