From 7cad768f3d712d74215b68c8da1ba0b2b34a61bf Mon Sep 17 00:00:00 2001
From: G-ELM <alfygodwin@gmail.com>
Date: Fri, 26 Jun 2026 15:14:09 +0100
Subject: [PATCH 1/2] [Dashboard] Display Detailed KYC Rejection Reasons in
 Panel

---
 dashboard/src/components/KycStatusView.tsx | 109 ++++++++++++++++++---
 1 file changed, 98 insertions(+), 11 deletions(-)

diff --git a/dashboard/src/components/KycStatusView.tsx b/dashboard/src/components/KycStatusView.tsx
index 88d5e79c..0463cc2e 100644
--- a/dashboard/src/components/KycStatusView.tsx
+++ b/dashboard/src/components/KycStatusView.tsx
@@ -1,10 +1,61 @@
 import { useState } from 'react';
-import { ShieldCheck, XCircle, AlertTriangle, RefreshCw, Mail, CheckCircle2, Clock } from 'lucide-react';
+import { ShieldCheck, XCircle, AlertTriangle, RefreshCw, Mail, CheckCircle2, Clock, FileWarning, User, MapPin, Camera } from 'lucide-react';
 import type { UiConfig } from '../types';
 import { RequirementList } from './RequirementList';
 
 export type KycState = 'not_started' | 'pending' | 'approved' | 'rejected';
 
