@kopexa/grc 0.0.2 → 0.0.4

package/src/common/risk/risk-rating-display.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useSafeIntl } from "@kopexa/i18n";
+import { Tooltip } from "@kopexa/sight";
+import { riskRating } from "@kopexa/theme";
+import { messages } from "./messages";
+import {
+	getRiskLevelFromRating,
+	isRatingUnrated,
+	type RiskLevel,
+	type RiskRating,
+} from "./types";
+
+export interface RiskRatingDisplayProps {
+	/** The risk rating to display */
+	rating: RiskRating | null | undefined;
+	/** Show the rating value badge */
+	showBadge?: boolean;
+	/** Show the level label text */
+	showLabel?: boolean;
+	/** Size variant */
+	size?: "sm" | "md";
+}
+
+/**
+ * Display component for risk ratings.
+ * Shows a colored badge with the rating value and level label.
+ * Handles "not rated" state gracefully.
+ */
+export function RiskRatingDisplay({
+	rating,
+	showBadge = true,
+	showLabel = true,
+	size = "md",
+}: RiskRatingDisplayProps) {
+	const intl = useSafeIntl();
+
+	// Handle unrated state
+	if (isRatingUnrated(rating)) {
+		const styles = riskRating({ size, level: "unrated" });
+		const levelLabel = intl.formatMessage(messages.level_unrated);
+
+		return (
+			<Tooltip content={intl.formatMessage(messages.not_rated_hint)}>
+				<div className={styles.base()}>
+					{showBadge && <div className={styles.badge()}>—</div>}
+					{showLabel && <span className={styles.label()}>{levelLabel}</span>}
+				</div>
+			</Tooltip>
+		);
+	}
+
+	// At this point, rating is guaranteed to be non-null with valid values
+	const ratedValue = rating as RiskRating;
+	const level = getRiskLevelFromRating(ratedValue.rating);
+	const styles = riskRating({
+		size,
+		level: level as Exclude<RiskLevel, "unrated">,
+	});
+	const levelLabelKey = `level_${level}` as keyof typeof messages;
+	const levelLabel = intl.formatMessage(messages[levelLabelKey]);
+
+	return (
+		<Tooltip
+			content={
+				<div className="text-xs space-y-1">
+					<div>
+						{intl.formatMessage(messages.likelihood)}: {ratedValue.likelihood}/5
+					</div>
+					<div>
+						{intl.formatMessage(messages.consequence)}: {ratedValue.consequence}
+						/5
+					</div>
+					{ratedValue.comment && (
+						<div className="text-muted-foreground">{ratedValue.comment}</div>
+					)}
+				</div>
+			}
+		>
+			<div className={styles.base()}>
+				{showBadge && <div className={styles.badge()}>{ratedValue.rating}</div>}
+				{showLabel && <span className={styles.label()}>{levelLabel}</span>}
+			</div>
+		</Tooltip>
+	);
+}

package/src/common/risk/types.ts

@@ -0,0 +1,91 @@
+/**
+ * RiskRating represents the risk assessment details.
+ * Aligned with backend Go struct.
+ */
+export interface RiskRating {
+	/** Likelihood of the risk occurring (1-5). 0 = not rated. */
+	likelihood: number;
+	/** Consequence/impact if the risk occurs (1-5). 0 = not rated. */
+	consequence: number;
+	/** Calculated rating: likelihood × consequence (0-25). 0 = not rated. */
+	rating: number;
+	/** Optional comment for context */
+	comment?: string;
+}
+
+export type RiskLevel = "unrated" | "low" | "medium" | "high" | "critical";
+
+/**
+ * Get risk level from rating (0-25).
+ * - 0: Unrated
+ * - 1-4: Low
+ * - 5-9: Medium
+ * - 10-16: High
+ * - 17-25: Critical
+ */
+export function getRiskLevelFromRating(rating: number): RiskLevel {
+	if (rating === 0) return "unrated";
+	if (rating <= 4) return "low";
+	if (rating <= 9) return "medium";
+	if (rating <= 16) return "high";
+	return "critical";
+}
+
+/**
+ * Check if a rating is considered "not rated"
+ */
+export function isRatingUnrated(
+	rating: RiskRating | null | undefined,
+): boolean {
+	if (!rating) return true;
+	return (
+		rating.rating === 0 || rating.likelihood === 0 || rating.consequence === 0
+	);
+}
+
+export const riskLevelConfig: Record<
+	RiskLevel,
+	{
+		label: string;
+		bgColor: string;
+		textColor: string;
+		iconBgColor: string;
+		iconTextColor: string;
+	}
+> = {
+	unrated: {
+		label: "Nicht bewertet",
+		bgColor: "bg-muted",
+		textColor: "text-muted-foreground",
+		iconBgColor: "bg-muted/50",
+		iconTextColor: "text-muted-foreground",
+	},
+	low: {
+		label: "Niedrig",
+		bgColor: "bg-success",
+		textColor: "text-success",
+		iconBgColor: "bg-success/10",
+		iconTextColor: "text-success",
+	},
+	medium: {
+		label: "Mittel",
+		bgColor: "bg-warning",
+		textColor: "text-warning",
+		iconBgColor: "bg-warning/10",
+		iconTextColor: "text-warning",
+	},
+	high: {
+		label: "Hoch",
+		bgColor: "bg-orange-500",
+		textColor: "text-orange-500",
+		iconBgColor: "bg-orange-500/10",
+		iconTextColor: "text-orange-500",
+	},
+	critical: {
+		label: "Kritisch",
+		bgColor: "bg-destructive",
+		textColor: "text-destructive",
+		iconBgColor: "bg-destructive/10",
+		iconTextColor: "text-destructive",
+	},
+};