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) => ( + + ))} + + + + {data.map((user, idx) => ( + + + + + + + ))} + +
{header}
{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

-
+
+
+

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;