ifritechnologies/pfm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved top bar to top #173

Merged
khwezi merged 1 commits from finishline into main 2026-10-25 08:27:24 +02:00
Conversation 0 Commits 1 Files Changed 1
+22 -20
1 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx
+22 -20
View File
@@ -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)