1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
"use client";
import { useEffect, useRef, useState } from "react";
import { useSearchParams } from "next/navigation";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { CheckCircle2, AlertTriangle } from "lucide-react";
import { getSupabaseClient } from "@/lib/supabase";
export default function ObrigadoPage() {
const searchParams = useSearchParams();
const rm = searchParams.get("rm") || "";
const name = searchParams.get("nome") || "";
const cpf = searchParams.get("cpf") || "";
const option = searchParams.get("option") || "";
const [countdown, setCountdown] = useState(5);
const [saveStatus, setSaveStatus] = useState<"loading" | "success" | "error">(
"loading"
);
const [errorMessage, setErrorMessage] = useState("");
const hasRun = useRef(false);
useEffect(() => {
if (!rm || !name || !cpf || !option) {
window.location.href = "/";
return;
}
const saveVote = async () => {
try {
const supabase = getSupabaseClient();
const { error } = await supabase.from("votes").insert([
{
rm,
name,
cpf: cpf.replace(/\D/g, ""),
option_voted: option,
},
]);
if (error) {
console.error("Erro ao salvar voto:", error);
setSaveStatus("error");
if (error.code === "23505") {
setErrorMessage(
"Você já votou anteriormente. Cada eleitor pode votar apenas uma vez."
);
} else {
setErrorMessage(
"Ocorreu um erro ao registrar seu voto. Por favor, informe ao responsável."
);
}
return;
}
setSaveStatus("success");
} catch (error) {
console.error("Erro ao salvar voto:", error);
setSaveStatus("error");
setErrorMessage(
"Ocorreu um erro ao registrar seu voto. Por favor, informe ao responsável."
);
}
};
if (!hasRun.current) {
hasRun.current = true;
saveVote();
}
const timer = setInterval(() => {
setCountdown((prev) => {
if (prev <= 1) {
clearInterval(timer);
window.location.href = "/";
return 0;
}
return prev - 1;
});
}, 1000);
return () => clearInterval(timer);
}, [rm, name, cpf, option]);
return (
<div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f5fa] px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md sm:max-w-lg lg:max-w-xl">
<div className="mb-6 flex items-center justify-center">
<div className="flex flex-col items-center">
<div className="mb-2 text-center text-2xl font-bold text-[#004a93] sm:text-3xl lg:text-4xl">
JUSTIÇA ELEITORAL ESTUDANTIL
</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] text-center shadow-lg overflow-hidden">
<CardHeader
className={`${
saveStatus === "error" ? "bg-red-600" : "bg-[#004a93]"
} text-white`}
>
<div className="mx-auto mb-4 rounded-full bg-white p-2">
{saveStatus === "loading" ? (
<div className="h-12 w-12 sm:h-16 sm:w-16 animate-spin rounded-full border-4 border-[#004a93] border-t-transparent"></div>
) : saveStatus === "success" ? (
<CheckCircle2 className="h-12 w-12 sm:h-16 sm:w-16 text-[#009c3b]" />
) : (
<AlertTriangle className="h-12 w-12 sm:h-16 sm:w-16 text-red-600" />
)}
</div>
<CardTitle className="text-lg sm:text-2xl">
{saveStatus === "loading"
? "PROCESSANDO SEU VOTO..."
: saveStatus === "success"
? "VOTO REGISTRADO COM SUCESSO!"
: "ERRO AO REGISTRAR VOTO"}
</CardTitle>
<CardDescription className="text-gray-100">
{saveStatus === "success" ? "FIM" : ""}
</CardDescription>
</CardHeader>
<CardContent className="pt-6 pb-6 rounded-b-lg">
{saveStatus === "loading" ? (
<p className="text-[#004a93] text-sm sm:text-base">
Aguarde enquanto registramos seu voto...
</p>
) : saveStatus === "success" ? (
<>
<p className="text-base sm:text-lg font-bold text-[#004a93]">
Você votou em:{" "}
<span className="text-[#009c3b]">{option}</span>
</p>
<p className="mt-4 text-sm sm:text-base text-[#004a93]">
Obrigado por participar das eleições.
</p>
<p className="mt-4 text-xs sm:text-sm text-[#004a93]">
Retornando à tela inicial em {countdown} segundos...
</p>
</>
) : (
<>
<p className="text-base sm:text-lg font-bold text-red-600">
{errorMessage}
</p>
<p className="mt-4 text-xs sm:text-sm text-[#004a93]">
Retornando à tela inicial em {countdown} segundos...
</p>
</>
)}
</CardContent>
</Card>
<div className="mt-4 flex justify-center">
<div className="text-center text-xs sm:text-sm text-[#004a93]">
© {new Date().getFullYear()} Justiça Eleitoral Estudantil
</div>
</div>
</div>
</div>
);
}
|
