From 4676f272932779861fa032e12f563258ddf09a3e Mon Sep 17 00:00:00 2001
From: Kevin <k.besson@clm.foundation>
Date: Mon, 24 Feb 2025 16:19:37 +0100
Subject: [PATCH] Ajout de la gestion de la session utilisateur et d'un
 composant d'horloge dans le tableau de bord

---
 front/app/page.tsx            | 15 ++++++++++++++-
 front/components/ui/Clock.tsx | 25 +++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 front/components/ui/Clock.tsx

diff --git a/front/app/page.tsx b/front/app/page.tsx
index 7c7a96b..97743b1 100644
--- a/front/app/page.tsx
+++ b/front/app/page.tsx
@@ -4,15 +4,28 @@ import { Podcast } from "@/components/podcast";
 import { CalendarWidget } from "@/components/calendar-widget";
 import { News } from "@/components/news";
 import { Todo } from "@/components/todo";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "./api/auth/[...nextauth]/route";
+import { Clock } from "@/components/ui/Clock";
 
 export const metadata = {
   title: "Enkun - Dashboard",
 };
 
-export default function Page() {
+export default async function Page() {
+  const session = await getServerSession(authOptions);
+
   return (
     <div>
       <div className='container mx-auto p-4'>
+        <div className='flex justify-between items-center align-middle mb-6 alig'>
+          {session?.user && (
+            <h1 className='text-2xl font-bold'>
+              Bienvenue, {session.user.first_name} !
+            </h1>
+          )}
+          <Clock />
+        </div>
         <div className='grid grid-cols-12 gap-4'>
           <div className='col-span-3'>
             <QuoteCard />
diff --git a/front/components/ui/Clock.tsx b/front/components/ui/Clock.tsx
new file mode 100644
index 0000000..719e4be
--- /dev/null
+++ b/front/components/ui/Clock.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+export function Clock() {
+  const [time, setTime] = useState(new Date());
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className='text-4xl text-white'>
+      {time.toLocaleTimeString("fr-FR", {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      })}
+    </div>
+  );
+}