diff --git a/package-lock.json b/package-lock.json index 074970a..d61b69c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,6 +52,7 @@ "tailwindcss": "^3.4.3", "tailwindcss-animate": "^1.0.6", "typescript": "5.0.4", + "xlsx": "^0.18.5", "zod": "^3.23.8" }, "devDependencies": { @@ -3467,6 +3468,14 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, + "node_modules/adler-32": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz", + "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/agent-base": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz", @@ -4182,6 +4191,18 @@ "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==", "dev": true }, + "node_modules/cfb": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz", + "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==", + "dependencies": { + "adler-32": "~1.3.0", + "crc-32": "~1.2.0" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -4350,6 +4371,14 @@ "node": ">=6" } }, + "node_modules/codepage": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz", + "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -4435,6 +4464,17 @@ "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==", "dev": true }, + "node_modules/crc-32": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz", + "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==", + "bin": { + "crc32": "bin/crc32.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -6257,6 +6297,14 @@ "node": ">= 0.12" } }, + "node_modules/frac": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz", + "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/fraction.js": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", @@ -9461,6 +9509,17 @@ "node": ">= 10.x" } }, + "node_modules/ssf": { + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz", + "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==", + "dependencies": { + "frac": "~1.1.2" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/sshpk": { "version": "1.17.0", "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz", @@ -10429,6 +10488,22 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/wmf": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz", + "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==", + "engines": { + "node": ">=0.8" + } + }, + "node_modules/word": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz", + "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/word-wrap": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", @@ -10474,6 +10549,26 @@ "async-limiter": "~1.0.0" } }, + "node_modules/xlsx": { + "version": "0.18.5", + "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz", + "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==", + "dependencies": { + "adler-32": "~1.3.0", + "cfb": "~1.2.1", + "codepage": "~1.15.0", + "crc-32": "~1.2.1", + "ssf": "~0.11.2", + "wmf": "~1.0.1", + "word": "~0.3.0" + }, + "bin": { + "xlsx": "bin/xlsx.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/xml2js": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.5.0.tgz", diff --git a/package.json b/package.json index 32de350..5c88e69 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "tailwindcss": "^3.4.3", "tailwindcss-animate": "^1.0.6", "typescript": "5.0.4", + "xlsx": "^0.18.5", "zod": "^3.23.8" }, "devDependencies": { diff --git a/src/app/api/upload/validate/route.ts b/src/app/api/upload/validate/route.ts new file mode 100644 index 0000000..c0c2f5d --- /dev/null +++ b/src/app/api/upload/validate/route.ts @@ -0,0 +1,32 @@ +import { NextRequest, NextResponse } from "next/server"; +import * as XLSX from "xlsx"; + +export async function POST(req: NextRequest) { + console.log("Validating uploaded file..."); + const formData = await req.formData(); + const file = formData.get("file") as File; + + if (!file) { + return NextResponse.json({ error: "No file provided" }, { status: 400 }); + } + + console.log("MADE IT HERE 0"); + console.log(file, file.constructor.name); + const arrayBuffer = await file.arrayBuffer(); + console.log("MADE IT HERE"); + const workbook = XLSX.read(arrayBuffer, { type: "array" }); + + const sheetNames = workbook.SheetNames; + + if (sheetNames.length > 1) { + return NextResponse.json( + { error: "Multiple sheets not allowed." }, + { status: 400 } + ); + } + + // TODO: We can check if we have a standardised asset list and if so, check which tabs have that option and give the user + // the chance to select which tab they want to use + + return NextResponse.json({ message: "Valid file." }); +} diff --git a/src/app/components/portfolio/AddNew.tsx b/src/app/components/portfolio/AddNew.tsx index 39b6fff..eb102f2 100644 --- a/src/app/components/portfolio/AddNew.tsx +++ b/src/app/components/portfolio/AddNew.tsx @@ -5,7 +5,11 @@ import { NavigationMenuLink, NavigationMenuTrigger, } from "@/app/shadcn_components/ui/navigation-menu"; -import { PlusIcon, TableCellsIcon, DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline"; +import { + PlusIcon, + TableCellsIcon, + DocumentMagnifyingGlassIcon, +} from "@heroicons/react/24/outline"; import * as React from "react"; import { cn } from "@/lib/utils"; @@ -66,22 +70,18 @@ export default function AddNewDropDown({ diff --git a/src/app/portfolio/[slug]/components/InputFile.tsx b/src/app/portfolio/[slug]/components/InputFile.tsx index 9039615..49e3b20 100644 --- a/src/app/portfolio/[slug]/components/InputFile.tsx +++ b/src/app/portfolio/[slug]/components/InputFile.tsx @@ -4,47 +4,42 @@ import { Input } from "@/app/shadcn_components/ui/input"; import { Label } from "@/app/shadcn_components/ui/label"; export function InputFile({ - handleButtonDisabled, - setCsvFile, - selectedGoal, - housingType, - goalValue, + onFileSelect, + isValidating, }: { - handleButtonDisabled: ( - goal?: string, - scheme?: string, - value?: string, - file?: File | null - ) => void; - setCsvFile: (file: File) => void; - selectedGoal: string; - housingType: string; - goalValue: string; + onFileSelect: (file: File) => void; + isValidating: boolean; }) { function handleOnChange(e: React.ChangeEvent) { - if (e.target.files) { - // Check if files is not null - const file = e.target.files[0]; - if (file.type !== "text/csv") { - // Show an error message - console.error("File is not a CSV"); - return; - } - setCsvFile(file); // Assuming you have a state to keep the file - handleButtonDisabled(selectedGoal, housingType, goalValue, file); + const file = e.target.files?.[0]; + if (!file) return; + + const validExtensions = ["csv", "xls", "xlsx"]; + const fileExtension = file.name.split(".").pop()?.toLowerCase(); + + if (!fileExtension || !validExtensions.includes(fileExtension)) { + console.error("Unsupported file type"); + e.target.value = ""; + return; } + + onFileSelect(file); } return (
- + + {isValidating && ( + Validating file… + )}
); } diff --git a/src/app/portfolio/[slug]/components/UploadCsvModal.tsx b/src/app/portfolio/[slug]/components/UploadCsvModal.tsx index 0ebae80..0e3c7c1 100644 --- a/src/app/portfolio/[slug]/components/UploadCsvModal.tsx +++ b/src/app/portfolio/[slug]/components/UploadCsvModal.tsx @@ -6,6 +6,7 @@ import { ChevronDownIcon } from "@heroicons/react/20/solid"; import { Float } from "@headlessui-float/react"; import { InputFile } from "@/app/portfolio/[slug]/components/InputFile"; import { SubmitPlan } from "@/app/portfolio/[slug]/components/SubmitPlan"; +import { useMutation } from "@tanstack/react-query"; type Option = { label: string; @@ -159,6 +160,38 @@ export default function UploadCsvModal({ } } + const { + mutate: validateFile, + isLoading: isValidating, + error: validationError, + } = useMutation( + async (file: File) => { + const formData = new FormData(); + formData.append("file", file); + + const response = await fetch("/api/upload/validate", { + method: "POST", + body: formData, + }); + + if (!response.ok) { + const data = await response.json(); + throw new Error(data.error || "File validation failed"); + } + + return response.json(); + }, + { + onSuccess: () => { + setButtonDisabled(false); + }, + onError: (err) => { + console.error(err); + setButtonDisabled(true); + }, + } + ); + return ( <> @@ -311,11 +344,8 @@ export default function UploadCsvModal({
validateFile(file)} + isValidating={isValidating} />