compact vehicle card passport

web/index.html

@@ -80,21 +80,16 @@
             </div>
             <div class="passport-grid">
               <div class="passport-metric">
-                <span>Profile quality</span>
+                <span>Качество данных</span>
                 <strong id="scoreTitle">Старт</strong>
               </div>
-              <div class="passport-metric">
+              <div class="passport-metric passport-metric-combo">
-                <span>Verified history</span>
+                <span>История и ТО</span>
                 <strong id="verifiedHistoryStatus">Self-reported</strong>
-              </div>
+                <small id="maintenanceStatus">Unknown</small>
-              <div class="passport-metric">
-                <span>Maintenance health</span>
-                <strong id="maintenanceStatus">Unknown</strong>
               </div>
             </div>
             <div class="passport-actions" id="scoreActions"></div>
-            <div class="achievement-strip" id="achievementList"></div>
-            <div class="vehicle-timeline" id="vehicleTimeline"></div>
           </section>
           <div class="status-bar" id="statusBar" aria-live="polite">Готов к работе</div>
 

web/static/app.js

@@ -313,6 +313,9 @@ const state = {
   selectedCarId: null,
   latestFuel: [],
   latestService: [],
+  latestFuelAllTime: [],
+  latestServiceAllTime: [],
+  selectedCarHighlights: null,
   latestExpenses: [],
   latestStats: null,
   allStats: null,
@@ -329,7 +332,6 @@ const state = {
   connectedServices: [],
   adminPendingServices: [],
   vehicleScore: null,
-  vehicleTimeline: [],
   achievements: [],
   receiptFile: null,
   serviceWorkerRegistration: null,
@@ -901,10 +903,11 @@ function renderCars() {
     .map(
       (car) => `
         <button class="car-item ${car.id === state.selectedCarId ? "active" : ""}" data-car="${car.id}">
-          <span class="car-badge">${(car.make || car.name).slice(0, 2).toUpperCase()}</span>
+          <span class="car-badge">${escapeHtml((car.make || car.name).slice(0, 2).toUpperCase())}</span>
           <span class="car-copy">
-            <strong>${car.name}</strong>
+            <strong>${escapeHtml(car.name)}</strong>
-            <small>${[car.make, car.model, car.trim, car.year, car.fuel_type].filter(Boolean).join(" ") || t("Без деталей")}</small>
+            <small>${escapeHtml([car.make, car.model, car.trim, car.year, car.fuel_type].filter(Boolean).join(" ") || t("Без деталей"))}</small>
+            ${car.id === state.selectedCarId ? renderSelectedCarHighlights(car) : ""}
           </span>
         </button>
       `,
@@ -917,6 +920,84 @@ function renderCars() {
   });
 }
 
+function renderSelectedCarHighlights(car) {
+  const highlights = state.selectedCarHighlights?.carId === car.id ? state.selectedCarHighlights : buildCarHighlights(car, [], []);
+  const rows = [
+    ["Одометр", highlights.odometer],
+    ["Заправка", highlights.lastFuel],
+    ["Масло", highlights.lastOil],
+    ["До масла", highlights.oilRemaining],
+  ];
+  return `
+    <span class="car-key-params">
+      ${rows
+        .map(
+          ([label, value]) => `
+            <span class="car-key-param">
+              <span>${label}</span>
+              <strong>${escapeHtml(value)}</strong>
+            </span>
+          `,
+        )
+        .join("")}
+    </span>
+  `;
+}
+
+function buildCarHighlights(car, fuelEntries, serviceEntries) {
+  const currentOdometer = Number(car?.current_odometer || 0);
+  const lastFuel = fuelEntries[0] || null;
+  const lastOil = serviceEntries.find(isOilService) || null;
+  const oilDueOdometer = oilDueKm(car, lastOil);
+  const oilRemainingKm = oilDueOdometer != null && car?.current_odometer != null
+    ? oilDueOdometer - currentOdometer
+    : null;
+  return {
+    carId: car?.id,
+    odometer: car?.current_odometer != null ? `${formatKm(car.current_odometer)}` : "-",
+    lastFuel: lastFuel ? `${formatShortDate(lastFuel.entry_date)} · ${formatLiters(lastFuel.liters)}` : "-",
+    lastOil: lastOil ? formatShortDate(lastOil.entry_date) : "-",
+    oilRemaining: formatOilRemaining(oilRemainingKm),
+  };
+}
+
+function isOilService(item) {
+  const text = [item?.title, item?.category, item?.notes, item?.service_type].filter(Boolean).join(" ").toLowerCase();
+  return /масл|oil|engine_oil/.test(text);
+}
+
+function oilDueKm(car, latestOil) {
+  if (latestOil?.next_due_odometer != null) return Number(latestOil.next_due_odometer);
+  const interval = Number(car?.oil_change_interval_km || 0);
+  if (!interval) return null;
+  if (latestOil?.odometer != null) return Number(latestOil.odometer) + interval;
+  if (car?.current_odometer != null) return Number(car.current_odometer) + interval;
+  return null;
+}
+
+function formatKm(value) {
+  if (value == null || value === "") return "-";
+  return `${Number(value).toLocaleString("ru-RU")} км`;
+}
+
+function formatLiters(value) {
+  if (value == null || value === "") return "-";
+  return `${Number(value).toLocaleString("ru-RU", { maximumFractionDigits: 1 })} л`;
+}
+
+function formatShortDate(value) {
+  if (!value) return "-";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return String(value).slice(0, 10);
+  return date.toLocaleDateString("ru-RU", { day: "2-digit", month: "2-digit", year: "2-digit" });
+}
+
+function formatOilRemaining(value) {
+  if (value == null || Number.isNaN(value)) return "-";
+  if (value < 0) return `просрочено ${formatKm(Math.abs(value))}`;
+  return formatKm(value);
+}
+
 function setInputValue(form, name, value) {
   if (!form?.elements[name]) return;
   const input = form.elements[name];
@@ -1902,11 +1983,9 @@ function updateScore() {
     ring.style.background = `conic-gradient(#5ee0bd ${score * 3.6}deg, rgba(255,255,255,0.12) 0deg)`;
   }
   document.querySelector("#scoreHint").textContent = car
-    ? "Качество паспорта растет от подтвержденных данных, сервисной истории и точного пробега."
+    ? "Короткая сводка по полноте данных и готовности к обслуживанию."
     : t("Добавь авто и первую запись, чтобы видеть точные отчеты");
   renderScoreActions(state.vehicleScore?.missing_items || []);
-  renderAchievements();
-  renderVehicleTimeline();
 }
 
 function scoreLabel(quality, score) {
@@ -1938,9 +2017,9 @@ function healthLabel(status) {
 function renderScoreActions(items) {
   const root = document.querySelector("#scoreActions");
   if (!root) return;
-  const visible = items.slice(0, 3);
+  const visible = items.slice(0, 1);
   if (!visible.length) {
-    root.innerHTML = `<div class="passport-note">Паспорт выглядит надежно. Следующий рост даст подтвержденная сервисная история.</div>`;
+    root.innerHTML = `<div class="passport-note">Паспорт готов: ключевые данные, история и ТО собраны достаточно для пилота.</div>`;
     return;
   }
   root.innerHTML = visible
@@ -2339,6 +2418,7 @@ async function applyInitialRoute() {
 
 async function selectCar(carId) {
   state.selectedCarId = carId;
+  state.selectedCarHighlights = null;
   renderCars();
   fillCarProfileForm();
   await loadSelectedCar();
@@ -2348,17 +2428,19 @@ async function loadSelectedCar() {
   if (!state.selectedCarId) {
     state.latestFuel = [];
     state.latestService = [];
+    state.latestFuelAllTime = [];
+    state.latestServiceAllTime = [];
+    state.selectedCarHighlights = null;
     state.latestExpenses = [];
     state.latestStats = null;
     state.allStats = null;
     state.analytics = null;
     state.vehicleScore = null;
-    state.vehicleTimeline = [];
     state.achievements = [];
     renderStats(null);
     return;
   }
-  const [stats, allStats, fuel, service, expenses, analytics, vehicleScore] = await Promise.all([
+  const [stats, allStats, fuel, service, expenses, analytics, vehicleScore, allFuel, allService] = await Promise.all([
     api(`/cars/${state.selectedCarId}/stats${periodQuery()}`),
     api(`/cars/${state.selectedCarId}/stats${allPeriodQuery()}`),
     api(`/cars/${state.selectedCarId}/fuel${periodQuery()}`),
@@ -2366,20 +2448,20 @@ async function loadSelectedCar() {
     api(`/cars/${state.selectedCarId}/expenses${periodQuery()}`),
     api(`/cars/${state.selectedCarId}/analytics`),
     api(`/my/vehicles/${state.selectedCarId}/score`),
-  ]);
+    api(`/cars/${state.selectedCarId}/fuel?limit=1`),
-  const [timeline, achievements] = await Promise.all([
+    api(`/cars/${state.selectedCarId}/service?limit=100`),
-    api(`/my/vehicles/${state.selectedCarId}/timeline?limit=30`),
-    api("/me/achievements"),
   ]);
   state.latestStats = stats;
   state.allStats = allStats;
   state.latestFuel = fuel;
   state.latestService = service;
+  state.latestFuelAllTime = allFuel;
+  state.latestServiceAllTime = allService;
   state.latestExpenses = expenses;
   state.analytics = analytics;
   state.vehicleScore = vehicleScore;
-  state.vehicleTimeline = timeline;
+  state.selectedCarHighlights = buildCarHighlights(selectedCar(), allFuel, allService);
-  state.achievements = achievements;
+  renderCars();
   renderStats(stats);
   drawCharts(fuel, service, stats);
 }

web/static/styles.css

@@ -70,6 +70,7 @@ body.auth-required .shell {
 }
 
 .passport-head small,
+.passport-metric small,
 .passport-metric span,
 .passport-action span,
 .achievement-card span,
@@ -134,6 +135,11 @@ body.auth-required .shell {
   font-size: 14px;
 }
 
+.passport-metric-combo small {
+  display: block;
+  margin-top: 2px;
+}
+
 .passport-grid,
 .passport-actions,
 .achievement-strip {
@@ -816,6 +822,36 @@ select:disabled {
   color: var(--muted);
 }
 
+.car-key-params {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  margin-top: 9px;
+}
+
+.car-key-param {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+  padding: 7px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.78);
+}
+
+.car-key-param span {
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.2;
+}
+
+.car-key-param strong {
+  color: var(--text);
+  font-size: 12px;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
 .car-item.active {
   border-color: rgba(22, 128, 106, 0.48);
   background: #e5f4ef;
@@ -2159,6 +2195,12 @@ select {
     white-space: nowrap;
   }
 
+  .car-key-param strong {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+  }
+
   .passport-head {
     display: grid;
     grid-template-columns: 1fr auto;