style: ticket UI colors

ifspcbt-devspace · Oct 26, 2024 · 8619753 · 8619753
1 parent 5b44abe
commit 8619753
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/src/app/admin/ticket/check-in/[id]/page.tsx b/src/app/admin/ticket/check-in/[id]/page.tsx
@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 
 export default function Page({ params }: { params: { id: string } }) {
   return (
-    <div className="w-full h-dvh flex flex-col justify-center items-center">
+    <div className="w-full h-dvh flex flex-col justify-center items-center bg-[#000] text-white">
       <Suspense fallback={<Loading />}>
         <TicketUI id={params.id} />
       </Suspense>

diff --git a/src/components/ticket/Ticket.tsx b/src/components/ticket/Ticket.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import {Ticket} from "@/models";
+import {Event, Ticket} from "@/models";
 import "./style.css";
 import {consumeTicket, getTicket} from "@/server-actions/ticket.action";
 import {getUser} from "@/server-actions/user.action";
@@ -9,11 +9,15 @@ import {useRouter} from "next/navigation";
 import {useEffect, useState} from "react";
 import {toast} from "react-toastify";
 import {toastConfig} from "@/constants";
+import {getEvent} from "@/server-actions/event.action";
+import Loading from "@/app/auth/email/confirmation/[token]/loading";
 
 export default function TicketUI({id}: { id: string }) {
   const [ticket, setTicket] = useState<Ticket>();
+  const [event, setEvent] = useState<Event>();
   const [user, setUser] = useState<any>();
   const [loading, setLoading] = useState(false);
+  const [isFetching, setIsFetching] = useState(true);
   const router = useRouter();
   const handleValidate = async () => {
     setLoading(true);
@@ -22,20 +26,33 @@ export default function TicketUI({id}: { id: string }) {
     else toast.success("Ticket validado com sucesso!", toastConfig);
     setLoading(false);
   };
+
   useEffect(() => {
     const fetchTicket = async (id: string) => {
       const resp = await getTicket(id);
       if ("error" in resp) {
+        router.push("/");
         toast.error(resp.error, toastConfig);
         return;
       }
       setTicket(resp);
+
+      const response = await getEvent(resp.event_id);
+      if ("error" in response) {
+        router.push("/");
+        toast.error(response.error, toastConfig);
+        return
+      }
+      setEvent(response);
+
       const respUser = await getUser(resp.user_id);
       if ("error" in respUser) {
+        router.push("/");
         toast.error(respUser.error, toastConfig);
         return;
       }
       setUser(respUser);
+      setIsFetching(false);
     };
     fetchTicket(id);
   }, [router]);
@@ -54,14 +71,19 @@ export default function TicketUI({id}: { id: string }) {
     return age + " anos";
   };
 
-  return (
+  if (isFetching) {
+    return <Loading/>;
+  } else return (
     <>
       {/* desktop */}
       <div className="hidden md:block ticket">
         <div className="hidden ticket-content-wrapper md:flex flex-col justify-between">
           <div className="text-center">
             <span className="font-bold text-3xl">
-              TICKET - IFETÃO (Finais) (28/09)
+              TICKET - {event?.name} ({event?.init_date.toLocaleString("pt-BR", {
+              day: "2-digit",
+              month: "2-digit"
+            })})
             </span>
             <p className="text-base">
               INSTITUTO FEDERAL DE SÃO PAULO - CUBATÃO
@@ -71,6 +93,7 @@ export default function TicketUI({id}: { id: string }) {
           <div className="px-12">
             <p>Nome cadastrado: {user?.name || "Carregando..."}</p>
             <p>Idade: {getAge(user?.birth_date)}</p>
+            <p>Documento: {user?.document_initials}</p>
             <p className="text-green-500 mt-2 text-center">{ticket?.status}</p>
           </div>
           <div className="mx-auto">
@@ -91,7 +114,10 @@ export default function TicketUI({id}: { id: string }) {
         <div className="md:hidden ticket-content-wrapper-vertical flex flex-col justify-between">
           <div className="text-center">
             <span className="font-bold text-3xl">
-              TICKET - IFETÃO (Finais) (28/09)
+              TICKET - {event?.name} ({event?.init_date.toLocaleString("pt-BR", {
+              day: "2-digit",
+              month: "2-digit"
+            })})
             </span>
             <p className="text-base">
               INSTITUTO FEDERAL DE SÃO PAULO - CUBATÃO
@@ -100,7 +126,8 @@ export default function TicketUI({id}: { id: string }) {
 
           <div className="text-center">
             <p>{user?.name || "Carregando..."}</p>
-            <p>Idade: {getAge(user?.birth_date)}</p>
+            <p>{getAge(user?.birth_date)}</p>
+            <p>{user?.document_initials}</p>
             <p className="text-green-500 mt-2">{ticket?.status}</p>
           </div>
           <div className="mx-auto">