diff --git a/amp-client/src/Components/CommonComponents/CustomTable/CustomTable.jsx b/amp-client/src/Components/CommonComponents/CustomTable/CustomTable.jsx
new file mode 100644
index 00000000..d6bd95a1
--- /dev/null
+++ b/amp-client/src/Components/CommonComponents/CustomTable/CustomTable.jsx
@@ -0,0 +1,32 @@
+// src/Components/CommonComponents/CustomTable/CustomTable.jsx
+import "./styles.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPenToSquare } from "@fortawesome/free-solid-svg-icons";
+
+const CustomTable = ({ headers, data }) => {
+ return (
+
+
+
+ {headers.map((header, idx) => (
+ | {header} |
+ ))}
+
+
+
+ {data.map((user, idx) => (
+
+ | {user.name} |
+ {user.email} |
+ {user.phone_number} |
+
+
+ |
+
+ ))}
+
+
+ );
+};
+
+export default CustomTable;
diff --git a/amp-client/src/Components/CommonComponents/CustomTable/styles.css b/amp-client/src/Components/CommonComponents/CustomTable/styles.css
new file mode 100644
index 00000000..e462ca2e
--- /dev/null
+++ b/amp-client/src/Components/CommonComponents/CustomTable/styles.css
@@ -0,0 +1,29 @@
+/* CustomTable.css */
+.custom-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 20px;
+}
+
+.custom-table thead tr {
+ background-color: #f9a43a;
+ color: #000000;
+ text-align: left;
+}
+
+.custom-table th,
+.custom-table td {
+ padding: 12px 15px;
+}
+
+.custom-table tbody tr {
+ background-color: #fff9f3;
+ color: #000000;
+ border-bottom: 1px solid #ddd;
+}
+
+.edit-icon {
+ cursor: pointer;
+ color: #000000;
+ font-size: 18px;
+}
diff --git a/amp-client/src/Pages/ProviderPages/ProviderUsers/ProviderUsers.jsx b/amp-client/src/Pages/ProviderPages/ProviderUsers/ProviderUsers.jsx
index 099cd99e..b95db4dd 100644
--- a/amp-client/src/Pages/ProviderPages/ProviderUsers/ProviderUsers.jsx
+++ b/amp-client/src/Pages/ProviderPages/ProviderUsers/ProviderUsers.jsx
@@ -1,14 +1,31 @@
import "./styles.css";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import CustomTable from "../../../Components/CommonComponents/CustomTable/CustomTable";
+import ProviderUsersService from "../Services/ProviderUsersService/ProviderUsersService";
const ProviderUsers = () => {
+ const [users, setUsers] = useState([]);
+ const userId = useSelector((state) => state.user.id);
+ const { getAllUsers } = ProviderUsersService();
+
+ useEffect(() => {
+ const fetchUsers = async () => {
+ const fetched = await getAllUsers(userId);
+ setUsers(Array.isArray(fetched) ? fetched : []);
+ };
+ fetchUsers();
+ }, [userId]);
+
+ const tableHeaders = ["Full Name", "Email", "Phone Number", "Actions"];
+
return (
- <>
-
-
-
Users
-
+
);
};
diff --git a/amp-client/src/Pages/ProviderPages/ProviderUsers/styles.css b/amp-client/src/Pages/ProviderPages/ProviderUsers/styles.css
index 88ef22a8..1b28ecd3 100644
--- a/amp-client/src/Pages/ProviderPages/ProviderUsers/styles.css
+++ b/amp-client/src/Pages/ProviderPages/ProviderUsers/styles.css
@@ -2,4 +2,5 @@
.provider-users-container {
display: flex;
flex-direction: row;
+ margin-right: 15px;
}
diff --git a/amp-client/src/Pages/ProviderPages/Services/ProviderUsersService/ProviderUsersService.js b/amp-client/src/Pages/ProviderPages/Services/ProviderUsersService/ProviderUsersService.js
index a8045130..9e48d289 100644
--- a/amp-client/src/Pages/ProviderPages/Services/ProviderUsersService/ProviderUsersService.js
+++ b/amp-client/src/Pages/ProviderPages/Services/ProviderUsersService/ProviderUsersService.js
@@ -1 +1,21 @@
-import axiosInstance from "../../../../Axios/axios";
\ No newline at end of file
+// src/Pages/Provider/Services/ProviderUsers/ProviderUsersService.js
+import axiosInstance from "../../../../Axios/axios";
+
+const ProviderUsersService = () => {
+ const getAllUsers = async (providerId) => {
+ try {
+ const response = await axiosInstance.get(
+ `providers/getAllUsers/${providerId}`
+ );
+ // Access the correct data field
+ return Array.isArray(response.data.data) ? response.data.data : [];
+ } catch (error) {
+ console.error("Error fetching users:", error);
+ return [];
+ }
+ };
+
+ return { getAllUsers };
+};
+
+export default ProviderUsersService;