From 48edfa1cbbd0872d83328ff4b374961fd2f28113 Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@litecharms.co.za>
Date: Sun, 25 Oct 2026 08:26:37 +0200
Subject: [PATCH] Moved top bar to top

---
 .../components/dashboard/DashboardPage.tsx    | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx b/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx
index f0925a5..7a4a7c4 100644
--- a/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx
+++ b/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx
@@ -29,6 +29,7 @@ import {
   Award as AwardIcon,
   Info,
   Sparkles,
+  Infinity as InfinityIcon,
 } from 'lucide-react';
 import { useAuth } from '../../auth/AuthProvider';
 import { useRbac } from '../../auth/rbac';
@@ -720,7 +721,7 @@ export function DashboardPage() {
   const navTabs: { id: NavTab; label: string }[] = [
     { id: 'dashboard', label: 'Dashboard' },
     { id: 'messages', label: 'Messages' },
-    { id: 'contracts', label: 'Orders' },
+    { id: 'contracts', label: 'Awards' },
     { id: 'analytics', label: 'Analytics' },
     { id: 'documents', label: 'Earnings' },
   ];
@@ -760,22 +761,21 @@ export function DashboardPage() {
   }, [inboxNotifications, partnerSummary]);
 
   return (
-    <div className="min-h-screen w-full bg-[#090D16] text-slate-100 p-2 sm:p-5 lg:p-7 selection:bg-indigo-500/30 selection:text-indigo-200">
+    <div className="min-h-screen w-full bg-[#090D16] text-slate-100 p-3 sm:p-6 lg:p-8 selection:bg-indigo-500/30 selection:text-indigo-200">
       {/* =====================================================================
-          MAIN DASHBOARD CONTAINER — FLOATING ELEVATED CANVAS (Pixel Perfect Dribbble layout)
+          TOP NAVIGATION BAR — STANDALONE ELEVATED CONTAINER SEPARATED FROM BODY
       ===================================================================== */}
-      <div className="mx-auto max-w-[1460px] rounded-[28px] sm:rounded-[36px] bg-[#0E1526] border border-white/[0.08] shadow-[0_30px_70px_rgba(0,0,0,0.65)] p-5 sm:p-8 lg:p-10">
-        
-        {/* =====================================================================
-            TOP HEADER BAR (Replicating the Dribbble Header: Logo, Nav, Search, Bell, Profile)
-        ===================================================================== */}
-        <header className="flex flex-wrap items-center justify-between gap-4 pb-6 sm:pb-8 border-b border-white/[0.06]">
+      <header className="mx-auto max-w-[1460px] rounded-[24px] sm:rounded-[28px] bg-[#0E1526] border border-white/[0.08] shadow-[0_15px_45px_rgba(0,0,0,0.5)] px-5 sm:px-8 py-3.5 mb-6 sm:mb-8 transition-all">
+        <div className="flex flex-wrap items-center justify-between gap-4">
           {/* Left: Brand Glyph & Horizontal Navigation Links */}
           <div className="flex items-center gap-6 sm:gap-10">
-            {/* Overlapping double rounded squares glyph from Dribbble design */}
-            <div className="relative w-8 h-8 flex items-center justify-center shrink-0 cursor-pointer" onClick={() => setActiveTab('dashboard')}>
-              <div className="w-5 h-5 rounded-[5px] border-2 border-indigo-400 absolute top-1 right-1" />
-              <div className="w-5 h-5 rounded-[5px] border-2 border-indigo-400 bg-[#0E1526] absolute bottom-1 left-1" />
+            {/* Flat black infinity icon rotated with top lobe pointing to 2 o'clock */}
+            <div
+              className="w-8 h-8 rounded-xl bg-white flex items-center justify-center shrink-0 cursor-pointer shadow-sm hover:opacity-90 transition-opacity"
+              onClick={() => setActiveTab('dashboard')}
+              title="Dashboard Home"
+            >
+              <InfinityIcon className="w-5 h-5 text-black -rotate-[30deg]" strokeWidth={2.75} />
             </div>
 
             {/* Nav Tabs with bottom underline on active */}
@@ -959,10 +959,10 @@ export function DashboardPage() {
               )}
             </div>
           </div>
-        </header>
+        </div>
 
         {/* Mobile Navigation bar for smaller screens */}
-        <div className="flex md:hidden items-center gap-2 pt-4 pb-1 overflow-x-auto">
+        <div className="flex md:hidden items-center gap-2 pt-3 border-t border-white/[0.06] mt-3 overflow-x-auto">
           {navTabs.map(tab => (
             <button
               key={tab.id}
@@ -978,11 +978,13 @@ export function DashboardPage() {
             </button>
           ))}
         </div>
+      </header>
 
-        {/* =====================================================================
-            BODY CONTENT
-        ===================================================================== */}
-        <div className="pt-8">
+      {/* =====================================================================
+          MAIN BODY SECTION (Separated from Top Bar)
+      ===================================================================== */}
+      <main className="mx-auto max-w-[1460px]">
+        <div>
           {isLoadingApplicantData ? (
             <div className="py-24 flex flex-col items-center justify-center gap-4 text-center">
               <div className="h-10 w-10 animate-spin rounded-full border-2 border-indigo-400 border-t-transparent" />
@@ -1735,7 +1737,7 @@ export function DashboardPage() {
             </div>
           )}
         </div>
-      </div>
+      </main>
 
       {/* =====================================================================
           MODAL 1: PROJECT WORKSPACE (From "View Details" Button)
-- 
2.47.3