feat(pwa): экран штрафов с фотографиями нарушений

Список с вкладками «Неоплаченные / Все» и суммой долга в шапке; в карточке —
фотография с камеры первой, до реквизитов: по ней водитель узнаёт свою машину и
свою поездку. Дальше сумма, скидка с датой (то, ради чего заходят вовремя),
скорость и разрешённый предел, постановление, камера, ссылка на PDF.

Строка «Долг по штрафам» на главном экране теперь ведёт сюда, а не сразу к
оплате: платить, не поняв за что, человек не станет. Аренда по-прежнему ведёт к
оплате — за тем её и открывают.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

driver-pwa/frontend/src/App.tsx

@@ -13,6 +13,8 @@ import { HistoryPage } from "@/pages/HistoryPage";
 import { DevLoginPage } from "@/pages/DevLoginPage";
 import { DebugPage } from "@/pages/DebugPage";
 import { MockPayPage } from "@/pages/MockPayPage";
+import { FinesPage } from "@/pages/FinesPage";
+import { FineDetailPage } from "@/pages/FineDetailPage";
 
 function RequireAuth({ children }: { children: ReactNode }) {
   const token = useAuth((s) => s.token);
@@ -44,6 +46,8 @@ export default function App() {
         <Route path="/pay/:orderId" element={<RequireAuth><PaymentPage /></RequireAuth>} />
         <Route path="/mock-pay/:orderId" element={<RequireAuth><MockPayPage /></RequireAuth>} />
         <Route path="/history" element={<RequireAuth><HistoryPage /></RequireAuth>} />
+        <Route path="/fines" element={<RequireAuth><FinesPage /></RequireAuth>} />
+        <Route path="/fines/:fineId" element={<RequireAuth><FineDetailPage /></RequireAuth>} />
         <Route path="/debug" element={<RequireAuth><RequireStaff><DebugPage /></RequireStaff></RequireAuth>} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

driver-pwa/frontend/src/api/driver.ts

@@ -139,3 +139,42 @@ export const getStatement = async (from: string, to: string, kind: StatementKind
   StatementSchema.parse(await api.get("driver/statement", {
     searchParams: { from, to, kind },
   }).json());
+
+const FineBriefSchema = z.object({
+  id: z.number(),
+  number: z.string(),
+  date: z.string().nullable(),
+  article: z.string(),
+  address: z.string().default(""),
+  car_number: z.string().default(""),
+  amount: z.number(),
+  discount_amount: z.number().default(0),
+  discount_until: z.string().nullable().default(null),
+  paid: z.boolean(),
+  cancelled: z.boolean().default(false),
+  has_photo: z.boolean().default(false),
+});
+export type FineBrief = z.infer<typeof FineBriefSchema>;
+
+export const FinesSchema = z.object({
+  items: z.array(FineBriefSchema),
+  open_count: z.number(),
+  open_sum: z.number(),
+});
+
+export const FineDetailSchema = FineBriefSchema.extend({
+  post_date: z.string().nullable().default(null),
+  speed: z.number().nullable().default(null),
+  speed_limit: z.number().nullable().default(null),
+  speed_excess: z.number().nullable().default(null),
+  camera: z.string().default(""),
+  // Ссылки подписанные и живут час — держать их в кэше дольше нет смысла.
+  photos: z.array(z.string()).default([]),
+  document: z.string().nullable().default(null),
+});
+
+export const getFines = async (status: "all" | "open") =>
+  FinesSchema.parse(await api.get("driver/fines", { searchParams: { status } }).json());
+
+export const getFine = async (id: number) =>
+  FineDetailSchema.parse(await api.get(`driver/fines/${id}`).json());

driver-pwa/frontend/src/pages/BalancePage.test.tsx

@@ -38,6 +38,7 @@ function wrap() {
         <Routes>
           <Route path="/" element={<BalancePage />} />
           <Route path="/topup" element={<p>экран пополнения</p>} />
+          <Route path="/fines" element={<p>экран штрафов</p>} />
         </Routes>
       </MemoryRouter>
     </QueryClientProvider>
@@ -79,10 +80,16 @@ describe("главный экран", () => {
     expect(screen.queryByText("Страховка")).not.toBeInTheDocument();
   });
 
-  it("нажатие на строку долга ведёт сразу к оплате этой статьи", async () => {
+  it("аренда ведёт к оплате, а штрафы — в свой список", async () => {
+    wrap();
+    await userEvent.click(await screen.findByRole("button", { name: /Долг аренда/ }));
+    expect(await screen.findByText("экран пополнения")).toBeInTheDocument();
+  });
+
+  it("строка штрафов открывает список, а не оплату: «за что» важнее кнопки", async () => {
     wrap();
     await userEvent.click(await screen.findByRole("button", { name: /Долг по штрафам/ }));
-    expect(await screen.findByText("экран пополнения")).toBeInTheDocument();
+    expect(await screen.findByText("экран штрафов")).toBeInTheDocument();
   });
 
   it("категории для выбора живут в шторке «Пополнить»", async () => {

driver-pwa/frontend/src/pages/BalancePage.tsx

@@ -65,12 +65,17 @@ export function BalancePage() {
         {main.length > 0 && (
           <div className="mt-3 pt-3 border-t border-line">
             {main.map((a) => (
-              // Нажатие ведёт сразу к оплате этой статьи: чаще всего человек за
+              // Аренда ведёт к оплате — за тем её и открывают. Штрафы ведут в свой
-              // тем и открыл приложение, а лишний заход в шторку — лишний шаг.
+              // список: «−5 156 ₽» не отвечает на вопрос «за что», а платить,
+              // не поняв за что, человек не станет.
               <button
                 key={a.bucket}
                 disabled={!a.payable}
-                onClick={() => nav("/topup", { state: { bucket: a.bucket } })}
+                onClick={() =>
+                  a.bucket === "Долг по штрафам"
+                    ? nav("/fines")
+                    : nav("/topup", { state: { bucket: a.bucket } })
+                }
                 className="w-full flex justify-between items-baseline py-1.5 text-left disabled:opacity-100"
               >
                 <span className="text-muted text-xs">{a.bucket}</span>

driver-pwa/frontend/src/pages/FineDetailPage.tsx

@@ -0,0 +1,122 @@
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate, useParams } from "react-router-dom";
+import { FileText, Gauge } from "lucide-react";
+import { getFine } from "@/api/driver";
+import { formatDate, formatMoney } from "@/lib/format";
+import { Spinner } from "@/components/Spinner";
+
+function Row({ k, v }: { k: string; v: string }) {
+  return (
+    <div className="flex justify-between gap-3 py-2 border-b border-line last:border-0">
+      <span className="text-muted text-xs shrink-0">{k}</span>
+      <span className="text-xs text-right">{v}</span>
+    </div>
+  );
+}
+
+/**
+ * Карточка штрафа. Главное здесь — фотография с камеры: по ней водитель узнаёт
+ * свою машину и свою поездку либо понимает, что штраф не его. Поэтому она стоит
+ * первой, до реквизитов, и открывается в полный размер по нажатию.
+ */
+export function FineDetailPage() {
+  const { fineId = "" } = useParams();
+  const nav = useNavigate();
+  const { data: f, isLoading, isError } = useQuery({
+    queryKey: ["fine", fineId],
+    queryFn: () => getFine(Number(fineId)),
+  });
+
+  if (isLoading) return <div className="flex justify-center py-16"><Spinner /></div>;
+  if (isError || !f) {
+    return (
+      <div className="pt-16 text-center">
+        <p className="text-sm font-semibold mb-1">Штраф не найден</p>
+        <p className="text-muted text-xs mb-6">Возможно, он больше не числится за вами.</p>
+        <button className="btn-ghost" onClick={() => nav("/fines")}>К списку штрафов</button>
+      </div>
+    );
+  }
+
+  const discountLive =
+    f.discount_amount > 0 && !!f.discount_until && !f.paid &&
+    new Date(f.discount_until) >= new Date(new Date().toDateString());
+
+  return (
+    <div className="pt-2 pb-4">
+      <button className="text-muted text-xs mb-3" onClick={() => nav("/fines")}>‹ Штрафы</button>
+
+      {f.photos.length > 0 ? (
+        <div className="mb-4 space-y-2">
+          {f.photos.map((src, i) => (
+            <a key={src} href={src} target="_blank" rel="noopener noreferrer" className="block">
+              <img
+                src={src}
+                alt={`Фото нарушения ${i + 1}`}
+                loading="lazy"
+                className="w-full rounded-xl2 border border-line"
+              />
+            </a>
+          ))}
+          <p className="text-muted text-[11px]">Нажмите на фото, чтобы открыть в полном размере</p>
+        </div>
+      ) : (
+        <p className="text-muted text-xs mb-4">
+          Фотографии по этому постановлению нет — её присылают не по всем нарушениям.
+        </p>
+      )}
+
+      <h1 className="text-base font-extrabold mb-1">{f.article}</h1>
+      <p className="text-muted text-xs mb-4">
+        {formatDate(f.date)}{f.address ? ` · ${f.address}` : ""}
+      </p>
+
+      <div className="card p-4 mb-4 text-center">
+        <p className={`text-2xl font-extrabold ${f.paid ? "" : "text-neg"}`}>
+          {formatMoney(f.amount)}
+        </p>
+        <p className="text-muted text-xs mt-1">
+          {f.cancelled ? "Постановление отменено" : f.paid ? "Оплачен" : "Не оплачен"}
+        </p>
+        {discountLive && (
+          // Половина суммы в первые 20 дней — то, ради чего в карточку заходят
+          // вовремя. Дату показываем прямо здесь, а не в реквизитах ниже.
+          <p className="text-pos text-xs mt-2">
+            До {formatDate(f.discount_until)} — {formatMoney(f.discount_amount)} со скидкой
+          </p>
+        )}
+      </div>
+
+      {f.speed != null && f.speed_limit != null && (
+        <div className="card p-4 mb-4 flex items-center gap-3">
+          <Gauge size={20} strokeWidth={1.5} className="text-muted shrink-0" />
+          <p className="text-sm">
+            {f.speed} км/ч при разрешённых {f.speed_limit}
+            {f.speed_excess ? ` — превышение на ${f.speed_excess}` : ""}
+          </p>
+        </div>
+      )}
+
+      <div className="card p-4 mb-4">
+        <Row k="Постановление" v={f.number} />
+        {f.post_date && <Row k="Дата постановления" v={formatDate(f.post_date)} />}
+        {f.car_number && <Row k="Автомобиль" v={f.car_number} />}
+        {f.camera && <Row k="Камера" v={f.camera} />}
+      </div>
+
+      {f.document && (
+        <a href={f.document} target="_blank" rel="noopener noreferrer"
+           className="btn-ghost flex items-center justify-center gap-2 no-underline mb-2">
+          <FileText size={16} /> Открыть постановление
+        </a>
+      )}
+
+      {!f.paid && !f.cancelled && (
+        <button className="btn-primary"
+                onClick={() => nav("/topup", { state: { bucket: "Долг по штрафам" } })}>
+          Оплатить штрафы
+        </button>
+      )}
+    </div>
+  );
+}

driver-pwa/frontend/src/pages/FinesPage.test.tsx

@@ -0,0 +1,100 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const FINE = {
+  id: 12, number: "18810525260813035846", date: "2026-08-12",
+  article: "12.09.2 - Превышение скорости", address: "Владивосток, Некрасовская, 90",
+  car_number: "А947УТ125", amount: 562.5, discount_amount: 281.25,
+  discount_until: "2026-09-01", paid: false, cancelled: false, has_photo: true,
+};
+
+vi.mock("@/api/driver", () => ({
+  getFines: vi.fn(async (status: string) => ({
+    items: status === "open" ? [FINE] : [FINE, { ...FINE, id: 13, paid: true, amount: 500 }],
+    open_count: 1, open_sum: 562.5,
+  })),
+  getFine: vi.fn(async () => ({
+    ...FINE, post_date: "2026-08-13", speed: 63, speed_limit: 40, speed_excess: 23,
+    camera: "АвтоУраган-ВСМ2-М",
+    photos: ["https://s3.pptaxi.ru/pp-fines/1/offense_photo-0.jpg"],
+    document: "https://s3.pptaxi.ru/pp-fines/1/decision.pdf",
+  })),
+}));
+
+import { FinesPage } from "./FinesPage";
+import { FineDetailPage } from "./FineDetailPage";
+import * as driver from "@/api/driver";
+
+function wrap(path = "/fines") {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <MemoryRouter initialEntries={[path]}>
+        <Routes>
+          <Route path="/fines" element={<FinesPage />} />
+          <Route path="/fines/:fineId" element={<FineDetailPage />} />
+          <Route path="/topup" element={<p>экран пополнения</p>} />
+        </Routes>
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+}
+
+describe("список штрафов", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("открывается на неоплаченных и показывает сумму долга", async () => {
+    wrap();
+    expect(await screen.findByText(/Не оплачено: 1 на 562,50 ₽/)).toBeInTheDocument();
+    expect(vi.mocked(driver.getFines).mock.calls[0][0]).toBe("open");
+  });
+
+  it("вкладка «Все» показывает и оплаченные", async () => {
+    wrap();
+    await screen.findByText(/Не оплачено/);
+    await userEvent.click(screen.getByRole("button", { name: "Все" }));
+    expect(await screen.findByText("оплачен")).toBeInTheDocument();
+  });
+
+  it("штраф открывается в карточку", async () => {
+    wrap();
+    await userEvent.click(await screen.findByRole("button", { name: /Превышение скорости/ }));
+    expect(await screen.findByRole("heading", { name: /Превышение скорости/ })).toBeInTheDocument();
+  });
+});
+
+describe("карточка штрафа", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("фотография нарушения стоит первой и открывается в полный размер", async () => {
+    wrap("/fines/12");
+    const img = await screen.findByAltText("Фото нарушения 1");
+    expect(img).toHaveAttribute("src", expect.stringContaining("offense_photo"));
+    expect(img.closest("a")).toHaveAttribute("target", "_blank");
+  });
+
+  it("скорость и скидка объясняют штраф без звонка в парк", async () => {
+    wrap("/fines/12");
+    expect(await screen.findByText(/63 км\/ч при разрешённых 40/)).toBeInTheDocument();
+    expect(screen.getByText(/281,25 ₽ со скидкой/)).toBeInTheDocument();
+    expect(screen.getByText("18810525260813035846")).toBeInTheDocument();
+  });
+
+  it("неоплаченный штраф ведёт к оплате штрафов", async () => {
+    wrap("/fines/12");
+    await userEvent.click(await screen.findByRole("button", { name: /Оплатить штрафы/ }));
+    expect(await screen.findByText("экран пополнения")).toBeInTheDocument();
+  });
+
+  it("нет фото — экран объясняет это, а не показывает пустоту", async () => {
+    vi.mocked(driver.getFine).mockResolvedValueOnce({
+      ...FINE, post_date: null, speed: null, speed_limit: null, speed_excess: null,
+      camera: "", photos: [], document: null,
+    } as never);
+    wrap("/fines/12");
+    expect(await screen.findByText(/Фотографии по этому постановлению нет/)).toBeInTheDocument();
+  });
+});

driver-pwa/frontend/src/pages/FinesPage.tsx

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { ChevronRight, Image as ImageIcon } from "lucide-react";
+import { getFines } from "@/api/driver";
+import { formatDate, formatMoney } from "@/lib/format";
+import { OperationIcon } from "@/components/operationIcon";
+import { Spinner } from "@/components/Spinner";
+
+/**
+ * Штрафы водителя списком.
+ *
+ * Строка «Долг по штрафам −5 156 ₽» на балансе не отвечает на вопрос «за что»,
+ * и водитель идёт выяснять звонком. Здесь он видит каждое постановление, а в
+ * карточке — фотографию с камеры.
+ */
+export function FinesPage() {
+  const nav = useNavigate();
+  const [tab, setTab] = useState<"open" | "all">("open");
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: ["fines", tab],
+    queryFn: () => getFines(tab),
+  });
+  const items = data?.items ?? [];
+
+  return (
+    <div className="pt-2">
+      <button className="text-muted text-xs mb-3" onClick={() => nav("/")}>‹ Назад</button>
+      <h1 className="text-lg font-extrabold mb-1">Штрафы</h1>
+      <p className="text-muted text-xs mb-4">
+        {data
+          ? data.open_count > 0
+            ? `Не оплачено: ${data.open_count} на ${formatMoney(data.open_sum)}`
+            : "Неоплаченных нет"
+          : " "}
+      </p>
+
+      <div className="flex gap-1.5 mb-3">
+        {([["open", "Неоплаченные"], ["all", "Все"]] as const).map(([key, label]) => (
+          <button
+            key={key}
+            onClick={() => setTab(key)}
+            className={`px-3 py-2 rounded-xl2 text-xs border ${
+              tab === key ? "border-line bg-surface font-semibold" : "border-line text-muted"
+            }`}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {isLoading ? (
+        <div className="flex justify-center py-10"><Spinner /></div>
+      ) : isError ? (
+        <div className="text-center py-8">
+          <p className="text-muted text-sm mb-3">Не удалось загрузить штрафы</p>
+          <button className="btn-ghost" onClick={() => refetch()}>Повторить</button>
+        </div>
+      ) : items.length === 0 ? (
+        <p className="text-muted text-sm text-center py-10">
+          {tab === "open" ? "Неоплаченных штрафов нет" : "Штрафов не найдено"}
+        </p>
+      ) : (
+        <div>
+          {items.map((f) => (
+            <button
+              key={f.id}
+              onClick={() => nav(`/fines/${f.id}`)}
+              className="w-full flex items-center gap-3 py-3 border-b border-line last:border-0 text-left"
+            >
+              <OperationIcon title="Штраф" />
+              <span className="min-w-0 flex-1">
+                <span className="block text-sm truncate">{f.article}</span>
+                <span className="block text-muted text-xs flex items-center gap-1.5">
+                  {formatDate(f.date)}
+                  {f.car_number ? ` · ${f.car_number}` : ""}
+                  {f.has_photo && <ImageIcon size={12} strokeWidth={1.5} />}
+                </span>
+              </span>
+              <span className="shrink-0 text-right">
+                <b className={f.paid ? "text-muted" : "text-neg"}>{formatMoney(f.amount)}</b>
+                <span className="block text-muted text-[11px]">
+                  {f.cancelled ? "отменён" : f.paid ? "оплачен" : "не оплачен"}
+                </span>
+              </span>
+              <ChevronRight size={16} className="text-muted shrink-0" />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}