Fixed dshboard render crash
This commit is contained in:
@@ -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>
|
||||
))
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user