Develop

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>
+
+
       </>
 
 

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
 }

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
 
 

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") &&

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 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" /> */}
+                            <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}
                             />
                         );

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,31 +21,50 @@ 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(
         <>
             <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>
-                    <Ellipsis
-                        equipment={equipment}
-                        setSelectedEquipment={setSelectedEquipment}
-                        setSideView={setSideView}
-                        deleteEquipment={deleteEquipment}
-
-                    />
+                    <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
+                                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>
         </>