From 94f3aa8a018f116867727c6c8629d6075b13e4ce Mon Sep 17 00:00:00 2001
From: Pedro Luis Frias Favero <Pedro.Luis.Frias.Favero@es.ey.com>
Date: Thu, 27 Jun 2024 12:58:55 +0200
Subject: [PATCH] Adding UX/UI Improvements

---
 lotto-ui/ui/components/Countdown.tsx  | 57 +++++++++++++++++++++++++++
 lotto-ui/ui/pages/admin/index.tsx     | 19 ++++++++-
 lotto-ui/ui/pages/dashboard/index.tsx | 30 ++++++++++++++
 3 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 lotto-ui/ui/components/Countdown.tsx

diff --git a/lotto-ui/ui/components/Countdown.tsx b/lotto-ui/ui/components/Countdown.tsx
new file mode 100644
index 0000000..89db367
--- /dev/null
+++ b/lotto-ui/ui/components/Countdown.tsx
@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from "react";
+
+interface CountdownProps {
+  targetDate: string;
+}
+
+const Countdown: React.FC<CountdownProps> = ({ targetDate }) => {
+  const [timeLeft, setTimeLeft] = useState<{ [key: string]: number }>({});
+
+  const calculateTimeLeft = () => {
+    const difference = +new Date(targetDate) - +new Date();
+    let timeLeft: { [key: string]: number } = {};
+
+    if (difference > 0) {
+      timeLeft = {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / 1000 / 60) % 60),
+        seconds: Math.floor((difference / 1000) % 60),
+      };
+    }
+
+    return timeLeft;
+  };
+
+  useEffect(() => {
+    setTimeLeft(calculateTimeLeft());
+
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetDate]);
+
+  const timerComponents: JSX.Element[] = [];
+
+  Object.keys(timeLeft).forEach((interval) => {
+    if (!timeLeft[interval]) {
+      return;
+    }
+
+    timerComponents.push(
+      <span key={interval}>
+        {timeLeft[interval]} {interval}{" "}
+      </span>
+    );
+  });
+
+  return (
+    <div>
+      {timerComponents.length ? timerComponents : <span>Time's up!</span>}
+    </div>
+  );
+};
+
+export default Countdown;
diff --git a/lotto-ui/ui/pages/admin/index.tsx b/lotto-ui/ui/pages/admin/index.tsx
index c1a1b0f..ebf6f5a 100644
--- a/lotto-ui/ui/pages/admin/index.tsx
+++ b/lotto-ui/ui/pages/admin/index.tsx
@@ -2,8 +2,23 @@ import DefaultLayout from "@/layouts/default";
 import { title } from "@/components/primitives";
 import React from "react";
 import { Card, CardHeader, Spacer, Input, Button } from "@nextui-org/react";
+import dynamic from "next/dynamic";
+
+// Cargar Countdown dinámicamente para evitar errores de hidratación
+const Countdown = dynamic(() => import("../../components/Countdown"), { ssr: false });
+
+const getNextMonday = (): string => {
+  const today = new Date();
+  const nextMonday = new Date(
+    today.setDate(today.getDate() + ((1 + 7 - today.getDay()) % 7))
+  );
+  nextMonday.setHours(23, 59, 59, 999); // Establecer la hora al final del día
+  return nextMonday.toISOString();
+};
+
 
 export default function AdminPage() {
+  const targetDate = getNextMonday();
   return (
     <DefaultLayout>
       <h1 className={`${title()} text-green-500 pb-2`}>
@@ -23,8 +38,8 @@ export default function AdminPage() {
           <CardHeader className="absolute z-10 top-1 flex-col items-start">
             <h4 className="text-white/90 font-medium text-3xl">Countdown</h4>
           </CardHeader>
-          <div className="text-green-500 text-6xl font-bold">
-            10:00 {/* Aquí puedes sustituir 10:00 por la cuenta regresiva real */}
+          <div className="text-green-500 text-2xl font-bold">
+            <Countdown targetDate={targetDate} />
           </div>
         </Card>
         <Card isBlurred className="w-full h-[200px] col-span-12 sm:col-span-12 relative flex justify-center items-center">
diff --git a/lotto-ui/ui/pages/dashboard/index.tsx b/lotto-ui/ui/pages/dashboard/index.tsx
index ef1cf0b..fabbe0c 100644
--- a/lotto-ui/ui/pages/dashboard/index.tsx
+++ b/lotto-ui/ui/pages/dashboard/index.tsx
@@ -2,8 +2,22 @@ import DefaultLayout from "@/layouts/default";
 import { title } from "@/components/primitives";
 import React from "react";
 import { Card, CardHeader, Spacer, Input, Button, Divider } from "@nextui-org/react";
+import dynamic from "next/dynamic";
+
+// Cargar Countdown dinámicamente para evitar errores de hidratación
+const Countdown = dynamic(() => import("../../components/Countdown"), { ssr: false });
+
+const getNextMonday = (): string => {
+  const today = new Date();
+  const nextMonday = new Date(
+    today.setDate(today.getDate() + ((1 + 7 - today.getDay()) % 7))
+  );
+  nextMonday.setHours(23, 59, 59, 999); // Establecer la hora al final del día
+  return nextMonday.toISOString();
+};
 
 export default function DashboardPage() {
+  const targetDate = getNextMonday();
   return (
     <DefaultLayout>
       <h1 className={`${title()} text-green-500 pb-2`}>
@@ -11,6 +25,22 @@ export default function DashboardPage() {
       </h1>
       <Spacer y={12} />
       <div className="w-full gap-2 grid grid-cols-12  px-8">
+      <Card isBlurred className="w-full h-[200px] col-span-12 sm:col-span-6 relative flex justify-center items-center">
+          <CardHeader className="absolute z-10 top-1 flex-col items-start">
+            <h4 className="text-white/90 font-medium text-3xl">Game Week</h4>
+          </CardHeader>
+          <div className="text-green-500 text-6xl font-bold">
+            5 {/* Aquí puedes sustituir 1234 por el ID real */}
+          </div>
+        </Card>
+        <Card isBlurred className="w-full h-[200px] col-span-12 sm:col-span-6 relative flex justify-center items-center">
+          <CardHeader className="absolute z-10 top-1 flex-col items-start">
+            <h4 className="text-white/90 font-medium text-3xl">Countdown</h4>
+          </CardHeader>
+          <div className="text-green-500 text-2xl font-bold">
+            <Countdown targetDate={targetDate} />
+          </div>
+        </Card>
         <Card isBlurred className="w-full h-[200px] col-span-12 sm:col-span-12 relative flex justify-center items-center">
           <CardHeader className="absolute z-10 top-1 flex-col items-start">
             <h4 className="text-white/90 font-medium text-3xl">Lottery Numbers</h4>