Fixed dshboard render crash

2026-10-26 09:34:15 +02:00
parent bb77a4dc9a
commit f56cb70b55
5 changed files with 56 additions and 61 deletions
@@ -63,6 +63,7 @@ import {
  EvidenceType,
  Notification,
  NotificationStatus,
+  NotificationPlatform,
 } from '../../types';
 import { formatZAR, formatCompactZAR, getUserEmail } from '../../lib/formatters';
 import { MessageViewer } from '../notifications/MessageViewer';
@@ -462,7 +463,7 @@ export function DashboardPage() {
  };

  const getMessageRecipientEmail = (notification: Notification | null): string => {
-    if (!notification) return user?.profile?.email || (user as any)?.email || 'Partner User';
+    if (!notification) return (user?.email || (user as any)?.profile?.email || '') || (user as any)?.email || 'Partner User';
    const dest = notification.destination || '';
    let rawTo = '';
    if (dest.includes('To:')) {
@@ -486,13 +487,13 @@ export function DashboardPage() {
      }
    }

-    return user?.profile?.email || (user as any)?.email || 'Partner User';
+    return (user?.email || (user as any)?.profile?.email || '') || (user as any)?.email || 'Partner User';
  };

  const handleReplyToMessage = (notification: Notification) => {
    const senderEmail = getMessageSenderEmail(notification).trim().toLowerCase();
    const currentUserEmail = (
-      user?.profile?.email ||
+      (user?.email || (user as any)?.profile?.email || '') ||
      (user as any)?.email ||
      ''
    ).trim().toLowerCase();
@@ -746,7 +747,7 @@ export function DashboardPage() {
                          className="p-3 hover:bg-white/[0.03] transition-colors cursor-pointer text-left"
                        >
                          <p className="text-xs font-semibold text-slate-100 truncate">{item.subject}</p>
-                          <p className="text-[11px] text-slate-400 line-clamp-2 mt-0.5">{stripMarkdown(item.message)}</p>
+                          <p className="text-[11px] text-slate-400 line-clamp-2 mt-0.5">{stripMarkdown(item.message || '')}</p>
                        </div>
                      ))
                    )}
@@ -778,10 +779,10 @@ export function DashboardPage() {
                className="flex items-center gap-2 p-1.5 pl-2 rounded-xl bg-slate-900/80 border border-white/[0.06] hover:border-white/[0.12] transition-colors cursor-pointer"
              >
                <div className="w-6 h-6 rounded-lg bg-gradient-to-tr from-emerald-600 via-teal-600 to-cyan-600 flex items-center justify-center text-white text-[11px] font-bold">
-                  {getInitials(user?.profile?.name || user?.profile?.email || 'Partner')}
+                  {getInitials((user?.name || (user as any)?.profile?.name || '') || (user?.email || (user as any)?.profile?.email || '') || 'Partner')}
                </div>
                <span className="text-xs font-medium text-slate-100 hidden md:inline max-w-[120px] truncate">
-                  {user?.profile?.name || 'Partner Account'}
+                  {(user?.name || (user as any)?.profile?.name || '') || 'Partner Account'}
                </span>
                <ChevronDown className="w-3.5 h-3.5 text-slate-400" />
              </button>
@@ -789,8 +790,8 @@ export function DashboardPage() {
              {showUserDropdown && (
                <div className="absolute right-0 mt-2 w-56 rounded-2xl bg-slate-900/95 border border-white/10 shadow-2xl backdrop-blur-xl p-2 z-50 text-xs">
                  <div className="px-3 py-2 border-b border-white/[0.06]">
-                    <p className="font-semibold text-slate-100 truncate">{user?.profile?.name || 'Partner User'}</p>
-                    <p className="text-[11px] text-slate-400 truncate">{user?.profile?.email || ''}</p>
+                    <p className="font-semibold text-slate-100 truncate">{(user?.name || (user as any)?.profile?.name || '') || 'Partner User'}</p>
+                    <p className="text-[11px] text-slate-400 truncate">{(user?.email || (user as any)?.profile?.email || '') || ''}</p>
                    {partnerSummary.primaryInvitedOrg && (
                      <p className="text-[10px] text-emerald-400 mt-1 truncate">
                        {partnerSummary.primaryInvitedOrg.name}
@@ -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>
                ))
              )}
@@ -26,7 +26,10 @@ import {
 import { EvidenceUploadModal } from './EvidenceUploadModal';
 import { GovernanceInfoModal } from './GovernanceInfoModal';
 import { 
-  FolderKanban, 
+  FolderKanban,
+  AlertTriangle,
+  ShieldAlert,
+  Scale, 
  ChevronDown, 
  ChevronUp, 
  Calendar, 
@@ -66,6 +69,12 @@ interface ProjectCardProps {
  item: EnrichedPartnerProject;
  isExpanded?: boolean;
  onToggleExpand?: () => void;
+  onUploadEvidence?: (target: any) => void;
+  onSubmitActivityForApproval?: (
+    activity: Activity,
+    milestone?: Milestone | null,
+    evidences?: Evidence[]
+  ) => Promise<void>;
  onOpenSecureFile: (type: 'contract' | 'evidence', id: string | number) => void;
 }

@@ -226,6 +235,19 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
    return new Date(a.dueAt || 0).getTime() - new Date(b.dueAt || 0).getTime();
  });

+  // Requirement #5: Milestone and Project Late / At Risk calculations
+  const nowTime = Date.now();
+  const hasOverdueMilestone = effectiveMilestones.some(m => {
+    const d = m.dueAt ? new Date(m.dueAt).getTime() : null;
+    const fulfilled = Number(m.status) === ApprovalStatus.Approved;
+    return d !== null && d < nowTime && !fulfilled;
+  });
+  const hasAtRiskMilestone = !hasOverdueMilestone && effectiveMilestones.some(m => {
+    const d = m.dueAt ? new Date(m.dueAt).getTime() : null;
+    const fulfilled = Number(m.status) === ApprovalStatus.Approved;
+    return d !== null && d >= nowTime && (d - nowTime <= 3 * 24 * 60 * 60 * 1000) && !fulfilled;
+  });
+
  const getEvidenceForActivity = (activityId: string | number): Evidence[] => {
    const targetNum = toIntegerId(activityId);
    return effectiveEvidence
@@ -254,7 +254,7 @@ export const PartnerMessageComposerModal: React.FC<PartnerMessageComposerModalPr
                ref={editorRef}
                contentEditable
                className="w-full min-h-[160px] max-h-[300px] p-4 text-xs sm:text-sm text-slate-100 leading-relaxed overflow-y-auto focus:outline-none [scrollbar-width:thin] [scrollbar-color:#334155_transparent] prose prose-invert max-w-none [&_blockquote]:border-l-4 [&_blockquote]:border-emerald-500 [&_blockquote]:pl-3 [&_blockquote]:italic [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5"
-                placeholder="Write your message here..."
+                data-placeholder="Write your message here..."
                tabIndex={0}
              />
            </div>
@@ -300,7 +300,7 @@ export function useInAppNotifications() {
      const sentItem: Notification = {
        id: `sent_${Date.now()}`,
        organisationId: orgId,
-        recipient: payload.recipientId,
+        recipient: payload.recipientId || payload.recipient || "",
        platform: targetPlatform,
        status: NotificationStatus.Sent,
        subject: payload.subject,