feat: add a provider for popup context and small fixes

add a context provider for popus which can be used in a future implementation and some small other fixes

Refs: #41

Author: OlaBekkevold

labman/src/app/(main)/layout.tsx

@@ -2,10 +2,8 @@ import type { Metadata } from "next";
 import "./globals.css";
 import { League_Spartan } from "next/font/google";
 import NavBar from "@/components/core/NavBar";
-import prisma from "@/lib/prisma";
-import { cookies } from "next/headers";
-import {validateSessionToken} from "@/auth/session";
-import {getSession, getUser} from "@/lib/actions";
+import {PopupProvider} from "./popupProvider"
+import {getUser} from "@/lib/actions";
 import SideBar from "@/components/core/SideBar";
 
 const spartan = League_Spartan({
@@ -40,7 +38,9 @@ export default async function RootLayout({
 
             <main className="flex-1 overflow-auto">
                 <NavBar username={user?.username ?? "Unknown"} />
-                {children}
+                <PopupProvider>
+                    {children}
+                </PopupProvider>
             </main>
         </div>
       </body>

labman/src/app/(main)/popupProvider.tsx

@@ -0,0 +1,22 @@
+"use client"
+import {createContext, useState} from "react";
+
+export const popupContext = createContext(null);
+
+export const PopupProvider = ({children}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [message, setMessage] = useState("");
+
+    return (
+        <popupContext.Provider value={{isOpen, setIsOpen, message, setMessage}}>
+            <>
+                {children}
+                <div className={`${isOpen ? "block" : "hidden"}`}>
+                    <div className="bg-white rounded-md p-4 mx-auto mt-20 w-[300px]">
+                        <h1 className="text-2xl text-black font-bold">{message}</h1>
+                    </div>
+                </div>
+            </>
+        </popupContext.Provider>
+    )
+}

labman/src/components/core/Card.tsx

@@ -24,10 +24,6 @@ export default function Card({ loan, user }: CardProps) {
         last = loan.endDate.toLocaleDateString("no");
     }
 
-    /* const name = loan?.item.equipment.name || user?.username;
-    const start = loan?.startDate.toLocaleDateString("no") || new Date(user.createdAt).toLocaleDateString("no");
-    const last = loan?.endDate.toLocaleDateString("no") || new  Date(user.latestActivity).toLocaleDateString("no"); */
-
     if (loan) {
         if (new Date(loan.endDate) < new Date() && loan.status === "Active") {
             loan.status = "Due";
@@ -39,7 +35,7 @@ export default function Card({ loan, user }: CardProps) {
             <div className="border-b-white border-b-[1px] flex gap-2 ">
                 <h1 className="text-3xl font-bold pl-3 pt-2.5">{name}</h1>
                 {loan && <span className={"mt-3 text-3xl"}>|</span>}
-                {loan && <p title={loan.item.equipment.name} className="mt-4 text-2xl w-40 whitespace-nowrap overflow-hidden text-ellipsis">{loan.item?.equipment.name}</p>}
+                {loan && <p title={loan.item.equipment.name} className="mt-4 text-2xl w-40 whitespace-nowrap overflow-hidden text-ellipsis">Unit {loan.item?.id}</p>}
                 {loan && <div className={"mt-4 mr-3 ml-auto rounded-md flex justify-center px-1 w-fit h-5 left-3" + (loan.status === "Returned" ? " bg-green-400" : loan.status === "Active" ? " bg-yellow-400" : " bg-red-600" )}>
                     <p className={"font-bold text text-black text-nowrap"}>{loan.status === "Returned" ? "Returned" : loan.status === "Active" ? "Active" : "Due" }</p>
                 </div>}

labman/src/middleware.ts

@@ -22,4 +22,4 @@ export async function middleware(req: NextRequest) {
     return NextResponse.next();
 }
 
-export const config = {matcher: ["/", "/users"]};
+export const config = {matcher: ["/", "/users", "/loans"]};