Added Dashboard Page ✔️
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
52
frontend/src/components/PollTableRow/PollTableRow.jsx
Normal file
52
frontend/src/components/PollTableRow/PollTableRow.jsx
Normal file
@@ -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;
|
||||
76
frontend/src/pages/Dashboard.jsx
Normal file
76
frontend/src/pages/Dashboard.jsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user