Refactored UI and compose file

PostFundManagement.ConsoleUI/src/components/ui/BrandLogo.tsx

@@ -0,0 +1,188 @@
+import React, { useId } from 'react';
+
+export interface BrandLogoProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+  variant?: 'icon-only' | 'full';
+  showGlow?: boolean;
+  className?: string;
+  animateOnHover?: boolean;
+}
+
+const sizeMap = {
+  xs: 20,
+  sm: 28,
+  md: 36,
+  lg: 44,
+  xl: 56,
+};
+
+/**
+ * Modern, stylized SVG brand emblem representing Post Fund Management (PFM).
+ * Features an isometric kinetic nexus with three interlocking governance facets:
+ * 1. Top Canopy: Governance, Strategy & Portfolios (Radiant Indigo / Violet)
+ * 2. Left Vault: Capital, Grants & Disbursement Assurance (Electric Sapphire)
+ * 3. Right Wing: Milestones, Evidence & Impact Delivery (Cyan to Emerald)
+ * 4. Center Core: Luminous Floating Diamond Milestone Star
+ */
+export const BrandLogo: React.FC<BrandLogoProps> = ({
+  size = 'md',
+  variant = 'icon-only',
+  showGlow = true,
+  className = '',
+  animateOnHover = true,
+}) => {
+  const uniqueId = useId().replace(/:/g, '');
+  const pixelSize = typeof size === 'number' ? size : sizeMap[size] || 36;
+
+  const glowId = `pfm-ambient-${uniqueId}`;
+  const topGradId = `pfm-top-${uniqueId}`;
+  const leftGradId = `pfm-left-${uniqueId}`;
+  const rightGradId = `pfm-right-${uniqueId}`;
+  const coreGradId = `pfm-core-${uniqueId}`;
+  const filterId = `pfm-filter-${uniqueId}`;
+
+  return (
+    <div
+      className={`inline-flex items-center gap-3 select-none ${
+        animateOnHover ? 'group cursor-pointer' : ''
+      } ${className}`}
+    >
+      <div
+        style={{ width: pixelSize, height: pixelSize }}
+        className={`relative shrink-0 flex items-center justify-center transition-transform duration-300 ${
+          animateOnHover ? 'group-hover:scale-105' : ''
+        }`}
+      >
+        {showGlow && (
+          <div
+            className="absolute inset-0 rounded-2xl bg-blue-500/20 blur-md pointer-events-none transition-opacity duration-300 group-hover:opacity-100 opacity-60"
+          />
+        )}
+        <svg
+          viewBox="0 0 64 64"
+          width={pixelSize}
+          height={pixelSize}
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="relative z-10 w-full h-full drop-shadow-sm"
+        >
+          <defs>
+            {/* Ambient Radial Glow */}
+            <radialGradient id={glowId} cx="50%" cy="50%" r="50%">
+              <stop offset="0%" stopColor="#38bdf8" stopOpacity="0.4" />
+              <stop offset="70%" stopColor="#2563eb" stopOpacity="0.12" />
+              <stop offset="100%" stopColor="#1e1b4b" stopOpacity="0" />
+            </radialGradient>
+
+            {/* Top facet: Governance & Portfolios (Indigo / Radiant Violet) */}
+            <linearGradient id={topGradId} x1="12" y1="8" x2="52" y2="26" gradientUnits="userSpaceOnUse">
+              <stop offset="0%" stopColor="#a5b4fc" />
+              <stop offset="35%" stopColor="#6366f1" />
+              <stop offset="100%" stopColor="#4338ca" />
+            </linearGradient>
+
+            {/* Left facet: Capital & Disbursement Vault (Electric Sapphire) */}
+            <linearGradient id={leftGradId} x1="10" y1="22" x2="30" y2="56" gradientUnits="userSpaceOnUse">
+              <stop offset="0%" stopColor="#38bdf8" />
+              <stop offset="45%" stopColor="#2563eb" />
+              <stop offset="100%" stopColor="#1e40af" />
+            </linearGradient>
+
+            {/* Right facet: Milestones, Evidence & Impact Delivery (Cyan to Emerald) */}
+            <linearGradient id={rightGradId} x1="34" y1="28" x2="54" y2="56" gradientUnits="userSpaceOnUse">
+              <stop offset="0%" stopColor="#22d3ee" />
+              <stop offset="50%" stopColor="#06b6d4" />
+              <stop offset="100%" stopColor="#10b981" />
+            </linearGradient>
+
+            {/* Center Radiant Diamond */}
+            <linearGradient id={coreGradId} x1="27" y1="27" x2="37" y2="37" gradientUnits="userSpaceOnUse">
+              <stop offset="0%" stopColor="#ffffff" />
+              <stop offset="40%" stopColor="#e0f2fe" />
+              <stop offset="100%" stopColor="#38bdf8" />
+            </linearGradient>
+
+            {/* Core luminous glow filter */}
+            <filter id={filterId} x="-20%" y="-20%" width="140%" height="140%">
+              <feGaussianBlur stdDeviation="1.5" result="blur" />
+              <feComposite in="SourceGraphic" in2="blur" operator="over" />
+            </filter>
+          </defs>
+
+          {/* Deep Contrast Foundation Disk */}
+          <circle cx="32" cy="32" r="31" fill="#090d16" />
+          <circle cx="32" cy="32" r="30" stroke="#1e293b" strokeWidth="1" />
+          <circle cx="32" cy="32" r="28" fill={`url(#${glowId})`} />
+
+          {/* Outer Hexagonal Structural Shield Outline */}
+          <path
+            d="M32 6.5 L53.5 19 C55 19.8 56 21.5 56 23.2 L56 40.8 C56 42.5 55 44.2 53.5 45 L32 57.5 C30.5 58.3 28.5 58.3 27 57.5 L5.5 45 C4 44.2 3 42.5 3 40.8 L3 23.2 C3 21.5 4 19.8 5.5 19 L27 6.5 C28.5 5.7 30.5 5.7 32 6.5 Z"
+            stroke="#3b82f6"
+            strokeOpacity="0.35"
+            strokeWidth="1.2"
+            fill="none"
+          />
+
+          {/* Facet 1: Top Canopy (Governance / Oversight Architecture) */}
+          <path
+            d="M32 9 L51.5 20.2 L43 25.2 L32 18.8 L21 25.2 L12.5 20.2 Z"
+            fill={`url(#${topGradId})`}
+          />
+
+          {/* Facet 2: Left Vault (Fund Management & Capital Allocation) */}
+          <path
+            d="M10 23 L19.2 28.4 L19.2 44.5 L30 50.8 L30 55.5 L10 43.8 Z"
+            fill={`url(#${leftGradId})`}
+          />
+
+          {/* Facet 3: Right Wing (Milestone Performance & Impact Assurance) */}
+          <path
+            d="M54 23 L54 43.8 L34 55.5 L34 50.8 L44.8 44.5 L44.8 28.4 Z"
+            fill={`url(#${rightGradId})`}
+          />
+
+          {/* Center Geometric Hub (The PFM Nexus Plate) */}
+          <path
+            d="M22 28.5 L32 22.8 L42 28.5 L42 35.5 L32 41.2 L22 35.5 Z"
+            fill="#0b1120"
+            stroke="#334155"
+            strokeWidth="1"
+          />
+
+          {/* Kinetic Stepped Prisms */}
+          <path
+            d="M25 31.5 L32 27.5 L39 31.5 L32 35.5 Z"
+            fill={`url(#${topGradId})`}
+            opacity="0.9"
+          />
+          <path
+            d="M25 37 L32 41 L39 37 L32 33 L25 37 Z"
+            fill={`url(#${rightGradId})`}
+            opacity="0.9"
+          />
+
+          {/* Center Radiant Milestone Diamond */}
+          <polygon
+            points="32,27 36.5,32 32,37 27.5,32"
+            fill={`url(#${coreGradId})`}
+            filter={`url(#${filterId})`}
+          />
+
+          {/* Center Pure White Optical Star Point */}
+          <circle cx="32" cy="32" r="1.5" fill="#ffffff" />
+        </svg>
+      </div>
+
+      {variant === 'full' && (
+        <div className="flex flex-col min-w-0">
+          <span className="font-bold 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">
+            Post-Fund Governance
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};

PostFundManagement.ConsoleUI/src/components/ui/Modal.tsx

@@ -2,66 +2,66 @@ 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';
+  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',
+  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]);
+  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;
+  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];
+  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>
+  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>
+  );
 };

PostFundManagement.ConsoleUI/src/components/ui/Toast.tsx

@@ -4,76 +4,77 @@ import { CheckCircle2, AlertCircle, Info, X } from 'lucide-react';
 export type ToastType = 'success' | 'error' | 'info';
 
 interface ToastItem {
-    id: string;
-    type: ToastType;
-    title: string;
-    message?: string;
+  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;
+  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 [toasts, setToasts] = useState<ToastItem[]>([]);
 
-    const removeToast = (id: string) => {
-        setToasts((prev) => prev.filter((t) => t.id !== id));
-    };
+  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 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);
+  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>
-                ))}
+  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>
-        </ToastContext.Provider>
-    );
+            <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;
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
 };