diff --git a/PostFundManagement.PartnerUI/src/App.tsx b/PostFundManagement.PartnerUI/src/App.tsx index 2966307..0329788 100644 --- a/PostFundManagement.PartnerUI/src/App.tsx +++ b/PostFundManagement.PartnerUI/src/App.tsx @@ -4,13 +4,22 @@ import { QueryClientProvider } from '@tanstack/react-query'; import { queryClient } from './lib/queryClient'; import { AuthProvider, useAuth } from './auth/AuthProvider'; import { LandingPage } from './components/landing/LandingPage'; -import { AppNavbar } from './components/layout/AppNavbar'; import { DashboardPage } from './components/dashboard/DashboardPage'; +import { LaserDivider } from './components/layout/LaserDivider'; function AuthenticatedLayout() { return ( -
-
+
+ {/* Fixed-width vertical navigation pane on the left */} + + + {/* Laser beam divider with central light source */} + + + {/* Content pane occupying the rest of the screen */} +
diff --git a/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx b/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx index b34cffd..4e7e647 100644 --- a/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx +++ b/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx @@ -1,321 +1,5 @@ -import React, { useEffect, useState, useMemo } from 'react'; -import { useAuth } from '../../auth/AuthProvider'; -import { api, extractApiErrors } from '../../services/api'; -import { Project, Award, Milestone, Activity, Evidence } from '../../services/api/models'; -import { encodeHashIdSync } from '../../services/toolsService'; -import { ProjectCard } from './ProjectCard'; -import { - Building2, - FolderKanban, - Award as AwardIcon, - RefreshCw, - LogOut, - Search, - Filter, - AlertTriangle, - Sparkles, - Layers, - CheckCircle2, - Clock, - HelpCircle -} from 'lucide-react'; +import React from 'react'; export const DashboardPage: React.FC = () => { - const { user, logout } = useAuth(); - - const [isLoading, setIsLoading] = useState(true); - const [isRefreshing, setIsRefreshing] = useState(false); - const [errorMessages, setErrorMessages] = useState([]); - - // Raw fetched data - const [awards, setAwards] = useState([]); - const [projects, setProjects] = useState([]); - const [milestonesByProject, setMilestonesByProject] = useState>({}); - const [activitiesByProject, setActivitiesByProject] = useState>({}); - const [evidenceByProject, setEvidenceByProject] = useState>({}); - - // Filter & Search states - const [searchQuery, setSearchQuery] = useState(''); - const [statusFilter, setStatusFilter] = useState('all'); - - const hashedTenantId = user?.tenant_id !== undefined && user?.tenant_id !== null - ? encodeHashIdSync(user.tenant_id) - : ''; - - // Main data loader function - const loadDashboardData = async (isBackgroundRefresh = false) => { - if (!isBackgroundRefresh) setIsLoading(true); - else setIsRefreshing(true); - setErrorMessages([]); - - try { - // 1. Access the endpoint that returns applicant awards - const [awardsRes, projectsRes] = await Promise.all([ - api.grants.getAwards({ page: 1, pageSize: 100 }).catch((err) => { - console.warn('Awards fetch warning:', err); - return { data: [] as Award[] }; - }), - api.projects.getProjects({ page: 1, pageSize: 100 }).catch((err) => { - console.warn('Projects fetch warning:', err); - return { data: [] as Project[] }; - }), - ]); - - const rawAwards: Award[] = Array.isArray(awardsRes?.data) ? awardsRes.data : []; - let rawProjects: Project[] = Array.isArray(projectsRes?.data) ? projectsRes.data : []; - - // Extract unique linked project IDs from awards - const linkedProjectIdsFromAwards = Array.from( - new Set(rawAwards.map((a) => a.projectId).filter((id): id is string | number => id !== undefined && id !== null && id !== '')) - ); - - // If awards reference project IDs not in rawProjects, fetch them individually - const existingProjectIds = new Set(rawProjects.map((p) => String(p.id))); - const missingProjectIds = linkedProjectIdsFromAwards.filter((id) => !existingProjectIds.has(String(id))); - - if (missingProjectIds.length > 0) { - const fetchedMissing = await Promise.all( - missingProjectIds.map(async (pId) => { - try { - const res = await api.projects.getProject(pId); - return res?.data; - } catch { - // Return a placeholder project linked to the award - return { - id: pId, - name: `Project #${encodeHashIdSync(pId)}`, - status: 'Active', - } as Project; - } - }) - ); - rawProjects = [...rawProjects, ...fetchedMissing.filter((p): p is Project => !!p)]; - } - - // If no projects exist but awards exist, create synthetic project containers for them - if (rawProjects.length === 0 && rawAwards.length > 0) { - rawProjects = rawAwards.map((award, idx) => ({ - id: award.projectId || award.id || idx + 1, - name: `Grantee Portfolio #${encodeHashIdSync(award.projectId || award.id || idx + 1)}`, - status: 'Active', - budget: award.amount, - createdAt: award.createdAt, - })); - } - - setAwards(rawAwards); - setProjects(rawProjects); - - // 2. Fetch milestones, activities, and evidence for each project - const milestonesMap: Record = {}; - const activitiesMap: Record = {}; - const evidenceMap: Record = {}; - - await Promise.all( - rawProjects.map(async (proj) => { - const pKey = String(proj.id); - try { - const [mRes, aRes, eRes] = await Promise.all([ - api.projects.getProjectMilestones(proj.id!).catch(() => ({ data: [] as Milestone[] })), - api.projects.getProjectActivities(proj.id!).catch(() => ({ data: [] as Activity[] })), - api.evidence.getProjectEvidence(proj.id!).catch(() => ({ data: [] as Evidence[] })), - ]); - - milestonesMap[pKey] = Array.isArray(mRes?.data) ? mRes.data : []; - activitiesMap[pKey] = Array.isArray(aRes?.data) ? aRes.data : []; - evidenceMap[pKey] = Array.isArray(eRes?.data) ? eRes.data : []; - } catch (e) { - milestonesMap[pKey] = []; - activitiesMap[pKey] = []; - evidenceMap[pKey] = []; - } - }) - ); - - setMilestonesByProject(milestonesMap); - setActivitiesByProject(activitiesMap); - setEvidenceByProject(evidenceMap); - } catch (err: any) { - console.error('[Dashboard Load Error]:', err); - const errors = extractApiErrors(err); - setErrorMessages(errors); - } finally { - setIsLoading(false); - setIsRefreshing(false); - } - }; - - useEffect(() => { - loadDashboardData(); - }, []); - - // Filter projects by search and status - const filteredProjects = useMemo(() => { - return projects.filter((p) => { - const pKey = String(p.id); - const projAwards = awards.filter((a) => String(a.projectId) === pKey); - const matchSearch = - !searchQuery.trim() || - (p.name && p.name.toLowerCase().includes(searchQuery.toLowerCase())) || - (p.code && p.code.toLowerCase().includes(searchQuery.toLowerCase())) || - encodeHashIdSync(p.id).toLowerCase().includes(searchQuery.toLowerCase()) || - projAwards.some((a) => encodeHashIdSync(a.id).toLowerCase().includes(searchQuery.toLowerCase())); - - const matchStatus = - statusFilter === 'all' || - String(p.status || '').toLowerCase().includes(statusFilter.toLowerCase()); - - return matchSearch && matchStatus; - }); - }, [projects, awards, searchQuery, statusFilter]); - - return ( -
- {/* Uncluttered Top Bar-Free Grantee Context Header */} -
-
-
- - PFM Grantee Portal - - {hashedTenantId && ( - - #{hashedTenantId} - - )} -
-

- {user?.tenant || 'Grantee Portfolio Overview'} -

-

- Welcome, {user?.name || 'Grantee Partner'} ({user?.email || 'Authorized Grantee'}). Access historic awards, track deliverable milestones, and submit activity evidence dossiers. -

-
- - {/* Minimalist Top Actions (Refresh & Sign Out) */} -
- - - -
-
- - {/* Global Error Banner (Comma-delimited error display) */} - {errorMessages.length > 0 && ( -
-
- - Notice: API server returned validation issues: -
-
    - {errorMessages.map((msg, idx) => ( -
  • {msg}
    • - ))} -
-
- )} - - {/* Search & Filter Controls */} -
-
-
- - setSearchQuery(e.target.value)} - className="w-full pl-9 pr-4 py-2 rounded-2xl bg-slate-900/60 border border-white/10 text-xs text-slate-200 placeholder:text-slate-500 focus:outline-none focus:border-emerald-500/50 backdrop-blur-md" - /> -
-
- -
-
- - -
-
-
- - {/* Main Content Area */} - {isLoading ? ( -
-
- Retrieving applicant awards and project deliverables... -
- ) : filteredProjects.length === 0 ? ( -
-
- -
-

No Projects or Awards Found

-

- {searchQuery - ? 'No project records matched your search query. Try clearing the filter.' - : 'There are currently no active or historical awards linked to this grantee account.'} -

- {searchQuery && ( - - )} -
- ) : ( -
- {filteredProjects.map((project) => { - const pKey = String(project.id); - const projectAwards = awards.filter((a) => String(a.projectId) === pKey); - const projectMilestones = milestonesByProject[pKey] || []; - const projectActivities = activitiesByProject[pKey] || []; - const projectEvidence = evidenceByProject[pKey] || []; - - return ( - loadDashboardData(true)} - /> - ); - })} -
- )} -
- ); + return null; }; diff --git a/PostFundManagement.PartnerUI/src/components/layout/LaserDivider.tsx b/PostFundManagement.PartnerUI/src/components/layout/LaserDivider.tsx new file mode 100644 index 0000000..872ddef --- /dev/null +++ b/PostFundManagement.PartnerUI/src/components/layout/LaserDivider.tsx @@ -0,0 +1,63 @@ +import React from 'react'; + +interface LaserDividerProps { + className?: string; + glowColor?: 'emerald' | 'cyan' | 'white' | 'violet'; +} + +export const LaserDivider: React.FC = ({ + className = '', + glowColor = 'emerald' +}) => { + return ( +
+ {/* 1. Ambient wide soft glow */} +
+ + {/* 2. Narrow focused beam bloom */} +
+ + {/* 3. Razor-thin core laser line */} +
+ + {/* 4. Bright central optical light source (Flare / Focal emitter) */} +
+ {/* Outermost radial halo */} +
+ + {/* Secondary medium flare */} +
+ + {/* Vertical beam filament highlight */} +
+ + {/* Core incandescent white emitter point */} +
+
+
+ ); +};