Improve passport layout and deletion flows

web/static/app.js

@@ -1370,12 +1370,13 @@ async function loadAppointments() {
           <strong>${item.service_name}</strong>
           <small>${formatDateTime(item.confirmed_start_at || item.proposed_start_at || item.requested_start_at)}</small>
           <span class="trust-badge">${item.status}</span>
-          ${item.status === "proposed_new_time" ? `
-            <div class="service-actions">
+          <div class="service-actions">
+            ${item.status === "proposed_new_time" ? `
               <button type="button" data-accept-appointment="${item.id}">Принять время</button>
               <button type="button" class="ghost-btn" data-reject-appointment="${item.id}">Отклонить</button>
-            </div>
-          ` : ""}
+            ` : ""}
+            ${!["converted_to_work_order", "completed"].includes(item.status) ? `<button type="button" class="danger-btn" data-delete-appointment="${item.id}">Удалить запись</button>` : ""}
+          </div>
         </div>
       `).join("")
       : `<div class="empty">Записей пока нет</div>`;
@@ -1394,6 +1395,16 @@ async function loadAppointments() {
         await loadAppointments();
       }));
     });
+    root.querySelectorAll("[data-delete-appointment]").forEach((button) => {
+      button.addEventListener("click", () => {
+        if (!window.confirm("Удалить запись в СТО?")) return;
+        runAction(button, "Удаляю запись...", async () => {
+          await api(`/appointments/${button.dataset.deleteAppointment}`, { method: "DELETE" });
+          await loadAppointments();
+          toast("Запись удалена");
+        });
+      });
+    });
   } catch (error) {
     root.innerHTML = `<div class="empty">Записи не загрузились</div>`;
   }
@@ -1466,6 +1477,9 @@ async function loadStoCalendar() {
               <button type="button" class="ghost-btn" data-reject-sto-appointment="${item.id}">Отклонить</button>
             </div>
           ` : ""}
+          ${!["converted_to_work_order", "completed"].includes(item.status) ? `
+            <button type="button" class="danger-btn" data-delete-sto-appointment="${item.id}">Удалить бронь</button>
+          ` : ""}
         </div>
       `).join("")
       : `<div class="empty">Записей на ближайший период нет</div>`;
@@ -1487,6 +1501,16 @@ async function loadStoCalendar() {
         await loadStoCalendar();
       }));
     });
+    list.querySelectorAll("[data-delete-sto-appointment]").forEach((button) => {
+      button.addEventListener("click", () => {
+        if (!window.confirm("Удалить бронь из календаря СТО?")) return;
+        runAction(button, "Удаляю бронь...", async () => {
+          await api(`/sto/appointments/${button.dataset.deleteStoAppointment}`, { method: "DELETE" });
+          await loadStoCalendar();
+          toast("Бронь удалена");
+        });
+      });
+    });
   } catch (error) {
     summary.innerHTML = "";
     list.innerHTML = `<div class="empty">Календарь СТО не загрузился</div>`;
@@ -1569,6 +1593,7 @@ function renderMechanicAppointment(item) {
         ${canManageAppointments && item.status === "requested" ? `<button type="button" data-mechanic-confirm-appointment="${item.id}">Подтвердить</button>` : ""}
         ${canCreateWorkOrder ? `<button type="button" data-create-work-order="${item.id}">Открыть заказ-наряд</button>` : ""}
         ${canManageAppointments ? `<button type="button" class="ghost-btn" data-mechanic-reject-appointment="${item.id}">Отклонить</button>` : ""}
+        ${canManageAppointments && !["converted_to_work_order", "completed"].includes(item.status) ? `<button type="button" class="danger-btn" data-mechanic-delete-appointment="${item.id}">Удалить</button>` : ""}
       </div>
     </div>
   `;
@@ -1639,6 +1664,16 @@ function bindMechanicWorkplaceActions(root) {
       await loadMechanicWorkplace();
     }));
   });
