Upload 6 files

README.md

@@ -25,6 +25,8 @@ short_description: نظام استعلام المنشآت الصناعية
 - إذا كانت الخانة تحتوي على إحداثيات رقمية، يظهر رابط مباشر إلى خرائط Google.
 - إذا كانت الخانة فارغة، لا يظهر حقل الإحداثيات.
 - إذا كانت الخانة تحتوي على نص تواصل ورقم جوال، تظهر باسم "إفادة مدن" مع أزرار نسخ الرقم وواتساب ونسخ رسالة مقترحة.
+- يتم تمييز الإحداثيات وإفادة مدن بصريًا بألوان مختلفة.
+- يحفظ النظام آخر منطقة ومدينة وبحث تم استخدامها على نفس المتصفح.
 
 ## تحديث البيانات
 

app.js

@@ -27,6 +27,7 @@ const regionStats = document.getElementById("regionStats");
 const toast = document.getElementById("toast");
 
 const PAGE_SIZE = 24;
+const STATE_KEY = "icsInquiryFilters";
 const CONTACT_MESSAGE = (name) =>
   `السلام عليكم ورحمة الله وبركاته\n\nأستاذي الكريم،\nنأمل تزويدنا بموقع منشأة (${name || "العينة"})، وذلك لاستكمال بيانات الزيارة الميدانية.\n\nشاكرين لكم تعاونكم.`;
 
@@ -34,6 +35,7 @@ let rows = [];
 let visibleRows = [];
 let renderedCount = 0;
 let toastTimer;
+let isRestoringState = false;
 
 function base64ToBytes(value) {
   const binary = atob(value);
@@ -89,6 +91,26 @@ function setOptions(select, values, placeholder) {
   values.forEach((value) => select.add(new Option(value, value)));
 }
 
+function saveFilterState() {
+  if (isRestoringState) return;
+  localStorage.setItem(
+    STATE_KEY,
+    JSON.stringify({
+      region: regionSelect.value,
+      city: citySelect.value,
+      search: searchInput.value,
+    }),
+  );
+}
+
+function getSavedFilterState() {
+  try {
+    return JSON.parse(localStorage.getItem(STATE_KEY) || "{}");
+  } catch {
+    return {};
+  }
+}
+
 function updateRegionButtonState() {
   regionButtons.querySelectorAll(".region-choice").forEach((button) => {
     const isActive = button.dataset.region === regionSelect.value;
@@ -190,13 +212,14 @@ function createCoordinatesBlock(row) {
   if (!value) return null;
 
   const item = document.createElement("div");
-  item.className = "detail-item coordinates-detail";
+  const hasCoordinates = isCoordinate(value);
+  item.className = `detail-item coordinates-detail ${hasCoordinates ? "map-detail" : "statement-detail"}`;
   const label = document.createElement("span");
   label.className = "detail-label";
-  label.textContent = isCoordinate(value) ? "الإحداثيات" : "إفادة مدن";
+  label.textContent = hasCoordinates ? "الإحداثيات" : "إفادة مدن";
   item.append(label);
 
-  if (isCoordinate(value)) {
+  if (hasCoordinates) {
     item.append(
       createActionLink(
         "اضغط هنا للذهاب بخرائط Google",
@@ -321,6 +344,7 @@ function applyFilters() {
   resultsTitle.textContent = city || region || "نتائج البحث";
   resultsMeta.textContent = `${visibleRows.length} من أصل ${scopedRows.length} منشأة`;
   renderVisibleRows(true);
+  saveFilterState();
 }
 
 function initializeDashboard(data) {
@@ -359,6 +383,22 @@ function initializeDashboard(data) {
   );
   setOptions(citySelect, [], "اختر المدينة الصناعية");
   citySelect.disabled = true;
+  restoreFilterState();
+}
+
+function restoreFilterState() {
+  const saved = getSavedFilterState();
+  isRestoringState = true;
+  searchInput.value = saved.search || "";
+  if (saved.region && [...regionSelect.options].some((option) => option.value === saved.region)) {
+    setRegion(saved.region);
+    if (saved.city && [...citySelect.options].some((option) => option.value === saved.city)) {
+      citySelect.value = saved.city;
+    }
+  } else {
+    setRegion("");
+  }
+  isRestoringState = false;
   applyFilters();
 }
 
@@ -411,6 +451,7 @@ searchInput.addEventListener("input", applyFilters);
 loadMoreButton.addEventListener("click", () => renderVisibleRows());
 clearFiltersButton.addEventListener("click", () => {
   searchInput.value = "";
+  localStorage.removeItem(STATE_KEY);
   setRegion("");
   showToast("تم مسح الاختيارات");
 });

style.css

@@ -516,6 +516,81 @@ select:disabled {
   border-left: 0 !important;
 }
 
+.coordinates-detail {
+  position: relative;
+  margin-top: 10px;
+  padding: 13px 14px !important;
+  border: 1px solid transparent !important;
+  border-radius: 8px;
+}
+
+.coordinates-detail::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  right: 0;
+  bottom: 12px;
+  width: 4px;
+  border-radius: 8px 0 0 8px;
+}
+
+.map-detail {
+  background: #edf9f3;
+  border-color: #bfead2 !important;
+}
+
+.map-detail::before {
+  background: #168a5b;
+}
+
+.statement-detail {
+  background: #eef7fb;
+  border-color: #c7e1ec !important;
+}
+
+.statement-detail::before {
+  background: #227997;
+}
+
+.map-detail .detail-label,
+.statement-detail .detail-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 24px;
+  padding: 3px 8px;
+  border-radius: 8px;
+}
+
+.map-detail .detail-label {
+  color: #116343;
+  background: #dff4e9;
+}
+
+.statement-detail .detail-label {
+  color: #17647d;
+  background: #dff0f6;
+}
+
+.map-detail .action-link {
+  color: #116343;
+  background: #ffffff;
+  border-color: #b7e3ca;
+}
+
+.statement-detail .action-link {
+  color: #17647d;
+  background: #ffffff;
+  border-color: #bddce8;
+}
+
+.map-detail .action-link:hover,
+.statement-detail .action-link:hover {
+  color: #fff;
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
 .ltr-value .detail-value {
   direction: ltr;
   text-align: right;