From aeb98553d5481b2174040b5b122f68df196cc703 Mon Sep 17 00:00:00 2001
From: Manik Maity <manikmaity156@gmail.com>
Date: Tue, 5 Nov 2024 23:42:59 +0530
Subject: [PATCH] =?UTF-8?q?Added=20Dashboard=20Page=20=E2=9C=94=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json                    | 10 +++
 frontend/package.json                         |  1 +
 frontend/src/App.jsx                          |  2 +
 .../components/PollTableRow/PollTableRow.jsx  | 52 +++++++++++++
 frontend/src/pages/Dashboard.jsx              | 76 +++++++++++++++++++
 5 files changed, 141 insertions(+)
 create mode 100644 frontend/src/components/PollTableRow/PollTableRow.jsx
 create mode 100644 frontend/src/pages/Dashboard.jsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index abc5a97..b65a66d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
         "react-router-dom": "^6.27.0"
       },
       "devDependencies": {
@@ -4425,6 +4426,15 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 25bcfb2..540326a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index b7c6556..68dc02b 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -5,6 +5,7 @@ import Home from "./pages/Home";
 import Header from "./components/Header/Header";
 import LoginPage from "./pages/LoginPage";
 import Register from "./pages/Register";
+import Dashboard from "./pages/Dashboard";
 
 function App() {
   return (
@@ -14,6 +15,7 @@ function App() {
         <Route path="/" element={<Home />} />
         <Route path="/login" element={<LoginPage/>} />
         <Route path="/register" element={<Register/>} />
+        <Route path="dashboard" element={<Dashboard/>} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/frontend/src/components/PollTableRow/PollTableRow.jsx b/frontend/src/components/PollTableRow/PollTableRow.jsx
new file mode 100644
index 0000000..560c2b6
--- /dev/null
+++ b/frontend/src/components/PollTableRow/PollTableRow.jsx
@@ -0,0 +1,52 @@
+// PollTableRow.js
+import React, { useState } from "react";
+import { FaTrashAlt, FaUserEdit } from "react-icons/fa";
+
+function PollTableRow({ poll, index }) {
+  const [showEditForm, setShowEditForm] = useState(false);
+
+  const handleDelete = () => {
+    const sure = window.confirm("Are you sure you want to delete this poll?");
+    if (sure) {
+      // Call the delete poll function here
+      console.log(`Poll with ID: ${poll._id} has been deleted.`);
+    }
+  };
+
+  return (
+    <>
+      {showEditForm && (
+        <div className="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
+          {/* Poll Edit Form Component would go here */}
+        </div>
+      )}
+      <tr>
+        <th>{index + 1}</th>
+        <td className="text-white">{poll.title}</td>
+        <td className="text-gray-400 whitespace-normal break-words max-w-xs">
+          {poll.description}
+        </td>
+        <td className="text-white">{poll.totalVotes}</td>
+        <td>
+          {poll.published ? (
+            <span className="badge badge-success text-white">Published</span>
+          ) : (
+            <span className="badge badge-warning text-white">Unpublished</span>
+          )}
+        </td>
+        <td>
+          <div className="flex gap-2">
+            <button onClick={() => setShowEditForm(true)} className="btn btn-sm btn-info flex items-center">
+              <FaUserEdit className="mr-1" /> Edit
+            </button>
+            <button onClick={handleDelete} className="btn btn-sm btn-error flex items-center">
+              <FaTrashAlt className="mr-1" /> Delete
+            </button>
+          </div>
+        </td>
+      </tr>
+    </>
+  );
+}
+
+export default PollTableRow;
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
new file mode 100644
index 0000000..5799924
--- /dev/null
+++ b/frontend/src/pages/Dashboard.jsx
@@ -0,0 +1,76 @@
+// Dashboard.js
+import React, { useState } from "react";
+import { FaPlus } from "react-icons/fa";
+import PollTableRow from "../components/PollTableRow/PollTableRow";
+
+function Dashboard() {
+  const [showPollAddForm, setShowPollAddForm] = useState(false);
+  
+  const pollData = [
+    { _id: "1", title: "Poll 1", description: "Description of Poll 1", totalVotes: 120, published: true },
+    { _id: "2", title: "Poll 2", description: "Description of Poll 2", totalVotes: 45, published: false },
+    // Add more poll data as needed
+  ];
+
+  return (
+    <div className="flex flex-col lg:flex-row min-h-screen">
+      {showPollAddForm && (
+        <div className="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
+          {/* Poll Add Form Component would go here */}
+        </div>
+      )}
+
+      {/* User Profile Sidebar */}
+      <aside className="w-full lg:w-1/4 bg-slate-800 rounded-md mx-4 bg-opacity-50 shadow-lg p-4 flex flex-col items-center">
+        <img
+          src="https://via.placeholder.com/150" // Replace with actual path
+          alt="User Profile"
+          className="rounded-full h-24 w-24 object-cover mb-4"
+        />
+        <h2 className="text-2xl font-bold text-center text-white">@manikmaity</h2>
+        <p className="mt-2 text-center text-gray-400">manikmaity156@gmail.com</p>
+        <button className="btn btn-primary mt-4 w-full">Edit Profile</button>
+        <button className="btn btn-error btn-outline mt-4 w-full">Logout</button>
+      </aside>
+
+      {/* Dashboard Main Content */}
+      <main className="w-full lg:w-3/4 p-6">
+        {/* Dashboard Header */}
+        <div className="mb-6">
+          <h1 className="text-4xl font-bold text-white">Poll Dashboard</h1>
+          <p className="text-lg text-gray-300">Manage your polls, view results, and edit as needed.</p>
+        </div>
+
+        {/* Add New Poll Button */}
+        <div className="flex justify-end mb-4">
+          <button className="btn btn-primary" onClick={() => setShowPollAddForm(!showPollAddForm)}>
+            Add New Poll <FaPlus />
+          </button>
+        </div>
+
+        {/* Polls Table */}
+        <div className="overflow-x-auto">
+          <table className="table w-full bg-gray-800 text-white">
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>Title</th>
+                <th>Description</th>
+                <th>Total Votes</th>
+                <th>Published</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {pollData.map((poll, index) => (
+                <PollTableRow key={poll._id} poll={poll} index={index} /> // Replace with actual path
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default Dashboard;