From e3b208fba50d0c51dc3e1d708c8683f707d487ce Mon Sep 17 00:00:00 2001
From: Vincent <dagreatcode@gmail.com>
Date: Sat, 6 Dec 2025 00:23:37 -0500
Subject: [PATCH 1/2] updating this to work

---
 .../src/containers/Admin/Users/AllUsers.tsx   | 222 +++++++++++-
 .../Admin/Users/UserProfile/UserProfile.tsx   | 330 +++++++++++++++++-
 2 files changed, 523 insertions(+), 29 deletions(-)

diff --git a/client/src/containers/Admin/Users/AllUsers.tsx b/client/src/containers/Admin/Users/AllUsers.tsx
index 7ea76d5..d00ab9c 100644
--- a/client/src/containers/Admin/Users/AllUsers.tsx
+++ b/client/src/containers/Admin/Users/AllUsers.tsx
@@ -68,8 +68,199 @@
 
 // export default AllUsers
 
+// import React, { useEffect, useState } from "react";
+// import { Link, useNavigate } from "react-router-dom";
+// import axios from "axios";
+// import "./AllUsers.css";
+
+// interface User {
+//   _id: string;
+//   email: string;
+//   password?: string;
+//   description?: string;
+//   archived?: boolean;
+//   admin?: boolean;
+//   developer?: boolean;
+// }
+
+// const ITEMS_PER_PAGE = 10;
+
+// const AllUsers: React.FC = () => {
+//   const [users, setUsers] = useState<User[]>([]);
+//   const [search, setSearch] = useState("");
+//   const [archivedFilter, setArchivedFilter] = useState("all");
+//   const [page, setPage] = useState(1);
+//   const navigate = useNavigate();
+
+//   // Fetch users
+//   const fetchUsers = async () => {
+//     try {
+//       const { data } = await axios.get("/api/user/view");
+//       setUsers(data);
+//     } catch (error) {
+//       console.error("Error fetching users:", error);
+//     }
+//   };
+
+//   useEffect(() => {
+//     fetchUsers();
+//   }, []);
+
+//   // Filtered users
+//   const filteredUsers = users.filter((user) => {
+//     const matchesSearch =
+//       user.email?.toLowerCase().includes(search.toLowerCase()) ||
+//       user.description?.toLowerCase().includes(search.toLowerCase());
+//     const matchesArchived =
+//       archivedFilter === "all" ||
+//       (archivedFilter === "archived" && user.archived) ||
+//       (archivedFilter === "active" && !user.archived);
+//     return matchesSearch && matchesArchived;
+//   });
+
+//   // Pagination
+//   const startIndex = (page - 1) * ITEMS_PER_PAGE;
+//   const pageUsers = filteredUsers.slice(
+//     startIndex,
+//     startIndex + ITEMS_PER_PAGE
+//   );
+//   const totalPages = Math.ceil(filteredUsers.length / ITEMS_PER_PAGE);
+
+//   // Archive toggle
+//   const toggleArchive = async (id: string, current: boolean) => {
+//     try {
+//       await axios.put(`/api/user/archive/${id}`, { archived: !current });
+//       setUsers((prev) =>
+//         prev.map((u) => (u._id === id ? { ...u, archived: !current } : u))
+//       );
+//     } catch (error) {
+//       console.error("Error updating archive:", error);
+//     }
+//   };
+
+//   return (
+//     <div className="users-wrapper">
+//       <div className="header-row">
+//         <h2>All Users</h2>
+//       </div>
+
+//       {/* Search + Filter */}
+//       <div className="filters">
+//         <input
+//           type="text"
+//           placeholder="Search by email or description..."
+//           value={search}
+//           onChange={(e) => setSearch(e.target.value)}
+//         />
+//         <select
+//           value={archivedFilter}
+//           onChange={(e) => setArchivedFilter(e.target.value)}
+//         >
+//           <option value="all">All Users</option>
+//           <option value="active">Active</option>
+//           <option value="archived">Archived</option>
+//         </select>
+//       </div>
+
+//       {/* Scrollable table */}
+//       <div className="table-scroll">
+//         <table className="users-table">
+//           <thead>
+//             <tr>
+//               <th>Email (click to edit)</th>
+//               <th>Password</th>
+//               <th>Description</th>
+//               <th>Archived</th>
+//               <th>Admin</th>
+//               <th>Developer</th>
+//               <th>Actions</th>
+//             </tr>
+//           </thead>
+//           <tbody>
+//             {pageUsers.length > 0 ? (
+//               pageUsers.map((user) => (
+//                 <tr key={user._id}>
+//                   <td>
+//                     <Link to={`/AdminUserProfile/${user._id}`} className="email-link">
+//                       {user.email}
+//                     </Link>
+//                   </td>
+//                   <td>{user.password || "—"}</td>
+//                   <td className="wrap">{user.description || "—"}</td>
+//                   <td>
+//                     <span
+//                       className={`badge ${user.archived ? "archived" : "active"}`}
+//                     >
+//                       {user.archived ? "Archived" : "Active"}
+//                     </span>
+//                   </td>
+//                   <td>
+//                     <span className={`badge ${user.admin ? "yes" : "no"}`}>
+//                       {user.admin ? "Yes" : "No"}
+//                     </span>
+//                   </td>
+//                   <td>
+//                     <span className={`badge ${user.developer ? "yes" : "no"}`}>
+//                       {user.developer ? "Yes" : "No"}
+//                     </span>
+//                   </td>
+//                   <td>
+//                     <button
+//                       className="archive-btn"
+//                       onClick={() => toggleArchive(user._id, !!user.archived)}
+//                     >
+//                       {user.archived ? "Unarchive" : "Archive"}
+//                     </button>
+//                     &nbsp;
+//                     <Link
+//                       to={`/AdminUserProfile/${user._id}`}
+//                       className="edit-btn"
+//                     >
+//                       Edit
+//                     </Link>
+//                   </td>
+//                 </tr>
+//               ))
+//             ) : (
+//               <tr>
+//                 <td colSpan={7} className="center">
+//                   No users found
+//                 </td>
+//               </tr>
+//             )}
+//           </tbody>
+//         </table>
+//       </div>
+
+//       {/* Pagination */}
+//       {totalPages > 1 && (
+//         <div className="pagination">
+//           <button disabled={page === 1} onClick={() => setPage(page - 1)}>
+//             Prev
+//           </button>
+//           <span>
+//             Page {page} of {totalPages}
+//           </span>
+//           <button
+//             disabled={page === totalPages}
+//             onClick={() => setPage(page + 1)}
+//           >
+//             Next
+//           </button>
+//         </div>
+//       )}
+
+//       <Link to="/Admin" className="home-link">
+//         Back Home
+//       </Link>
+//     </div>
+//   );
+// };
+
+// export default AllUsers;
+
 import React, { useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import axios from "axios";
 import "./AllUsers.css";
 
@@ -90,7 +281,6 @@ const AllUsers: React.FC = () => {
   const [search, setSearch] = useState("");
   const [archivedFilter, setArchivedFilter] = useState("all");
   const [page, setPage] = useState(1);
-  const navigate = useNavigate();
 
   // Fetch users
   const fetchUsers = async () => {
@@ -106,7 +296,7 @@ const AllUsers: React.FC = () => {
     fetchUsers();
   }, []);
 
-  // Filtered users
+  // Filter users
   const filteredUsers = users.filter((user) => {
     const matchesSearch =
       user.email?.toLowerCase().includes(search.toLowerCase()) ||
@@ -126,7 +316,7 @@ const AllUsers: React.FC = () => {
   );
   const totalPages = Math.ceil(filteredUsers.length / ITEMS_PER_PAGE);
 
-  // Archive toggle
+  // Toggle archive status
   const toggleArchive = async (id: string, current: boolean) => {
     try {
       await axios.put(`/api/user/archive/${id}`, { archived: !current });
@@ -140,9 +330,7 @@ const AllUsers: React.FC = () => {
 
   return (
     <div className="users-wrapper">
-      <div className="header-row">
-        <h2>All Users</h2>
-      </div>
+      <h2 className="header-row">All Users</h2>
 
       {/* Search + Filter */}
       <div className="filters">
@@ -177,11 +365,14 @@ const AllUsers: React.FC = () => {
             </tr>
           </thead>
           <tbody>
-            {pageUsers.length > 0 ? (
+            {pageUsers.length ? (
               pageUsers.map((user) => (
                 <tr key={user._id}>
                   <td>
-                    <Link to={`/AdminUserProfile/${user._id}`} className="email-link">
+                    <Link
+                      to={`/AdminUserProfile/${user._id}`}
+                      className="email-link"
+                    >
                       {user.email}
                     </Link>
                   </td>
@@ -189,7 +380,9 @@ const AllUsers: React.FC = () => {
                   <td className="wrap">{user.description || "—"}</td>
                   <td>
                     <span
-                      className={`badge ${user.archived ? "archived" : "active"}`}
+                      className={`badge ${
+                        user.archived ? "archived" : "active"
+                      }`}
                     >
                       {user.archived ? "Archived" : "Active"}
                     </span>
@@ -207,7 +400,9 @@ const AllUsers: React.FC = () => {
                   <td>
                     <button
                       className="archive-btn"
-                      onClick={() => toggleArchive(user._id, !!user.archived)}
+                      onClick={() =>
+                        toggleArchive(user._id, !!user.archived)
+                      }
                     >
                       {user.archived ? "Unarchive" : "Archive"}
                     </button>
@@ -235,7 +430,10 @@ const AllUsers: React.FC = () => {
       {/* Pagination */}
       {totalPages > 1 && (
         <div className="pagination">
-          <button disabled={page === 1} onClick={() => setPage(page - 1)}>
+          <button
+            disabled={page === 1}
+            onClick={() => setPage(page - 1)}
+          >
             Prev
           </button>
           <span>
diff --git a/client/src/containers/Admin/Users/UserProfile/UserProfile.tsx b/client/src/containers/Admin/Users/UserProfile/UserProfile.tsx
index 8c1dc57..aaf3fe6 100644
--- a/client/src/containers/Admin/Users/UserProfile/UserProfile.tsx
+++ b/client/src/containers/Admin/Users/UserProfile/UserProfile.tsx
@@ -229,6 +229,275 @@
 
 // export default UserProfile;
 
+// import React, { useEffect, useState } from "react";
+// import { useParams, useNavigate, Link } from "react-router-dom";
+// import axios from "axios";
+// import Button from "react-bootstrap/Button";
+
+// interface User {
+//   email: string;
+//   password?: string;
+//   description?: string;
+// }
+
+// const UserProfile: React.FC = () => {
+//   const { id } = useParams<{ id: string }>();
+//   const navigate = useNavigate();
+//   const [user, setUser] = useState<User>({ email: "", password: "", description: "" });
+//   const [loading, setLoading] = useState(true);
+//   const [error, setError] = useState<string | null>(null);
+//   const [success, setSuccess] = useState(false);
+
+//   // Fetch user by ID
+//   const fetchUser = async () => {
+//     try {
+//       const { data } = await axios.get(`/api/user/${id}`);
+//       setUser(data);
+//     } catch (err) {
+//       setError("Failed to fetch user.");
+//       console.error(err);
+//     } finally {
+//       setLoading(false);
+//     }
+//   };
+
+//   useEffect(() => {
+//     fetchUser();
+//   }, [id]);
+
+//   // Handle input changes
+//   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+//     const { name, value } = e.target;
+//     setUser((prev) => ({ ...prev, [name]: value }));
+//   };
+
+//   // Handle form submit
+//   const handleSubmit = async (e: React.FormEvent) => {
+//     e.preventDefault();
+//     try {
+//       await axios.put(`/api/user/update/${id}`, {
+//         email: user.email,
+//         password: user.password,
+//         description: user.description,
+//       });
+//       setSuccess(true);
+//       setTimeout(() => navigate("/AllUsers"), 1000);
+//     } catch (err) {
+//       setError("Failed to update user.");
+//       console.error(err);
+//     }
+//   };
+
+//   if (loading) return <p>Loading user data...</p>;
+
+//   return (
+//     <div className="container" style={{ maxWidth: 600, marginTop: 40 }}>
+//       <h2>Update User</h2>
+//       {error && <p style={{ color: "red" }}>{error}</p>}
+//       {success && <p style={{ color: "green" }}>User updated successfully!</p>}
+
+//       <form onSubmit={handleSubmit}>
+//         <div className="form-group">
+//           <label>Email</label>
+//           <input
+//             type="email"
+//             name="email"
+//             className="form-control"
+//             value={user.email}
+//             onChange={handleChange}
+//             required
+//           />
+//         </div>
+
+//         <div className="form-group">
+//           <label>Password</label>
+//           <input
+//             type="password"
+//             name="password"
+//             className="form-control"
+//             value={user.password}
+//             onChange={handleChange}
+//             placeholder="Enter new password"
+//           />
+//         </div>
+
+//         <div className="form-group">
+//           <label>Description</label>
+//           <textarea
+//             name="description"
+//             className="form-control"
+//             value={user.description}
+//             onChange={handleChange}
+//             rows={3}
+//           />
+//         </div>
+
+//         <Button type="submit" className="btn btn-primary">
+//           Update User
+//         </Button>
+//       </form>
+
+//       <Link to="/AllUsers" style={{ display: "block", marginTop: 20 }}>
+//         Back to All Users
+//       </Link>
+//     </div>
+//   );
+// };
+
+// export default UserProfile;
+
+// import React, { useEffect, useState } from "react";
+// import { useParams, useNavigate, Link } from "react-router-dom";
+// import axios from "axios";
+// import Button from "react-bootstrap/Button";
+
+// interface User {
+//   email: string;
+//   password?: string;
+//   description?: string;
+//   admin?: boolean;
+//   developer?: boolean;
+//   archived?: boolean;
+// }
+
+// const UserProfile: React.FC = () => {
+//   const { id } = useParams<{ id: string }>();
+//   const navigate = useNavigate();
+//   const [user, setUser] = useState<User>({
+//     email: "",
+//     password: "",
+//     description: "",
+//   });
+//   const [loading, setLoading] = useState(true);
+//   const [error, setError] = useState<string | null>(null);
+//   const [success, setSuccess] = useState(false);
+
+//   // Fetch user by ID
+//   const fetchUser = async () => {
+//     try {
+//       const { data } = await axios.get(`/api/user/${id}`);
+//       setUser(data);
+//     } catch (err) {
+//       setError("Failed to fetch user.");
+//       console.error(err);
+//     } finally {
+//       setLoading(false);
+//     }
+//   };
+
+//   useEffect(() => {
+//     fetchUser();
+//   }, [id]);
+
+//   // Handle input changes
+//   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+//     const { name, value } = e.target;
+//     setUser((prev) => ({ ...prev, [name]: value }));
+//   };
+
+//   // Handle form submit
+//   const handleSubmit = async (e: React.FormEvent) => {
+//     e.preventDefault();
+//     try {
+//       await axios.put(`/api/user/update/${id}`, user);
+//       setSuccess(true);
+//       setTimeout(() => navigate("/AllUsers"), 1000);
+//     } catch (err) {
+//       setError("Failed to update user.");
+//       console.error(err);
+//     }
+//   };
+
+//   if (loading) return <p>Loading user data...</p>;
+
+//   return (
+//     <div style={{ maxWidth: 600, margin: "40px auto" }}>
+//       <h2>Update User</h2>
+//       {error && <p style={{ color: "red" }}>{error}</p>}
+//       {success && <p style={{ color: "green" }}>User updated successfully!</p>}
+
+//       <form onSubmit={handleSubmit}>
+//         <div className="form-group">
+//           <label>Email</label>
+//           <input
+//             type="email"
+//             name="email"
+//             className="form-control"
+//             value={user.email}
+//             onChange={handleChange}
+//             required
+//           />
+//         </div>
+
+//         <div className="form-group">
+//           <label>Password</label>
+//           <input
+//             type="password"
+//             name="password"
+//             className="form-control"
+//             value={user.password}
+//             onChange={handleChange}
+//             placeholder="Enter new password"
+//           />
+//         </div>
+
+//         <div className="form-group">
+//           <label>Description</label>
+//           <textarea
+//             name="description"
+//             className="form-control"
+//             value={user.description}
+//             onChange={handleChange}
+//             rows={3}
+//           />
+//         </div>
+
+//         <div className="form-group">
+//           <label>
+//             <input
+//               type="checkbox"
+//               name="admin"
+//               checked={!!user.admin}
+//               onChange={(e) => setUser({ ...user, admin: e.target.checked })}
+//             />
+//             Admin
+//           </label>
+//           &nbsp;&nbsp;
+//           <label>
+//             <input
+//               type="checkbox"
+//               name="developer"
+//               checked={!!user.developer}
+//               onChange={(e) => setUser({ ...user, developer: e.target.checked })}
+//             />
+//             Developer
+//           </label>
+//           &nbsp;&nbsp;
+//           <label>
+//             <input
+//               type="checkbox"
+//               name="archived"
+//               checked={!!user.archived}
+//               onChange={(e) => setUser({ ...user, archived: e.target.checked })}
+//             />
+//             Archived
+//           </label>
+//         </div>
+
+//         <Button type="submit" className="btn btn-primary">
+//           Update User
+//         </Button>
+//       </form>
+
+//       <Link to="/AllUsers" style={{ display: "block", marginTop: 20 }}>
+//         Back to All Users
+//       </Link>
+//     </div>
+//   );
+// };
+
+// export default UserProfile;
+
 import React, { useEffect, useState } from "react";
 import { useParams, useNavigate, Link } from "react-router-dom";
 import axios from "axios";
@@ -238,24 +507,29 @@ interface User {
   email: string;
   password?: string;
   description?: string;
+  admin?: boolean;
+  developer?: boolean;
+  archived?: boolean;
 }
 
 const UserProfile: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
-  const [user, setUser] = useState<User>({ email: "", password: "", description: "" });
+  const [user, setUser] = useState<User>({
+    email: "",
+    password: "",
+    description: "",
+  });
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
 
-  // Fetch user by ID
   const fetchUser = async () => {
     try {
       const { data } = await axios.get(`/api/user/${id}`);
       setUser(data);
     } catch (err) {
       setError("Failed to fetch user.");
-      console.error(err);
     } finally {
       setLoading(false);
     }
@@ -265,33 +539,26 @@ const UserProfile: React.FC = () => {
     fetchUser();
   }, [id]);
 
-  // Handle input changes
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
     setUser((prev) => ({ ...prev, [name]: value }));
   };
 
-  // Handle form submit
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
-      await axios.put(`/api/user/update/${id}`, {
-        email: user.email,
-        password: user.password,
-        description: user.description,
-      });
+      await axios.put(`/api/user/update/${id}`, user);
       setSuccess(true);
       setTimeout(() => navigate("/AllUsers"), 1000);
-    } catch (err) {
+    } catch {
       setError("Failed to update user.");
-      console.error(err);
     }
   };
 
-  if (loading) return <p>Loading user data...</p>;
+  if (loading) return <p>Loading...</p>;
 
   return (
-    <div className="container" style={{ maxWidth: 600, marginTop: 40 }}>
+    <div style={{ maxWidth: 600, margin: "40px auto" }}>
       <h2>Update User</h2>
       {error && <p style={{ color: "red" }}>{error}</p>}
       {success && <p style={{ color: "green" }}>User updated successfully!</p>}
@@ -308,7 +575,6 @@ const UserProfile: React.FC = () => {
             required
           />
         </div>
-
         <div className="form-group">
           <label>Password</label>
           <input
@@ -320,7 +586,6 @@ const UserProfile: React.FC = () => {
             placeholder="Enter new password"
           />
         </div>
-
         <div className="form-group">
           <label>Description</label>
           <textarea
@@ -331,7 +596,38 @@ const UserProfile: React.FC = () => {
             rows={3}
           />
         </div>
-
+        <div className="form-group">
+          <label>
+            <input
+              type="checkbox"
+              checked={!!user.admin}
+              onChange={(e) => setUser({ ...user, admin: e.target.checked })}
+            />
+            Admin
+          </label>
+          &nbsp;&nbsp;
+          <label>
+            <input
+              type="checkbox"
+              checked={!!user.developer}
+              onChange={(e) =>
+                setUser({ ...user, developer: e.target.checked })
+              }
+            />
+            Developer
+          </label>
+          &nbsp;&nbsp;
+          <label>
+            <input
+              type="checkbox"
+              checked={!!user.archived}
+              onChange={(e) =>
+                setUser({ ...user, archived: e.target.checked })
+              }
+            />
+            Archived
+          </label>
+        </div>
         <Button type="submit" className="btn btn-primary">
           Update User
         </Button>

From b9429ed285536a254b066110c0c52f3ed97b2cc1 Mon Sep 17 00:00:00 2001
From: Vincent <dagreatcode@gmail.com>
Date: Sat, 6 Dec 2025 00:32:52 -0500
Subject: [PATCH 2/2] updating the agreement look

---
 .../Admin/Agreements/Agreements.css           |  65 ++++
 .../Admin/Agreements/Agreements.tsx           | 310 ++++++++++++------
 2 files changed, 279 insertions(+), 96 deletions(-)
 create mode 100644 client/src/containers/Admin/Agreements/Agreements.css

diff --git a/client/src/containers/Admin/Agreements/Agreements.css b/client/src/containers/Admin/Agreements/Agreements.css
new file mode 100644
index 0000000..050cfdb
--- /dev/null
+++ b/client/src/containers/Admin/Agreements/Agreements.css
@@ -0,0 +1,65 @@
+.agreements-wrapper {
+  max-width: 1200px;
+  margin: 40px auto;
+  padding: 0 20px;
+  font-family: Arial, sans-serif;
+}
+
+h2 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.table-container {
+  overflow-x: auto;
+  margin-bottom: 20px;
+}
+
+.agreements-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.agreements-table th,
+.agreements-table td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.agreements-table th {
+  background-color: #f4f4f4;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.agreements-table tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.view-btn,
+.agree-btn {
+  padding: 6px 12px;
+  background-color: #007bff;
+  border: none;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.view-btn:hover,
+.agree-btn:hover {
+  background-color: #0056b3;
+}
+
+.home-link {
+  display: inline-block;
+  margin-top: 10px;
+  color: #007bff;
+}
+
+.home-link:hover {
+  text-decoration: underline;
+}
diff --git a/client/src/containers/Admin/Agreements/Agreements.tsx b/client/src/containers/Admin/Agreements/Agreements.tsx
index 227a586..9fc696c 100644
--- a/client/src/containers/Admin/Agreements/Agreements.tsx
+++ b/client/src/containers/Admin/Agreements/Agreements.tsx
@@ -1,122 +1,240 @@
-// import { Axios } from "axios";
+// // import { Axios } from "axios";
+// import React, { useEffect, useState } from "react";
+// // import PropTypes from 'prop-types'
+// // import axios from "axios";
+// import { Link } from "react-router-dom";
+
+// const Agreements = () => {
+//   //   const url = "/api/agreement/create"
+//   const [agreement, setAgreement] = React.useState(false);
+//   const [agreeData, setData] = useState([]);
+
+//   useEffect(() => {
+//     // Fix code to work in production
+//     // let letsClean = async () =>
+//     fetch("/api/agreement/view")
+//       .then((res) => res.json())
+//       .then((data) => {
+//         // console.log("Data is returned", data);
+//         //   setAgreement(true);
+//         setAgreement(true);
+//         setData(data);
+//         //   setData(data)
+//         //   console.log(data[0].date)
+//       })
+//       .catch((err) => err);
+//     // Fix code to work in production
+//     // return () => {
+//     //   letsClean();
+//     // };
+//     // setAgreement(true);
+//   }, []);
+
+//   useEffect(() => {
+//     const letsClean = () => {
+//       if (localStorage.getItem("agree") === "true") {
+//         setAgreement(true);
+//         // console.log(true);
+//       } else {
+//         setAgreement(false);
+//         // console.log(false);
+//       }
+//     };
+//     return () => letsClean();
+//   }, []);
+
+//   const handleSubmit = (e: any) => {
+//     e.preventDefault();
+//     localStorage.setItem("agree", "true");
+//     setAgreement(true);
+//     console.log("agreed");
+//   };
+
+//   const handleID = (e: any) => {
+//     e.preventDefault();
+//     console.log("Do Something");
+//     const id = e.target.value;
+//     // console.log(id)
+//     // axios.get(`/api/agreement/agreed/:${id}`)
+//     // fetch(`/api/agreement/agreed/${id}`)
+//     window.location.href = `/agreed/${id}`;
+//     // window.location.href=`http://localhost:3000/agreed/${id}`;
+//   };
+
+//   return agreement ? (
+//     <div className="container">
+//       <h1>Show Agreements</h1>
+//       <table>
+//         <thead>
+//           <tr>
+//             <th></th>
+//             {/* <th>ID</th> */}
+//             <th>Email</th>
+//             <th>Date Agreed</th>
+//             <th>Description</th>
+//             <th>Number MC</th>
+//             <th>Freight Rate</th>
+//             <th>Invoice Rate</th>
+//             <th>Company</th>
+//             <th>Signature</th>
+//           </tr>
+//         </thead>
+//         <tbody>
+//           {agreeData.map((r: any, i: any) => (
+//             <tr key={i}>
+//               <td>
+//                 {" "}
+//                 <input onClick={handleID} type="submit" value={`${r.id}`} />
+//               </td>
+//               {/* <td>{r.id}</td> */}
+//               <td>{r.email}</td>
+//               <td>{r.date}</td>
+//               <td>{r.description}</td>
+//               <td>{r.numberMC}</td>
+//               <td>{r.freightRate}</td>
+//               <td>{r.invoiceRate}</td>
+//               <td>{r.company}</td>
+//               <td>{r.signature}</td>
+//               {/* <td>{r}</td> */}
+//             </tr>
+//           ))}
+//         </tbody>
+//       </table>
+//       {/* {agreeData.map((agree:any)=>(<p>{agree}</p>))} */}
+//       <Link to="/Admin">Home</Link>
+
+//     </div>
+//   ) : (
+//     <>
+//       <button onClick={(e) => handleSubmit(e)}>Agree Here</button>
+//       No Agreements to show<br/>
+//       <Link to="/Admin">Home</Link>
+//     </>
+//   );
+// };
+
+// export default Agreements;
+
+// /*
+// Agreements.propTypes = {
+//     text: PropTypes.string
+// };
+// */
+
 import React, { useEffect, useState } from "react";
-// import PropTypes from 'prop-types'
-// import axios from "axios";
 import { Link } from "react-router-dom";
+import "./Agreements.css"; // Create a CSS file for styling
 
-const Agreements = () => {
-  //   const url = "/api/agreement/create"
-  const [agreement, setAgreement] = React.useState(false);
-  const [agreeData, setData] = useState([]);
+interface Agreement {
+  id: string;
+  email: string;
+  date: string;
+  description: string;
+  numberMC?: string;
+  freightRate?: string;
+  invoiceRate?: string;
+  company?: string;
+  signature?: string;
+}
 
-  useEffect(() => {
-    // Fix code to work in production
-    // let letsClean = async () =>
-    fetch("/api/agreement/view")
-      .then((res) => res.json())
-      .then((data) => {
-        // console.log("Data is returned", data);
-        //   setAgreement(true);
-        setAgreement(true);
-        setData(data);
-        //   setData(data)
-        //   console.log(data[0].date)
-      })
-      .catch((err) => err);
-    // Fix code to work in production
-    // return () => {
-    //   letsClean();
-    // };
-    // setAgreement(true);
-  }, []);
+const Agreements: React.FC = () => {
+  const [agreement, setAgreement] = useState(false);
+  const [agreeData, setAgreeData] = useState<Agreement[]>([]);
 
+  // Fetch agreements
   useEffect(() => {
-    const letsClean = () => {
-      if (localStorage.getItem("agree") === "true") {
+    const fetchAgreements = async () => {
+      try {
+        const res = await fetch("/api/agreement/view");
+        const data = await res.json();
+        setAgreeData(data);
         setAgreement(true);
-        // console.log(true);
-      } else {
-        setAgreement(false);
-        // console.log(false);
+      } catch (err) {
+        console.error(err);
       }
     };
-    return () => letsClean();
+    fetchAgreements();
+  }, []);
+
+  // Check local storage for agreement
+  useEffect(() => {
+    const storedAgree = localStorage.getItem("agree");
+    if (storedAgree === "true") setAgreement(true);
   }, []);
 
-  const handleSubmit = (e: any) => {
+  const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     localStorage.setItem("agree", "true");
     setAgreement(true);
-    console.log("agreed");
   };
 
-  const handleID = (e: any) => {
-    e.preventDefault();
-    console.log("Do Something");
-    const id = e.target.value;
-    // console.log(id)
-    // axios.get(`/api/agreement/agreed/:${id}`)
-    // fetch(`/api/agreement/agreed/${id}`)
+  const handleID = (id: string) => {
     window.location.href = `/agreed/${id}`;
-    // window.location.href=`http://localhost:3000/agreed/${id}`;
   };
 
-  return agreement ? (
-    <div className="container">
-      <h1>Show Agreements</h1>
-      <table>
-        <thead>
-          <tr>
-            <th></th>
-            {/* <th>ID</th> */}
-            <th>Email</th>
-            <th>Date Agreed</th>
-            <th>Description</th>
-            <th>Number MC</th>
-            <th>Freight Rate</th>
-            <th>Invoice Rate</th>
-            <th>Company</th>
-            <th>Signature</th>
-          </tr>
-        </thead>
-        <tbody>
-          {agreeData.map((r: any, i: any) => (
-            <tr key={i}>
-              <td>
-                {" "}
-                <input onClick={handleID} type="submit" value={`${r.id}`} />
-              </td>
-              {/* <td>{r.id}</td> */}
-              <td>{r.email}</td>
-              <td>{r.date}</td>
-              <td>{r.description}</td>
-              <td>{r.numberMC}</td>
-              <td>{r.freightRate}</td>
-              <td>{r.invoiceRate}</td>
-              <td>{r.company}</td>
-              <td>{r.signature}</td>
-              {/* <td>{r}</td> */}
+  if (!agreement) {
+    return (
+      <div className="agreements-wrapper">
+        <h2>Agreements</h2>
+        <p>Please agree to continue:</p>
+        <button className="agree-btn" onClick={handleSubmit}>
+          Agree Here
+        </button>
+        <br />
+        <Link to="/Admin">Back to Home</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="agreements-wrapper">
+      <h2>Agreements</h2>
+
+      <div className="table-container">
+        <table className="agreements-table">
+          <thead>
+            <tr>
+              <th>Action</th>
+              <th>Email</th>
+              <th>Date Agreed</th>
+              <th>Description</th>
+              <th>Number MC</th>
+              <th>Freight Rate</th>
+              <th>Invoice Rate</th>
+              <th>Company</th>
+              <th>Signature</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
-      {/* {agreeData.map((agree:any)=>(<p>{agree}</p>))} */}
-      <Link to="/Admin">Home</Link>
+          </thead>
+          <tbody>
+            {agreeData.map((r) => (
+              <tr key={r.id}>
+                <td>
+                  <button
+                    className="view-btn"
+                    onClick={() => handleID(r.id)}
+                  >
+                    View
+                  </button>
+                </td>
+                <td>{r.email}</td>
+                <td>{r.date}</td>
+                <td>{r.description}</td>
+                <td>{r.numberMC || "—"}</td>
+                <td>{r.freightRate || "—"}</td>
+                <td>{r.invoiceRate || "—"}</td>
+                <td>{r.company || "—"}</td>
+                <td>{r.signature || "—"}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
 
+      <Link to="/Admin" className="home-link">
+        Back to Home
+      </Link>
     </div>
-  ) : (
-    <>
-      <button onClick={(e) => handleSubmit(e)}>Agree Here</button>
-      No Agreements to show<br/>
-      <Link to="/Admin">Home</Link>
-    </>
   );
 };
 
 export default Agreements;
-
-/*
-Agreements.propTypes = {
-    text: PropTypes.string
-};
-*/