system-prompts-and-models-o.../salesflow-saas/frontend/src/components/dealix/actual-vs-forecast-dashboard.tsx
Claude a319feb6d7
feat(dealix): complete Tier-1 Sovereign Enterprise Growth OS
Governance layer (14 docs):
- MASTER_OPERATING_PROMPT.md — operating constitution (five planes, six tracks, policy classes)
- docs/ai-operating-model.md — five-plane architecture (Decision/Execution/Trust/Data/Operating)
- docs/dealix-six-tracks.md — six strategic tracks (Revenue/Intelligence/Compliance/Expansion/Operations/Trust)
- docs/governance/execution-fabric.md — OpenClaw execution plane deep dive
- docs/governance/trust-fabric.md — trust plane with contradiction engine + evidence packs
- docs/governance/saudi-compliance-and-ai-governance.md — PDPL/ZATCA/SDAIA/NCA live controls
- docs/governance/technology-radar-tier1.md — Core/Strong/Pilot/Watch/Hold classification
- docs/governance/partnership-os.md — alliance lifecycle management
- docs/governance/ma-os.md — M&A corporate development lifecycle
- docs/governance/expansion-os.md — geographic and vertical growth
- docs/governance/pmi-os.md — post-merger integration framework
- docs/governance/executive-board-os.md — executive decision surfaces
- docs/execution-matrix-90d-tier1.md — 90-day sprint execution plan
- docs/adr/0001-tier1-execution-policy-spikes.md — 8 architectural decisions

Backend (3 models, 6 services, 8 API routes):
- Contradiction Engine — detect/track system conflicts
- Evidence Pack System — tamper-evident audit proof with SHA256
- Saudi Compliance Matrix — live PDPL/ZATCA/SDAIA/NCA controls
- Executive Room — unified executive decision surface
- Connector Governance — integration health monitoring
- Model Routing Dashboard — LLM provider metrics
- Forecast Control Center — actual vs forecast across tracks
- Approval Center — enhanced approval queue with SLA

Frontend (9 components):
- Executive Room, Evidence Pack Viewer, Approval Center
- Connector Governance Board, Saudi Compliance Dashboard
- Actual vs Forecast Dashboard, Risk Heatmap
- Policy Violations Board, Partner Pipeline Board

Tooling:
- scripts/architecture_brief.py — preflight validation (40/40 checks pass)
- Updated CLAUDE.md and AGENTS.md with governance references

https://claude.ai/code/session_01W1rJthWDkasijTdXCfxVHs
2026-04-16 12:48:13 +00:00

64 lines
3.3 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use client";
type TrackForecast = {
actual: number; forecast: number; variance: number;
variance_percent?: number; unit: string;
};
type UnifiedForecast = {
revenue: TrackForecast;
partnerships: { actual_count: number; target_count: number; variance: number; unit: string };
ma: { deals_in_progress: number; pipeline_target: number; variance: number; unit: string };
expansion: { markets_launched: number; markets_planned: number; variance: number; unit: string };
};
function TrackRow({ label, labelAr, actual, target, variance, unit }: {
label: string; labelAr: string; actual: number; target: number; variance: number; unit: string;
}) {
const pct = target > 0 ? Math.round((actual / target) * 100) : 0;
const color = pct >= 90 ? "text-emerald-500" : pct >= 70 ? "text-yellow-500" : "text-red-500";
return (
<div className="glass-card p-4 border border-border/40">
<div className="flex justify-between items-center mb-2">
<span className={`text-lg font-bold ${color}`}>{pct}%</span>
<div className="text-right">
<span className="font-semibold">{labelAr}</span>
<span className="text-xs text-muted-foreground block">{label}</span>
</div>
</div>
<div className="w-full bg-border/20 rounded-full h-2 mb-2">
<div className={`h-2 rounded-full ${pct >= 90 ? "bg-emerald-500" : pct >= 70 ? "bg-yellow-500" : "bg-red-500"}`} style={{ width: `${Math.min(100, pct)}%` }} />
</div>
<div className="flex justify-between text-xs text-muted-foreground">
<span>الانحراف: {variance} {unit}</span>
<span>الفعلي: {actual.toLocaleString()} | الهدف: {target.toLocaleString()} {unit}</span>
</div>
</div>
);
}
export function ActualVsForecastDashboard({ data }: { data?: UnifiedForecast }) {
const d = data || {
revenue: { actual: 0, forecast: 0, variance: 0, variance_percent: 0, unit: "SAR" },
partnerships: { actual_count: 0, target_count: 0, variance: 0, unit: "partners" },
ma: { deals_in_progress: 0, pipeline_target: 0, variance: 0, unit: "deals" },
expansion: { markets_launched: 0, markets_planned: 0, variance: 0, unit: "markets" },
};
return (
<div className="space-y-4 p-6" dir="rtl">
<div className="flex justify-between items-center">
<button className="text-xs px-3 py-1 rounded border border-border/40 hover:border-primary/40">إعادة المعايرة</button>
<h2 className="text-xl font-bold text-right">الفعلي مقابل التوقعات | Actual vs Forecast</h2>
</div>
<div className="space-y-3">
<TrackRow label="Revenue" labelAr="الإيرادات" actual={d.revenue.actual} target={d.revenue.forecast} variance={d.revenue.variance} unit={d.revenue.unit} />
<TrackRow label="Partnerships" labelAr="الشراكات" actual={d.partnerships.actual_count} target={d.partnerships.target_count} variance={d.partnerships.variance} unit={d.partnerships.unit} />
<TrackRow label="M&A Deals" labelAr="صفقات الاستحواذ" actual={d.ma.deals_in_progress} target={d.ma.pipeline_target} variance={d.ma.variance} unit={d.ma.unit} />
<TrackRow label="Expansion" labelAr="التوسع" actual={d.expansion.markets_launched} target={d.expansion.markets_planned} variance={d.expansion.variance} unit={d.expansion.unit} />
</div>
</div>
);
}