working on due considerations ui

src/app/components/Navbar.tsx

@@ -42,6 +42,7 @@ function Nav({ userImage }: { userImage: string }) {
               <div className="hidden md:block">
                 <div className="ml-10 flex items-baseline space-x-4">
                   {makeLink("/home", "Home")}
+                  {makeLink("/due-considerations", "Due Considerations")}
                   {makeLink("/help", "Help")}
                   <div className="flex-grow"></div>
                 </div>

src/app/components/due-considerations/SelectFolder.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Input } from "@/app/shadcn_components/ui/input";
+import { Label } from "@/app/shadcn_components/ui/label";
+
+export function SelectFolder({
+  handleButtonDisabled,
+  setUploadMessage,
+  setFile,
+}: {
+  handleButtonDisabled: (file?: File[]) => void;
+  setUploadMessage: (message: string) => void;
+  setFile: (file: File[]) => void;
+}) {
+  function handleOnChange(e: React.ChangeEvent<HTMLInputElement>) {
+    if (e.target.files && e.target.files.length === 3) {
+      const files = Array.from(e.target.files);
+      const extensions = files.map((file) =>
+        file.name.split(".").pop()?.toLowerCase()
+      );
+
+      if (
+        extensions.includes("xml") &&
+        extensions.includes("pdf") &&
+        extensions.includes("docx")
+      ) {
+        setFile(files); // You would need to update setFile to accept an array of files
+        handleButtonDisabled(files); // Similarly, update handleButtonDisabled to work with multiple files
+      } else {
+        setUploadMessage("Please select a .xml, .pdf, and .docx file.");
+      }
+    } else {
+      setUploadMessage("Please select exactly 3 files.");
+    }
+  }
+
+  return (
+    <Input
+      id="folder-uploader"
+      type="file"
+      // TODO: Handle accept - we want a folder
+      accept=".xml,.pdf,.docx"
+      multiple={true}
+      className="cursor-pointer"
+      onChange={handleOnChange}
+    />
+  );
+}

src/app/db/db.ts

@@ -12,6 +12,8 @@ export const pool = new Pool({
   user: process.env.DB_USERNAME,
   password: process.env.DB_PASSWORD,
   database: process.env.DB_NAME,
+  max: 20,
+  idleTimeoutMillis: 30000,
 });
 
 const schema = {

src/app/due-considerations/page.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import { SelectFolder } from "../components/due-considerations/SelectFolder";
+import { Button } from "../shadcn_components/ui/button";
+
+export default function DueConsiderationsHome() {
+  const [file, setFile] = useState<File[]>([]);
+  const [buttonDisabled, setButtonDisabled] = useState(true);
+  const [uploadMessage, setUploadMessage] = useState("");
+
+  function handleButtonDisabled(files?: File[]) {
+    if (files && files.length === 3) {
+      const extensions = files.map((file) =>
+        file.name.split(".").pop()?.toLowerCase()
+      );
+
+      if (
+        extensions.includes("xml") &&
+        extensions.includes("pdf") &&
+        extensions.includes("docx")
+      ) {
+        setButtonDisabled(false);
+      } else {
+        setUploadMessage("Please select a .xml, .pdf, and .docx file.");
+        setButtonDisabled(true);
+      }
+    } else {
+      setUploadMessage("Please select exactly 3 files.");
+      setButtonDisabled(true);
+    }
+  }
+
+  return (
+    <div className="flex flex-col items-center mt-20 tracking-wider leading-loose">
+      <div className="text-center">
+        <div className="mb-4">Select a folder containing:</div>
+        <ul className="list-disc list-inside text-left ml-8 mb-8">
+          <li>A full SAP xml</li>
+          <li>EPR pdf</li>
+          <li>Condition report word document</li>
+        </ul>
+        <div className="mb-4">
+          Make sure these documents all relate to the same property
+        </div>
+
+        <div className="mb-5">
+          <SelectFolder
+            handleButtonDisabled={handleButtonDisabled}
+            setFile={setFile}
+          />
+        </div>
+
+        <div className="flex justify-between w-full">
+          <div>{uploadMessage}</div>
+          <Button
+            disabled={buttonDisabled}
+            className="bg-brandblue hover:bg-hoverblue"
+          >
+            Upload
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}