Merge remote-tracking branch 'origin/main' into enhancement/smart-con…

…tract

frontend/src/app/dashboard/create-election/_components/Summary.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import InputWrapper from "./inputs/InputWrapper";
+
+const items = [
+  {
+    title: "Election Title",
+    values: ["2024 SRC President - UG"],
+  },
+  {
+    title: "Description",
+    values: [
+      "This election is being held to elect a new SRC president for the University of Ghana",
+    ],
+  },
+  {
+    title: "Election Period",
+    values: ["Aug 17, 2024 - Aug 29, 2024"],
+  },
+  {
+    title: "Election Type",
+    values: ["Private"],
+  },
+  {
+    title: "Candidates",
+    values: [
+      "Joshua Mensah",
+      "Alisson Newton",
+      "James Hammond",
+      "Michael Brown",
+    ],
+  },
+  {
+    title: "Voter Count",
+    values: ["24"],
+  },
+];
+
+const Summary = () => {
+  return (
+    <div className="w-full flex flex-col gap-12">
+      {items.map((item, index) => (
+        <InputWrapper key={index} label={item.title} name={item.title}>
+          <div className="flex flex-col gap-2">
+            {item.values.map((value, index) => (
+              <p key={index} className="text-white/40 text-lg">
+                {value}
+              </p>
+            ))}
+          </div>
+        </InputWrapper>
+      ))}
+      <div className="flex justify-end mt-24">
+        <button className="bg-secondary dark:bg-primary rounded-full px-12 text-white py-2.5">
+          Next
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Summary;

frontend/src/app/dashboard/create-election/_components/Voters.tsx

@@ -1,7 +1,47 @@
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "@/components/ui/accordion";
 import React from "react";
 
 const Voters = () => {
-  return <div className="w-full">Voters</div>;
+  return (
+    <Accordion value="voters" type="single" className="flex flex-col text-base">
+      <AccordionItem value="voters" className="border-none">
+        <AccordionTrigger className="bg-primary py-3 px-[18px] rounded-t-xl text-white/60">
+          Enter Voters Manually
+        </AccordionTrigger>
+        <AccordionContent>
+          <form className="flex flex-col gap-6 pt-[42px] pb-12">
+            <textarea
+              className="border border-[#EAEAEA]/30 focus:border-primary outline-none rounded-lg p-4 resize-none bg-transparent"
+              rows={12}
+              placeholder="Enter addresses here"
+            ></textarea>
+
+            <div className="flex justify-between gap-2 items-center">
+              <label
+                htmlFor="voters"
+                className="text-secondary italic font-mulish"
+              >
+                Enter each Voter’s wallet address on a new line
+              </label>
+
+              <p className="text-white/60">O Voter(s)</p>
+            </div>
+
+            <div className="flex justify-end">
+              <button className="bg-secondary dark:bg-primary rounded-full px-12 text-white py-2.5 mt-24">
+                Next
+              </button>
+            </div>
+          </form>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
 };
 
 export default Voters;

frontend/src/app/dashboard/create-election/page.tsx

@@ -1,8 +1,11 @@
+"use client";
 import React from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import Election from "./_components/Election";
 import Candidates from "./_components/Candidates";
 import Voters from "./_components/Voters";
+import Summary from "./_components/Summary";
+import { useSearchParams } from "next/navigation";
 
 const tabHeaders = [
   { value: "election", label: "Election" },
@@ -15,17 +18,23 @@ const tabsContent = [
   { value: "election", component: <Election /> },
   { value: "candidates", component: <Candidates /> },
   { value: "voters", component: <Voters /> },
+  { value: "summary", component: <Summary /> },
 ];
 
 const CreateElection = () => {
+  const searchParams = useSearchParams();
+  let tab = searchParams.get("tab");
+  tab = tabHeaders.find(({ value }) => value === tab)?.value || "election";
+
   return (
     <main className="flex flex-col ml-[117px] w-full max-w-[672px] max-md:px-4">
-      <Tabs defaultValue="election" className="w-full">
+      <Tabs value={tab} className="w-full">
         <TabsList className="w-full flex justify-between border-b px-0 border-gray/30 dark:border-[#EAEAEA]/15">
           {tabHeaders.map(({ value, label }) => (
             <TabsTrigger
+              disabled // can be removed if you want to control with tabs
               key={value}
-              className="px-0 text-xl transition duration-300 data-[state=active]:text-secondary dark:text-white/60 dark:data-[state=active]:text-secondary relative before:absolute before:w-full before:h-1 before:bg-secondary before:rounded-full before:bottom-0 before:translate-y-1/2 before:opacity-0 data-[state=active]:before:opacity-100 before:transition before:duration-3000"
+              className="px-0 text-xl transition duration-300 data-[state=active]:text-secondary dark:text-white/60 dark:data-[state=active]:text-secondary relative before:absolute before:w-full before:h-1 before:bg-secondary before:rounded-full before:bottom-0 before:translate-y-1/2 before:opacity-0 data-[state=active]:before:opacity-100 before:transition before:duration-3000 disabled:opacity-100"
               value={value}
             >
               {label}

frontend/src/app/dashboard/layout.tsx

@@ -14,7 +14,7 @@ export default function DashboardLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="flex">
+    <div className="flex h-screen relative">
       <Sidebar />
       <div className="flex flex-col w-full relative">
         <Header />

frontend/src/app/layout.tsx

@@ -1,5 +1,11 @@
 import { Metadata } from "next";
-import { Space_Grotesk, Roboto_Flex, Afacad, Abel } from "next/font/google";
+import {
+  Space_Grotesk,
+  Roboto_Flex,
+  Afacad,
+  Abel,
+  Mulish,
+} from "next/font/google";
 import "./globals.css";
 import Header from "@/components/Header/Header";
 import WalletProvider from "@/components/WalletProvider";
@@ -23,8 +29,13 @@ const abel = Abel({
   variable: "--font-abel",
   weight: "400",
 });
+const mulish = Mulish({
+  subsets: ["latin"],
+  variable: "--font-abel",
+  weight: "400",
+});
 
-const fonts = [afacad, space_grotesk, roboto_flex, abel];
+const fonts = [afacad, space_grotesk, roboto_flex, abel, mulish];
 const fontClasses = fonts.map((font) => font.variable).join(" ");
 
 export const metadata: Metadata = {

frontend/tailwind.config.ts

@@ -1,3 +1,4 @@
+import { m } from "framer-motion";
 import type { Config } from "tailwindcss";
 
 const config: Config = {
@@ -26,6 +27,7 @@ const config: Config = {
       "roboto-flex": ["var(--font-roboto-flex)"],
       afacad: ["var(--font-afacad)"],
       abel: ["var(--font-abel)"],
+      mulish: ["var(--font-mulish)"],
     },
     extend: {
       screens: {