From 7aa992fe8108f4483af1583cccc4ed9f735a4376 Mon Sep 17 00:00:00 2001
From: "[dyad]" <s.coetzee6@my.milpark.ac.za>
Date: Sun, 21 Sep 2025 21:14:00 +0200
Subject: [PATCH] [dyad] Removing Products and Orders links and improving
 BookOutForm responsiveness - wrote 2 file(s) + extra files edited outside of
 Dyad

---
 src/components/SidebarNav.tsx           | 10 ----------
 src/components/book-out/BookOutForm.tsx | 11 +++++++++--
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/SidebarNav.tsx b/src/components/SidebarNav.tsx
index 375d86e..56ad9fe 100644
--- a/src/components/SidebarNav.tsx
+++ b/src/components/SidebarNav.tsx
@@ -29,16 +29,6 @@ const sidebarNavItems = [
         href: "/reports",
         icon: Book,
     },
-    {
-        title: "Products",
-        href: "/products",
-        icon: Package,
-    },
-    {
-        title: "Orders",
-        href: "/orders",
-        icon: ShoppingCart,
-    },
     {
         title: "Purchase Orders",
         href: "/purchase-orders",
diff --git a/src/components/book-out/BookOutForm.tsx b/src/components/book-out/BookOutForm.tsx
index 776089f..0b8db14 100644
--- a/src/components/book-out/BookOutForm.tsx
+++ b/src/components/book-out/BookOutForm.tsx
@@ -16,6 +16,13 @@ import {
   FormMessage,
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 import { showSuccess, showError } from "@/utils/toast"
 import pb from "@/lib/pocketbase"
 import { StockItemCombobox } from "@/components/book-out/StockItemCombobox"
@@ -212,12 +219,12 @@ export function BookOutForm({ setOpen, refreshData }: BookOutFormProps) {
         <div className="border p-4 rounded-md">
           <h3 className="text-lg font-semibold mb-4">Items to Book Out</h3>
           {form.getValues("items").map((item, index) => (
-            <div key={index} className="grid grid-cols-4 gap-4 mb-4 items-center">
+            <div key={index} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4 items-center">
               <FormField
                 control={form.control}
                 name={`items.${index}.itemName`}
                 render={({ field }) => (
-                  <FormItem className="col-span-2">
+                  <FormItem>
                     <FormLabel>Item Name</FormLabel>
                     <StockItemCombobox
                       stockItems={stockItems}