+type RejectionCategory = 'Document' | 'Identity' | 'Address' | 'Selfie';
+
+type KycRejectionReason = {
+  code: string;
+  category: RejectionCategory;
+  field: string;
+  description: string;
+  action: string;
+  severity: 'high' | 'medium';
+};
+
+const CATEGORY_ICON: Record<RejectionCategory, React.ReactNode> = {
+  Document: <FileWarning size={14} aria-hidden="true" />,
+  Identity: <User size={14} aria-hidden="true" />,
+  Address: <MapPin size={14} aria-hidden="true" />,
+  Selfie: <Camera size={14} aria-hidden="true" />,
+};
+
+const KYC_REJECTION_REASONS: KycRejectionReason[] = [
+  {
+    code: 'DOC_BLURRY',
+    category: 'Document',
+    field: 'Proof of Identity',
+    description:
+      'The submitted identity document appears blurry or unreadable. All text, including name and document number, must be clearly legible.',
+    action:
+      'Retake the photo in good lighting so that all four corners and all printed text are fully visible.',
+    severity: 'high',
+  },
+  {
+    code: 'SELFIE_MISMATCH',
+    category: 'Selfie',
+    field: 'Selfie Verification',
+    description:
+      'The selfie photo does not match the identity document photo with sufficient confidence.',
+    action:
+      'Submit a clear, well-lit selfie facing the camera directly without glasses, hats, or face coverings.',
+    severity: 'high',
+  },
+  {
+    code: 'ADDR_OUTDATED',
+    category: 'Address',
+    field: 'Proof of Address',
+    description:
+      'The provided proof of address is older than 90 days and cannot be accepted under current compliance rules.',
+    action:
+      'Provide a utility bill, bank statement, or official government letter dated within the last 90 days.',
+    severity: 'medium',
+  },
+];
+
 export const KycStatusView = ({ uiConfig }: { uiConfig: UiConfig }) => {
   // For demo/testing purposes, default to 'rejected' as per issue #343
   const [kycState, setKycState] = useState<KycState>('rejected');
@@ -105,19 +156,55 @@ export const KycStatusView = ({ uiConfig }: { uiConfig: UiConfig }) => {
             </div>
             <h3 className="text-3xl font-display font-bold text-slate-100">Verification Failed</h3>
             <p className="mt-4 text-slate-400 max-w-lg text-lg leading-relaxed">
-              We were unable to verify your identity with the provided information. This may happen if documents are unclear, expired, or details mismatch.
+              We were unable to verify your identity. Please review each issue below and resubmit with the corrected documents.
             </p>
 
-            <div className="mt-10 w-full max-w-lg text-left">
-              <div className="flex items-start gap-4 rounded-xl border border-rose-500/30 bg-rose-500/10 p-5 shadow-inner">
-                <AlertTriangle size={24} className="text-rose-400 shrink-0 mt-0.5" aria-hidden="true" />
-                <div>
-                  <h4 className="text-sm font-semibold text-rose-200 tracking-wide">Reason for Rejection</h4>
-                  <p className="mt-2 text-sm text-rose-200/80 leading-relaxed">
-                    The submitted proof of identity document appears to be blurry or unreadable. Please ensure all text is legible and all four corners of the document are visible before re-submitting.
-                  </p>
-                </div>
+            <div className="mt-8 w-full max-w-lg text-left space-y-3">
+              <div className="flex items-center gap-2 mb-2">
+                <AlertTriangle size={15} className="text-rose-400 shrink-0" aria-hidden="true" />
+                <h4 className="text-sm font-semibold text-slate-300 uppercase tracking-wider">
+                  Rejection Details &mdash; {KYC_REJECTION_REASONS.length} issue{KYC_REJECTION_REASONS.length !== 1 ? 's' : ''} found
+                </h4>
               </div>
+
+              {KYC_REJECTION_REASONS.map((reason) => (
+                <div
+                  key={reason.code}
+                  className="rounded-xl border border-rose-500/20 bg-rose-500/5 p-4"
+                  role="listitem"
+                >
+                  <div className="flex items-start gap-3">
+                    <div className="flex flex-col items-center gap-1.5 shrink-0 pt-0.5">
+                      <span
+                        className={`inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider ${
+                          reason.severity === 'high'
+                            ? 'bg-rose-500/25 text-rose-300'
+                            : 'bg-amber-500/20 text-amber-300'
+                        }`}
+                      >
+                        {reason.code}
+                      </span>
+                    </div>
+
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center justify-between gap-2 flex-wrap">
+                        <p className="text-sm font-semibold text-rose-200">{reason.field}</p>
+                        <span className="flex items-center gap-1 text-xs text-slate-500">
+                          {CATEGORY_ICON[reason.category]}
+                          {reason.category}
+                        </span>
+                      </div>
+                      <p className="mt-1.5 text-sm text-slate-400 leading-relaxed">
+                        {reason.description}
+                      </p>
+                      <p className="mt-2 text-xs text-slate-500 leading-relaxed flex items-start gap-1.5">
+                        <span className="text-primary font-semibold shrink-0">Fix:</span>
+                        {reason.action}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ))}
             </div>
 
             <div className="mt-10 flex flex-col sm:flex-row gap-4 w-full max-w-lg justify-center">

From 14f40a976a4c7d3fa210128ea87f44a50df17e18 Mon Sep 17 00:00:00 2001
From: G-ELM <alfygodwin@gmail.com>
Date: Fri, 26 Jun 2026 15:21:51 +0100
Subject: [PATCH 2/2] [Dashboard] Implement Interactive Charts for Transaction
 Volumes

---
 .../src/components/DashboardOverview.tsx      |   9 +-
 dashboard/src/components/VolumeChart.tsx      | 255 ++++++++++++++++++
 2 files changed, 258 insertions(+), 6 deletions(-)
 create mode 100644 dashboard/src/components/VolumeChart.tsx

diff --git a/dashboard/src/components/DashboardOverview.tsx b/dashboard/src/components/DashboardOverview.tsx
index 9cebd2ef..43a80681 100644
--- a/dashboard/src/components/DashboardOverview.tsx
+++ b/dashboard/src/components/DashboardOverview.tsx
@@ -1,4 +1,5 @@
 import { LogoMark } from './LogoMark';
+import { VolumeChart } from './VolumeChart';
 import type { UiConfig } from '../types';
 
 export const DashboardOverview = ({ uiConfig }: { uiConfig: UiConfig }) => (
@@ -25,12 +26,8 @@ export const DashboardOverview = ({ uiConfig }: { uiConfig: UiConfig }) => (
     </div>
 
     <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1.5fr_1fr]">
-      <div
-        className="glass-card flex h-64 items-center justify-center p-6"
-        role="img"
-        aria-label="Volume chart (placeholder)"
-      >
-        <p className="italic text-slate-500">Volume Chart Placeholder</p>
+      <div className="glass-card h-64 p-6">
+        <VolumeChart />
       </div>
       <div className="glass-card p-6">
         <h3 className="font-display text-xl font-bold">Anchor Branding</h3>
diff --git a/dashboard/src/components/VolumeChart.tsx b/dashboard/src/components/VolumeChart.tsx
new file mode 100644
index 00000000..5277cbab
--- /dev/null
+++ b/dashboard/src/components/VolumeChart.tsx
@@ -0,0 +1,255 @@
+import { useState } from 'react';
+
+type DataPoint = { label: string; deposits: number; withdrawals: number };
+type Period = '7D' | '1M' | '3M';
+
+const CHART_DATA: Record<Period, DataPoint[]> = {
+  '7D': [
+    { label: 'Mon', deposits: 12400, withdrawals: 8200 },
+    { label: 'Tue', deposits: 18600, withdrawals: 11300 },
+    { label: 'Wed', deposits: 9800, withdrawals: 14500 },
+    { label: 'Thu', deposits: 23100, withdrawals: 9700 },
+    { label: 'Fri', deposits: 16500, withdrawals: 19200 },
+    { label: 'Sat', deposits: 7300, withdrawals: 5100 },
+    { label: 'Sun', deposits: 5900, withdrawals: 4300 },
+  ],
+  '1M': [
+    { label: 'Wk 1', deposits: 54200, withdrawals: 38700 },
+    { label: 'Wk 2', deposits: 71800, withdrawals: 52300 },
+    { label: 'Wk 3', deposits: 48900, withdrawals: 61500 },
+    { label: 'Wk 4', deposits: 83100, withdrawals: 44800 },
+  ],
+  '3M': [
+    { label: 'Jan', deposits: 198400, withdrawals: 142600 },
+    { label: 'Feb', deposits: 223700, withdrawals: 178900 },
+    { label: 'Mar', deposits: 261500, withdrawals: 194300 },
+  ],
+};
+
+// SVG viewport dimensions
+const VW = 460;
+const VH = 150;
+const PL = 50; // left padding for Y-axis labels
+const PR = 8;  // right padding
+const PT = 10; // top padding
+const PB = 28; // bottom padding for X-axis labels
+const IW = VW - PL - PR;
+const IH = VH - PT - PB;
+
+const DEPOSIT_COLOR = '#6366f1';
+const WITHDRAWAL_COLOR = '#f59e0b';
+
+function niceMax(val: number): number {
+  if (val <= 0) return 10000;
+  const magnitude = Math.pow(10, Math.floor(Math.log10(val)));
+  return Math.ceil(val / magnitude) * magnitude;
+}
+
+function formatValue(v: number): string {
+  if (v >= 1_000_000) return `$${(v / 1_000_000).toFixed(1)}m`;
+  if (v >= 1_000) return `$${(v / 1_000).toFixed(0)}k`;
+  return `$${v}`;
+}
+
+type TooltipState = { index: number; point: DataPoint } | null;
+
+export const VolumeChart = () => {
+  const [period, setPeriod] = useState<Period>('7D');
+  const [hovered, setHovered] = useState<TooltipState>(null);
+
+  const data = CHART_DATA[period];
+  const maxVal = Math.max(...data.flatMap((d) => [d.deposits, d.withdrawals]));
+  const yMax = niceMax(maxVal);
+
+  const groupW = IW / data.length;
+  const barW = Math.min(groupW * 0.28, 18);
+
+  const scaleY = (v: number) => PT + IH - (v / yMax) * IH;
+  const yTicks = [0, 0.25, 0.5, 0.75, 1].map((f) => Math.round(yMax * f));
+
+  const renderTooltip = (index: number, point: DataPoint) => {
+    const gx = PL + index * groupW;
+    const centerX = gx + groupW / 2;
+    const TW = 88;
+    const TH = 54;
+    const tx = Math.max(PL, Math.min(centerX - TW / 2, VW - PR - TW));
+    const ty = PT + 2;
+
+    return (
+      <g aria-hidden="true">
+        <rect
+          x={tx} y={ty} width={TW} height={TH}
+          rx="5" ry="5"
+          fill="rgb(2,6,23)"
+          stroke="rgba(148,163,184,0.2)"
+          strokeWidth="1"
+        />
+        <text
+          x={tx + TW / 2} y={ty + 15}
+          textAnchor="middle"
+          fontSize="9.5"
+          fontWeight="600"
+          fill="rgb(226,232,240)"
+        >
+          {point.label}
+        </text>
+        <circle cx={tx + 11} cy={ty + 29} r="3.5" fill={DEPOSIT_COLOR} />
+        <text x={tx + 18} y={ty + 32.5} fontSize="9" fill="rgb(148,163,184)">
+          Dep: {formatValue(point.deposits)}
+        </text>
+        <circle cx={tx + 11} cy={ty + 44} r="3.5" fill={WITHDRAWAL_COLOR} />
+        <text x={tx + 18} y={ty + 47.5} fontSize="9" fill="rgb(148,163,184)">
+          Wit: {formatValue(point.withdrawals)}
+        </text>
+      </g>
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-start justify-between mb-3">
+        <div>
+          <h3 className="font-display text-xl font-bold text-slate-100">Transaction Volume</h3>
+          <p className="text-xs text-slate-500 mt-0.5">Deposits vs Withdrawals</p>
+        </div>
+        <div
+          className="flex gap-1 rounded-lg border border-slate-800 bg-slate-900/60 p-1"
+          role="group"
+          aria-label="Select time period"
+        >
+          {(['7D', '1M', '3M'] as Period[]).map((p) => (
+            <button
+              key={p}
+              onClick={() => { setPeriod(p); setHovered(null); }}
+              aria-pressed={period === p}
+              className={`px-2.5 py-1 text-xs font-medium rounded-md transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 ${
+                period === p
+                  ? 'bg-primary/20 text-primary border border-primary/30'
+                  : 'text-slate-400 hover:text-slate-200'
+              }`}
+            >
+              {p}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex gap-4 mb-2" aria-hidden="true">
+        <div className="flex items-center gap-1.5">
+          <span className="h-2.5 w-2.5 rounded-sm" style={{ backgroundColor: DEPOSIT_COLOR }} />
+          <span className="text-xs text-slate-400">Deposits</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <span className="h-2.5 w-2.5 rounded-sm" style={{ backgroundColor: WITHDRAWAL_COLOR }} />
+          <span className="text-xs text-slate-400">Withdrawals</span>
+        </div>
+      </div>
+
+      <div className="relative flex-1 min-h-0">
+        <svg
+          viewBox={`0 0 ${VW} ${VH}`}
+          className="w-full h-full"
+          aria-label={`Transaction volume chart — ${period} period`}
+          role="img"
+          onMouseLeave={() => setHovered(null)}
+        >
+          {/* Y-axis grid lines and labels */}
+          {yTicks.map((tick) => {
+            const y = scaleY(tick);
+            return (
+              <g key={tick}>
+                <line
+                  x1={PL} y1={y} x2={VW - PR} y2={y}
+                  stroke="rgba(148,163,184,0.1)"
+                  strokeWidth="1"
+                  strokeDasharray={tick === 0 ? undefined : '3,3'}
+                />
+                <text
+                  x={PL - 5} y={y + 3.5}
+                  textAnchor="end"
+                  fontSize="9"
+                  fill="rgb(100,116,139)"
+                >
+                  {formatValue(tick)}
+                </text>
+              </g>
+            );
+          })}
+
+          {/* Bars */}
+          {data.map((point, i) => {
+            const gx = PL + i * groupW;
+            const centerX = gx + groupW / 2;
+            const depX = centerX - barW - 1;
+            const witX = centerX + 1;
+
+            const depH = (point.deposits / yMax) * IH;
+            const witH = (point.withdrawals / yMax) * IH;
+            const depY = scaleY(point.deposits);
+            const witY = scaleY(point.withdrawals);
+
+            const isHov = hovered?.index === i;
+
+            return (
+              <g key={point.label}>
+                {/* Column hover highlight */}
+                {isHov && (
+                  <rect
+                    x={gx + 2} y={PT}
+                    width={groupW - 4} height={IH}
+                    fill="rgba(148,163,184,0.06)"
+                    rx="3" ry="3"
+                  />
+                )}
+
+                {/* Deposit bar */}
+                <rect
+                  x={depX} y={depY}
+                  width={barW} height={depH}
+                  rx="2" ry="2"
+                  fill={DEPOSIT_COLOR}
+                  opacity={isHov ? 1 : 0.75}
+                  style={{ transition: 'opacity 0.15s' }}
+                />
+
+                {/* Withdrawal bar */}
+                <rect
+                  x={witX} y={witY}
+                  width={barW} height={witH}
+                  rx="2" ry="2"
+                  fill={WITHDRAWAL_COLOR}
+                  opacity={isHov ? 1 : 0.75}
+                  style={{ transition: 'opacity 0.15s' }}
+                />
+
+                {/* X-axis label */}
+                <text
+                  x={centerX} y={VH - 8}
+                  textAnchor="middle"
+                  fontSize="9"
+                  fill="rgb(100,116,139)"
+                >
+                  {point.label}
+                </text>
+
+                {/* Invisible hover target covering the full column */}
+                <rect
+                  x={gx} y={PT}
+                  width={groupW} height={IH + PB - 6}
+                  fill="transparent"
+                  style={{ cursor: 'default' }}
+                  onMouseEnter={() => setHovered({ index: i, point })}
+                />
+              </g>
+            );
+          })}
+
+          {/* Tooltip */}
+          {hovered && renderTooltip(hovered.index, hovered.point)}
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+export default VolumeChart;