ifritechnologies/pfm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored project view into modal

Browse Source 
Elevated toast message priority
This commit is contained in:
hermes
2026-10-22 09:41:41 +02:00
parent ccc49df720
commit 0261a6093e
6 changed files with 1454 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files
PostFundManagement.ConsoleUI/src/components/projects/ProjectExpandedRow.tsx
+13 -13
View File
@@ -91,21 +91,21 @@ export const ProjectExpandedRow: React.FC<ProjectExpandedRowProps> = ({
const totalActivityBudget = activities.reduce((sum, a) => sum + (Number(a.amount) || 0), 0);
return (
<div className="p-5 sm:p-6 bg-[#090d16]/95 border-t border-b border-blue-500/20 space-y-6 animate-in fade-in duration-200">
<div className="p-4 sm:p-5 lg:p-6 bg-[#090d16]/95 border-t border-b border-blue-500/20 space-y-6 animate-in fade-in duration-200 w-full min-w-0">
{/* Project Meta Bar */}
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 p-4 rounded-2xl bg-[#0d121f] border border-slate-800">
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4 p-4 rounded-2xl bg-[#0d121f] border border-slate-800 min-w-0">
<div className="space-y-1 min-w-0 flex-1">
<div className="flex items-center gap-2 flex-wrap">
<span className="text-[10px] font-mono uppercase tracking-wider text-blue-400 bg-blue-500/10 px-2.5 py-0.5 rounded-md border border-blue-500/30">
<span className="text-[10px] font-mono uppercase tracking-wider text-blue-400 bg-blue-500/10 px-2.5 py-0.5 rounded-md border border-blue-500/30 shrink-0">
Project #{project.id} Summary
</span>
<span className="text-xs text-slate-400">
<span className="text-xs text-slate-400 truncate">
Owner / Created by: <strong className="text-slate-200">{getUserEmail(project.createdBy)}</strong>
</span>
{approvedBudgetTotal > 0 && (
<>
<span className="text-slate-600">&bull;</span>
<span className="text-xs text-emerald-400 font-mono font-semibold">
<span className="text-xs text-emerald-400 font-mono font-semibold shrink-0">
Approved Budget: {formatZAR(approvedBudgetTotal)}
</span>
</>
@@ -114,10 +114,10 @@ export const ProjectExpandedRow: React.FC<ProjectExpandedRowProps> = ({
<p className="text-xs text-slate-300 leading-relaxed">{project.description}</p>
</div>
<div className="flex items-center gap-2 shrink-0 self-start md:self-center flex-wrap">
<div className="flex items-center gap-2 shrink-0 self-start lg:self-center flex-wrap">
<Link
to={`/monitoring?tab=evidence&projectId=${project.id}`}
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-blue-300 hover:text-white bg-blue-500/10 hover:bg-blue-500/20 border border-blue-500/30 rounded-xl transition cursor-pointer"
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-blue-300 hover:text-white bg-blue-500/10 hover:bg-blue-500/20 border border-blue-500/30 rounded-xl transition cursor-pointer shrink-0"
>
<FileCheck className="w-3.5 h-3.5 text-blue-400" />
Review Evidence Queue
@@ -125,7 +125,7 @@ export const ProjectExpandedRow: React.FC<ProjectExpandedRowProps> = ({
<button
type="button"
onClick={onOpenEditProject}
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-slate-300 hover:text-white bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-xl transition cursor-pointer"
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-slate-300 hover:text-white bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-xl transition cursor-pointer shrink-0"
>
<Edit2 className="w-3.5 h-3.5 text-slate-400" />
Edit Project Scope
@@ -145,9 +145,9 @@ export const ProjectExpandedRow: React.FC<ProjectExpandedRowProps> = ({
/>
{/* 4 Vital Resource Summary Cards Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-4 min-w-0">
{/* Card 1: Milestones */}
<div className="bg-[#0d121f] rounded-2xl border border-slate-800 p-4 flex flex-col justify-between space-y-3">
<div className="bg-[#0d121f] rounded-2xl border border-slate-800 p-4 flex flex-col justify-between space-y-3 min-w-0">
<div className="space-y-2.5">
<div className="flex items-center justify-between border-b border-slate-800/80 pb-2">
<div className="flex items-center gap-2 text-xs font-bold text-white">
@@ -198,7 +198,7 @@ export const ProjectExpandedRow: React.FC<ProjectExpandedRowProps> = ({
</div>
{/* Card 2: Activities */}
<div className="bg-[#0d121f] rounded-2xl border border-slate-800 p-4 flex flex-col justify-between space-y-3">
<div className="bg-[#0d121f] rounded-2xl border border-slate-800 p-4 flex flex-col justify-between space-y-3 min-w-0">
<div className="space-y-2.5">
<div className="flex items-center justify-between border-b border-slate-800/80 pb-2">
<div className="flex items-center gap-2 text-xs font-bold text-white">
@@ -244,7 +244,7 @@ export const ProjectExpandedRow: React.FC<ProjectExpandedRowProps> = ({
</div>
{/* Card 3: Indicators */}
<div className="bg-[#0d121f] rounded-2xl border border-slate-800 p-4 flex flex-col justify-between space-y-3">
<div className="bg-[#0d121f] rounded-2xl border border-slate-800 p-4 flex flex-col justify-between space-y-3 min-w-0">
<div className="space-y-2.5">
<div className="flex items-center justify-between border-b border-slate-800/80 pb-2">
<div className="flex items-center gap-2 text-xs font-bold text-white">
@@ -297,7 +297,7 @@ export const ProjectExpandedRow: React.FC<ProjectExpandedRowProps> = ({
</div>
{/* Card 4: Risks */}
<div className="bg-[#0d121f] rounded-2xl border border-slate-800 p-4 flex flex-col justify-between space-y-3">
<div className="bg-[#0d121f] rounded-2xl border border-slate-800 p-4 flex flex-col justify-between space-y-3 min-w-0">
<div className="space-y-2.5">
<div className="flex items-center justify-between border-b border-slate-800/80 pb-2">
<div className="flex items-center gap-2 text-xs font-bold text-white">