1 files changed, 51 insertions, 0 deletions
diff --git a/panel/src/pages/Roles.jsx b/panel/src/pages/Roles.jsx
new file mode 100644
index 0000000..05f73b6
--- /dev/null
+++ b/panel/src/pages/Roles.jsx
@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import { db, auth } from '../firebase';
+import { collection, getDocs } from 'firebase/firestore';
+import { httpsCallable } from 'firebase/functions';
+
+const Roles = () => {
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchUsers = async () => {
+    const querySnapshot = await getDocs(collection(db, 'users'));
+    const usersData = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+    setUsers(usersData);
+    setLoading(false);
+  };
+
+  const handleRoleChange = async (email, newRole) => {
+    const addUserRole = httpsCallable(auth, 'addUserRole');
+    try {
+      await addUserRole({ email: email, role: newRole });
+      fetchUsers();
+    } catch (error) {
+      console.error('Error updating role:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  if (loading) {
+    return <p>Loading...</p>;
+  }
+
+  return (
+    <div className="container">
+      <h4>Manage Roles</h4>
+      <div>
+        {users.map((user, index) => (
+          <div key={index} className="mb-3">
+            <p>{user.email}</p>
+            <button onClick={() => handleRoleChange(user.email, 'admin')} className="btn btn-primary mr-2">Make Admin</button>
+            <button onClick={() => handleRoleChange(user.email, 'user')} className="btn btn-secondary">Make User</button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Roles;