From 3e62bbdbd470a8fd6688e4f25a933604261a8998 Mon Sep 17 00:00:00 2001
From: Tara Kaviani <tarakaviani@g.ucla.edu>
Date: Tue, 20 Jan 2026 22:14:18 -0800
Subject: [PATCH 1/2] Request Store Page

---
 .../request/[storeId]/[storeItemId]/page.tsx  | 88 +++++++++++++++++++
 app/(main)/request/[storeId]/page.tsx         | 80 +++++++++++++++++
 .../components/RequestStoreItemCard.tsx       | 25 ++++++
 3 files changed, 193 insertions(+)
 create mode 100644 app/(main)/request/[storeId]/[storeItemId]/page.tsx
 create mode 100644 app/(main)/request/[storeId]/page.tsx
 create mode 100644 app/(main)/request/components/RequestStoreItemCard.tsx

diff --git a/app/(main)/request/[storeId]/[storeItemId]/page.tsx b/app/(main)/request/[storeId]/[storeItemId]/page.tsx
new file mode 100644
index 0000000..8360aec
--- /dev/null
+++ b/app/(main)/request/[storeId]/[storeItemId]/page.tsx
@@ -0,0 +1,88 @@
+import { createClient } from '@/app/lib/supabase/server-client';
+
+export default async function RequestStoreItemPage({
+  params,
+}: {
+  params: Promise<{ storeId: string; storeItemId: string }>;
+}) {
+  const { storeId, storeItemId } = await params;
+
+  const supabase = await createClient();
+
+  const { data: storeItem, error: itemError } = await supabase
+    .from('store_items')
+    .select(
+      `
+        store_item_id,
+        quantity_available,
+        inventory_items (
+          name,
+          description,
+          photo_url,
+          subcategories (
+            name,
+            categories (
+              name
+            )
+          )
+        )
+      `
+    )
+    .eq('store_item_id', storeItemId)
+    .single();
+
+  if (itemError) {
+    console.error('Error fetching store item:', itemError);
+    return <div>Failed to load data.</div>;
+  }
+
+  const inv = storeItem.inventory_items?.[0];
+  const subcat = inv?.subcategories?.[0];
+  const category = subcat?.categories?.[0];
+
+  return (
+    <div
+      style={{
+        border: '1px solid #ccc',
+        padding: '1rem',
+        borderRadius: '8px',
+        width: '350px',
+      }}
+    >
+      <h1>Request Item Details</h1>
+
+      <h2>{inv?.name}</h2>
+
+      {inv?.photo_url && (
+        <img
+          src={inv.photo_url}
+          alt={inv?.name}
+          width="200"
+          style={{ borderRadius: '6px', marginBottom: '1rem' }}
+        />
+      )}
+
+      <p>
+        <strong>Description:</strong>{' '}
+        {inv?.description ?? 'No description available'}
+      </p>
+
+      <p>
+        <strong>Category:</strong> {category?.name ?? 'None'}
+      </p>
+
+      <p>
+        <strong>Subcategory:</strong> {subcat?.name ?? 'None'}
+      </p>
+
+      <p>
+        <strong>Quantity Available:</strong>{' '}
+        {storeItem.quantity_available ?? 'Unknown'}
+      </p>
+
+      <a href={`/request/${storeId}`}>
+        <button>--Back--</button>
+      </a>
+    </div>
+  );
+}
diff --git a/app/(main)/request/[storeId]/page.tsx b/app/(main)/request/[storeId]/page.tsx
new file mode 100644
index 0000000..b8b80d4
--- /dev/null
+++ b/app/(main)/request/[storeId]/page.tsx
@@ -0,0 +1,80 @@
+import { createClient } from '@/app/lib/supabase/server-client';
+import RequestStoreItemCard from '@/app/(main)/request/components/RequestStoreItemCard';
+
+export default async function RequestStorePage({
+  params,
+}: {
+  params: Promise<{ storeId: string }>;
+}) {
+  const { storeId } = await params;
+
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  const { data: store } = await supabase
+    .from('stores')
+    .select('*')
+    .eq('store_id', storeId)
+    .single();
+
+  const { data: storeItems } = await supabase
+    .from('store_items')
+    .select(
+      `
+        store_item_id,
+        inventory_items (
+          name,
+          photo_url,
+          subcategories (
+            name,
+            categories (
+              name
+            )
+          )
+        )
+      `
+    )
+    .eq('store_id', storeId)
+    .eq('hidden', false);
+
+  return (
+    <div>
+      <h1>Store – {store.name}</h1>
+      <h2>Street Address: {store.street_address}</h2>
+
+      <h2 style={{ marginTop: '2rem' }}>Available Items</h2>
+
+      {storeItems && storeItems.length > 0 ? (
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
+          {storeItems.map((item) => {
+            const inv = item.inventory_items?.[0];
+            const subcat = inv?.subcategories?.[0];
+            const category = subcat?.categories?.[0];
+
+            return (
+              <a
+                key={item.store_item_id}
+                href={`/request/${storeId}/${item.store_item_id}`}
+                style={{ textDecoration: 'none', color: 'inherit' }}
+              >
+                <RequestStoreItemCard
+                  name={inv?.name}
+                  subcategoryName={subcat?.name}
+                  categoryName={category?.name}
+                />
+              </a>
+            );
+          })}
+        </div>
+      ) : (
+        <h3>No items available.</h3>
+      )}
+
+      <a href="./">
+        <button>--Back--</button>
+      </a>
+    </div>
+  );
+}
diff --git a/app/(main)/request/components/RequestStoreItemCard.tsx b/app/(main)/request/components/RequestStoreItemCard.tsx
new file mode 100644
index 0000000..bc29dcc
--- /dev/null
+++ b/app/(main)/request/components/RequestStoreItemCard.tsx
@@ -0,0 +1,25 @@
+export default function RequestStoreItemCard({
+  name,
+  subcategoryName,
+  categoryName,
+}: {
+  name: string | undefined;
+  subcategoryName: string | undefined;
+  categoryName: string | undefined;
+}) {
+  return (
+    <div
+      style={{
+        border: '1px solid #ccc',
+        padding: '1rem',
+        borderRadius: '8px',
+        width: '250px',
+        cursor: 'pointer',
+      }}
+    >
+      <h3>{name}</h3>
+      <p>Category: {categoryName}</p>
+      <p>Subcategory: {subcategoryName}</p>
+    </div>
+  );
+}
\ No newline at end of file

