From deb21dbb9a4835ece1fab7ee3d389251a6d7f899 Mon Sep 17 00:00:00 2001 From: Hermes Agent Date: Sun, 25 Oct 2026 08:52:14 +0200 Subject: [PATCH] Redesigned dashboard --- .../components/dashboard/DashboardPage.tsx | 422 +++++++++--------- 1 file changed, 209 insertions(+), 213 deletions(-) diff --git a/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx b/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx index 7a4a7c4..940bb02 100644 --- a/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx +++ b/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx @@ -761,25 +761,25 @@ export function DashboardPage() { }, [inboxNotifications, partnerSummary]); return ( -
+
{/* ===================================================================== - TOP NAVIGATION BAR — STANDALONE ELEVATED CONTAINER SEPARATED FROM BODY + TOP NAVIGATION BAR — SNAPPED TO TOP, 72PX, FULL-WIDTH EDGE-TO-EDGE ===================================================================== */} -
-
+
+
{/* Left: Brand Glyph & Horizontal Navigation Links */} -
+
{/* Flat black infinity icon rotated with top lobe pointing to 2 o'clock */}
setActiveTab('dashboard')} title="Dashboard Home" > - +
- {/* Nav Tabs with bottom underline on active */} -
{/* ===================================================================== - MAIN BODY SECTION (Separated from Top Bar) + MAIN BODY SECTION (max-w-[1440px] centered with outer ambient margin) ===================================================================== */} -
+
{isLoadingApplicantData ? (
-
+
-

Loading Workspace...

-

Retrieving ongoing projects and milestones.

+

Loading Workspace...

+

Retrieving ongoing projects and milestones.

) : activeTab === 'dashboard' ? ( /* ================================================================= - DASHBOARD: 2-COLUMN DRIBBBLE LAYOUT (Left ~68%, Right ~32%) + DASHBOARD: ASYMMETRICAL 2-COLUMN GRID (1fr 340px, gap 24px) ================================================================= */ -
+
{/* =============================================================== - LEFT COLUMN: ONGOING PROJECTS (8 of 12 cols) + LEFT MAIN SECTION: ONGOING PROJECTS (~70% width) =============================================================== */} -
- {/* Title + Sort Row */} +
+ {/* Title + Sort Row: 20px / 28px / font-weight 700 / #F1F1F6 */}
-

+

Ongoing Projects

@@ -1014,19 +1014,19 @@ export function DashboardPage() { - +
- {/* Render Real Projects if available, or Showcase Projects */} -
+ {/* Stacked Project Cards */} +
{filteredProjects.length > 0 ? ( filteredProjects.map((item, pIdx) => { const { project, award, contract, fundingOrganisation, milestones, evidence, disbursements } = item; @@ -1074,101 +1074,97 @@ export function DashboardPage() { const leadRole = 'Programme Manager'; const avatarColors = [ 'bg-gradient-to-tr from-sky-400 to-blue-600', - 'bg-gradient-to-tr from-amber-400 to-orange-500', - 'bg-gradient-to-tr from-purple-500 to-indigo-600', + 'bg-gradient-to-tr from-amber-400 to-[#F97316]', + 'bg-gradient-to-tr from-[#8B5CF6] to-indigo-600', ]; return (
{/* Left Sub-portion (~70%): Title, Description, 4 Metrics, Horizontal Timeline */} -
+
-

+

{project.name || 'Funded Project'}

-

+

{project.description || 'Funding award execution, deliverable submissions, and post-fund milestone tracking.'}

- {/* 4 Metrics in a horizontal inline row */} + {/* 4 Metrics in a horizontal inline row: 13px font-weight 500 #D1CBDD */}
-
+
- {formatCompactZAR(grantAmount)} - Award + {formatCompactZAR(grantAmount)} + Award
-
- +
+ - {formatCompactZAR(disbursedAmount)} - Spend + {formatCompactZAR(disbursedAmount)} + Spend
-
+
- {daysLeft} - Days left + {daysLeft} + Days left
-
+
- {docsSubmitted} - Docs submitted + {docsSubmitted} + Docs submitted
- {/* Horizontal Timeline Stepper */} + {/* Horizontal Timeline Stepper: height 2px, 10px nodes */}
{stepperNodes.map((step, sIdx) => { const isLast = sIdx === stepperNodes.length - 1; - const isDotted = sIdx === 2; // Exact connector style from Dribbble mock + const isDotted = sIdx === 2; // Exact connector style from reference return (
{step.type === 'done' ? ( -
- -
+
) : step.type === 'current' ? ( -
-
-
+
) : ( -
+
)} {!isLast && (
)}
-

+

{step.label}

-

+

{step.date}

@@ -1179,32 +1175,32 @@ export function DashboardPage() {
- {/* Right Sub-portion (~30%): Contact Lead, 3 Meta Rows, 2 Stacked Action Buttons */} -
+ {/* Right Sub-portion (~30% / 220px): Contact Lead, 3 Meta Rows, 2 Stacked Action Buttons */} +
{/* Contact Person */}
-

+

{leadName}

-

{leadRole}

+

{leadRole}

{getInitials(leadName)}
- +
- {/* 3 Meta Rows */} -
+ {/* 3 Meta Rows: Location, Time, Star Rating */} +
- + Gauteng, South Africa
- + 01:23 pm
@@ -1218,7 +1214,7 @@ export function DashboardPage() { @@ -1228,7 +1224,7 @@ export function DashboardPage() { setSelectedProjectItem(item); setProjectModalTab('milestones'); }} - className="w-full py-2 px-3 rounded-xl bg-[#222C44] hover:bg-[#2B3856] text-slate-100 text-xs font-semibold transition-all cursor-pointer shadow-sm" + className="w-full py-2 px-3 rounded-xl bg-white/[0.06] hover:bg-white/[0.1] text-[#F1F1F6] text-xs font-semibold transition-all cursor-pointer shadow-sm" > View Details @@ -1240,28 +1236,28 @@ export function DashboardPage() { }) ) : ( /* Friendly Empty State with Refresh Button & Informative Section */ -
+
{/* Ambient background glow */} -
+
{/* Friendly Icon Badge */}
-
- +
+
- - - + + +
- {/* Friendly Heading */} -

+ {/* Friendly Heading: 20px font-bold #F1F1F6 */} +

{searchQuery ? 'No Matching Projects Found' : 'No Active Projects Assigned Yet'}

- {/* Friendly Message */} -

+ {/* Friendly Message: 14px / 22px / #9A95B0 */} +

{searchQuery ? `We couldn't find any ongoing projects matching "${searchQuery}". Clear your search query to see your full workspace portfolio.` : "Welcome to your Partner Workspace! Your funding organisation hasn't assigned any active project records to your profile just yet. If your funding award was recently approved or updated, click below to sync and retrieve your latest project schedule."} @@ -1273,7 +1269,7 @@ export function DashboardPage() {

{/* Elegantly placed informative text below all that */} -
+
-
+
- How Project Activation Works + How Project Activation Works
- Post-Fund Lifecycle + Post-Fund Lifecycle
-
-
+
+
1
-

Award Handover & Formal Agreement

-

+

Award Handover & Formal Agreement

+

Following sanction by the approval committee, your funding organisation registers the award. A legally binding grant agreement is automatically drafted for your review and digital execution.

-
-
+
+
2
-

Milestones & Evidence Submission

-

+

Milestones & Evidence Submission

+

Once the project is active, your work breakdown structure, deliverable due dates, and mandatory evidence requirements appear here so you can easily upload progress reports, invoices, and certificates.

-
-
+
+
3
-

Payment Requests & Controlled Tranches

-

+

Payment Requests & Controlled Tranches

+

Funds are released safely against verified milestone deliverables and satisfied conditions precedent. You can initiate drawdown requests directly from your project workspace.

-
+
- + Need status clarification? Contact your assigned Programme Officer.
@@ -1359,76 +1355,76 @@ export function DashboardPage() {
{/* =============================================================== - RIGHT COLUMN: OVERVIEW (2x2 Grid) + INBOX (4 of 12 cols) + RIGHT COLUMN: SIDEBAR WIDGETS (Overview & Inbox, 340px) =============================================================== */} -
+
{/* 1. OVERVIEW CARD (2x2 Grid with vertical divider) */} -
-

+
+

Overview

{/* Subtle vertical divider between the 2 columns */} -
+
{/* Left Column: Running Project & Completed Project */} -
+
-

+

{overviewMetrics.runningProjects}

-

Running Project

+

Running Project

-

+

{overviewMetrics.completedProjects}

-

Completed Project

+

Completed Project

{/* Right Column: Have to Pay & Total Payment */} -
+
-

+

{overviewMetrics.pendingPayment}

-

Have to Pay

+

Have to Pay

-

+

{overviewMetrics.totalPayment}

-

Total Payment

+

Total Payment

{/* 2. INBOX CARD (Matching Dribbble design: Inbox + badge, See All, and clean avatar list) */} -
-
+
+
-

Inbox

- +

Inbox

+ {unreadCount > 0 ? unreadCount : 3}
- {/* List of Contacts & Messages */} -
+ {/* List of Contacts & Messages: Compact vertical list */} +
{combinedInbox.map((item) => (
-
+
{item.avatarInitials}
-
- +
+ {item.name} {item.unread && ( - + )}
-

+

{item.snippet}

@@ -1479,8 +1475,8 @@ export function DashboardPage() {
-

Messages & Communications

-

+

Messages & Communications

+

Direct communication with your funding programme officers.

@@ -1494,16 +1490,16 @@ export function DashboardPage() { setMessageSubject(''); setMessageBody(''); }} - className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-indigo-500 hover:bg-indigo-400 text-white font-semibold text-xs shadow-lg shadow-indigo-500/20 transition-all cursor-pointer" + className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[#8B5CF6] hover:bg-[#7C3AED] text-white font-semibold text-xs shadow-lg shadow-[#8B5CF6]/20 transition-all cursor-pointer" > New Message
-
+
{inboxNotifications.length === 0 ? ( -
+
No new messages in your inbox yet. Messages sent by programme managers will be displayed here.
) : ( @@ -1519,24 +1515,24 @@ export function DashboardPage() { className="p-5 hover:bg-white/[0.03] transition-colors flex items-start justify-between gap-4 cursor-pointer" >
-
+
{getInitials(msg.subject || 'PFM')}
-

+

{msg.subject || 'Programme Notification'}

{isUnread && ( - + New )}
-

{stripMarkdown(msg.message)}

+

{stripMarkdown(msg.message)}

- + {formatFullDate(msg.createdAt)}
@@ -1547,19 +1543,19 @@ export function DashboardPage() {
) : activeTab === 'contracts' ? ( /* ================================================================= - CONTRACTS & ORDERS TAB + CONTRACTS & AWARDS TAB ================================================================= */
-

Contracts & Approved Grants

-

+

Contracts & Approved Awards

+

Review your approved funding awards and download or sign grant agreements.

{partnerSummary.contractEntries.length === 0 ? ( -
+
No contracts have been issued to your organisation yet.
) : ( @@ -1569,47 +1565,47 @@ export function DashboardPage() { return (
- + Agreement v{contractVer} {isExecuted ? 'Signed & Executed' : 'Action Required: Review & Sign'}
-

+

{fundingOrganisation?.name || 'Grant Funding Agreement'}

-

Contract Value

-

+

Contract Value

+

{formatZAR(contract.totalValue || award?.amount || 0)}

-

Valid Period

-

+

Valid Period

+

{formatShortDate(contract.effectiveAt)} – {formatFullDate(contract.expiresAt)}

-
+