Upload 2 files

app.js

@@ -67,6 +67,7 @@ const copyAllButton = document.getElementById("copyAllButton");
 const loadMoreWrap = document.getElementById("loadMoreWrap");
 const loadMoreButton = document.getElementById("loadMoreButton");
 const loadMoreMeta = document.getElementById("loadMoreMeta");
+const clearFiltersButton = document.getElementById("clearFiltersButton");
 const toast = document.getElementById("toast");
 
 let allRows = [];
@@ -224,6 +225,8 @@ function createDetail(key, label, isContact, value) {
   labelElement.className = "detail-label";
   labelElement.textContent = label;
 
+  const valueRow = document.createElement("div");
+  valueRow.className = "detail-value-row";
   const valueElement = document.createElement("span");
   valueElement.className = "detail-value";
   valueElement.textContent = String(value);
@@ -232,7 +235,26 @@ function createDetail(key, label, isContact, value) {
     valueElement.style.textAlign = "right";
   }
 
-  wrapper.append(labelElement, valueElement);
+  valueRow.append(valueElement);
+  if (key === "phone" || key === "email") {
+    const copyFieldButton = document.createElement("button");
+    copyFieldButton.type = "button";
+    copyFieldButton.className = "copy-field-button";
+    copyFieldButton.setAttribute("aria-label", key === "phone" ? "نسخ رقم التواصل" : "نسخ البريد الإلكتروني");
+    copyFieldButton.title = key === "phone" ? "نسخ رقم التواصل" : "نسخ البريد الإلكتروني";
+    copyFieldButton.innerHTML = `
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <rect x="8" y="8" width="11" height="11" rx="2"></rect>
+        <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"></path>
+      </svg>
+    `;
+    copyFieldButton.addEventListener("click", () =>
+      copyText(String(value), key === "phone" ? "تم نسخ رقم التواصل" : "تم نسخ البريد الإلكتروني"),
+    );
+    valueRow.append(copyFieldButton);
+  }
+
+  wrapper.append(labelElement, valueRow);
   return wrapper;
 }
 
@@ -443,6 +465,14 @@ function performLogout(message = "") {
   if (message) showToast(message);
 }
 
+function clearFilters() {
+  supervisorSelect.value = "";
+  searchInput.value = "";
+  resetResearcherControls();
+  window.scrollTo({ top: 0, behavior: "smooth" });
+  showToast("تم مسح جميع الفلاتر");
+}
+
 function handleActivity() {
   if (!dashboardView.hidden) startInactivityTimer();
 }
@@ -541,6 +571,7 @@ researcherSelect.addEventListener("change", () => {
 statusSelect.addEventListener("change", applyFilters);
 searchInput.addEventListener("input", applyFilters);
 loadMoreButton.addEventListener("click", () => renderVisibleRows());
+clearFiltersButton.addEventListener("click", clearFilters);
 ACTIVITY_EVENTS.forEach((eventName) =>
   document.addEventListener(eventName, handleActivity, { passive: true }),
 );

style.css

@@ -403,12 +403,16 @@ svg {
 }
 
 .controls-card {
+  position: sticky;
+  z-index: 12;
+  top: 10px;
   margin-top: 18px;
   padding: 22px;
-  background: var(--surface);
+  background: rgba(255, 255, 255, 0.96);
   border: 1px solid var(--line);
   border-radius: 20px;
   box-shadow: 0 14px 34px rgba(24, 66, 91, 0.08);
+  backdrop-filter: blur(16px);
 }
 
 .filters-grid {
@@ -417,6 +421,38 @@ svg {
   gap: 16px;
 }
 
+.filters-actions {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 14px;
+}
+
+.clear-filters-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 38px;
+  padding: 0 13px;
+  color: #607583;
+  font-size: 13px;
+  font-weight: 700;
+  background: #f7fafb;
+  border: 1px solid var(--line);
+  border-radius: 11px;
+}
+
+.clear-filters-button:hover {
+  color: var(--danger);
+  background: #fff7f8;
+  border-color: #ecc9cf;
+}
+
+.clear-filters-button svg {
+  width: 17px;
+  height: 17px;
+}
+
 .select-wrap select {
   padding: 0 15px 0 42px;
   appearance: none;
@@ -691,6 +727,37 @@ input:disabled {
   line-height: 1.6;
 }
 
+.detail-value-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.copy-field-button {
+  flex: 0 0 auto;
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  color: var(--blue);
+  background: var(--sky);
+  border: 1px solid #cee3ef;
+  border-radius: 9px;
+}
+
+.copy-field-button:hover {
+  color: white;
+  background: var(--blue);
+  border-color: var(--blue);
+}
+
+.copy-field-button svg {
+  width: 17px;
+  height: 17px;
+}
+
 .contact-detail .detail-value {
   color: var(--blue);
 }
@@ -826,11 +893,27 @@ footer {
     border-radius: 17px;
   }
 
+  .controls-card {
+    top: 6px;
+    max-height: calc(100vh - 12px);
+    overflow-y: auto;
+  }
+
   .filters-grid {
     grid-template-columns: 1fr;
     gap: 13px;
   }
 
+  .filters-actions {
+    margin-top: 12px;
+  }
+
+  .clear-filters-button {
+    width: 100%;
+    min-height: 44px;
+    font-size: 14px;
+  }
+
   .status-chips {
     flex-wrap: nowrap;
     overflow-x: auto;