refactor: changed graph hover popup, reformated files and removed unused import

nextjs-interface/src/app/dashboard/esp/[espId]/page.tsx

@@ -8,11 +8,9 @@ import { ChartElement } from "@/app/ui/dashboard/ChartElement";
 // import components
 import { DateRangeElement } from "@/app/ui/dashboard/DateRangeElement";
 import { EspMap } from "@/app/ui/plan/espMap";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 
 // import script
-import findIpByName, {
+import {
   calculateAverage,
   GetEspPosition,
   useFetchData,
@@ -62,68 +60,68 @@ export default function Page({ params }: { params: any }) {
   };
 
   return (
-      <div className="flex h-full w-full min-w-[500px] flex-col gap-y-5 pt-2">
-        <div className="flex justify-between text-xl font-bold uppercase">
-          <div>{esp.name}</div>
-          <RenameElement id={params.espId}/>
-        </div>
-        <div className="flex justify-between">
-          <DateRangeElement date={date} setDate={setDate}/>
-        </div>
-        <div className="flex flex-row gap-x-5">
-          <div className="flex w-1/2 flex-col gap-y-3">
-            <p className="text-xl">Last data :</p>
-            <div className="flex flex-row rounded-xl border-2 border-alto-200 p-5">
-              <PieChartTemperature data={temperature}/>
-              <PieChartHumidity data={humidity}/>
-            </div>
-          </div>
-          <div className="flex w-1/2 flex-col gap-y-3">
-            <p className="text-xl">
-              Average data ( From{" "}
-              {date?.from ? format(date.from, "yyyy-MM-dd") : ""} to{" "}
-              {date?.to ? format(date.to, "yyyy-MM-dd") : ""}) :
-            </p>
-            <div className="flex flex-row rounded-xl border-2 border-alto-200 p-5">
-              <PieChartTemperature data={averageTemperature}/>
-              <PieChartHumidity data={averageHumidity}/>
-            </div>
+    <div className="flex h-full w-full min-w-[500px] flex-col gap-y-5 pt-2">
+      <div className="flex justify-between text-xl font-bold uppercase">
+        <div>{esp.name}</div>
+        <RenameElement id={params.espId} />
+      </div>
+      <div className="flex justify-between">
+        <DateRangeElement date={date} setDate={setDate} />
+      </div>
+      <div className="flex flex-row gap-x-5">
+        <div className="flex w-1/2 flex-col gap-y-3">
+          <p className="text-xl">Last data :</p>
+          <div className="flex flex-row rounded-xl border-2 border-alto-200 p-5">
+            <PieChartTemperature data={temperature} />
+            <PieChartHumidity data={humidity} />
           </div>
         </div>
-        <div>
-          <ChartElement data={allData}/>
+        <div className="flex w-1/2 flex-col gap-y-3">
+          <p className="text-xl">
+            Average data ( From{" "}
+            {date?.from ? format(date.from, "yyyy-MM-dd") : ""} to{" "}
+            {date?.to ? format(date.to, "yyyy-MM-dd") : ""}) :
+          </p>
+          <div className="flex flex-row rounded-xl border-2 border-alto-200 p-5">
+            <PieChartTemperature data={averageTemperature} />
+            <PieChartHumidity data={averageHumidity} />
+          </div>
         </div>
-        <div className="flex justify-center rounded-xl border-2 border-alto-200">
-          <svg
-              className="h-[1000px] w-[1000px]"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 100 100"
-          >
-            <g className="downstairs transition-all duration-500 ease-in-out">
-              <path
-                  className="barrier"
-                  d="m 47.9,53.5 8.1,0 0,-3.3 m -44.9,24.7 0,25.1 m 3.1,-25.1 0,25.1 m 3.1,-25.1 0,25.1 m 3.1,-25.1 0,25.1 m 3.2,-25.1 0,25.1 m 3.1,-25.1 0,25.1 m 3.1,-25.1 0,25.1 m 58.2,-1.3 -21.6,0 m 10,-5.5 0,5.5 m -1.7,-5.5 0,5.5 m -1.6,-5.5 0,5.5 m -1.7,-5.5 0,5.5 m -1.6,-5.5 0,5.5 m -1.7,-5.5 0,5.5 m 19.9,-5.5 0,5.5 m -1.7,-5.5 0,5.5 m -1.6,-5.5 0,5.5 m -1.7,-5.5 0,5.5 m -1.6,-5.5 0,5.5 m -1.7,-5.5 0,5.5 M 78,93.2 78,98.7 M 91.8,3.52 91.8,11 m -49.5,37.1 -7.9,0 0,5.4 m 57.4,-7.5 0,6.9 m 2.8,2.9 -6.3,0 0,-2.9 m -17.6,-15.6 0,6.9 m -7.4,-7.4 0,6.9 M 58.7,6.94 58.7,29.9 M 22,41.3 l 7.5,0 M 79,52.9 79,64.4 m -1.7,-11.5 0,11.5 m 5.4,-11.5 -3.7,5.8 3.6,5.7 m -11.9,-5.8 0,5.8 m 1.6,-11.5 0,11.5 M 74,52.9 74,64.4 m 1.7,-11.5 0,11.5 m 7,-5.7 -5.2,0 m -45.9,7.9 0,-5.1 22.8,0 0,5.1 z"
-              />
-              <path
-                  className="wall"
-                  d="m 20.07,36.84 0,-1.81 2.16,0 0,1.81 z m 11.61,0 0,-1.81 -2.16,0 0,1.81 z m 29.31,8.4 2.28,0 0,-1.42 m 0,-6.84 0,-1.43 -20.29,0 0,9.52 m 15.73,-9.58 0,-5.47 m 0,-22.912 0,-5.073 33.06,0 0,2.166 m 0,6.729 0,35.05 3.42,0 0,18.36 -25.08,0 m -9.12,-28.79 0,9.75 -0.57,0.81 m 31.35,18.23 0,29.07 -25.58,0 m -8.11,-44.06 -0.57,0.85 -14.36,0 m -10.95,-5.13 10.78,0 0,4.9 0,3.54 m -2.91,0 7.86,0 0,-3.31 m 43.84,-14.65 -21.09,0 0,1.88 m 0,6.5 0,3.14 3.99,0 0,-11.52 m -44.29,14.48 0,3.48 5.01,0 m 48.97,-0.57 -13.68,0 0,5.7 6.84,0 m 17.67,-5.7 -7.41,0 m -5.07,0 0,11.4 m -21.15,-5.13 0,5.7 1.71,0 1.71,-2.28 0,-9.12 -3.42,0 0,0.57 m 4.63,18.24 0,0.64 m 0,0.64 0,0.64 m 0,0.64 0,0.65 m 0,0.64 0,0.64 m 0,0.64 0,0.64 m 0,0.64 0,0.64 m 0,0.64 0,0.65 m 0,0.64 0,0.64 0,0.64 m -46.75,-41.27 0,6.67 M 11,74.6 l 0,24.37 55.19,0 0,-16.39 -9.59,0 -3.65,-4.56 0,-3.42 -41.95,0 -6.271,-6.27 0,-27.02 17.101,0 m 7.52,0 2.85,0 0,3.76 -0.1,5.02 -5.13,-0.1 0,3.48"
-              />
+      </div>
+      <div>
+        <ChartElement data={allData} />
+      </div>
+      <div className="flex justify-center rounded-xl border-2 border-alto-200">
+        <svg
+          className="h-[1000px] w-[1000px]"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 100 100"
+        >
+          <g className="downstairs transition-all duration-500 ease-in-out">
+            <path
+              className="barrier"
+              d="m 47.9,53.5 8.1,0 0,-3.3 m -44.9,24.7 0,25.1 m 3.1,-25.1 0,25.1 m 3.1,-25.1 0,25.1 m 3.1,-25.1 0,25.1 m 3.2,-25.1 0,25.1 m 3.1,-25.1 0,25.1 m 3.1,-25.1 0,25.1 m 58.2,-1.3 -21.6,0 m 10,-5.5 0,5.5 m -1.7,-5.5 0,5.5 m -1.6,-5.5 0,5.5 m -1.7,-5.5 0,5.5 m -1.6,-5.5 0,5.5 m -1.7,-5.5 0,5.5 m 19.9,-5.5 0,5.5 m -1.7,-5.5 0,5.5 m -1.6,-5.5 0,5.5 m -1.7,-5.5 0,5.5 m -1.6,-5.5 0,5.5 m -1.7,-5.5 0,5.5 M 78,93.2 78,98.7 M 91.8,3.52 91.8,11 m -49.5,37.1 -7.9,0 0,5.4 m 57.4,-7.5 0,6.9 m 2.8,2.9 -6.3,0 0,-2.9 m -17.6,-15.6 0,6.9 m -7.4,-7.4 0,6.9 M 58.7,6.94 58.7,29.9 M 22,41.3 l 7.5,0 M 79,52.9 79,64.4 m -1.7,-11.5 0,11.5 m 5.4,-11.5 -3.7,5.8 3.6,5.7 m -11.9,-5.8 0,5.8 m 1.6,-11.5 0,11.5 M 74,52.9 74,64.4 m 1.7,-11.5 0,11.5 m 7,-5.7 -5.2,0 m -45.9,7.9 0,-5.1 22.8,0 0,5.1 z"
+            />
+            <path
+              className="wall"
+              d="m 20.07,36.84 0,-1.81 2.16,0 0,1.81 z m 11.61,0 0,-1.81 -2.16,0 0,1.81 z m 29.31,8.4 2.28,0 0,-1.42 m 0,-6.84 0,-1.43 -20.29,0 0,9.52 m 15.73,-9.58 0,-5.47 m 0,-22.912 0,-5.073 33.06,0 0,2.166 m 0,6.729 0,35.05 3.42,0 0,18.36 -25.08,0 m -9.12,-28.79 0,9.75 -0.57,0.81 m 31.35,18.23 0,29.07 -25.58,0 m -8.11,-44.06 -0.57,0.85 -14.36,0 m -10.95,-5.13 10.78,0 0,4.9 0,3.54 m -2.91,0 7.86,0 0,-3.31 m 43.84,-14.65 -21.09,0 0,1.88 m 0,6.5 0,3.14 3.99,0 0,-11.52 m -44.29,14.48 0,3.48 5.01,0 m 48.97,-0.57 -13.68,0 0,5.7 6.84,0 m 17.67,-5.7 -7.41,0 m -5.07,0 0,11.4 m -21.15,-5.13 0,5.7 1.71,0 1.71,-2.28 0,-9.12 -3.42,0 0,0.57 m 4.63,18.24 0,0.64 m 0,0.64 0,0.64 m 0,0.64 0,0.65 m 0,0.64 0,0.64 m 0,0.64 0,0.64 m 0,0.64 0,0.64 m 0,0.64 0,0.65 m 0,0.64 0,0.64 0,0.64 m -46.75,-41.27 0,6.67 M 11,74.6 l 0,24.37 55.19,0 0,-16.39 -9.59,0 -3.65,-4.56 0,-3.42 -41.95,0 -6.271,-6.27 0,-27.02 17.101,0 m 7.52,0 2.85,0 0,3.76 -0.1,5.02 -5.13,-0.1 0,3.48"
+            />
 
-              <g className="text-[3px] text-blue-300 transition-all duration-500 ease-in-out">
-                <EspMap
-                    key={ip}
-                    cx={esp.x}
-                    cy={esp.y}
-                    ip={esp.ip}
-                    name={esp.name}
-                    hoveredCircle={hoveredCircle}
-                    setHoveredCircle={setHoveredCircle}
-                    mouseClick={mouseClick}
-                />
-              </g>
+            <g className="text-[3px] text-blue-300 transition-all duration-500 ease-in-out">
+              <EspMap
+                key={ip}
+                cx={esp.x}
+                cy={esp.y}
+                ip={esp.ip}
+                name={esp.name}
+                hoveredCircle={hoveredCircle}
+                setHoveredCircle={setHoveredCircle}
+                mouseClick={mouseClick}
+              />
             </g>
-          </svg>
-        </div>
+          </g>
+        </svg>
       </div>
+    </div>
   );
 }

nextjs-interface/src/app/dashboard/layout.tsx

@@ -7,13 +7,11 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <div className="w-full dark:bg-slate-700">
         <HeaderElement />
       </div>
-      <div className="flex flex-row w-full pb-5 lg:pl-0 pl-5 pr-5 gap-x-5 dark:bg-slate-800">
-        <div className="hidden lg:block pl-5 w-1/6 dark:bg-slate-700">
+      <div className="flex w-full flex-row gap-x-5 pb-5 pl-5 pr-5 dark:bg-slate-800 lg:pl-0">
+        <div className="hidden w-1/6 pl-5 dark:bg-slate-700 lg:block">
           <SideBarElement />
         </div>
-        <div className="w-full pt-5 lg:w-5/6 dark:bg-slate-800">
-            {children}
-        </div>
+        <div className="w-full h-screen pt-5 dark:bg-slate-800 lg:w-5/6">{children}</div>
       </div>
     </>
   );

