Merge branch 'main' into 49-visualizations-sankey

my-app/src/components/manage-org/table/UsersTableRow.jsx

@@ -0,0 +1,84 @@
+import DeleteMembersModal from "@/components/organization/DeleteMembersModal";
+import { ROLES } from "@/roles/roles";
+import { PencilSquareIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { useState } from "react";
+import { toast } from "react-toastify";
+
+const UsersTableRow = ({ user, index }) => {
+  const [editRole, setEditRole] = useState(false);
+  const [role, setRole] = useState(user.role);
+
+  const onSave = async () => {
+    try {
+      const response = await fetch(`/api/mongo/user/id/${user._id}`, {
+        method: "PUT",
+        body: JSON.stringify({
+          role: role,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (response.ok) {
+        setEditRole(false);
+        toast.success("Successfully updated member.");
+        console.log("Successfully updated member.");
+      } else {
+        throw new Error("Failed to update member.");
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  return (
+    <tr>
+      <th>{index + 1}</th>
+      <td>
+        {user.lastName}, {user.firstName}
+      </td>
+      <td>{user.email}</td>
+      <td>
+        {editRole ? (
+          <select className="select select-sm select-bordered" onChange={(e) => setRole(e.target.value)} defaultValue={user.role}>
+            {Object.values(ROLES).map((role, index) => (
+              <option value={role} key={index}>{role}</option>
+            ))}
+          </select>
+        ) : (
+          `${user.role}`
+        )}
+      </td>
+      <td className="flex gap-5">
+        {editRole ? (
+          <>
+            <button className="btn btn-sm btn-primary text-xs"onClick={onSave}>Save</button>
+            <button className="btn btn-sm btn-outline text-xs" onClick={() => setEditRole(false)}>Cancel</button>
+          </>
+        ) : (
+          <>
+            <button onClick={() => setEditRole(true)}>
+              <PencilSquareIcon className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() =>
+                document
+                  .getElementById(`delete_member_modal_${index}`)
+                  .showModal()
+              }
+            >
+              <TrashIcon className="w-4 h-4" />
+            </button>
+            <DeleteMembersModal
+              id={`delete_member_modal_${index}`}
+              member={user}
+            />
+          </>
+        )}
+      </td>
+    </tr>
+  );
+};
+
+export default UsersTableRow;

my-app/src/components/organization/DeleteMembersModal.jsx

@@ -29,7 +29,7 @@ const DeleteMembersModal = ({ id, member }) => {
         <h3 className="pb-5 font-bold">DELETE MEMBER</h3>
         <form onSubmit={onSubmit}>
           <div className="w-full">
-            Are you sure you want to delete &quot;{member.firstName}&quot;?
+            Are you sure you want to delete &quot;{member?.firstName}&quot;?
           </div>
           <div className="modal-action">
             <button

my-app/src/pages/admin/manage-organizations.jsx

@@ -3,14 +3,21 @@ import AddOrgModal from "@/components/manage-org/modals/AddOrgModal";
 import TableRow from "@/components/manage-org/table/TableRow";
 import { fetcher } from "@/utils/fetcher";
 import useSWR from "swr";
+import Loading from "@/components/Loading";
+import UsersTableRow from "@/components/manage-org/table/UsersTableRow";
 
 const ManageOrganizations = () => {
   const { data, error, isLoading } = useSWR(
     "/api/mongo/organization/get-organizations",
     fetcher,
     { refreshInterval: 1000 }
   );
-
+  const { data: users } = useSWR("/api/mongo/user/get-users", fetcher, {
+    refreshInterval: 1000,
+  });
+
+  console.log("users", users);
+
   console.log(data, error, isLoading);
   return (
     <div className="min-h-screen p-3">
@@ -36,22 +43,55 @@ const ManageOrganizations = () => {
           >
             Add Member
           </button>
-          <AddMemberModal id="add_member_modal_1" orgs={data}/>
+          <AddMemberModal id="add_member_modal_1" orgs={data} />
         </div>
+        {users ? (
+          <div className="w-full md:w-3/4 mb-12">
+            <h1 className="font-bold px-2 py-3">Members</h1>
+            <div className="h-96 overflow-auto border">
+              <div className="overflow-x-auto w-full flex items-center py-3">
+                <table className="table table-zebra">
+                  <thead>
+                    <tr>
+                      <th />
+                      <th>Name</th>
+                      <th>Email</th>
+                      <th>Role</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {users.map((user, index) => (
+                      <UsersTableRow user={user} index={index} key={index}/>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <Loading />
+        )}
         {data ? (
-          <div className="overflow-x-auto w-full md:w-3/4 flex items-center rounded-xl py-3">
-            <table className="table table-zebra">
-              <thead>
-                <tr>
-                  <th />
-                  <th>Organization Name</th>
-                  <th />
-                </tr>
-              </thead>
-              <tbody>
-                {data.map((org, index) => (<TableRow org={org} index={index} key={index} />))}
-              </tbody>
-            </table>
+          <div className="w-full md:w-3/4">
+            <h1 className="font-bold px-2 py-3">Organizations</h1>
+            <div className="h-96 overflow-auto border">
+              <div className="overflow-x-auto w-full flex items-center py-3">
+                <table className="table table-zebra">
+                  <thead>
+                    <tr>
+                      <th />
+                      <th>Organization Name</th>
+                      <th />
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {data.map((org, index) => (
+                      <TableRow org={org} index={index} key={index} />
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
           </div>
         ) : (
           <div className="overflow-x-auto w-full md:w-3/4 flex items-center rounded-xl py-3">