Upload 3 files

app.js

@@ -102,6 +102,7 @@ const state = {
   currentUser: "",
   isManager: false,
   dirtyRows: new Map(),
+  autosaveTimers: new Map(),
   toastTimer: null,
 };
 
@@ -158,13 +159,18 @@ function valueOf(row, key) {
   return header ? row.raw[header] ?? "" : "";
 }
 
+function effectiveValue(row, key) {
+  const dirty = state.dirtyRows.get(Number(row.rowNumber));
+  return dirty && key in dirty ? dirty[key] : valueOf(row, key);
+}
+
 function setValue(row, key, value) {
   const header = state.headerMap[key];
   if (header) row.raw[header] = value;
 }
 
 function isEntered(row) {
-  return EDITABLE_KEYS.every((key) => String(valueOf(row, key)).trim());
+  return EDITABLE_KEYS.every((key) => String(effectiveValue(row, key)).trim());
 }
 
 function rowByNumber(rowNumber) {
@@ -223,6 +229,8 @@ function applyLoadedData(data) {
   state.headerMap = buildHeaderMap(state.headers);
   validateHeaders();
   state.rows = data.rows;
+  state.autosaveTimers.forEach((timer) => clearTimeout(timer));
+  state.autosaveTimers.clear();
   state.dirtyRows.clear();
   updateSaveAllState();
   populateSelects();
@@ -343,7 +351,11 @@ function createInput(row, key) {
   input.dataset.key = key;
   input.placeholder = LABELS[key];
   if (key === "email") input.type = "email";
-  if (key === "phone") input.inputMode = "tel";
+  if (key === "phone") {
+    input.inputMode = "numeric";
+    input.maxLength = 10;
+    input.pattern = "05[0-9]{8}";
+  }
   input.addEventListener("input", () => handleFieldInput(row, key, input.value));
   return input;
 }
@@ -372,6 +384,8 @@ function handleFieldInput(row, key, value) {
   syncInputs(rowNumber, key, value);
   markDirty(rowNumber, true);
   updateSaveAllState();
+  updateRowShellStatus(row);
+  scheduleAutosave(row);
 }
 
 function syncInputs(rowNumber, key, value) {
@@ -384,12 +398,39 @@ function markDirty(rowNumber, isDirty) {
   document.querySelectorAll(`[data-row-shell="${rowNumber}"]`).forEach((node) => node.classList.toggle("is-dirty", isDirty));
 }
 
+function markSaving(rowNumber, isSaving) {
+  document.querySelectorAll(`[data-row-shell="${rowNumber}"]`).forEach((node) => node.classList.toggle("is-saving", isSaving));
+}
+
+function updateRowShellStatus(row) {
+  const complete = isEntered(row);
+  document.querySelectorAll(`[data-row-shell="${row.rowNumber}"]`).forEach((node) => {
+    node.classList.toggle("complete", complete);
+    node.classList.toggle("incomplete", !complete);
+    const badge = node.querySelector(".status-badge");
+    if (badge) {
+      badge.className = `status-badge ${complete ? "status-entered" : "status-missing"}`;
+      badge.textContent = complete ? "مكتملة" : "غير مكتملة";
+    }
+  });
+}
+
 function updateSaveAllState() {
   const count = state.dirtyRows.size;
   els.saveAllButton.disabled = count === 0;
   els.saveAllButton.textContent = count ? `حفظ الكل (${count})` : "حفظ الكل";
 }
 
+function scheduleAutosave(row) {
+  const rowNumber = Number(row.rowNumber);
+  clearTimeout(state.autosaveTimers.get(rowNumber));
+  const timer = setTimeout(() => {
+    if (!state.dirtyRows.has(rowNumber)) return;
+    saveRow(row, null, { silent: true, autosave: true });
+  }, 1200);
+  state.autosaveTimers.set(rowNumber, timer);
+}
+
 function renderTable() {
   els.tableBody.replaceChildren(...state.visibleRows.map((row) => {
     const tr = document.createElement("tr");
@@ -518,20 +559,29 @@ function validateSaveValues(values) {
   if (EDITABLE_KEYS.every((key) => !String(values[key] || "").trim())) {
     return "أدخل بيانات التواصل قبل الحفظ.";
   }
+  const phone = String(values.phone || "").trim();
+  if (phone && !/^05\d{8}$/.test(phone)) {
+    return "رقم الجوال يجب أن يكون 10 أرقام ويبدأ بـ 05.";
+  }
   return "";
 }
 
-async function saveRow(row, button) {
+async function saveRow(row, button, options = {}) {
   const values = valuesForRow(row);
   const validation = validateSaveValues(values);
   if (validation) {
-    showToast(validation);
+    if (!options.silent) showToast(validation);
     return;
   }
+  clearTimeout(state.autosaveTimers.get(Number(row.rowNumber)));
   const updates = Object.fromEntries(EDITABLE_KEYS.map((key) => [state.headerMap[key], values[key] || ""]));
-  button.disabled = true;
-  const originalText = button.textContent;
-  button.textContent = "جاري الحفظ...";
+  let originalText = "";
+  if (button) {
+    button.disabled = true;
+    originalText = button.textContent;
+    button.textContent = "جاري الحفظ...";
+  }
+  markSaving(row.rowNumber, true);
   try {
     await apiRequest({
       action: "update",
@@ -544,14 +594,18 @@ async function saveRow(row, button) {
     EDITABLE_KEYS.forEach((key) => setValue(row, key, values[key] || ""));
     state.dirtyRows.delete(Number(row.rowNumber));
     markDirty(row.rowNumber, false);
+    updateRowShellStatus(row);
     updateSaveAllState();
-    showToast("تم الحفظ بنجاح");
+    showToast(options.autosave ? "تم الحفظ تلقائيًا" : "تم الحفظ بنجاح");
     applyFilters();
   } catch (error) {
     showToast(error.message || "تعذر الحفظ");
   } finally {
-    button.disabled = false;
-    button.textContent = originalText;
+    markSaving(row.rowNumber, false);
+    if (button) {
+      button.disabled = false;
+      button.textContent = originalText;
+    }
   }
 }
 
@@ -568,6 +622,7 @@ async function saveAllDirtyRows() {
       const validation = validateSaveValues(values);
       if (validation) throw new Error(`الصف ${rowNumber}: ${validation}`);
       const updates = Object.fromEntries(EDITABLE_KEYS.map((key) => [state.headerMap[key], values[key] || ""]));
+      clearTimeout(state.autosaveTimers.get(rowNumber));
       await apiRequest({ action: "update", rowNumber, updates });
       EDITABLE_KEYS.forEach((key) => setValue(row, key, values[key] || ""));
       state.dirtyRows.delete(rowNumber);
@@ -582,21 +637,6 @@ async function saveAllDirtyRows() {
   }
 }
 
-function csvEscape(value) {
-  return `"${String(value ?? "").replace(/"/g, '""')}"`;
-}
-
-function downloadCsv(filename, headers, rows) {
-  const csv = [headers.map(csvEscape).join(",")].concat(rows.map((row) => row.map(csvEscape).join(","))).join("\r\n");
-  const blob = new Blob([`\ufeff${csv}`], { type: "text/csv;charset=utf-8" });
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = filename;
-  link.click();
-  URL.revokeObjectURL(url);
-}
-
 function aggregateCount(rows, key) {
   const map = new Map();
   rows.forEach((row) => {
@@ -606,26 +646,100 @@ function aggregateCount(rows, key) {
   return [...map.entries()].map(([label, count]) => [label, count]);
 }
 
+function ensureExcelLibrary() {
+  if (!window.XLSX) {
+    showToast("تعذر تحميل مكتبة Excel. تحقق من اتصال الإنترنت ثم حاول مرة أخرى.");
+    return false;
+  }
+  return true;
+}
+
+function makeWorksheet(rows, columnWidths = []) {
+  const sheet = XLSX.utils.aoa_to_sheet(rows);
+  sheet["!cols"] = columnWidths.map((width) => ({ wch: width }));
+  sheet["!autofilter"] = { ref: XLSX.utils.encode_range({ s: { r: 0, c: 0 }, e: { r: Math.max(rows.length - 1, 0), c: Math.max((rows[0] || []).length - 1, 0) } }) };
+  return sheet;
+}
+
+function appendSheet(workbook, name, rows, widths) {
+  const sheet = makeWorksheet(rows, widths);
+  XLSX.utils.book_append_sheet(workbook, sheet, name.slice(0, 31));
+}
+
+function writeWorkbook(filename, workbook) {
+  workbook.Workbook = { Views: [{ RTL: true }] };
+  XLSX.writeFile(workbook, filename, { bookType: "xlsx", compression: true });
+}
+
+function fullDataRows() {
+  const exportHeaders = [
+    "السجل التجاري",
+    "اسم المنشأة",
+    "مدير الحساب",
+    "الاسم",
+    "المسمى الوظيفي",
+    "البريد الإلكتروني",
+    "رقم التواصل",
+    "X",
+    "Y",
+    "المنطقة",
+    "الحي",
+    "اسم الباحث",
+    "حالة الإدخال",
+  ];
+  const rows = state.rows.map((row) => [
+    valueOf(row, "commercial"),
+    valueOf(row, "facility"),
+    valueOf(row, "accountManager"),
+    valueOf(row, "name"),
+    valueOf(row, "jobTitle"),
+    valueOf(row, "email"),
+    valueOf(row, "phone"),
+    valueOf(row, "x"),
+    valueOf(row, "y"),
+    valueOf(row, "region"),
+    valueOf(row, "district"),
+    valueOf(row, "researcher"),
+    isEntered(row) ? "مكتملة" : "غير مكتملة",
+  ]);
+  return [exportHeaders, ...rows];
+}
+
 function exportSummary() {
+  if (!ensureExcelLibrary()) return;
   const total = computeStats(state.rows);
-  const rows = [
-    ["الإجمالي", total.total, total.entered, total.missing, `${total.progress}%`],
+  const workbook = XLSX.utils.book_new();
+  appendSheet(workbook, "الملخص", [
+    ["تقرير إحصائي لمشروع رصد بيانات المنشآت"],
+    ["تاريخ التصدير", new Date().toLocaleString("ar-SA")],
     [],
+    ["إجمالي العينات", "المكتملة", "غير المكتملة", "نسبة الإنجاز"],
+    [total.total, total.entered, total.missing, `${total.progress}%`],
+  ], [26, 16, 16, 16]);
+  appendSheet(workbook, "حسب الباحث", [
     ["الباحث", "عدد العينات", "مكتملة", "غير مكتملة", "نسبة الإنجاز"],
     ...researcherStats().map((item) => [item.name, item.total, item.entered, item.missing, `${item.progress}%`]),
-    [],
+  ], [28, 16, 16, 16, 16]);
+  appendSheet(workbook, "حسب المنطقة", [
     ["المنطقة", "عدد العينات"],
     ...aggregateCount(state.rows, "region"),
-    [],
+  ], [30, 16]);
+  appendSheet(workbook, "حسب الحي", [
     ["الحي", "عدد العينات"],
     ...aggregateCount(state.rows, "district"),
-  ];
-  downloadCsv("تقرير-إحصائي.csv", ["البند", "القيمة 1", "القيمة 2", "القيمة 3", "القيمة 4"], rows);
+  ], [34, 16]);
+  writeWorkbook("تقرير-إحصائي-رصد-المنشآت.xlsx", workbook);
 }
 
 function exportFull() {
-  const rows = state.rows.map((row) => state.headers.map((header) => row.raw[header] ?? ""));
-  downloadCsv("تقرير-تفصيلي-كامل.csv", state.headers, rows);
+  if (!ensureExcelLibrary()) return;
+  const workbook = XLSX.utils.book_new();
+  appendSheet(workbook, "جميع البيانات", fullDataRows(), [15, 46, 22, 20, 22, 28, 16, 16, 16, 22, 28, 22, 16]);
+  appendSheet(workbook, "إحصائيات الباحثين", [
+    ["الباحث", "عدد العينات", "مكتملة", "غير مكتملة", "نسبة الإنجاز"],
+    ...researcherStats().map((item) => [item.name, item.total, item.entered, item.missing, `${item.progress}%`]),
+  ], [28, 16, 16, 16, 16]);
+  writeWorkbook("تقرير-تفصيلي-كامل-رصد-المنشآت.xlsx", workbook);
 }
 
 async function bootstrap() {
@@ -682,6 +796,8 @@ function logout() {
   if (!confirmIfDirty()) return;
   state.currentUser = "";
   state.isManager = false;
+  state.autosaveTimers.forEach((timer) => clearTimeout(timer));
+  state.autosaveTimers.clear();
   state.dirtyRows.clear();
   updateSaveAllState();
   els.password.value = "";

index.html

@@ -183,6 +183,7 @@
       </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>

style.css

@@ -473,6 +473,21 @@ tbody tr.is-dirty { background: rgba(255, 192, 0, 0.08); }
   box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.22), var(--shadow);
 }
 
+.facility-card.is-saving,
+tbody tr.is-saving {
+  opacity: 0.78;
+}
+
+.facility-card.is-saving::after {
+  content: "جاري الحفظ...";
+  display: block;
+  margin-top: 10px;
+  color: var(--primary-alt);
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+}
+
 .facility-card-head {
   display: flex;
   align-items: flex-start;