Upload 3 files

app.js

@@ -39,7 +39,9 @@ const elements = Object.fromEntries(
     "statementCount", "documentationPhotos", "photoPreviews", "documentationError",
     "uploadProgress", "uploadProgressBar", "cancelDocumentationButton", "saveDocumentationButton",
     "adminView", "adminLogoutButton", "adminUpdatedAt", "refreshAdminButton", "adminStats",
-    "adminSearch", "adminResearcherFilter", "adminCityFilter", "adminDateFilter",
+    "adminProgressOverview", "adminTrendTotal", "adminTrendChart", "adminCityProgress",
+    "adminControls", "adminSearch", "adminResearcherFilter", "adminCityFilter", "adminDateFilter",
+    "adminStatusFilter", "clearAdminFilters", "activeResearchersCount",
     "researcherProductivity", "adminRecordsCount", "adminRecords", "adminEmpty",
   ].map((id) => [id, document.getElementById(id)]),
 );
@@ -203,6 +205,38 @@ function riyadhToday() {
   }).format(new Date());
 }
 
+function dateOffset(dateValue, offset) {
+  const [year, month, day] = dateValue.split("-").map(Number);
+  const date = new Date(Date.UTC(year, month - 1, day + offset));
+  return [
+    date.getUTCFullYear(),
+    String(date.getUTCMonth() + 1).padStart(2, "0"),
+    String(date.getUTCDate()).padStart(2, "0"),
+  ].join("-");
+}
+
+function adminSnapshot() {
+  const records = [...latestRecordsBySample(adminRecords).values()];
+  const recordMap = new Map(records.map((record) => [record.sampleKey, record]));
+  const today = riyadhToday();
+  const yesterday = dateOffset(today, -1);
+  const documented = payload.rows.filter((row) => recordMap.has(row.sampleKey));
+  const todayRecords = records.filter((record) => record.documentedDate === today);
+  const yesterdayRecords = records.filter((record) => record.documentedDate === yesterday);
+  const activeToday = new Set(todayRecords.map((record) => record.researcher).filter(Boolean));
+  return {
+    records,
+    recordMap,
+    today,
+    yesterday,
+    documented,
+    todayRecords,
+    yesterdayRecords,
+    activeToday,
+    percentage: payload.rows.length ? (documented.length / payload.rows.length) * 100 : 0,
+  };
+}
+
 async function syncResearcherDocumentation() {
   try {
     const result = await fetchDocumentation("status", sessionAccessCode);
@@ -240,22 +274,90 @@ function setAdminFilterOptions() {
     uniqueSorted(payload.rows.map((row) => row.city)),
     "جميع المدن",
   );
+  setSelectOptions(
+    elements.adminStatusFilter,
+    uniqueSorted(adminRecords.map((record) => record.fieldStatus)),
+    "جميع الحالات",
+  );
 }
 
 function renderAdminStats() {
-  const uniqueRecords = latestRecordsBySample(adminRecords);
-  const documented = payload.rows.filter((row) => uniqueRecords.has(row.sampleKey)).length;
-  const todayCount = payload.rows.filter(
-    (row) => uniqueRecords.get(row.sampleKey)?.documentedDate === riyadhToday(),
-  ).length;
-  const percentage = payload.rows.length
-    ? ((documented / payload.rows.length) * 100).toFixed(1)
-    : 0;
+  const snapshot = adminSnapshot();
+  const inactiveToday = Math.max(payload.researchers.length - snapshot.activeToday.size, 0);
   elements.adminStats.replaceChildren(
     adminStat(payload.rows.length, "إجمالي العينات"),
-    adminStat(documented, "تم التوثيق", `${percentage}% من الإجمالي`),
-    adminStat(payload.rows.length - documented, "المتبقي"),
-    adminStat(todayCount, "إنجاز اليوم", riyadhToday()),
+    adminStat(snapshot.documented.length, "تم التوثيق", `${snapshot.percentage.toFixed(1)}% من الإجمالي`),
+    adminStat(payload.rows.length - snapshot.documented.length, "المتبقي"),
+    adminStat(snapshot.todayRecords.length, "إنجاز اليوم", snapshot.today),
+    adminStat(snapshot.yesterdayRecords.length, "إنجاز أمس"),
+    adminStat(snapshot.activeToday.size, "باحثون أنجزوا اليوم", `${inactiveToday} دون إنجاز اليوم`),
+  );
+}
+
+function renderAdminOverview() {
+  const snapshot = adminSnapshot();
+  const remaining = Math.max(payload.rows.length - snapshot.documented.length, 0);
+  const degrees = Math.min(snapshot.percentage, 100) * 3.6;
+  elements.adminProgressOverview.innerHTML = `
+    <div class="completion-ring" style="--progress:${degrees}deg">
+      <div><strong>${snapshot.percentage.toFixed(1)}%</strong><span>مكتمل</span></div>
+    </div>
+    <div class="completion-legend">
+      <p><i class="documented-dot"></i><span>موثق</span><strong>${snapshot.documented.length}</strong></p>
+      <p><i class="remaining-dot"></i><span>متبقٍ</span><strong>${remaining}</strong></p>
+      <small>تُحتسب النسبة من التوثيق الفعلي المسجل في Google Drive.</small>
+    </div>`;
+
+  const days = Array.from({ length: 7 }, (_, index) => dateOffset(snapshot.today, index - 6));
+  const dayCounts = days.map((day) =>
+    snapshot.records.filter((record) => record.documentedDate === day).length
+  );
+  const maxCount = Math.max(...dayCounts, 1);
+  const weekTotal = dayCounts.reduce((sum, count) => sum + count, 0);
+  const dayFormatter = new Intl.DateTimeFormat("ar-SA", {
+    weekday: "short",
+    timeZone: "UTC",
+  });
+  elements.adminTrendTotal.textContent = `${weekTotal} توثيق`;
+  elements.adminTrendChart.replaceChildren(
+    ...days.map((day, index) => {
+      const item = document.createElement("div");
+      item.className = "trend-day";
+      const date = new Date(`${day}T12:00:00Z`);
+      const height = dayCounts[index] ? Math.max((dayCounts[index] / maxCount) * 100, 12) : 3;
+      item.innerHTML = `
+        <strong>${dayCounts[index]}</strong>
+        <span class="trend-bar"><i style="height:${height}%"></i></span>
+        <small>${dayFormatter.format(date)}</small>`;
+      if (day === snapshot.today) item.classList.add("today");
+      return item;
+    }),
+  );
+
+  const totalsByCity = new Map();
+  payload.rows.forEach((row) => totalsByCity.set(row.city, (totalsByCity.get(row.city) || 0) + 1));
+  const doneByCity = new Map();
+  snapshot.documented.forEach((row) => doneByCity.set(row.city, (doneByCity.get(row.city) || 0) + 1));
+  const cities = [...totalsByCity].map(([city, total]) => {
+    const done = doneByCity.get(city) || 0;
+    return { city, total, done, percent: total ? (done / total) * 100 : 0 };
+  }).sort((a, b) => b.done - a.done || b.percent - a.percent || a.city.localeCompare(b.city, "ar"));
+  elements.adminCityProgress.replaceChildren(
+    ...cities.slice(0, 6).map((item) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "city-progress-row";
+      button.innerHTML = `
+        <span class="city-progress-heading"><strong>${item.city || "غير محدد"}</strong><b>${item.done} / ${item.total}</b></span>
+        <span class="city-progress-track"><i style="width:${item.percent}%"></i></span>
+        <small>${item.percent.toFixed(1)}% مكتمل</small>`;
+      button.addEventListener("click", () => {
+        elements.adminCityFilter.value = item.city;
+        renderAdminRecords();
+        elements.adminControls?.scrollIntoView?.({ behavior: "smooth", block: "start" });
+      });
+      return button;
+    }),
   );
 }
 
