Assets & BIA optisch 1:1 ans Mockup angeglichen

- Neue Mockup-Bausteine (mockup-ui.tsx): PageHead mit Crumb/Untertitel,
  KPI-Kapseln, C/I/A-Quadrate in Mockup-Farben, Tag-Chips, Owner-Chips
  mit Mini-Avatar ("kein Owner" als rote Pille), Status-/Kritikalitäts-
  Pillen, Pillen-Filter-Tabs
- Asset-Inventar wie im Mockup: Seitenkopf mit Zähler-Untertitel und
  Ghost-Buttons (Excel-Import/Export, deaktiviert bis zur Funktion),
  4 KPI-Kapseln (gesamt, hoher Schutzbedarf, ohne Owner, Lieferanten),
  Typ-Filter als Pillen-Tabs + Filtersuche in der Tabellenkarte,
  Abhängigkeiten-Spalte
- BIA-Seite wie im Mockup: "Kritikalität der Prozesse" mit RTO/RPO/MTD
  und Kritikalitäts-Pillen; Prozess-Detail als schließbares, schreib-
  geschütztes Popup (?detail=id, serverseitig gerendert): primäres Asset
  mit violettem Kartenrand, Sekundär-Tabelle, BIA-Kennzahlen-Band,
  Bearbeiten-Button führt zur Editier-Seite
- Tabellenköpfe uppercase/muted, Zeilen-Hover wie im Mockup; Asset-
  Detail und Prozess-Editier-Seite auf die neuen Bausteine umgestellt

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

src/app/(app)/assets/[id]/page.tsx

@@ -11,9 +11,8 @@ import {
   removeAssetRelation,
 } from "@/server/actions/assets";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { LevelBadge } from "@/components/level-badge";
