Donation Form History Resolved

src/App.jsx

@@ -19,13 +19,14 @@ import { AuthProvider } from './contexts/AuthContext';
 import ProtectedRoute from './utils/ProtectedRoute.jsx';
 import ViewBusiness from './components/ViewBusiness/ViewBusiness.jsx';
 import BusinessForm from './components/BusinessForm/BusinessForm.jsx';
+import ViewDonation from './components/ViewDonation/ViewDonation.jsx';
 
 const App = () => {
   return (
     <BackendProvider>
       <AuthProvider>
         <div className={styles.appLayout}>
-          <Sidebar isAdmin={false} />
+          <Sidebar isAdmin={true} />
           <div className={styles.mainContent}>
             <Routes>
               <Route exact path="/" element={<div>Welcome to the App</div>} />
@@ -97,6 +98,11 @@ const App = () => {
                 path="/EditBusiness/:id"
                 element={<ProtectedRoute Component={BusinessForm} />}
               />
+              <Route
+                exact
+                path="/ViewDonation/:id"
+                element={<ProtectedRoute Component={ViewDonation} />}
+              />
             </Routes>
           </div>
         </div>

src/components/DonationTrackingTable/DonationSite.jsx

@@ -1,10 +1,11 @@
 /* eslint react/prop-types: 0 */
 import { Tr, Td, Checkbox } from '@chakra-ui/react';
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 const DonationSite = ({ donation_site, checkSet, setCheck, topCheckBox }) => {
   const [individualCheckBox, setIndividualCheckBox] = useState(topCheckBox);
-
+  const navigate = useNavigate();
   useEffect(() => {
     setIndividualCheckBox(topCheckBox);
   }, [topCheckBox]);
@@ -40,6 +41,10 @@ const DonationSite = ({ donation_site, checkSet, setCheck, topCheckBox }) => {
     }
   };
 
+  const handleRowClick = async id => {
+    navigate(`/ViewDonation/${id}`);
+  };
+
   return (
     <Tr>
       <Checkbox
@@ -48,7 +53,7 @@ const DonationSite = ({ donation_site, checkSet, setCheck, topCheckBox }) => {
         sx={{ top: '15px', padding: '0 10px' }}
       />
       {headers.map((header, index) => (
-        <Td key={index}>{header}</Td>
+        <Td key={index} onClick={() => handleRowClick(donation_site.donation_id)}>{header}</Td>
       ))}
     </Tr>
   );