Fixed dshboard render crash

This commit is contained in:
2026-10-26 09:34:15 +02:00
parent bb77a4dc9a
commit f56cb70b55
5 changed files with 56 additions and 61 deletions
@@ -58,42 +58,28 @@ export const GovernanceInfoModal: React.FC<GovernanceInfoModalProps> = ({
// 3. Fetch rules
const { data: governanceRules = [], isLoading: isLoadingRules } = useQuery<Rule[]>({
queryKey: ['governance-rules'],
queryFn: () => getRules(1, 100),
queryFn: () => getRules({ page: 1, pageSize: 100 }),
enabled: isOpen,
});
if (!isOpen || typeof document === 'undefined') return null;
const renderComplianceStatus = (status?: number) => {
switch (status) {
case ComplianceStatus.Compliant:
return (
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/15 text-emerald-300 border border-emerald-500/30">
<CheckCircle2 className="w-3 h-3 text-emerald-400" />
<span>Compliant</span>
</span>
);
case ComplianceStatus.UnderReview:
return (
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-amber-500/15 text-amber-300 border border-amber-500/30">
<Clock className="w-3 h-3 text-amber-400" />
<span>Under Review</span>
</span>
);
case ComplianceStatus.NonCompliant:
return (
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-500/15 text-rose-300 border border-rose-500/30">
<AlertTriangle className="w-3 h-3 text-rose-400" />
<span>Non-Compliant</span>
</span>
);
default:
return (
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-800 text-slate-300 border border-white/10">
<span>Pending Submission</span>
</span>
);
const s = Number(status);
if (s === ComplianceStatus.Met || s === ComplianceStatus.Exceeded) {
return (
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/15 text-emerald-300 border border-emerald-500/30">
<CheckCircle2 className="w-3 h-3 text-emerald-400" />
<span>{s === ComplianceStatus.Exceeded ? 'Exceeded' : 'Compliant'}</span>
</span>
);
}
return (
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-500/15 text-rose-300 border border-rose-500/30">
<AlertTriangle className="w-3 h-3 text-rose-400" />
<span>Action Required</span>
</span>
);
};
return createPortal(
@@ -201,20 +187,13 @@ export const GovernanceInfoModal: React.FC<GovernanceInfoModalProps> = ({
</span>
{renderComplianceStatus(item.status)}
</div>
{item.dueDate && (
<div className="text-[11px] text-slate-400 flex items-center gap-1 font-mono">
<div className="text-[11px] text-slate-400 flex items-center gap-1 font-mono">
<Calendar className="w-3.5 h-3.5 text-slate-500" />
<span>Due: {formatDate(item.dueDate)}</span>
<span>Created: {formatDate(item.createdAt)}</span>
</div>
)}
</div>
{item.description && (
<p className="text-xs text-slate-300 leading-relaxed">{item.description}</p>
)}
{item.notes && (
<div className="text-[11px] text-emerald-400/90 bg-emerald-950/40 border border-emerald-500/20 p-2.5 rounded-xl font-mono">
Note: {item.notes}
</div>
{item.requirements && (
<p className="text-xs text-slate-300 leading-relaxed">{item.requirements}</p>
)}
</div>
))
@@ -291,20 +270,13 @@ export const GovernanceInfoModal: React.FC<GovernanceInfoModalProps> = ({
<h4 className="font-semibold text-sm text-slate-100">
{rule.name || `Rule #${idx + 1}`}
</h4>
{rule.category && (
<span className="text-[10px] font-mono px-2 py-0.5 rounded-md bg-slate-800 text-slate-300 border border-white/10">
{rule.category}
</span>
)}
<span className="text-[10px] font-mono px-2 py-0.5 rounded-md bg-slate-800 text-slate-300 border border-white/10">
v{rule.version || 1}
</span>
</div>
{rule.description && (
<p className="text-xs text-slate-300 leading-relaxed">{rule.description}</p>
)}
{rule.condition && (
<div className="text-[11px] text-slate-400 bg-slate-900 border border-white/5 p-2 rounded-xl font-mono">
Condition: {rule.condition}
</div>
)}
</div>
))
)}