Feature 184/get avail rides

app/api/getAvailableRides/route.ts

@@ -0,0 +1,38 @@
+import { NextResponse } from 'next/server';
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+export async function GET(req: Request) {
+  if (req.method !== 'GET') {
+    return Response.json({
+      status: 405,
+      message: 'Method Not Allowed',
+    });
+  }
+
+  try {
+    const rides = await prisma.ride.findMany({
+      where: {
+        status: 'AVAILABLE',
+        //NOTE: EVENTUALLY YOU SHOULD ALSO LOOK FOR RIDES THAT ARE CONNECTED TO THE ID OF
+        //THE VOLUNTEER SHOULD ALSO BE ABLE TO  SEE WHAT RIDES THEY HAVE RESERVED
+      },
+
+      select: {
+        customerName: true,
+        customerPhone: true,
+        startLocation: true,
+        endLocation: true,
+        date: true,
+        startTime: true,
+        endTime: true,
+      },
+    });
+
+    return NextResponse.json(rides);
+  } catch (error) {
+    console.error('Error fetching rides:', error);
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/components/DisplayRidesTable.jsx

@@ -1,56 +1,42 @@
 
-import { useState, useEffect } from "react";
+import React from "react";
 import ViewOnlyRow from "./ViewOnlyRow";
 
-const DisplayRidesTable = ({ initialContacts }) => {
-  const [contacts, setContacts] = useState(initialContacts);
-
-
-  useEffect(() => {
-    setContacts(initialContacts);
-  }, [initialContacts]);
+const DisplayRidesTable = ({ ridesData }) => {
+  return (
 
+    <div className="mt-[5%] ml-[calc(5%-20px)] w-[90%] text-left rounded-lg border border-gray-300 p-6 bg-white">
+      <h2 className="text-center text-[1.2rem] font-light text-gray-500 mt-4 mb-2">
+        Available Rides
+      </h2>
+      <div className="border-b-[3px] border-gray-600 w-[20%] mx-auto mb-2 mt-[-10px]"></div>
 
-
-  const unreservedContacts = contacts.filter(
-    (contact) => contact.status === "Unreserved"
-  );
-
-  return (
-    <div className="flex flex-col gap-2.5 p-4 overflow-x-auto max-h-[400px] overflow-y-auto font-sans">
-      <table className="border-collapse ml-[0.5%] w-[99%]">
+      <table className="border-collapse w-full">
         <thead>
           <tr>
-            <th className="bg-white border-b-[0.5px] border-gray-700 text-center p-2 text-lg font-normal">
-              Client Name
-            </th>
-            <th className="bg-white border-b-[0.5px] border-gray-700 text-center p-2 text-lg font-normal">
-              Contact Number
-            </th>
-            <th className="bg-white border-b-[0.5px] border-gray-700 text-center p-2 text-lg font-normal">
-              Address
-            </th>
-            <th className="bg-white border-b-[0.5px] border-gray-700 text-center p-2 text-lg font-normal">
-              Pick-up Time
-            </th>
-            <th className="bg-white border-b-[0.5px] border-gray-700 text-center p-2 text-lg font-normal">
-              Actions
-            </th>
+          <th className="bg-white border-b-[0.5px] border-gray-700 text-center p-2 text-lg font-normal">Client Name</th>
+          <th className="bg-white border-b-[0.5px] border-gray-700 text-center p-2 text-lg font-normal">Contact Number</th>
+          <th className="bg-white border-b-[0.5px] border-gray-700 text-center p-2 text-lg font-normal">Pick-up Address</th>
+          <th className="bg-white border-b-[0.5px] border-gray-700 text-center p-2 text-lg font-normal">Drop-Off Address</th>
+          <th className="bg-white border-b-[0.5px] border-gray-700 text-center p-2 text-lg font-normal">Pick-up Date</th>
+          <th className="bg-white border-b-[0.5px] border-gray-700 text-center p-2 text-lg font-normal">Pick-up Time</th>
+          <th className="bg-white border-b-[0.5px] border-gray-700 text-center p-2 text-lg font-normal">Drop-off Time</th>
+          <th className="bg-white border-b-[0.5px] border-gray-700 text-center p-2 text-lg font-normal">Actions</th>
           </tr>
         </thead>
+
         <tbody>
-          {unreservedContacts.length > 0 ? (
-            unreservedContacts.map((contact) => (
+          {ridesData.length > 0 ? (
+            ridesData.map((contact) => (
               <ViewOnlyRow
                 key={contact.id}
                 contact={contact}
-                status={contact.status}
               />
             ))
           ) : (
             <tr>
-              <td colSpan="5" className="text-center p-4">
-                No unreserved rides available
+              <td colSpan="8" className="text-center p-4">
+                No rides available
               </td>
             </tr>
           )}

app/components/ViewOnlyRow.jsx

@@ -1,15 +1,20 @@
 import React, { useState } from "react";
 import CancelRidesModel from "/app/components/CancelRidesModel.jsx"
+import { format } from 'date-fns';
 
-const ViewOnlyRow = ({ contact }) => {
-  const [isReserved, setIsReserved] = useState(false);
+function formatDateTime(rideDate, startTime, endTime) {
+  return {
+    formattedDate: format(new Date(rideDate), 'MM/dd/yyyy'),
+    formattedStartTime: format(new Date(startTime), 'h:mm a'),
+    formattedEndTime: format(new Date(endTime), 'h:mm a')
+  };
+}
 
 
+const ViewOnlyRow = ({ contact }) => {
+  const [isReserved, setIsReserved] = useState(false);
   const [isCancelModelOpen, setIsCancelModelOpen] = useState(false);
 
-
-
-
   const handleDenyCancel = () => {
     setIsCancelModelOpen(false);
   };
@@ -30,12 +35,18 @@ const ViewOnlyRow = ({ contact }) => {
     }
   };
 
+  const { formattedDate, formattedStartTime, formattedEndTime } = formatDateTime( contact.date, contact.startTime, contact.endTime);
+
+
   return (
     <tr>
-      <td className="text-center bg-white text-[20px] py-4 px-2 font-light">{contact.clientName}</td>
-      <td className="text-center bg-white text-[20px] py-4 px-2 font-light">{contact.phoneNumber}</td>
-      <td className="text-center bg-white text-[20px] py-4 px-2 font-light">{contact.address}</td>
-      <td className="text-center bg-white text-[20px] py-4 px-2 font-light">{contact.startTime}</td>
+      <td className="text-center bg-white text-[20px] py-4 px-2 font-light">{contact.customerName}</td>
+      <td className="text-center bg-white text-[20px] py-4 px-2 font-light">{contact.customerPhone}</td>
+      <td className="text-center bg-white text-[20px] py-4 px-2 font-light">{contact.startLocation}</td>
+      <td className="text-center bg-white text-[20px] py-4 px-2 font-light" >{contact.endLocation}</td>
+      <td className="text-center bg-white text-[20px] py-4 px-2 font-light">{formattedDate}</td>
+      <td className="text-center bg-white text-[20px] py-4 px-2 font-light">{formattedStartTime}</td>
+      <td className="text-center bg-white text-[20px] py-4 px-2 font-light">{formattedEndTime}</td>
       <td className="text-center bg-white text-[20px] py-4 px-2 font-light">
         <button
           className={`text-white ${isReserved ? "bg-red-600" : "bg-[#419902]"} cursor-pointer border-none mx-1 px-4 py-2 rounded-md transition duration-300 hover:bg-opacity-90`}

app/dashboardEmployee/volunteers/page.jsx

@@ -21,7 +21,7 @@ export default function Page() {
           setVolunteersData(data);
         }
         else{
-          throw new Error(data.message || 'Failed to fetch volunteer');
+          throw new Error(data.message || 'Failed to fetch volunteers');
         }
       } catch (error) {
         console.error('Error fetching volunteers:', error);

app/dashboardVolunteer/rides/page.jsx

@@ -1,30 +1,40 @@
 "use client";
-import React, { useState } from "react";
-import SimpleTab, { Tab } from "/app/components/SimpleTab.jsx";
+import React, { useEffect, useState } from "react";
+
 import DisplayRidesTable from "../../components/DisplayRidesTable";
-import ViewOnlyRow from "../../components/ViewOnlyRow";
-import data from "/app/mockdata/mock-data-new.js";
+
+
 
 export default function Page() {
-  const [ridesData, setRidesData] = useState(data);
+  const [ridesData, setRidesData] = useState([]);
+
+  useEffect(() => {
+    async function fetchRides() {
+      try {
+        const response = await fetch('/api/getAvailableRides');
+        const data = await response.json();
+        if (response.ok) {
+          setRidesData(data);
+        }
+        else{
+          throw new Error(data.message || 'Failed to fetch rides');
+        }
+      } catch (error) {
+        console.error('Error fetching rides:', error);
+      }
+    }
+
+    fetchRides();
+
+  }, []);
+
 
-  const tabs = [
-    {
-      aKey: "added",
-      title: "Added",
-      content: <DisplayRidesTable initialContacts={ridesData} />,
-    },
-  ];
 
   return (
     <div className="h-full w-full bg-white">
-      <SimpleTab activeKey="added">
-        {tabs.map((item) => (
-          <Tab key={item.aKey} aKey={item.aKey} title={item.title}>
-            {React.cloneElement(item.content, { initialContacts: ridesData })}
-          </Tab>
-        ))}
-      </SimpleTab>
+     <DisplayRidesTable
+     ridesData={ridesData}
+     />
     </div>
   );
 }