Files
certvia/src/app/(app)/assets/page.tsx
T
msolarczekandClaude Opus 4.8 db710c43cf Asset-Inventar verlinkt Lieferanten/IT-Services ins Fach-Cockpit
- Klick auf ein SUPPLIER-Asset öffnet /suppliers?detail=, ein IT_SERVICE-Asset
  /suppliers?tab=services&detail= statt der generischen Asset-Detailansicht
- Routing ist profil-abhängig: nur Assets mit SupplierProfile/ITServiceProfile
  gehen ins Cockpit; profillose Alt-Assets (z. B. "Cloud-Hoster (IaaS)") bleiben
  in der normalen Asset-Detailansicht (kein Null-Zugriff auf refNo)
- Direkte /assets?detail=/?edit=-Aufrufe solcher Assets werden serverseitig ins
  Cockpit umgeleitet, damit auch Links aus anderen Modulen dort landen

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-06 13:27:23 +02:00

287 lines
10 KiB
TypeScript

import Link from "next/link";
import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
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 { FilterTabs } from "@/components/filter-tabs";
import {
CiaBadge,
CiaLegend,
KpiCard,
OwnerChip,
PageHead,
Pill,
Tag,
} from "@/components/mockup-ui";
import {
AssetCreateModal,
AssetDetailModal,
AssetEditModal,
} from "@/components/asset-modals";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
const ASSET_TYPES = ["INFORMATION", "SYSTEM", "APPLICATION", "LOCATION", "SUPPLIER", "IT_SERVICE", "PERSON", "DATA"] as const;
const STATUS_TONE = { ACTIVE: "ok", PLANNED: "info", RETIRED: "mut" } as const;
/**
* Lieferanten- und IT-Service-Assets werden in ihrem Fach-Cockpit geöffnet
* (sofern ein Fachprofil existiert), alle übrigen Assets in der normalen
* Asset-Detailansicht.
*/
function assetDetailHref(asset: {
id: string;
type: AssetType;
supplierProfile: { id: string } | null;
serviceProfile: { id: string } | null;
}) {
if (asset.type === "SUPPLIER" && asset.supplierProfile) return `/suppliers?detail=${asset.id}`;
if (asset.type === "IT_SERVICE" && asset.serviceProfile) return `/suppliers?tab=services&detail=${asset.id}`;
return `/assets?detail=${asset.id}`;
}
export default async function AssetsPage({
searchParams,
}: {
searchParams: Promise<{ q?: string; type?: string; detail?: string; edit?: string; new?: string }>;
}) {
const session = await requireSession();
requirePermission(session, "asset:read");
const t = await getTranslations("assets");
const tType = await getTranslations("assetType");
const tStatus = await getTranslations("assetStatus");
const tc = await getTranslations("common");
const params = await searchParams;
const { q, type } = params;
const activeType = ASSET_TYPES.includes(type as AssetType) ? (type as AssetType) : null;
const db = dbForTenant(session.user.tenantId);
const [assets, allAssets] = await Promise.all([
db.asset.findMany({
where: {
...(q ? { name: { contains: q, mode: "insensitive" } } : {}),
...(activeType ? { type: activeType } : {}),
},
include: {
owner: { select: { name: true } },
supplierProfile: { select: { id: true } },
serviceProfile: { select: { id: 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");
// Popup-Zustand aus searchParams: ?detail= (read-only), ?edit=, ?new=1
const modalId = params.edit && canWrite ? params.edit : params.detail;
const modalAsset = modalId
? await db.asset.findUnique({
where: { id: modalId },
include: {
owner: { select: { name: true } },
supplierProfile: { select: { id: true } },
serviceProfile: { select: { id: true } },
relationsFrom: {
include: {
relatedAsset: {
select: {
id: true,
name: true,
type: true,
confidentiality: true,
integrity: true,
availability: true,
},
},
},
},
relationsTo: { include: { asset: { select: { id: true, name: true } } } },
processAssets: { include: { process: { select: { id: true, name: true } } } },
riskAssets: {
include: { risk: { select: { id: true, refNo: true, title: true, score: true } } },
orderBy: { risk: { score: "desc" } },
},
},
})
: null;
// Lieferanten/IT-Services im Fach-Cockpit öffnen, auch bei direktem Aufruf
// (nur wenn ein Fachprofil existiert; profillose Alt-Assets bleiben im Asset-Detail)
if (modalAsset && ((modalAsset.type === "SUPPLIER" && modalAsset.supplierProfile) || (modalAsset.type === "IT_SERVICE" && modalAsset.serviceProfile))) {
const base = modalAsset.type === "IT_SERVICE" ? "/suppliers?tab=services" : "/suppliers";
redirect(`${base}${base.includes("?") ? "&" : "?"}${params.edit && canWrite ? "edit" : "detail"}=${modalAsset.id}`);
}
const users =
canWrite && (params.edit || params.new)
? await db.user.findMany({
where: { status: "ACTIVE" },
select: { id: true, name: true },
orderBy: { name: "asc" },
})
: [];
const otherAssets =
canWrite && params.edit && modalAsset
? await db.asset.findMany({
where: { id: { not: modalAsset.id } },
select: { id: true, name: true },
orderBy: { name: "asc" },
})
: [];
const typeHref = (v: string | null) =>
`/assets${v ? `?type=${v}` : ""}${q ? `${v ? "&" : "?"}q=${encodeURIComponent(q)}` : ""}`;
return (
<main className="flex-1 p-6">
<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=1" />}>
<Plus className="size-4" /> {t("newAsset")}
</Button>
)}
</>
}
/>
<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="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>Asset</TableHead>
<TableHead>{t("type")}</TableHead>
<TableHead>{t("owner")}</TableHead>
<TableHead>
<span className="flex flex-col gap-1">
{t("protection")}
<CiaLegend />
</span>
</TableHead>
<TableHead>{t("dependencies")}</TableHead>
<TableHead>{t("status")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{assets.length === 0 && (
<TableRow>
<TableCell colSpan={6} className="py-8 text-center text-muted-foreground">
{t("empty")}
</TableCell>
</TableRow>
)}
{assets.map((asset) => (
<TableRow key={asset.id}>
<TableCell>
<Link href={assetDetailHref(asset)} className="font-bold hover:underline">
{asset.name}
</Link>
</TableCell>
<TableCell>
<Tag>{tType(asset.type)}</Tag>
</TableCell>
<TableCell>
<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.relationsFrom.length
? asset.relationsFrom.map((r) => r.relatedAsset.name).join(", ")
: tc("none")}
</TableCell>
<TableCell>
<Pill tone={STATUS_TONE[asset.status]}>{tStatus(asset.status)}</Pill>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{modalAsset && params.edit && canWrite ? (
<AssetEditModal asset={modalAsset} users={users} otherAssets={otherAssets} />
) : modalAsset ? (
<AssetDetailModal asset={modalAsset} canWrite={canWrite} />
) : params.new && canWrite ? (
<AssetCreateModal users={users} />
) : null}
</main>
);
}