From 9f26dae7252b66e724ae29f8f64360a545e5f463 Mon Sep 17 00:00:00 2001
From: shishiro <bannu1302@gmail.com>
Date: Fri, 7 Mar 2025 00:53:44 +0530
Subject: [PATCH 1/2] added election page

---
 src/App.tsx                             |   2 +
 src/components/shared/admin/sidebar.tsx |   4 +-
 src/pages/CreateElection.tsx            |  80 +++++++-
 src/pages/admin/AdminLayout.tsx         |   4 +-
 src/pages/admin/Election.tsx            |   2 +-
 src/pages/election/ElectionPage.tsx     | 252 ++++++++++++++++++++++++
 6 files changed, 334 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/election/ElectionPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 8184980..a483636 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ import AdminElectionsPage from '@/pages/admin/Election';
 import ElectionDetailPage from '@/components/shared/election/page';
 import VotePage from '@/pages/election/VotePage';
 import ElectionResultsPage from '@/pages/election/ResultPage';
+import ElectionDetails from '@/pages/election/ElectionPage';
 
 function App() {
   const auth = React.useContext(AuthContext);
@@ -85,6 +86,7 @@ function App() {
         </Route>
 
         <Route path="/admin" element={<AdminLayout />}>
+          <Route path="elections/:id" element={<ElectionDetails />} />
           <Route path="elections" element={<AdminElectionsPage />} />
           <Route path="create-election" element={<CreateElection />} />
           <Route index element={<div>admin dashboard</div>} />
diff --git a/src/components/shared/admin/sidebar.tsx b/src/components/shared/admin/sidebar.tsx
index e2aa445..c3b1f46 100644
--- a/src/components/shared/admin/sidebar.tsx
+++ b/src/components/shared/admin/sidebar.tsx
@@ -30,8 +30,8 @@ const sidebarItems = [
 export function AdminSidebar() {
   const location = useLocation();
   return (
-    <div className="hidden md:block ">
-      <div className="space-y-4 py-4">
+    <div className="hidden md:block border-r-1 ">
+      <div className="space-y-4 py-6">
         <div className="px-3 py-2">
           <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Admin Panel</h2>
           <div className="space-y-1">
diff --git a/src/pages/CreateElection.tsx b/src/pages/CreateElection.tsx
index 68beadc..da5c08e 100644
--- a/src/pages/CreateElection.tsx
+++ b/src/pages/CreateElection.tsx
@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { Link } from 'react-router';
 import { Info, Plus, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -24,12 +24,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { toast } from 'sonner';
+import AuthContext from '@/context/AuthContext';
 
 export default function CreateElectionPage() {
   const [purpose, setPurpose] = useState('');
-
   const [candidates, setCandidates] = useState([{ id: 1, name: '', slogan: '' }]);
   const [successDialogOpen, setSuccessDialogOpen] = useState(false);
+  const { state } = useContext(AuthContext);
 
   const addCandidate = () => {
     setCandidates([...candidates, { id: candidates.length + 1, name: '', slogan: '' }]);
@@ -49,9 +51,75 @@ export default function CreateElectionPage() {
     );
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    setSuccessDialogOpen(true);
+
+    if (candidates.length < 2) {
+      toast.error('You need to have at least 2 candidates');
+      return;
+    }
+
+    if (!state.is_admin) {
+      toast.error('You do not have permission to create an election');
+      return;
+    }
+
+    let totalElections = 0;
+    let is_operation_successful = false;
+
+    const createElectionPromise = new Promise((resolve, reject) => {
+      (async () => {
+        try {
+          totalElections = await state.instance!.noOfElections();
+
+          for (let i = 1; i <= totalElections; i++) {
+            const electionData = await state.instance!.getElection(i);
+            if (
+              electionData.purpose &&
+              electionData.purpose.toLowerCase() === purpose.toLowerCase()
+            ) {
+              throw new Error('This election is already created');
+            }
+          }
+
+          const tx = await state.instance!.createElection(purpose);
+          await tx.wait();
+
+          totalElections = await state.instance!.noOfElections();
+
+          for (const candidate of candidates) {
+            console.log('Adding candidate:', candidate);
+            const tx = await state.instance!.addCandidate(
+              candidate.name,
+              candidate.slogan,
+              totalElections
+            );
+            await tx.wait();
+          }
+          is_operation_successful = true;
+          resolve('Election created successfully');
+        } catch (error) {
+          reject(error);
+        }
+      })();
+    });
+
+    toast.promise(createElectionPromise, {
+      loading: 'Creating election...',
+      success: 'Election created successfully',
+      error: (error) => {
+        if (error.message.includes('user rejected transaction')) {
+          return 'Error: User rejected the transaction';
+        }
+        return `Error while creating the election`;
+      },
+    });
+
+    createElectionPromise.then(() => {
+      if (is_operation_successful) {
+        setSuccessDialogOpen(true);
+      }
+    });
   };
 
   return (
@@ -148,7 +216,9 @@ export default function CreateElectionPage() {
             <Button variant="outline" asChild>
               <Link to="/admin/elections">Cancel</Link>
             </Button>
-            <Button type="submit">Create Election</Button>
+            <Button type="submit" className="cursor-pointer">
+              Create Election
+            </Button>
           </CardFooter>
         </Card>
       </form>
diff --git a/src/pages/admin/AdminLayout.tsx b/src/pages/admin/AdminLayout.tsx
index 15c8859..552cc91 100644
--- a/src/pages/admin/AdminLayout.tsx
+++ b/src/pages/admin/AdminLayout.tsx
@@ -3,9 +3,9 @@ import { AdminSidebar } from '@/components/shared/admin/sidebar';
 
 const AdminLayout = () => {
   return (
-    <section className="flex-1 container grid  gap-12 md:grid-cols-[200px_1fr] lg:grid-cols-[250px_1fr] px-4 py-6 md:px-6 md:py-8">
+    <section className="flex-1 container grid  gap-12 md:grid-cols-[200px_1fr] lg:grid-cols-[250px_1fr] px-4  md:px-3 md:py-0">
       <AdminSidebar />
-      <main>
+      <main className='min-h-screen'>
         <Outlet />
       </main>
     </section>
diff --git a/src/pages/admin/Election.tsx b/src/pages/admin/Election.tsx
index f3b5253..7c1492b 100644
--- a/src/pages/admin/Election.tsx
+++ b/src/pages/admin/Election.tsx
@@ -76,7 +76,7 @@ export default function AdminElectionsPage() {
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <h1 className="text-3xl font-bold tracking-tight">Elections</h1>
         <Button asChild>
-          <Link to="/elections/create">
+          <Link to="/admin/create-election">
             <Plus className="mr-2 h-4 w-4" />
             Create Election
           </Link>
diff --git a/src/pages/election/ElectionPage.tsx b/src/pages/election/ElectionPage.tsx
new file mode 100644
index 0000000..2653008
--- /dev/null
+++ b/src/pages/election/ElectionPage.tsx
@@ -0,0 +1,252 @@
+import React, { useContext } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Play, Square } from 'lucide-react';
+import { Separator } from '@/components/ui/separator';
+import { useParams } from 'react-router';
+import AuthContext from '@/context/AuthContext';
+import { toast } from 'sonner';
+
+interface ElectionProps {
+  id: number;
+  purpose: string;
+  totalVotes: number;
+  status: string;
+}
+
+interface CandidateProps {
+  id: number;
+  name: string;
+  slogan: string;
+  votes: number;
+}
+export default function ElectionDetails() {
+  const [electionStatus, setElectionStatus] = React.useState('Created');
+  const [loading, setLoading] = React.useState(false);
+  const [election, setElection] = React.useState<ElectionProps | null>(null);
+  const [candidates, setCandidates] = React.useState<CandidateProps[] | null>(null);
+  const { state } = useContext(AuthContext);
+
+  const params = useParams();
+
+  const handleStartElection = async () => {
+    const startElectionPromise = new Promise((resolve, reject) => {
+      (async () => {
+        try {
+          const id = Number(params.id);
+          const tx = await state.instance!.startVoting(id);
+          await tx.wait();
+
+          resolve('Election started successfully');
+        } catch (error) {
+          reject(error);
+        }
+      })();
+    });
+
+    toast.promise(startElectionPromise, {
+      loading: 'Starting election...',
+      success: () => {
+        setElectionStatus('Active');
+        return 'Election started successfully';
+      },
+      error: (error) => {
+        if (error.message.includes('user rejected transaction')) {
+          return 'Error: User rejected the transaction';
+        }
+        return 'Error while starting the election';
+      },
+    });
+  };
+
+  const handleEndElection = () => {
+    const endElectionPromise = new Promise((resolve, reject) => {
+      (async () => {
+        try {
+          const id = Number(params.id);
+          const tx = await state.instance!.endElection(id);
+          await tx.wait();
+
+          resolve('Election ended successfully');
+        } catch (error) {
+          reject(error);
+        }
+      })();
+    });
+
+    toast.promise(endElectionPromise, {
+      loading: 'Ending election...',
+      success: () => {
+        setElectionStatus('Ended');
+        return 'Election ended successfully';
+      },
+      error: (error) => {
+        if (error.message.includes('user rejected transaction')) {
+          return 'Error: User rejected the transaction';
+        }
+        return 'Error while ending the election';
+      },
+    });
+  };
+
+  React.useEffect(() => {
+    const getElection = async () => {
+      try {
+        if (!state.instance) return;
+        setLoading(true);
+        const id = Number(params.id);
+
+        console.log('Fetching election with ID:', id);
+
+        const election = await state.instance!.getElection(id);
+        const election_id = election.id.toNumber();
+        const purpose = election.purpose;
+        const totalVotes = election.totalVotes.toNumber();
+        const statusNumber = election.status.toNumber();
+        const status = statusNumber === 1 ? 'Created' : statusNumber === 2 ? 'Active' : 'Ended';
+        setElectionStatus(status);
+
+        setElection({ id: election_id, purpose, totalVotes, status });
+
+        const candidate_ids = election.candidatesids;
+        const candidateData = [];
+
+        for (let i of candidate_ids) {
+          try {
+            i = i.toNumber();
+            const candidate = await state.instance!.getCandidate(i);
+            console.log('Candidate:', candidate);
+            candidateData.push({
+              id: candidate.id.toNumber(),
+              name: candidate.name,
+              slogan: candidate.slogan,
+              votes: candidate.voteCount.toNumber(),
+            });
+          } catch (candidateError) {
+            console.error(`Error fetching candidate ${i}:`, candidateError);
+          }
+        }
+
+        setCandidates(candidateData);
+      } catch (error) {
+        console.error('Error fetching election:', error);
+        toast.error('Failed to fetch election data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    getElection();
+  }, [state.instance, params.id]);
+
+  if (loading) return <>loading....</>;
+  return (
+    <div className="min-h-screen w-full bg-background">
+      <main className="py-6 ">
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Election Details</h1>
+            <p className="text-muted-foreground">View and manage election information</p>
+          </div>
+          <div className="flex gap-2">
+            {electionStatus === 'Created' && (
+              <Button
+                variant="default"
+                className="bg-green-600 hover:bg-green-700 cursor-pointer"
+                onClick={handleStartElection}
+              >
+                <Play className="h-4 w-4" />
+                Start Election
+              </Button>
+            )}
+
+            {electionStatus === 'Active' && (
+              <Button variant="destructive" onClick={handleEndElection} className="cursor-pointer">
+                <Square className="h-4 w-4" />
+                End Election
+              </Button>
+            )}
+          </div>
+        </div>
+
+        <Card className="mb-8">
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <CardTitle>Election Summary</CardTitle>
+              <Badge
+                variant={
+                  electionStatus === 'Active'
+                    ? 'default'
+                    : electionStatus === 'Ended'
+                      ? 'secondary'
+                      : 'outline'
+                }
+              >
+                {electionStatus}
+              </Badge>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-3 gap-6">
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">Election ID</h3>
+                <p className="text-xl font-semibold">{election?.id}</p>
+              </div>
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">Election Purpose</h3>
+                <p className="text-xl font-semibold">{election?.purpose}</p>
+              </div>
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">Total Votes</h3>
+                <p className="text-xl font-semibold">{election?.totalVotes}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <h2 className="text-2xl font-bold tracking-tight mb-4">Candidates</h2>
+        <div className="grid md:grid-cols-2 gap-6">
+          {candidates?.map((candidate) => (
+            <CandidateCard
+              key={candidate.id}
+              name={candidate.name}
+              id={candidate.id.toString()}
+              slogan={candidate.slogan}
+              voteCount={candidate.votes}
+            />
+          ))}
+        </div>
+      </main>
+    </div>
+  );
+}
+
+interface CandidateCardProps {
+  name: string;
+  id: string;
+  slogan: string;
+  voteCount: number;
+}
+
+function CandidateCard({ name, id, slogan, voteCount }: CandidateCardProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-xl">{name}</CardTitle>
+        <CardDescription>Candidate ID: {id}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="mb-2">
+          <h3 className="text-sm font-medium text-muted-foreground mb-1">Slogan</h3>
+          <p className="text-sm">{slogan}</p>
+        </div>
+        <Separator className="my-3" />
+        <div>
+          <h3 className="text-sm font-medium text-muted-foreground mb-1">Vote Count</h3>
+          <p className="text-xl font-semibold">{voteCount}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

From 7239e692dd56e851b7319750c802ce126e9e1dab Mon Sep 17 00:00:00 2001
From: shishiro <bannu1302@gmail.com>
Date: Fri, 7 Mar 2025 19:42:43 +0530
Subject: [PATCH 2/2] added pages

---
 package-lock.json                   |  29 +++
 package.json                        |   1 +
 src/App.tsx                         |   2 +
 src/components/shared/Navbar.tsx    |  14 +-
 src/components/ui/alert-dialog.tsx  | 155 ++++++++++++++++
 src/components/ui/button.tsx        |  46 ++---
 src/pages/CreateElection.tsx        |   2 +-
 src/pages/election/ElectionPage.tsx |   4 +-
 src/pages/election/ResultsPage.tsx  | 264 ++++++++++++++++++++++++++++
 9 files changed, 487 insertions(+), 30 deletions(-)
 create mode 100644 src/components/ui/alert-dialog.tsx
 create mode 100644 src/pages/election/ResultsPage.tsx

diff --git a/package-lock.json b/package-lock.json
index d0c5034..9e94734 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@hookform/resolvers": "^4.1.3",
+        "@radix-ui/react-alert-dialog": "^1.1.6",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-dropdown-menu": "^2.1.6",
         "@radix-ui/react-label": "^2.1.2",
@@ -1767,6 +1768,34 @@
       "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.6.tgz",
+      "integrity": "sha512-p4XnPqgej8sZAAReCAKgz1REYZEBLR8hU9Pg27wFnCWIMc8g1ccCs0FjBcy05V15VTu8pAePw/VDYeOm/uZ6yQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dialog": "1.1.6",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz",
diff --git a/package.json b/package.json
index 85094a1..698d1dc 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^4.1.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.2",
diff --git a/src/App.tsx b/src/App.tsx
index a483636..cf64d98 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,6 +14,7 @@ import ElectionDetailPage from '@/components/shared/election/page';
 import VotePage from '@/pages/election/VotePage';
 import ElectionResultsPage from '@/pages/election/ResultPage';
 import ElectionDetails from '@/pages/election/ElectionPage';
+import ResultsPage from './pages/election/ResultsPage';
 
 function App() {
   const auth = React.useContext(AuthContext);
@@ -91,6 +92,7 @@ function App() {
           <Route path="create-election" element={<CreateElection />} />
           <Route index element={<div>admin dashboard</div>} />
           <Route path="verify-voters" element={<AdminVerifyVotersPage />} />
+          <Route path="results" element={<ResultsPage />} />
         </Route>
         <Route path="/candidate/add" element={<CandidatePage />} />
         <Route path="*" element={<div>not found return 404</div>} />
diff --git a/src/components/shared/Navbar.tsx b/src/components/shared/Navbar.tsx
index 36a5093..d66d452 100644
--- a/src/components/shared/Navbar.tsx
+++ b/src/components/shared/Navbar.tsx
@@ -70,11 +70,13 @@ export default function Navbar() {
                 </ul>
               </NavigationMenuContent>
             </NavigationMenuItem>
-            <NavigationMenuItem>
-              <NavigationMenuLink href="/voter/add" className={navigationMenuTriggerStyle()}>
-                Register as voter
-              </NavigationMenuLink>
-            </NavigationMenuItem>
+            {state.is_admin ? null : (
+              <NavigationMenuItem>
+                <NavigationMenuLink href="/voter/add" className={navigationMenuTriggerStyle()}>
+                  Register as voter
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            )}
             <NavigationMenuItem>
               <NavigationMenuLink className={navigationMenuTriggerStyle()} href="/about">
                 About
@@ -86,7 +88,7 @@ export default function Navbar() {
         <div className="flex items-center gap-4">
           {state.is_admin ? (
             <Button variant="ghost" size="sm" asChild className="hidden md:flex">
-              <Link to="/admin" className='font-medium'>
+              <Link to="/admin/elections" className="font-medium">
                 <Shield className="h-4 w-4" />
                 Admin
               </Link>
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..e7cbfe8
--- /dev/null
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,155 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index fca8736..cd0857a 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,36 +1,38 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
         outline:
-          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   }
-);
+)
 
 function Button({
   className,
@@ -38,11 +40,11 @@ function Button({
   size,
   asChild = false,
   ...props
-}: React.ComponentProps<'button'> &
+}: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
+    asChild?: boolean
   }) {
-  const Comp = asChild ? Slot : 'button';
+  const Comp = asChild ? Slot : "button"
 
   return (
     <Comp
@@ -50,7 +52,7 @@ function Button({
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  );
+  )
 }
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }
diff --git a/src/pages/CreateElection.tsx b/src/pages/CreateElection.tsx
index da5c08e..048297b 100644
--- a/src/pages/CreateElection.tsx
+++ b/src/pages/CreateElection.tsx
@@ -254,7 +254,7 @@ export default function CreateElectionPage() {
               <Link to="/admin/elections">View All Elections</Link>
             </Button>
             <Button onClick={() => setSuccessDialogOpen(false)} asChild>
-              <Link to="/admin/elections/1">View Election Details</Link>
+              <Link to="/admin/elections/26">View Election Details</Link>
             </Button>
           </DialogFooter>
         </DialogContent>
diff --git a/src/pages/election/ElectionPage.tsx b/src/pages/election/ElectionPage.tsx
index 2653008..d00fc89 100644
--- a/src/pages/election/ElectionPage.tsx
+++ b/src/pages/election/ElectionPage.tsx
@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Play, Square } from 'lucide-react';
 import { Separator } from '@/components/ui/separator';
-import { useParams } from 'react-router';
+import { useNavigate, useParams } from 'react-router';
 import AuthContext from '@/context/AuthContext';
 import { toast } from 'sonner';
 
@@ -27,6 +27,7 @@ export default function ElectionDetails() {
   const [election, setElection] = React.useState<ElectionProps | null>(null);
   const [candidates, setCandidates] = React.useState<CandidateProps[] | null>(null);
   const { state } = useContext(AuthContext);
+  const navigate = useNavigate();
 
   const params = useParams();
 
@@ -79,6 +80,7 @@ export default function ElectionDetails() {
       loading: 'Ending election...',
       success: () => {
         setElectionStatus('Ended');
+        navigate('/admin/results');
         return 'Election ended successfully';
       },
       error: (error) => {
diff --git a/src/pages/election/ResultsPage.tsx b/src/pages/election/ResultsPage.tsx
new file mode 100644
index 0000000..eec06f2
--- /dev/null
+++ b/src/pages/election/ResultsPage.tsx
@@ -0,0 +1,264 @@
+import React from 'react';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+  DialogClose,
+} from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { Trophy, AlertTriangle } from 'lucide-react';
+import AuthContext from '@/context/AuthContext';
+import { BigNumber } from 'ethers';
+import { toast } from 'sonner';
+
+interface ResultProps {
+  name: string;
+  votes: number;
+}
+
+export default function ResultsPage() {
+  const [openDialogId, setOpenDialogId] = React.useState<number | null>(null);
+  const [alertDialogOpen, setAlertDialogOpen] = React.useState<number | null>(null);
+  const [loading, setLoading] = React.useState(false);
+  const { state } = React.useContext(AuthContext);
+  const [elections, setElections] = React.useState<
+    | { id: number; title: string; status: string; totalVotes: number; candidate_id: number[] }[]
+    | null
+  >(null);
+  const [result, setResult] = React.useState<ResultProps[] | null>(null);
+
+  const handleDeleteElection = async (id: number) => {
+    toast.promise(
+      state.instance!.deleteElection(id).then(() => {
+        setElections((prevElections) =>
+          prevElections ? prevElections.filter((election) => election.id !== id) : []
+        );
+      }),
+      {
+        loading: 'Deleting election...',
+        success: 'Election deleted successfully!',
+        error: 'Failed to delete election.',
+      }
+    );
+  };
+
+  React.useEffect(() => {
+    const getElections = async () => {
+      if (!state.instance) return;
+
+      setLoading(true);
+
+      try {
+        const election_count = await state.instance!.noOfElections();
+        const elections_ = [];
+
+        for (let i = 1; i <= election_count.toNumber(); i++) {
+          const result = await state.instance!.getElection(i);
+
+          if (result.purpose !== '') {
+            const statusNumber = result.status.toNumber();
+            const status =
+              statusNumber === 1 ? 'upcoming' : statusNumber === 2 ? 'active' : 'completed';
+            console.log('result', result);
+            const candidates = result.candidatesids;
+            elections_.push({
+              id: i,
+              title: result.purpose,
+              candidate_id: candidates.map((c: BigNumber) => c.toNumber()),
+              status,
+              totalVotes: result.totalVotes.toNumber(),
+            });
+          }
+        }
+
+        setElections(elections_.filter((election) => election.status === 'completed'));
+      } catch (error) {
+        console.error('Error fetching elections:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    getElections();
+  }, [state]);
+
+  const handleResultAction = async (id: number) => {
+    if (!elections) {
+      console.error('No elections found.');
+      return;
+    }
+
+    const election = elections.find((e) => e.id === id);
+    if (!election) {
+      console.error('Election not found.');
+      return;
+    }
+
+    const candidates = election.candidate_id;
+    console.log('candidates', candidates);
+
+    if (!candidates || candidates.length === 0) {
+      toast.error('No candidates found for this election.');
+      return;
+    }
+
+    toast.promise(
+      Promise.all(
+        candidates.map(async (i) => {
+          const candidate = await state.instance!.getCandidate(i);
+          return {
+            name: candidate.name,
+            votes: candidate.voteCount.toNumber(),
+          };
+        })
+      ).then((res) => {
+        res.sort((a, b) => b.votes - a.votes);
+        setResult(res);
+        setOpenDialogId(id);
+      }),
+      {
+        loading: 'Fetching election results...',
+        success: 'Election results fetched successfully!',
+        error: 'Failed to fetch election results.',
+      }
+    );
+  };
+
+  if (loading) {
+    return <>loading....</>;
+  }
+  return (
+    <div className="min-h-screen bg-background">
+      <main className="container py-6">
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Election Results</h1>
+            <p className="text-muted-foreground">View the final results of completed elections</p>
+          </div>
+        </div>
+
+        {elections?.map((election) => (
+          <Card className="mb-8">
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <CardTitle>Election Summary</CardTitle>
+                <Badge variant="secondary">Ended</Badge>
+              </div>
+            </CardHeader>
+            <CardContent key={election.id} className="flex items-center justify-between">
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">Election ID</h3>
+                <p className="text-xl font-semibold">{election.id}</p>
+              </div>
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">Election Purpose</h3>
+                <p className="text-xl font-semibold">{election.title}</p>
+              </div>
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">Election Status</h3>
+                <p className="text-xl font-semibold">{election.status}</p>
+              </div>
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">Total Votes</h3>
+                <p className="text-xl font-semibold">{election.totalVotes}</p>
+              </div>
+            </CardContent>
+            <CardFooter className="flex justify-end gap-2 border-t pt-4">
+              <Dialog
+                open={openDialogId === election.id}
+                onOpenChange={(isOpen) => setOpenDialogId(isOpen ? election.id : null)}
+              >
+                <DialogTrigger asChild>
+                  <Button variant="default" onClick={() => handleResultAction(Number(election.id))}>
+                    <Trophy className="h-4 w-4" />
+                    View Result
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-md">
+                  <DialogHeader>
+                    <DialogTitle className="text-center text-xl">Election Result</DialogTitle>
+                    <DialogDescription className="text-center pt-2">
+                      {election.title}
+                    </DialogDescription>
+                  </DialogHeader>
+                  <div className="py-6">
+                    <div className="text-center mb-4">
+                      <Badge variant="outline" className="text-base px-3 py-1 font-medium">
+                        DRAW
+                      </Badge>
+                    </div>
+                    <p className="text-center mb-4">
+                      There is a draw between the following candidates with each getting 0 votes.
+                    </p>
+                    <div className="space-y-2 bg-muted/50 p-4 rounded-lg">
+                      {result?.map((r) => (
+                        <div className="flex justify-between items-center">
+                          <span className="font-medium">{r.name}</span>
+                          <Badge variant="secondary">{r.votes} votes</Badge>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  <DialogFooter className="sm:justify-center">
+                    <DialogClose asChild>
+                      <Button type="button" variant="secondary">
+                        Close
+                      </Button>
+                    </DialogClose>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+
+              <AlertDialog
+                open={alertDialogOpen === election.id}
+                onOpenChange={(isOpen) => setAlertDialogOpen(isOpen ? election.id : null)}
+              >
+                <AlertDialogTrigger asChild>
+                  <Button variant="destructive">
+                    <AlertTriangle className="h-4 w-4" />
+                    Delete Election
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This action cannot be undone. This will permanently delete the election and
+                      all associated data including votes and candidate information.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction
+                      onClick={() => handleDeleteElection(election.id)}
+                      className="bg-destructive text-destructive-foreground"
+                    >
+                      Delete
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </CardFooter>
+          </Card>
+        ))}
+      </main>
+    </div>
+  );
+}