@@ -264,10 +366,12 @@ function filteredAdminRecords() {
   const researcher = elements.adminResearcherFilter.value;
   const city = elements.adminCityFilter.value;
   const date = elements.adminDateFilter.value;
+  const status = elements.adminStatusFilter.value;
   return adminRecords.filter((record) => {
     if (researcher && record.researcher !== researcher) return false;
     if (city && record.city !== city) return false;
     if (date && record.documentedDate !== date) return false;
+    if (status && record.fieldStatus !== status) return false;
     if (!query) return true;
     return normalize(
       `${record.establishmentName} ${record.commercialRecord} ${record.researcher} ${record.city}`,
@@ -276,28 +380,40 @@ function filteredAdminRecords() {
 }
 
 function renderProductivity() {
+  const snapshot = adminSnapshot();
   const totals = new Map(payload.researchers.map((item) => [item.name, item.count]));
   const documented = new Map();
-  latestRecordsBySample(adminRecords).forEach((record) => {
+  const today = new Map();
+  snapshot.records.forEach((record) => {
     documented.set(record.researcher, (documented.get(record.researcher) || 0) + 1);
+    if (record.documentedDate === snapshot.today) {
+      today.set(record.researcher, (today.get(record.researcher) || 0) + 1);
+    }
   });
   const fragment = document.createDocumentFragment();
-  payload.researchers
+  const researchers = payload.researchers
     .map((item) => ({
       name: item.name,
       total: totals.get(item.name) || 0,
       done: documented.get(item.name) || 0,
+      today: today.get(item.name) || 0,
     }))
-    .sort((a, b) => b.done - a.done || a.name.localeCompare(b.name, "ar"))
-    .forEach((item) => {
+    .sort((a, b) => b.done - a.done || b.today - a.today || a.name.localeCompare(b.name, "ar"));
+  elements.activeResearchersCount.textContent = `${snapshot.activeToday.size} نشط اليوم`;
+  researchers.forEach((item, index) => {
       const row = document.createElement("button");
       row.type = "button";
       row.className = "productivity-row";
-      const percent = item.total ? Math.round((item.done / item.total) * 100) : 0;
+      const percent = item.total ? (item.done / item.total) * 100 : 0;
       row.innerHTML = `
-        <span class="productivity-name">${item.name}</span>
-        <span class="productivity-numbers"><strong>${item.done}</strong> / ${item.total}</span>
-        <span class="productivity-track"><i style="width:${percent}%"></i></span>`;
+        <span class="productivity-rank">${index + 1}</span>
+        <span class="productivity-identity">
+          <strong class="productivity-name">${item.name}</strong>
+          <small>${item.today ? `${item.today} اليوم` : "دون إنجاز اليوم"} · متبقي ${item.total - item.done}</small>
+        </span>
+        <span class="productivity-numbers"><strong>${item.done}</strong><small>من ${item.total}</small></span>
+        <span class="productivity-track"><i style="width:${percent}%"></i></span>
+        <span class="productivity-percent">${percent.toFixed(1)}%</span>`;
       row.addEventListener("click", () => {
         elements.adminResearcherFilter.value = item.name;
         renderAdminRecords();
@@ -309,7 +425,16 @@ function renderProductivity() {
 
 function renderAdminRecords() {
   const records = filteredAdminRecords();
-  elements.adminRecordsCount.textContent = `${records.length} عملية`;
+  const hasFilters = Boolean(
+    elements.adminSearch.value ||
+    elements.adminResearcherFilter.value ||
+    elements.adminCityFilter.value ||
+    elements.adminDateFilter.value ||
+    elements.adminStatusFilter.value
+  );
+  elements.adminRecordsCount.textContent = hasFilters
+    ? `${records.length} من ${adminRecords.length}`
+    : `${records.length} عملية`;
   elements.adminEmpty.hidden = records.length > 0;
   const fragment = document.createDocumentFragment();
   records.slice(0, 100).forEach((record) => {
@@ -333,6 +458,13 @@ function renderAdminRecords() {
     const time = document.createElement("time");
     time.textContent = date;
     heading.append(title, time);
+    const badges = document.createElement("div");
+    badges.className = "admin-record-badges";
+    const statusBadge = document.createElement("span");
+    statusBadge.textContent = record.fieldStatus || "غير محدد";
+    const photoBadge = document.createElement("span");
+    photoBadge.textContent = `${record.photoCount || 0} صور`;
+    badges.append(statusBadge, photoBadge);
     const details = document.createElement("div");
     details.className = "admin-record-details";
     details.append(
@@ -359,7 +491,7 @@ function renderAdminRecords() {
       photo.textContent = `الصورة ${index + 1}`;
       actions.append(photo);
     });
-    item.append(heading, details, actions);
+    item.append(heading, badges, details, actions);
     fragment.append(item);
   });
   elements.adminRecords.replaceChildren(fragment);
@@ -371,12 +503,14 @@ async function loadAdminDashboard() {
     const result = await fetchDocumentation("admin", sessionAccessCode);
     adminRecords = hydrateRecordKeys(result.records || []);
     documentationRecords = adminRecords;
+    setAdminFilterOptions();
     elements.adminUpdatedAt.textContent = `آخر مزامنة: ${new Intl.DateTimeFormat("ar-SA", {
       timeZone: "Asia/Riyadh",
       dateStyle: "medium",
       timeStyle: "short",
     }).format(new Date(result.generatedAt))}`;
     renderAdminStats();
+    renderAdminOverview();
     renderProductivity();
     renderAdminRecords();
   } finally {
@@ -1346,8 +1480,16 @@ elements.adminLogoutButton.addEventListener("click", () => {
   elements.password.focus();
 });
 elements.refreshAdminButton.addEventListener("click", loadAdminDashboard);
-[elements.adminSearch, elements.adminResearcherFilter, elements.adminCityFilter, elements.adminDateFilter]
+[elements.adminSearch, elements.adminResearcherFilter, elements.adminCityFilter, elements.adminDateFilter, elements.adminStatusFilter]
   .forEach((control) => control.addEventListener(control.tagName === "INPUT" ? "input" : "change", renderAdminRecords));
+elements.clearAdminFilters.addEventListener("click", () => {
+  elements.adminSearch.value = "";
+  elements.adminResearcherFilter.value = "";
+  elements.adminCityFilter.value = "";
+  elements.adminDateFilter.value = "";
+  elements.adminStatusFilter.value = "";
+  renderAdminRecords();
+});
 elements.searchInput.addEventListener("input", applyFilters);
 elements.statusSelect.addEventListener("change", applyFilters);
 elements.locationSelect.addEventListener("change", applyFilters);

index.html

@@ -198,19 +198,46 @@
         <div class="admin-shell">
           <section class="admin-heading">
             <div>
-              <p class="eyebrow">متابعة مباشرة</p>
-              <h2>الإنتاجية الميدانية</h2>
+              <p class="eyebrow">لوحة قيادة تشغيلية</p>
+              <h2>ملخص الأداء الميداني</h2>
               <p id="adminUpdatedAt">تتم مزامنة البيانات من سجل التوثيق في Google Drive.</p>
             </div>
-            <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>
-              تحديث
-            </button>
+            <div class="admin-heading-actions">
+              <span class="sync-status"><i></i>متصل بسجل التوثيق</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>
+                تحديث
+              </button>
+            </div>
           </section>
 
           <section id="adminStats" class="admin-stats"></section>
 
-          <section class="admin-controls">
+          <section class="admin-overview-grid">
+            <article class="admin-panel progress-panel">
+              <div class="admin-panel-heading">
+                <div><p class="eyebrow">الموقف العام</p><h3>نسبة الإنجاز</h3></div>
+              </div>
+              <div id="adminProgressOverview" class="progress-overview"></div>
+            </article>
+
+            <article class="admin-panel trend-panel">
+              <div class="admin-panel-heading">
+                <div><p class="eyebrow">آخر 7 أيام</p><h3>حركة التوثيق</h3></div>
+                <span id="adminTrendTotal" class="panel-metric"></span>
+              </div>
+              <div id="adminTrendChart" class="trend-chart" aria-label="إنجاز آخر سبعة أيام"></div>
+            </article>
+
+            <article class="admin-panel city-panel">
+              <div class="admin-panel-heading">
+                <div><p class="eyebrow">التغطية الميدانية</p><h3>تقدم المدن</h3></div>
+              </div>
+              <div id="adminCityProgress" class="city-progress-list"></div>
+            </article>
+          </section>
+
+          <section id="adminControls" class="admin-controls">
             <label class="field-group admin-search">
               <span>البحث</span>
               <div class="search-shell">
@@ -236,18 +263,30 @@
               <span>التاريخ</span>
               <input id="adminDateFilter" class="date-input" type="date" />
             </label>
+            <label class="field-group">
+              <span>حالة التوثيق</span>
+              <div class="select-shell">
+                <select id="adminStatusFilter"><option value="">جميع الحالات</option></select>
+                <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
+              </div>
+            </label>
+            <button id="clearAdminFilters" class="clear-button admin-clear" type="button">
+              <svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12" /></svg>
+              مسح الفلاتر
+            </button>
           </section>
 
           <section class="admin-grid">
             <article class="admin-panel productivity-panel">
               <div class="admin-panel-heading">
-                <div><p class="eyebrow">حسب الباحث</p><h3>الإنتاجية</h3></div>
+                <div><p class="eyebrow">ترتيب الأداء</p><h3>إنتاجية الباحثين</h3></div>
+                <span id="activeResearchersCount" class="panel-metric"></span>
               </div>
               <div id="researcherProductivity" class="productivity-list"></div>
             </article>
             <article class="admin-panel records-panel">
               <div class="admin-panel-heading">
-                <div><p class="eyebrow">سجل التوثيق</p><h3>آخر العمليات</h3></div>
+                <div><p class="eyebrow">آخر التحديثات</p><h3>سجل التوثيق</h3></div>
                 <span id="adminRecordsCount"></span>
               </div>
               <div id="adminRecords" class="admin-records"></div>

style.css

@@ -2256,7 +2256,7 @@ body {
 
 .admin-heading {
   display: flex;
-  align-items: end;
+  align-items: center;
   justify-content: space-between;
   gap: 20px;
 }
@@ -2266,12 +2266,58 @@ body {
   color: #667589;
 }
 
+.admin-heading-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.sync-status {
+  min-height: 38px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 11px;
+  color: #08783b;
+  background: #effbf4;
+  border: 1px solid #bce7cd;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
+.sync-status i {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #00b050;
+  box-shadow: 0 0 0 4px rgba(0, 176, 80, 0.12);
+}
+
 .admin-stats {
   display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 10px;
   margin: 20px 0;
 }
 
+.admin-stat {
+  min-height: 98px;
+}
+
+.admin-stat:nth-child(4) {
+  border-top-color: #27ced7;
+}
+
+.admin-stat:nth-child(5) {
+  border-top-color: #7030a0;
+}
+
+.admin-stat:nth-child(6) {
+  border-top-color: #42ba97;
+}
+
 .admin-stat span,
 .admin-stat small {
   display: block;
@@ -2288,13 +2334,267 @@ body {
   color: #7a8797;
 }
 
+.admin-overview-grid {
+  display: grid;
+  grid-template-columns: minmax(250px, 0.75fr) minmax(360px, 1.25fr) minmax(320px, 1fr);
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.admin-overview-grid .admin-panel {
+  min-height: 300px;
+}
+
+.panel-metric,
+#adminRecordsCount {
+  padding: 5px 9px;
+  color: #526174;
+  background: #f3f6f8;
+  border: 1px solid #dce5eb;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
+.progress-overview {
+  min-height: 225px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+}
+
+.completion-ring {
+  --progress: 0deg;
+  width: 126px;
+  aspect-ratio: 1;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: conic-gradient(#00b050 var(--progress), #e7edf1 0);
+}
+
+.completion-ring::before {
+  content: "";
+  grid-area: 1 / 1;
+  width: 94px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: #fff;
+}
+
+.completion-ring > div {
+  z-index: 1;
+  grid-area: 1 / 1;
+  text-align: center;
+}
+
+.completion-ring strong,
+.completion-ring span {
+  display: block;
+}
+
+.completion-ring strong {
+  color: #172033;
+  font-size: 23px;
+}
+
+.completion-ring span {
+  margin-top: 2px;
+  color: #667589;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.completion-legend {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 14px;
+}
+
+.completion-legend p {
+  display: grid;
+  grid-template-columns: 9px 1fr auto;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 8px 0;
+  border-bottom: 1px solid #e5ebef;
+}
+
+.completion-legend p i {
+  width: 9px;
+  height: 9px;
+  border-radius: 2px;
+}
+
+.documented-dot {
+  background: #00b050;
+}
+
+.remaining-dot {
+  background: #dce5eb;
+}
+
+.completion-legend p span {
+  color: #526174;
+  font-size: 12px;
+}
+
+.completion-legend p strong {
+  color: #172033;
+  font-size: 15px;
+}
+
+.completion-legend > small {
+  grid-column: 1 / -1;
+  display: block;
+  max-width: none;
+  margin-top: 10px;
+  text-align: center;
+  color: #7a8797;
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+.trend-chart {
+  height: 224px;
+  display: grid;
+  grid-template-columns: repeat(7, minmax(34px, 1fr));
+  align-items: end;
+  gap: 8px;
+  padding-top: 16px;
+}
+
+.trend-day {
+  height: 100%;
+  min-width: 0;
+  display: grid;
+  grid-template-rows: 22px 1fr 24px;
+  gap: 5px;
+  text-align: center;
+}
+
+.trend-day > strong {
+  color: #526174;
+  font-size: 12px;
+}
+
+.trend-bar {
+  min-height: 126px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  overflow: hidden;
+  border-bottom: 1px solid #dce5eb;
+}
+
+.trend-bar i {
+  width: min(34px, 66%);
+  min-height: 3px;
+  display: block;
+  background: #4137a8;
+  border-radius: 4px 4px 0 0;
+}
+
+.trend-day.today .trend-bar i {
+  background: #00b050;
+}
+
+.trend-day.today > strong,
+.trend-day.today > small {
+  color: #08783b;
+  font-weight: 900;
+}
+
+.trend-day > small {
+  overflow: hidden;
+  color: #7a8797;
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.city-progress-list {
+  display: grid;
+  gap: 7px;
+  margin-top: 12px;
+}
+
+.city-progress-row {
+  width: 100%;
+  display: grid;
+  gap: 5px;
+  padding: 8px 9px;
+  color: #172033;
+  background: #fbfcfd;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  text-align: right;
+  font: inherit;
+  cursor: pointer;
+}
+
+.city-progress-row:hover {
+  border-color: #b8c8d3;
+  background: #fff;
+}
+
+.city-progress-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.city-progress-heading strong {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.city-progress-heading b {
+  direction: ltr;
+  color: #4137a8;
+  font-size: 11px;
+}
+
+.city-progress-track {
+  height: 5px;
+  overflow: hidden;
+  background: #e5ebef;
+  border-radius: 3px;
+}
+
+.city-progress-track i {
+  height: 100%;
+  display: block;
+  background: #42ba97;
+}
+
+.city-progress-row > small {
+  color: #7a8797;
+  font-size: 10px;
+}
+
 .admin-controls {
   display: grid;
-  grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(150px, 1fr));
+  grid-template-columns: minmax(250px, 1.7fr) repeat(4, minmax(140px, 1fr)) auto;
+  align-items: end;
   gap: 12px;
   padding: 16px;
 }
 
+.admin-clear {
+  min-height: 48px;
+  white-space: nowrap;
+}
+
 .date-input {
   width: 100%;
   height: 48px;
@@ -2308,7 +2608,7 @@ body {
 
 .admin-grid {
   display: grid;
-  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 2fr);
+  grid-template-columns: minmax(340px, 0.88fr) minmax(0, 1.6fr);
   gap: 16px;
   margin-top: 16px;
   align-items: start;
@@ -2347,9 +2647,9 @@ body {
 
 .productivity-row {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 6px 12px;
-  padding: 11px;
+  grid-template-columns: 26px minmax(0, 1fr) auto;
+  gap: 6px 10px;
+  padding: 10px;
   border: 1px solid #e1e8ed;
   border-radius: 5px;
   color: #172033;
@@ -2359,7 +2659,36 @@ body {
   cursor: pointer;
 }
 
+.productivity-row:hover,
+.productivity-row:focus-visible {
+  border-color: #aebdca;
+  background: #f9fbfc;
+}
+
+.productivity-rank {
+  width: 25px;
+  height: 25px;
+  display: grid;
+  place-items: center;
+  align-self: center;
+  color: #526174;
+  background: #edf2f5;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.productivity-row:nth-child(-n + 3) .productivity-rank {
+  color: #fff;
+  background: #4137a8;
+}
+
+.productivity-identity {
+  min-width: 0;
+}
+
 .productivity-name {
+  display: block;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2367,17 +2696,36 @@ body {
   font-weight: 800;
 }
 
+.productivity-identity small {
+  display: block;
+  margin-top: 3px;
+  overflow: hidden;
+  color: #7a8797;
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .productivity-numbers {
+  align-self: center;
   direction: ltr;
+  text-align: center;
   color: #667589;
 }
 
 .productivity-numbers strong {
+  display: block;
   color: #4137a8;
+  font-size: 17px;
+}
+
+.productivity-numbers small {
+  display: block;
+  font-size: 9px;
 }
 
 .productivity-track {
-  grid-column: 1 / -1;
+  grid-column: 2 / 3;
   height: 5px;
   overflow: hidden;
   border-radius: 2px;
@@ -2387,7 +2735,15 @@ body {
 .productivity-track i {
   display: block;
   height: 100%;
-  background: #4137a8;
+  background: #00b050;
+}
+
+.productivity-percent {
+  align-self: center;
+  direction: ltr;
+  color: #526174;
+  font-size: 10px;
+  font-weight: 900;
 }
 
 .admin-record {
@@ -2445,15 +2801,48 @@ body {
   text-decoration: none;
 }
 
+.admin-record-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 9px;
+}
+
+.admin-record-badges span {
+  padding: 4px 7px;
+  color: #526174;
+  background: #f1f5f7;
+  border: 1px solid #dce5eb;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 900;
+}
+
 @media (max-width: 980px) {
-  .admin-controls {
+  .admin-stats {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .admin-overview-grid {
     grid-template-columns: 1fr 1fr;
   }
 
-  .admin-search {
+  .city-panel {
     grid-column: 1 / -1;
   }
 
+  .city-progress-list {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .admin-controls {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .admin-search {
+    grid-column: span 2;
+  }
+
   .admin-grid {
     grid-template-columns: 1fr;
   }
@@ -2478,6 +2867,45 @@ body {
 
   .admin-heading {
     align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .admin-heading-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .admin-overview-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-overview-grid .admin-panel {
+    min-height: 0;
+  }
+
+  .city-panel {
+    grid-column: auto;
+  }
+
+  .city-progress-list {
+    grid-template-columns: 1fr;
+  }
+
+  .progress-overview {
+    min-height: 205px;
+    gap: 14px;
+  }
+
+  .completion-ring {
+    width: 120px;
+  }
+
+  .completion-ring::before {
+    width: 90px;
+  }
+
+  .trend-chart {
+    gap: 4px;
   }
 
   .admin-controls {
@@ -2497,6 +2925,10 @@ body {
     grid-template-columns: 1fr 1fr;
   }
 
+  .admin-grid {
+    grid-template-columns: 1fr;
+  }
+
   .sample-card.completed[data-documented-at]::after {
     position: static;
     display: block;