Merge branch 'main' of https://github.com/PinkSheep27/SBU-Hackathon

app/Dashboard/page.tsx

@@ -1,80 +1,66 @@
 "use client";
 
-import React, { useState } from "react";
-// import { useRouter } from "next/navigation"; // Removed Next.js import
-// import Link from 'next/link'; // Removed Next.js import
+import React, { useState, useEffect } from "react";
+import { getStoredProjects, StoredProject } from "../utils/storage";
+import Link from 'next/link';
 
 export default function Dashboard() {
-    // const router = useRouter(); // Removed Next.js hook
-    const [query, setQuery] = useState("");
-    const [sideBarOpen, setSidebarOpen] = useState(true);
-    // 1. Add state to track sort order
-    const [sortOrder, setSortOrder] = useState("newest"); // 'newest' or 'oldest'
+  const [query, setQuery] = useState("");
+  const [sideBarOpen, setSidebarOpen] = useState(true);
+  const [sortOrder, setSortOrder] = useState("newest");
+  const [projects, setProjects] = useState<StoredProject[]>([]);
 
-    const projects = [
-        { name: "Alpha Project", createdAt: "2025-01-01" },
-        { name: "Beta Board", createdAt: "2025-02-15" },
-        { name: "Gamma Tasl", createdAt: "2025-03-10" },
-    ];
+  useEffect(() => {
+    const storedProjects = getStoredProjects();
+    setProjects(storedProjects);
+  }, []);
 
-    // 2. Update sorting logic to use the sortOrder state
-    const sortedProjects = [...projects].sort((a, b) => {
-        // Get numeric timestamps to avoid TypeScript error
-        const dateA = new Date(a.createdAt).getTime();
-        const dateB = new Date(b.createdAt).getTime();
+  const sortedProjects = [...projects].sort((a, b) => {
+    const dateA = new Date(a.id).getTime();
+    const dateB = new Date(b.id).getTime();
 
-        if (sortOrder === "newest") {
-            return dateB - dateA; // Newest first
-        } else {
-            return dateA - dateB; // Oldest first
-        }
-    });
+    if (sortOrder === "newest") {
+      return dateB - dateA;
+    } else {
+      return dateA - dateB;
+    }
+  });
 
-    // 3. Filter the *sorted* array based on the query
-    const filtered = sortedProjects.filter((p) =>
-        p.name.toLowerCase().includes(query.toLowerCase())
-    );
+  const filtered = sortedProjects.filter((p) =>
+    p.title.toLowerCase().includes(query.toLowerCase())
+  );
 
-    // Helper function to handle navigation for the "Create" button
-    const handleCreateClick = () => {
-        // Use standard window navigation instead of Next.js router
-        window.location.href = "/formfile";
-    };
+  const handleCreateClick = () => {
+    window.location.href = "/formfile";
+  };
 
-    // 4. Function to toggle the sort order
-    const toggleSortOrder = () => {
-        setSortOrder(currentOrder => (currentOrder === "newest" ? "oldest" : "newest"));
-    };
+  const toggleSortOrder = () => {
+    setSortOrder(currentOrder => (currentOrder === "newest" ? "oldest" : "newest"));
+  };
 
-    return (
-        <div
-            className="flex min-h-screen font-sans transition-all duration-300"
-            style={{ backgroundColor: '#FEEEDF' }} // Main background
-        >
-            <aside
-                className={`${sideBarOpen ? "w-64" : "w-16"
-                    }  transition-all duration-300 flex flex-col`}
-                style={{ backgroundColor: '#99A48A'}} // Sidebar background and border
-            >
-                <div
-                    className="flex items-center justify-between p-4 "
-                >
-                    {sideBarOpen && (
-                        <span className="text-5xl font-semibold text-white">
-                            More
-                        </span>
-                    )}
-                    <button
-                        onClick={() => setSidebarOpen(!sideBarOpen)}
-                        className="text-white hover:text-gray-200 transition-colors text-3xl"
-                        title="Toggle Sidebar"
-                    >
-                        ☰
-                    </button>
-                </div>
+  return (
+    <div className="flex min-h-screen bg-zinc-50 dark:bg-black font-sans transition-all duration-300">
+      <aside
+        className={`${sideBarOpen ? "w-64" : "w-16"
+          } bg-white dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-800 transition-all duration-300 flex flex-col`}
+      >
+        <div className="flex items-center justify-between p-4 border-b border-zinc-200 dark:border-zinc-800">
+          {sideBarOpen && (
+            <span className="text-lg font-semibold text-zinc-800 dark:text-zinc-100">
+              More
+            </span>
+          )}
+          <button
+            onClick={() => setSidebarOpen(!sideBarOpen)}
+            className="text-zinc-600 dark:text-zinc-300 hover:text-blue-500 transition-colors"
+            title="Toggle Sidebar"
+          >
+            ☰
+          </button>
+        </div>
 
                 <nav
-                    className={`flex flex-col text-3xl p-4 gap-4 text-white transition-opacity duration-200 ${sideBarOpen ? "opacity-100" : "opacity-0"
+                    className={`flex flex-col p-4 gap-3 text-zinc-700 dark:text-zinc-300 transition-opacity duration-200 ${sideBarOpen ? "opacity-100" : "opacity-0"
                         }`}
                 >
                     <a
@@ -84,7 +70,7 @@ export default function Dashboard() {
                         Home
                     </a>
                     <p
-                        className="hover:text-gray-200 transition-colors cursor-pointer"
+                        className="hover:text-gray-200 transition-colors"
                     >
                         Settings
                     </p>
@@ -99,8 +85,8 @@ export default function Dashboard() {
 
             <div className="flex-1 flex flex-col min-w-0">
                 <header
-                    className="sticky top-0 z-10 backdrop-blur-sm "
-                    style={{ backgroundColor: '#DEE5D4'}} // Top bar background (semi-transparent) and border
+                    className="sticky top-0 z-10 backdrop-blur-sm border-b"
+                    style={{ backgroundColor: 'rgba(153, 164, 138, 0.9)', borderColor: '#8A947E' }} // Top bar background (semi-transparent) and border
                 >
                     <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between gap-4">
                         <div className="flex-1">
@@ -109,7 +95,7 @@ export default function Dashboard() {
                                 value={query}
                                 onChange={(e) => setQuery(e.target.value)}
                                 placeholder="Search projects, boards or tasks..."
-                                className="w-full max-w-md px-5 py-3 text-lg rounded-md border text-black focus:outline-none focus:ring-2 focus:ring-[#EA627F]"
+                                className="w-full max-w-md px-4 py-2 rounded-md border text-black focus:outline-none focus:ring-2 focus:ring-blue-500"
                                 style={{ backgroundColor: '#F7F7F7', borderColor: '#D1D1D1' }} // Search bar "off-white"
                             />
                         </div>
@@ -118,7 +104,7 @@ export default function Dashboard() {
                             <button
                                 type="button"
                                 onClick={handleCreateClick} // Use the new handler
-                                className="text-white px-6 py-3 text-xl rounded-md shadow-sm hover:opacity-90 hover:scale-[.98] transition-all duration-150"
+                                className="text-white px-4 py-2 rounded-md shadow-sm hover:opacity-90"
                                 style={{ backgroundColor: '#EA627F' }} // Create button
                             >
                                 Create
@@ -128,17 +114,18 @@ export default function Dashboard() {
                 </header>
 
                 <main className="max-w-7xl w-full mx-auto px-6 py-10">
-                    <div className="flex justify-between items-center mb-6">
-                        <h1 className="text-4xl font-semibold text-black">
+                    <div className="flex justify-between items-center mb-4">
+                        <h1 className="text-2xl font-semibold text-black">
                             Project Names
                         </h1>
                         <button
                             type="button"
                             onClick={toggleSortOrder}
-                            className="px-4 py-2 text-lg font-medium  rounded-md"
+                            className="px-3 py-1 text-sm font-medium border rounded-md"
                             style={{
                                 color: '#333',
                                 backgroundColor: '#F7F7F7', // "off-white"
+                                borderColor: '#D1D1D1'
                             }}
                         >
                             Sort by: {sortOrder === 'newest' ? 'Newest' : 'Oldest'}
@@ -146,21 +133,21 @@ export default function Dashboard() {
                     </div>
 
                     <section>
-                        <ul className="space-y-4">
+                        <ul className="space-y-3">
                             {filtered.map((project, index) => (
                                 <li
                                     key={index}
-                                    className="flex justify-between items-center p-6 rounded-md transition-all duration-200 ease-in-out hover:scale-[1.02] hover:shadow-lg"
-                                    style={{ backgroundColor: '#B8C0AD', color: '#222'}} // Project boxes
+                                    className="flex justify-between p-4 border rounded-md"
+                                    style={{ backgroundColor: '#B8C0AD', color: '#222', borderColor: '#A9B29E' }} // Project boxes
                                 >
-                                    <span className="text-xl">{project.name}</span>
-                                    <span className="text-gray-700 text-lg">
+                                    <span>{project.name}</span>
+                                    <span className="text-gray-700 text-sm">
                                         Created: {project.createdAt}
                                     </span>
                                 </li>
                             ))}
                             {filtered.length === 0 && (
-                                <li className="text-lg text-gray-600">No results found</li>
+                                <li className="text-gray-600">No results found</li>
                             )}
                         </ul>
                     </section>