From 064b7c68eee7b1e264e98b346fc1f72de97d9797 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Thu, 16 Apr 2026 22:27:20 +0300
Subject: [PATCH] Add BoardingPanel component for flight details accordion

---
 .../details-panels/BoardingPanel.test.tsx     | 46 +++++++++++++++++++
 .../details-panels/BoardingPanel.tsx          | 40 ++++++++++++++++
 2 files changed, 86 insertions(+)
 create mode 100644 src/features/online-board/components/details-panels/BoardingPanel.test.tsx
 create mode 100644 src/features/online-board/components/details-panels/BoardingPanel.tsx

diff --git a/src/features/online-board/components/details-panels/BoardingPanel.test.tsx b/src/features/online-board/components/details-panels/BoardingPanel.test.tsx
new file mode 100644
index 00000000..6766c25e
--- /dev/null
+++ b/src/features/online-board/components/details-panels/BoardingPanel.test.tsx
@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { BoardingPanel } from "./BoardingPanel.js";
+import type { IFlightTransitionItem } from "../../types.js";
+
+vi.mock("@/i18n/provider.js", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+const baseItem: IFlightTransitionItem = {
+  start: {
+    dayChange: { value: 0, title: "" },
+    local: "11:00",
+    localTime: "11:00",
+    tzOffset: 3,
+    utc: "08:00",
+  },
+  end: {
+    dayChange: { value: 0, title: "" },
+    local: "11:30",
+    localTime: "11:30",
+    tzOffset: 3,
+    utc: "08:30",
+  },
+  status: "Finished",
+  isActual: true,
+};
+
+describe("BoardingPanel", () => {
+  it("renders start and end times", () => {
+    render(<BoardingPanel item={baseItem} />);
+    expect(screen.getByText("11:00")).toBeTruthy();
+    expect(screen.getByText("11:30")).toBeTruthy();
+  });
+
+  it("renders status label", () => {
+    render(<BoardingPanel item={baseItem} />);
+    expect(screen.getByText("DETAILS.STATUS_FINISHED")).toBeTruthy();
+  });
+
+  it("has data-testid", () => {
+    render(<BoardingPanel item={baseItem} />);
+    expect(screen.getByTestId("boarding-panel")).toBeTruthy();
+  });
+});
diff --git a/src/features/online-board/components/details-panels/BoardingPanel.tsx b/src/features/online-board/components/details-panels/BoardingPanel.tsx
new file mode 100644
index 00000000..723ce189
--- /dev/null
+++ b/src/features/online-board/components/details-panels/BoardingPanel.tsx
@@ -0,0 +1,40 @@
+import type { FC } from "react";
+import { useTranslation } from "@/i18n/provider.js";
+import type { IFlightTransitionItem, FlightTransitionStatus } from "../../types.js";
+import "./panels.scss";
+
+const STATUS_KEYS: Record<FlightTransitionStatus, string> = {
+  Finished: "DETAILS.STATUS_FINISHED",
+  Expected: "DETAILS.STATUS_EXPECTED",
+  InProgress: "DETAILS.STATUS_IN_PROGRESS",
+  Specified: "DETAILS.STATUS_SPECIFIED",
+  Scheduled: "DETAILS.STATUS_SCHEDULED",
+};
+
+export interface BoardingPanelProps {
+  item: IFlightTransitionItem;
+}
+
+export const BoardingPanel: FC<BoardingPanelProps> = ({ item }) => {
+  const { t } = useTranslation();
+  const hasEnd = Boolean(item.end?.local);
+
+  return (
+    <div className="details-panel" data-testid="boarding-panel">
+      <div className="details-panel__row">
+        <span className="details-panel__label">{t("DETAILS.STATUS")}</span>
+        <span className="details-panel__status">{t(STATUS_KEYS[item.status])}</span>
+      </div>
+      <div className="details-panel__row">
+        <span className="details-panel__label">{t("DETAILS.SCHEDULED")}</span>
+        <span className="details-panel__value">{item.start.local}</span>
+      </div>
+      {hasEnd && (
+        <div className="details-panel__row">
+          <span className="details-panel__label">{t("DETAILS.ACTUAL")}</span>
+          <span className="details-panel__value">{item.end.local}</span>
+        </div>
+      )}
+    </div>
+  );
+};