Initial commit - WhyRating Engine (Google Reviews Scraper)

2026-02-02 18:19:00 +00:00
parent 0543a08242
commit 2206ddeff2
136 changed files with 51138 additions and 855 deletions
--- a/web/components/taxonomy/CausalCodesSection.tsx
+++ b/web/components/taxonomy/CausalCodesSection.tsx
@@ -0,0 +1,127 @@
+'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>
+  );
+}