From bddbbc3ee0cc0630d6d823f01647ab63e18b9e71 Mon Sep 17 00:00:00 2001
From: Vincent <dagreatcode@gmail.com>
Date: Sat, 6 Dec 2025 02:01:27 -0500
Subject: [PATCH 1/2] updates

---
 .../Admin/B2BMessages/B2BMessages.tsx         | 235 +++++++++++++++---
 1 file changed, 200 insertions(+), 35 deletions(-)

diff --git a/client/src/containers/Admin/B2BMessages/B2BMessages.tsx b/client/src/containers/Admin/B2BMessages/B2BMessages.tsx
index 5e39e4c..6503725 100644
--- a/client/src/containers/Admin/B2BMessages/B2BMessages.tsx
+++ b/client/src/containers/Admin/B2BMessages/B2BMessages.tsx
@@ -77,9 +77,105 @@
 
 // export default B2BMessages;
 
+// import React, { useEffect, useState } from "react";
+// import axios from "axios";
+
+// type Message = {
+//   updatedAt: string;
+//   createdAt: string;
+//   sender: string;
+//   receiver: string;
+//   content: string;
+// };
+
+// const B2BMessages: React.FC = () => {
+//   const [messages, setMessages] = useState<Message[]>([]);
+//   const [loading, setLoading] = useState(true);
+//   const [error, setError] = useState<string | null>(null);
+
+//   useEffect(() => {
+//     const fetchMessages = async () => {
+//       try {
+//         const res = await axios.get<Message[]>("/api/message/cheat");
+//         setMessages(res.data);
+//         setError(null);
+//       } catch (err) {
+//         console.error("Error fetching messages:", err);
+//         setError("Failed to fetch messages. Please try again later.");
+//       } finally {
+//         setLoading(false);
+//       }
+//     };
+
+//     fetchMessages();
+//   }, []);
+
+//   const formatDate = (dateStr: string) => {
+//     const d = new Date(dateStr);
+//     return d.toLocaleString();
+//   };
+
+//   return (
+//     <div style={{ padding: "20px" }}>
+//       <h1 style={{ marginBottom: "20px" }}>Admin Dashboard</h1>
+
+//       {/* Loading Indicator */}
+//       {loading && (
+//         <p style={{ fontWeight: "bold" }}>
+//           <span className="spinner-border spinner-border-sm"></span> Loading
+//           messages…
+//         </p>
+//       )}
+
+//       {/* Error Message */}
+//       {error && <p style={{ color: "red", fontWeight: "bold" }}>{error}</p>}
+
+//       {/* No Messages */}
+//       {!loading && !error && messages.length === 0 && (
+//         <p>No messages found.</p>
+//       )}
+
+//       {/* Message Table */}
+//       {!loading && messages.length > 0 && (
+//         <table style={{ width: "100%", borderCollapse: "collapse" }}>
+//           <thead>
+//             <tr style={{ background: "#f0f0f0" }}>
+//               <th style={cellStyle}>Sender</th>
+//               <th style={cellStyle}>Receiver</th>
+//               <th style={cellStyle}>Content</th>
+//               <th style={cellStyle}>Created</th>
+//               <th style={cellStyle}>Updated</th>
+//             </tr>
+//           </thead>
+//           <tbody>
+//             {messages.map((msg, i) => (
+//               <tr key={i}>
+//                 <td style={cellStyle}>{msg.sender}</td>
+//                 <td style={cellStyle}>{msg.receiver}</td>
+//                 <td style={cellStyle}>{msg.content}</td>
+//                 <td style={cellStyle}>{formatDate(msg.createdAt)}</td>
+//                 <td style={cellStyle}>{formatDate(msg.updatedAt)}</td>
+//               </tr>
+//             ))}
+//           </tbody>
+//         </table>
+//       )}
+//     </div>
+//   );
+// };
+
+// const cellStyle = {
+//   border: "1px solid #ddd",
+//   padding: "8px",
+//   fontSize: "14px",
+// };
+
+// export default B2BMessages;
+
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 
+// Define the message type
 type Message = {
   updatedAt: string;
   createdAt: string;
@@ -116,58 +212,127 @@ const B2BMessages: React.FC = () => {
   };
 
   return (
-    <div style={{ padding: "20px" }}>
-      <h1 style={{ marginBottom: "20px" }}>Admin Dashboard</h1>
+    <div style={styles.container}>
+      <h1 style={styles.header}>Admin B2B Messages</h1>
 
-      {/* Loading Indicator */}
+      {/* Loading State */}
       {loading && (
-        <p style={{ fontWeight: "bold" }}>
-          <span className="spinner-border spinner-border-sm"></span> Loading
-          messages…
-        </p>
+        <div style={styles.loadingContainer}>
+          <div className="spinner-border text-primary" role="status"></div>
+          <span style={{ marginLeft: 10 }}>Loading messages...</span>
+        </div>
       )}
 
       {/* Error Message */}
-      {error && <p style={{ color: "red", fontWeight: "bold" }}>{error}</p>}
+      {error && <div style={styles.error}>{error}</div>}
 
       {/* No Messages */}
       {!loading && !error && messages.length === 0 && (
-        <p>No messages found.</p>
+        <div style={styles.noMessages}>No messages found.</div>
       )}
 
-      {/* Message Table */}
+      {/* Messages Table */}
       {!loading && messages.length > 0 && (
-        <table style={{ width: "100%", borderCollapse: "collapse" }}>
-          <thead>
-            <tr style={{ background: "#f0f0f0" }}>
-              <th style={cellStyle}>Sender</th>
-              <th style={cellStyle}>Receiver</th>
-              <th style={cellStyle}>Content</th>
-              <th style={cellStyle}>Created</th>
-              <th style={cellStyle}>Updated</th>
-            </tr>
-          </thead>
-          <tbody>
-            {messages.map((msg, i) => (
-              <tr key={i}>
-                <td style={cellStyle}>{msg.sender}</td>
-                <td style={cellStyle}>{msg.receiver}</td>
-                <td style={cellStyle}>{msg.content}</td>
-                <td style={cellStyle}>{formatDate(msg.createdAt)}</td>
-                <td style={cellStyle}>{formatDate(msg.updatedAt)}</td>
+        <div style={styles.tableContainer}>
+          <table style={styles.table}>
+            <thead>
+              <tr style={styles.tableHeaderRow}>
+                <th style={styles.tableHeader}>Sender</th>
+                <th style={styles.tableHeader}>Receiver</th>
+                <th style={styles.tableHeader}>Content</th>
+                <th style={styles.tableHeader}>Created</th>
+                <th style={styles.tableHeader}>Updated</th>
               </tr>
-            ))}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {messages.map((msg, i) => (
+                <tr
+                  key={i}
+                  style={{
+                    ...styles.tableRow,
+                    backgroundColor: i % 2 === 0 ? "#fafafa" : "#fff",
+                  }}
+                >
+                  <td style={styles.tableCell}>{msg.sender}</td>
+                  <td style={styles.tableCell}>{msg.receiver}</td>
+                  <td style={styles.tableCell}>{msg.content}</td>
+                  <td style={styles.tableCell}>{formatDate(msg.createdAt)}</td>
+                  <td style={styles.tableCell}>{formatDate(msg.updatedAt)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       )}
     </div>
   );
 };
 
-const cellStyle = {
-  border: "1px solid #ddd",
-  padding: "8px",
-  fontSize: "14px",
+// Styles
+const styles: { [key: string]: React.CSSProperties } = {
+  container: {
+    padding: "20px",
+    fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
+    maxWidth: "1200px",
+    margin: "0 auto",
+  },
+  header: {
+    marginBottom: "20px",
+    fontSize: "2rem",
+    fontWeight: "bold",
+    color: "#333",
+  },
+  loadingContainer: {
+    display: "flex",
+    alignItems: "center",
+    fontSize: "1.1rem",
+    fontWeight: 500,
+    color: "#555",
+  },
+  error: {
+    color: "red",
+    fontWeight: "bold",
+    marginBottom: "10px",
+  },
+  noMessages: {
+    fontStyle: "italic",
+    color: "#777",
+    marginTop: "10px",
+  },
+  tableContainer: {
+    maxHeight: "500px",
+    overflowY: "auto",
+    border: "1px solid #ddd",
+    borderRadius: "8px",
+  },
+  table: {
+    width: "100%",
+    borderCollapse: "collapse",
+    minWidth: "800px",
+  },
+  tableHeaderRow: {
+    position: "sticky",
+    top: 0,
+    backgroundColor: "#007BFF",
+    color: "#fff",
+    zIndex: 1,
+  },
+  tableHeader: {
+    padding: "12px",
+    textAlign: "left",
+    fontWeight: "bold",
+    borderBottom: "2px solid #0056b3",
+  },
+  tableRow: {
+    transition: "background-color 0.2s",
+    cursor: "default",
+  },
+  tableCell: {
+    padding: "10px",
+    borderBottom: "1px solid #ddd",
+    fontSize: "0.95rem",
+    wordBreak: "break-word",
+  },
 };
 
 export default B2BMessages;

From 964ff588d74a9431fc18bca20be4dbd68ae09605 Mon Sep 17 00:00:00 2001
From: Vincent <dagreatcode@gmail.com>
Date: Sat, 6 Dec 2025 02:05:54 -0500
Subject: [PATCH 2/2] updates

---
 .../Admin/Users/UserProfile/UserProfile.tsx   | 527 ++++++------------
 1 file changed, 160 insertions(+), 367 deletions(-)

diff --git a/client/src/containers/Admin/Users/UserProfile/UserProfile.tsx b/client/src/containers/Admin/Users/UserProfile/UserProfile.tsx
index aaf3fe6..d0503f6 100644
--- a/client/src/containers/Admin/Users/UserProfile/UserProfile.tsx
+++ b/client/src/containers/Admin/Users/UserProfile/UserProfile.tsx
@@ -229,413 +229,206 @@
 
 // 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";
-import Button from "react-bootstrap/Button";
+import { useParams, Link } from "react-router-dom";
+import { Button, Spinner, Alert, Form, Row, Col } from "react-bootstrap";
 
 interface User {
+  id: number;
   email: string;
+  firstName: string;
+  lastName: string;
+  address?: string;
+  city?: string;
+  state?: string;
+  zip?: string;
   password?: string;
-  description?: string;
-  admin?: boolean;
-  developer?: boolean;
-  archived?: boolean;
+  // Add any other fields you have in your DB
 }
 
 const UserProfile: React.FC = () => {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const [user, setUser] = useState<User>({
-    email: "",
-    password: "",
-    description: "",
-  });
+  const { id } = useParams<{ id: string }>(); // get user ID from route params
+  const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState(false);
-
-  const fetchUser = async () => {
-    try {
-      const { data } = await axios.get(`/api/user/${id}`);
-      setUser(data);
-    } catch (err) {
-      setError("Failed to fetch user.");
-    } finally {
-      setLoading(false);
-    }
-  };
+  const [success, setSuccess] = useState<string | null>(null);
 
+  // Fetch user info
   useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        const res = await axios.get<User>(`/api/users/${id}`);
+        setUser(res.data);
+        setError(null);
+      } catch (err) {
+        console.error(err);
+        setError("Failed to fetch user data.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
     fetchUser();
   }, [id]);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  // Handle input changes
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    if (!user) return;
     const { name, value } = e.target;
-    setUser((prev) => ({ ...prev, [name]: value }));
+    setUser({ ...user, [name]: value });
   };
 
+  // Handle form submission
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (!user) return;
+
+    setSaving(true);
+    setSuccess(null);
+    setError(null);
+
     try {
-      await axios.put(`/api/user/update/${id}`, user);
-      setSuccess(true);
-      setTimeout(() => navigate("/AllUsers"), 1000);
-    } catch {
-      setError("Failed to update user.");
+      await axios.put(`/api/users/${id}`, user);
+      setSuccess("User updated successfully!");
+    } catch (err) {
+      console.error(err);
+      setError("Failed to update user. Please try again.");
+    } finally {
+      setSaving(false);
     }
   };
 
-  if (loading) return <p>Loading...</p>;
+  if (loading) {
+    return (
+      <div className="text-center mt-5">
+        <Spinner animation="border" /> Loading user info…
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert variant="danger" className="mt-3 text-center">
+        {error}
+      </Alert>
+    );
+  }
 
   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
+    <div className="container mt-4">
+      <h2 className="text-center mb-4">Admin: Edit User Profile</h2>
+      {success && <Alert variant="success">{success}</Alert>}
+      {error && <Alert variant="danger">{error}</Alert>}
+
+      <Form onSubmit={handleSubmit}>
+        <Form.Group className="mb-3">
+          <Form.Label>Email</Form.Label>
+          <Form.Control
             type="email"
             name="email"
-            className="form-control"
-            value={user.email}
+            value={user?.email || ""}
             onChange={handleChange}
             required
           />
-        </div>
-        <div className="form-group">
-          <label>Password</label>
-          <input
+        </Form.Group>
+
+        <Row>
+          <Col md={6}>
+            <Form.Group className="mb-3">
+              <Form.Label>First Name</Form.Label>
+              <Form.Control
+                type="text"
+                name="firstName"
+                value={user?.firstName || ""}
+                onChange={handleChange}
+              />
+            </Form.Group>
+          </Col>
+          <Col md={6}>
+            <Form.Group className="mb-3">
+              <Form.Label>Last Name</Form.Label>
+              <Form.Control
+                type="text"
+                name="lastName"
+                value={user?.lastName || ""}
+                onChange={handleChange}
+              />
+            </Form.Group>
+          </Col>
+        </Row>
+
+        <Form.Group className="mb-3">
+          <Form.Label>Password</Form.Label>
+          <Form.Control
             type="password"
             name="password"
-            className="form-control"
-            value={user.password}
+            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}
+          <Form.Text className="text-muted">
+            Leave blank if you do not want to change the password.
+          </Form.Text>
+        </Form.Group>
+
+        <Form.Group className="mb-3">
+          <Form.Label>Address</Form.Label>
+          <Form.Control
+            type="text"
+            name="address"
+            value={user?.address || ""}
             onChange={handleChange}
-            rows={3}
+            placeholder="1234 Main St"
           />
+        </Form.Group>
+
+        <Row>
+          <Col md={4}>
+            <Form.Group className="mb-3">
+              <Form.Label>City</Form.Label>
+              <Form.Control
+                type="text"
+                name="city"
+                value={user?.city || ""}
+                onChange={handleChange}
+              />
+            </Form.Group>
+          </Col>
+          <Col md={4}>
+            <Form.Group className="mb-3">
+              <Form.Label>State</Form.Label>
+              <Form.Control
+                type="text"
+                name="state"
+                value={user?.state || ""}
+                onChange={handleChange}
+              />
+            </Form.Group>
+          </Col>
+          <Col md={4}>
+            <Form.Group className="mb-3">
+              <Form.Label>Zip</Form.Label>
+              <Form.Control
+                type="text"
+                name="zip"
+                value={user?.zip || ""}
+                onChange={handleChange}
+              />
+            </Form.Group>
+          </Col>
+        </Row>
+
+        <div className="d-flex justify-content-between">
+          <Button variant="primary" type="submit" disabled={saving}>
+            {saving ? "Saving..." : "Update User"}
+          </Button>
+          <Link to="/Admin" className="btn btn-secondary">
+            Back to Admin
+          </Link>
         </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>
-      </form>
-
-      <Link to="/AllUsers" style={{ display: "block", marginTop: 20 }}>
-        Back to All Users
-      </Link>
+      </Form>
     </div>
   );
 };