Refactored UI and compose file
This commit is contained in:
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,270 +1,287 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
ShieldCheck,
|
||||
Lock,
|
||||
ArrowRight,
|
||||
Layers,
|
||||
CheckCircle2,
|
||||
Coins,
|
||||
FileSpreadsheet,
|
||||
BarChart3,
|
||||
KeyRound,
|
||||
LogOut,
|
||||
UserCheck,
|
||||
ExternalLink,
|
||||
ChevronRight,
|
||||
ShieldCheck,
|
||||
Lock,
|
||||
ArrowRight,
|
||||
CheckCircle2,
|
||||
Coins,
|
||||
FileSpreadsheet,
|
||||
BarChart3,
|
||||
KeyRound,
|
||||
LogOut,
|
||||
UserCheck,
|
||||
ExternalLink,
|
||||
ChevronRight,
|
||||
} from 'lucide-react';
|
||||
import { useAuth } from '../auth/AuthProvider';
|
||||
import { BrandLogo } from '../components/ui/BrandLogo';
|
||||
|
||||
export const LandingPage: React.FC = () => {
|
||||
const { isAuthenticated, user, claims, sub, login, logout, authError, isLoading } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const { isAuthenticated, user, claims, sub, login, logout, authError, isLoading } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleEnterConsole = async () => {
|
||||
if (isAuthenticated) {
|
||||
navigate('/dashboard');
|
||||
return;
|
||||
}
|
||||
await login();
|
||||
};
|
||||
const handleEnterConsole = async () => {
|
||||
if (isAuthenticated) {
|
||||
navigate('/dashboard');
|
||||
return;
|
||||
}
|
||||
await login();
|
||||
};
|
||||
|
||||
const handleSignOut = async () => {
|
||||
await logout();
|
||||
};
|
||||
const handleSignOut = async () => {
|
||||
await logout();
|
||||
};
|
||||
|
||||
const tokenUserName = user?.name || (claims.name as string) || (claims.preferred_username as string) || 'Authorized User';
|
||||
const tokenUserEmail = user?.email || (claims.email as string) || (claims['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress'] as string) || '';
|
||||
const tokenUserName = user?.name || (claims.name as string) || (claims.preferred_username as string) || 'Authorized User';
|
||||
const tokenUserEmail = user?.email || (claims.email as string) || (claims['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress'] as string) || '';
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#090d16] text-slate-100 flex flex-col justify-between selection:bg-blue-600 selection:text-white font-sans relative overflow-hidden">
|
||||
{/* Background Graphic Grid & Ambient Glows */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-20"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
|
||||
backgroundSize: '32px 32px',
|
||||
}}
|
||||
/>
|
||||
<div className="absolute -top-40 -left-40 w-96 h-96 bg-blue-600/20 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute top-1/3 -right-40 w-96 h-96 bg-indigo-600/15 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute -bottom-40 left-1/3 w-96 h-96 bg-emerald-600/10 rounded-full blur-3xl pointer-events-none" />
|
||||
return (
|
||||
<div className="min-h-screen bg-[#090d16] text-slate-100 flex flex-col justify-between selection:bg-blue-600 selection:text-white font-sans relative overflow-hidden">
|
||||
{/* Background Graphic Grid & Ambient Glows */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-20"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
|
||||
backgroundSize: '32px 32px',
|
||||
}}
|
||||
/>
|
||||
<div className="absolute -top-40 -left-40 w-96 h-96 bg-blue-600/20 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute top-1/3 -right-40 w-96 h-96 bg-indigo-600/15 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute -bottom-40 left-1/3 w-96 h-96 bg-emerald-600/10 rounded-full blur-3xl pointer-events-none" />
|
||||
|
||||
{/* Top Header */}
|
||||
<header className="relative z-10 border-b border-slate-800/80 bg-[#0d121f]/80 backdrop-blur-md px-6 py-4 flex items-center justify-between shadow-lg shadow-black/20">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-xl bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center font-bold text-white shadow-md shadow-blue-500/20 border border-blue-400/20">
|
||||
<Layers className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-base font-bold tracking-tight text-white flex items-center gap-2">
|
||||
PFM Console
|
||||
<span className="text-[10px] font-semibold uppercase bg-blue-500/10 text-blue-400 border border-blue-500/30 px-2 py-0.5 rounded font-mono">
|
||||
Enterprise STS
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-xs text-slate-400">Post-Fund Management, Performance & Impact System</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{isAuthenticated ? (
|
||||
<button
|
||||
onClick={() => navigate('/dashboard')}
|
||||
id="header-nav-console-btn"
|
||||
className="flex items-center gap-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 px-3.5 py-1.5 rounded-lg shadow-md shadow-blue-600/20 transition cursor-pointer"
|
||||
>
|
||||
<span>Go to Console</span>
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 text-xs text-slate-400 font-medium bg-slate-900/60 border border-slate-800 px-3 py-1.5 rounded-full">
|
||||
<span className="h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></span>
|
||||
<span>Duende STS Ready</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="relative z-10 flex-1 max-w-6xl mx-auto w-full px-6 py-12 flex flex-col justify-center">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||||
{/* Left Column: Mission & Highlights */}
|
||||
<div className="lg:col-span-7 space-y-6">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/30 text-blue-300 text-xs font-semibold">
|
||||
<ShieldCheck className="w-4 h-4 text-blue-400" />
|
||||
Controlled Post-Award to Portfolio Governance
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight leading-tight">
|
||||
Post Fund Management <br />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-indigo-300 to-teal-300">
|
||||
Executive Console
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-sm sm:text-base text-slate-300 leading-relaxed max-w-2xl font-normal">
|
||||
Empowers Funders, Science Councils, and Development Agencies to enforce rigorous governance,
|
||||
milestone-linked disbursements, evidence verification, and real-time portfolio performance from
|
||||
award intake through final close-out.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2 text-xs">
|
||||
<div className="p-4 rounded-xl bg-slate-900/70 border border-slate-800/80 shadow-md flex items-start gap-3 backdrop-blur-sm">
|
||||
<CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<strong className="text-white block font-semibold mb-0.5">Award to Contract Enforcement</strong>
|
||||
<span className="text-slate-400 leading-normal">Legal agreements linked directly to approved awards.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl bg-slate-900/70 border border-slate-800/80 shadow-md flex items-start gap-3 backdrop-blur-sm">
|
||||
<Coins className="w-4 h-4 text-blue-400 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<strong className="text-white block font-semibold mb-0.5">Controlled Tranche Release</strong>
|
||||
<span className="text-slate-400 leading-normal">Disbursements released only when milestone conditions are verified.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl bg-slate-900/70 border border-slate-800/80 shadow-md flex items-start gap-3 backdrop-blur-sm">
|
||||
<FileSpreadsheet className="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<strong className="text-white block font-semibold mb-0.5">Evidence Verification</strong>
|
||||
<span className="text-slate-400 leading-normal">Deliverables require tamper-evident verification.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl bg-slate-900/70 border border-slate-800/80 shadow-md flex items-start gap-3 backdrop-blur-sm">
|
||||
<BarChart3 className="w-4 h-4 text-teal-400 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<strong className="text-white block font-semibold mb-0.5">Automated Portfolio Roll-Up</strong>
|
||||
<span className="text-slate-400 leading-normal">Project data aggregates automatically to Programmes and Portfolios.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Auth-Aware Box */}
|
||||
<div className="lg:col-span-5">
|
||||
{isAuthenticated ? (
|
||||
/* Auth-Aware Home Guidance Panel */
|
||||
<div className="bg-[#0f1523]/95 border border-emerald-500/30 rounded-2xl p-8 shadow-2xl relative overflow-hidden space-y-6 backdrop-blur-md">
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-500 via-teal-400 to-blue-500" />
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-3 w-3 rounded-full bg-emerald-400 animate-pulse" />
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-emerald-400">
|
||||
Active Authenticated Session
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[10px] font-mono bg-emerald-500/10 text-emerald-300 border border-emerald-500/30 px-2 py-0.5 rounded">
|
||||
STS Token Active
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Identity Information from Token */}
|
||||
<div className="p-4 rounded-xl bg-slate-900/90 border border-slate-800 space-y-2.5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-full bg-blue-600/20 border border-blue-500/40 flex items-center justify-center font-bold text-sm text-blue-400 shrink-0">
|
||||
<UserCheck className="w-5 h-5 text-blue-400" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-bold text-white truncate">{tokenUserName}</p>
|
||||
<p className="text-xs text-slate-400 font-mono truncate">{tokenUserEmail || 'No email in token claims'}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sub && (
|
||||
<div className="pt-2 border-t border-slate-800/80 text-[11px] flex items-center justify-between text-slate-400">
|
||||
<span>Token Subject (sub):</span>
|
||||
<span className="font-mono text-slate-300 truncate max-w-[200px]">{sub}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Guidance Message */}
|
||||
<div className="p-4 rounded-xl bg-blue-950/30 border border-blue-800/40 text-xs text-blue-200 leading-relaxed">
|
||||
<p className="font-semibold text-white mb-1">Session Verified</p>
|
||||
You are authenticated through Duende Identity Server. Your token claims are validated and active. You can proceed to the PFM Console to manage projects, reviews, and disbursements, or sign out through the identity server.
|
||||
</div>
|
||||
|
||||
{/* Navigation and Sign Out Buttons */}
|
||||
<div className="space-y-3 pt-1">
|
||||
<button
|
||||
onClick={() => navigate('/dashboard')}
|
||||
id="btn-return-to-console"
|
||||
className="w-full py-3.5 px-5 rounded-xl bg-blue-600 hover:bg-blue-500 font-semibold text-sm text-white shadow-lg shadow-blue-600/25 flex items-center justify-center gap-2 transition cursor-pointer"
|
||||
>
|
||||
<span>Return to PFM Console</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleSignOut}
|
||||
id="btn-logout-identity-server"
|
||||
className="w-full py-2.5 px-4 rounded-xl bg-slate-900 hover:bg-rose-950/40 hover:text-rose-300 text-slate-300 border border-slate-800 hover:border-rose-800/60 font-medium text-xs flex items-center justify-center gap-2 transition cursor-pointer"
|
||||
>
|
||||
<LogOut className="w-3.5 h-3.5" />
|
||||
<span>Sign Out via Identity Server</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-slate-800/80 text-[11px] text-slate-500 flex items-center justify-between">
|
||||
<span className="flex items-center gap-1">
|
||||
<KeyRound className="w-3.5 h-3.5 text-slate-400" />
|
||||
Duende STS
|
||||
</span>
|
||||
<span className="font-mono text-slate-400 text-[10px]">Audience: pfm-api-dev</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* Unauthenticated Sign In Box */
|
||||
<div className="bg-[#0f1523]/90 border border-slate-800 rounded-2xl p-8 shadow-2xl relative overflow-hidden space-y-6 backdrop-blur-md">
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-teal-400" />
|
||||
|
||||
<div className="text-center space-y-2 pt-2">
|
||||
<div className="mx-auto h-12 w-12 rounded-xl bg-blue-500/10 border border-blue-500/30 flex items-center justify-center text-blue-400 shadow-inner">
|
||||
<Lock className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white tracking-tight">Sign In</h3>
|
||||
</div>
|
||||
|
||||
{authError && (
|
||||
<div className="p-3.5 rounded-xl bg-rose-950/40 border border-rose-800/60 text-rose-300 text-xs leading-relaxed">
|
||||
{authError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
<button
|
||||
onClick={handleEnterConsole}
|
||||
disabled={isLoading}
|
||||
id="btn-enter-pfm-console"
|
||||
className="w-full py-3.5 px-5 rounded-xl bg-blue-600 hover:bg-blue-500 font-semibold text-sm text-white shadow-lg shadow-blue-600/25 flex items-center justify-center gap-2 transition cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? 'Connecting to Identity Server...' : 'Enter PFM Console'}
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-slate-800/80 text-[11px] text-slate-500 flex items-center justify-between">
|
||||
<span className="flex items-center gap-1">
|
||||
<KeyRound className="w-3.5 h-3.5 text-slate-400" />
|
||||
Duende STS OIDC
|
||||
</span>
|
||||
<span className="font-mono text-slate-400 text-[10px]">pfm-api-dev</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="relative z-10 border-t border-slate-800/80 bg-[#0d121f]/80 backdrop-blur-md px-6 py-4 text-center text-xs text-slate-500">
|
||||
<p>Post-Fund Management, Performance & Impact System • Enterprise Governance Console</p>
|
||||
</footer>
|
||||
{/* Top Header */}
|
||||
<header className="relative z-10 border-b border-slate-800/80 bg-[#0d121f]/80 backdrop-blur-md px-6 py-4 flex items-center justify-between shadow-lg shadow-black/20">
|
||||
<div className="flex items-center gap-3">
|
||||
<BrandLogo size={40} showGlow animateOnHover />
|
||||
<div>
|
||||
<h1 className="text-base font-bold tracking-tight text-white flex items-center gap-2">
|
||||
PFM Console
|
||||
<span className="text-[10px] font-semibold uppercase bg-blue-500/10 text-blue-400 border border-blue-500/30 px-2 py-0.5 rounded font-mono">
|
||||
Enterprise SSO
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-xs text-slate-400">Post-Fund Management, Performance & Impact System</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{isAuthenticated ? (
|
||||
<button
|
||||
onClick={() => navigate('/dashboard')}
|
||||
id="header-nav-console-btn"
|
||||
className="flex items-center gap-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 px-3.5 py-1.5 rounded-lg shadow-md shadow-blue-600/20 transition cursor-pointer"
|
||||
>
|
||||
<span>Go to Console</span>
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 text-xs text-slate-400 font-medium bg-slate-900/60 border border-slate-800 px-3 py-1.5 rounded-full">
|
||||
<span className="h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></span>
|
||||
<span>Single Sign-On Ready</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="relative z-10 flex-1 max-w-6xl mx-auto w-full px-6 py-12 flex flex-col justify-center">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||||
{/* Left Column: Mission & Highlights */}
|
||||
<div className="lg:col-span-7 space-y-6">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/30 text-blue-300 text-xs font-semibold">
|
||||
<ShieldCheck className="w-4 h-4 text-blue-400" />
|
||||
Controlled Post-Award to Portfolio Governance
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight leading-tight">
|
||||
Post Fund Management <br />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-indigo-300 to-teal-300">
|
||||
Executive Console
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-sm sm:text-base text-slate-300 leading-relaxed max-w-2xl font-normal">
|
||||
Empowers Funders, Science Councils, and Development Agencies to enforce rigorous governance,
|
||||
milestone-linked disbursements, evidence verification, and real-time portfolio performance from
|
||||
award intake through final close-out.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2 text-xs">
|
||||
<div className="p-4 rounded-xl bg-slate-900/70 border border-slate-800/80 shadow-md flex items-start gap-3 backdrop-blur-sm">
|
||||
<CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<strong className="text-white block font-semibold mb-0.5">Award to Contract Enforcement</strong>
|
||||
<span className="text-slate-400 leading-normal">Legal agreements linked directly to approved awards.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl bg-slate-900/70 border border-slate-800/80 shadow-md flex items-start gap-3 backdrop-blur-sm">
|
||||
<Coins className="w-4 h-4 text-blue-400 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<strong className="text-white block font-semibold mb-0.5">Controlled Tranche Release</strong>
|
||||
<span className="text-slate-400 leading-normal">Disbursements released only when milestone conditions are verified.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl bg-slate-900/70 border border-slate-800/80 shadow-md flex items-start gap-3 backdrop-blur-sm">
|
||||
<FileSpreadsheet className="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<strong className="text-white block font-semibold mb-0.5">Evidence Verification</strong>
|
||||
<span className="text-slate-400 leading-normal">Deliverables require tamper-evident verification.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl bg-slate-900/70 border border-slate-800/80 shadow-md flex items-start gap-3 backdrop-blur-sm">
|
||||
<BarChart3 className="w-4 h-4 text-teal-400 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<strong className="text-white block font-semibold mb-0.5">Automated Portfolio Roll-Up</strong>
|
||||
<span className="text-slate-400 leading-normal">Project data aggregates automatically to Programmes and Portfolios.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Auth-Aware Box */}
|
||||
<div className="lg:col-span-5">
|
||||
{isAuthenticated ? (
|
||||
/* Auth-Aware Home Guidance Panel */
|
||||
<div className="bg-[#0f1523]/95 border border-emerald-500/30 rounded-2xl p-8 shadow-2xl relative overflow-hidden space-y-6 backdrop-blur-md">
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-500 via-teal-400 to-blue-500" />
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-3 w-3 rounded-full bg-emerald-400 animate-pulse" />
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-emerald-400">
|
||||
Active Authenticated Session
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[10px] font-mono bg-emerald-500/10 text-emerald-300 border border-emerald-500/30 px-2 py-0.5 rounded">
|
||||
Session Active
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Identity Information from Token */}
|
||||
<div className="p-4 rounded-xl bg-slate-900/90 border border-slate-800 space-y-2.5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-full bg-blue-600/20 border border-blue-500/40 flex items-center justify-center font-bold text-sm text-blue-400 shrink-0">
|
||||
<UserCheck className="w-5 h-5 text-blue-400" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-bold text-white truncate">{tokenUserName}</p>
|
||||
<p className="text-xs text-slate-400 font-mono truncate">{tokenUserEmail || 'No email in token claims'}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sub && (
|
||||
<div className="pt-2 border-t border-slate-800/80 text-[11px] flex items-center justify-between text-slate-400">
|
||||
<span>Token Subject (sub):</span>
|
||||
<span className="font-mono text-slate-300 truncate max-w-[200px]">{sub}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{((claims.tenant as string) || user?.tenant) && (
|
||||
<div className="pt-2 border-t border-slate-800/80 text-[11px] flex items-center justify-between text-slate-400">
|
||||
<span>Assigned Tenant:</span>
|
||||
<span className="font-semibold text-blue-300 truncate max-w-[200px]">
|
||||
{(claims.tenant as string) || user?.tenant}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Guidance Message */}
|
||||
<div className="p-4 rounded-xl bg-blue-950/30 border border-blue-800/40 text-xs text-blue-200 leading-relaxed">
|
||||
<p className="font-semibold text-white mb-1">Session Verified</p>
|
||||
You are authenticated with validated enterprise security credentials. Your token claims are active and verified. You can proceed to the PFM Console to manage projects, reviews, and disbursements, or sign out of your session.
|
||||
</div>
|
||||
|
||||
{/* Navigation and Sign Out Buttons */}
|
||||
<div className="space-y-3 pt-1">
|
||||
<button
|
||||
onClick={() => navigate('/dashboard')}
|
||||
id="btn-return-to-console"
|
||||
className="w-full py-3.5 px-5 rounded-xl bg-blue-600 hover:bg-blue-500 font-semibold text-sm text-white shadow-lg shadow-blue-600/25 flex items-center justify-center gap-2 transition cursor-pointer"
|
||||
>
|
||||
<span>Return to PFM Console</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleSignOut}
|
||||
id="btn-logout-identity-server"
|
||||
className="w-full py-2.5 px-4 rounded-xl bg-slate-900 hover:bg-rose-950/40 hover:text-rose-300 text-slate-300 border border-slate-800 hover:border-rose-800/60 font-medium text-xs flex items-center justify-center gap-2 transition cursor-pointer"
|
||||
>
|
||||
<LogOut className="w-3.5 h-3.5" />
|
||||
<span>Sign Out of Session</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-slate-800/80 text-[11px] text-slate-500 flex items-center justify-between">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<KeyRound className="w-3.5 h-3.5 text-blue-400" />
|
||||
<span>OAuth2 / OpenID Connect</span>
|
||||
</span>
|
||||
<span className="text-emerald-400 font-medium text-[11px] flex items-center gap-1">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-emerald-400 inline-block"></span>
|
||||
Verified Session
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* Unauthenticated Sign In Box */
|
||||
<div className="bg-[#0f1523]/90 border border-slate-800 rounded-2xl p-8 shadow-2xl relative overflow-hidden space-y-6 backdrop-blur-md">
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-teal-400" />
|
||||
|
||||
<div className="text-center space-y-3 pt-2">
|
||||
<div className="flex justify-center">
|
||||
<BrandLogo size={48} showGlow animateOnHover={false} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white tracking-tight">Sign In</h3>
|
||||
<p className="text-xs text-slate-400 mt-0.5">Enterprise Identity & Access Management</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{authError && (
|
||||
<div className="p-3.5 rounded-xl bg-rose-950/40 border border-rose-800/60 text-rose-300 text-xs leading-relaxed">
|
||||
{authError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
<button
|
||||
onClick={handleEnterConsole}
|
||||
disabled={isLoading}
|
||||
id="btn-enter-pfm-console"
|
||||
className="w-full py-3.5 px-5 rounded-xl bg-blue-600 hover:bg-blue-500 font-semibold text-sm text-white shadow-lg shadow-blue-600/25 flex items-center justify-center gap-2 transition cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? 'Connecting to Identity Server...' : 'Enter PFM Console'}
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-slate-800/80 text-[11px] text-slate-500 flex items-center justify-between">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<KeyRound className="w-3.5 h-3.5 text-slate-400" />
|
||||
<span>Single Sign-On (SSO)</span>
|
||||
</span>
|
||||
<span className="text-slate-400 text-[11px]">Enterprise Security</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="relative z-10 border-t border-slate-800/80 bg-[#0d121f]/80 backdrop-blur-md px-6 py-4 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-slate-500">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<BrandLogo size={20} showGlow={false} animateOnHover={false} />
|
||||
<span className="text-slate-400 font-medium">Post-Fund Management, Performance & Impact System</span>
|
||||
</div>
|
||||
<p className="text-slate-500">Enterprise Governance & Audit Console</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user