505 lines
26 KiB
TypeScript
505 lines
26 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Project, Award, Milestone, Activity, Evidence } from '../../services/api/models';
|
|
import { encodeHashIdSync } from '../../services/toolsService';
|
|
import { BorderGlow } from '../common/BorderGlow';
|
|
import { EvidenceUploadModal } from './EvidenceUploadModal';
|
|
import {
|
|
FolderKanban,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
Calendar,
|
|
Landmark,
|
|
Award as AwardIcon,
|
|
Layers,
|
|
CheckCircle2,
|
|
Clock,
|
|
FileText,
|
|
UploadCloud,
|
|
ExternalLink,
|
|
ShieldCheck,
|
|
AlertCircle
|
|
} from 'lucide-react';
|
|
|
|
interface ProjectCardProps {
|
|
project: Project;
|
|
awards: Award[];
|
|
milestones: Milestone[];
|
|
activities: Activity[];
|
|
evidenceList: Evidence[];
|
|
onEvidenceUploaded: () => void;
|
|
}
|
|
|
|
export const ProjectCard: React.FC<ProjectCardProps> = ({
|
|
project,
|
|
awards,
|
|
milestones,
|
|
activities,
|
|
evidenceList,
|
|
onEvidenceUploaded,
|
|
}) => {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
const [activeTab, setActiveTab] = useState<'milestones' | 'awards'>('milestones');
|
|
|
|
// Evidence upload state
|
|
const [uploadTarget, setUploadTarget] = useState<{
|
|
activity: Activity;
|
|
milestone?: Milestone;
|
|
} | null>(null);
|
|
|
|
const hashedProjectId = encodeHashIdSync(project.id);
|
|
|
|
// Group activities and evidence by milestone
|
|
const getActivitiesForMilestone = (milestoneId?: string | number) => {
|
|
if (!milestoneId) return activities.filter((a) => !a.milestoneId);
|
|
return activities.filter((a) => String(a.milestoneId) === String(milestoneId));
|
|
};
|
|
|
|
const getEvidenceForActivity = (activityId?: string | number) => {
|
|
if (!activityId) return [];
|
|
return evidenceList.filter((e) => String(e.activityId) === String(activityId));
|
|
};
|
|
|
|
const getEvidenceForMilestone = (milestoneId?: string | number) => {
|
|
if (!milestoneId) return [];
|
|
return evidenceList.filter((e) => String(e.milestoneId) === String(milestoneId));
|
|
};
|
|
|
|
// Helper to check if an activity has >= 1 evidence file
|
|
const isActivityDoneWithEvidence = (activityId?: string | number) => {
|
|
const ev = getEvidenceForActivity(activityId);
|
|
return ev.length > 0;
|
|
};
|
|
|
|
// Helper to format currency
|
|
const formatCurrency = (amount?: number | string | null) => {
|
|
if (amount === undefined || amount === null || amount === '') return 'R 0.00';
|
|
const num = typeof amount === 'number' ? amount : parseFloat(String(amount));
|
|
if (isNaN(num)) return 'R 0.00';
|
|
return `R ${num.toLocaleString('en-ZA', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
};
|
|
|
|
// Helper for status badge rendering
|
|
const renderStatusBadge = (status?: any, fallback = 'Active') => {
|
|
const str = String(status || fallback).toLowerCase();
|
|
if (str.includes('approved') || str.includes('executed') || str === '2' || str === 'active' || str === 'completed') {
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-emerald-950/80 border border-emerald-500/30 text-emerald-300">
|
|
<CheckCircle2 className="w-3 h-3 text-emerald-400" />
|
|
<span>{status === 2 || status === '2' ? 'Approved' : String(status || fallback)}</span>
|
|
</span>
|
|
);
|
|
}
|
|
if (str.includes('review') || str.includes('pending') || str === '1') {
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-amber-950/80 border border-amber-500/30 text-amber-300">
|
|
<Clock className="w-3 h-3 text-amber-400" />
|
|
<span>{status === 1 || status === '1' ? 'Pending Approval' : String(status || fallback)}</span>
|
|
</span>
|
|
);
|
|
}
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-slate-800/80 border border-slate-700 text-slate-300">
|
|
<span>{String(status || fallback)}</span>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
// Calculate project progress across all milestones and activities
|
|
const totalActivities = activities.length;
|
|
const completedActivitiesCount = activities.filter((a) => isActivityDoneWithEvidence(a.id)).length;
|
|
const progressPercent = totalActivities > 0 ? Math.round((completedActivitiesCount / totalActivities) * 100) : (milestones.length > 0 ? 0 : 100);
|
|
|
|
const totalAwardsAmount = awards.reduce((sum, a) => sum + (Number(a.amount) || 0), 0);
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<BorderGlow
|
|
edgeSensitivity={30}
|
|
glowColor="160 85 70"
|
|
backgroundColor="#090f20"
|
|
borderRadius={24}
|
|
glowRadius={36}
|
|
glowIntensity={1.0}
|
|
coneSpread={26}
|
|
colors={['#10b981', '#14b8a6', '#06b6d4']}
|
|
fillOpacity={0.2}
|
|
className="w-full transition-all backdrop-blur-xl shadow-2xl"
|
|
>
|
|
<div className="p-6 sm:p-7 flex flex-col space-y-6">
|
|
{/* Card Top Header */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-4 border-b border-white/10">
|
|
<div className="space-y-1.5 flex-1">
|
|
<div className="flex items-center gap-2.5 flex-wrap">
|
|
<div className="p-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 shadow-inner">
|
|
<FolderKanban className="w-4 h-4" />
|
|
</div>
|
|
{hashedProjectId && (
|
|
<span className="font-mono text-xs font-bold text-emerald-300 bg-emerald-950/70 border border-emerald-500/30 px-2 py-0.5 rounded-md shadow-sm">
|
|
#{hashedProjectId}
|
|
</span>
|
|
)}
|
|
{project.code && (
|
|
<span className="font-mono text-xs text-slate-300 bg-white/5 border border-white/10 px-2 py-0.5 rounded-md">
|
|
{project.code}
|
|
</span>
|
|
)}
|
|
{renderStatusBadge(project.status, 'In Progress')}
|
|
</div>
|
|
|
|
<h3 className="text-xl font-extrabold tracking-tight text-white mt-1">
|
|
{project.name || `Project #${hashedProjectId}`}
|
|
</h3>
|
|
|
|
{project.description && (
|
|
<p className="text-xs text-slate-300 line-clamp-2 leading-relaxed max-w-3xl">
|
|
{project.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Key Stats Pill */}
|
|
<div className="flex items-center gap-3 shrink-0 flex-wrap sm:flex-nowrap">
|
|
<div className="bg-slate-950/60 border border-white/10 px-4 py-2 rounded-2xl">
|
|
<div className="text-[10px] text-slate-400 uppercase tracking-wider font-semibold">Total Budget</div>
|
|
<div className="text-sm font-bold text-emerald-300 font-mono">
|
|
{formatCurrency(project.budget || totalAwardsAmount)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-slate-950/60 border border-white/10 px-4 py-2 rounded-2xl">
|
|
<div className="text-[10px] text-slate-400 uppercase tracking-wider font-semibold">Linked Awards</div>
|
|
<div className="text-sm font-bold text-cyan-300 font-mono">
|
|
{awards.length} Award{awards.length !== 1 ? 's' : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Meta Bar: Dates & Milestone Progress */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs">
|
|
{/* Timeline */}
|
|
<div className="flex items-center gap-2 text-slate-300">
|
|
<Calendar className="w-4 h-4 text-slate-400 shrink-0" />
|
|
<div>
|
|
<span className="text-slate-500 block text-[10px] uppercase font-bold">Timeline</span>
|
|
<span>
|
|
{project.startedAt ? new Date(project.startedAt).toLocaleDateString() : 'Start Pending'} —{' '}
|
|
{project.endedAt ? new Date(project.endedAt).toLocaleDateString() : 'Open'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Milestones & Activities count */}
|
|
<div className="flex items-center gap-2 text-slate-300">
|
|
<Layers className="w-4 h-4 text-teal-400 shrink-0" />
|
|
<div>
|
|
<span className="text-slate-500 block text-[10px] uppercase font-bold">Deliverables</span>
|
|
<span>
|
|
{milestones.length} Milestone{milestones.length !== 1 ? 's' : ''} • {totalActivities} Activit{totalActivities !== 1 ? 'ies' : 'y'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Evidence Verification Progress */}
|
|
<div className="space-y-1 sm:text-right">
|
|
<div className="flex items-center sm:justify-end gap-2 text-[11px]">
|
|
<span className="text-slate-400">Evidence Completion:</span>
|
|
<span className="font-mono font-bold text-emerald-300">{progressPercent}%</span>
|
|
</div>
|
|
<div className="w-full bg-slate-950/80 rounded-full h-2 overflow-hidden border border-white/5">
|
|
<div
|
|
className="bg-gradient-to-r from-emerald-500 to-teal-400 h-full rounded-full transition-all duration-500"
|
|
style={{ width: `${progressPercent}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Expand / Collapse Button */}
|
|
<div className="pt-2 flex justify-between items-center border-t border-white/5">
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => {
|
|
setIsExpanded(true);
|
|
setActiveTab('milestones');
|
|
}}
|
|
className={`px-3 py-1.5 rounded-xl text-xs font-semibold transition-all cursor-pointer ${
|
|
isExpanded && activeTab === 'milestones'
|
|
? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30'
|
|
: 'text-slate-400 hover:text-slate-200 bg-white/[0.02] hover:bg-white/[0.06] border border-white/10'
|
|
}`}
|
|
>
|
|
Milestones & Activities ({milestones.length})
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setIsExpanded(true);
|
|
setActiveTab('awards');
|
|
}}
|
|
className={`px-3 py-1.5 rounded-xl text-xs font-semibold transition-all cursor-pointer ${
|
|
isExpanded && activeTab === 'awards'
|
|
? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/30'
|
|
: 'text-slate-400 hover:text-slate-200 bg-white/[0.02] hover:bg-white/[0.06] border border-white/10'
|
|
}`}
|
|
>
|
|
Historic & Current Awards ({awards.length})
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl bg-white/[0.04] hover:bg-white/[0.08] border border-white/10 text-xs font-semibold text-slate-300 hover:text-white transition-all cursor-pointer shadow-sm"
|
|
>
|
|
<span>{isExpanded ? 'Collapse Details' : 'Expand Project Details'}</span>
|
|
{isExpanded ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Expanded Section */}
|
|
{isExpanded && (
|
|
<div className="pt-4 border-t border-white/10 animate-in fade-in slide-in-from-top-2 duration-300 space-y-6">
|
|
{/* TAB 1: MILESTONES & ACTIVITIES */}
|
|
{activeTab === 'milestones' && (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h4 className="text-sm font-bold text-white flex items-center gap-2">
|
|
<Layers className="w-4 h-4 text-emerald-400" />
|
|
Milestone Deliverables & Activity Verification
|
|
</h4>
|
|
<p className="text-[11px] text-slate-400 mt-0.5">
|
|
Upload 1 or more evidence files against each activity. A milestone is verified when all its activities have evidence.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{milestones.length === 0 ? (
|
|
<div className="p-6 rounded-2xl bg-slate-950/40 border border-white/5 text-center text-xs text-slate-400">
|
|
No milestones recorded for this project yet.
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{milestones.map((milestone) => {
|
|
const milestoneActs = getActivitiesForMilestone(milestone.id);
|
|
const milestoneEvidence = getEvidenceForMilestone(milestone.id);
|
|
const actsWithEvidence = milestoneActs.filter((a) => isActivityDoneWithEvidence(a.id));
|
|
const isMilestoneFullyEvidenced = milestoneActs.length > 0 && actsWithEvidence.length === milestoneActs.length;
|
|
|
|
return (
|
|
<div
|
|
key={milestone.id}
|
|
className="rounded-2xl border border-white/10 bg-slate-950/60 p-4 sm:p-5 space-y-3 shadow-inner"
|
|
>
|
|
{/* Milestone Header */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 pb-2.5 border-b border-white/5">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="font-mono text-xs text-emerald-300 font-bold">
|
|
Milestone #{encodeHashIdSync(milestone.id)}
|
|
</span>
|
|
{renderStatusBadge(milestone.status, 'In Progress')}
|
|
{isMilestoneFullyEvidenced && (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/20 text-emerald-300 border border-emerald-500/40">
|
|
<ShieldCheck className="w-3 h-3" />
|
|
Evidence Complete
|
|
</span>
|
|
)}
|
|
</div>
|
|
<h5 className="text-sm font-bold text-slate-100">{milestone.name || 'Milestone Target'}</h5>
|
|
</div>
|
|
|
|
<div className="text-xs text-slate-400 flex items-center gap-4">
|
|
{milestone.dueAt && (
|
|
<span>
|
|
Due: <span className="text-slate-200 font-mono">{new Date(milestone.dueAt).toLocaleDateString()}</span>
|
|
</span>
|
|
)}
|
|
<span className="font-mono text-[11px] text-teal-300 bg-teal-950/60 border border-teal-500/20 px-2 py-0.5 rounded-md">
|
|
{actsWithEvidence.length} / {milestoneActs.length} Activities Verified
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nested Activities */}
|
|
<div className="space-y-2 pt-1">
|
|
<div className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">
|
|
Activities & Uploaded Evidence
|
|
</div>
|
|
|
|
{milestoneActs.length === 0 ? (
|
|
<div className="py-2 text-xs text-slate-500 italic">
|
|
No individual activities defined under this milestone.
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2.5">
|
|
{milestoneActs.map((act) => {
|
|
const actEvidence = getEvidenceForActivity(act.id);
|
|
const isDone = actEvidence.length > 0;
|
|
|
|
return (
|
|
<div
|
|
key={act.id}
|
|
className="p-3.5 rounded-xl bg-white/[0.02] border border-white/5 hover:border-white/10 transition-colors space-y-2.5"
|
|
>
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-semibold text-xs text-slate-200">
|
|
{act.title || `Activity #${encodeHashIdSync(act.id)}`}
|
|
</span>
|
|
{isDone ? (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-bold bg-emerald-950/80 border border-emerald-500/30 text-emerald-300">
|
|
<CheckCircle2 className="w-3 h-3 text-emerald-400" />
|
|
Done ({actEvidence.length} Evidence)
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-medium bg-amber-950/60 border border-amber-500/20 text-amber-300">
|
|
<Clock className="w-3 h-3 text-amber-400" />
|
|
Pending Evidence
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{act.description && (
|
|
<p className="text-[11px] text-slate-400">{act.description}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Upload Evidence Button */}
|
|
<button
|
|
onClick={() => setUploadTarget({ activity: act, milestone })}
|
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/30 text-emerald-300 hover:text-emerald-200 text-xs font-semibold transition-all shrink-0 cursor-pointer shadow-sm hover:shadow-[0_0_12px_rgba(16,185,129,0.2)]"
|
|
>
|
|
<UploadCloud className="w-3.5 h-3.5" />
|
|
<span>Upload Evidence</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* List of uploaded evidence records against this activity */}
|
|
{actEvidence.length > 0 && (
|
|
<div className="pt-2 border-t border-white/5 space-y-1.5">
|
|
<div className="text-[10px] uppercase font-bold tracking-wider text-slate-500">
|
|
Attached Deliverables ({actEvidence.length}):
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
|
{actEvidence.map((ev) => (
|
|
<div
|
|
key={ev.id}
|
|
className="flex items-center justify-between p-2 rounded-lg bg-slate-900/80 border border-white/5 text-[11px]"
|
|
>
|
|
<div className="flex items-center gap-2 truncate">
|
|
<FileText className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
|
|
<span className="text-slate-200 font-medium truncate">
|
|
{ev.title || ev.fileName || `Evidence #${encodeHashIdSync(ev.id)}`}
|
|
</span>
|
|
</div>
|
|
{ev.documentUrl && (
|
|
<a
|
|
href={ev.documentUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-emerald-400 hover:text-emerald-300 p-1 hover:bg-white/5 rounded shrink-0"
|
|
title="View Document"
|
|
>
|
|
<ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* TAB 2: AWARDS */}
|
|
{activeTab === 'awards' && (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h4 className="text-sm font-bold text-white flex items-center gap-2">
|
|
<AwardIcon className="w-4 h-4 text-cyan-400" />
|
|
Grantee Awards (Historic & Current)
|
|
</h4>
|
|
<p className="text-[11px] text-slate-400 mt-0.5">
|
|
Official grant award commitments linked to this project portfolio.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{awards.length === 0 ? (
|
|
<div className="p-6 rounded-2xl bg-slate-950/40 border border-white/5 text-center text-xs text-slate-400">
|
|
No grant awards linked to this project.
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{awards.map((award) => (
|
|
<div
|
|
key={award.id}
|
|
className="p-4 rounded-2xl bg-slate-950/60 border border-white/10 space-y-2.5 shadow-inner"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<span className="font-mono text-xs font-bold text-cyan-300">
|
|
Award #{encodeHashIdSync(award.id)}
|
|
</span>
|
|
{renderStatusBadge(award.status, 'Active')}
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<div className="text-[10px] text-slate-400 uppercase font-semibold">Award Amount</div>
|
|
<div className="text-lg font-bold text-white font-mono">
|
|
{formatCurrency(award.amount)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-2 border-t border-white/5 flex items-center justify-between text-[11px] text-slate-400">
|
|
<span>
|
|
Created: <span className="text-slate-300">{award.createdAt ? new Date(award.createdAt).toLocaleDateString() : 'N/A'}</span>
|
|
</span>
|
|
{award.programmeId && (
|
|
<span className="font-mono text-[10px] text-slate-400">
|
|
Prog #{encodeHashIdSync(award.programmeId)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</BorderGlow>
|
|
|
|
{/* Modal for Evidence Upload */}
|
|
{uploadTarget && (
|
|
<EvidenceUploadModal
|
|
isOpen={true}
|
|
onClose={() => setUploadTarget(null)}
|
|
project={project}
|
|
milestone={uploadTarget.milestone}
|
|
activity={uploadTarget.activity}
|
|
onEvidenceUploaded={() => {
|
|
onEvidenceUploaded();
|
|
setUploadTarget(null);
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|