@kopexa/grc 0.0.4 → 0.0.6

package/src/risk/risk-treatment-card.tsx

@@ -0,0 +1,339 @@
+"use client";
+
+import { useSafeIntl } from "@kopexa/i18n";
+import { CheckCirleIcon, EditIcon } from "@kopexa/icons";
+import {
+	Button,
+	Card,
+	Chip,
+	Heading,
+	Separator,
+	Textarea,
+} from "@kopexa/sight";
+import { useState } from "react";
+import { messages } from "./messages";
+import type { RiskTreatment, RiskTreatmentValue } from "./types";
+
+// ============================================
+// Types
+// ============================================
+
+export interface RiskTreatmentCardProps {
+	/** The current treatment value */
+	value?: RiskTreatmentValue;
+	/** Callback when the treatment changes */
+	onChange?: (value: RiskTreatmentValue) => void;
+	/** Make the component read-only */
+	readOnly?: boolean;
+	/** Custom title for the card */
+	title?: string;
+	/** Recommended treatment based on risk level */
+	recommended?: RiskTreatment;
+}
+
+// ============================================
+// Treatment Option Component
+// ============================================
+
+interface TreatmentOptionProps {
+	id: RiskTreatment;
+	label: string;
+	description: string;
+	hint?: string;
+	isSelected: boolean;
+	isRecommended: boolean;
+	recommendedLabel: string;
+	onSelect: (id: RiskTreatment) => void;
+}
+
+function TreatmentOption({
+	id,
+	label,
+	description,
+	hint,
+	isSelected,
+	isRecommended,
+	recommendedLabel,
+	onSelect,
+}: TreatmentOptionProps) {
+	return (
+		<button
+			type="button"
+			onClick={() => onSelect(id)}
+			className={`
+				w-full text-left p-4 rounded-lg border-2 transition-all
+				${
+					isSelected
+						? "border-primary bg-primary/5"
+						: "border-border hover:border-primary/50 hover:bg-muted/50"
+				}
+			`}
+		>
+			<div className="flex items-start gap-3">
+				{/* Radio indicator */}
+				<div
+					className={`
+						mt-0.5 size-5 rounded-full border-2 flex items-center justify-center flex-shrink-0
+						${isSelected ? "border-primary bg-primary" : "border-muted-foreground"}
+					`}
+				>
+					{isSelected && (
+						<div className="size-2 rounded-full bg-primary-foreground" />
+					)}
+				</div>
+
+				{/* Content */}
+				<div className="flex-1 min-w-0">
+					<div className="flex items-center gap-2 flex-wrap">
+						<span className="font-medium">{label}</span>
+						{isRecommended && (
+							<Chip size="sm" color="success" variant="flat">
+								{recommendedLabel}
+							</Chip>
+						)}
+					</div>
+					<p className="text-sm text-muted-foreground mt-1">{description}</p>
+					{hint && (
+						<p className="text-xs text-muted-foreground mt-2 flex items-center gap-1">
+							<span className="text-primary">→</span>
+							{hint}
+						</p>
+					)}
+				</div>
+			</div>
+		</button>
+	);
+}
+
+// ============================================
+// Main Component
+// ============================================
+
+const defaultValue: RiskTreatmentValue = {
+	treatment: "not_defined",
+	rationale: undefined,
+};
+
+export function RiskTreatmentCard({
+	value,
+	onChange,
+	readOnly = false,
+	title,
+	recommended,
+}: RiskTreatmentCardProps) {
+	const intl = useSafeIntl();
+	const [isEditing, setIsEditing] = useState(false);
+	const [editValues, setEditValues] = useState<RiskTreatmentValue>(
+		value || defaultValue,
+	);
+
+	// i18n labels
+	const t = {
+		title: intl.formatMessage(messages.title),
+		strategyLabel: intl.formatMessage(messages.strategy_label),
+		strategyPrompt: intl.formatMessage(messages.strategy_prompt),
+		rationaleLabel: intl.formatMessage(messages.rationale_label),
+		rationalePlaceholder: intl.formatMessage(messages.rationale_placeholder),
+		noRationale: intl.formatMessage(messages.no_rationale),
+		edit: intl.formatMessage(messages.edit),
+		cancel: intl.formatMessage(messages.cancel),
+		save: intl.formatMessage(messages.save),
+		recommended: intl.formatMessage(messages.recommended),
+		// Treatment labels
+		acceptLabel: intl.formatMessage(messages.accept_label),
+		mitigateLabel: intl.formatMessage(messages.mitigate_label),
+		transferLabel: intl.formatMessage(messages.transfer_label),
+		avoidLabel: intl.formatMessage(messages.avoid_label),
+		notDefinedLabel: intl.formatMessage(messages.not_defined_label),
+		// Treatment descriptions
+		acceptDescription: intl.formatMessage(messages.accept_description),
+		mitigateDescription: intl.formatMessage(messages.mitigate_description),
+		transferDescription: intl.formatMessage(messages.transfer_description),
+		avoidDescription: intl.formatMessage(messages.avoid_description),
+		// Treatment hints
+		acceptHint: intl.formatMessage(messages.accept_hint),
+		mitigateHint: intl.formatMessage(messages.mitigate_hint),
+		transferHint: intl.formatMessage(messages.transfer_hint),
+		avoidHint: intl.formatMessage(messages.avoid_hint),
+	};
+
+	const treatmentLabels: Record<RiskTreatment, string> = {
+		accept: t.acceptLabel,
+		mitigate: t.mitigateLabel,
+		transfer: t.transferLabel,
+		avoid: t.avoidLabel,
+		not_defined: t.notDefinedLabel,
+	};
+
+	const treatmentOptions: Array<{
+		id: RiskTreatment;
+		label: string;
+		description: string;
+		hint: string;
+	}> = [
+		{
+			id: "accept",
+			label: t.acceptLabel,
+			description: t.acceptDescription,
+			hint: t.acceptHint,
+		},
+		{
+			id: "mitigate",
+			label: t.mitigateLabel,
+			description: t.mitigateDescription,
+			hint: t.mitigateHint,
+		},
+		{
+			id: "transfer",
+			label: t.transferLabel,
+			description: t.transferDescription,
+			hint: t.transferHint,
+		},
+		{
+			id: "avoid",
+			label: t.avoidLabel,
+			description: t.avoidDescription,
+			hint: t.avoidHint,
+		},
+	];
+
+	const cardTitle = title ?? t.title;
+	const currentValue = isEditing ? editValues : value || defaultValue;
+	const isNotDefined = currentValue.treatment === "not_defined";
+
+	const handleSave = () => {
+		onChange?.(editValues);
+		setIsEditing(false);
+	};
+
+	const handleCancel = () => {
+		setEditValues(value || defaultValue);
+		setIsEditing(false);
+	};
+
+	const handleStartEdit = () => {
+		setEditValues(value || defaultValue);
+		setIsEditing(true);
+	};
+
+	const handleTreatmentSelect = (treatment: RiskTreatment) => {
+		setEditValues((prev) => ({ ...prev, treatment }));
+	};
+
+	const handleRationaleChange = (rationale: string) => {
+		setEditValues((prev) => ({ ...prev, rationale: rationale || undefined }));
+	};
+
+	return (
+		<Card.Root variant="accent">
+			<Card.Header className="flex flex-row items-center justify-between">
+				<div className="flex items-center gap-2">
+					<Heading level="h3" className="text-base">
+						{cardTitle}
+					</Heading>
+					{isEditing && (
+						<Chip size="sm" color="primary">
+							{t.edit}
+						</Chip>
+					)}
+				</div>
+				{!readOnly &&
+					(!isEditing ? (
+						<Button
+							variant="ghost"
+							size="sm"
+							isIconOnly
+							onClick={handleStartEdit}
+							aria-label={t.edit}
+						>
+							<EditIcon className="size-4" />
+						</Button>
+					) : (
+						<div className="flex items-center gap-2">
+							<Button variant="ghost" size="sm" onClick={handleCancel}>
+								{t.cancel}
+							</Button>
+							<Button size="sm" onClick={handleSave}>
+								{t.save}
+							</Button>
+						</div>
+					))}
+			</Card.Header>
+
+			<Card.Body className="space-y-4">
+				{isEditing ? (
+					<>
+						{/* Edit Mode: Treatment Selection */}
+						<div className="space-y-3">
+							<p className="text-sm text-muted-foreground">
+								{t.strategyPrompt}
+							</p>
+							<div className="grid gap-3">
+								{treatmentOptions.map((option) => (
+									<TreatmentOption
+										key={option.id}
+										id={option.id}
+										label={option.label}
+										description={option.description}
+										hint={option.hint}
+										isSelected={editValues.treatment === option.id}
+										isRecommended={recommended === option.id}
+										recommendedLabel={t.recommended}
+										onSelect={handleTreatmentSelect}
+									/>
+								))}
+							</div>
+						</div>
+
+						<Separator />
+
+						{/* Edit Mode: Rationale */}
+						<div className="space-y-2">
+							<label
+								htmlFor="treatment-rationale"
+								className="text-sm font-medium"
+							>
+								{t.rationaleLabel}
+							</label>
+							<Textarea
+								id="treatment-rationale"
+								value={editValues.rationale || ""}
+								onChange={(e) => handleRationaleChange(e.target.value)}
+								placeholder={t.rationalePlaceholder}
+								rows={3}
+								className="text-sm"
+							/>
+						</div>
+					</>
+				) : (
+					<>
+						{/* View Mode: Selected Strategy */}
+						<div>
+							<p className="text-sm font-medium mb-1">{t.strategyLabel}</p>
+							<div className="flex items-center gap-2">
+								{!isNotDefined && (
+									<CheckCirleIcon className="size-4 text-success" />
+								)}
+								<p
+									className={`text-sm ${isNotDefined ? "text-muted-foreground" : ""}`}
+								>
+									{treatmentLabels[currentValue.treatment]}
+								</p>
+							</div>
+						</div>
+
+						<Separator />
+
+						{/* View Mode: Rationale */}
+						<div>
+							<p className="text-sm font-medium mb-1">{t.rationaleLabel}</p>
+							<p className="text-sm text-muted-foreground">
+								{currentValue.rationale || t.noRationale}
+							</p>
+						</div>
+					</>
+				)}
+			</Card.Body>
+		</Card.Root>
+	);
+}

package/src/risk/types.ts

@@ -0,0 +1,24 @@
+// ============================================
+// Risk Treatment Types
+// ============================================
+
+export type RiskTreatment =
+	| "accept"
+	| "mitigate"
+	| "transfer"
+	| "avoid"
+	| "not_defined";
+
+export interface RiskTreatmentValue {
+	/** The selected treatment strategy */
+	treatment: RiskTreatment;
+	/** Human-readable explanation for the chosen strategy */
+	rationale?: string;
+}
+
+export interface TreatmentOption {
+	id: RiskTreatment;
+	label: string;
+	description: string;
+	hint?: string;
+}