suren1125 · Salmapraj · Jan 15, 2025 · Jan 15, 2025 · Jan 15, 2025 · Jan 15, 2025
diff --git a/client/index.html b/client/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Voting System</title>
+    <title>Online Voting System</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/public/vite.svg b/client/public/vite.svg
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -1,22 +1,39 @@
-import { BrowserRouter, Route, Routes } from "react-router";
+import { Route, Routes, useLocation } from "react-router";
 import "./App.css";
 import Login from "./components/Login.jsx";
 import Register from "./components/Register.jsx";
-import NavSideBar from "./components/NavSideBar.jsx";
 import Dashboard from "./components/Dashboard.jsx";
 import CandidateList from "./components/CandidateList.jsx";
+import VoterList from "./components/VoterList.jsx";
+import Position from "./components/Position.jsx";
+import NavSideBar from "./components/NavSideBar.jsx";
+import BallotPosition from "./components/BallotPosition.jsx";
+import Header from "./components/Header.jsx";
 
 function App() {
+  const location = useLocation();
+
+  // Paths where the sidebar should not be shown
+  const noSidebarPaths = ["/", "/login", "/register"];
+  const noHeaderPaths = ["/", "/login", "/register"];
+
   return (
-    <BrowserRouter>
-      <NavSideBar />
-      <Routes>
-        <Route path="/Login" element={<Login />} />
-        <Route path="/Register" element={<Register />} />
-        <Route path="/Dashboard" element={<Dashboard />} />
-        <Route path="/CandidateList" element={<CandidateList />} />
-      </Routes>
-    </BrowserRouter>
+    <>
+      <div>
+        {!noHeaderPaths.includes(location.pathname) && <Header />}
+        {!noSidebarPaths.includes(location.pathname) && <NavSideBar />}
+        <Routes>
+          <Route path="/" element={<Login />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/register" element={<Register />} />
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="/candidateList" element={<CandidateList />} />
+          <Route path="/voterList" element={<VoterList />} />
+          <Route path="/position" element={<Position />} />
+          <Route path="/ballotPosition" element={<BallotPosition />} />
+        </Routes>
+      </div>
+    </>
   );
 }
 

diff --git a/client/src/assets/gov_nepal.png b/client/src/assets/gov_nepal.png
diff --git a/client/src/assets/react.svg b/client/src/assets/react.svg
diff --git a/client/src/assets/voting.png b/client/src/assets/voting.png
diff --git a/client/src/components/BallotPosition.jsx b/client/src/components/BallotPosition.jsx
@@ -0,0 +1,40 @@
+import { CANDIDATE_DATA } from "./Data";
+import { POSITION_DATA } from "./Data";
+
+function BallotPosition() {
+  const candidates = CANDIDATE_DATA;
+  const positions = POSITION_DATA;
+
+  return (
+    <div className="ballot-position">
+      <h1>Ballot Position</h1>
+      <form>
+        {positions.map((position) => (
+          <fieldset key={position.id}>
+            <legend>{position.description}</legend>
+            <div className="candidate-options">
+              {candidates.map((candidate) => {
+                if (candidate.position === position.description)
+                  return (
+                    <label key={candidate.id} className="candidate-option">
+                      <input
+                        type="radio"
+                        name={`position-${position.description}`}
+                        value={candidate.firstName}
+                      />
+                      <div className="candidate-info">
+                        <span>{`${candidate.firstName} ${candidate.lastName}`}</span>
+                      </div>
+                    </label>
+                  );
+              })}
+            </div>
+          </fieldset>
+        ))}
+        <button type="reset">Reset</button>
+      </form>
+    </div>
+  );
+}
+
+export default BallotPosition;
diff --git a/client/src/components/CandidateList.jsx b/client/src/components/CandidateList.jsx
@@ -1,31 +1,107 @@
+import { useState } from "react";
 import { CANDIDATE_DATA } from "./Data";
+import ModalForm from "./ModalForm";
 
 function CandidateList() {
-  const candidates = CANDIDATE_DATA;
-  const candidateList = candidates.map((candidate) => (
-    <tr key={candidate.id}>
+  const [modalOpen, setModalOpen] = useState(false);
+  const [candidates, setCandidates] = useState(CANDIDATE_DATA);
+  const [candidateToEdit, setCandidateToEdit] = useState(null);
+
+  const fields = [
+    { name: "firstName", label: "First Name", type: "text" },
+    { name: "lastName", label: "Last Name", type: "text" },
+    { name: "position", label: "Position", type: "text" },
+  ];
+
+  const validateCandidateForm = (formState) => {
+    const errors = [];
+    for (const field of fields) {
+      if (!formState[field.name]) {
+        errors.push(`${field.label}`);
+      }
+    }
+    return errors.length > 0 ? errors : null;
+  };
+
+  const handleDeleteCandidate = (targetIndex) => {
+    setCandidates(candidates.filter((_, idx) => idx !== targetIndex));
+  };
+
+  const handleEditCandidate = (idx) => {
+    setCandidateToEdit(idx);
+    setModalOpen(true);
+  };
+
+  const handleSubmit = (newCandidate) => {
+    candidateToEdit === null
+      ? setCandidates([...candidates, newCandidate])
+      : setCandidates(
+          candidates.map((currCandidate, idx) => {
+            if (idx !== candidateToEdit) return currCandidate;
+            return newCandidate;
+          })
+        );
+  };
+
+  const candidateList = candidates.map((candidate, idx) => (
+    <tr key={idx}>
       <td>{candidate.firstName}</td>
       <td>{candidate.lastName}</td>
       <td>{candidate.position}</td>
       <td>
-        <button className="edit-btn">Edit</button>
-        <button className="delete-btn">Delete</button>
+        <button className="edit-btn" onClick={() => handleEditCandidate(idx)}>
+          Edit
+        </button>
+        <button
+          className="delete-btn"
+          onClick={() => handleDeleteCandidate(idx)}
+        >
+          Delete
+        </button>
       </td>
     </tr>
   ));
 
   return (
     <>
       <div className="candidate-list">
+        <div className="page-title">Candidates</div>
         <table>
-          <tr>
-            <th>First Name</th>
-            <th>Last Name</th>
-            <th>Position</th>
-            <th>Tools</th>
-          </tr>
-          {candidateList}
+          <thead>
+            <tr>
+              <th>First Name</th>
+              <th>Last Name</th>
+              <th>Position</th>
+              <th>Tools</th>
+            </tr>
+          </thead>
+          <tbody>
+            {candidates.length > 0 ? (
+              candidateList
+            ) : (
+              <tr>
+                <td colSpan="4" style={{ textAlign: "center" }}>
+                  There are no candidates to display.
+                </td>
+              </tr>
+            )}
+          </tbody>
         </table>
+        <button onClick={() => setModalOpen(true)}>Add</button>
+        {modalOpen && (
+          <ModalForm
+            closeModal={() => {
+              setModalOpen(false);
+              setCandidateToEdit(null);
+            }}
+            fields={fields}
+            onSubmit={handleSubmit}
+            defaultValue={
+              candidateToEdit !== null && candidates[candidateToEdit]
+            }
+            validateFormCustom={validateCandidateForm}
+          />
+        )}
       </div>
     </>
   );

diff --git a/client/src/components/Dashboard.jsx b/client/src/components/Dashboard.jsx
@@ -1,32 +1,33 @@
-import { useState } from "react";
+import { VOTER_DATA } from "./Data";
+import { CANDIDATE_DATA } from "./Data";
+import { POSITION_DATA } from "./Data";
 
 function Dashboard() {
-  const [positionNum] = useState(0);
-  const [candidateNum] = useState(0);
-  const [voterNum] = useState(0);
+  const voterNum = VOTER_DATA.length;
+  const candidateNum = CANDIDATE_DATA.length;
+  const positionNum = POSITION_DATA.length;
 
   return (
-    <div className="dashboard-container">
-      <div className="voting-statistics">
-        <div className="num-positions">
-          <p>{positionNum}</p>
-          <p>No. of Positions</p>
-        </div>
+    <div>
+      <div className="dashboard-container">
+        <div className="page-title">Dashboard</div>
+        <div className="voting-statistics">
+          <div className="num-positions">
+            <p>{positionNum}</p>
+            <p>No. of Positions</p>
+          </div>
 
-        <div className="num-candidates">
-          <p>{candidateNum}</p>
-          <p>No. of Candidates</p>
-        </div>
+          <div className="num-candidates">
+            <p>{candidateNum}</p>
+            <p>No. of Candidates</p>
+          </div>
 
-        <div className="num-voters">
-          <p>{voterNum}</p>
-          <p>Total Voters</p>
+          <div className="num-voters">
+            <p>{voterNum}</p>
+            <p>Total Voters</p>
+          </div>
         </div>
       </div>
-
-      <div className="votes-tally">
-        <p>Voting Tally</p>
-      </div>
     </div>
   );
 }

diff --git a/client/src/components/Data.js b/client/src/components/Data.js
@@ -7,16 +7,56 @@ const CANDIDATE_DATA = [
   },
   {
     id: "c-1",
+    firstName: "Salmon",
+    lastName: "Kurosaki",
+    position: "President",
+  },
+  {
+    id: "c-2",
     firstName: "Salman",
     lastName: "Prajapati",
     position: "Vice President",
   },
   {
-    id: "c-2",
+    id: "c-3",
     firstName: "Surja",
     lastName: "Shrestha",
     position: "Vice President",
   },
 ];
 
+const VOTER_DATA = [
+  {
+    id: "v-0",
+    firstName: "Ranjita",
+    lastName: "Shrestha",
+  },
+  {
+    id: "v-1",
+    firstName: "Salma",
+    lastName: "Prajapati",
+  },
+  {
+    id: "v-2",
+    firstName: "Suraj",
+    lastName: "Shrestha",
+  },
+  {
+    id: "v-3",
+    firstName: "John",
+    lastName: "Shrestha",
+  },
+];
+
+const POSITION_DATA = [
+  {
+    id: "p-0",
+    description: "President",
+    maxVote: 1,
+  },
+  { id: "p-1", description: "Vice President", maxVote: 1 },
+];
+
 export { CANDIDATE_DATA };
+export { VOTER_DATA };
+export { POSITION_DATA };
diff --git a/client/src/components/Header.jsx b/client/src/components/Header.jsx
@@ -0,0 +1,14 @@
+function Header() {
+  return (
+    <div className="header-container flex ">
+      {/* <div className="header-name">e-Voting System</div> */}
+      <div className="toggle-sidebar">TOGGLE</div>
+      <div className="voter-account">
+        <div>Voter Account</div>
+        <button>Log Out</button>
+      </div>
+    </div>
+  );
+}
+
+export default Header;