From 7dfbe0f363a434cfda5f9be996d194f03c36879c Mon Sep 17 00:00:00 2001
From: Biswakalyan Bhuyan <biswa@surgot.in>
Date: Wed, 31 Jul 2024 12:16:49 +0530
Subject: new project

---
 panel/src/pages/Dashboard.jsx    | 33 +++++++++++++++++++
 panel/src/pages/LoginPage.jsx    | 52 +++++++++++++++++++++++++++++
 panel/src/pages/ManageAds.jsx    | 70 ++++++++++++++++++++++++++++++++++++++++
 panel/src/pages/RegisterPage.jsx | 47 +++++++++++++++++++++++++++
 panel/src/pages/ResetPage.jsx    | 41 +++++++++++++++++++++++
 panel/src/pages/Roles.jsx        | 51 +++++++++++++++++++++++++++++
 6 files changed, 294 insertions(+)
 create mode 100644 panel/src/pages/Dashboard.jsx
 create mode 100644 panel/src/pages/LoginPage.jsx
 create mode 100644 panel/src/pages/ManageAds.jsx
 create mode 100644 panel/src/pages/RegisterPage.jsx
 create mode 100644 panel/src/pages/ResetPage.jsx
 create mode 100644 panel/src/pages/Roles.jsx

(limited to 'panel/src/pages')

