From a7e131119cdbcad12d5024eb70b82adbb6ddc895 Mon Sep 17 00:00:00 2001 From: Khalim Conn-Kowlessar Date: Wed, 12 Jul 2023 18:58:07 +0100 Subject: [PATCH] Added in the template for csv upload --- package-lock.json | 24 +++++++ package.json | 1 + .../components/portfolio/UploadCsvModal.tsx | 72 +++++++++---------- src/app/portfolio/[slug]/page.tsx | 36 ++++------ src/app/shadcn_components/ui/label.tsx | 26 +++++++ 5 files changed, 98 insertions(+), 61 deletions(-) create mode 100644 src/app/shadcn_components/ui/label.tsx diff --git a/package-lock.json b/package-lock.json index 0aa1b119..97443454 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@heroicons/react": "^2.0.18", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-hover-card": "^1.0.6", + "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-navigation-menu": "^1.1.3", "@radix-ui/react-slot": "^1.0.2", "@tanstack/react-query": "^4.29.12", @@ -1709,6 +1710,29 @@ } } }, + "node_modules/@radix-ui/react-label": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz", + "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==", + "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-navigation-menu": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.1.3.tgz", diff --git a/package.json b/package.json index 25f23493..058c0e95 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@heroicons/react": "^2.0.18", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-hover-card": "^1.0.6", + "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-navigation-menu": "^1.1.3", "@radix-ui/react-slot": "^1.0.2", "@tanstack/react-query": "^4.29.12", diff --git a/src/app/components/portfolio/UploadCsvModal.tsx b/src/app/components/portfolio/UploadCsvModal.tsx index 181783a1..3a4d3a52 100644 --- a/src/app/components/portfolio/UploadCsvModal.tsx +++ b/src/app/components/portfolio/UploadCsvModal.tsx @@ -2,14 +2,17 @@ import { Dialog, Transition } from "@headlessui/react"; import { Fragment, useState } from "react"; import ModalSubmit from "@/app/components/home/ModalSubmit"; -import { PortfolioGoal } from "@/app/db/schema/portfolio"; -// Mock Icon component -interface IconProps { - name: string; - selected: boolean; - onSelect: (name: string) => void; - className?: string; +import { Input } from "@/app/shadcn_components/ui/input"; +import { Label } from "@/app/shadcn_components/ui/label"; + +export function InputFile() { + return ( +
+ + +
+ ); } const hiddenInputArrows = @@ -78,55 +81,46 @@ export default function UploadCsvModal({
handlePortfolioNameChange(e)} className="p-2 border border-gray-200 rounded-md focus:outline-none bg-gray-100" />
+
-
- £ - setBudget(Number(e.target.value))} - onKeyDown={(e) => - (e.key === "e" || e.key === "E") && - e.preventDefault() - } - className={[ - "flex-1 p-2 bg-gray-100 focus:outline-none", - hiddenInputArrows, - ].join(" ")} - /> -
+ handlePortfolioNameChange(e)} + className="p-2 border border-gray-200 rounded-md focus:outline-none bg-gray-100" + />
+
- - Select Outcome: - -
"Fill me in"
+
+ +
diff --git a/src/app/portfolio/[slug]/page.tsx b/src/app/portfolio/[slug]/page.tsx index 934ddcbd..5b7ada08 100644 --- a/src/app/portfolio/[slug]/page.tsx +++ b/src/app/portfolio/[slug]/page.tsx @@ -168,33 +168,27 @@ function SummaryBox({ - + - + - + - + - + @@ -209,15 +203,11 @@ function SummaryBox({
BudgetTotal Budget {budgetFormatted}
Total CostTotal Cost {totalCostFormatted}
- Total Value Increase - Total Value Increase {totalValueIncreaseFormatted}
- Annual rental yield Increase - Annual rental yield Increase {rentalYieldIncreaseFormatted}
- Annual Energy Bill Savings - Annual Energy Bill Savings {energyCostSavingsFormatted}
- + - + @@ -232,17 +222,19 @@ function SummaryBox({
- Number of properties - Total properties {properties.length}
- Total Works Time - Total Works Time {totalWorkHoursFormatted}
- - + diff --git a/src/app/shadcn_components/ui/label.tsx b/src/app/shadcn_components/ui/label.tsx new file mode 100644 index 00000000..53418217 --- /dev/null +++ b/src/app/shadcn_components/ui/label.tsx @@ -0,0 +1,26 @@ +"use client" + +import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const labelVariants = cva( + "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" +) + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, ...props }, ref) => ( + +)) +Label.displayName = LabelPrimitive.Root.displayName + +export { Label }
- Annual Co2 Savings + + Annual{" "} + + CO2 + {" "} + Savings {co2EquivalentSavingsFormatted}
- Annual Energy Savings - Annual Energy Savings {energySavingsFormatted}