new vote audio and vote list page

3 files changed, 127 insertions, 13 deletions

diff --git a/app/listagem/loading.tsx b/app/listagem/loading.tsx
new file mode 100644
index 0000000..4349ac3
--- /dev/null
+++ b/app/listagem/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null;
+}
diff --git a/app/listagem/page.tsx b/app/listagem/page.tsx
new file mode 100644
index 0000000..10f0bcc
--- /dev/null
+++ b/app/listagem/page.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { getSupabaseClient } from "@/lib/supabase";
+import { useEffect, useState } from "react";
+
+export default function ListVotes() {
+  const [numberVotes, setNumberVotes] = useState<number>();
+  const [sieNumberVotes, setSieNumberVotes] = useState<number>();
+  const [ljNumberVotes, setLjNumberVotes] = useState<number>();
+
+  const [saveStatus, setSaveStatus] = useState<"loading" | "success" | "error">(
+    "loading"
+  );
+  const [errorMessage, setErrorMessage] = useState("");
+
+  useEffect(() => {
+    const listVotes = async () => {
+      const supabase = getSupabaseClient();
+
+      const { data, error } = await supabase.from("votes").select();
+
+      if (error) {
+        console.error("Erro ao procurar votos:", error);
+        setSaveStatus("error");
+
+        setErrorMessage(
+          "Ocorreu um erro ao procurar votos. Por favor, informe ao responsável."
+        );
+        return;
+      }
+
+      setNumberVotes(data.length);
+
+      const sieData = data.filter((vote) => vote.option_voted == "SIE");
+      setSieNumberVotes(sieData.length);
+
+      const ljData = data.filter(
+        (vote) => vote.option_voted == "Liderança Jovem"
+      );
+      setLjNumberVotes(ljData.length);
+    };
+
+    listVotes();
+  });
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f5fa]">
+      <div className="w-full max-w-md">
+        <div className="mb-6 flex items-center justify-center">
+          <div className="flex flex-col items-center">
+            <div className="mb-2 text-center text-3xl font-bold text-[#004a93]">
+              JUSTIÇA ELEITORAL
+            </div>
+            <div className="h-2 w-full bg-gradient-to-r from-[#009c3b] via-[#ffdf00] to-[#002776]"></div>
+          </div>
+        </div>
+
+        <Card className="border-2 border-[#004a93] shadow-lg overflow-hidden">
+          <CardHeader className="bg-[#004a93] text-center text-white">
+            <CardTitle className="text-2xl">VOTOS ATUAIS</CardTitle>
+            <CardDescription className="text-gray-100">
+              CHAPA DO GREMIO ESTUDANTIL
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6 p-6 rounded-b-lg">
+            <div className="grid grid-cols-2 gap-6">
+              <Button
+                className="flex h-40 flex-col items-center justify-center border-2 border-[#004a93] bg-white p-4 text-xl font-bold text-[#004a93] hover:bg-[#e6f0fa]"
+                variant="outline"
+              >
+                <div className="mb-2 text-4xl">{sieNumberVotes}</div>
+                SIE
+              </Button>
+              <Button
+                className="flex h-40 flex-col items-center justify-center border-2 border-[#004a93] bg-white p-4 text-xl font-bold text-[#004a93] hover:bg-[#e6f0fa]"
+                variant="outline"
+              >
+                <div className="mb-2 text-4xl">{ljNumberVotes}</div>
+                Liderança Jovem
+              </Button>
+            </div>
+            <div className="mt-4 text-center text-sm text-[#004a93]">
+              Todos os dados são em tempo real!
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="mt-4 flex justify-center">
+          <div className="text-center text-sm text-[#004a93]">
+            © {new Date().getFullYear()} Justiça Eleitoral Estudantil
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/votar/page.tsx b/app/votar/page.tsx
index 8946f73..62c1bb1 100644
--- a/app/votar/page.tsx
+++ b/app/votar/page.tsx
@@ -19,6 +19,7 @@ export default function VotarPage() {
   const cpf = searchParams.get("cpf") || "";
   const [selectedOption, setSelectedOption] = useState<string | null>(null);
   const [audioContext, setAudioContext] = useState<AudioContext | null>(null);
+  const [audioElement, setAudioElement] = useState<HTMLAudioElement>()
 
   useEffect(() => {
     if (!rm || !nome || !cpf) {
@@ -26,28 +27,34 @@ export default function VotarPage() {
       return;
     }
 
-    setAudioContext(
-      new (window.AudioContext || (window as any).webkitContext)()
-    );
+    // setAudioContext(
+    //   new (window.AudioContext || (window as any).webkitContext)()
+    // );
+
+    const audio = new Audio('/confirma.mp3')
+    setAudioElement(audio)
   }, [rm, nome, cpf, router]);
 
   const handleVote = (option: string) => {
     setSelectedOption(option);
 
-    if (!audioContext) return;
+    if (!audioElement) return;
+    audioElement.play()
+
+    // if (!audioContext) return;
 
-    const oscillator = audioContext.createOscillator();
-    const gainNode = audioContext.createGain();
+    // const oscillator = audioContext.createOscillator();
+    // const gainNode = audioContext.createGain();
 
-    oscillator.type = "sine";
-    oscillator.frequency.setValueAtTime(1000, audioContext.currentTime);
-    gainNode.gain.setValueAtTime(0.5, audioContext.currentTime);
+    // oscillator.type = "sine";
+    // oscillator.frequency.setValueAtTime(1000, audioContext.currentTime);
+    // gainNode.gain.setValueAtTime(0.5, audioContext.currentTime);
 
-    oscillator.connect(gainNode);
-    gainNode.connect(audioContext.destination);
+    // oscillator.connect(gainNode);
+    // gainNode.connect(audioContext.destination);
 
-    oscillator.start();
-    oscillator.stop(audioContext.currentTime + 0.2);
+    // oscillator.start();
+    // oscillator.stop(audioContext.currentTime + 0.2);
 
     setTimeout(() => {
       router.push(