+
+
{pct}%
+
+ {labelAr}
+ {label}
+
+
+
+
= 90 ? "bg-emerald-500" : pct >= 70 ? "bg-yellow-500" : "bg-red-500"}`} style={{ width: `${Math.min(100, pct)}%` }} />
+
+
+ الانحراف: {variance} {unit}
+ الفعلي: {actual.toLocaleString()} | الهدف: {target.toLocaleString()} {unit}
+
+
+ );
+}
+
+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 (
+
+
+
+
الفعلي مقابل التوقعات | Actual vs Forecast
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/salesflow-saas/frontend/src/components/dealix/approval-center.tsx b/salesflow-saas/frontend/src/components/dealix/approval-center.tsx
new file mode 100644
index 00000000..5fcc773c
--- /dev/null
+++ b/salesflow-saas/frontend/src/components/dealix/approval-center.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { useState } from "react";
+
+type Approval = {
+ id: string; channel: string; resource_type: string;
+ status: string; priority: string; category: string;
+ sla_deadline_at?: string; escalation_level: number;
+ note?: string; requested_by?: string; created_at?: string;
+};
+
+function SlaTimer({ deadline }: { deadline?: string }) {
+ if (!deadline) return
—;
+ const remaining = new Date(deadline).getTime() - Date.now();
+ const hours = Math.max(0, Math.floor(remaining / 3600000));
+ const color = hours <= 1 ? "text-red-500" : hours <= 4 ? "text-yellow-500" : "text-emerald-500";
+ return
{hours}h;
+}
+
+const PRIORITY_COLORS: Record
= {
+ critical: "bg-red-500/20 text-red-500",
+ high: "bg-orange-500/20 text-orange-500",
+ normal: "bg-blue-500/20 text-blue-500",
+ low: "bg-gray-500/20 text-gray-400",
+};
+
+export function ApprovalCenter({ approvals = [] }: { approvals?: Approval[] }) {
+ const [filter, setFilter] = useState("all");
+
+ const filtered = filter === "all" ? approvals : approvals.filter((a) => a.category === filter);
+ const categories = ["all", ...new Set(approvals.map((a) => a.category))];
+
+ const stats = {
+ pending: approvals.filter((a) => a.status === "pending").length,
+ warning: approvals.filter((a) => a.escalation_level === 1).length,
+ breach: approvals.filter((a) => a.escalation_level >= 2).length,
+ };
+
+ return (
+
+
مركز الموافقات | Approval Center
+
+ {/* Stats */}
+
+
+
معلقة
+
{stats.pending}
+
+
+
تحذير SLA
+
{stats.warning}
+
+
+
خرق SLA
+
{stats.breach}
+
+
+
+ {/* Filters */}
+
+ {categories.map((cat) => (
+
+ ))}
+
+
+ {/* Approval Queue */}
+
+ {filtered.length === 0 && (
+
لا توجد موافقات معلقة
+ )}
+ {filtered.map((approval) => (
+
+
+
+
+
+
+
+
+
+
+ {approval.priority}
+
+
+
{approval.resource_type}
+
{approval.channel} — {approval.category}
+
+
+
+ ))}
+
+
+
لوحة حوكمة الموصلات | Connector Governance Board
+
+
+ {connectors.map((conn) => {
+ const style = STATUS_STYLES[conn.status] || STATUS_STYLES.unknown;
+ return (
+
+
+
{style.labelAr}
+
+
{conn.display_name_ar}
+
{conn.display_name}
+
+
+
+ {conn.last_success_at && (
+
+ {new Date(conn.last_success_at).toLocaleDateString("ar-SA")}
+ آخر نجاح
+
+ )}
+ {conn.last_error && (
+
{conn.last_error}
+ )}
+ {!conn.registered && (
+
+
+
+ )}
+
+
+ );
+ })}
+ {connectors.length === 0 && (
+
لا توجد موصلات مسجلة
+ )}
+
+
+
عارض حزم الأدلة | Evidence Pack Viewer
+
+ {!selected ? (
+
+ {packs.length === 0 && (
+
لا توجد حزم أدلة بعد
+ )}
+ {packs.map((pack) => {
+ const typeInfo = TYPE_LABELS[pack.pack_type] || { en: pack.pack_type, ar: pack.pack_type };
+ return (
+
+ );
+ })}
+
+ ) : (
+
+
+
+
{selected.title_ar || selected.title}
+
{TYPE_LABELS[selected.pack_type]?.ar || selected.pack_type}
+ {selected.hash_signature && (
+
+ تم التحقق من السلامة — SHA256: {selected.hash_signature}
+
+ )}
+
+
+ {selected.contents.map((item, i) => (
+
+
+ {item.type} — {item.source}
+
+ {JSON.stringify(item.data, null, 2)}
+
+ ))}
+
+
+ )}
+
+
{labelAr}
+
{label}
+
{value}
+
جارٍ التحميل...
;
+
+ const s = snapshot || {
+ revenue: { actual: 0, forecast: 0, variance_percent: 0, pipeline_value: 0, win_rate: 0 },
+ approvals: { pending: 0, warning: 0, breach: 0 },
+ connectors: { healthy: 0, degraded: 0, error: 0 },
+ compliance: { compliant: 0, partial: 0, non_compliant: 0, posture: "unknown" },
+ contradictions: { active: 0, critical: 0 },
+ strategic_deals: { active: 0, pipeline_value: 0 },
+ evidence_packs: { ready: 0, pending_review: 0 },
+ };
+
+ return (
+
+
غرفة القيادة التنفيذية
+
Executive Room — نظرة شاملة على كل ما يحتاجه القائد التنفيذي
+
+ {/* Revenue */}
+
+ الإيرادات | Revenue
+
+
+
+
+
+
+
+
+ {/* Approvals & Compliance */}
+
+
+ الموافقات | Approvals
+
+ 10 ? "warning" : undefined} />
+ 0 ? "warning" : undefined} />
+ 0 ? "danger" : undefined} />
+
+
+
+
+ الامتثال | Compliance
+
+
+ 0 ? "warning" : undefined} />
+ 0 ? "danger" : undefined} />
+
+
+
+
+ {/* Connectors & Contradictions */}
+
+
+ الموصلات | Connectors
+
+
سليمة{s.connectors.healthy}
+
متراجعة{s.connectors.degraded}
+
معطلة{s.connectors.error}
+
+
+
+ التناقضات | Contradictions
+
+
نشطة{s.contradictions.active}
+
حرجة{s.contradictions.critical}
+
+
+
+ الصفقات الاستراتيجية | Strategic Deals
+
+
نشطة{s.strategic_deals.active}
+
قيمة الأنبوب{s.strategic_deals.pipeline_value.toLocaleString()} SAR
+
+
+
+
+
+ إجمالي الأنبوب: {totalValue.toLocaleString()} SAR
+
+
أنبوب الشراكات | Partner Pipeline
+
+
+
+ {STAGES.map((stage) => {
+ const stageDeals = byStage[stage.key] || [];
+ const stageValue = stageDeals.reduce((sum, d) => sum + d.estimated_value, 0);
+ return (
+
+
+
{stage.label}
+
{stage.en}
+
{stageDeals.length} صفقة — {stageValue.toLocaleString()} SAR
+
+ {stageDeals.map((deal) => (
+
+
{deal.company_name_ar || deal.company_name}
+
{deal.deal_type}
+
{deal.estimated_value.toLocaleString()} SAR
+
+ ))}
+
+ );
+ })}
+
+
+ {deals.length === 0 && (
+
لا توجد صفقات شراكات في الأنبوب
+ )}
+
+
لوحة مخالفات السياسات | Policy Violations Board
+
+ {/* Summary */}
+
+
+
الإجمالي
+
{violations.length}
+
+
+
نشطة
+
{active.length}
+
+
+
حرجة
+
{violations.filter((v) => v.severity === "critical" && (v.status === "detected" || v.status === "reviewing")).length}
+
+
+
محلولة
+
{resolved.length}
+
+
+
+ {/* Active Violations */}
+ {active.length > 0 && (
+
+ المخالفات النشطة
+
+ {active.map((v) => {
+ const style = SEVERITY_STYLES[v.severity] || SEVERITY_STYLES.medium;
+ return (
+
+
+
{STATUS_LABELS[v.status] || v.status}
+
+
+ {style.labelAr}
+ {v.source}
+
+
{v.description}
+
+
+
+ );
+ })}
+
+ )}
+
+ {violations.length === 0 && (
+
لا توجد مخالفات مسجلة
+ )}
+
— | ;
+ const opacity = count >= 5 ? "opacity-100" : count >= 3 ? "opacity-80" : "opacity-60";
+ return (
+
+
+ {count}
+
+ |
+ );
+}
+
+export function RiskHeatmap({ heatmap = {}, totalControls = 0 }: { heatmap?: HeatmapData; totalControls?: number }) {
+ const categories = Object.keys(heatmap);
+
+ return (
+
+
خريطة المخاطر الحرارية | Risk Heatmap
+
إجمالي الضوابط: {totalControls}
+
+ {categories.length === 0 ? (
+
لا توجد بيانات — قم بتشغيل فحص الامتثال أولاً
+ ) : (
+
+
+
+
+ | الفئة |
+ {RISK_LEVELS.map((level) => (
+ {RISK_LABELS[level]} |
+ ))}
+
+
+
+ {categories.map((cat) => (
+
+ | {CATEGORY_LABELS[cat] || cat} |
+ {RISK_LEVELS.map((level) => (
+
+ ))}
+
+ ))}
+
+
+
+ )}
+
+
لوحة الامتثال السعودي | Saudi Compliance Dashboard
+
+ {/* Posture Summary */}
+
+
+
إجمالي الضوابط
+
{total}
+
+
+
نسبة الامتثال
+
= 80 ? "text-emerald-500" : rate >= 50 ? "text-yellow-500" : "text-red-500"}`}>{rate}%
+
+
+
ممتثل
+
{compliant}/{total}
+
+
+
+ {/* Scan Button */}
+
+
+
+
+ {/* Controls by Category */}
+ {Object.entries(grouped).map(([category, catControls]) => (
+
+ {CATEGORY_LABELS[category] || category}
+ {catControls.map((control) => {
+ const style = STATUS_STYLES[control.status] || STATUS_STYLES.non_compliant;
+ const riskBorder = RISK_COLORS[control.risk_level] || "";
+ return (
+
+
+
{style.labelAr}
+
+ {control.control_id}
+ {control.control_name_ar || control.control_name}
+
+
+
+ ))}
+
+ {controls.length === 0 && (
+
لا توجد ضوابط مسجلة — قم بتشغيل الفحص أولاً
+ )}
+