modified toolbar

src/app/components/building-passport/Toolbar.tsx

@@ -1,22 +1,17 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useTransition } from "react";
+import { useRouter, usePathname } from "next/navigation";
 import {
   NewspaperIcon,
   HomeModernIcon,
   WrenchScrewdriverIcon,
-  SunIcon,
   CircleStackIcon,
   HeartIcon,
+  ArrowPathIcon,
+  ClipboardDocumentCheckIcon,
 } from "@heroicons/react/24/outline";
-import {
-  NavigationMenu,
-  NavigationMenuItem,
-  NavigationMenuList,
-  NavigationMenuLink,
-} from "@/app/shadcn_components/ui/navigation-menu";
-import { Button } from "@/app/shadcn_components/ui/button";
-import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 import { getUploadedFile } from "@/app/db/surveyDB/schema/surveyDB";
 import BookSurveyModal from "@/app/portfolio/[slug]/components/BookSurveyModal";
 import SuccessToast from "@/app/portfolio/[slug]/components/SuccessToast";
@@ -29,36 +24,6 @@ interface ToolbarProps {
   decentHomes: getUploadedFile;
 }
 
-const navigationMenuTriggerStyle = cva(
-  [
-    "bg-gray-50",
-    "cursor-pointer",
-    "group",
-    "inline-flex",
-    "h-10",
-    "w-max",
-    "items-center",
-    "justify-center",
-    "rounded-md",
-    "bg-background",
-    "px-4",
-    "py-2",
-    "text-sm",
-    "font-medium",
-    "transition-colors",
-    "hover:bg-gray-200",
-    "hover:text-accent-foreground",
-    "focus:bg-accent",
-    "focus:text-accent-foreground",
-    "focus:outline-none",
-    "disabled:pointer-events-none",
-    "disabled:opacity-50",
-    "data-[active]:bg-accent/50",
-    "data-[state=open]:bg-gray-200",
-    "text-gray-900",
-  ].join(" "),
-);
-
 export function Toolbar({
   propertyId,
   portfolioId,
@@ -67,82 +32,78 @@ export function Toolbar({
 }: ToolbarProps) {
   const [openModal, setOpenModal] = useState(false);
   const [showToast, setShowToast] = useState(false);
+  const [loadingTab, setLoadingTab] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+  const router = useRouter();
+  const pathname = usePathname();
 
-  const preAssessmentReportButton = (
-    <NavigationMenuLink
-      className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
-      href={`/portfolio/${portfolioId}/building-passport/${propertyId}/assessment`}
-    >
-      <NewspaperIcon className="h-4 w-4 mr-2" />
-      Property Details
-    </NavigationMenuLink>
-  );
+  const baseUrl = `/portfolio/${portfolioId}/building-passport/${propertyId}`;
 
-  const documentsButton = (
-    <NavigationMenuLink
-      className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
-      href={`/portfolio/${portfolioId}/building-passport/${propertyId}/documents`}
-    >
-      <CircleStackIcon className="h-4 w-4 mr-2" />
-      Documents
-    </NavigationMenuLink>
-  );
+  const tabs = [
+    { href: baseUrl, label: "Overview", icon: HomeModernIcon, exact: true },
+    { href: `${baseUrl}/assessment`, label: "Property Details", icon: NewspaperIcon },
+    ...(Object.keys(decentHomes).length > 0 && decentHomes.uprn
+      ? [{ href: `${baseUrl}/decent-homes`, label: "Decent Homes", icon: HeartIcon }]
+      : []),
+    { href: `${baseUrl}/plans`, label: "Retrofit Plans", icon: WrenchScrewdriverIcon },
+    { href: `${baseUrl}/documents`, label: "Documents", icon: CircleStackIcon },
+  ] as { href: string; label: string; icon: React.ElementType; exact?: boolean }[];
 
-  const recommendationsButton = (
-    <NavigationMenuLink
-      className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
-      href={`/portfolio/${portfolioId}/building-passport/${propertyId}/plans`}
-    >
-      <WrenchScrewdriverIcon className="h-4 w-4 mr-2" />
-      Retrofit Plans
-    </NavigationMenuLink>
-  );
-
-  const decentHomesButton = (
-    <NavigationMenuLink
-      className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
-      href={`/portfolio/${portfolioId}/building-passport/${propertyId}/decent-homes`}
-    >
-      <HeartIcon className="h-4 w-4 mr-2" />
-      Decent Homes
-    </NavigationMenuLink>
-  );
+  const handleNav = (href: string) => {
+    if (pathname === href) return;
+    setLoadingTab(href);
+    startTransition(() => {
+      router.push(href);
+    });
+  };
 
   return (
     <>
-      <div className="flex items-center justify-between w-full">
-        {/* Left side: navigation */}
-        <NavigationMenu>
-          <NavigationMenuLink
-            className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
-            href={`/portfolio/${portfolioId}/building-passport/${propertyId}`}
-          >
-            <HomeModernIcon className="h-4 w-4 mr-2" />
-            Overview
-          </NavigationMenuLink>
+      <div className="flex items-center justify-between w-full px-3 py-1.5">
+        {/* Tabs */}
+        <div className="flex items-center gap-0.5">
+          {tabs.map((tab) => {
+            const isActive = tab.exact
+              ? pathname === tab.href
+              : pathname.startsWith(tab.href);
+            const isLoading = loadingTab === tab.href && isPending;
+            const Icon = tab.icon;
 
-          <NavigationMenuList>
-            {preAssessmentReportButton}
-            {Object.keys(decentHomes).length > 0 &&
-              decentHomes.uprn &&
-              decentHomesButton}
-            {recommendationsButton}
-            {documentsButton}
-          </NavigationMenuList>
-        </NavigationMenu>
-
-        {/* ✅ Right side: Book a Survey button */}
-        <div className="mr-3">
-          <Button
-            onClick={() => setOpenModal(true)}
-            className="bg-brandblue text-white hover:bg-branddarkblue flex items-center"
-          >
-            Book an On Site Assessment
-          </Button>
+            return (
+              <button
+                key={tab.href}
+                onClick={() => handleNav(tab.href)}
+                className={cn(
+                  "relative flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 cursor-pointer",
+                  isActive
+                    ? "bg-white text-gray-900 shadow-sm"
+                    : "text-gray-500 hover:text-gray-800 hover:bg-white/70",
+                )}
+              >
+                {isLoading ? (
+                  <ArrowPathIcon className="h-4 w-4 animate-spin text-indigo-500" />
+                ) : (
+                  <Icon className="h-4 w-4" />
+                )}
+                {tab.label}
+                {isActive && (
+                  <span className="absolute bottom-0 left-2 right-2 h-0.5 rounded-full bg-blue-500" />
+                )}
+              </button>
+            );
+          })}
         </div>
+
+        {/* Book Assessment button */}
+        <button
+          onClick={() => setOpenModal(true)}
+          className="flex items-center gap-2 px-4 py-2 rounded-xl bg-gradient-to-br from-gray-900 to-gray-700 text-white text-sm font-semibold shadow-md hover:scale-[1.03] transition-transform active:scale-95 cursor-pointer"
+        >
+          <ClipboardDocumentCheckIcon className="h-4 w-4" />
+          Book Assessment
+        </button>
       </div>
 
-      {/* ✅ Modal */}
       {openModal && (
         <BookSurveyModal
           open={openModal}
@@ -154,7 +115,6 @@ export function Toolbar({
         />
       )}
 
-      {/* ✅ Toast */}
       <SuccessToast
         show={showToast}
         showConfetti={showToast}

src/app/portfolio/[slug]/building-passport/[propertyId]/layout.tsx

@@ -57,7 +57,7 @@ export default async function DashboardLayout(props: {
           </h1>
           <p className="text-xl text-gray-700">{propertyMeta.postcode}</p>
         </div>
-        <div className="col-span-12 justify-center bg-gray-50 py-2 rounded-md">
+        <div className="col-span-12 justify-center bg-white/70 backdrop-blur-md border border-gray-100 shadow-sm py-1.5 rounded-xl">
           <Toolbar
             propertyId={propertyId}
             portfolioId={portfolioId}