Fixed UI inconsistencies

2026-09-27 12:04:22 +02:00
parent 36e5d3d7c8
commit e6fdcf3d0d
11 changed files with 1085 additions and 586 deletions
@@ -14,6 +14,7 @@ import {
  Clock,
  ShieldAlert,
  RotateCcw,
+  LayoutDashboard,
 } from 'lucide-react';
 import {
  getDashboard,
@@ -344,59 +345,65 @@ export const ExecutiveDashboard: React.FC = () => {

  return (
    <div className="space-y-6 max-w-7xl mx-auto">
-      {/* Page Title & Filter Bar */}
-      <div className="bg-[#0d121f]/90 p-5 sm:p-6 rounded-2xl border border-slate-800/80 backdrop-blur-md shadow-xl space-y-4">
-        {/* Top Tier: Title, Status Badge, and Primary Actions */}
-        <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
-          <div>
-            <div className="flex items-center gap-2.5 flex-wrap">
-              <h2 className="text-xl sm:text-2xl font-bold text-white tracking-tight">
-                Executive Portfolio Dashboard
-              </h2>
-              <HelpTooltip
-                title="Executive Dashboard Overview"
-                content="Macro-level command center showing aggregated national portfolio commitments, actual tranche disbursements, delivery pace, and critical project escalations."
-                size="sm"
-                placement="bottom"
-              />
-              <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-blue-400 bg-blue-500/10 px-2.5 py-0.5 rounded-full border border-blue-500/30">
-                <span className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" />
-                Live Portfolio Feed
-              </span>
+      {/* Header Banner */}
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-gradient-to-r from-[#0d1322] via-[#0f172a] to-[#0d1322] p-6 sm:p-8 rounded-3xl border border-slate-800/80 shadow-2xl relative overflow-hidden">
+        <div className="absolute -right-10 -bottom-10 w-60 h-60 bg-blue-600/10 rounded-full blur-3xl pointer-events-none" />
+        <div className="space-y-2 relative z-10">
+          <div className="flex items-center gap-3">
+            <div className="h-12 w-12 rounded-2xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center text-blue-400 shadow-lg shadow-blue-500/10">
+              <LayoutDashboard className="w-6 h-6" />
+            </div>
+            <div>
+              <div className="flex items-center gap-2.5 flex-wrap">
+                <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-white flex items-center gap-2.5">
+                  Executive Portfolio Dashboard
+                </h1>
+                <HelpTooltip
+                  title="Executive Dashboard Overview"
+                  content="Macro-level command center showing aggregated national portfolio commitments, actual tranche disbursements, delivery pace, and critical project escalations."
+                  size="sm"
+                  placement="bottom"
+                />
+                <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-blue-400 bg-blue-500/10 px-2.5 py-0.5 rounded-full border border-blue-500/30">
+                  <span className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" />
+                  Live Portfolio Feed
+                </span>
+              </div>
+              <p className="text-xs sm:text-sm text-slate-400 mt-1">
+                Real-time portfolio overview, disbursement tracking, risk heatmap, and projects requiring governance action.
+              </p>
            </div>
-            <p className="text-xs sm:text-sm text-slate-400 mt-1">
-              Real-time portfolio overview, disbursement tracking, risk heatmap, and projects requiring governance action.
-            </p>
-          </div>
-
-          <div className="flex items-center gap-2.5 shrink-0 self-start lg:self-center">
-            {isFiltered && (
-              <button
-                type="button"
-                onClick={resetFilters}
-                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-amber-300 bg-amber-500/10 hover:bg-amber-500/20 border border-amber-500/30 rounded-xl transition cursor-pointer shadow-xs"
-                title="Reset all filters to default"
-              >
-                <RotateCcw className="w-3.5 h-3.5" />
-                <span>Reset Filters</span>
-              </button>
-            )}
-
-            <button
-              type="button"
-              onClick={refetchAll}
-              disabled={isFetching}
-              className="inline-flex items-center gap-1.5 px-3.5 py-1.5 text-xs font-semibold text-slate-200 hover:text-white bg-slate-900 hover:bg-slate-800 border border-slate-700/80 rounded-xl transition cursor-pointer shadow-xs disabled:opacity-50"
-              title="Refresh dashboard metrics"
-            >
-              <RefreshCw className={`w-3.5 h-3.5 ${isFetching ? 'animate-spin text-blue-400' : 'text-slate-400'}`} />
-              <span>{isFetching ? 'Refreshing...' : 'Refresh'}</span>
-            </button>
          </div>
        </div>

-        {/* Dedicated Filter Toolbar */}
-        <div className="pt-4 border-t border-slate-800/80 flex flex-wrap items-center gap-3">
+        <div className="flex items-center gap-2.5 shrink-0 relative z-10 self-start md:self-center">
+          {isFiltered && (
+            <button
+              type="button"
+              onClick={resetFilters}
+              className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-amber-300 bg-amber-500/10 hover:bg-amber-500/20 border border-amber-500/30 rounded-xl transition cursor-pointer shadow-xs"
+              title="Reset all filters to default"
+            >
+              <RotateCcw className="w-3.5 h-3.5" />
+              <span>Reset Filters</span>
+            </button>
+          )}
+
+          <button
+            type="button"
+            onClick={refetchAll}
+            disabled={isFetching}
+            className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-slate-200 hover:text-white bg-slate-900/90 hover:bg-slate-800 border border-slate-700/80 rounded-xl transition cursor-pointer shadow-xs disabled:opacity-50"
+            title="Refresh dashboard metrics"
+          >
+            <RefreshCw className={`w-3.5 h-3.5 ${isFetching ? 'animate-spin text-blue-400' : 'text-slate-400'}`} />
+            <span>{isFetching ? 'Refreshing...' : 'Refresh'}</span>
+          </button>
+        </div>
+      </div>
+
+      {/* Filter Toolbar */}
+      <div className="bg-[#0f1523]/80 backdrop-blur-md p-4 rounded-2xl border border-slate-800/80 shadow-xl flex flex-wrap items-center gap-3">
          <div className="flex items-center gap-2 text-xs font-semibold text-slate-300 pr-1">
            <Filter className="w-3.5 h-3.5 text-blue-400" />
            <span>Filters:</span>
@@ -479,7 +486,6 @@ export const ExecutiveDashboard: React.FC = () => {
            />
          </div>
        </div>
-      </div>

      {/* 6 Headline Portfolio KPI Cards */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">