Upload 3 files

app.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const PAGE_SIZE = 24;
+const ADMIN_REFRESH_INTERVAL = 60000;
 const STATE_KEY = "ics2ResearcherWorkspace";
 const DOCUMENTATION_DONE_KEY = "ics2DocumentationCompleted";
 const FORM_URL = "https://drive.google.com/file/d/1BEJ3qrqB3RMvhw4Z0i4dxZiwEreT9cJc/view?usp=sharing";
@@ -38,7 +39,7 @@ const elements = Object.fromEntries(
     "documentationUnavailable", "documentationForm", "fieldStatus", "otherStatusField", "otherStatus", "fieldStatement",
     "statementCount", "documentationPhotos", "photoPreviews", "documentationError",
     "uploadProgress", "uploadProgressBar", "cancelDocumentationButton", "saveDocumentationButton",
-    "adminView", "adminLogoutButton", "adminUpdatedAt", "refreshAdminButton", "adminStats", "adminInsight",
+    "adminView", "adminLogoutButton", "adminUpdatedAt", "adminSyncStatus", "refreshAdminButton", "adminStats", "adminInsight",
     "adminProgressOverview", "adminTrendTotal", "adminTrendChart", "adminCityProgress",
     "adminControls", "adminSearch", "adminResearcherFilter", "adminCityFilter", "adminDateFilter",
     "adminStatusFilter", "clearAdminFilters", "activeResearchersCount",
@@ -63,6 +64,10 @@ let documentationFiles = [];
 let documentationExistingPhotos = [];
 let documentationRecords = [];
 let lastSavedRowId = "";
+let adminRefreshTimer = null;
+let adminRefreshInProgress = false;
+let adminDashboardInitialized = false;
+let newAdminRecordIds = new Set();
 let adminRecords = [];
 let directoryMode = "researcher";
 const mobileQuery = window.matchMedia("(max-width: 560px)");
@@ -271,6 +276,9 @@ function adminStat(value, label, note = "") {
 }
 
 function setAdminFilterOptions() {
+  const selectedResearcher = elements.adminResearcherFilter.value;
+  const selectedCity = elements.adminCityFilter.value;
+  const selectedStatus = elements.adminStatusFilter.value;
   setSelectOptions(
     elements.adminResearcherFilter,
     uniqueSorted(payload.researchers.map((item) => item.name)),
@@ -286,6 +294,24 @@ function setAdminFilterOptions() {
     uniqueSorted(adminRecords.map((record) => record.fieldStatus)),
     "جميع الحالات",
   );
+  if ([...elements.adminResearcherFilter.options].some((option) => option.value === selectedResearcher)) {
+    elements.adminResearcherFilter.value = selectedResearcher;
+  }
+  if ([...elements.adminCityFilter.options].some((option) => option.value === selectedCity)) {
+    elements.adminCityFilter.value = selectedCity;
+  }
+  if ([...elements.adminStatusFilter.options].some((option) => option.value === selectedStatus)) {
+    elements.adminStatusFilter.value = selectedStatus;
+  }
+}
+
+function adminRecordIdentity(record) {
+  return record.documentationId || record.sampleKey || `${record.commercialRecord}|${record.establishmentName}`;
+}
+
+function setAdminSyncState(state, text) {
+  elements.adminSyncStatus.className = `sync-status ${state}`;
+  elements.adminSyncStatus.querySelector("span").textContent = text;
 }
 
 function renderAdminStats() {
@@ -478,6 +504,7 @@ function renderAdminRecords() {
   records.slice(0, 100).forEach((record) => {
     const item = document.createElement("article");
     item.className = "admin-record";
+    if (newAdminRecordIds.has(adminRecordIdentity(record))) item.classList.add("new-record");
     const date = record.documentedAt
       ? new Intl.DateTimeFormat("ar-SA", {
           timeZone: "Asia/Riyadh",
@@ -553,11 +580,25 @@ function renderAdminRecords() {
   elements.adminRecords.replaceChildren(fragment);
 }
 
-async function loadAdminDashboard() {
+async function loadAdminDashboard({ automatic = false } = {}) {
+  if (adminRefreshInProgress || sessionAccessCode !== "1448") return;
+  adminRefreshInProgress = true;
   elements.refreshAdminButton.disabled = true;
+  setAdminSyncState("syncing", automatic ? "جارٍ التحديث التلقائي..." : "جارٍ تحديث البيانات...");
   try {
     const result = await fetchDocumentation("admin", sessionAccessCode);
-    adminRecords = hydrateRecordKeys(result.records || []);
+    const incomingRecords = hydrateRecordKeys(result.records || []);
+    if (adminDashboardInitialized) {
+      const previousIds = new Set(adminRecords.map(adminRecordIdentity));
+      newAdminRecordIds = new Set(
+        incomingRecords
+          .map(adminRecordIdentity)
+          .filter((identity) => identity && !previousIds.has(identity)),
+      );
+    } else {
+      newAdminRecordIds.clear();
+    }
+    adminRecords = incomingRecords;
     documentationRecords = adminRecords;
     setAdminFilterOptions();
     elements.adminUpdatedAt.textContent = `آخر مزامنة: ${new Intl.DateTimeFormat("ar-SA", {
@@ -569,11 +610,40 @@ async function loadAdminDashboard() {
     renderAdminOverview();
     renderProductivity();
     renderAdminRecords();
+    adminDashboardInitialized = true;
+    setAdminSyncState("connected", newAdminRecordIds.size
+      ? `${newAdminRecordIds.size} توثيق جديد`
+      : "محدّث تلقائيًا");
+    if (newAdminRecordIds.size) {
+      showToast(`وصل ${newAdminRecordIds.size} توثيق جديد وتم تحديث لوحة المشرف`);
+      setTimeout(() => {
+        newAdminRecordIds.clear();
+        elements.adminRecords.querySelectorAll(".new-record").forEach((item) => item.classList.remove("new-record"));
+      }, 6000);
+    }
+  } catch (error) {
+    console.warn(error.message);
+    setAdminSyncState("offline", "تعذر التحديث، ستتم إعادة المحاولة");
   } finally {
     elements.refreshAdminButton.disabled = false;
+    adminRefreshInProgress = false;
   }
 }
 
+function stopAdminAutoRefresh() {
+  clearInterval(adminRefreshTimer);
+  adminRefreshTimer = null;
+}
+
+function startAdminAutoRefresh() {
+  stopAdminAutoRefresh();
+  if (sessionAccessCode !== "1448" || document.hidden) return;
+  adminRefreshTimer = setInterval(
+    () => loadAdminDashboard({ automatic: true }),
+    ADMIN_REFRESH_INTERVAL,
+  );
+}
+
 async function copyText(text, successMessage) {
   try {
     await navigator.clipboard.writeText(text);
@@ -1575,9 +1645,12 @@ elements.loginForm.addEventListener("submit", async (event) => {
     sessionAccessCode = password;
     elements.password.value = "";
     if (supervisor) {
+      adminDashboardInitialized = false;
+      newAdminRecordIds.clear();
       setAdminFilterOptions();
       showOnly(elements.adminView);
       await loadAdminDashboard();
+      startAdminAutoRefresh();
       return;
     }
     await syncResearcherDocumentation();
@@ -1621,14 +1694,27 @@ elements.logoutButton.addEventListener("click", () => {
   elements.password.focus();
 });
 elements.adminLogoutButton.addEventListener("click", () => {
+  stopAdminAutoRefresh();
   payload = null;
   adminRecords = [];
   documentationRecords = [];
+  adminDashboardInitialized = false;
+  newAdminRecordIds.clear();
   sessionAccessCode = "";
   showOnly(elements.loginView);
   elements.password.focus();
 });
-elements.refreshAdminButton.addEventListener("click", loadAdminDashboard);
+elements.refreshAdminButton.addEventListener("click", () => loadAdminDashboard());
+document.addEventListener("visibilitychange", () => {
+  if (sessionAccessCode !== "1448") return;
+  if (document.hidden) {
+    stopAdminAutoRefresh();
+    setAdminSyncState("paused", "التحديث متوقف أثناء وجود الصفحة بالخلفية");
+    return;
+  }
+  loadAdminDashboard({ automatic: true });
+  startAdminAutoRefresh();
+});
 [elements.adminSearch, elements.adminResearcherFilter, elements.adminCityFilter, elements.adminDateFilter, elements.adminStatusFilter]
   .forEach((control) => control.addEventListener(control.tagName === "INPUT" ? "input" : "change", renderAdminRecords));
 elements.clearAdminFilters.addEventListener("click", () => {

index.html

@@ -203,7 +203,7 @@
               <p id="adminUpdatedAt">تتم مزامنة البيانات من سجل التوثيق في Google Drive.</p>
             </div>
             <div class="admin-heading-actions">
-              <span class="sync-status"><i></i>متصل بسجل التوثيق</span>
+              <span id="adminSyncStatus" class="sync-status"><i></i><span>مزامنة تلقائية كل دقيقة</span></span>
               <button id="refreshAdminButton" class="secondary-button compact" type="button">
                 <svg viewBox="0 0 24 24"><path d="M20 6v5h-5M4 18v-5h5M6.1 9A7 7 0 0 1 18 6l2 5M17.9 15A7 7 0 0 1 6 18l-2-5" /></svg>
                 تحديث

style.css

@@ -2408,6 +2408,41 @@ body {
   box-shadow: 0 0 0 4px rgba(0, 176, 80, 0.12);
 }
 
+.sync-status.syncing i {
+  background: #27ced7;
+  box-shadow: 0 0 0 4px rgba(39, 206, 215, 0.14);
+  animation: sync-pulse 1s ease-in-out infinite;
+}
+
+.sync-status.offline {
+  color: #a04b00;
+  background: #fff7e8;
+  border-color: #f4d38a;
+}
+
+.sync-status.offline i {
+  background: #ffbc00;
+  box-shadow: 0 0 0 4px rgba(255, 188, 0, 0.14);
+}
+
+.sync-status.paused {
+  color: #526174;
+  background: #f3f6f8;
+  border-color: #dce5eb;
+}
+
+.sync-status.paused i {
+  background: #7a8797;
+  box-shadow: none;
+}
+
+@keyframes sync-pulse {
+  50% {
+    opacity: 0.35;
+    transform: scale(0.78);
+  }
+}
+
 .admin-stats {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
@@ -2417,6 +2452,12 @@ body {
 
 .admin-stat {
   min-height: 98px;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.admin-stat:hover {
+  border-color: #b9c8d2;
+  box-shadow: 0 5px 16px rgba(23, 32, 51, 0.07);
 }
 
 .admin-stat:nth-child(4) {
@@ -2920,6 +2961,24 @@ body {
   border: 1px solid #e1e8ed;
   border-radius: 5px;
   background: #ffffff;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.admin-record.new-record {
+  border-color: #00b050;
+  box-shadow: 0 0 0 3px rgba(0, 176, 80, 0.1);
+  animation: new-admin-record 0.7s ease both;
+}
+
+@keyframes new-admin-record {
+  from {
+    opacity: 0.55;
+    transform: translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .admin-record-heading,
@@ -3033,6 +3092,15 @@ body {
   }
 }
 
+@media (min-width: 981px) {
+  .admin-controls {
+    position: sticky;
+    top: 8px;
+    z-index: 30;
+    box-shadow: 0 8px 22px rgba(23, 32, 51, 0.08);
+  }
+}
+
 @media (max-width: 620px) {
   .dashboard-shell,
   .admin-shell {