mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-08 11:37:25 +00:00
Added in the template for csv upload
This commit is contained in:
Khalim Conn-Kowlessar
parent
109d2dee30
commit
a7e131119c
5 changed files with 98 additions and 61 deletions
24
package-lock.json
generated
24
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="grid w-full max-w-sm items-center gap-1.5 text-sm font-semibold text-gray-600">
|
||||
<Label htmlFor="csv-uploader">Upload your csv</Label>
|
||||
<Input id="csv-uploader" type="file" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const hiddenInputArrows =
|
||||
|
|
@ -78,55 +81,46 @@ export default function UploadCsvModal({
|
|||
<form className="space-y-4">
|
||||
<div className="flex flex-col">
|
||||
<label
|
||||
htmlFor="portfolio-name"
|
||||
htmlFor="csv-upload-budget"
|
||||
className="text-sm font-semibold text-gray-600 mb-1 relative"
|
||||
>
|
||||
Portfolio Name:
|
||||
Budget
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="portfolio-name"
|
||||
type="text"
|
||||
placeholder="My new portfolio"
|
||||
id="csv-upload-budget"
|
||||
type="number"
|
||||
placeholder="Set a budget"
|
||||
required
|
||||
value={portfolioName}
|
||||
onChange={(e) => handlePortfolioNameChange(e)}
|
||||
className="p-2 border border-gray-200 rounded-md focus:outline-none bg-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<label
|
||||
htmlFor="budget"
|
||||
className="text-sm font-semibold text-gray-600 mb-1"
|
||||
htmlFor="portfolio-name"
|
||||
className="text-sm font-semibold text-gray-600 mb-1 relative"
|
||||
>
|
||||
Budget (£){" "}
|
||||
<span className="text-gray-400 text-xs">optional</span>{" "}
|
||||
:
|
||||
Funding Scheme
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="flex items-center border border-gray-200 rounded-md text-gray-900 bg-brandblue">
|
||||
<span className="px-2 text-sm text-white">£</span>
|
||||
<input
|
||||
id="budget"
|
||||
type="number"
|
||||
placeholder="1000"
|
||||
value={budget}
|
||||
onChange={(e) => 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(" ")}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
id="csv-upload-funding-scheme"
|
||||
type="text"
|
||||
placeholder="Choose Funding Scheme"
|
||||
required
|
||||
// value={portfolioName}
|
||||
// onChange={(e) => handlePortfolioNameChange(e)}
|
||||
className="p-2 border border-gray-200 rounded-md focus:outline-none bg-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col space-y-2">
|
||||
<span className="text-sm font-semibold text-gray-600">
|
||||
Select Outcome:
|
||||
</span>
|
||||
<div className="flex space-x-2">"Fill me in"</div>
|
||||
<div className="flex space-x-2">
|
||||
<InputFile />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
|
|
|||
|
|
@ -168,33 +168,27 @@ function SummaryBox({
|
|||
<table className="w-full">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="text-gray-700 font-semibold">Budget</td>
|
||||
<td className="text-gray-700 ">Total Budget</td>
|
||||
<td className="text-gray-600 text-end">{budgetFormatted}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-gray-700 font-semibold">Total Cost</td>
|
||||
<td className="text-gray-700 ">Total Cost</td>
|
||||
<td className="text-gray-600 text-end">{totalCostFormatted}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-gray-700 font-semibold">
|
||||
Total Value Increase
|
||||
</td>
|
||||
<td className="text-gray-700 ">Total Value Increase</td>
|
||||
<td className="text-gray-600 text-end">
|
||||
{totalValueIncreaseFormatted}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-gray-700 font-semibold">
|
||||
Annual rental yield Increase
|
||||
</td>
|
||||
<td className="text-gray-700 ">Annual rental yield Increase</td>
|
||||
<td className="text-gray-600 text-end">
|
||||
{rentalYieldIncreaseFormatted}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-gray-700 font-semibold">
|
||||
Annual Energy Bill Savings
|
||||
</td>
|
||||
<td className="text-gray-700 ">Annual Energy Bill Savings</td>
|
||||
<td className="text-gray-600 text-end">
|
||||
{energyCostSavingsFormatted}
|
||||
</td>
|
||||
|
|
@ -209,15 +203,11 @@ function SummaryBox({
|
|||
<table className="w-full">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="text-gray-700 font-semibold">
|
||||
Number of properties
|
||||
</td>
|
||||
<td className="text-gray-700">Total properties</td>
|
||||
<td className="text-gray-600 text-end">{properties.length}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-gray-700 font-semibold">
|
||||
Total Works Time
|
||||
</td>
|
||||
<td className="text-gray-700">Total Works Time</td>
|
||||
<td className="text-gray-600 text-end">
|
||||
{totalWorkHoursFormatted}
|
||||
</td>
|
||||
|
|
@ -232,17 +222,19 @@ function SummaryBox({
|
|||
<table className="w-full">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="text-gray-700 font-semibold">
|
||||
Annual Co2 Savings
|
||||
<td className="text-gray-700">
|
||||
Annual{" "}
|
||||
<span>
|
||||
CO<sub>2</sub>
|
||||
</span>{" "}
|
||||
Savings
|
||||
</td>
|
||||
<td className="text-gray-600 text-end">
|
||||
{co2EquivalentSavingsFormatted}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-gray-700 font-semibold">
|
||||
Annual Energy Savings
|
||||
</td>
|
||||
<td className="text-gray-700">Annual Energy Savings</td>
|
||||
<td className="text-gray-600 text-end">
|
||||
{energySavingsFormatted}
|
||||
</td>
|
||||
|
|
|
|||
26
src/app/shadcn_components/ui/label.tsx
Normal file
26
src/app/shadcn_components/ui/label.tsx
Normal file
|
|
@ -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<typeof LabelPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||
VariantProps<typeof labelVariants>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<LabelPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(labelVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Label.displayName = LabelPrimitive.Root.displayName
|
||||
|
||||
export { Label }
|
||||
Loading…
Add table
Reference in a new issue