From 3aeca91994a17a4d681c07bbd4d9c5fc02a223b4 Mon Sep 17 00:00:00 2001
From: Ola Bekkevold <ola.k.bekkevold@gmail.com>
Date: Thu, 9 Apr 2026 11:19:39 +0200
Subject: [PATCH 1/2] feat: add buttons for direct access to loan and edit
 pages

Refs: #83
---
 labman/src/app/(main)/globals.css             |  8 +++++
 labman/src/components/core/Ellipsis.tsx       |  5 +--
 .../src/components/core/SideView/SideView.tsx |  2 +-
 .../components/inventory/EquipmentClient.tsx  | 17 +++++----
 labman/src/components/inventory/Item.tsx      | 36 ++++++++++++++-----
 5 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/labman/src/app/(main)/globals.css b/labman/src/app/(main)/globals.css
index 6440177..fe4a317 100644
--- a/labman/src/app/(main)/globals.css
+++ b/labman/src/app/(main)/globals.css
@@ -109,4 +109,12 @@ input:invalid {
 
 .card-attributes-value {
     @apply text-2xl text-gray-300 font-bold
+}
+
+.rounded-button {
+    @apply rounded-full hover:cursor-pointer
+}
+
+.rounded-button:hover {
+    @apply brightness-90 transition-all duration-500 scale-105 ease-in-out
 }
\ No newline at end of file
diff --git a/labman/src/components/core/Ellipsis.tsx b/labman/src/components/core/Ellipsis.tsx
index b2a4b8f..cecf108 100644
--- a/labman/src/components/core/Ellipsis.tsx
+++ b/labman/src/components/core/Ellipsis.tsx
@@ -1,16 +1,17 @@
 import {useState} from "react";
 import {Equipment} from "@/types/inventory";
+import {useSideView} from "@/app/sideViewContext";
 
 interface EllipsisProps {
     equipment: Equipment;
     setSelectedEquipment: (equipment: Equipment | null) => void;
-    setSideView: (view: string) => void;
     deleteEquipment: (name: string) => void;
 }
 
-export default function Ellipsis({equipment, setSelectedEquipment, setSideView, deleteEquipment}: EllipsisProps) {
+export default function Ellipsis({equipment, setSelectedEquipment, deleteEquipment}: EllipsisProps) {
     const [isOpen, setIsOpen] = useState(false);
     const toggle = () => setIsOpen(!isOpen);
+    const {setSideView} = useSideView();
 // TODO: Find a way to ensure that only one dropdown is open at a time
 
 
diff --git a/labman/src/components/core/SideView/SideView.tsx b/labman/src/components/core/SideView/SideView.tsx
index a45e17f..8957486 100644
--- a/labman/src/components/core/SideView/SideView.tsx
+++ b/labman/src/components/core/SideView/SideView.tsx
@@ -41,7 +41,7 @@ export default function SideView( { children, title, equipmentData, itemList} :
                     </div>
 
                     {/* Right side of panel */}
-                    <div className="flex-1 bg-brand-950 rounded-r-lg p-2">
+                    <div className="flex-1 bg-brand-950 rounded-r-lg p-2 overflow-y-auto">
                         <div className="flex justify-end">
 
                             {(sideView === "loanView" || sideView === "eqInfo") &&
diff --git a/labman/src/components/inventory/EquipmentClient.tsx b/labman/src/components/inventory/EquipmentClient.tsx
index 1a7eaad..d429bdd 100644
--- a/labman/src/components/inventory/EquipmentClient.tsx
+++ b/labman/src/components/inventory/EquipmentClient.tsx
@@ -135,12 +135,16 @@ export default function EquipmentClient({equipmentList}: EquipmentClientProps) {
                         setAllEquipment={setAllEquipment}
                         setSelectedEquipment={setSelectedEquipment} />}
 
-                    <form onSubmit={handleSubmit}>
-                        <input value={name} onChange={(e) => setName(e.target.value)} type="text" name="name" placeholder="Name" className="bg-white rounded-md p-2 m-2 placeholder-black text-black" />
-                        <input value={category} onChange={(e) => setCategory(e.target.value)} type="text" name="category" placeholder="Category" className="bg-white rounded-md p-2 m-2 placeholder-black text-black" />
-                        {/* <input value={image} onChange={(e) => setImage(e.target.value)} type="text" name="image" placeholder="Image" className="bg-white rounded-md p-2 m-2 placeholder-black text-black" /> */}
-                        <button type="submit" className={"button bg-green-500"}>Add Equipment</button>
-                    </form>
+                    <div className={"mb-13 mt-3"}>
+                        <h1 className={"text-4xl font-bold mb-3"}>Add equipment</h1>
+                        <form onSubmit={handleSubmit}>
+                            <input value={name} onChange={(e) => setName(e.target.value)} type="text" name="name" placeholder="Name" className="bg-white rounded-md p-2 m-2 placeholder-black text-black" />
+                            <input value={category} onChange={(e) => setCategory(e.target.value)} type="text" name="category" placeholder="Category" className="bg-white rounded-md p-2 m-2 placeholder-black text-black" />
+                            {/* <input value={image} onChange={(e) => setImage(e.target.value)} type="text" name="image" placeholder="Image" className="bg-white rounded-md p-2 m-2 placeholder-black text-black" /> */}
+                            <button type="submit" className={"button bg-green-500"}>Add Equipment</button>
+                        </form>
+                    </div>
+
 
                     <div className="grid grid-cols-2 mt-10 mb-5">
                         <CategoryButton filters={[...new Set(allEquipment.map((e) => e.category.name))]} selected={selectedFilter} onSelect={setSelectedFilter} />
@@ -165,7 +169,6 @@ export default function EquipmentClient({equipmentList}: EquipmentClientProps) {
                                 category={equipment.category.name}
                                 creationDate={equipment.createdAt}
                                 setSelectedEquipment={setSelectedEquipment}
-                                setSideView={setSideView}
                                 deleteEquipment={handleDeleteEquipment}
                             />
                         );
diff --git a/labman/src/components/inventory/Item.tsx b/labman/src/components/inventory/Item.tsx
index 5501d6c..02a7574 100644
--- a/labman/src/components/inventory/Item.tsx
+++ b/labman/src/components/inventory/Item.tsx
@@ -3,6 +3,7 @@
 import Ellipsis from "@/components/core/Ellipsis";
 import {Equipment} from "@/types/inventory";
 import {loanCount} from "@/utils/inventoryUtils";
+import {useSideView} from "@/app/sideViewContext";
 
 type Unit = {
     id: number;
@@ -20,14 +21,14 @@ interface ItemProps {
     creationDate: Date;
     units?: Unit[];
     setSelectedEquipment: (equipment: Equipment | null) => void;
-    setSideView: (view: string) => void;
     deleteEquipment: (name: string) => void;
 }
 
-export default function Item({ equipment, name, category, creationDate, setSelectedEquipment, setSideView, deleteEquipment }: ItemProps) {
+export default function Item({ equipment, name, category, creationDate, setSelectedEquipment, deleteEquipment }: ItemProps) {
 
     // CreationDate is not an actual type of Date, so it needs to be converted to a Date object.
     const date = new Date(creationDate);
+    const {sideView, setSideView} = useSideView();
 
 
     return(
@@ -38,13 +39,32 @@ export default function Item({ equipment, name, category, creationDate, setSelec
                     <h1 className="text-2xl mt-2">{category}</h1>
                     <h1 className="text-2xl mt-2">{equipment.items.length - loanCount(equipment)}/{equipment.items.length}</h1>
                     <h1 className="text-2xl mt-2">{date.toLocaleDateString("no")}</h1>
-                    <Ellipsis
-                        equipment={equipment}
-                        setSelectedEquipment={setSelectedEquipment}
-                        setSideView={setSideView}
-                        deleteEquipment={deleteEquipment}
+                    <div className={"grid grid-cols-3"}>
+                        <button className={"rounded-button h-9 w-9 bg-green-600 mt-2 mr-2"} onClick={() => {setSelectedEquipment(equipment); setSideView("loanView")}}>
+                            <img
+                                className={"ml-1.5"}
+                                width="25"
+                                height="25"
+                                src="https://img.icons8.com/ios-filled/50/give.png" alt="give"
+                            />
+                        </button>
+                        <button className={"rounded-button h-9 w-9 bg-blue-600 mt-2"} onClick={() => {setSelectedEquipment(equipment); setSideView("eqInfo")}}>
+                            <img
+                                className={"ml-1.5"}
+                                width="25"
+                                height="25"
+                                src="https://img.icons8.com/ios-filled/50/create-new.png"
+                                alt="create-new"
+                            />
+                        </button>
+                        <div className={"mt-1"}>
+                            <Ellipsis
+                                equipment={equipment}
+                                setSelectedEquipment={setSelectedEquipment}
+                                deleteEquipment={deleteEquipment}/>
+                        </div>
 
-                    />
+                    </div>
                 </div>
             </div>
         </>

From 454c806ef3ba87893c98d336c91e0acb2fdb65a9 Mon Sep 17 00:00:00 2001
From: Ola Bekkevold <ola.k.bekkevold@gmail.com>
Date: Thu, 9 Apr 2026 14:20:04 +0200
Subject: [PATCH 2/2] feat: inventory grid alignment and icon credit

Refs: #83
---
 labman/src/app/(auth)/login/page.tsx                | 4 ++++
 labman/src/components/inventory/EquipmentClient.tsx | 6 +++---
 labman/src/components/inventory/Item.tsx            | 6 +++---
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/labman/src/app/(auth)/login/page.tsx b/labman/src/app/(auth)/login/page.tsx
index e0d1443..1a9e0b3 100644
--- a/labman/src/app/(auth)/login/page.tsx
+++ b/labman/src/app/(auth)/login/page.tsx
@@ -45,7 +45,11 @@ export default function Home() {
               </form>
             </div>
           </div>
+
           <p className={"text-gray-300 text-2xl mb-3 ml-3 fixed bottom-0"}>{version}-{env}</p>
+          <a className={"fixed bottom-0 right-1"} target="_blank" href="https://icons8.com">All icons by Icons8</a>
+
+
       </>
 
 
diff --git a/labman/src/components/inventory/EquipmentClient.tsx b/labman/src/components/inventory/EquipmentClient.tsx
index d429bdd..8efb5f1 100644
--- a/labman/src/components/inventory/EquipmentClient.tsx
+++ b/labman/src/components/inventory/EquipmentClient.tsx
@@ -135,9 +135,9 @@ export default function EquipmentClient({equipmentList}: EquipmentClientProps) {
                         setAllEquipment={setAllEquipment}
                         setSelectedEquipment={setSelectedEquipment} />}
 
-                    <div className={"mb-13 mt-3"}>
-                        <h1 className={"text-4xl font-bold mb-3"}>Add equipment</h1>
-                        <form onSubmit={handleSubmit}>
+                    <div className={"mb-13 mt-3 p-3 w-fit rounded-md bg-brand-500  border-brand-950"}>
+                        <h1 className={"text-4xl font-bold mb-3 w-fit"}>Add equipment</h1>
+                        <form className={"w-fit"} onSubmit={handleSubmit}>
                             <input value={name} onChange={(e) => setName(e.target.value)} type="text" name="name" placeholder="Name" className="bg-white rounded-md p-2 m-2 placeholder-black text-black" />
                             <input value={category} onChange={(e) => setCategory(e.target.value)} type="text" name="category" placeholder="Category" className="bg-white rounded-md p-2 m-2 placeholder-black text-black" />
                             {/* <input value={image} onChange={(e) => setImage(e.target.value)} type="text" name="image" placeholder="Image" className="bg-white rounded-md p-2 m-2 placeholder-black text-black" /> */}
diff --git a/labman/src/components/inventory/Item.tsx b/labman/src/components/inventory/Item.tsx
index 02a7574..9cb1f64 100644
--- a/labman/src/components/inventory/Item.tsx
+++ b/labman/src/components/inventory/Item.tsx
@@ -36,9 +36,9 @@ export default function Item({ equipment, name, category, creationDate, setSelec
             <div className="pt-2 pb-2 pl-3 border-white border-b-[1px]" >
                 <div className="grid grid-cols-4 grid-flow-col auto-cols-max ">
                     <h1 className="font-bold text-2xl mt-2" onClick={() => {setSelectedEquipment(equipment); setSideView("loanView")}}>{name}</h1>
-                    <h1 className="text-2xl mt-2">{category}</h1>
-                    <h1 className="text-2xl mt-2">{equipment.items.length - loanCount(equipment)}/{equipment.items.length}</h1>
-                    <h1 className="text-2xl mt-2">{date.toLocaleDateString("no")}</h1>
+                    <h1 className="text-2xl mt-2 ml-7">{category}</h1>
+                    <h1 className="text-2xl mt-2 ml-16">{equipment.items.length - loanCount(equipment)}/{equipment.items.length}</h1>
+                    <h1 className="text-2xl mt-2 ml-25">{date.toLocaleDateString("no")}</h1>
                     <div className={"grid grid-cols-3"}>
                         <button className={"rounded-button h-9 w-9 bg-green-600 mt-2 mr-2"} onClick={() => {setSelectedEquipment(equipment); setSideView("loanView")}}>
                             <img