From 3b259d7611a849948ab1bd9197f4719f3d34b66e Mon Sep 17 00:00:00 2001 From: Khalim Conn-Kowlessar Date: Wed, 29 Nov 2023 11:04:50 +0000 Subject: [PATCH] Added back to portfolio button with tooltip --- package-lock.json | 117 ++++++++++++++++++ package.json | 1 + .../BackToPortfolioButton.tsx | 38 ++++++ src/app/portfolio/[slug]/(portfolio)/page.tsx | 50 ++++---- .../building-passport/[propertyId]/layout.tsx | 7 +- src/app/shadcn_components/ui/tooltip.tsx | 30 +++++ 6 files changed, 219 insertions(+), 24 deletions(-) create mode 100644 src/app/components/building-passport/BackToPortfolioButton.tsx create mode 100644 src/app/shadcn_components/ui/tooltip.tsx diff --git a/package-lock.json b/package-lock.json index 378759f4..8ae63188 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-tooltip": "^1.0.7", "@tanstack/react-query": "^4.29.12", "@tanstack/react-table": "^8.9.3", "@types/node": "20.2.3", @@ -2141,6 +2142,122 @@ } } }, + "node_modules/@radix-ui/react-tooltip": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz", + "integrity": "sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.3", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-visually-hidden": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-dismissable-layer": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz", + "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-escape-keydown": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-popper": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz", + "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@floating-ui/react-dom": "^2.0.0", + "@radix-ui/react-arrow": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1", + "@radix-ui/react-use-rect": "1.0.1", + "@radix-ui/react-use-size": "1.0.1", + "@radix-ui/rect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-portal": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz", + "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-callback-ref": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz", diff --git a/package.json b/package.json index 4b36d5e5..67d32b65 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-tooltip": "^1.0.7", "@tanstack/react-query": "^4.29.12", "@tanstack/react-table": "^8.9.3", "@types/node": "20.2.3", diff --git a/src/app/components/building-passport/BackToPortfolioButton.tsx b/src/app/components/building-passport/BackToPortfolioButton.tsx new file mode 100644 index 00000000..0b6f943f --- /dev/null +++ b/src/app/components/building-passport/BackToPortfolioButton.tsx @@ -0,0 +1,38 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import { ArrowLeftIcon } from "@heroicons/react/24/outline"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/app/shadcn_components/ui/tooltip"; + +const BackToPortfolioButton = ({ portfolioId }: { portfolioId: string }) => { + const router = useRouter(); + + const handleBackClick = () => { + router.push(`/portfolio/${portfolioId}`); + }; + + return ( + + + + + + + Back to Portfolio + + + + ); +}; + +export default BackToPortfolioButton; diff --git a/src/app/portfolio/[slug]/(portfolio)/page.tsx b/src/app/portfolio/[slug]/(portfolio)/page.tsx index c131ab79..483b864b 100644 --- a/src/app/portfolio/[slug]/(portfolio)/page.tsx +++ b/src/app/portfolio/[slug]/(portfolio)/page.tsx @@ -129,84 +129,88 @@ function SummaryBox({ return (
-

+

Portfolio Summary

-
-

+
+

Work Package

- - + + - - + + - - + - - + +
Total Budget{budgetFormatted}Total Budget{budgetFormatted}
Total Cost{totalCostFormatted}Total Cost + {totalCostFormatted} +
Estimated Duration + Estimated Duration {estimatedDurationFormatted}
Total properties{numProperties}Total properties{numProperties}
-
+
{/* Environmental Impact */} -

+

Environmental Impact

- - - - +
+ Annual{" "} CO2 {" "} Savings + {co2EquivalentSavingsFormatted}
Annual Energy Savings + Annual Energy Savings {energySavingsFormatted}
-
+
{/* Financial Impact table */} -

+

Financial Impact

- - + - - + diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/layout.tsx b/src/app/portfolio/[slug]/building-passport/[propertyId]/layout.tsx index 6be6da2c..3819e58c 100644 --- a/src/app/portfolio/[slug]/building-passport/[propertyId]/layout.tsx +++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/layout.tsx @@ -1,5 +1,6 @@ import { Toolbar } from "@/app/components/building-passport/Toolbar"; import { getPropertyMeta } from "./utils"; +import BackToPortfolioButton from "@/app/components/building-passport/BackToPortfolioButton"; export default async function DashboardLayout({ children, // will be a page or nested layout @@ -25,7 +26,11 @@ export default async function DashboardLayout({ return (
-
+
+
+ +
+

{propertyMeta.address}

diff --git a/src/app/shadcn_components/ui/tooltip.tsx b/src/app/shadcn_components/ui/tooltip.tsx new file mode 100644 index 00000000..30fc44d9 --- /dev/null +++ b/src/app/shadcn_components/ui/tooltip.tsx @@ -0,0 +1,30 @@ +"use client" + +import * as React from "react" +import * as TooltipPrimitive from "@radix-ui/react-tooltip" + +import { cn } from "@/lib/utils" + +const TooltipProvider = TooltipPrimitive.Provider + +const Tooltip = TooltipPrimitive.Root + +const TooltipTrigger = TooltipPrimitive.Trigger + +const TooltipContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + +)) +TooltipContent.displayName = TooltipPrimitive.Content.displayName + +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
Annual Energy Bill Reduction + + Annual Energy Bill Reduction + {energyCostSavingsFormatted}
Total Value Increase + Total Value Increase {totalValueIncreaseFormatted}