Merge pull request #103 from Hestia-Homes/feature/make_button_for_create_a_real_survey

Book a survey button has been moved

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import {
   Cog6ToothIcon,
   NewspaperIcon,
@@ -8,6 +9,7 @@ import {
   SunIcon,
   CircleStackIcon,
   HeartIcon,
+  CalendarDaysIcon,
 } from "@heroicons/react/24/outline";
 import {
   NavigationMenu,
@@ -15,12 +17,17 @@ import {
   NavigationMenuList,
   NavigationMenuLink,
 } from "@/app/shadcn_components/ui/navigation-menu";
+import { Button } from "@/app/shadcn_components/ui/button";
 import { cva } from "class-variance-authority";
 import { getUploadedFile } from "@/app/db/surveyDB/schema/surveyDB";
+import BookSurveyModal from "@/app/portfolio/[slug]/components/BookSurveyModal";
+import BookingSuccessToast from "@/app/portfolio/[slug]/components/BookingSuccessToast";
+import { PropertyMeta } from "@/app/db/schema/property";
 
 interface ToolbarProps {
   propertyId: string;
   portfolioId: string;
+  propertyMeta: PropertyMeta
   decentHomes: getUploadedFile;
 }
 
@@ -50,7 +57,6 @@ const navigationMenuTriggerStyle = cva(
     "disabled:opacity-50",
     "data-[active]:bg-accent/50",
     "data-[state=open]:bg-gray-200",
-    //
     "text-gray-900",
   ].join(" ")
 );
@@ -58,8 +64,12 @@ const navigationMenuTriggerStyle = cva(
 export function Toolbar({
   propertyId,
   portfolioId,
+  propertyMeta,
   decentHomes,
 }: ToolbarProps) {
+  const [openModal, setOpenModal] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+
   function handleClickSettings() {
     console.log("Settings were clicked, implement me");
   }
@@ -115,33 +125,67 @@ export function Toolbar({
   );
 
   return (
-    <NavigationMenu>
-      <NavigationMenuLink
-        className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
-        href={`/portfolio/${portfolioId}/building-passport/${propertyId}`}
-      >
-        <HomeModernIcon className="h-4 w-4 mr-2" />
-        Summary
-      </NavigationMenuLink>
+    <>
+      <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" />
+            Summary
+          </NavigationMenuLink>
 
-      <NavigationMenuList>
-        {preAssessmentReportButton}
-        {/* We only show decent homes button if decent homes is not an empty object */}
-        {Object.keys(decentHomes).length > 0 &&
-          decentHomes.uprn &&
-          decentHomesButton}
-        {solarAnalysisButton}
-        {recommendationsButton}
-        {documentsButton}
+          <NavigationMenuList>
+            {preAssessmentReportButton}
+            {Object.keys(decentHomes).length > 0 &&
+              decentHomes.uprn &&
+              decentHomesButton}
+            {solarAnalysisButton}
+            {recommendationsButton}
+            {documentsButton}
 
-        <NavigationMenuItem
-          className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
-          onClick={handleClickSettings}
-        >
-          <Cog6ToothIcon className="h-4 w-4 mr-2" />
-          Settings
-        </NavigationMenuItem>
-      </NavigationMenuList>
-    </NavigationMenu>
+            <NavigationMenuItem
+              className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
+              onClick={handleClickSettings}
+            >
+              <Cog6ToothIcon className="h-4 w-4 mr-2" />
+              Settings
+            </NavigationMenuItem>
+          </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 a Survey
+          </Button>
+        </div>
+      </div>
+
+      {/* ✅ Modal */}
+      {openModal && (
+        <BookSurveyModal
+          open={openModal}
+          onOpenChange={setOpenModal}
+          propertyId={propertyId}
+          portfolioId={portfolioId}
+          address={propertyMeta.address}
+          onSuccess={() => setShowToast(true)}
+        />
+      )}
+
+      {/* ✅ Toast */}
+      <BookingSuccessToast
+        show={showToast}
+        onClose={() => setShowToast(false)}
+        message="Survey Booked Successfully!"
+        subtext="Your Survey Request is with Domna and we will be in contact. 🎉"
+      />
+    </>
   );
 }

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

@@ -60,6 +60,7 @@ export default async function DashboardLayout(props: {
           <Toolbar
             propertyId={propertyId}
             portfolioId={portfolioId}
+            propertyMeta={propertyMeta}
             decentHomes={decentHomes}
           />
         </div>

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

@@ -67,4 +67,4 @@ export default async function BuildingPassportHome(
       </div>
     </div>
   );
-}
+}

src/app/portfolio/[slug]/components/BookSurveyModal.tsx

@@ -17,7 +17,7 @@ interface BookSurveyModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   propertyId: bigint;
-  portfolioId: bigint;
+  portfolioId: string;
   address: string;
   onSuccess?: () => void; // ✅ fix: properly declare optional callback
 }
@@ -41,7 +41,7 @@ export default function BookSurveyModal({
           pipelineId: "2400089278",
           dealStageId: "3288115388",
           propertyId: propertyId.toString(),
-          portfolioId: portfolioId.toString(),
+          portfolioId: portfolioId,
         }),
       });
 

src/app/portfolio/[slug]/components/propertyTableColumns.tsx

@@ -21,9 +21,6 @@ import {
   PropertyToRecommendation,
   PropertyWithRelations,
 } from "@/app/db/schema/property";
-import BookSurveyModal from "./BookSurveyModal";
-import BookingSuccessToast from "./BookingSuccessToast";
-import { useState } from "react";
 
 
 interface DataTableColumnHeaderProps<TData, TValue>
@@ -218,10 +215,7 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
   {
     id: "actions",
     cell: ({ row }) => {
-      const [openModal, setOpenModal] = useState(false);
-      const [showToast, setShowToast] = useState(false);
       const property = row.original;
-      const address = String(row.getValue("address"));
       const propertyId = property.id;
       const portfolioId = property.portfolioId;
 
@@ -246,9 +240,6 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
                 <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                <DropdownMenuItem onClick={()=> setOpenModal(true)}>
-                  Book a survey
-                </DropdownMenuItem>
                 <DropdownMenuItem
                   //   onClick={() => navigator.clipboard.writeText(payment.id)}
                   className="text-gray-700 cursor-pointer"
@@ -268,25 +259,6 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
-            {/* ✅ Render modal outside dropdown context */}
-            {openModal && (
-              <BookSurveyModal 
-                open={openModal} 
-                onOpenChange={setOpenModal} 
-                propertyId={propertyId}
-                portfolioId={portfolioId}
-                address={address}
-                onSuccess={() => setShowToast(true)}
-              />
-            )}
-
-            {/* 💥 Toast */}
-            <BookingSuccessToast
-              show={showToast}
-              onClose={() => setShowToast(false)}
-              message="Survey Booked Successfully!"
-              subtext="Your Survey Request is with Domna and will be in contact with you shortly. 🎉"
-            />
         </>
       );
     },