From 859ff56d249398ca3b288704b533a065f5413a40 Mon Sep 17 00:00:00 2001
From: Tara Kaviani <tarakaviani@g.ucla.edu>
Date: Tue, 20 Jan 2026 22:58:53 -0800
Subject: [PATCH 2/2] comments

---
 .../request/[storeId]/[storeItemId]/page.tsx   | 18 +++++++++++++-----
 app/(main)/request/[storeId]/page.tsx          | 14 +++++++++++---
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/(main)/request/[storeId]/[storeItemId]/page.tsx b/app/(main)/request/[storeId]/[storeItemId]/page.tsx
index 8360aec..1185112 100644
--- a/app/(main)/request/[storeId]/[storeItemId]/page.tsx
+++ b/app/(main)/request/[storeId]/[storeItemId]/page.tsx
@@ -1,14 +1,17 @@
 import { createClient } from '@/app/lib/supabase/server-client';
-
+// exports server component RequestStoreItemPage
 export default async function RequestStoreItemPage({
   params,
 }: {
   params: Promise<{ storeId: string; storeItemId: string }>;
 }) {
-  const { storeId, storeItemId } = await params;
+  const { storeId, storeItemId } = await params; // page takes storeId and storeItemId as props
 
   const supabase = await createClient();
 
+  // select store_item_id and quantity_available from store_items
+  // select name, description, and photo_url from inventory_items
+  // select subcategories.name and categories.name
   const { data: storeItem, error: itemError } = await supabase
     .from('store_items')
     .select(
@@ -28,6 +31,7 @@ export default async function RequestStoreItemPage({
         )
       `
     )
+    // match storeItemId
     .eq('store_item_id', storeItemId)
     .single();
 
@@ -35,7 +39,7 @@ export default async function RequestStoreItemPage({
     console.error('Error fetching store item:', itemError);
     return <div>Failed to load data.</div>;
   }
-
+// extract nested values:  name description, category, subcategory
   const inv = storeItem.inventory_items?.[0];
   const subcat = inv?.subcategories?.[0];
   const category = subcat?.categories?.[0];
@@ -50,8 +54,8 @@ export default async function RequestStoreItemPage({
       }}
     >
       <h1>Request Item Details</h1>
-
-      <h2>{inv?.name}</h2>
+      {/* display inventory item name  */}
+      <h2>{inv?.name}</h2> 
 
       {inv?.photo_url && (
         <img
@@ -62,19 +66,23 @@ export default async function RequestStoreItemPage({
         />
       )}
 
+{/* Display inventory item description */}
       <p>
         <strong>Description:</strong>{' '}
         {inv?.description ?? 'No description available'}
       </p>
 
+{/* display category name */}
       <p>
         <strong>Category:</strong> {category?.name ?? 'None'}
       </p>
 
+{/* display subcategory name */}
       <p>
         <strong>Subcategory:</strong> {subcat?.name ?? 'None'}
       </p>
 
+{/* display quantity available  */}
       <p>
         <strong>Quantity Available:</strong>{' '}
         {storeItem.quantity_available ?? 'Unknown'}
diff --git a/app/(main)/request/[storeId]/page.tsx b/app/(main)/request/[storeId]/page.tsx
index b8b80d4..068bcb6 100644
--- a/app/(main)/request/[storeId]/page.tsx
+++ b/app/(main)/request/[storeId]/page.tsx
@@ -1,9 +1,11 @@
 import { createClient } from '@/app/lib/supabase/server-client';
 import RequestStoreItemCard from '@/app/(main)/request/components/RequestStoreItemCard';
 
+// server component exported 
 export default async function RequestStorePage({
   params,
 }: {
+    // takes in storeId as prop
   params: Promise<{ storeId: string }>;
 }) {
   const { storeId } = await params;
@@ -13,12 +15,15 @@ export default async function RequestStorePage({
     data: { user },
   } = await supabase.auth.getUser();
 
+  //fetch store's entry in stores table (filters on store_id)
   const { data: store } = await supabase
     .from('stores')
     .select('*')
     .eq('store_id', storeId)
     .single();
 
+// get all non-hidden store items for store
+// fetch nested inventory + category data 
   const { data: storeItems } = await supabase
     .from('store_items')
     .select(
@@ -40,12 +45,13 @@ export default async function RequestStorePage({
     .eq('hidden', false);
 
   return (
+    // display store's name and street address
     <div>
       <h1>Store – {store.name}</h1>
       <h2>Street Address: {store.street_address}</h2>
 
       <h2 style={{ marginTop: '2rem' }}>Available Items</h2>
-
+    {/* iterates through store items */}
       {storeItems && storeItems.length > 0 ? (
         <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
           {storeItems.map((item) => {
@@ -56,20 +62,22 @@ export default async function RequestStorePage({
             return (
               <a
                 key={item.store_item_id}
+                // clicking card routes to /request/[storeId]/[storeItemId]
                 href={`/request/${storeId}/${item.store_item_id}`}
                 style={{ textDecoration: 'none', color: 'inherit' }}
               >
+                {/* pass each store item to a RequestItemCard component */}
                 <RequestStoreItemCard
                   name={inv?.name}
                   subcategoryName={subcat?.name}
                   categoryName={category?.name}
-                />
+                /> 
               </a>
             );
           })}
         </div>
       ) : (
-        <h3>No items available.</h3>
+        <h3>N/A. No items to display.</h3>
       )}
 
       <a href="./">