Added PFM Console UI project

2026-09-11 12:13:25 +02:00
parent a15b25248d
commit 99ab5b2ce6
35 changed files with 12231 additions and 0 deletions
@@ -0,0 +1,279 @@
+import React, { useState } from 'react';
+import { NavLink, Outlet, useNavigate, Link } from 'react-router-dom';
+import {
+    LayoutDashboard,
+    Building2,
+    FolderKanban,
+    Coins,
+    ShieldAlert,
+    Settings,
+    LogOut,
+    Menu,
+    X,
+    ChevronRight,
+    ShieldCheck,
+    Layers,
+    Database,
+    Home,
+    User,
+} from 'lucide-react';
+import { useAuth } from '../../auth/AuthProvider';
+
+const navItems = [
+    {
+        name: 'Executive Dashboard',
+        path: '/dashboard',
+        icon: LayoutDashboard,
+    },
+    {
+        name: 'Governance & Structure',
+        path: '/governance',
+        icon: Building2,
+    },
+    {
+        name: 'Projects & Milestones',
+        path: '/projects',
+        icon: FolderKanban,
+    },
+    {
+        name: 'Grant & Financials',
+        path: '/grants',
+        icon: Coins,
+    },
+    {
+        name: 'M&E, Evidence & Risks',
+        path: '/monitoring',
+        icon: ShieldAlert,
+    },
+    {
+        name: 'Settings & Communications',
+        path: '/settings',
+        icon: Settings,
+    },
+];
+
+export const AppLayout: React.FC = () => {
+    const { user, claims, sub, logout } = useAuth();
+    const [sidebarOpen, setSidebarOpen] = useState(true);
+    const [userMenuOpen, setUserMenuOpen] = useState(false);
+    const navigate = useNavigate();
+
+    const handleLogout = async () => {
+        await logout();
+    };
+
+    // Extract name and email directly from validated token claims
+    const tokenUserName =
+        user?.name ||
+        (claims.name as string) ||
+        (claims.preferred_username as string) ||
+        (claims.given_name ? `${claims.given_name} ${claims.family_name || ''}`.trim() : '') ||
+        'Authorized User';
+
+    const tokenUserEmail =
+        user?.email ||
+        (claims.email as string) ||
+        (claims['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress'] as string) ||
+        (claims.upn as string) ||
+        (sub ? `sub:${sub}` : '');
+
+    return (
+        <div className="flex h-screen w-full overflow-hidden bg-[#090d16] font-sans text-slate-100 selection:bg-blue-600 selection:text-white">
+            {/* Sidebar */}
+            <aside
+                className={`${sidebarOpen ? 'w-64' : 'w-20'
+                    } shrink-0 bg-[#0b101b]/95 text-slate-200 border-r border-slate-800/80 transition-all duration-300 flex flex-col z-30 shadow-2xl backdrop-blur-md`}
+            >
+                {/* Brand Header — Clickable link navigating to auth-aware Home page */}
+                <div className="h-16 px-4 flex items-center justify-between border-b border-slate-800/80 bg-[#0d121f]/90">
+                    <Link
+                        to="/"
+                        id="nav-brand-home-link"
+                        title="Go to Home page"
+                        className="flex items-center gap-3 overflow-hidden group cursor-pointer"
+                    >
+                        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-blue-600 to-indigo-700 font-bold text-white shadow-md shadow-blue-500/20 border border-blue-400/20 group-hover:scale-105 transition">
+                            <Layers className="w-5 h-5 text-white" />
+                        </div>
+                        {sidebarOpen && (
+                            <div className="flex flex-col min-w-0">
+                                <span className="font-semibold text-sm tracking-tight text-white truncate group-hover:text-blue-400 transition">
+                                    PFM Console
+                                </span>
+                                <span className="text-[11px] text-blue-400 font-medium tracking-tight">Enterprise Management</span>
+                            </div>
+                        )}
+                    </Link>
+                    <button
+                        onClick={() => setSidebarOpen(!sidebarOpen)}
+                        className="rounded-lg p-1.5 text-slate-400 hover:text-white hover:bg-slate-800/60 transition cursor-pointer"
+                        title={sidebarOpen ? 'Collapse sidebar' : 'Expand sidebar'}
+                    >
+                        {sidebarOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
+                    </button>
+                </div>
+
+                {/* Navigation Items */}
+                <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1.5">
+                    {navItems.map((item) => {
+                        const Icon = item.icon;
+                        return (
+                            <NavLink
+                                key={item.path}
+                                to={item.path}
+                                className={({ isActive }) =>
+                                    `flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-xs font-medium transition-all ${isActive
+                                        ? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-md shadow-blue-600/25 font-semibold'
+                                        : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800/60'
+                                    }`
+                                }
+                            >
+                                <Icon className="w-4 h-4 shrink-0" />
+                                {sidebarOpen && <span className="truncate">{item.name}</span>}
+                            </NavLink>
+                        );
+                    })}
+                </nav>
+
+                {/* User Card with Token-derived info & Identity Server Logout */}
+                <div className="p-3 border-t border-slate-800/80 bg-[#0d121f]/90">
+                    <div className="flex items-center gap-3">
+                        <div className="h-9 w-9 shrink-0 rounded-full bg-blue-600/20 border border-blue-500/40 flex items-center justify-center font-bold text-xs text-blue-400">
+                            {tokenUserName ? tokenUserName.slice(0, 2).toUpperCase() : 'AU'}
+                        </div>
+                        {sidebarOpen && (
+                            <div className="flex-1 min-w-0">
+                                <p className="text-xs font-semibold text-white truncate" title={tokenUserName}>
+                                    {tokenUserName}
+                                </p>
+                                <p className="text-[11px] text-slate-400 truncate font-mono" title={tokenUserEmail}>
+                                    {tokenUserEmail || 'STS Token User'}
+                                </p>
+                            </div>
+                        )}
+                        <button
+                            onClick={handleLogout}
+                            id="sidebar-logout-btn"
+                            className="rounded-lg p-1.5 text-slate-400 hover:text-rose-400 hover:bg-rose-950/30 transition cursor-pointer"
+                            title="Sign Out via Identity Server"
+                        >
+                            <LogOut className="w-4 h-4" />
+                        </button>
+                    </div>
+                </div>
+            </aside>
+
+            {/* Main Content Area */}
+            <div className="flex-1 flex flex-col min-w-0 overflow-hidden relative">
+                {/* Top Header */}
+                <header className="h-16 bg-[#0d121f]/90 border-b border-slate-800/80 backdrop-blur-md px-6 md:px-8 flex items-center justify-between shrink-0 z-20">
+                    <div className="flex items-center gap-3">
+                        {/* Clickable Home Link */}
+                        <Link
+                            to="/"
+                            id="header-home-link"
+                            className="flex items-center gap-1.5 text-xs font-semibold text-slate-300 hover:text-white bg-slate-900/80 hover:bg-slate-800 px-3 py-1.5 rounded-lg border border-slate-800 transition cursor-pointer shadow-xs"
+                            title="Return to Auth-Aware Home page"
+                        >
+                            <Home className="w-3.5 h-3.5 text-blue-400" />
+                            <span>Home</span>
+                        </Link>
+
+                        <ChevronRight className="w-4 h-4 text-slate-600" />
+
+                        <div className="hidden sm:flex items-center gap-2 text-xs font-medium text-slate-300">
+                            <span className="text-slate-400">Tenant:</span>
+                            <span className="bg-slate-900/80 text-slate-200 px-2.5 py-1 rounded-lg border border-slate-800 flex items-center gap-1.5 font-medium shadow-xs">
+                                <Database className="w-3.5 h-3.5 text-blue-400" />
+                                Department of Science, Innovation & Technology (DSI)
+                            </span>
+                        </div>
+
+                        <ChevronRight className="w-4 h-4 text-slate-600 hidden sm:block" />
+
+                        <span className="text-xs font-medium text-emerald-400 bg-emerald-500/10 px-2.5 py-0.5 rounded-full border border-emerald-500/30 flex items-center gap-1.5 shadow-xs">
+                            <ShieldCheck className="w-3.5 h-3.5 text-emerald-400" />
+                            Authenticated Session
+                        </span>
+                    </div>
+
+                    {/* User Name & Email derived from token, plus Identity Server signout */}
+                    <div className="relative flex items-center gap-3">
+                        <div className="text-right hidden sm:block">
+                            <p className="text-xs font-semibold text-white truncate max-w-[200px]" title={tokenUserName}>
+                                {tokenUserName}
+                            </p>
+                            <p className="text-[11px] text-slate-400 font-mono truncate max-w-[200px]" title={tokenUserEmail}>
+                                {tokenUserEmail}
+                            </p>
+                        </div>
+
+                        <button
+                            onClick={() => setUserMenuOpen(!userMenuOpen)}
+                            id="header-user-menu-btn"
+                            className="h-9 w-9 rounded-full bg-blue-600/20 border border-blue-500/40 hover:border-blue-400 flex items-center justify-center font-bold text-xs text-blue-400 transition cursor-pointer shadow-md shadow-blue-500/10"
+                            title="User Account"
+                        >
+                            {tokenUserName ? tokenUserName.slice(0, 2).toUpperCase() : <User className="w-4 h-4" />}
+                        </button>
+
+                        {/* Dropdown Menu */}
+                        {userMenuOpen && (
+                            <div
+                                className="absolute right-0 top-12 w-64 bg-[#0f1523] border border-slate-800 rounded-2xl shadow-2xl p-3 z-50 space-y-2 animate-in fade-in slide-in-from-top-2 backdrop-blur-md"
+                                onMouseLeave={() => setUserMenuOpen(false)}
+                            >
+                                <div className="p-2.5 border-b border-slate-800">
+                                    <p className="text-xs font-semibold text-white">{tokenUserName}</p>
+                                    <p className="text-[11px] text-slate-400 font-mono truncate">{tokenUserEmail}</p>
+                                    {sub && <p className="text-[10px] text-slate-500 font-mono mt-1">sub: {sub}</p>}
+                                </div>
+
+                                <Link
+                                    to="/"
+                                    onClick={() => setUserMenuOpen(false)}
+                                    className="flex items-center gap-2 px-3 py-2 text-xs text-slate-300 hover:text-white hover:bg-slate-800/60 rounded-xl transition"
+                                >
+                                    <Home className="w-3.5 h-3.5 text-blue-400" />
+                                    <span>Go to Home Page</span>
+                                </Link>
+
+                                <button
+                                    onClick={handleLogout}
+                                    id="dropdown-logout-btn"
+                                    className="w-full flex items-center gap-2 px-3 py-2 text-xs text-rose-400 hover:bg-rose-950/30 rounded-xl transition cursor-pointer"
+                                >
+                                    <LogOut className="w-3.5 h-3.5" />
+                                    <span>Sign Out via Identity Server</span>
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                </header>
+
+                {/* Viewport with Landing Page ambient dot grid and glow */}
+                <main className="flex-1 overflow-y-auto p-6 md:p-8 bg-[#090d16] relative text-slate-100">
+                    <div
+                        className="absolute inset-0 pointer-events-none opacity-15"
+                        style={{
+                            backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)',
+                            backgroundSize: '32px 32px',
+                        }}
+                    />
+                    <div className="absolute -top-24 -left-24 w-80 h-80 bg-blue-600/10 rounded-full blur-3xl pointer-events-none" />
+                    <div className="absolute top-1/2 -right-24 w-80 h-80 bg-indigo-600/10 rounded-full blur-3xl pointer-events-none" />
+
+                    <div className="relative z-10">
+                        <Outlet />
+                    </div>
+                </main>
+
+                {/* Bottom Status Footer */}
+                <footer className="h-10 px-6 md:px-8 border-t border-slate-800/80 bg-[#0d121f]/90 flex items-center justify-between text-[11px] text-slate-400 shrink-0">
+                    <span>Project Financial Management (PFM) System</span>
+                    <span className="text-slate-400 font-medium">Duende STS OIDC Secure Session</span>
+                </footer>
+            </div>
+        </div>
+    );
+};
@@ -0,0 +1,67 @@
+import React, { ReactNode, useEffect } from 'react';
+import { X } from 'lucide-react';
+
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    subtitle?: string;
+    children: ReactNode;
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+}
+
+export const Modal: React.FC<ModalProps> = ({
+    isOpen,
+    onClose,
+    title,
+    subtitle,
+    children,
+    maxWidth = 'lg',
+}) => {
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') onClose();
+        };
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            window.addEventListener('keydown', handleKeyDown);
+        }
+        return () => {
+            document.body.style.overflow = 'unset';
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    const maxWidthClass = {
+        sm: 'max-w-sm',
+        md: 'max-w-md',
+        lg: 'max-w-lg',
+        xl: 'max-w-xl',
+        '2xl': 'max-w-2xl',
+    }[maxWidth];
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-150">
+            <div
+                className={`relative w-full ${maxWidthClass} bg-[#0f1523] rounded-2xl shadow-2xl border border-slate-800/90 overflow-hidden flex flex-col max-h-[90vh] text-slate-200`}
+                onClick={(e) => e.stopPropagation()}
+            >
+                <div className="flex items-start justify-between p-5 border-b border-slate-800/80 bg-[#0d121f]/90">
+                    <div>
+                        <h3 className="text-lg font-semibold text-white tracking-tight">{title}</h3>
+                        {subtitle && <p className="text-xs text-slate-400 mt-0.5">{subtitle}</p>}
+                    </div>
+                    <button
+                        onClick={onClose}
+                        className="rounded-xl p-1.5 text-slate-400 hover:text-white hover:bg-slate-800/60 transition cursor-pointer"
+                    >
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+                <div className="p-6 overflow-y-auto flex-1 bg-[#0f1523]">{children}</div>
+            </div>
+        </div>
+    );
+};
@@ -0,0 +1,79 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+import { CheckCircle2, AlertCircle, Info, X } from 'lucide-react';
+
+export type ToastType = 'success' | 'error' | 'info';
+
+interface ToastItem {
+    id: string;
+    type: ToastType;
+    title: string;
+    message?: string;
+}
+
+interface ToastContextType {
+    toast: (type: ToastType, title: string, message?: string) => void;
+    success: (title: string, message?: string) => void;
+    error: (title: string, message?: string) => void;
+    info: (title: string, message?: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const ToastProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const [toasts, setToasts] = useState<ToastItem[]>([]);
+
+    const removeToast = (id: string) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    };
+
+    const addToast = (type: ToastType, title: string, message?: string) => {
+        const id = Math.random().toString(36).substring(2, 9);
+        setToasts((prev) => [...prev, { id, type, title, message }]);
+        setTimeout(() => removeToast(id), 5000);
+    };
+
+    const success = (title: string, message?: string) => addToast('success', title, message);
+    const error = (title: string, message?: string) => addToast('error', title, message);
+    const info = (title: string, message?: string) => addToast('info', title, message);
+
+    return (
+        <ToastContext.Provider value={{ toast: addToast, success, error, info }}>
+            {children}
+            <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-md w-full pointer-events-none p-2">
+                {toasts.map((t) => (
+                    <div
+                        key={t.id}
+                        className={`pointer-events-auto flex items-start gap-3 p-4 rounded-xl border shadow-2xl transition-all duration-200 bg-[#141414] ${t.type === 'success'
+                                ? 'border-green-500/30 text-gray-200'
+                                : t.type === 'error'
+                                    ? 'border-rose-500/30 text-gray-200'
+                                    : 'border-indigo-500/30 text-gray-200'
+                            }`}
+                    >
+                        {t.type === 'success' && <CheckCircle2 className="w-5 h-5 text-green-400 shrink-0 mt-0.5" />}
+                        {t.type === 'error' && <AlertCircle className="w-5 h-5 text-rose-400 shrink-0 mt-0.5" />}
+                        {t.type === 'info' && <Info className="w-5 h-5 text-indigo-400 shrink-0 mt-0.5" />}
+                        <div className="flex-1">
+                            <h4 className="text-sm font-semibold text-white">{t.title}</h4>
+                            {t.message && <p className="text-xs mt-0.5 text-gray-400 leading-relaxed">{t.message}</p>}
+                        </div>
+                        <button
+                            onClick={() => removeToast(t.id)}
+                            className="text-gray-400 hover:text-white p-0.5 rounded transition-colors"
+                        >
+                            <X className="w-4 h-4" />
+                        </button>
+                    </div>
+                ))}
+            </div>
+        </ToastContext.Provider>
+    );
+};
+
+export const useToast = () => {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    return context;
+};