diff --git a/panel/src/pages/Dashboard.jsx b/panel/src/pages/Dashboard.jsx
new file mode 100644
index 0000000..5aa2b0c
--- /dev/null
+++ b/panel/src/pages/Dashboard.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+
+const Dashboard = () => {
+  const userStats = { totalUsers: 100, totalAds: 50, totalRevenue: 5000 };
+
+  const chartData = {
+    labels: ['Users', 'Revenue'],
+    datasets: [
+      {
+        label: 'Statistics',
+        data: [userStats.totalUsers, userStats.totalRevenue],
+        backgroundColor: ['rgba(75,192,192,0.6)', 'rgba(153,102,255,0.6)'],
+      },
+    ],
+  };
+
+  return (
+    <div className="container mt-5">
+      <h4 className="mb-4">Dashboard</h4>
+      <div className="mb-4">
+        <h6>Total Users: {userStats.totalUsers}</h6>
+        <h6>Total Ads: {userStats.totalAds}</h6>
+        <h6>Total Revenue: {userStats.totalRevenue}</h6>
+      </div>
+      <div>
+        <Bar data={chartData} />
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;
diff --git a/panel/src/pages/LoginPage.jsx b/panel/src/pages/LoginPage.jsx
new file mode 100644
index 0000000..37ce32f
--- /dev/null
+++ b/panel/src/pages/LoginPage.jsx
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { signInWithEmailAndPassword } from 'firebase/auth';
+import { auth } from '../firebase';
+
+const LoginPage = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const handleLogin = async () => {
+    if (password.length < 8) {
+      setError('The password should be minimum 8 digits');
+      return;
+    }
+
+    try {
+      await signInWithEmailAndPassword(auth, email, password);
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <div className="container mx-auto flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="bg-white p-6 rounded shadow-md w-full max-w-sm">
+        <h4 className="mb-4 text-center">Login</h4>
+        <div className="mb-4">
+          <label>Email</label>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="form-control"
+          />
+        </div>
+        <div className="mb-4">
+          <label>Password</label>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="form-control"
+          />
+        </div>
+        {error && <p className="text-danger">{error}</p>}
+        <button onClick={handleLogin} className="btn btn-primary w-full">Login</button>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;
diff --git a/panel/src/pages/ManageAds.jsx b/panel/src/pages/ManageAds.jsx
new file mode 100644
index 0000000..4ec0b36
--- /dev/null
+++ b/panel/src/pages/ManageAds.jsx
@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import { db } from '../firebase';
+import { collection, addDoc, getDocs } from 'firebase/firestore';
+
+const ManageAds = () => {
+  const [ads, setAds] = useState([]);
+  const [newAd, setNewAd] = useState({ title: '', description: '', imageUrl: '' });
+
+  useEffect(() => {
+    fetchAds();
+  }, []);
+
+  const fetchAds = async () => {
+    const querySnapshot = await getDocs(collection(db, 'ads'));
+    const adsData = querySnapshot.docs.map(doc => doc.data());
+    setAds(adsData);
+  };
+
+  const handleAddAd = async () => {
+    await addDoc(collection(db, 'ads'), newAd);
+    fetchAds();
+  };
+
+  return (
+    <div className="container">
+      <h4>Manage Ads</h4>
+      <div className="mb-4">
+        <div className="mb-3">
+          <label>Title</label>
+          <input
+            type="text"
+            value={newAd.title}
+            onChange={(e) => setNewAd({ ...newAd, title: e.target.value })}
+            className="form-control"
+          />
+        </div>
+        <div className="mb-3">
+          <label>Description</label>
+          <input
+            type="text"
+            value={newAd.description}
+            onChange={(e) => setNewAd({ ...newAd, description: e.target.value })}
+            className="form-control"
+          />
+        </div>
+        <div className="mb-3">
+          <label>Image URL</label>
+          <input
+            type="text"
+            value={newAd.imageUrl}
+            onChange={(e) => setNewAd({ ...newAd, imageUrl: e.target.value })}
+            className="form-control"
+          />
+        </div>
+        <button onClick={handleAddAd} className="btn btn-primary">Add Ad</button>
+      </div>
+      <div>
+        {ads.map((ad, index) => (
+          <div key={index} className="mb-3">
+            <h5>{ad.title}</h5>
+            <p>{ad.description}</p>
+            <img src={ad.imageUrl} alt={ad.title} className="img-fluid" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ManageAds;
diff --git a/panel/src/pages/RegisterPage.jsx b/panel/src/pages/RegisterPage.jsx
new file mode 100644
index 0000000..f0b2bba
--- /dev/null
+++ b/panel/src/pages/RegisterPage.jsx
@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { TextField, Button, Container, Typography } from '@mui/material';
+import { createUserWithEmailAndPassword } from 'firebase/auth';
+import { auth } from '../firebase';
+
+const RegisterPage = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const handleRegister = async () => {
+    if (password.length < 8) {
+      setError('The password should be minimum 8 digits');
+      return;
+    }
+
+    try {
+      await createUserWithEmailAndPassword(auth, email, password);
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <Container>
+      <Typography variant="h4">Register</Typography>
+      <TextField
+        label="Email"
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        fullWidth
+      />
+      <TextField
+        label="Password"
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        fullWidth
+      />
+      {error && <Typography color="error">{error}</Typography>}
+      <Button onClick={handleRegister} variant="contained">Register</Button>
+    </Container>
+  );
+};
+
+export default RegisterPage;
diff --git a/panel/src/pages/ResetPage.jsx b/panel/src/pages/ResetPage.jsx
new file mode 100644
index 0000000..c1750dc
--- /dev/null
+++ b/panel/src/pages/ResetPage.jsx
@@ -0,0 +1,41 @@
+
+import React, { useState } from 'react';
+import { sendPasswordResetEmail } from 'firebase/auth';
+import { auth } from '../firebase';
+
+const ResetPage = () => {
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+  const [error, setError] = useState('');
+
+  const handleReset = async () => {
+    try {
+      await sendPasswordResetEmail(auth, email);
+      setMessage('Reset link sent to your email');
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <div className="container mx-auto flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="bg-white p-6 rounded shadow-md w-full max-w-sm">
+        <h4 className="mb-4 text-center">Reset Password</h4>
+        <div className="mb-4">
+          <label>Email</label>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="form-control"
+          />
+        </div>
+        {error && <p className="text-danger">{error}</p>}
+        {message && <p className="text-success">{message}</p>}
+        <button onClick={handleReset} className="btn btn-primary w-full">Send Reset Link</button>
+      </div>
+    </div>
+  );
+};
+
+export default ResetPage;
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;
-- 
cgit v1.2.3-59-g8ed1b