+import { CiaBadge, Pill, Tag } from "@/components/mockup-ui";
 
 export default async function AssetDetailPage({
   params,
@@ -62,8 +61,10 @@ export default async function AssetDetailPage({
             <ArrowLeft className="size-4" />
           </Button>
           <h1 className="text-xl font-semibold">{asset.name}</h1>
-          <Badge variant="secondary">{tType(asset.type)}</Badge>
-          <Badge variant="outline">{tStatus(asset.status)}</Badge>
+          <Tag>{tType(asset.type)}</Tag>
+          <Pill tone={asset.status === "ACTIVE" ? "ok" : asset.status === "PLANNED" ? "info" : "mut"}>
+            {tStatus(asset.status)}
+          </Pill>
         </div>
         {canWrite && (
           <div className="flex gap-2">
@@ -93,20 +94,14 @@ export default async function AssetDetailPage({
               <dt className="text-muted-foreground">{t("location")}</dt>
               <dd>{asset.location ?? tc("none")}</dd>
               <dt className="text-muted-foreground">{t("protection")}</dt>
-              <dd className="flex gap-1">
-                <LevelBadge level={asset.confidentiality} prefix="C" />
-                <LevelBadge level={asset.integrity} prefix="I" />
-                <LevelBadge level={asset.availability} prefix="A" />
+              <dd>
+                <CiaBadge c={asset.confidentiality} i={asset.integrity} a={asset.availability} />
               </dd>
               <dt className="text-muted-foreground">{t("tags")}</dt>
               <dd className="flex flex-wrap gap-1">
                 {asset.tags.length === 0
                   ? tc("none")
-                  : asset.tags.map((tag) => (
-                      <Badge key={tag} variant="secondary">
-                        {tag}
-                      </Badge>
-                    ))}
+                  : asset.tags.map((tag) => <Tag key={tag}>{tag}</Tag>)}
               </dd>
             </dl>
           </CardContent>
@@ -196,9 +191,7 @@ export default async function AssetDetailPage({
                   <Link href={`/processes/${pa.process.id}`} className="hover:underline">
                     {pa.process.name}
                   </Link>
-                  <Badge variant={pa.role === "PRIMARY" ? "default" : "secondary"}>
-                    {tRole(pa.role)}
-                  </Badge>
+                  <Pill tone={pa.role === "PRIMARY" ? "violet" : "info"}>{tRole(pa.role)}</Pill>
                 </li>
               ))}
             </ul>

src/app/(app)/assets/page.tsx

@@ -1,15 +1,21 @@
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
-import { Plus } from "lucide-react";
-import type { AssetStatus, AssetType } from "@prisma/client";
+import { Plus, Search } from "lucide-react";
+import type { AssetType } from "@prisma/client";
 import { requireSession } from "@/server/auth";
 import { dbForTenant } from "@/server/db";
 import { hasPermission, requirePermission } from "@/server/rbac";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { LevelBadge } from "@/components/level-badge";
 import { ModuleTabs } from "@/components/module-tabs";
-import { Badge } from "@/components/ui/badge";
+import { FilterTabs } from "@/components/filter-tabs";
+import {
+  CiaBadge,
+  KpiCard,
+  OwnerChip,
+  PageHead,
+  Pill,
+  Tag,
+} from "@/components/mockup-ui";
 import {
   Table,
   TableBody,
@@ -20,12 +26,13 @@ import {
 } from "@/components/ui/table";
 
 const ASSET_TYPES = ["INFORMATION", "SYSTEM", "APPLICATION", "LOCATION", "SUPPLIER", "PERSON", "DATA"] as const;
-const ASSET_STATUS = ["ACTIVE", "PLANNED", "RETIRED"] as const;
+
+const STATUS_TONE = { ACTIVE: "ok", PLANNED: "info", RETIRED: "mut" } as const;
 
 export default async function AssetsPage({
   searchParams,
 }: {
-  searchParams: Promise<{ q?: string; type?: string; status?: string }>;
+  searchParams: Promise<{ q?: string; type?: string }>;
 }) {
   const session = await requireSession();
   requirePermission(session, "asset:read");
@@ -34,96 +41,125 @@ export default async function AssetsPage({
   const tStatus = await getTranslations("assetStatus");
   const tc = await getTranslations("common");
 
-  const { q, type, status } = await searchParams;
+  const { q, type } = await searchParams;
+  const activeType = ASSET_TYPES.includes(type as AssetType) ? (type as AssetType) : null;
   const db = dbForTenant(session.user.tenantId);
 
-  const assets = await db.asset.findMany({
-    where: {
-      ...(q ? { name: { contains: q, mode: "insensitive" } } : {}),
-      ...(type && ASSET_TYPES.includes(type as AssetType) ? { type: type as AssetType } : {}),
-      ...(status && ASSET_STATUS.includes(status as AssetStatus)
-        ? { status: status as AssetStatus }
-        : {}),
-    },
-    include: { owner: { select: { name: true } } },
-    orderBy: { name: "asc" },
-    take: 200,
-  });
+  const [assets, allAssets] = await Promise.all([
+    db.asset.findMany({
+      where: {
+        ...(q ? { name: { contains: q, mode: "insensitive" } } : {}),
+        ...(activeType ? { type: activeType } : {}),
+      },
+      include: {
+        owner: { select: { name: true } },
+        relationsFrom: {
+          include: { relatedAsset: { select: { name: true } } },
+          take: 4,
+        },
+      },
+      orderBy: { name: "asc" },
+      take: 200,
+    }),
+    db.asset.findMany({
+      select: { type: true, ownerId: true, confidentiality: true, integrity: true, availability: true },
+    }),
+  ]);
+
+  const total = allAssets.length;
+  const typeCount = new Set(allAssets.map((a) => a.type)).size;
+  const highProtection = allAssets.filter(
+    (a) => Math.max(a.confidentiality, a.integrity, a.availability) >= 3
+  ).length;
+  const withoutOwner = allAssets.filter((a) => !a.ownerId).length;
+  const suppliers = allAssets.filter((a) => a.type === "SUPPLIER").length;
 
   const canWrite = hasPermission(session, "asset:write");
 
+  const typeHref = (v: string | null) =>
+    `/assets${v ? `?type=${v}` : ""}${q ? `${v ? "&" : "?"}q=${encodeURIComponent(q)}` : ""}`;
+
   return (
     <main className="flex-1 p-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-xl font-semibold">{t("title")}</h1>
-        {canWrite && (
-          <Button nativeButton={false} render={<Link href="/assets/new" />}>
-            <Plus className="size-4" /> {t("newAsset")}
-          </Button>
-        )}
+      <PageHead
+        crumb={t("crumb")}
+        title={t("invTitle")}
+        sub={t("invSub", { count: total })}
+        actions={
+          <>
+            <Button variant="outline" disabled title={tc("comingSoon")}>
+              {t("excelImport")}
+            </Button>
+            <Button variant="outline" disabled title={tc("comingSoon")}>
+              {t("export")}
+            </Button>
+            {canWrite && (
+              <Button nativeButton={false} render={<Link href="/assets/new" />}>
+                <Plus className="size-4" /> {t("newAsset")}
+              </Button>
+            )}
+          </>
+        }
+      />
+
+      <ModuleTabs
+        active="/assets"
+        tabs={[
+          { href: "/assets", label: t("tabAssets") },
+          { href: "/processes", label: t("tabProcesses") },
+        ]}
+      />
+
+      <div className="mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <KpiCard label={t("kpiTotal")} value={total} trend={t("kpiTotalTrend", { count: typeCount })} />
+        <KpiCard label={t("kpiHigh")} value={highProtection} trend={t("kpiHighTrend")} trendColor="risk" />
+        <KpiCard
+          label={t("kpiNoOwner")}
+          value={withoutOwner}
+          trend={withoutOwner > 0 ? t("kpiNoOwnerTrend") : undefined}
+          trendColor="warn"
+        />
+        <KpiCard label={t("kpiSuppliers")} value={suppliers} trend={t("kpiSuppliersTrend")} />
       </div>
 
-      <div className="mt-4">
-        <ModuleTabs
-          active="/assets"
-          tabs={[
-            { href: "/assets", label: t("tabAssets") },
-            { href: "/processes", label: t("tabProcesses") },
-          ]}
-        />
-      </div>
-
-      <form method="GET" className="mt-4 flex flex-wrap gap-2">
-        <Input
-          name="q"
-          defaultValue={q}
-          placeholder={tc("search")}
-          className="w-56"
-        />
-        <select
-          name="type"
-          defaultValue={type ?? ""}
-          className="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
-        >
-          <option value="">{t("allTypes")}</option>
-          {ASSET_TYPES.map((v) => (
-            <option key={v} value={v}>
-              {tType(v)}
-            </option>
-          ))}
-        </select>
-        <select
-          name="status"
-          defaultValue={status ?? ""}
-          className="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
-        >
-          <option value="">{t("allStatus")}</option>
-          {ASSET_STATUS.map((v) => (
-            <option key={v} value={v}>
-              {tStatus(v)}
-            </option>
-          ))}
-        </select>
-        <Button type="submit" variant="secondary">
-          {tc("search").replace("…", "")}
-        </Button>
-      </form>
-
-      <div className="mt-4 rounded-lg border bg-card">
+      <div className="shadow-card mt-4 rounded-xl border bg-card">
+        <div className="flex flex-wrap items-center justify-between gap-3 p-4">
+          <FilterTabs
+            tabs={[
+              { href: typeHref(null), label: t("all"), active: !activeType },
+              ...ASSET_TYPES.map((v) => ({
+                href: typeHref(v),
+                label: tType(v),
+                active: activeType === v,
+              })),
+            ]}
+          />
+          <form method="GET" className="flex max-w-65 items-center gap-2 rounded-lg border bg-muted px-3 py-2 text-muted-foreground">
+            {activeType && <input type="hidden" name="type" value={activeType} />}
+            <Search className="size-[15px] shrink-0" />
+            <input
+              name="q"
+              defaultValue={q}
+              placeholder={t("filter")}
+              className="w-full border-0 bg-transparent text-[13px] text-foreground outline-none"
+            />
+          </form>
+        </div>
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>{t("name")}</TableHead>
+              <TableHead>Asset</TableHead>
               <TableHead>{t("type")}</TableHead>
-              <TableHead>{t("protection")} (C/I/A)</TableHead>
               <TableHead>{t("owner")}</TableHead>
+              <TableHead>{t("protection")} (C/I/A)</TableHead>
+              <TableHead>{t("dependencies")}</TableHead>
               <TableHead>{t("status")}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {assets.length === 0 && (
               <TableRow>
-                <TableCell colSpan={5} className="py-8 text-center text-muted-foreground">
+                <TableCell colSpan={6} className="py-8 text-center text-muted-foreground">
                   {t("empty")}
                 </TableCell>
               </TableRow>
@@ -131,25 +167,26 @@ export default async function AssetsPage({
             {assets.map((asset) => (
               <TableRow key={asset.id}>
                 <TableCell>
-                  <Link href={`/assets/${asset.id}`} className="font-medium hover:underline">
+                  <Link href={`/assets/${asset.id}`} className="font-bold hover:underline">
                     {asset.name}
                   </Link>
                 </TableCell>
                 <TableCell>
-                  <Badge variant="secondary">{tType(asset.type)}</Badge>
+                  <Tag>{tType(asset.type)}</Tag>
                 </TableCell>
                 <TableCell>
-                  <span className="flex gap-1">
-                    <LevelBadge level={asset.confidentiality} prefix="C" />
-                    <LevelBadge level={asset.integrity} prefix="I" />
-                    <LevelBadge level={asset.availability} prefix="A" />
-                  </span>
+                  <OwnerChip name={asset.owner?.name} noOwnerLabel={t("noOwner")} />
+                </TableCell>
+                <TableCell>
+                  <CiaBadge c={asset.confidentiality} i={asset.integrity} a={asset.availability} />
                 </TableCell>
                 <TableCell className="text-muted-foreground">
-                  {asset.owner?.name ?? tc("none")}
+                  {asset.relationsFrom.length
+                    ? asset.relationsFrom.map((r) => r.relatedAsset.name).join(", ")
+                    : tc("none")}
                 </TableCell>
-                <TableCell className="text-muted-foreground">
-                  {tStatus(asset.status)}
+                <TableCell>
+                  <Pill tone={STATUS_TONE[asset.status]}>{tStatus(asset.status)}</Pill>
                 </TableCell>
               </TableRow>
             ))}

src/app/(app)/processes/[id]/page.tsx

@@ -13,10 +13,10 @@ import {
 } from "@/server/actions/processes";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CiaBadge, CriticalityPill } from "@/components/mockup-ui";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { LevelBadge } from "@/components/level-badge";
 
 const LEVELS = [1, 2, 3, 4] as const;
 
@@ -84,11 +84,7 @@ export default async function ProcessDetailPage({
             <Link href={`/assets/${pa.asset.id}`} className="hover:underline">
               {pa.asset.name}
             </Link>
-            <span className="flex gap-1">
-              <LevelBadge level={pa.asset.confidentiality} prefix="C" />
-              <LevelBadge level={pa.asset.integrity} prefix="I" />
-              <LevelBadge level={pa.asset.availability} prefix="A" />
-            </span>
+            <CiaBadge c={pa.asset.confidentiality} i={pa.asset.integrity} a={pa.asset.availability} />
             {canWrite && (
               <form action={unassignAsset.bind(null, process!.id, pa.id)}>
                 <button
@@ -114,9 +110,7 @@ export default async function ProcessDetailPage({
             <ArrowLeft className="size-4" />
           </Button>
           <h1 className="text-xl font-semibold">{process.name}</h1>
-          {bia && (
-            <LevelBadge level={bia.criticality} label={tCrit(String(bia.criticality))} />
-          )}
+          {bia && <CriticalityPill level={bia.criticality} label={tCrit(String(bia.criticality))} />}
         </div>
         {canWrite && (
           <div className="flex gap-2">
@@ -212,10 +206,8 @@ export default async function ProcessDetailPage({
                 <dt className="text-muted-foreground">MTD</dt>
                 <dd>{bia.mtdHours != null ? `${bia.mtdHours} h` : tc("none")}</dd>
                 <dt className="text-muted-foreground">{t("impact")}</dt>
-                <dd className="flex gap-1">
-                  <LevelBadge level={bia.impactC} prefix="C" />
-                  <LevelBadge level={bia.impactI} prefix="I" />
-                  <LevelBadge level={bia.impactA} prefix="A" />
+                <dd>
+                  <CiaBadge c={bia.impactC} i={bia.impactI} a={bia.impactA} />
                 </dd>
               </dl>
             )}

src/app/(app)/processes/page.tsx

@@ -1,12 +1,19 @@
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
-import { Plus } from "lucide-react";
+import { Plus, X, Pencil } from "lucide-react";
 import { requireSession } from "@/server/auth";
 import { dbForTenant } from "@/server/db";
 import { hasPermission, requirePermission } from "@/server/rbac";
 import { Button } from "@/components/ui/button";
-import { LevelBadge } from "@/components/level-badge";
 import { ModuleTabs } from "@/components/module-tabs";
+import {
+  CiaBadge,
+  CriticalityPill,
+  PageHead,
+  Pill,
+  SectTitle,
+  Tag,
+} from "@/components/mockup-ui";
 import {
   Table,
   TableBody,
@@ -16,58 +23,104 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
-export default async function ProcessesPage() {
+export default async function ProcessesPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ detail?: string }>;
+}) {
   const session = await requireSession();
   requirePermission(session, "bia:read");
   const t = await getTranslations("processes");
   const tAssets = await getTranslations("assets");
+  const tType = await getTranslations("assetType");
   const tCrit = await getTranslations("criticality");
   const tc = await getTranslations("common");
 
+  const { detail } = await searchParams;
   const db = dbForTenant(session.user.tenantId);
+
   const processes = await db.process.findMany({
     include: {
       owner: { select: { name: true } },
-      bia: { select: { criticality: true, rtoHours: true, mtdHours: true } },
-      _count: { select: { processAssets: true } },
+      bia: { select: { criticality: true, rtoHours: true, rpoHours: true, mtdHours: true } },
     },
     orderBy: { name: "asc" },
     take: 200,
   });
 
+  // Read-only-Detail fürs Popup (?detail=<id>)
+  const detailProcess = detail
+    ? await db.process.findUnique({
+        where: { id: detail },
+        include: {
+          owner: { select: { name: true } },
+          bia: true,
+          processAssets: {
+            include: {
+              asset: {
+                select: {
+                  id: true,
+                  name: true,
+                  type: true,
+                  confidentiality: true,
+                  integrity: true,
+                  availability: true,
+                  owner: { select: { name: true } },
+                },
+              },
+            },
+          },
+        },
+      })
+    : null;
+
   const canWrite = hasPermission(session, "bia:write");
+  const hours = (v: number | null | undefined) => (v != null ? `${v} h` : tc("none"));
+
+  const primary = detailProcess?.processAssets.filter((pa) => pa.role === "PRIMARY") ?? [];
+  const secondary = detailProcess?.processAssets.filter((pa) => pa.role === "SECONDARY") ?? [];
 
   return (
     <main className="flex-1 p-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-xl font-semibold">{tAssets("title")}</h1>
-        {canWrite && (
-          <Button nativeButton={false} render={<Link href="/processes/new" />}>
-            <Plus className="size-4" /> {t("newProcess")}
-          </Button>
-        )}
-      </div>
+      <PageHead
+        crumb={tAssets("crumb")}
+        title={t("biaTitle")}
+        sub={t("biaSub")}
+        actions={
+          <>
+            <Button variant="outline" disabled title={tc("comingSoon")}>
+              {t("biaReport")}
+            </Button>
+            {canWrite && (
+              <Button nativeButton={false} render={<Link href="/processes/new" />}>
+                <Plus className="size-4" /> {t("newProcess")}
+              </Button>
+            )}
+          </>
+        }
+      />
 
-      <div className="mt-4">
-        <ModuleTabs
-          active="/processes"
-          tabs={[
-            { href: "/assets", label: tAssets("tabAssets") },
-            { href: "/processes", label: tAssets("tabProcesses") },
-          ]}
-        />
-      </div>
+      <ModuleTabs
+        active="/processes"
+        tabs={[
+          { href: "/assets", label: tAssets("tabAssets") },
+          { href: "/processes", label: tAssets("tabProcesses") },
+        ]}
+      />
 
-      <div className="mt-4 rounded-lg border bg-card">
-        <Table>
+      <div className="shadow-card mt-4 rounded-xl border bg-card">
+        <div className="p-4 pb-0">
+          <SectTitle title={t("critTable")} />
+        </div>
+        <Table className="mt-2">
           <TableHeader>
             <TableRow>
-              <TableHead>{t("name")}</TableHead>
+              <TableHead>{t("process")}</TableHead>
               <TableHead>{t("owner")}</TableHead>
-              <TableHead>{t("criticality")}</TableHead>
               <TableHead>RTO</TableHead>
+              <TableHead>RPO</TableHead>
               <TableHead>MTD</TableHead>
-              <TableHead>{t("assets")}</TableHead>
+              <TableHead>{t("criticality")}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -81,16 +134,19 @@ export default async function ProcessesPage() {
             {processes.map((process) => (
               <TableRow key={process.id}>
                 <TableCell>
-                  <Link href={`/processes/${process.id}`} className="font-medium hover:underline">
+                  <Link href={`/processes?detail=${process.id}`} className="font-bold hover:underline">
                     {process.name}
                   </Link>
                 </TableCell>
                 <TableCell className="text-muted-foreground">
                   {process.owner?.name ?? tc("none")}
                 </TableCell>
+                <TableCell>{hours(process.bia?.rtoHours)}</TableCell>
+                <TableCell>{hours(process.bia?.rpoHours)}</TableCell>
+                <TableCell>{hours(process.bia?.mtdHours)}</TableCell>
                 <TableCell>
                   {process.bia ? (
-                    <LevelBadge
+                    <CriticalityPill
                       level={process.bia.criticality}
                       label={tCrit(String(process.bia.criticality))}
                     />
@@ -98,20 +154,150 @@ export default async function ProcessesPage() {
                     <span className="text-muted-foreground">{t("noBia")}</span>
                   )}
                 </TableCell>
-                <TableCell className="text-muted-foreground">
-                  {process.bia?.rtoHours != null ? `${process.bia.rtoHours} h` : tc("none")}
-                </TableCell>
-                <TableCell className="text-muted-foreground">
-                  {process.bia?.mtdHours != null ? `${process.bia.mtdHours} h` : tc("none")}
-                </TableCell>
-                <TableCell className="text-muted-foreground">
-                  {process._count.processAssets}
-                </TableCell>
               </TableRow>
             ))}
           </TableBody>
         </Table>
       </div>
+
+      {detailProcess && (
+        <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/30 p-6 backdrop-blur-[2px]">
+          <div className="shadow-card w-full max-w-3xl rounded-2xl border bg-card">
+            <div className="flex items-start justify-between gap-3 border-b p-5">
+              <SectTitle
+                title={t("detailHeading", { name: detailProcess.name })}
+                sub={t("detailSub")}
+              />
+              <div className="flex items-center gap-3">
+                {detailProcess.bia && (
+                  <CriticalityPill
+                    level={detailProcess.bia.criticality}
+                    label={t("critLabel", {
+                      label: tCrit(String(detailProcess.bia.criticality)),
+                    })}
+                  />
+                )}
+                <Link
+                  href="/processes"
+                  title={t("close")}
+                  className="rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+                >
+                  <X className="size-4.5" />
+                </Link>
+              </div>
+            </div>
+
+            <div className="grid gap-5 p-5 md:grid-cols-2">
+              <div>
+                <div className="mb-2.5 flex items-center gap-2.5">
+                  <Pill tone="violet">{t("primaryPill")}</Pill>
+                  <span className="text-[12.5px] text-muted-foreground">{t("primaryNote")}</span>
+                </div>
+                {primary.length === 0 && (
+                  <p className="text-sm text-muted-foreground">{t("noAssets")}</p>
+                )}
+                {primary.map((pa) => (
+                  <div
+                    key={pa.id}
+                    className="mb-2 rounded-xl border border-l-[3px] border-l-[#5d52a3] bg-[#faf9fd] p-4"
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <b>{pa.asset.name}</b>
+                      <CiaBadge
+                        c={pa.asset.confidentiality}
+                        i={pa.asset.integrity}
+                        a={pa.asset.availability}
+                      />
+                    </div>
+                    <div className="mt-1.5 text-[12.5px] leading-relaxed text-muted-foreground">
+                      {t("owner")}: {pa.asset.owner?.name ?? tc("none")} · {tAssets("type")}:{" "}
+                      {tType(pa.asset.type)} · {t("inherits")}
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              <div>
+                <div className="mb-2.5 flex items-center gap-2.5">
+                  <Pill tone="info">{t("secondaryPill")}</Pill>
+                  <span className="text-[12.5px] text-muted-foreground">{t("secondaryNote")}</span>
+                </div>
+                {secondary.length === 0 && (
+                  <p className="text-sm text-muted-foreground">{t("noAssets")}</p>
+                )}
+                <table className="w-full text-sm">
+                  <tbody>
+                    {secondary.map((pa) => (
+                      <tr key={pa.id} className="border-b last:border-0">
+                        <td className="py-2.5 pr-2 font-bold">{pa.asset.name}</td>
+                        <td className="py-2.5 pr-2">
+                          <Tag>{tType(pa.asset.type)}</Tag>
+                        </td>
+                        <td className="py-2.5 text-right">
+                          <CiaBadge
+                            c={pa.asset.confidentiality}
+                            i={pa.asset.integrity}
+                            a={pa.asset.availability}
+                          />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <div className="mx-5 rounded-xl border border-[#e6e2f3] bg-[#f2f0f9] p-4 text-[12.5px] text-[#5a4e86]">
+              <div className="grid gap-2 sm:grid-cols-4">
+                <div>
+                  <b>RTO</b>
+                  <div className="mt-0.5">{hours(detailProcess.bia?.rtoHours)}</div>
+                </div>
+                <div>
+                  <b>RPO</b>
+                  <div className="mt-0.5">{hours(detailProcess.bia?.rpoHours)}</div>
+                </div>
+                <div>
+                  <b>MTD</b>
+                  <div className="mt-0.5">{hours(detailProcess.bia?.mtdHours)}</div>
+                </div>
+                <div>
+                  <b>{t("impactShort")}</b>
+                  <div className="mt-1">
+                    {detailProcess.bia ? (
+                      <CiaBadge
+                        c={detailProcess.bia.impactC}
+                        i={detailProcess.bia.impactI}
+                        a={detailProcess.bia.impactA}
+                      />
+                    ) : (
+                      t("noBia")
+                    )}
+                  </div>
+                </div>
+              </div>
+              {detailProcess.bia?.notes && (
+                <p className="mt-3 border-t border-[#e6e2f3] pt-2.5">{detailProcess.bia.notes}</p>
+              )}
+            </div>
+
+            <div className="flex justify-end gap-2 p-5">
+              {canWrite && (
+                <Button
+                  variant="outline"
+                  nativeButton={false}
+                  render={<Link href={`/processes/${detailProcess.id}`} />}
+                >
+                  <Pencil className="size-4" /> {tc("edit")}
+                </Button>
+              )}
+              <Button nativeButton={false} render={<Link href="/processes" />}>
+                {t("close")}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
     </main>
   );
 }