Merge pull request #44 from hack4impact-calpoly/24-DocumentUpload-client

feat: Upload component and Client Upload Page #24

package.json

@@ -23,6 +23,7 @@
     "radix-ui": "^1.0.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-drag-drop-files": "^2.4.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },

src/app/client-upload/page.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import React from "react";
+import DocumentUpload from "@/components/DocumentUpload";
+import { Button } from "@/components/ui/button";
+import { Trash, Download } from "lucide-react";
+
+const ClientUploadPage: React.FC = () => {
+  return (
+    <div className="flex flex-col items-center p-8 w-full min-h-[calc(100vh-105px-40px)] bg-white">
+      {/* Main Layout */}
+      <div className="flex w-full min-h-full max-w-5xl gap-5">
+        {/* DocumentUpload component + preview (not yet implemented) */}
+        <div className="w-2/3 min-h-[calc(100vh-105px-40px-120px)] flex justify-center">
+          <DocumentUpload />
+        </div>
+
+        {/* Checklist Placeholder */}
+        {/* TODO: Note to review checklist requirements with the nonprofit */}
+        <div className="w-1/3 border border-gray-300 rounded-lg p-6 bg-gray-50 shadow-md">
+          <h2 className="text-lg font-semibold mb-4">Checklist</h2>
+          <ul className="list-disc pl-5 space-y-2">
+            <li className="text-gray-700">Certificate of Insurance</li>
+            <li className="text-gray-700">Waiver</li>
+            <li className="text-gray-700">Timeline</li>
+            <li className="text-gray-700">ID</li>
+            <li className="text-gray-700">Property Contract</li>
+            <li className="text-gray-700">Document</li>
+          </ul>
+        </div>
+      </div>
+
+      {/* Buttons */}
+      {/* TODO: Note to add functionality for the buttons in a later issue */}
+      <div className="flex justify-center gap-4 mt-6">
+        <Button variant="outline" className="bg-[#3A6F8F] text-white hover:bg-[#305a73]" disabled size={"sm"}>
+          <Trash /> Delete
+        </Button>
+
+        <Button variant="outline" className="bg-[#3A6F8F] text-white hover:bg-[#305a73]" disabled size={"sm"}>
+          <Download /> Download
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ClientUploadPage;

src/components/DocumentUpload.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import { FileUploader } from "react-drag-drop-files";
+import { Upload } from "lucide-react";
+
+const fileTypes = ["PDF", "JPEG", "PNG", "DOCX", "DOC", "WORD"];
+
+const DocumentUpload: React.FC = () => {
+  const [file, setFile] = useState<File | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleChange = (file: File) => {
+    setFile(file);
+  };
+
+  return (
+    <FileUploader
+      handleChange={handleChange}
+      name="document"
+      types={fileTypes}
+      hoverTitle="Drop the file here"
+      onTypeError={(err: string) => alert(err)}
+      maxSize={1000} // Limit file size to 1000 MB (can be altered later)
+      onSizeError={() => alert("File size exceeds the limit!")}
+      onDraggingStateChange={(dragging: boolean) => setIsDragging(dragging)}
+      dropMessageStyle={{
+        fontSize: "1.5rem",
+      }}
+      classes={`relative flex flex-col items-center justify-center w-full h-full border rounded-lg transition-all 
+        ${isDragging ? "border-blue-500 bg-blue-100" : "border-gray-300 bg-gray-100 hover:bg-gray-200 shadow-md"}`}
+    >
+      <div className="flex flex-col items-center text-black pointer-events-none">
+        <Upload size={48} className="mb-2 text-black" />
+        <p className="font-medium text-lg">Drag and Drop or Click to Select</p>
+        <p className="text-base">the desired document to be uploaded</p>
+      </div>
+
+      {file && (
+        <div className="mt-4 text-center">
+          <p className="text-lg text-gray-700">Selected File: {file.name}</p>
+        </div>
+      )}
+    </FileUploader>
+  );
+};
+
+export default DocumentUpload;

src/components/Footer.tsx

@@ -1,3 +1,3 @@
 export default function Footer() {
-  return <div>Footer</div>;
+  return <div className="h-10">Footer</div>;
 }

src/components/Navbar.tsx

@@ -4,18 +4,18 @@ import { UserButton, SignedIn } from "@clerk/nextjs";
 
 export default function Navbar() {
   return (
-    <div className="w-full px-8 py-8">
+    <div className="w-full h-25">
       <nav className="flex justify-between items-center w-full">
         {/* logo */}
-        <div className="pl-16 pr-8 pt-10">
+        <div className="pl-16 pr-8 pt-5 pd-5">
           <Link href="/">
             <Image src="/logo.png" alt="Octagon Barn Logo" width={182} height={64} />
           </Link>
         </div>
 
         {/* notification & profile */}
         <SignedIn>
-          <div className="flex items-center space-x-20 pl-10 pr-16 pt-10">
+          <div className="flex items-center space-x-20 pl-10 pr-16 pt-5 pd-5">
             <Link href="/somePage" className="text-black hover:text-blue-500">
               Notification {/* CHANGE TO IMAGE */}
             </Link>