nextjs-interface/src/app/login/layout.tsx

@@ -13,12 +13,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-      <html lang="en">
+    <html lang="en">
       <body>
-      <Providers>
-        {children}
-      </Providers>
+        <Providers>{children}</Providers>
       </body>
-      </html>
+    </html>
   );
-}
+}

nextjs-interface/src/app/ui/all/DarkModeToggle.tsx

@@ -13,7 +13,7 @@ const DarkModeToggle = () => {
   return (
     <div onClick={toggleDarkMode} className="cursor-pointer">
       {darkMode ? (
-        <Sun className="h-full w-full rounded-full dark:bg-slate-700 p-2 transition" />
+        <Sun className="h-full w-full rounded-full p-2 transition dark:bg-slate-700" />
       ) : (
         <Moon className="h-full w-full rounded-full bg-secondary p-2" />
       )}

nextjs-interface/src/app/ui/all/providers.tsx

@@ -8,13 +8,13 @@ export function Providers({
   children: React.ReactNode;
 }>) {
   const [darkMode, setDarkMode] = useState(() => {
-    const savedMode = localStorage.getItem('darkMode');
+    const savedMode = localStorage.getItem("darkMode");
     return savedMode ? JSON.parse(savedMode) : false;
   });
   const toggleDarkMode = () => {
     const newDarkMode = !darkMode;
     setDarkMode(newDarkMode);
-    localStorage.setItem('darkMode', JSON.stringify(newDarkMode));
+    localStorage.setItem("darkMode", JSON.stringify(newDarkMode));
   };
 
   return (

nextjs-interface/src/app/ui/dashboard/ChartElement.tsx

@@ -51,7 +51,30 @@ export function ChartElement({ data }: { data: avgData[] }) {
           label={{ value: "Max humidity", position: "top", stroke: textColor }}
           stroke="red"
         />
-        <Tooltip />
+        <Tooltip
+          cursor={{
+            stroke: "#334155",
+            radius: 4,
+          }}
+          content={({ active, payload }) => {
+            if (!active || !payload || payload.length === 0) return null;
+            return (
+              <>
+                <div className="w-[250px] rounded-xl bg-secondary dark:bg-gray-900">
+                  <div className="p-5">
+                    <div className="flex flex-col">
+                      <h1 className="text-black dark:text-zinc-50">Date : {new Date(payload[0].payload.date).toLocaleDateString()}</h1>
+                        <p className="text-black dark:text-zinc-50">
+                            Temperature : {payload[0].payload.avg_temperature.toFixed(2)}°C</p>
+                        <p className="text-black dark:text-zinc-50">
+                                Humidity : {payload[0].payload.avg_humidity.toFixed(2)}%</p>
+                    </div>
+                  </div>
+                </div>
+              </>
+            );
+          }}
+        />
         <Legend />
         <Line
           type="monotone"

nextjs-interface/src/app/ui/dashboard/EspLinksElement.tsx

@@ -1,18 +1,29 @@
 "use client";
+
+// import nextjs and react
 import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import clsx from "clsx";
+
+// import recharts components
+import { Label } from "recharts";
+
+// import context and scripts
+import { getToken } from "@/lib/context";
+import { useAllEsp } from "@/lib/data";
+
+// import lucide icons
+import { CirclePlus } from "lucide-react";
+
+// import shacl-ui components
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { Input } from "@/components/ui/input";
-import { Label } from "recharts";
-import { getToken } from "@/lib/context";
-import { useAllEsp } from "@/lib/data";
-import {CirclePlus} from "lucide-react";
 
 export default function EspLinksElement() {
   const pathname = usePathname();
@@ -50,65 +61,70 @@ export default function EspLinksElement() {
   };
 
   return (
-      <>
-        {links.map((link) => {
-          const href = `/dashboard/esp/${link.id}`;
-          return (
-              <>          <Link
-                  key={link.name}
-                  href={href}
-                  className={clsx(
-                      "flex items-center gap-3 rounded-lg py-2 text-lg text-gray-500 transition-all hover:text-primary",
-                      {
-                        "text-zinc-950 dark:text-zinc-50": pathname === href,
-                      },
-                  )}
-              >
-                <p className="text-lg">{link.name}</p>
-              </Link>
-              </>
-          );
-        })}
-        <div className="mb-3 border-b-2 dark:border-gray-400" />
-        <Popover>
-          <PopoverTrigger asChild>
-            <button
-                className="flex w-full justify-between text-lg text-zinc-500 hover:text-black dark:hover:text-zinc-200">
-              <p>ajouter un esp</p>
-              <CirclePlus className="mt-1 w-[20px]"/>
-            </button>
-          </PopoverTrigger>
-          <PopoverContent className="w-80">
-            <form onSubmit={handleSubmit}>
-              <div className="flex gap-2">
-                <Label>name</Label>
-                <Input
-                    type="text"
-                    id="name"
-                    placeholder="name"
-                    value={newLink.name}
-                    onChange={handleInputChange}
-                    required={true}
-                />
+    <>
+      {links.map((link) => {
+        const href = `/dashboard/esp/${link.id}`;
+        return (
+          <>
+            {" "}
+            <Link
+              key={link.id}
+              href={href}
+              className={clsx(
+                "flex items-center gap-3 rounded-lg py-2 text-lg text-gray-500 transition-all hover:text-primary",
+                {
+                  "text-zinc-950 dark:text-zinc-50": pathname === href,
+                },
+              )}
+            >
+              <p className="text-lg">{link.name}</p>
+            </Link>
+          </>
+        );
+      })}
+      <div className="mb-3 border-b-2 dark:border-gray-400" />
+      <Popover>
+        <PopoverTrigger asChild>
+          <button className="flex w-full justify-between text-lg text-zinc-500 hover:text-black dark:hover:text-zinc-200">
+            <p>ajouter un esp</p>
+            <CirclePlus className="mt-1 w-[20px]" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80 ml-5 bg-secondary dark:bg-gray-900">
+          <form onSubmit={handleSubmit}>
+            <div className="flex gap-2">
+              <Label>name</Label>
+              <Input
+                type="text"
+                id="name"
+                className="bg-secondary dark:bg-slate-700"
+                placeholder="name"
+                value={newLink.name}
+                onChange={handleInputChange}
+                required={true}
+              />
 
-                <Label>ip adress</Label>
-                <Input
-                    type="text"
-                    id="ip"
-                    placeholder="ip adresse"
-                    value={newLink.ip}
-                    onChange={handleInputChange}
-                    required={true}
-                />
-              </div>
-              <button
-                  className="flex w-full justify-between text-lg text-zinc-500 hover:text-black dark:hover:text-zinc-200">
-                <p>ajouter un esp</p>
-                <CirclePlus className="mt-1 w-[20px]"/>
-              </button>
-            </form>
-          </PopoverContent>
-        </Popover>
-      </>
+              <Label>ip adress</Label>
+              <Input
+                type="text"
+                id="ip"
+                className="bg-secondary dark:bg-slate-700"
+                placeholder="ip adresse"
+                value={newLink.ip}
+                onChange={handleInputChange}
+                required={true}
+              />
+            </div>
+            <Button
+              className="mt-2 w-full bg-white text-black dark:bg-slate-700 dark:text-white"
+              type="submit"
+              variant="outline"
+            >
+              Ajouter un esp
+            </Button>
+          </form>
+        </PopoverContent>
+      </Popover>
+    </>
   );
 }