Staging

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 (
+    <table className="custom-table">
+      <thead>
+        <tr>
+          {headers.map((header, idx) => (
+            <th key={idx}>{header}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((user, idx) => (
+          <tr key={idx}>
+            <td>{user.name}</td>
+            <td>{user.email}</td>
+            <td>{user.phone_number}</td>
+            <td>
+              <FontAwesomeIcon icon={faPenToSquare} className="edit-icon" />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default CustomTable;

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;
+}

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 (
-    <>
-      <div className="provider-users-container">
-        <div className="main-content">
-          <h1 className="main-content-title section-titles">Users</h1>
-        </div>
+    <div className="provider-users-container">
+      <div className="main-content">
+        <h1 className="main-content-title section-titles">Users</h1>
+        <CustomTable headers={tableHeaders} data={users} />
       </div>
-    </>
+    </div>
   );
 };
 

amp-client/src/Pages/ProviderPages/ProviderUsers/styles.css

@@ -2,4 +2,5 @@
 .provider-users-container {
   display: flex;
   flex-direction: row;
+  margin-right: 15px;
 }

amp-client/src/Pages/ProviderPages/Services/ProviderUsersService/ProviderUsersService.js

@@ -1 +1,21 @@
-import axiosInstance from "../../../../Axios/axios";
+// 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;