Merge pull request #174 from Riyad-Murad/admin_pages_dev

admin_pages_dev: Added Admin Screens for ReadMe file

Author: Riyad-Murad

README.md

@@ -62,10 +62,9 @@
 | --------------------------------------- | ------------------------------------- |
 | ![ClientDashboard](./readme/demo/Client/Client%20Dashboard.gif) | ![ClientReport](./readme/demo/Client/Client%20Report.gif) |
 
-| Client Profile screen                            |
-| --------------------------------------- |
-| ![ClientProfile](./readme/demo/Client/Client_Profile.png) |
-
+| Client Profile screen                            | Contact Us screen                       |
+| --------------------------------------- | ------------------------------------- |
+| ![ClientProfile](./readme/demo/Client/Client_Profile.png) | ![ContactUs](./readme/demo/Client/Contact%20Us.png) |
 
 ### Provider Screens
 
@@ -77,6 +76,11 @@
 | --------------------------------------- | ------------------------------------- |
 | ![ProviderUsers](./readme/demo/Provider/Provider_Users.png) | ![ProviderProfile](./readme/demo/Provider/Provider_Profile.png) |
 
+### Admin Screens
+
+| Admin View All Providers screen                            | Admin View All Contact Messages screen                       |
+| --------------------------------------- | ------------------------------------- |
+| ![AdminViewProviders](./readme/demo/Admin/Admin_View_Providers.png) | ![AdminViewContactMessages](./readme/demo/Admin/Admin_View_Contact_Messages.png) |
 
 <br><br>
 

amp-client/src/Components/AdminComponents/AdminSidebar/styles.css

@@ -8,6 +8,9 @@
   color: #fff;
   padding: 20px;
   box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  left: 0;
 }
 
 .sidebar-header {
@@ -54,10 +57,11 @@
   border-top: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.main-content {
+.admin-main-content {
   flex: 1;
-  margin-left: 300px;
+  margin-left: 330px;
   margin-top: 20px;
+  margin-right: 30px;
 }
 
 .admin-main-content-title {

amp-client/src/Components/AdminComponents/Table/Table.jsx

@@ -0,0 +1,32 @@
+import "./styles.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPenToSquare } from "@fortawesome/free-solid-svg-icons";
+
+const Table = ({ headers, data }) => {
+  return (
+    <table className="admin-table">
+      <thead>
+        <tr>
+          {headers.map((header, idx) => (
+            <th key={idx}>{header}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((item, idx) => (
+          <tr key={idx}>
+            <td>{item.name}</td>
+            <td>{item.email}</td>
+            <td>{item.phone_number}</td>
+            <td>{item.message}</td>
+            <td>
+              <FontAwesomeIcon icon={faPenToSquare} className="admin-edit-icon" />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default Table;

amp-client/src/Components/AdminComponents/Table/styles.css

@@ -0,0 +1,30 @@
+/* Table.css */
+.admin-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+  margin-bottom: 50px;
+}
+
+.admin-table thead tr {
+  background-color: #f9a43a;
+  color: #000000;
+  text-align: left;
+}
+
+.admin-table th,
+.admin-table td {
+  padding: 12px 15px;
+}
+
+.admin-table tbody tr {
+  background-color: #fff9f3;
+  color: #000000;
+  border-bottom: 1px solid #ddd;
+}
+
+.admin-edit-icon {
+  cursor: pointer;
+  color: #000000;
+  font-size: 18px;
+}

amp-client/src/Components/CommonComponents/CustomTable/CustomTable.jsx

@@ -1,4 +1,3 @@
-// src/Components/CommonComponents/CustomTable/CustomTable.jsx
 import "./styles.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPenToSquare } from "@fortawesome/free-solid-svg-icons";

amp-client/src/Pages/AdminPages/AdminContactMessages/AdminContactMessages.jsx

@@ -1,14 +1,31 @@
 import "./styles.css";
+import { useEffect, useState } from "react";
+import Table from "../../../Components/AdminComponents/Table/Table";
+import { fetchContactMessages } from "../Services/AdminContactMessagesService/AdminContactMessagesService";
 
 const AdminContactMessages = () => {
+  const [messages, setMessages] = useState([]);
+
+  useEffect(() => {
+    const loadMessages = async () => {
+      const data = await fetchContactMessages();
+      setMessages(data);
+    };
+
+    loadMessages();
+  }, []);
+
+  const headers = ["Full Name", "Email", "Phone Number", "Message", "Actions"];
+
   return (
-    <>
-      <div className="admin-contact-messages-container">
-        <div className="main-content">
-          <h1 className="admin-main-content-title section-titles">Contact Messages</h1>
-        </div>
+    <div className="admin-contact-messages-container">
+      <div className="admin-main-content">
+        <h1 className="admin-main-content-title section-titles">
+          Contact Messages
+        </h1>
+        <Table headers={headers} data={messages} />
       </div>
-    </>
+    </div>
   );
 };
 

amp-client/src/Pages/AdminPages/AdminViewProviders/AdminViewProviders.jsx

@@ -1,14 +1,37 @@
 import "./styles.css";
+import { useEffect, useState } from "react";
+import Table from "../../../Components/AdminComponents/Table/Table";
+import { fetchAllProviders } from "../Services/AdminViewProvidersService/AdminViewProvidersService";
 
 const AdminViewProviders = () => {
+  const [providers, setProviders] = useState([]);
+
+  useEffect(() => {
+    const loadProviders = async () => {
+      const data = await fetchAllProviders();
+      setProviders(data);
+    };
+
+    loadProviders();
+  }, []);
+
+  const headers = [
+    "Provider ID",
+    "Full Name",
+    "Email",
+    "Phone Number",
+    "Actions",
+  ];
+
   return (
-    <>
-      <div className="admin-view-providers-container">
-        <div className="main-content">
-          <h1 className="admin-main-content-title section-titles">View Providers</h1>
-        </div>
+    <div className="admin-view-providers-container">
+      <div className="admin-main-content">
+        <h1 className="admin-main-content-title section-titles">
+          View Providers
+        </h1>
+        <Table headers={headers} data={providers} />
       </div>
-    </>
+    </div>
   );
 };
 

amp-client/src/Pages/AdminPages/Services/AdminContactMessagesService/AdminContactMessagesService.js

@@ -0,0 +1,11 @@
+import axiosInstance from "../../../../Axios/axios";
+
+export const fetchContactMessages = async () => {
+  try {
+    const response = await axiosInstance.get("admins/getAllContactMessages");
+    return response.data.data;
+  } catch (error) {
+    console.error("Failed to fetch contact messages:", error);
+    return [];
+  }
+};

amp-client/src/Pages/AdminPages/Services/AdminViewProvidersService/AdminViewProvidersService.js

@@ -0,0 +1,11 @@
+import axiosInstance from "../../../../Axios/axios";
+
+export const fetchAllProviders = async () => {
+  try {
+    const response = await axiosInstance.get("/admins/getAllProviders");
+    return response.data.data;
+  } catch (error) {
+    console.error("Error fetching providers:", error);
+    return [];
+  }
+};