128 lines
4.2 KiB
TypeScript
128 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import { taxonomy } from '@/lib/taxonomy/data';
|
|
|
|
const LAYER_COLORS = {
|
|
conditions: {
|
|
bg: 'bg-yellow-500/10',
|
|
border: 'border-yellow-500/30',
|
|
text: 'text-yellow-400',
|
|
badge: 'bg-yellow-500/20 text-yellow-300',
|
|
},
|
|
management: {
|
|
bg: 'bg-blue-500/10',
|
|
border: 'border-blue-500/30',
|
|
text: 'text-blue-400',
|
|
badge: 'bg-blue-500/20 text-blue-300',
|
|
},
|
|
systemic: {
|
|
bg: 'bg-purple-500/10',
|
|
border: 'border-purple-500/30',
|
|
text: 'text-purple-400',
|
|
badge: 'bg-purple-500/20 text-purple-300',
|
|
},
|
|
};
|
|
|
|
const LAYER_TITLES = {
|
|
conditions: 'Conditions',
|
|
management: 'Management',
|
|
systemic: 'Systemic',
|
|
};
|
|
|
|
const LAYER_DESCRIPTIONS = {
|
|
conditions: 'What allowed the experience to happen?',
|
|
management: 'What decisions allowed enabling conditions?',
|
|
systemic: 'Why does the organization create these conditions?',
|
|
};
|
|
|
|
export default function CausalCodesSection() {
|
|
const layers = ['conditions', 'management', 'systemic'] as const;
|
|
|
|
return (
|
|
<div className="p-6 space-y-6">
|
|
{/* Header */}
|
|
<div>
|
|
<h2 className="text-xl font-bold text-gray-100">Causal Codes</h2>
|
|
<p className="text-gray-400 mt-1">
|
|
Three-layer root cause analysis framework with 16 codes
|
|
</p>
|
|
</div>
|
|
|
|
{/* Three layers visualization */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
|
{layers.map((layerKey) => {
|
|
const layer = taxonomy.causal_codes[layerKey];
|
|
const colors = LAYER_COLORS[layerKey];
|
|
const codeCount = Object.keys(layer.codes).length;
|
|
|
|
return (
|
|
<div
|
|
key={layerKey}
|
|
className={`rounded-lg border ${colors.border} ${colors.bg} p-4`}
|
|
>
|
|
{/* Layer Header */}
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className={`font-semibold ${colors.text}`}>
|
|
{LAYER_TITLES[layerKey]}
|
|
</h3>
|
|
<span className={`text-xs px-2 py-0.5 rounded ${colors.badge}`}>
|
|
{layer.prefix}* ({codeCount})
|
|
</span>
|
|
</div>
|
|
|
|
<p className="text-sm text-gray-400 mb-4">
|
|
{LAYER_DESCRIPTIONS[layerKey]}
|
|
</p>
|
|
|
|
{/* Codes list */}
|
|
<div className="space-y-2">
|
|
{Object.entries(layer.codes).map(([codeKey, code]) => (
|
|
<div
|
|
key={codeKey}
|
|
className="p-2 bg-gray-800/50 rounded border border-gray-700/50"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span className={`font-mono text-sm ${colors.text}`}>
|
|
{codeKey}
|
|
</span>
|
|
<span className="text-sm text-gray-300">{code.name}</span>
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-1">{code.definition}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Flow Indicator */}
|
|
<div className="flex items-center justify-center gap-4 py-4">
|
|
<div className="flex items-center gap-2 text-sm text-gray-400">
|
|
<span className="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded">
|
|
Conditions
|
|
</span>
|
|
<span className="text-gray-600">→</span>
|
|
<span className="px-3 py-1 bg-blue-500/20 text-blue-400 rounded">
|
|
Management
|
|
</span>
|
|
<span className="text-gray-600">→</span>
|
|
<span className="px-3 py-1 bg-purple-500/20 text-purple-400 rounded">
|
|
Systemic
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Usage note */}
|
|
<div className="bg-gray-800/50 border border-gray-700 rounded-lg p-4">
|
|
<h4 className="font-semibold text-gray-200 mb-2">Usage</h4>
|
|
<p className="text-sm text-gray-400">
|
|
Causal codes are used for root cause analysis in URT-Full profile. Start with
|
|
Conditions (immediate factors), trace to Management (decisions that enabled conditions),
|
|
and finally to Systemic (organizational factors that created the management decisions).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|