+  root.querySelectorAll("[data-mechanic-delete-appointment]").forEach((button) => {
+    button.addEventListener("click", () => {
+      if (!window.confirm("Удалить бронь из рабочего места?")) return;
+      runAction(button, "Удаляю бронь...", async () => {
+        await api(`/sto/appointments/${button.dataset.mechanicDeleteAppointment}`, { method: "DELETE" });
+        await loadMechanicWorkplace();
+        toast("Бронь удалена");
+      });
+    });
+  });
   root.querySelectorAll("[data-create-work-order]").forEach((button) => {
     button.addEventListener("click", () => runAction(button, "Открываю заказ-наряд...", async () => {
       const odometerValue = window.prompt("Пробег на приемке, км") || "";
@@ -1849,25 +1884,31 @@ function renderStats(stats) {
 function recordsForPeriod() {
   return [
     ...state.latestFuel.map((item) => ({
+      id: item.id,
       date: item.entry_date,
       type: "fuel",
       title: `Заправка ${Number(item.liters).toFixed(1)} л`,
       meta: item.station || `${item.odometer} км`,
       cost: item.total_cost,
+      deleteEndpoint: `/fuel/${item.id}`,
     })),
     ...state.latestService.map((item) => ({
+      id: item.id,
       date: item.entry_date,
       type: "service",
       title: item.title,
       meta: item.vendor || serviceLabel(item.service_type),
       cost: item.total_cost,
+      deleteEndpoint: `/service/${item.id}`,
     })),
     ...state.latestExpenses.map((item) => ({
+      id: item.id,
       date: item.entry_date,
       type: "expense",
       title: item.title,
       meta: expenseLabel(item.category),
       cost: item.total_cost,
+      deleteEndpoint: `/expenses/${item.id}`,
     })),
   ].sort((a, b) => b.date.localeCompare(a.date));
 }
@@ -1950,7 +1991,7 @@ function renderAchievements() {
   root.innerHTML = achievements
     .map(
       (item) => `
-        <div class="achievement-card">
+        <div class="achievement-card is-earned">
           <strong>${item.title}</strong>
           <span>${item.description}</span>
         </div>
@@ -2063,6 +2104,7 @@ function openReport(type = "summary") {
   };
 
   body.innerHTML = blocks[type] || blocks.summary;
+  bindRecordDeleteActions(body, type);
   applyTranslations(body);
   sheet.classList.remove("hidden");
 }
@@ -2080,12 +2122,27 @@ function reportRecords(records) {
           <small>${item.date}</small>
           <div><strong>${item.title}</strong><br><small>${item.meta || ""}</small></div>
           <strong class="${item.type}">${money(item.cost)}</strong>
+          ${item.deleteEndpoint ? `<button type="button" class="icon-btn" data-delete-record="${item.deleteEndpoint}" aria-label="Удалить">×</button>` : ""}
         </div>
       `,
     )
     .join("")}</div>`;
 }
 
+function bindRecordDeleteActions(root, reportType) {
+  root.querySelectorAll("[data-delete-record]").forEach((button) => {
+    button.addEventListener("click", () => {
+      if (!window.confirm("Удалить запись из истории?")) return;
+      runAction(button, "Удаляю запись...", async () => {
+        await api(button.dataset.deleteRecord, { method: "DELETE" });
+        await loadSelectedCar();
+        openReport(reportType);
+        toast("Запись удалена");
+      });
+    });
+  });
+}
+
 function serviceLabel(value) {
   return {
     maintenance: t("Обслуживание"),
@@ -2471,6 +2528,23 @@ document.querySelector("#carProfileForm").addEventListener("submit", async (even
   });
 });
 
+document.querySelector("#deleteCarBtn")?.addEventListener("click", (event) => {
+  const car = selectedCar();
+  if (!car) {
+    toast("Выбери автомобиль", "error");
+    return;
+  }
+  if (!window.confirm(`Удалить автомобиль «${car.name}» и все его записи?`)) return;
+  runAction(event.currentTarget, "Удаляю автомобиль...", async () => {
+    await api(`/cars/${car.id}`, { method: "DELETE" });
+    state.selectedCarId = null;
+    document.querySelector("#userDrawer").classList.add("hidden");
+    await loadCars();
+    toast("Автомобиль удален");
+    haptic("success");
+  });
+});
+
 document.querySelector("#settingsForm").addEventListener("submit", async (event) => {
   event.preventDefault();
   const form = event.currentTarget;