fix ui

apps/edr-freight-web/backoffice/src/complaints/components/ComplaintPageLayout.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import Header from "@/layout/components/Header";
+import Footer from "@/layout/components/Footer";
+
+interface ComplaintPageLayoutProps {
+  children: ReactNode;
+  heroTitle: string;
+  heroSubtitle?: string;
+}
+
+export function ComplaintPageLayout({
+  children,
+  heroTitle,
+  heroSubtitle,
+}: ComplaintPageLayoutProps) {
+  return (
+    <div>
+      <Header />
+      <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white flex flex-col pt-16 md:pt-20">
+        <div className="bg-primary py-12 md:py-16 text-center text-white relative overflow-hidden">
+          <div className="absolute top-0 left-0 w-full h-full bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10" />
+          <h1 className="text-3xl md:text-5xl font-bold mb-3 relative z-10">
+            {heroTitle}
+          </h1>
+          {heroSubtitle && (
+            <p className="max-w-2xl mx-auto text-base md:text-lg opacity-90 relative z-10 px-4">
+              {heroSubtitle}
+            </p>
+          )}
+        </div>
+        <div className="flex-1 flex justify-center p-4 md:p-6">{children}</div>
+      </div>
+      <Footer />
+    </div>
+  );
+}

apps/edr-freight-web/backoffice/src/complaints/components/ComplaintVerificationGuard.tsx

@@ -0,0 +1,12 @@
+import { Navigate, Outlet } from "react-router-dom";
+import { getComplaintVerification } from "../utils/complaintVerificationStorage";
+
+export function ComplaintVerificationGuard() {
+  const session = getComplaintVerification();
+
+  if (!session) {
+    return <Navigate to="/complaints" replace />;
+  }
+
+  return <Outlet />;
+}

apps/edr-freight-web/backoffice/src/complaints/components/ComplaintVerifiedInfoPanel.tsx

@@ -0,0 +1,69 @@
+import { useTranslation } from "react-i18next";
+import { BadgeCheck, Building2, IdCard, User } from "lucide-react";
+import {
+  PortalFieldLabel,
+  PortalReadOnlyField,
+} from "@/external-portal/components/shared/PortalFormPrimitives";
+import type { ComplaintVerificationSession } from "../types/complaint.types";
+
+interface ComplaintVerifiedInfoPanelProps {
+  session: ComplaintVerificationSession;
+}
+
+export function ComplaintVerifiedInfoPanel({
+  session,
+}: ComplaintVerifiedInfoPanelProps) {
+  const { t } = useTranslation();
+  const isTinComplaint = session.method === "tin";
+
+  return (
+    <section className="mb-6 rounded-xl border border-emerald-200 bg-emerald-50/80 p-5 md:p-6">
+      <h3 className="mb-4 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-emerald-800">
+        <BadgeCheck className="h-4 w-4" />
+        {isTinComplaint
+          ? t("complaint.tin.verifiedInfo")
+          : t("complaint.fayda.verifiedInfo")}
+      </h3>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        {isTinComplaint ? (
+          <>
+            <PortalReadOnlyField
+              label={t("complaint.tin.organizationName")}
+              value={session.organization?.organizationName}
+              icon={Building2}
+            />
+            <PortalReadOnlyField
+              label={t("complaint.tin.tinLabel")}
+              value={session.organization?.tin}
+              icon={IdCard}
+              mono
+            />
+            {session.organization?.tradeName ? (
+              <PortalReadOnlyField
+                label={t("complaint.tin.tradeName")}
+                value={session.organization.tradeName}
+                icon={Building2}
+              />
+            ) : null}
+            {session.organization?.licenseNumber ? (
+              <PortalReadOnlyField
+                label={t("complaint.tin.licenseNumber")}
+                value={session.organization.licenseNumber}
+                icon={IdCard}
+                mono
+              />
+            ) : null}
+          </>
+        ) : (
+          <>
+            <PortalReadOnlyField
+              label={t("complaint.fullName")}
+              value={session.citizen?.fullName}
+              icon={User}
+            />
+          </>
+        )}
+      </div>
+    </section>
+  );
+}