Added layout for portfolio only

src/app/components/portfolio/Toolbar.tsx

@@ -1,6 +1,10 @@
 "use client";
 
-import { Cog6ToothIcon, CalculatorIcon } from "@heroicons/react/24/outline";
+import {
+  Cog6ToothIcon,
+  CalculatorIcon,
+  BuildingOfficeIcon,
+} from "@heroicons/react/24/outline";
 import {
   NavigationMenu,
   NavigationMenuItem,
@@ -10,6 +14,7 @@ import AddNewDropDown from "./AddNew";
 import { cva } from "class-variance-authority";
 import UploadCsvModal from "@/app/portfolio/[slug]/components/UploadCsvModal";
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 
 interface ToolbarProps {
   portfolioId: string;
@@ -20,12 +25,18 @@ const navigationMenuTriggerStyle = cva(
 );
 
 export function Toolbar({ portfolioId }: ToolbarProps) {
+  const router = useRouter();
+
   function handleClickSettings() {
     console.log("Settings were clicked, implement me");
   }
 
   function handleClickPortfolioPlan() {
-    console.log("Opt Plan was clicked, implement me");
+    router.push(`/portfolio/${portfolioId}/plan`);
+  }
+
+  function handleClickPortfolio() {
+    router.push(`/portfolio/${portfolioId}`);
   }
 
   const [modalIsOpen, setModalIsOpen] = useState(false);
@@ -33,6 +44,14 @@ export function Toolbar({ portfolioId }: ToolbarProps) {
   return (
     <NavigationMenu>
       <NavigationMenuList>
+        <NavigationMenuItem
+          className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
+          onClick={handleClickPortfolio}
+        >
+          <BuildingOfficeIcon className="h-4 w-4 mr-2" />
+          Portfolio
+        </NavigationMenuItem>
+
         <NavigationMenuItem
           className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
           onClick={handleClickPortfolioPlan}

src/app/portfolio/[slug]/(portfolio)/layout.tsx

@@ -0,0 +1,31 @@
+import { Toolbar } from "@/app/components/portfolio/Toolbar";
+import { getPortfolio } from "../utils";
+
+export default async function PortfolioLayout({
+  children, // will be a page or nested layout
+  params,
+}: {
+  children: React.ReactNode;
+  params: { slug: string; propertyId: string };
+}) {
+  const portfolioId = params.slug;
+  const { name: portfolioName } = await getPortfolio(portfolioId);
+
+  return (
+    <section>
+      <div className="flex justify-center">
+        <h1 className="text-3xl text-gray-700 font-bold mt-3 mb-4">
+          {portfolioName}
+        </h1>
+      </div>
+      <div className="flex justify-center">
+        <div className="grid grid-cols-8 w-full max-w-8xl">
+          <div className="col-span-12 justify-center bg-gray-50 py-2">
+            <Toolbar portfolioId={portfolioId} />
+          </div>
+        </div>
+      </div>
+      {children}
+    </section>
+  );
+}

src/app/portfolio/[slug]/(portfolio)/page.tsx

@@ -1,5 +1,5 @@
 import { HomeIcon } from "@heroicons/react/24/outline";
-import { getPortfolio, getProperties } from "./utils";
+import { getPortfolio, getProperties } from "../utils";
 import { Toolbar } from "@/app/components/portfolio/Toolbar";
 import DataTable from "@/app/portfolio/[slug]/components/propertyTable";
 import { columns } from "@/app/portfolio/[slug]/components/propertyTableColumns";
@@ -187,12 +187,8 @@ export default async function Page({
 }) {
   // This page is served from the server so we can make calls to the database
 
-  // This is temp until we retrieve this data from the frontend
-  // TODO: Update the objects to contains objective + any other required information
-
   const portfolioId = params.slug;
   const {
-    name: portfolioName,
     budget,
     cost: totalCost,
     co2EquivalentSavings,
@@ -212,18 +208,6 @@ export default async function Page({
 
   return (
     <>
-      <div className="flex justify-center">
-        <h1 className="text-3xl text-gray-700 font-bold mt-3 mb-4">
-          {portfolioName}
-        </h1>
-      </div>
-      <div className="flex justify-center">
-        <div className="grid grid-cols-8 w-full max-w-8xl">
-          <div className="col-span-12 justify-center bg-gray-50 py-2">
-            <Toolbar portfolioId={portfolioId} />
-          </div>
-        </div>
-      </div>
       <div className="flex justify-center">
         <div className="grid grid-cols-11 w-full max-w-8xl h-screen">
           <div className="col-span-3 flex-col">

src/app/portfolio/[slug]/(portfolio)/plan/page.tsx

@@ -0,0 +1,7 @@
+export default async function PortfolioPlan({
+  params,
+}: {
+  params: { slug: string; propertyId: string; planId: string };
+}) {
+  return <div>Portfolio Plan</div>;
+}

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

@@ -8,10 +8,8 @@ export default async function Recommendations({
   params: { slug: string; propertyId: string; planId: string };
 }) {
   const propertyMeta = await getPropertyMeta(params.propertyId);
-
   const recommendations = await getRecommendations(params.planId);
 
-  console.log(recommendations);
   return (
     <div className="leading-loose tracking-wider">
       <div className="flex py-8 text-lg">Recommendations</div>

src/app/portfolio/[slug]/building-passport/[propertyId]/utils.ts

@@ -1,4 +1,4 @@
-import { recommendation } from "./../../../../db/schema/recommendations";
+import { recommendation } from "../../../../db/schema/recommendations";
 import {
   Recommendation,
   planRecommendations,