From 47bc50ff31938f0d17bfac93822da220470420fc Mon Sep 17 00:00:00 2001
From: Angelo CG <angelocas13_8@hotmail.com>
Date: Fri, 31 Mar 2023 13:29:08 -0600
Subject: [PATCH 01/12] fix(webapp): fixed all dates format

---
 .../ongoing-election-components/ongoing-round/header.tsx    | 4 ++--
 .../registration-election-components/video-upload-cta.tsx   | 3 ++-
 .../components/withdraw-funds/next-disbursement-info.tsx    | 4 ++--
 packages/webapp/src/pages/election/round-video-upload.tsx   | 6 ++++--
 packages/webapp/src/pages/election/stats.tsx                | 6 +++---
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/webapp/src/elections/components/ongoing-election-components/ongoing-round/header.tsx b/packages/webapp/src/elections/components/ongoing-election-components/ongoing-round/header.tsx
index 33241d930..ba57cf66a 100644
--- a/packages/webapp/src/elections/components/ongoing-election-components/ongoing-round/header.tsx
+++ b/packages/webapp/src/elections/components/ongoing-election-components/ongoing-round/header.tsx
@@ -39,8 +39,8 @@ export const Header = ({
             }
             sublineComponent={
                 <Text size="sm" className="tracking-tight">
-                    {roundStartTime.format("LT")} -{" "}
-                    {roundEndTime.format("LT z")}
+                    {roundStartTime.utc().format("LT")} -{" "}
+                    {roundEndTime.utc().format("LT")} UTC
                 </Text>
             }
         >
diff --git a/packages/webapp/src/elections/components/registration-election-components/video-upload-cta.tsx b/packages/webapp/src/elections/components/registration-election-components/video-upload-cta.tsx
index 3b8f550aa..93fd2822c 100644
--- a/packages/webapp/src/elections/components/registration-election-components/video-upload-cta.tsx
+++ b/packages/webapp/src/elections/components/registration-election-components/video-upload-cta.tsx
@@ -23,7 +23,8 @@ export const ElectionVideoUploadCTA = () => {
             <Heading size={3}>Election video upload service</Heading>
             <Text>
                 View and upload your meeting videos from the last election. All
-                election videos must be uploaded by {deadline.format("LLL z")}.
+                election videos must be uploaded by{" "}
+                {deadline.utc().format("LLL")} UTC.
             </Text>
             <Button
                 size="xs"
diff --git a/packages/webapp/src/members/components/withdraw-funds/next-disbursement-info.tsx b/packages/webapp/src/members/components/withdraw-funds/next-disbursement-info.tsx
index ba282e5ed..952739d21 100644
--- a/packages/webapp/src/members/components/withdraw-funds/next-disbursement-info.tsx
+++ b/packages/webapp/src/members/components/withdraw-funds/next-disbursement-info.tsx
@@ -16,8 +16,8 @@ export const NextDisbursementInfo = () => {
             return (
                 <Text>
                     Delegate funds are disbursed monthly. Check back on{" "}
-                    {nextDisbursementTime.format("LL")} after{" "}
-                    {nextDisbursementTime.format("LT z")} for your next
+                    {nextDisbursementTime.utc().format("LL")} UTC after{" "}
+                    {nextDisbursementTime.utc().format("LT")} UTC for your next
                     disbursement.
                 </Text>
             );
diff --git a/packages/webapp/src/pages/election/round-video-upload.tsx b/packages/webapp/src/pages/election/round-video-upload.tsx
index 57970a1b1..48d7c8cc1 100644
--- a/packages/webapp/src/pages/election/round-video-upload.tsx
+++ b/packages/webapp/src/pages/election/round-video-upload.tsx
@@ -185,7 +185,7 @@ const RoundVideoUploadList = ({ electionState }: { electionState: string }) => {
                 message:
                     "There was an error uploading your video. Please try again.",
             });
-            }
+        }
     };
 
     return (
@@ -280,7 +280,9 @@ const Header = ({
         winner && isValidDelegate(winner.account)
             ? `Delegate: ${winner.name}`
             : roundStartTime && roundEndTime
-            ? `${roundStartTime.format("LT")} - ${roundEndTime.format("LT z")}`
+            ? `${roundStartTime
+                  .utc()
+                  .format("LT")} - ${roundEndTime.utc().format("LT")} UTC`
             : "Consensus not achieved";
 
     return (
diff --git a/packages/webapp/src/pages/election/stats.tsx b/packages/webapp/src/pages/election/stats.tsx
index 7a9dbb2c9..f70e1c4b8 100644
--- a/packages/webapp/src/pages/election/stats.tsx
+++ b/packages/webapp/src/pages/election/stats.tsx
@@ -138,9 +138,9 @@ const GlobalRoundHeader = ({ round }: GlobalRoundHeaderProps) => {
         }
     };
 
-    const subText = `${round.votingBegin.format(
-        "LT"
-    )} - ${round.votingEnd.format("LT z")}`;
+    const subText = `${round.votingBegin
+        .utc()
+        .format("LT")} - ${round.votingEnd.utc().format("LT")} UTC`;
 
     return (
         <RoundHeader

From b5f28e3895e46c89352d4862f5a79c500b22e3ba Mon Sep 17 00:00:00 2001
From: Angelo CG <angelocas13_8@hotmail.com>
Date: Fri, 31 Mar 2023 13:51:20 -0600
Subject: [PATCH 02/12] fix(webapp): fixed all dates format

---
 packages/webapp/src/pages/election/stats.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/pages/election/stats.tsx b/packages/webapp/src/pages/election/stats.tsx
index f70e1c4b8..188397cca 100644
--- a/packages/webapp/src/pages/election/stats.tsx
+++ b/packages/webapp/src/pages/election/stats.tsx
@@ -139,8 +139,9 @@ const GlobalRoundHeader = ({ round }: GlobalRoundHeaderProps) => {
     };
 
     const subText = `${round.votingBegin
+        .utc().format("LT")} - ${round.votingEnd
         .utc()
-        .format("LT")} - ${round.votingEnd.utc().format("LT")} UTC`;
+        .format("LT")} UTC`;
 
     return (
         <RoundHeader

From 77c27091d01f96ec7e4348e364e99d6ec47453e2 Mon Sep 17 00:00:00 2001
From: Angelo CG <angelocas13_8@hotmail.com>
Date: Fri, 31 Mar 2023 13:53:23 -0600
Subject: [PATCH 03/12] fix(webapp): fixed all dates format

---
 packages/webapp/src/pages/election/stats.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/webapp/src/pages/election/stats.tsx b/packages/webapp/src/pages/election/stats.tsx
index 188397cca..cb0359fc6 100644
--- a/packages/webapp/src/pages/election/stats.tsx
+++ b/packages/webapp/src/pages/election/stats.tsx
@@ -138,10 +138,7 @@ const GlobalRoundHeader = ({ round }: GlobalRoundHeaderProps) => {
         }
     };
 
-    const subText = `${round.votingBegin
-        .utc().format("LT")} - ${round.votingEnd
-        .utc()
-        .format("LT")} UTC`;
+    const subText = `${round.votingBegin.utc().format("LT")} - ${round.votingEnd.utc().format("LT")} UTC`;
 
     return (
         <RoundHeader

From e509eb9a03afc6a3aa4bf9f22f278752a8e06c08 Mon Sep 17 00:00:00 2001
From: Angelo CG <angelocas13_8@hotmail.com>
Date: Fri, 31 Mar 2023 13:55:20 -0600
Subject: [PATCH 04/12] fix(webapp): fixed all dates format

---
 .../src/pages/election/round-video-upload.tsx | 494 +++++++++---------
 packages/webapp/src/pages/election/stats.tsx  | 479 ++++++++---------
 2 files changed, 468 insertions(+), 505 deletions(-)

diff --git a/packages/webapp/src/pages/election/round-video-upload.tsx b/packages/webapp/src/pages/election/round-video-upload.tsx
index 48d7c8cc1..70701d7e2 100644
--- a/packages/webapp/src/pages/election/round-video-upload.tsx
+++ b/packages/webapp/src/pages/election/round-video-upload.tsx
@@ -3,301 +3,279 @@ import { RiVideoUploadLine } from "react-icons/ri";
 import dayjs from "dayjs";
 
 import {
-    SideNavLayout,
-    isValidDelegate,
-    onError,
-    uploadIpfsFileWithTransaction,
-    uploadToIpfs,
-    useCurrentElection,
-    useUALAccount,
-    useElectionState,
-    useCurrentMemberElectionVotingData,
+  SideNavLayout,
+  isValidDelegate,
+  onError,
+  uploadIpfsFileWithTransaction,
+  uploadToIpfs,
+  useCurrentElection,
+  useUALAccount,
+  useElectionState,
+  useCurrentMemberElectionVotingData
 } from "_app";
 import {
-    Container,
-    Text,
-    Expander,
-    Heading,
-    Loader,
-    VideoSubmissionFormAndPreview,
-    VideoSubmissionPhase,
+  Container,
+  Text,
+  Expander,
+  Heading,
+  Loader,
+  VideoSubmissionFormAndPreview,
+  VideoSubmissionPhase
 } from "_app/ui";
 import {
-    ElectionStatus,
-    ErrorLoadingElection,
-    setElectionRoundVideo,
+  ElectionStatus,
+  ErrorLoadingElection,
+  setElectionRoundVideo
 } from "elections";
 import { RoundHeader } from "elections/components/ongoing-election-components";
 import { MemberGateContainer } from "members";
 import { MemberNFT } from "nfts/interfaces";
 
 export const RoundVideoUploadPage = () => {
-    const {
-        data: currentElection,
-        isLoading: isLoadingElection,
-        isError: isErrorElection,
-    } = useCurrentElection();
-    const {
-        data: electionState,
-        isLoading: isLoadingElectionState,
-        isError: isErrorElectionState,
-    } = useElectionState();
+  const {
+    data: currentElection,
+    isLoading: isLoadingElection,
+    isError: isErrorElection
+  } = useCurrentElection();
+  const {
+    data: electionState,
+    isLoading: isLoadingElectionState,
+    isError: isErrorElectionState
+  } = useElectionState();
 
-    const isLoading = isLoadingElection || isLoadingElectionState;
-    const isError = isErrorElection || isErrorElectionState;
+  const isLoading = isLoadingElection || isLoadingElectionState;
+  const isError = isErrorElection || isErrorElectionState;
 
-    if (isLoading) return <LoaderSection />;
-    if (isError || !currentElection) return <ErrorLoadingElection />;
+  if (isLoading) return <LoaderSection />;
+  if (isError || !currentElection) return <ErrorLoadingElection />;
 
-    const uploadLimitTime = electionState
-        ? dayjs(electionState.last_election_time + "Z").add(2, "weeks")
-        : dayjs().add(1, "day");
+  const uploadLimitTime = electionState
+    ? dayjs(electionState.last_election_time + "Z").add(2, "weeks")
+    : dayjs().add(1, "day");
 
-    const isUploadExpired =
-        dayjs().isAfter(uploadLimitTime) &&
-        currentElection?.electionState === ElectionStatus.Registration;
+  const isUploadExpired =
+    dayjs().isAfter(uploadLimitTime) &&
+    currentElection?.electionState === ElectionStatus.Registration;
 
-    return (
-        <SideNavLayout title="Election video upload service">
-            <div className="divide-y">
-                <Container>
-                    <Heading size={1}>Election video upload service</Heading>
-                </Container>
-                <Container className="space-y-6 pb-5">
-                    {isUploadExpired ? (
-                        <div>
-                            Election is complete and upload videos time is
-                            expired.
-                        </div>
-                    ) : (
-                        <>
-                            <Text>
-                                Election video files are typically large and
-                                require many minutes to upload completely. Do
-                                not close this tab during the upload. A
-                                confirmation will be displayed when your upload
-                                is complete.
-                            </Text>
-                            <Text>
-                                Be patient, and remember you have 2 weeks from
-                                the beginning of the election to complete your
-                                election video uploads.
-                            </Text>
-                        </>
-                    )}
-                </Container>
-                <MemberGateContainer>
-                    {!isUploadExpired && (
-                        <RoundVideoUploadList
-                            electionState={currentElection?.electionState}
-                        />
-                    )}
-                </MemberGateContainer>
-            </div>
-        </SideNavLayout>
-    );
+  return (
+    <SideNavLayout title="Election video upload service">
+      <div className="divide-y">
+        <Container>
+          <Heading size={1}>Election video upload service</Heading>
+        </Container>
+        <Container className="space-y-6 pb-5">
+          {isUploadExpired ? (
+            <div>Election is complete and upload videos time is expired.</div>
+          ) : (
+            <>
+              <Text>
+                Election video files are typically large and require many
+                minutes to upload completely. Do not close this tab during the
+                upload. A confirmation will be displayed when your upload is
+                complete.
+              </Text>
+              <Text>
+                Be patient, and remember you have 2 weeks from the beginning of
+                the election to complete your election video uploads.
+              </Text>
+            </>
+          )}
+        </Container>
+        <MemberGateContainer>
+          {!isUploadExpired && (
+            <RoundVideoUploadList
+              electionState={currentElection?.electionState}
+            />
+          )}
+        </MemberGateContainer>
+      </div>
+    </SideNavLayout>
+  );
 };
 
 export default RoundVideoUploadPage;
 
 const RoundVideoUploadList = ({ electionState }: { electionState: string }) => {
-    const [ualAccount] = useUALAccount();
-    const {
-        data: currentMemberElectionVotingData,
-        isLoading: isLoadingCurrentMemberElectionVotingData,
-        isError: isErrorCurrentMemberElectionVotingData,
-    } = useCurrentMemberElectionVotingData(ualAccount?.accountName);
-    const [videoSubmissionPhase, setVideoSubmissionPhase] = useState<
-        VideoSubmissionPhase | undefined
-    >(undefined);
-    const [uploadCompleteMessage, setUploadCompleteMessage] = useState({
-        roundIndex: 0,
-        message: "",
-    });
-    const [uploadErrorMessage, setUploadErrorMessage] = useState({
-        roundIndex: 0,
-        message: "",
-    });
+  const [ualAccount] = useUALAccount();
+  const {
+    data: currentMemberElectionVotingData,
+    isLoading: isLoadingCurrentMemberElectionVotingData,
+    isError: isErrorCurrentMemberElectionVotingData
+  } = useCurrentMemberElectionVotingData(ualAccount?.accountName);
+  const [videoSubmissionPhase, setVideoSubmissionPhase] = useState<
+    VideoSubmissionPhase | undefined
+  >(undefined);
+  const [uploadCompleteMessage, setUploadCompleteMessage] = useState({
+    roundIndex: 0,
+    message: ""
+  });
+  const [uploadErrorMessage, setUploadErrorMessage] = useState({
+    roundIndex: 0,
+    message: ""
+  });
 
-    if (isLoadingCurrentMemberElectionVotingData) {
-        return <LoaderSection />;
-    } else if (isErrorCurrentMemberElectionVotingData) {
-        return <ErrorLoadingElection />;
-    }
+  if (isLoadingCurrentMemberElectionVotingData) {
+    return <LoaderSection />;
+  } else if (isErrorCurrentMemberElectionVotingData) {
+    return <ErrorLoadingElection />;
+  }
 
-    if (!currentMemberElectionVotingData?.votes.length) {
-        return (
-            <Container>
-                <Text>
-                    It appears you haven't participated in any election round.
-                    Nothing to upload.
-                </Text>
-            </Container>
-        );
-    }
+  if (!currentMemberElectionVotingData?.votes.length) {
+    return (
+      <Container>
+        <Text>
+          It appears you haven't participated in any election round. Nothing to
+          upload.
+        </Text>
+      </Container>
+    );
+  }
 
-    const resetErrorMessage = () => {
-        setUploadErrorMessage({
-            roundIndex: 0,
-            message: "",
-        });
-    };
+  const resetErrorMessage = () => {
+    setUploadErrorMessage({
+      roundIndex: 0,
+      message: ""
+    });
+  };
 
-    const submitElectionRoundVideo = (roundIndex: number) => async (
-        videoFile: File
-    ) => {
-        resetErrorMessage();
-        try {
-            setVideoSubmissionPhase("uploading");
-            const videoHash = await uploadToIpfs(videoFile);
+  const submitElectionRoundVideo = (roundIndex: number) => async (
+    videoFile: File
+  ) => {
+    resetErrorMessage();
+    try {
+      setVideoSubmissionPhase("uploading");
+      const videoHash = await uploadToIpfs(videoFile);
 
-            const authorizerAccount = ualAccount.accountName;
-            const transaction = setElectionRoundVideo(
-                authorizerAccount,
-                roundIndex,
-                videoHash
-            );
-            console.info(transaction);
-            setVideoSubmissionPhase("signing");
-            const signedTrx = await ualAccount.signTransaction(transaction, {
-                broadcast: false,
-                expireSeconds: 1 * 60 * 60, // 1 hour (max expiration)
-            });
-            console.info("electvideo trx", signedTrx);
+      const authorizerAccount = ualAccount.accountName;
+      const transaction = setElectionRoundVideo(
+        authorizerAccount,
+        roundIndex,
+        videoHash
+      );
+      console.info(transaction);
+      setVideoSubmissionPhase("signing");
+      const signedTrx = await ualAccount.signTransaction(transaction, {
+        broadcast: false,
+        expireSeconds: 1 * 60 * 60 // 1 hour (max expiration)
+      });
+      console.info("electvideo trx", signedTrx);
 
-            setVideoSubmissionPhase("finishing");
-            await uploadIpfsFileWithTransaction(
-                signedTrx,
-                videoHash,
-                videoFile
-            );
+      setVideoSubmissionPhase("finishing");
+      await uploadIpfsFileWithTransaction(signedTrx, videoHash, videoFile);
 
-            setVideoSubmissionPhase(undefined);
-            setUploadCompleteMessage({
-                roundIndex,
-                message: "Election video uploaded successfully!",
-            });
-        } catch (error) {
-            onError(error as Error, "Error uploading election round video");
-            setVideoSubmissionPhase(undefined);
-            setUploadErrorMessage({
-                roundIndex,
-                message:
-                    "There was an error uploading your video. Please try again.",
-            });
-        }
-    };
+      setVideoSubmissionPhase(undefined);
+      setUploadCompleteMessage({
+        roundIndex,
+        message: "Election video uploaded successfully!"
+      });
+    } catch (error) {
+      onError(error as Error, "Error uploading election round video");
+      setVideoSubmissionPhase(undefined);
+      setUploadErrorMessage({
+        roundIndex,
+        message: "There was an error uploading your video. Please try again."
+      });
+    }
+  };
 
-    return (
-        <>
-            {currentMemberElectionVotingData.votes.map((vote) => {
-                return (
-                    <div key={`video-round-${vote.roundIndex}`}>
-                        <Expander
-                            header={
-                                <Header
-                                    isOngoing={
-                                        vote.votingStarted &&
-                                        !vote.votingFinished
-                                    }
-                                    roundIndex={vote.roundIndex}
-                                    winner={vote.winner}
-                                    roundStartTime={vote.votingBegin}
-                                    roundEndTime={vote.votingEnd}
-                                />
-                            }
-                            startExpanded
-                            type="inactive"
-                        >
-                            <Container>
-                                <VideoSubmissionFormAndPreview
-                                    uid={vote.roundIndex}
-                                    video={vote.video}
-                                    onSubmit={submitElectionRoundVideo(
-                                        vote.roundIndex
-                                    )}
-                                    disableByElectionState={
-                                        electionState !==
-                                            ElectionStatus.Final &&
-                                        electionState !==
-                                            ElectionStatus.Registration
-                                    }
-                                    submissionPhase={videoSubmissionPhase}
-                                    submitButtonIcon={
-                                        <RiVideoUploadLine
-                                            size={18}
-                                            className="mr-2"
-                                        />
-                                    }
-                                    submitButtonText="Upload meeting video"
-                                    title="Upload your election video recording."
-                                    subtitle=""
-                                    action="electvideo"
-                                    uploadErrorMessage={
-                                        uploadErrorMessage.roundIndex ===
-                                        vote.roundIndex
-                                            ? uploadErrorMessage.message
-                                            : undefined
-                                    }
-                                    uploadCompleteMessage={
-                                        uploadCompleteMessage.roundIndex ===
-                                        vote.roundIndex
-                                            ? uploadCompleteMessage.message
-                                            : undefined
-                                    }
-                                />
-                            </Container>
-                        </Expander>
-                    </div>
-                );
-            })}
-        </>
-    );
+  return (
+    <>
+      {currentMemberElectionVotingData.votes.map((vote) => {
+        return (
+          <div key={`video-round-${vote.roundIndex}`}>
+            <Expander
+              header={
+                <Header
+                  isOngoing={vote.votingStarted && !vote.votingFinished}
+                  roundIndex={vote.roundIndex}
+                  winner={vote.winner}
+                  roundStartTime={vote.votingBegin}
+                  roundEndTime={vote.votingEnd}
+                />
+              }
+              startExpanded
+              type="inactive"
+            >
+              <Container>
+                <VideoSubmissionFormAndPreview
+                  uid={vote.roundIndex}
+                  video={vote.video}
+                  onSubmit={submitElectionRoundVideo(vote.roundIndex)}
+                  disableByElectionState={
+                    electionState !== ElectionStatus.Final &&
+                    electionState !== ElectionStatus.Registration
+                  }
+                  submissionPhase={videoSubmissionPhase}
+                  submitButtonIcon={
+                    <RiVideoUploadLine size={18} className="mr-2" />
+                  }
+                  submitButtonText="Upload meeting video"
+                  title="Upload your election video recording."
+                  subtitle=""
+                  action="electvideo"
+                  uploadErrorMessage={
+                    uploadErrorMessage.roundIndex === vote.roundIndex
+                      ? uploadErrorMessage.message
+                      : undefined
+                  }
+                  uploadCompleteMessage={
+                    uploadCompleteMessage.roundIndex === vote.roundIndex
+                      ? uploadCompleteMessage.message
+                      : undefined
+                  }
+                />
+              </Container>
+            </Expander>
+          </div>
+        );
+      })}
+    </>
+  );
 };
 
 const LoaderSection = () => (
-    <Container>
-        <Loader />
-    </Container>
+  <Container>
+    <Loader />
+  </Container>
 );
 
 interface HeaderProps {
-    isOngoing: boolean;
-    roundIndex: number;
-    winner?: MemberNFT;
-    roundStartTime?: dayjs.Dayjs;
-    roundEndTime?: dayjs.Dayjs;
+  isOngoing: boolean;
+  roundIndex: number;
+  winner?: MemberNFT;
+  roundStartTime?: dayjs.Dayjs;
+  roundEndTime?: dayjs.Dayjs;
 }
 
 const Header = ({
-    isOngoing,
-    roundIndex,
-    winner,
-    roundStartTime,
-    roundEndTime,
+  isOngoing,
+  roundIndex,
+  winner,
+  roundStartTime,
+  roundEndTime
 }: HeaderProps) => {
-    const subText =
-        winner && isValidDelegate(winner.account)
-            ? `Delegate: ${winner.name}`
-            : roundStartTime && roundEndTime
-            ? `${roundStartTime
-                  .utc()
-                  .format("LT")} - ${roundEndTime.utc().format("LT")} UTC`
-            : "Consensus not achieved";
+  const subText =
+    winner && isValidDelegate(winner.account)
+      ? `Delegate: ${winner.name}`
+      : roundStartTime && roundEndTime
+      ? `${roundStartTime.utc().format("LT")} - ${roundEndTime
+          .utc()
+          .format("LT")} UTC`
+      : "Consensus not achieved";
 
-    return (
-        <RoundHeader
-            isRoundActive={isOngoing}
-            headlineComponent={
-                <Text size="sm" className="font-semibold">
-                    Round {roundIndex + 1} {!isOngoing && "completed"}
-                </Text>
-            }
-            sublineComponent={
-                <Text size="sm" className="tracking-tight">
-                    {subText}
-                </Text>
-            }
-        />
-    );
+  return (
+    <RoundHeader
+      isRoundActive={isOngoing}
+      headlineComponent={
+        <Text size="sm" className="font-semibold">
+          Round {roundIndex + 1} {!isOngoing && "completed"}
+        </Text>
+      }
+      sublineComponent={
+        <Text size="sm" className="tracking-tight">
+          {subText}
+        </Text>
+      }
+    />
+  );
 };
diff --git a/packages/webapp/src/pages/election/stats.tsx b/packages/webapp/src/pages/election/stats.tsx
index cb0359fc6..c7bd07b91 100644
--- a/packages/webapp/src/pages/election/stats.tsx
+++ b/packages/webapp/src/pages/election/stats.tsx
@@ -1,22 +1,22 @@
 import React from "react";
 
 import {
-    RoundBasicQueryData,
-    RoundGroupQueryData,
-    RoundWithGroupQueryData,
-    SideNavLayout,
-    useCountdown,
-    useCurrentGlobalElectionData,
+  RoundBasicQueryData,
+  RoundGroupQueryData,
+  RoundWithGroupQueryData,
+  SideNavLayout,
+  useCountdown,
+  useCurrentGlobalElectionData
 } from "_app";
 import { Container, Heading, Loader, Expander, Text } from "_app/ui";
 import {
-    Avatars,
-    DelegateChip,
-    ErrorLoadingElection,
-    RoundStage,
-    useRoundStageTimes,
-    VoteData,
-    VotingMemberChip,
+  Avatars,
+  DelegateChip,
+  ErrorLoadingElection,
+  RoundStage,
+  useRoundStageTimes,
+  VoteData,
+  VotingMemberChip
 } from "elections";
 import { MembersGrid } from "members";
 import { MemberNFT } from "nfts/interfaces";
@@ -24,287 +24,272 @@ import { RoundHeader } from "elections/components/ongoing-election-components";
 import { ConsensometerBlocks } from "elections/components/ongoing-election-components/ongoing-round/round-info/consensometer";
 
 export const ElectionStatsPage = () => {
-    const {
-        data: globalElectionData,
-        isLoading: isLoading,
-        isError: isError,
-    } = useCurrentGlobalElectionData();
+  const {
+    data: globalElectionData,
+    isLoading: isLoading,
+    isError: isError
+  } = useCurrentGlobalElectionData();
 
-    return (
-        <SideNavLayout title="Election Stats">
-            <div className="divide-y">
-                <Container>
-                    <Heading size={1}>Election</Heading>
-                </Container>
-                {isLoading ? (
-                    <Container>
-                        <Loader />
-                    </Container>
-                ) : isError || !globalElectionData ? (
-                    <ErrorLoadingElection />
-                ) : (
-                    <>
-                        <Container darkBg className="flex flex-col sm:flex-row">
-                            <div className="flex-1 flex flex-col justify-center">
-                                <Heading size={2}>All results</Heading>
-                                <Text>
-                                    {globalElectionData.time.format("LL")}
-                                </Text>
-                            </div>
-                            <Avatars showAll className="flex-1" />
-                        </Container>
-                        {globalElectionData.rounds.map((round) => (
-                            <RoundSegment
-                                key={`election-round-${round.roundIndex}`}
-                                round={round}
-                            />
-                        ))}
-                    </>
-                )}
-            </div>
-        </SideNavLayout>
-    );
+  return (
+    <SideNavLayout title="Election Stats">
+      <div className="divide-y">
+        <Container>
+          <Heading size={1}>Election</Heading>
+        </Container>
+        {isLoading ? (
+          <Container>
+            <Loader />
+          </Container>
+        ) : isError || !globalElectionData ? (
+          <ErrorLoadingElection />
+        ) : (
+          <>
+            <Container darkBg className="flex flex-col sm:flex-row">
+              <div className="flex-1 flex flex-col justify-center">
+                <Heading size={2}>All results</Heading>
+                <Text>{globalElectionData.time.format("LL")}</Text>
+              </div>
+              <Avatars showAll className="flex-1" />
+            </Container>
+            {globalElectionData.rounds.map((round) => (
+              <RoundSegment
+                key={`election-round-${round.roundIndex}`}
+                round={round}
+              />
+            ))}
+          </>
+        )}
+      </div>
+    </SideNavLayout>
+  );
 };
 
 export default ElectionStatsPage;
 
 interface RoundSegmentProps {
-    round: RoundWithGroupQueryData;
+  round: RoundWithGroupQueryData;
 }
 
 const RoundSegment = ({ round }: RoundSegmentProps) => {
-    return (
-        <Expander
-            header={<GlobalRoundHeader round={round} />}
-            showContentDivider
-        >
-            <div className="divide-y">
-                {round.groups.map((group, i) => (
-                    <GroupSegment
-                        key={`election-round-${round.roundIndex}-group-${i}`}
-                        group={group}
-                        groupIndex={i}
-                        isFinished={round.votingFinished}
-                        isChiefDelegateGroup={round.numGroups === 1}
-                    />
-                ))}
-            </div>
-        </Expander>
-    );
+  return (
+    <Expander header={<GlobalRoundHeader round={round} />} showContentDivider>
+      <div className="divide-y">
+        {round.groups.map((group, i) => (
+          <GroupSegment
+            key={`election-round-${round.roundIndex}-group-${i}`}
+            group={group}
+            groupIndex={i}
+            isFinished={round.votingFinished}
+            isChiefDelegateGroup={round.numGroups === 1}
+          />
+        ))}
+      </div>
+    </Expander>
+  );
 };
 
 interface GlobalRoundHeaderProps {
-    round: RoundBasicQueryData;
+  round: RoundBasicQueryData;
 }
 
 const GlobalRoundHeader = ({ round }: GlobalRoundHeaderProps) => {
-    const { stage, currentStageEndTime } = useRoundStageTimes(
-        round.votingBegin,
-        round.votingEnd
-    );
+  const { stage, currentStageEndTime } = useRoundStageTimes(
+    round.votingBegin,
+    round.votingEnd
+  );
 
-    const { hmmss } = useCountdown({ endTime: currentStageEndTime.toDate() });
-    const roundNum = round.roundIndex + 1;
+  const { hmmss } = useCountdown({ endTime: currentStageEndTime.toDate() });
+  const roundNum = round.roundIndex + 1;
 
-    const isChiefDelegateRound = round.numGroups === 1;
-    const roundTitle = isChiefDelegateRound
-        ? "Chief Delegates"
-        : `Round ${roundNum}`;
+  const isChiefDelegateRound = round.numGroups === 1;
+  const roundTitle = isChiefDelegateRound
+    ? "Chief Delegates"
+    : `Round ${roundNum}`;
 
-    const roundStatusLabel = () => {
-        if (isChiefDelegateRound) {
-            return round.resultsAvailable ? "" : "elected";
-        } else if (round.resultsAvailable) {
-            return <>completed</>;
-        }
-        switch (stage) {
-            case RoundStage.PreMeeting:
-                return (
-                    <>
-                        starts in: <span className="font-normal">{hmmss}</span>
-                    </>
-                );
-            case RoundStage.PostMeeting:
-                return (
-                    <>
-                        finalizes in:{" "}
-                        <span className="font-normal">{hmmss}</span>
-                    </>
-                );
-            case RoundStage.Complete:
-                return <>completed</>;
-            default:
-                return <>in progress</>;
-        }
-    };
+  const roundStatusLabel = () => {
+    if (isChiefDelegateRound) {
+      return round.resultsAvailable ? "" : "elected";
+    } else if (round.resultsAvailable) {
+      return <>completed</>;
+    }
+    switch (stage) {
+      case RoundStage.PreMeeting:
+        return (
+          <>
+            starts in: <span className="font-normal">{hmmss}</span>
+          </>
+        );
+      case RoundStage.PostMeeting:
+        return (
+          <>
+            finalizes in: <span className="font-normal">{hmmss}</span>
+          </>
+        );
+      case RoundStage.Complete:
+        return <>completed</>;
+      default:
+        return <>in progress</>;
+    }
+  };
 
-    const subText = `${round.votingBegin.utc().format("LT")} - ${round.votingEnd.utc().format("LT")} UTC`;
+  const subText = `${round.votingBegin
+    .utc()
+    .format("LT")} - ${round.votingEnd.utc().format("LT")} UTC`;
 
-    return (
-        <RoundHeader
-            isRoundActive={stage !== RoundStage.Complete}
-            headlineComponent={
-                <Text size="sm" className="font-semibold">
-                    {roundTitle} {roundStatusLabel()}
-                </Text>
-            }
-            sublineComponent={
-                <Text size="sm" className="tracking-tight">
-                    {subText}
-                </Text>
-            }
-        />
-    );
+  return (
+    <RoundHeader
+      isRoundActive={stage !== RoundStage.Complete}
+      headlineComponent={
+        <Text size="sm" className="font-semibold">
+          {roundTitle} {roundStatusLabel()}
+        </Text>
+      }
+      sublineComponent={
+        <Text size="sm" className="tracking-tight">
+          {subText}
+        </Text>
+      }
+    />
+  );
 };
 
 interface GroupSegmentProps {
-    group: RoundGroupQueryData;
-    groupIndex: number;
-    isFinished: boolean;
-    isChiefDelegateGroup?: boolean;
+  group: RoundGroupQueryData;
+  groupIndex: number;
+  isFinished: boolean;
+  isChiefDelegateGroup?: boolean;
 }
 
 interface GroupMembersStats {
-    [key: string]: {
-        receivedVotes: number;
-        votedFor?: string;
-        video?: string;
-        isDelegate: boolean;
-    };
+  [key: string]: {
+    receivedVotes: number;
+    votedFor?: string;
+    video?: string;
+    isDelegate: boolean;
+  };
 }
 
 const GroupSegment = ({
-    group,
-    groupIndex,
-    isFinished,
-    isChiefDelegateGroup,
+  group,
+  groupIndex,
+  isFinished,
+  isChiefDelegateGroup
 }: GroupSegmentProps) => {
-    // TODO: revisit this, unfortunately the MembersGrid only accepts MemberData,
-    // even though we don't need it to display the required summarized member
-    // chip data
-    const members: MemberNFT[] = group.votes.map((vote) => vote.voter);
+  // TODO: revisit this, unfortunately the MembersGrid only accepts MemberData,
+  // even though we don't need it to display the required summarized member
+  // chip data
+  const members: MemberNFT[] = group.votes.map((vote) => vote.voter);
 
-    const membersStats = group.votes.reduce((membersVotingMap, vote) => {
-        membersVotingMap[vote.voter.account] = {
-            receivedVotes: 0,
-            votedFor: vote.candidate?.name,
-            video: vote.video,
-            isDelegate: group.winner?.account === vote.voter.account,
-        };
-        return membersVotingMap;
-    }, {} as GroupMembersStats);
+  const membersStats = group.votes.reduce((membersVotingMap, vote) => {
+    membersVotingMap[vote.voter.account] = {
+      receivedVotes: 0,
+      votedFor: vote.candidate?.name,
+      video: vote.video,
+      isDelegate: group.winner?.account === vote.voter.account
+    };
+    return membersVotingMap;
+  }, {} as GroupMembersStats);
 
-    group.votes
-        .filter((vote) => vote.candidate)
-        .forEach(
-            (vote) => (membersStats[vote.candidate!.account].receivedVotes += 1)
-        );
+  group.votes
+    .filter((vote) => vote.candidate)
+    .forEach(
+      (vote) => (membersStats[vote.candidate!.account].receivedVotes += 1)
+    );
 
-    return isChiefDelegateGroup ? (
-        <ChiefDelegateGroup
-            members={members}
-            groupMembersStats={membersStats}
-            isFinished={isFinished}
+  return isChiefDelegateGroup ? (
+    <ChiefDelegateGroup
+      members={members}
+      groupMembersStats={membersStats}
+      isFinished={isFinished}
+    />
+  ) : (
+    <RegularGroup
+      header={
+        <GroupHeader
+          groupIndex={groupIndex}
+          group={group}
+          isFinished={isFinished}
         />
-    ) : (
-        <RegularGroup
-            header={
-                <GroupHeader
-                    groupIndex={groupIndex}
-                    group={group}
-                    isFinished={isFinished}
-                />
-            }
-            members={members}
-            groupMembersStats={membersStats}
-            isFinished={isFinished}
-        />
-    );
+      }
+      members={members}
+      groupMembersStats={membersStats}
+      isFinished={isFinished}
+    />
+  );
 };
 
 interface GroupProps {
-    members: MemberNFT[];
-    isFinished: boolean;
-    groupMembersStats: GroupMembersStats;
-    header?: React.ReactNode;
+  members: MemberNFT[];
+  isFinished: boolean;
+  groupMembersStats: GroupMembersStats;
+  header?: React.ReactNode;
 }
 
 const RegularGroup = ({ members, groupMembersStats, header }: GroupProps) => {
-    return (
-        <Expander header={header} type="inactive">
-            <MembersGrid members={members} maxCols={2}>
-                {(member: MemberNFT) => {
-                    return (
-                        <VotingMemberChip
-                            key={`voting-member-${member.account}`}
-                            member={member}
-                            votesReceived={
-                                groupMembersStats[member.account].receivedVotes
-                            }
-                            electionVideoCid={
-                                groupMembersStats[member.account].video
-                            }
-                            votingFor={
-                                groupMembersStats[member.account].votedFor
-                            }
-                            isDelegate={
-                                groupMembersStats[member.account].isDelegate
-                            }
-                        />
-                    );
-                }}
-            </MembersGrid>
-        </Expander>
-    );
+  return (
+    <Expander header={header} type="inactive">
+      <MembersGrid members={members} maxCols={2}>
+        {(member: MemberNFT) => {
+          return (
+            <VotingMemberChip
+              key={`voting-member-${member.account}`}
+              member={member}
+              votesReceived={groupMembersStats[member.account].receivedVotes}
+              electionVideoCid={groupMembersStats[member.account].video}
+              votingFor={groupMembersStats[member.account].votedFor}
+              isDelegate={groupMembersStats[member.account].isDelegate}
+            />
+          );
+        }}
+      </MembersGrid>
+    </Expander>
+  );
 };
 
 const ChiefDelegateGroup = ({
-    members,
-    groupMembersStats,
-    isFinished,
+  members,
+  groupMembersStats,
+  isFinished
 }: GroupProps) => {
-    return (
-        <MembersGrid members={members}>
-            {(member: MemberNFT) => {
-                const delegateTitle =
-                    isFinished && groupMembersStats[member.account].isDelegate
-                        ? "Head Chief"
-                        : "Chief Delegate";
-                return (
-                    <DelegateChip
-                        key={`${member.account}-chief-delegate`}
-                        member={member}
-                        delegateTitle={delegateTitle}
-                        electionVideoCid={
-                            groupMembersStats[member.account].video
-                        }
-                    />
-                );
-            }}
-        </MembersGrid>
-    );
+  return (
+    <MembersGrid members={members}>
+      {(member: MemberNFT) => {
+        const delegateTitle =
+          isFinished && groupMembersStats[member.account].isDelegate
+            ? "Head Chief"
+            : "Chief Delegate";
+        return (
+          <DelegateChip
+            key={`${member.account}-chief-delegate`}
+            member={member}
+            delegateTitle={delegateTitle}
+            electionVideoCid={groupMembersStats[member.account].video}
+          />
+        );
+      }}
+    </MembersGrid>
+  );
 };
 
 const GroupHeader = ({ group, groupIndex, isFinished }: GroupSegmentProps) => {
-    const consensusData = group.votes.map((groupVotes) => ({
-        member: groupVotes.voter.account,
-        round: groupIndex,
-        index: 0,
-        candidate: groupVotes.candidate?.account,
-    })) as VoteData[];
+  const consensusData = group.votes.map((groupVotes) => ({
+    member: groupVotes.voter.account,
+    round: groupIndex,
+    index: 0,
+    candidate: groupVotes.candidate?.account
+  })) as VoteData[];
 
-    const groupLabel =
-        group.winner?.name || (isFinished ? "[no consensus]" : "");
+  const groupLabel = group.winner?.name || (isFinished ? "[no consensus]" : "");
 
-    return (
-        <div className="flex w-full items-center pr-4 sm:pr-8">
-            <Text className="w-20 xs:w-24 flex-grow sm:flex-grow-0">
-                Group {groupIndex + 1}
-            </Text>
-            <div className="flex flex-1 flex-col sm:flex-row items-end sm:items-center justify-end sm:justify-between">
-                <Text className="mb-1 sm:mb-0">{groupLabel}</Text>
-                <ConsensometerBlocks voteData={consensusData} />
-            </div>
-        </div>
-    );
+  return (
+    <div className="flex w-full items-center pr-4 sm:pr-8">
+      <Text className="w-20 xs:w-24 flex-grow sm:flex-grow-0">
+        Group {groupIndex + 1}
+      </Text>
+      <div className="flex flex-1 flex-col sm:flex-row items-end sm:items-center justify-end sm:justify-between">
+        <Text className="mb-1 sm:mb-0">{groupLabel}</Text>
+        <ConsensometerBlocks voteData={consensusData} />
+      </div>
+    </div>
+  );
 };

From 9f01a1d24598639b7c47969b27f79c2cee6fbfac Mon Sep 17 00:00:00 2001
From: Angelo CG <angelocas13_8@hotmail.com>
Date: Fri, 31 Mar 2023 13:56:30 -0600
Subject: [PATCH 05/12] fix(webapp): fixed all dates format

---
 .../src/pages/election/round-video-upload.tsx | 494 +++++++++---------
 packages/webapp/src/pages/election/stats.tsx  | 481 +++++++++--------
 2 files changed, 507 insertions(+), 468 deletions(-)

diff --git a/packages/webapp/src/pages/election/round-video-upload.tsx b/packages/webapp/src/pages/election/round-video-upload.tsx
index 70701d7e2..48d7c8cc1 100644
--- a/packages/webapp/src/pages/election/round-video-upload.tsx
+++ b/packages/webapp/src/pages/election/round-video-upload.tsx
@@ -3,279 +3,301 @@ import { RiVideoUploadLine } from "react-icons/ri";
 import dayjs from "dayjs";
 
 import {
-  SideNavLayout,
-  isValidDelegate,
-  onError,
-  uploadIpfsFileWithTransaction,
-  uploadToIpfs,
-  useCurrentElection,
-  useUALAccount,
-  useElectionState,
-  useCurrentMemberElectionVotingData
+    SideNavLayout,
+    isValidDelegate,
+    onError,
+    uploadIpfsFileWithTransaction,
+    uploadToIpfs,
+    useCurrentElection,
+    useUALAccount,
+    useElectionState,
+    useCurrentMemberElectionVotingData,
 } from "_app";
 import {
-  Container,
-  Text,
-  Expander,
-  Heading,
-  Loader,
-  VideoSubmissionFormAndPreview,
-  VideoSubmissionPhase
+    Container,
+    Text,
+    Expander,
+    Heading,
+    Loader,
+    VideoSubmissionFormAndPreview,
+    VideoSubmissionPhase,
 } from "_app/ui";
 import {
-  ElectionStatus,
-  ErrorLoadingElection,
-  setElectionRoundVideo
+    ElectionStatus,
+    ErrorLoadingElection,
+    setElectionRoundVideo,
 } from "elections";
 import { RoundHeader } from "elections/components/ongoing-election-components";
 import { MemberGateContainer } from "members";
 import { MemberNFT } from "nfts/interfaces";
 
 export const RoundVideoUploadPage = () => {
-  const {
-    data: currentElection,
-    isLoading: isLoadingElection,
-    isError: isErrorElection
-  } = useCurrentElection();
-  const {
-    data: electionState,
-    isLoading: isLoadingElectionState,
-    isError: isErrorElectionState
-  } = useElectionState();
+    const {
+        data: currentElection,
+        isLoading: isLoadingElection,
+        isError: isErrorElection,
+    } = useCurrentElection();
+    const {
+        data: electionState,
+        isLoading: isLoadingElectionState,
+        isError: isErrorElectionState,
+    } = useElectionState();
 
-  const isLoading = isLoadingElection || isLoadingElectionState;
-  const isError = isErrorElection || isErrorElectionState;
+    const isLoading = isLoadingElection || isLoadingElectionState;
+    const isError = isErrorElection || isErrorElectionState;
 
-  if (isLoading) return <LoaderSection />;
-  if (isError || !currentElection) return <ErrorLoadingElection />;
+    if (isLoading) return <LoaderSection />;
+    if (isError || !currentElection) return <ErrorLoadingElection />;
 
-  const uploadLimitTime = electionState
-    ? dayjs(electionState.last_election_time + "Z").add(2, "weeks")
-    : dayjs().add(1, "day");
+    const uploadLimitTime = electionState
+        ? dayjs(electionState.last_election_time + "Z").add(2, "weeks")
+        : dayjs().add(1, "day");
 
-  const isUploadExpired =
-    dayjs().isAfter(uploadLimitTime) &&
-    currentElection?.electionState === ElectionStatus.Registration;
+    const isUploadExpired =
+        dayjs().isAfter(uploadLimitTime) &&
+        currentElection?.electionState === ElectionStatus.Registration;
 
-  return (
-    <SideNavLayout title="Election video upload service">
-      <div className="divide-y">
-        <Container>
-          <Heading size={1}>Election video upload service</Heading>
-        </Container>
-        <Container className="space-y-6 pb-5">
-          {isUploadExpired ? (
-            <div>Election is complete and upload videos time is expired.</div>
-          ) : (
-            <>
-              <Text>
-                Election video files are typically large and require many
-                minutes to upload completely. Do not close this tab during the
-                upload. A confirmation will be displayed when your upload is
-                complete.
-              </Text>
-              <Text>
-                Be patient, and remember you have 2 weeks from the beginning of
-                the election to complete your election video uploads.
-              </Text>
-            </>
-          )}
-        </Container>
-        <MemberGateContainer>
-          {!isUploadExpired && (
-            <RoundVideoUploadList
-              electionState={currentElection?.electionState}
-            />
-          )}
-        </MemberGateContainer>
-      </div>
-    </SideNavLayout>
-  );
+    return (
+        <SideNavLayout title="Election video upload service">
+            <div className="divide-y">
+                <Container>
+                    <Heading size={1}>Election video upload service</Heading>
+                </Container>
+                <Container className="space-y-6 pb-5">
+                    {isUploadExpired ? (
+                        <div>
+                            Election is complete and upload videos time is
+                            expired.
+                        </div>
+                    ) : (
+                        <>
+                            <Text>
+                                Election video files are typically large and
+                                require many minutes to upload completely. Do
+                                not close this tab during the upload. A
+                                confirmation will be displayed when your upload
+                                is complete.
+                            </Text>
+                            <Text>
+                                Be patient, and remember you have 2 weeks from
+                                the beginning of the election to complete your
+                                election video uploads.
+                            </Text>
+                        </>
+                    )}
+                </Container>
+                <MemberGateContainer>
+                    {!isUploadExpired && (
+                        <RoundVideoUploadList
+                            electionState={currentElection?.electionState}
+                        />
+                    )}
+                </MemberGateContainer>
+            </div>
+        </SideNavLayout>
+    );
 };
 
 export default RoundVideoUploadPage;
 
 const RoundVideoUploadList = ({ electionState }: { electionState: string }) => {
-  const [ualAccount] = useUALAccount();
-  const {
-    data: currentMemberElectionVotingData,
-    isLoading: isLoadingCurrentMemberElectionVotingData,
-    isError: isErrorCurrentMemberElectionVotingData
-  } = useCurrentMemberElectionVotingData(ualAccount?.accountName);
-  const [videoSubmissionPhase, setVideoSubmissionPhase] = useState<
-    VideoSubmissionPhase | undefined
-  >(undefined);
-  const [uploadCompleteMessage, setUploadCompleteMessage] = useState({
-    roundIndex: 0,
-    message: ""
-  });
-  const [uploadErrorMessage, setUploadErrorMessage] = useState({
-    roundIndex: 0,
-    message: ""
-  });
+    const [ualAccount] = useUALAccount();
+    const {
+        data: currentMemberElectionVotingData,
+        isLoading: isLoadingCurrentMemberElectionVotingData,
+        isError: isErrorCurrentMemberElectionVotingData,
+    } = useCurrentMemberElectionVotingData(ualAccount?.accountName);
+    const [videoSubmissionPhase, setVideoSubmissionPhase] = useState<
+        VideoSubmissionPhase | undefined
+    >(undefined);
+    const [uploadCompleteMessage, setUploadCompleteMessage] = useState({
+        roundIndex: 0,
+        message: "",
+    });
+    const [uploadErrorMessage, setUploadErrorMessage] = useState({
+        roundIndex: 0,
+        message: "",
+    });
 
-  if (isLoadingCurrentMemberElectionVotingData) {
-    return <LoaderSection />;
-  } else if (isErrorCurrentMemberElectionVotingData) {
-    return <ErrorLoadingElection />;
-  }
+    if (isLoadingCurrentMemberElectionVotingData) {
+        return <LoaderSection />;
+    } else if (isErrorCurrentMemberElectionVotingData) {
+        return <ErrorLoadingElection />;
+    }
 
-  if (!currentMemberElectionVotingData?.votes.length) {
-    return (
-      <Container>
-        <Text>
-          It appears you haven't participated in any election round. Nothing to
-          upload.
-        </Text>
-      </Container>
-    );
-  }
+    if (!currentMemberElectionVotingData?.votes.length) {
+        return (
+            <Container>
+                <Text>
+                    It appears you haven't participated in any election round.
+                    Nothing to upload.
+                </Text>
+            </Container>
+        );
+    }
 
-  const resetErrorMessage = () => {
-    setUploadErrorMessage({
-      roundIndex: 0,
-      message: ""
-    });
-  };
+    const resetErrorMessage = () => {
+        setUploadErrorMessage({
+            roundIndex: 0,
+            message: "",
+        });
+    };
 
-  const submitElectionRoundVideo = (roundIndex: number) => async (
-    videoFile: File
-  ) => {
-    resetErrorMessage();
-    try {
-      setVideoSubmissionPhase("uploading");
-      const videoHash = await uploadToIpfs(videoFile);
+    const submitElectionRoundVideo = (roundIndex: number) => async (
+        videoFile: File
+    ) => {
+        resetErrorMessage();
+        try {
+            setVideoSubmissionPhase("uploading");
+            const videoHash = await uploadToIpfs(videoFile);
 
-      const authorizerAccount = ualAccount.accountName;
-      const transaction = setElectionRoundVideo(
-        authorizerAccount,
-        roundIndex,
-        videoHash
-      );
-      console.info(transaction);
-      setVideoSubmissionPhase("signing");
-      const signedTrx = await ualAccount.signTransaction(transaction, {
-        broadcast: false,
-        expireSeconds: 1 * 60 * 60 // 1 hour (max expiration)
-      });
-      console.info("electvideo trx", signedTrx);
+            const authorizerAccount = ualAccount.accountName;
+            const transaction = setElectionRoundVideo(
+                authorizerAccount,
+                roundIndex,
+                videoHash
+            );
+            console.info(transaction);
+            setVideoSubmissionPhase("signing");
+            const signedTrx = await ualAccount.signTransaction(transaction, {
+                broadcast: false,
+                expireSeconds: 1 * 60 * 60, // 1 hour (max expiration)
+            });
+            console.info("electvideo trx", signedTrx);
 
-      setVideoSubmissionPhase("finishing");
-      await uploadIpfsFileWithTransaction(signedTrx, videoHash, videoFile);
+            setVideoSubmissionPhase("finishing");
+            await uploadIpfsFileWithTransaction(
+                signedTrx,
+                videoHash,
+                videoFile
+            );
 
-      setVideoSubmissionPhase(undefined);
-      setUploadCompleteMessage({
-        roundIndex,
-        message: "Election video uploaded successfully!"
-      });
-    } catch (error) {
-      onError(error as Error, "Error uploading election round video");
-      setVideoSubmissionPhase(undefined);
-      setUploadErrorMessage({
-        roundIndex,
-        message: "There was an error uploading your video. Please try again."
-      });
-    }
-  };
+            setVideoSubmissionPhase(undefined);
+            setUploadCompleteMessage({
+                roundIndex,
+                message: "Election video uploaded successfully!",
+            });
+        } catch (error) {
+            onError(error as Error, "Error uploading election round video");
+            setVideoSubmissionPhase(undefined);
+            setUploadErrorMessage({
+                roundIndex,
+                message:
+                    "There was an error uploading your video. Please try again.",
+            });
+        }
+    };
 
-  return (
-    <>
-      {currentMemberElectionVotingData.votes.map((vote) => {
-        return (
-          <div key={`video-round-${vote.roundIndex}`}>
-            <Expander
-              header={
-                <Header
-                  isOngoing={vote.votingStarted && !vote.votingFinished}
-                  roundIndex={vote.roundIndex}
-                  winner={vote.winner}
-                  roundStartTime={vote.votingBegin}
-                  roundEndTime={vote.votingEnd}
-                />
-              }
-              startExpanded
-              type="inactive"
-            >
-              <Container>
-                <VideoSubmissionFormAndPreview
-                  uid={vote.roundIndex}
-                  video={vote.video}
-                  onSubmit={submitElectionRoundVideo(vote.roundIndex)}
-                  disableByElectionState={
-                    electionState !== ElectionStatus.Final &&
-                    electionState !== ElectionStatus.Registration
-                  }
-                  submissionPhase={videoSubmissionPhase}
-                  submitButtonIcon={
-                    <RiVideoUploadLine size={18} className="mr-2" />
-                  }
-                  submitButtonText="Upload meeting video"
-                  title="Upload your election video recording."
-                  subtitle=""
-                  action="electvideo"
-                  uploadErrorMessage={
-                    uploadErrorMessage.roundIndex === vote.roundIndex
-                      ? uploadErrorMessage.message
-                      : undefined
-                  }
-                  uploadCompleteMessage={
-                    uploadCompleteMessage.roundIndex === vote.roundIndex
-                      ? uploadCompleteMessage.message
-                      : undefined
-                  }
-                />
-              </Container>
-            </Expander>
-          </div>
-        );
-      })}
-    </>
-  );
+    return (
+        <>
+            {currentMemberElectionVotingData.votes.map((vote) => {
+                return (
+                    <div key={`video-round-${vote.roundIndex}`}>
+                        <Expander
+                            header={
+                                <Header
+                                    isOngoing={
+                                        vote.votingStarted &&
+                                        !vote.votingFinished
+                                    }
+                                    roundIndex={vote.roundIndex}
+                                    winner={vote.winner}
+                                    roundStartTime={vote.votingBegin}
+                                    roundEndTime={vote.votingEnd}
+                                />
+                            }
+                            startExpanded
+                            type="inactive"
+                        >
+                            <Container>
+                                <VideoSubmissionFormAndPreview
+                                    uid={vote.roundIndex}
+                                    video={vote.video}
+                                    onSubmit={submitElectionRoundVideo(
+                                        vote.roundIndex
+                                    )}
+                                    disableByElectionState={
+                                        electionState !==
+                                            ElectionStatus.Final &&
+                                        electionState !==
+                                            ElectionStatus.Registration
+                                    }
+                                    submissionPhase={videoSubmissionPhase}
+                                    submitButtonIcon={
+                                        <RiVideoUploadLine
+                                            size={18}
+                                            className="mr-2"
+                                        />
+                                    }
+                                    submitButtonText="Upload meeting video"
+                                    title="Upload your election video recording."
+                                    subtitle=""
+                                    action="electvideo"
+                                    uploadErrorMessage={
+                                        uploadErrorMessage.roundIndex ===
+                                        vote.roundIndex
+                                            ? uploadErrorMessage.message
+                                            : undefined
+                                    }
+                                    uploadCompleteMessage={
+                                        uploadCompleteMessage.roundIndex ===
+                                        vote.roundIndex
+                                            ? uploadCompleteMessage.message
+                                            : undefined
+                                    }
+                                />
+                            </Container>
+                        </Expander>
+                    </div>
+                );
+            })}
+        </>
+    );
 };
 
 const LoaderSection = () => (
-  <Container>
-    <Loader />
-  </Container>
+    <Container>
+        <Loader />
+    </Container>
 );
 
 interface HeaderProps {
-  isOngoing: boolean;
-  roundIndex: number;
-  winner?: MemberNFT;
-  roundStartTime?: dayjs.Dayjs;
-  roundEndTime?: dayjs.Dayjs;
+    isOngoing: boolean;
+    roundIndex: number;
+    winner?: MemberNFT;
+    roundStartTime?: dayjs.Dayjs;
+    roundEndTime?: dayjs.Dayjs;
 }
 
 const Header = ({
-  isOngoing,
-  roundIndex,
-  winner,
-  roundStartTime,
-  roundEndTime
+    isOngoing,
+    roundIndex,
+    winner,
+    roundStartTime,
+    roundEndTime,
 }: HeaderProps) => {
-  const subText =
-    winner && isValidDelegate(winner.account)
-      ? `Delegate: ${winner.name}`
-      : roundStartTime && roundEndTime
-      ? `${roundStartTime.utc().format("LT")} - ${roundEndTime
-          .utc()
-          .format("LT")} UTC`
-      : "Consensus not achieved";
+    const subText =
+        winner && isValidDelegate(winner.account)
+            ? `Delegate: ${winner.name}`
+            : roundStartTime && roundEndTime
+            ? `${roundStartTime
+                  .utc()
+                  .format("LT")} - ${roundEndTime.utc().format("LT")} UTC`
+            : "Consensus not achieved";
 
-  return (
-    <RoundHeader
-      isRoundActive={isOngoing}
-      headlineComponent={
-        <Text size="sm" className="font-semibold">
-          Round {roundIndex + 1} {!isOngoing && "completed"}
-        </Text>
-      }
-      sublineComponent={
-        <Text size="sm" className="tracking-tight">
-          {subText}
-        </Text>
-      }
-    />
-  );
+    return (
+        <RoundHeader
+            isRoundActive={isOngoing}
+            headlineComponent={
+                <Text size="sm" className="font-semibold">
+                    Round {roundIndex + 1} {!isOngoing && "completed"}
+                </Text>
+            }
+            sublineComponent={
+                <Text size="sm" className="tracking-tight">
+                    {subText}
+                </Text>
+            }
+        />
+    );
 };
diff --git a/packages/webapp/src/pages/election/stats.tsx b/packages/webapp/src/pages/election/stats.tsx
index c7bd07b91..f70e1c4b8 100644
--- a/packages/webapp/src/pages/election/stats.tsx
+++ b/packages/webapp/src/pages/election/stats.tsx
@@ -1,22 +1,22 @@
 import React from "react";
 
 import {
-  RoundBasicQueryData,
-  RoundGroupQueryData,
-  RoundWithGroupQueryData,
-  SideNavLayout,
-  useCountdown,
-  useCurrentGlobalElectionData
+    RoundBasicQueryData,
+    RoundGroupQueryData,
+    RoundWithGroupQueryData,
+    SideNavLayout,
+    useCountdown,
+    useCurrentGlobalElectionData,
 } from "_app";
 import { Container, Heading, Loader, Expander, Text } from "_app/ui";
 import {
-  Avatars,
-  DelegateChip,
-  ErrorLoadingElection,
-  RoundStage,
-  useRoundStageTimes,
-  VoteData,
-  VotingMemberChip
+    Avatars,
+    DelegateChip,
+    ErrorLoadingElection,
+    RoundStage,
+    useRoundStageTimes,
+    VoteData,
+    VotingMemberChip,
 } from "elections";
 import { MembersGrid } from "members";
 import { MemberNFT } from "nfts/interfaces";
@@ -24,272 +24,289 @@ import { RoundHeader } from "elections/components/ongoing-election-components";
 import { ConsensometerBlocks } from "elections/components/ongoing-election-components/ongoing-round/round-info/consensometer";
 
 export const ElectionStatsPage = () => {
-  const {
-    data: globalElectionData,
-    isLoading: isLoading,
-    isError: isError
-  } = useCurrentGlobalElectionData();
+    const {
+        data: globalElectionData,
+        isLoading: isLoading,
+        isError: isError,
+    } = useCurrentGlobalElectionData();
 
-  return (
-    <SideNavLayout title="Election Stats">
-      <div className="divide-y">
-        <Container>
-          <Heading size={1}>Election</Heading>
-        </Container>
-        {isLoading ? (
-          <Container>
-            <Loader />
-          </Container>
-        ) : isError || !globalElectionData ? (
-          <ErrorLoadingElection />
-        ) : (
-          <>
-            <Container darkBg className="flex flex-col sm:flex-row">
-              <div className="flex-1 flex flex-col justify-center">
-                <Heading size={2}>All results</Heading>
-                <Text>{globalElectionData.time.format("LL")}</Text>
-              </div>
-              <Avatars showAll className="flex-1" />
-            </Container>
-            {globalElectionData.rounds.map((round) => (
-              <RoundSegment
-                key={`election-round-${round.roundIndex}`}
-                round={round}
-              />
-            ))}
-          </>
-        )}
-      </div>
-    </SideNavLayout>
-  );
+    return (
+        <SideNavLayout title="Election Stats">
+            <div className="divide-y">
+                <Container>
+                    <Heading size={1}>Election</Heading>
+                </Container>
+                {isLoading ? (
+                    <Container>
+                        <Loader />
+                    </Container>
+                ) : isError || !globalElectionData ? (
+                    <ErrorLoadingElection />
+                ) : (
+                    <>
+                        <Container darkBg className="flex flex-col sm:flex-row">
+                            <div className="flex-1 flex flex-col justify-center">
+                                <Heading size={2}>All results</Heading>
+                                <Text>
+                                    {globalElectionData.time.format("LL")}
+                                </Text>
+                            </div>
+                            <Avatars showAll className="flex-1" />
+                        </Container>
+                        {globalElectionData.rounds.map((round) => (
+                            <RoundSegment
+                                key={`election-round-${round.roundIndex}`}
+                                round={round}
+                            />
+                        ))}
+                    </>
+                )}
+            </div>
+        </SideNavLayout>
+    );
 };
 
 export default ElectionStatsPage;
 
 interface RoundSegmentProps {
-  round: RoundWithGroupQueryData;
+    round: RoundWithGroupQueryData;
 }
 
 const RoundSegment = ({ round }: RoundSegmentProps) => {
-  return (
-    <Expander header={<GlobalRoundHeader round={round} />} showContentDivider>
-      <div className="divide-y">
-        {round.groups.map((group, i) => (
-          <GroupSegment
-            key={`election-round-${round.roundIndex}-group-${i}`}
-            group={group}
-            groupIndex={i}
-            isFinished={round.votingFinished}
-            isChiefDelegateGroup={round.numGroups === 1}
-          />
-        ))}
-      </div>
-    </Expander>
-  );
+    return (
+        <Expander
+            header={<GlobalRoundHeader round={round} />}
+            showContentDivider
+        >
+            <div className="divide-y">
+                {round.groups.map((group, i) => (
+                    <GroupSegment
+                        key={`election-round-${round.roundIndex}-group-${i}`}
+                        group={group}
+                        groupIndex={i}
+                        isFinished={round.votingFinished}
+                        isChiefDelegateGroup={round.numGroups === 1}
+                    />
+                ))}
+            </div>
+        </Expander>
+    );
 };
 
 interface GlobalRoundHeaderProps {
-  round: RoundBasicQueryData;
+    round: RoundBasicQueryData;
 }
 
 const GlobalRoundHeader = ({ round }: GlobalRoundHeaderProps) => {
-  const { stage, currentStageEndTime } = useRoundStageTimes(
-    round.votingBegin,
-    round.votingEnd
-  );
+    const { stage, currentStageEndTime } = useRoundStageTimes(
+        round.votingBegin,
+        round.votingEnd
+    );
 
-  const { hmmss } = useCountdown({ endTime: currentStageEndTime.toDate() });
-  const roundNum = round.roundIndex + 1;
+    const { hmmss } = useCountdown({ endTime: currentStageEndTime.toDate() });
+    const roundNum = round.roundIndex + 1;
 
-  const isChiefDelegateRound = round.numGroups === 1;
-  const roundTitle = isChiefDelegateRound
-    ? "Chief Delegates"
-    : `Round ${roundNum}`;
+    const isChiefDelegateRound = round.numGroups === 1;
+    const roundTitle = isChiefDelegateRound
+        ? "Chief Delegates"
+        : `Round ${roundNum}`;
 
-  const roundStatusLabel = () => {
-    if (isChiefDelegateRound) {
-      return round.resultsAvailable ? "" : "elected";
-    } else if (round.resultsAvailable) {
-      return <>completed</>;
-    }
-    switch (stage) {
-      case RoundStage.PreMeeting:
-        return (
-          <>
-            starts in: <span className="font-normal">{hmmss}</span>
-          </>
-        );
-      case RoundStage.PostMeeting:
-        return (
-          <>
-            finalizes in: <span className="font-normal">{hmmss}</span>
-          </>
-        );
-      case RoundStage.Complete:
-        return <>completed</>;
-      default:
-        return <>in progress</>;
-    }
-  };
+    const roundStatusLabel = () => {
+        if (isChiefDelegateRound) {
+            return round.resultsAvailable ? "" : "elected";
+        } else if (round.resultsAvailable) {
+            return <>completed</>;
+        }
+        switch (stage) {
+            case RoundStage.PreMeeting:
+                return (
+                    <>
+                        starts in: <span className="font-normal">{hmmss}</span>
+                    </>
+                );
+            case RoundStage.PostMeeting:
+                return (
+                    <>
+                        finalizes in:{" "}
+                        <span className="font-normal">{hmmss}</span>
+                    </>
+                );
+            case RoundStage.Complete:
+                return <>completed</>;
+            default:
+                return <>in progress</>;
+        }
+    };
 
-  const subText = `${round.votingBegin
-    .utc()
-    .format("LT")} - ${round.votingEnd.utc().format("LT")} UTC`;
+    const subText = `${round.votingBegin
+        .utc()
+        .format("LT")} - ${round.votingEnd.utc().format("LT")} UTC`;
 
-  return (
-    <RoundHeader
-      isRoundActive={stage !== RoundStage.Complete}
-      headlineComponent={
-        <Text size="sm" className="font-semibold">
-          {roundTitle} {roundStatusLabel()}
-        </Text>
-      }
-      sublineComponent={
-        <Text size="sm" className="tracking-tight">
-          {subText}
-        </Text>
-      }
-    />
-  );
+    return (
+        <RoundHeader
+            isRoundActive={stage !== RoundStage.Complete}
+            headlineComponent={
+                <Text size="sm" className="font-semibold">
+                    {roundTitle} {roundStatusLabel()}
+                </Text>
+            }
+            sublineComponent={
+                <Text size="sm" className="tracking-tight">
+                    {subText}
+                </Text>
+            }
+        />
+    );
 };
 
 interface GroupSegmentProps {
-  group: RoundGroupQueryData;
-  groupIndex: number;
-  isFinished: boolean;
-  isChiefDelegateGroup?: boolean;
+    group: RoundGroupQueryData;
+    groupIndex: number;
+    isFinished: boolean;
+    isChiefDelegateGroup?: boolean;
 }
 
 interface GroupMembersStats {
-  [key: string]: {
-    receivedVotes: number;
-    votedFor?: string;
-    video?: string;
-    isDelegate: boolean;
-  };
+    [key: string]: {
+        receivedVotes: number;
+        votedFor?: string;
+        video?: string;
+        isDelegate: boolean;
+    };
 }
 
 const GroupSegment = ({
-  group,
-  groupIndex,
-  isFinished,
-  isChiefDelegateGroup
+    group,
+    groupIndex,
+    isFinished,
+    isChiefDelegateGroup,
 }: GroupSegmentProps) => {
-  // TODO: revisit this, unfortunately the MembersGrid only accepts MemberData,
-  // even though we don't need it to display the required summarized member
-  // chip data
-  const members: MemberNFT[] = group.votes.map((vote) => vote.voter);
+    // TODO: revisit this, unfortunately the MembersGrid only accepts MemberData,
+    // even though we don't need it to display the required summarized member
+    // chip data
+    const members: MemberNFT[] = group.votes.map((vote) => vote.voter);
 
-  const membersStats = group.votes.reduce((membersVotingMap, vote) => {
-    membersVotingMap[vote.voter.account] = {
-      receivedVotes: 0,
-      votedFor: vote.candidate?.name,
-      video: vote.video,
-      isDelegate: group.winner?.account === vote.voter.account
-    };
-    return membersVotingMap;
-  }, {} as GroupMembersStats);
+    const membersStats = group.votes.reduce((membersVotingMap, vote) => {
+        membersVotingMap[vote.voter.account] = {
+            receivedVotes: 0,
+            votedFor: vote.candidate?.name,
+            video: vote.video,
+            isDelegate: group.winner?.account === vote.voter.account,
+        };
+        return membersVotingMap;
+    }, {} as GroupMembersStats);
 
-  group.votes
-    .filter((vote) => vote.candidate)
-    .forEach(
-      (vote) => (membersStats[vote.candidate!.account].receivedVotes += 1)
-    );
+    group.votes
+        .filter((vote) => vote.candidate)
+        .forEach(
+            (vote) => (membersStats[vote.candidate!.account].receivedVotes += 1)
+        );
 
-  return isChiefDelegateGroup ? (
-    <ChiefDelegateGroup
-      members={members}
-      groupMembersStats={membersStats}
-      isFinished={isFinished}
-    />
-  ) : (
-    <RegularGroup
-      header={
-        <GroupHeader
-          groupIndex={groupIndex}
-          group={group}
-          isFinished={isFinished}
+    return isChiefDelegateGroup ? (
+        <ChiefDelegateGroup
+            members={members}
+            groupMembersStats={membersStats}
+            isFinished={isFinished}
         />
-      }
-      members={members}
-      groupMembersStats={membersStats}
-      isFinished={isFinished}
-    />
-  );
+    ) : (
+        <RegularGroup
+            header={
+                <GroupHeader
+                    groupIndex={groupIndex}
+                    group={group}
+                    isFinished={isFinished}
+                />
+            }
+            members={members}
+            groupMembersStats={membersStats}
+            isFinished={isFinished}
+        />
+    );
 };
 
 interface GroupProps {
-  members: MemberNFT[];
-  isFinished: boolean;
-  groupMembersStats: GroupMembersStats;
-  header?: React.ReactNode;
+    members: MemberNFT[];
+    isFinished: boolean;
+    groupMembersStats: GroupMembersStats;
+    header?: React.ReactNode;
 }
 
 const RegularGroup = ({ members, groupMembersStats, header }: GroupProps) => {
-  return (
-    <Expander header={header} type="inactive">
-      <MembersGrid members={members} maxCols={2}>
-        {(member: MemberNFT) => {
-          return (
-            <VotingMemberChip
-              key={`voting-member-${member.account}`}
-              member={member}
-              votesReceived={groupMembersStats[member.account].receivedVotes}
-              electionVideoCid={groupMembersStats[member.account].video}
-              votingFor={groupMembersStats[member.account].votedFor}
-              isDelegate={groupMembersStats[member.account].isDelegate}
-            />
-          );
-        }}
-      </MembersGrid>
-    </Expander>
-  );
+    return (
+        <Expander header={header} type="inactive">
+            <MembersGrid members={members} maxCols={2}>
+                {(member: MemberNFT) => {
+                    return (
+                        <VotingMemberChip
+                            key={`voting-member-${member.account}`}
+                            member={member}
+                            votesReceived={
+                                groupMembersStats[member.account].receivedVotes
+                            }
+                            electionVideoCid={
+                                groupMembersStats[member.account].video
+                            }
+                            votingFor={
+                                groupMembersStats[member.account].votedFor
+                            }
+                            isDelegate={
+                                groupMembersStats[member.account].isDelegate
+                            }
+                        />
+                    );
+                }}
+            </MembersGrid>
+        </Expander>
+    );
 };
 
 const ChiefDelegateGroup = ({
-  members,
-  groupMembersStats,
-  isFinished
+    members,
+    groupMembersStats,
+    isFinished,
 }: GroupProps) => {
-  return (
-    <MembersGrid members={members}>
-      {(member: MemberNFT) => {
-        const delegateTitle =
-          isFinished && groupMembersStats[member.account].isDelegate
-            ? "Head Chief"
-            : "Chief Delegate";
-        return (
-          <DelegateChip
-            key={`${member.account}-chief-delegate`}
-            member={member}
-            delegateTitle={delegateTitle}
-            electionVideoCid={groupMembersStats[member.account].video}
-          />
-        );
-      }}
-    </MembersGrid>
-  );
+    return (
+        <MembersGrid members={members}>
+            {(member: MemberNFT) => {
+                const delegateTitle =
+                    isFinished && groupMembersStats[member.account].isDelegate
+                        ? "Head Chief"
+                        : "Chief Delegate";
+                return (
+                    <DelegateChip
+                        key={`${member.account}-chief-delegate`}
+                        member={member}
+                        delegateTitle={delegateTitle}
+                        electionVideoCid={
+                            groupMembersStats[member.account].video
+                        }
+                    />
+                );
+            }}
+        </MembersGrid>
+    );
 };
 
 const GroupHeader = ({ group, groupIndex, isFinished }: GroupSegmentProps) => {
-  const consensusData = group.votes.map((groupVotes) => ({
-    member: groupVotes.voter.account,
-    round: groupIndex,
-    index: 0,
-    candidate: groupVotes.candidate?.account
-  })) as VoteData[];
+    const consensusData = group.votes.map((groupVotes) => ({
+        member: groupVotes.voter.account,
+        round: groupIndex,
+        index: 0,
+        candidate: groupVotes.candidate?.account,
+    })) as VoteData[];
 
-  const groupLabel = group.winner?.name || (isFinished ? "[no consensus]" : "");
+    const groupLabel =
+        group.winner?.name || (isFinished ? "[no consensus]" : "");
 
-  return (
-    <div className="flex w-full items-center pr-4 sm:pr-8">
-      <Text className="w-20 xs:w-24 flex-grow sm:flex-grow-0">
-        Group {groupIndex + 1}
-      </Text>
-      <div className="flex flex-1 flex-col sm:flex-row items-end sm:items-center justify-end sm:justify-between">
-        <Text className="mb-1 sm:mb-0">{groupLabel}</Text>
-        <ConsensometerBlocks voteData={consensusData} />
-      </div>
-    </div>
-  );
+    return (
+        <div className="flex w-full items-center pr-4 sm:pr-8">
+            <Text className="w-20 xs:w-24 flex-grow sm:flex-grow-0">
+                Group {groupIndex + 1}
+            </Text>
+            <div className="flex flex-1 flex-col sm:flex-row items-end sm:items-center justify-end sm:justify-between">
+                <Text className="mb-1 sm:mb-0">{groupLabel}</Text>
+                <ConsensometerBlocks voteData={consensusData} />
+            </div>
+        </div>
+    );
 };

From 1a6fc6a8a253cae608d2694a03bdf0551d6af689 Mon Sep 17 00:00:00 2001
From: Angelo CG <angelocas13_8@hotmail.com>
Date: Fri, 31 Mar 2023 13:58:23 -0600
Subject: [PATCH 06/12] fix(webapp): fixed all dates format

---
 packages/webapp/src/pages/election/stats.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/pages/election/stats.tsx b/packages/webapp/src/pages/election/stats.tsx
index f70e1c4b8..f2deee041 100644
--- a/packages/webapp/src/pages/election/stats.tsx
+++ b/packages/webapp/src/pages/election/stats.tsx
@@ -138,9 +138,9 @@ const GlobalRoundHeader = ({ round }: GlobalRoundHeaderProps) => {
         }
     };
 
-    const subText = `${round.votingBegin
+    const subText = `${round.votingBegin.utc().format("LT")} - ${round.votingEnd
         .utc()
-        .format("LT")} - ${round.votingEnd.utc().format("LT")} UTC`;
+        .format("LT")} UTC`;
 
     return (
         <RoundHeader

From bdaaa033c0d4f1e734d45068e8e63e9d7e7ce6cd Mon Sep 17 00:00:00 2001
From: Angelo CG <angelocas13_8@hotmail.com>
Date: Fri, 31 Mar 2023 14:01:22 -0600
Subject: [PATCH 07/12] fix(webapp): fixed all dates format

---
 packages/webapp/src/pages/election/round-video-upload.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/webapp/src/pages/election/round-video-upload.tsx b/packages/webapp/src/pages/election/round-video-upload.tsx
index 48d7c8cc1..83ba09601 100644
--- a/packages/webapp/src/pages/election/round-video-upload.tsx
+++ b/packages/webapp/src/pages/election/round-video-upload.tsx
@@ -185,7 +185,7 @@ const RoundVideoUploadList = ({ electionState }: { electionState: string }) => {
                 message:
                     "There was an error uploading your video. Please try again.",
             });
-        }
+            }
     };
 
     return (
@@ -280,9 +280,8 @@ const Header = ({
         winner && isValidDelegate(winner.account)
             ? `Delegate: ${winner.name}`
             : roundStartTime && roundEndTime
-            ? `${roundStartTime
-                  .utc()
-                  .format("LT")} - ${roundEndTime.utc().format("LT")} UTC`
+            ? `${roundStartTime.utc().format("LT")} - ${roundEndTime
+                .utc().format("LT")} UTC`
             : "Consensus not achieved";
 
     return (

From 690e32ff2847ed522552ea9debf4e1e599d04065 Mon Sep 17 00:00:00 2001
From: Angelo CG <angelocas13_8@hotmail.com>
Date: Fri, 31 Mar 2023 14:02:14 -0600
Subject: [PATCH 08/12] fix(webapp): fixed all dates format

---
 packages/webapp/src/pages/election/round-video-upload.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webapp/src/pages/election/round-video-upload.tsx b/packages/webapp/src/pages/election/round-video-upload.tsx
index 83ba09601..d80342400 100644
--- a/packages/webapp/src/pages/election/round-video-upload.tsx
+++ b/packages/webapp/src/pages/election/round-video-upload.tsx
@@ -281,7 +281,7 @@ const Header = ({
             ? `Delegate: ${winner.name}`
             : roundStartTime && roundEndTime
             ? `${roundStartTime.utc().format("LT")} - ${roundEndTime
-                .utc().format("LT")} UTC`
+              .utc().format("LT")} UTC`
             : "Consensus not achieved";
 
     return (

From 63b7d16891ac1f8f0e9162d9f5478c0d5a28136a Mon Sep 17 00:00:00 2001
From: Angelo CG <angelocas13_8@hotmail.com>
Date: Fri, 31 Mar 2023 14:03:59 -0600
Subject: [PATCH 09/12] fix(webapp): fixed all dates format

---
 packages/webapp/src/pages/election/round-video-upload.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webapp/src/pages/election/round-video-upload.tsx b/packages/webapp/src/pages/election/round-video-upload.tsx
index d80342400..83ba09601 100644
--- a/packages/webapp/src/pages/election/round-video-upload.tsx
+++ b/packages/webapp/src/pages/election/round-video-upload.tsx
@@ -281,7 +281,7 @@ const Header = ({
             ? `Delegate: ${winner.name}`
             : roundStartTime && roundEndTime
             ? `${roundStartTime.utc().format("LT")} - ${roundEndTime
-              .utc().format("LT")} UTC`
+                .utc().format("LT")} UTC`
             : "Consensus not achieved";
 
     return (

From 9c8c3d790ecac54b0540e5ace05f0b38ac70dcf9 Mon Sep 17 00:00:00 2001
From: Angelo CG <angelocas13_8@hotmail.com>
Date: Fri, 31 Mar 2023 14:04:53 -0600
Subject: [PATCH 10/12] fix(webapp): fixed all dates format

---
 packages/webapp/src/pages/election/round-video-upload.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/webapp/src/pages/election/round-video-upload.tsx b/packages/webapp/src/pages/election/round-video-upload.tsx
index 83ba09601..dbcc45690 100644
--- a/packages/webapp/src/pages/election/round-video-upload.tsx
+++ b/packages/webapp/src/pages/election/round-video-upload.tsx
@@ -280,8 +280,7 @@ const Header = ({
         winner && isValidDelegate(winner.account)
             ? `Delegate: ${winner.name}`
             : roundStartTime && roundEndTime
-            ? `${roundStartTime.utc().format("LT")} - ${roundEndTime
-                .utc().format("LT")} UTC`
+            ? `${roundStartTime.utc().format("LT")} - ${roundEndTime.utc().format("LT")} UTC`
             : "Consensus not achieved";
 
     return (

From f74f210c1502a215c3f89c8f2b90fe976820a578 Mon Sep 17 00:00:00 2001
From: Angelo CG <angelocas13_8@hotmail.com>
Date: Fri, 31 Mar 2023 14:06:57 -0600
Subject: [PATCH 11/12] fix(webapp): fixed all dates format

---
 packages/webapp/src/pages/election/round-video-upload.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/pages/election/round-video-upload.tsx b/packages/webapp/src/pages/election/round-video-upload.tsx
index dbcc45690..25300fbda 100644
--- a/packages/webapp/src/pages/election/round-video-upload.tsx
+++ b/packages/webapp/src/pages/election/round-video-upload.tsx
@@ -280,7 +280,9 @@ const Header = ({
         winner && isValidDelegate(winner.account)
             ? `Delegate: ${winner.name}`
             : roundStartTime && roundEndTime
-            ? `${roundStartTime.utc().format("LT")} - ${roundEndTime.utc().format("LT")} UTC`
+            ? `${roundStartTime.utc().format("LT")} - ${roundEndTime
+                .utc()
+                .format("LT")} UTC`
             : "Consensus not achieved";
 
     return (

From fa576a85c8d0794dc3ec06ebe77f52e844adf98a Mon Sep 17 00:00:00 2001
From: Angelo CG <angelocas13_8@hotmail.com>
Date: Fri, 31 Mar 2023 14:07:56 -0600
Subject: [PATCH 12/12] fix(webapp): fixed all dates format

---
 packages/webapp/src/pages/election/round-video-upload.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/pages/election/round-video-upload.tsx b/packages/webapp/src/pages/election/round-video-upload.tsx
index 25300fbda..50cf1b95c 100644
--- a/packages/webapp/src/pages/election/round-video-upload.tsx
+++ b/packages/webapp/src/pages/election/round-video-upload.tsx
@@ -281,8 +281,8 @@ const Header = ({
             ? `Delegate: ${winner.name}`
             : roundStartTime && roundEndTime
             ? `${roundStartTime.utc().format("LT")} - ${roundEndTime
-                .utc()
-                .format("LT")} UTC`
+                  .utc()
+                  .format("LT")} UTC`
             : "Consensus not achieved";
 
     return (