diff --git a/README.md b/README.md index a39d3836..6de565b2 100644 --- a/README.md +++ b/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) |

diff --git a/amp-client/src/Components/AdminComponents/AdminSidebar/styles.css b/amp-client/src/Components/AdminComponents/AdminSidebar/styles.css index 1ed156fe..7bcee395 100644 --- a/amp-client/src/Components/AdminComponents/AdminSidebar/styles.css +++ b/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 { diff --git a/amp-client/src/Components/AdminComponents/Table/Table.jsx b/amp-client/src/Components/AdminComponents/Table/Table.jsx new file mode 100644 index 00000000..91839b4a --- /dev/null +++ b/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 ( + + + + {headers.map((header, idx) => ( + + ))} + + + + {data.map((item, idx) => ( + + + + + + + + ))} + +
{header}
{item.name}{item.email}{item.phone_number}{item.message} + +
+ ); +}; + +export default Table; diff --git a/amp-client/src/Components/AdminComponents/Table/styles.css b/amp-client/src/Components/AdminComponents/Table/styles.css new file mode 100644 index 00000000..3400ed95 --- /dev/null +++ b/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; +} diff --git a/amp-client/src/Components/CommonComponents/CustomTable/CustomTable.jsx b/amp-client/src/Components/CommonComponents/CustomTable/CustomTable.jsx index d6bd95a1..3466c986 100644 --- a/amp-client/src/Components/CommonComponents/CustomTable/CustomTable.jsx +++ b/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"; diff --git a/amp-client/src/Pages/AdminPages/AdminContactMessages/AdminContactMessages.jsx b/amp-client/src/Pages/AdminPages/AdminContactMessages/AdminContactMessages.jsx index 03f508b4..961b52fd 100644 --- a/amp-client/src/Pages/AdminPages/AdminContactMessages/AdminContactMessages.jsx +++ b/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 ( - <> -
-
-

Contact Messages

-
+
+
+

+ Contact Messages +

+ - + ); }; diff --git a/amp-client/src/Pages/AdminPages/AdminViewProviders/AdminViewProviders.jsx b/amp-client/src/Pages/AdminPages/AdminViewProviders/AdminViewProviders.jsx index 9e08bc4f..30f3ca39 100644 --- a/amp-client/src/Pages/AdminPages/AdminViewProviders/AdminViewProviders.jsx +++ b/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 ( - <> -
-
-

View Providers

-
+
+
+

+ View Providers +

+
- + ); }; diff --git a/amp-client/src/Pages/AdminPages/Services/AdminContactMessagesService/AdminContactMessagesService.js b/amp-client/src/Pages/AdminPages/Services/AdminContactMessagesService/AdminContactMessagesService.js new file mode 100644 index 00000000..2fc7cac8 --- /dev/null +++ b/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 []; + } +}; \ No newline at end of file diff --git a/amp-client/src/Pages/AdminPages/Services/AdminViewProvidersService/AdminViewProvidersService.js b/amp-client/src/Pages/AdminPages/Services/AdminViewProvidersService/AdminViewProvidersService.js new file mode 100644 index 00000000..ddb37b96 --- /dev/null +++ b/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 []; + } +}; diff --git a/readme/demo/Admin/Admin_View_Contact_Messages.png b/readme/demo/Admin/Admin_View_Contact_Messages.png new file mode 100644 index 00000000..0087702e Binary files /dev/null and b/readme/demo/Admin/Admin_View_Contact_Messages.png differ diff --git a/readme/demo/Admin/Admin_View_Providers.png b/readme/demo/Admin/Admin_View_Providers.png new file mode 100644 index 00000000..0173a8bf Binary files /dev/null and b/readme/demo/Admin/Admin_View_Providers.png differ diff --git a/readme/demo/Client/Contact Us.png b/readme/demo/Client/Contact Us.png new file mode 100644 index 00000000..ae2341e7 Binary files /dev/null and b/readme/demo/Client/Contact Us.png differ