cleanup

UTDallasEPICS · Dec 13, 2024 · ed95d8d · ed95d8d
1 parent fc99590
commit ed95d8d
Show file tree

Hide file tree

Showing 34 changed files with 349 additions and 12,960 deletions.
diff --git a/app/(pages)/Donations/page.tsx b/app/(pages)/Donations/page.tsx
@@ -1,8 +1,10 @@
 "use client";
 import React, { useState, useEffect } from "react";
 import type { Donation } from "@/prisma";
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
+import Loading from "@/app/loading";
 
 /*
 place holder list
@@ -51,6 +53,9 @@ export const TableHeader = () => {
 
 export default function DonationsList() {
   const [data, setData] = useState<Donation[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  const router = useRouter();
 
   const fetchDonationsData = async () => {
     try {
@@ -60,39 +65,50 @@ export default function DonationsList() {
       const result = await response.json();
 
       setData(result.data);
+
+      setIsLoading(false);
     } catch (error) {
       console.error("Error fetching:", error);
+      router.push("/not-found");
     }
   };
   useEffect(() => {
     fetchDonationsData();
   }, []);
 
   return (
-    <TableContainer>
-      <Table stickyHeader sx={styles.table} aria-labelledby="tableTitle">
-        <TableHeader />
-        <TableBody>
-          {data.map((donation) => {
-            return (
-              <TableRow hover key={donation.id}>
-                <TableCell sx={styles.tableCell}>
-                  <Link className="text-blue-500" href={`/Donations/Detail/${donation.id}`}>
-                    {donation.type}
-                  </Link>
-                </TableCell>
-                <TableCell sx={styles.tableCell} align="right">
-                  ${donation.amount}
-                </TableCell>
-                <TableCell sx={styles.tableCell}>{donation.type !== "In-Kind" ? "" : donation.item}</TableCell>
-                <TableCell sx={styles.tableCell}>{donation.type !== "In-Kind" ? donation.paymentMethod : ""}</TableCell>
-                <TableCell sx={styles.tableCell}>{new Date(donation.date).toLocaleDateString()}</TableCell>
-              </TableRow>
-            );
-          })}
-        </TableBody>
-      </Table>
-    </TableContainer>
+    <Box>
+      {isLoading ? (
+        <Loading />
+      ) : (
+        <TableContainer>
+          <Table stickyHeader sx={styles.table} aria-labelledby="tableTitle">
+            <TableHeader />
+            <TableBody>
+              {data.map((donation) => {
+                return (
+                  <TableRow hover key={donation.id}>
+                    <TableCell sx={styles.tableCell}>
+                      <Link className="text-blue-500" href={`/Donations/Detail/${donation.id}`}>
+                        {donation.type}
+                      </Link>
+                    </TableCell>
+                    <TableCell sx={styles.tableCell} align="right">
+                      ${donation.amount}
+                    </TableCell>
+                    <TableCell sx={styles.tableCell}>{donation.type !== "In-Kind" ? "" : donation.item}</TableCell>
+                    <TableCell sx={styles.tableCell}>
+                      {donation.type !== "In-Kind" ? donation.paymentMethod : ""}
+                    </TableCell>
+                    <TableCell sx={styles.tableCell}>{new Date(donation.date).toLocaleDateString()}</TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+    </Box>
   );
 }
 

diff --git a/app/(pages)/Donors/page.tsx b/app/(pages)/Donors/page.tsx
@@ -1,9 +1,10 @@
 "use client";
 import React, { useState, useEffect } from "react";
-import type { Donation } from "@/prisma";
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
 import Link from "next/link";
 import { Donor } from "@prisma/client";
+import { useRouter } from "next/navigation";
+import Loading from "@/app/loading";
 
 /*
 place holder list
@@ -42,44 +43,56 @@ export const TableHeader = () => {
 
 export default function DonorsList() {
   const [data, setData] = useState<Donor[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  const router = useRouter();
 
   const fetchDonorData = async () => {
     try {
       const response = await fetch("/api/donors", {
         method: "GET",
       });
       const result = await response.json();
-      console.log(result.data);
+
       setData(result.data);
+
+      setIsLoading(false);
     } catch (error) {
       console.error("Error fetching:", error);
+      router.push("/not-found");
     }
   };
   useEffect(() => {
     fetchDonorData();
   }, []);
 
   return (
-    <TableContainer>
-      <Table stickyHeader sx={styles.table} aria-labelledby="tableTitle">
-        <TableHeader />
-        <TableBody>
-          {data.map((donor) => {
-            return (
-              <TableRow hover key={donor.id}>
-                <TableCell sx={styles.tableCell}>
-                  <Link className="text-blue-500" href={`/Donors/Detail/${donor.id}`}>
-                    {donor.type}
-                  </Link>
-                </TableCell>
-                <TableCell sx={styles.tableCell}>{donor.communicationPreference}</TableCell>
-                <TableCell sx={styles.tableCell}>{donor.status}</TableCell>
-              </TableRow>
-            );
-          })}
-        </TableBody>
-      </Table>
-    </TableContainer>
+    <Box>
+      {isLoading ? (
+        <Loading />
+      ) : (
+        <TableContainer>
+          <Table stickyHeader sx={styles.table} aria-labelledby="tableTitle">
+            <TableHeader />
+            <TableBody>
+              {data.map((donor) => {
+                return (
+                  <TableRow hover key={donor.id}>
+                    <TableCell sx={styles.tableCell}>
+                      <Link className="text-blue-500" href={`/Donors/Detail/${donor.id}`}>
+                        {donor.type}
+                      </Link>
+                    </TableCell>
+                    <TableCell sx={styles.tableCell}>{donor.communicationPreference}</TableCell>
+                    <TableCell sx={styles.tableCell}>{donor.status}</TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+    </Box>
   );
 }
 

diff --git a/app/Volunteers/Checkinout/page.tsx → app/(pages)/Volunteers/Checkinout/page.tsx b/app/Volunteers/Checkinout/page.tsx → app/(pages)/Volunteers/Checkinout/page.tsx
diff --git a/app/Volunteers/Mail/MailTable.tsx → app/(pages)/Volunteers/Mail/MailTable.tsx b/app/Volunteers/Mail/MailTable.tsx → app/(pages)/Volunteers/Mail/MailTable.tsx
diff --git a/app/Volunteers/Mail/NewMail/page.tsx → app/(pages)/Volunteers/Mail/NewMail/page.tsx b/app/Volunteers/Mail/NewMail/page.tsx → app/(pages)/Volunteers/Mail/NewMail/page.tsx
diff --git a/app/Volunteers/Mail/page.tsx → app/(pages)/Volunteers/Mail/page.tsx b/app/Volunteers/Mail/page.tsx → app/(pages)/Volunteers/Mail/page.tsx
diff --git a/...Volunteers/Registration/AdminRegTable.tsx → ...Volunteers/Registration/AdminRegTable.tsx b/...Volunteers/Registration/AdminRegTable.tsx → ...Volunteers/Registration/AdminRegTable.tsx
@@ -4,7 +4,6 @@ import React, { useState } from "react";
 import { format } from "date-fns";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Router } from "express";
 
 interface Event {
   ID: number;
@@ -49,9 +48,7 @@ export const AdminRegTable: React.FC<TableProps> = ({ data }) => {
 
   const Breadcrumb = () => (
     <div className="mb-5 text-sm text-gray-600 flex items-center space-x-2">
-      <span className="hover:text-blue-500 cursor-pointer transition-colors duration-200">
-        Home
-      </span>
+      <span className="hover:text-blue-500 cursor-pointer transition-colors duration-200">Home</span>
       <span className="text-gray-400">/</span>
       <span className="font-semibold text-gray-700">Registration</span>
     </div>
@@ -83,32 +80,19 @@ export const AdminRegTable: React.FC<TableProps> = ({ data }) => {
               <th className="border border-gray-300 p-2 bg-gray-100">Name</th>
               <th className="border border-gray-300 p-2 bg-gray-100">Date</th>
               <th className="border border-gray-300 p-2 bg-gray-100">Time</th>
-              <th className="border border-gray-300 p-2 bg-gray-100">
-                Description
-              </th>
-              <th className="border border-gray-300 p-2 bg-gray-100">
-                LocationID
-              </th>
-              <th className="border border-gray-300 p-2 bg-gray-100">
-                Volunteers
-              </th>
+              <th className="border border-gray-300 p-2 bg-gray-100">Description</th>
+              <th className="border border-gray-300 p-2 bg-gray-100">LocationID</th>
+              <th className="border border-gray-300 p-2 bg-gray-100">Volunteers</th>
               <th className="border border-gray-300 p-2 bg-gray-100"></th>
             </tr>
           </thead>
           <tbody>
             {events.map((event, index) => (
-              <tr
-                key={index}
-                className={index % 2 === 0 ? "bg-gray-50" : "bg-white"}
-              >
+              <tr key={index} className={index % 2 === 0 ? "bg-gray-50" : "bg-white"}>
                 <td className="py-2 px-4 border-b">{event.ID}</td>
                 <td className="py-2 px-4 border-b">{event.Name}</td>
-                <td className="py-2 px-4 border-b">
-                  {format(event.Date, "yyyy-MM-dd")}
-                </td>
-                <td className="py-2 px-4 border-b">
-                  {format(event.Time, "HH:mm:ss")}
-                </td>
+                <td className="py-2 px-4 border-b">{format(event.Date, "yyyy-MM-dd")}</td>
+                <td className="py-2 px-4 border-b">{format(event.Time, "HH:mm:ss")}</td>
                 <td className="py-2 px-4 border-b">{event.Description}</td>
                 <td className="py-2 px-4 border-b">{event.LocationID}</td>
                 <td className="py-2 px-4 border-b">

diff --git a/...olunteers/Registration/Event_Reg/page.tsx → ...olunteers/Registration/Event_Reg/page.tsx b/...olunteers/Registration/Event_Reg/page.tsx → ...olunteers/Registration/Event_Reg/page.tsx
diff --git a/.../Registration/New_event/new_page/page.tsx → .../Registration/New_event/new_page/page.tsx b/.../Registration/New_event/new_page/page.tsx → .../Registration/New_event/new_page/page.tsx
diff --git a/...olunteers/Registration/New_event/page.tsx → ...olunteers/Registration/New_event/page.tsx b/...olunteers/Registration/New_event/page.tsx → ...olunteers/Registration/New_event/page.tsx
diff --git a/...rs/Registration/RegistrationQuestions.tsx → ...rs/Registration/RegistrationQuestions.tsx b/...rs/Registration/RegistrationQuestions.tsx → ...rs/Registration/RegistrationQuestions.tsx
diff --git a/...ers/Registration/View_volunteers/page.tsx → ...ers/Registration/View_volunteers/page.tsx b/...ers/Registration/View_volunteers/page.tsx → ...ers/Registration/View_volunteers/page.tsx
diff --git a/app/Volunteers/Registration/VolRegTable.tsx → ...)/Volunteers/Registration/VolRegTable.tsx b/app/Volunteers/Registration/VolRegTable.tsx → ...)/Volunteers/Registration/VolRegTable.tsx
@@ -4,7 +4,6 @@ import React, { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { format } from "date-fns";
-import { Router } from "express";
 
 interface Event {
   ID: number;
@@ -40,9 +39,7 @@ export const VolRegTable: React.FC<TableProps> = ({ data }) => {
 
   const Breadcrumb = () => (
     <div className="mb-5 text-sm text-gray-600 flex items-center space-x-2">
-      <span className="hover:text-blue-500 cursor-pointer transition-colors duration-200">
-        Home
-      </span>
+      <span className="hover:text-blue-500 cursor-pointer transition-colors duration-200">Home</span>
       <span className="text-gray-400">/</span>
       <span className="font-semibold text-gray-700">Registration</span>
     </div>
@@ -68,32 +65,19 @@ export const VolRegTable: React.FC<TableProps> = ({ data }) => {
               <th className="border border-gray-300 p-2 bg-gray-100">Name</th>
               <th className="border border-gray-300 p-2 bg-gray-100">Date</th>
               <th className="border border-gray-300 p-2 bg-gray-100">Time</th>
-              <th className="border border-gray-300 p-2 bg-gray-100">
-                Description
-              </th>
-              <th className="border border-gray-300 p-2 bg-gray-100">
-                LocationID
-              </th>
-              <th className="border border-gray-300 p-2 bg-gray-100">
-                Volunteers
-              </th>
+              <th className="border border-gray-300 p-2 bg-gray-100">Description</th>
+              <th className="border border-gray-300 p-2 bg-gray-100">LocationID</th>
+              <th className="border border-gray-300 p-2 bg-gray-100">Volunteers</th>
               <th className="border border-gray-300 p-2 bg-gray-100"></th>
             </tr>
           </thead>
           <tbody>
             {events.map((event, index) => (
-              <tr
-                key={index}
-                className={index % 2 === 0 ? "bg-gray-50" : "bg-white"}
-              >
+              <tr key={index} className={index % 2 === 0 ? "bg-gray-50" : "bg-white"}>
                 <td className="py-2 px-4 border-b">{event.ID}</td>
                 <td className="py-2 px-4 border-b">{event.Name}</td>
-                <td className="py-2 px-4 border-b">
-                  {format(event.Date, "yyyy-MM-dd")}
-                </td>
-                <td className="py-2 px-4 border-b">
-                  {format(event.Time, "HH:mm:ss")}
-                </td>
+                <td className="py-2 px-4 border-b">{format(event.Date, "yyyy-MM-dd")}</td>
+                <td className="py-2 px-4 border-b">{format(event.Time, "HH:mm:ss")}</td>
                 <td className="py-2 px-4 border-b">{event.Description}</td>
                 <td className="py-2 px-4 border-b">{event.LocationID}</td>
                 <td className="py-2 px-4 border-b">

diff --git a/app/Volunteers/Registration/page.tsx → app/(pages)/Volunteers/Registration/page.tsx b/app/Volunteers/Registration/page.tsx → app/(pages)/Volunteers/Registration/page.tsx
diff --git a/app/Volunteers/components/dropdownMail.tsx → ...s)/Volunteers/components/dropdownMail.tsx b/app/Volunteers/components/dropdownMail.tsx → ...s)/Volunteers/components/dropdownMail.tsx
diff --git a/app/Volunteers/layout.tsx → app/(pages)/Volunteers/layout.tsx b/app/Volunteers/layout.tsx → app/(pages)/Volunteers/layout.tsx
@@ -1,11 +1,7 @@
 import React from "react";
-import { SecondarySideBar } from "../components/SecondarySideBar";
+import { SecondarySideBar } from "@/app/components/SecondarySideBar";
 
-export default function VolunteerLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function VolunteerLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex">
       <SecondarySideBar

diff --git a/app/Volunteers/page.tsx → app/(pages)/Volunteers/page.tsx b/app/Volunteers/page.tsx → app/(pages)/Volunteers/page.tsx
@@ -1,8 +1,5 @@
 "use client";
-import React, { useState, useEffect } from "react";
-import { SecondarySideBar } from "../components/SecondarySideBar";
-
-export default function GrantsPage() {
+export default function VolunteersPage() {
   const Header = () => (
     <div className="flex justify-between items-center mb-5">
       <h1 className="text-2xl font-bold text-gray-800">Volunteers</h1>

diff --git a/app/components/MainSidebar.tsx b/app/components/MainSidebar.tsx
@@ -12,6 +12,7 @@ const MainSidebarItems: ListItem[] = [
   { name: "Constituents", reference: "/Constituents" },
   { name: "Donations", reference: "/Donations" },
   { name: "Grants", reference: "/Grants" },
+  { name: "Volunteers", reference: "/Volunteers" },
 ];
 
 export default function MainSidebar() {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -7,21 +7,21 @@ export const metadata = {
   description: "Next.js application",
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className="flex">
-        <MainSidebar />
-        <div className="flex flex-col flex-grow">
+      <body className="flex flex-col items-center">
+        <div className="w-full">
           <TopNavigationBar />
-          <main className="flex-grow">{children}</main>
+        </div>
+
+        <div className="flex w-full">
+          <MainSidebar />
+          <div className="flex flex-col flex-grow">
+            <main className="flex-grow">{children}</main>
+          </div>
         </div>
       </body>
     </html>
   );
 }
-