From 7e0847374298b30e418c1d6575f1297cf16358e7 Mon Sep 17 00:00:00 2001
From: palina0k <korzik.polina@gmail.com>
Date: Mon, 7 Apr 2025 20:18:01 -0700
Subject: [PATCH 1/8] Initial Commit to Create Product Listing Page (currently
 under ProductForm)

---
 .../_components/ProductForm.module.scss       |  16 ++-
 .../product-form/_components/ProductForm.tsx  | 125 +++++++++---------
 2 files changed, 80 insertions(+), 61 deletions(-)

diff --git a/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss b/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
index dbba5eb..7e5b1c3 100644
--- a/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
+++ b/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
@@ -1,9 +1,15 @@
 @use 'media';
 
-.container {
+.container{
+    display: flex;
+    flex-direction: column;
+}
+
+.listing {
     width: 60%;
     display: flex;
     flex-direction: column;
+    margin: auto;
     justify-content: center;
     padding: var(--medium-spacer);
     text-align: left;
@@ -15,6 +21,14 @@
     border-color: var(--gray-100);
 }
 
+.title {
+    width: 60%;
+    justify-content: center;
+    margin: auto;
+    padding: var(--small-spacer);
+    text-align: left;
+}
+
 .img_container {
     padding: var(--large-spacer) var(--medium-spacer);
     margin-bottom: var(--medium-spacer);
diff --git a/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx b/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
index 92c7dc4..db933e9 100644
--- a/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
+++ b/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
@@ -28,72 +28,77 @@ export default function ProductForm() {
   };
   return (
     <div className={styles.container}>
-      <form onSubmit={handleSubmit}>
-        <div className={styles.img_container}>
-          <Image
-            src="/icons/cloud_upload.svg"
-            alt="upload icon"
-            width={34}
-            height={34}
-          />
-          <p>Drag and Drop here</p>
-          <p>or</p>
-          <button className={styles.purple_button}>Select File</button>
-        </div>
-        <div className={styles.inputs_container}>
-          <div className={styles.input_container}>
-            <p>Product Name</p>
-            <input type="text" name="product_name" placeholder="iWatch" />
+      <div className={styles.title}>
+        <h3>Listing</h3>
+      </div>
+      <div className={styles.listing}>
+        <form onSubmit={handleSubmit}>
+          <div className={styles.img_container}>
+            <Image
+              src="/icons/cloud_upload.svg"
+              alt="upload icon"
+              width={34}
+              height={34}
+            />
+            <p>Drag and Drop here</p>
+            <p>or</p>
+            <button className={styles.purple_button}>Select File</button>
           </div>
-          <div className={styles.input_container}>
-            <p>Price</p>
-            <div className={styles.column_container}>
-              <input type="text" name="product_price" placeholder="$$" />
-              <div className={styles.toggle_container}>
-                <p>List Product</p>
-                <input
-                  className={styles.toggle}
-                  type="checkbox"
-                  name="list_toggle"
-                />
+          <div className={styles.inputs_container}>
+            <div className={styles.input_container}>
+              <p>Product Name</p>
+              <input type="text" name="product_name" placeholder="iWatch" />
+            </div>
+            <div className={styles.input_container}>
+              <p>Price</p>
+              <div className={styles.column_container}>
+                <input type="text" name="product_price" placeholder="$$" />
+                <div className={styles.toggle_container}>
+                  <p>List Product</p>
+                  <input
+                    className={styles.toggle}
+                    type="checkbox"
+                    name="list_toggle"
+                  />
+                </div>
               </div>
             </div>
-          </div>
-          <h4>Details</h4>
-          <div className={styles.input_container}>
-            <p>Tags</p>
-            <input
-              onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
-                if (event.key === 'Enter') {
-                  addTag(event);
-                }
-              }}
-              id="tags_search"
-              type="text"
-              placeholder="Watch.."
-            />
-            <div className={styles.selected_tags}>
-              {tags.map((tag, index) => (
-                <p key={index} className={styles.tag_display}>
-                  {tag} <span onClick={() => deleteTag(index)}>x</span>
-                </p>
-              ))}
+            <h4>Details</h4>
+            <div className={styles.input_container}>
+              <p>Tags</p>
+              <input
+                onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+                  if (event.key === 'Enter') {
+                    addTag(event);
+                  }
+                }}
+                id="tags_search"
+                type="text"
+                placeholder="Watch.."
+              />
+              <div className={styles.selected_tags}>
+                {tags.map((tag, index) => (
+                  <p key={index} className={styles.tag_display}>
+                    {tag} <span onClick={() => deleteTag(index)}>x</span>
+                  </p>
+                ))}
+              </div>
+            </div>
+            <div className={styles.input_container}>
+              <p>Product Description</p>
+              <Textbox />
+            </div>
+            <div className={styles.input_container}>
+              <p>Product Details</p>
+              <Textbox />
             </div>
           </div>
-          <div className={styles.input_container}>
-            <p>Product Description</p>
-            <Textbox />
-          </div>
-          <div className={styles.input_container}>
-            <p>Product Details</p>
-            <Textbox />
+          <div className={styles.button_container}>
+            <input className={styles.white_button} type="reset" value="Cancel" />
+            <input className={styles.purple_button} type="submit" value="Save" />
           </div>
-        </div>
-        <div className={styles.button_container}>
-          <input className={styles.white_button} type="reset" value="Cancel" />
-          <input className={styles.purple_button} type="submit" value="Save" />
-        </div>
-      </form>
+        </form>
+      </div>
     </div>
   );
 }

From 3c49952a37b12920b677343227cd332611637418 Mon Sep 17 00:00:00 2001
From: palina0k <korzik.polina@gmail.com>
Date: Mon, 14 Apr 2025 20:54:18 -0700
Subject: [PATCH 2/8] Created a nav bar to separate about, details, carriers
 sub-pages. Still working on rendering each sub-page.

---
 .../_components/ProductForm.module.scss       | 84 ++++++++++++++--
 .../product-form/_components/ProductForm.tsx  | 95 ++++++++++++++++++-
 2 files changed, 169 insertions(+), 10 deletions(-)

diff --git a/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss b/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
index 7e5b1c3..279f0f7 100644
--- a/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
+++ b/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
@@ -5,26 +5,89 @@
     flex-direction: column;
 }
 
+.header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 60%;
+    margin: auto;
+}
+
+.navbar {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background-color: #e9e8e8;
+        z-index: 1;
+    }
+}
+
+.navItem {
+    flex: 1;
+    text-align: center;
+    padding: 0.8rem 0;
+    cursor: pointer;
+    color: #333;
+    transition: color 0.3s ease;
+
+    &:hover {
+        color: var(--purple);
+    }
+}
+
+.activeIndicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    width: 25%;
+    background-color: var(--purple);
+    z-index: 2;
+    transition: transform 0.3s ease;
+}
+
+.content {
+    margin-top: 1rem;
+    padding: 1rem;
+    
+    h4 {
+        font-weight: bold;
+    }
+
+    p {
+        margin: 0;
+    }
+}
+
 .listing {
     width: 60%;
     display: flex;
     flex-direction: column;
     margin: auto;
     justify-content: center;
-    padding: var(--medium-spacer);
+    padding: var(--small-spacer);
     text-align: left;
-    background-color: var(--secondary);
-    background-color: var(--background-secondary);
     color: var(--text-light);
     border-style: solid;
-    border-width: 2px; // change from hard code
-    border-color: var(--gray-100);
+    border-width: 2px;
+    background-color: transparent;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.374);
 }
 
 .title {
     width: 60%;
     justify-content: center;
-    margin: auto;
+    //margin: auto;
     padding: var(--small-spacer);
     text-align: left;
 }
@@ -181,6 +244,15 @@
     font-weight: 500;
 }
 
+.delete_button {
+    padding: var(--tiny-spacer) var(--medium-spacer);
+    border: none;
+    border-radius: var(--tiny-spacer);
+    cursor: pointer;
+    background-color: transparent;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
 .toggle_container {
     display: flex;
     align-items: center;
diff --git a/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx b/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
index db933e9..06c38ea 100644
--- a/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
+++ b/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
@@ -5,7 +5,38 @@ import React, { useState } from 'react';
 import Textbox from '@components/Textbox/Textbox';
 import { FormEvent } from 'react';
 
+const ItemsBar = ({
+  items,
+  activeIndex,
+  onTabChange,
+}: {
+  items: string[];
+  activeIndex: number;
+  onTabChange: (index: number) => void;
+}) => {
+  return (
+    <nav className={styles.navbar}>
+      {items.map((item, index) => (
+        <div
+          key={index}
+          className={`${styles.navItem} ${
+            activeIndex === index ? styles.active : ''
+          }`}
+          onClick={() => onTabChange(index)}
+        >
+          {item}
+        </div>
+      ))}
+      <div
+        className={styles.activeIndicator}
+        style={{ transform: `translateX(${activeIndex * 100}%)` }}
+      />
+    </nav>
+  );
+};
+
 export default function ProductForm() {
+  const [activeTab, setActiveTab] = useState(0);
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     console.log('Form submitted');
@@ -26,12 +57,60 @@ export default function ProductForm() {
       ...prevTags.slice(index + 1),
     ]);
   };
+  const renderContent = () => {
+    switch (activeTab) {
+      case 0:
+        return (
+          <div>
+            <h4>About the Product</h4>
+            <p> details </p>
+          </div>
+        );
+      case 1:
+        return (
+          <div>
+            <h4>Details</h4>
+            <p> details</p>
+          </div>
+        );
+      case 2:
+        return (
+          <div>
+            <h4>Shipping Information</h4>
+            <p> placeholder </p>
+          </div>
+        );
+      case 3:
+        return (
+          <div>
+            <h4>Carriers Information</h4>
+            <p> placeholder </p>
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
   return (
     <div className={styles.container}>
-      <div className={styles.title}>
-        <h3>Listing</h3>
+      <div className={styles.header}>
+        <div className={styles.title}>
+          <h3>Listing</h3>
+        </div>
+        <div className={styles.button_container}>
+          <button className={styles.delete_button}>Delete</button>
+        </div>
       </div>
+      {/* Content of Product Form */}
       <div className={styles.listing}>
+        {/* Navigation Bar == Items bar*/}
+        <ItemsBar
+          items={['About', 'Details', 'Shipping', 'Carriers']}
+          activeIndex={activeTab}
+          onTabChange={setActiveTab}
+        />
+        {/* Dynamic Content */}
+        <div className={styles.content}>{renderContent()}</div>
         <form onSubmit={handleSubmit}>
           <div className={styles.img_container}>
             <Image
@@ -94,8 +173,16 @@ export default function ProductForm() {
             </div>
           </div>
           <div className={styles.button_container}>
-            <input className={styles.white_button} type="reset" value="Cancel" />
-            <input className={styles.purple_button} type="submit" value="Save" />
+            <input
+              className={styles.white_button}
+              type="reset"
+              value="Cancel"
+            />
+            <input
+              className={styles.purple_button}
+              type="submit"
+              value="Save & Next"
+            />
           </div>
         </form>
       </div>

From 88f3d927a9374abfbe222d3bea222ba4b01cedbd Mon Sep 17 00:00:00 2001
From: palina0k <korzik.polina@gmail.com>
Date: Thu, 24 Apr 2025 19:31:13 -0700
Subject: [PATCH 3/8] About and Details contain all of the necessary inputs
 now, only missing correct design.

---
 .../_components/ProductForm.module.scss       | 212 +++++++--------
 .../product-form/_components/ProductForm.tsx  | 254 +++++++++++++-----
 2 files changed, 289 insertions(+), 177 deletions(-)

diff --git a/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss b/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
index 279f0f7..12908eb 100644
--- a/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
+++ b/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
@@ -92,121 +92,123 @@
     text-align: left;
 }
 
-.img_container {
-    padding: var(--large-spacer) var(--medium-spacer);
-    margin-bottom: var(--medium-spacer);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: var(--tiny-spacer);
-    background-color: var(--background-upload);
-    border-style: dashed;
-    border-width: 1px;
-    border-color: var(--gray-500);
-    border-radius: var(--tiny-spacer);
-
-    p {
-        font-size: 80%;
-        font-weight: 500;
-    }
-
-    .purple_button {
-        padding: var(--tiny-spacer) var(--small-spacer);
-        font-size: 80%;
-    }
-}
-
-.inputs_container {
-    margin: var(--small-spacer) 0;
-
-    .column_container {
+.subpage_container{
+    .img_container {
+        padding: var(--large-spacer) var(--medium-spacer);
+        margin-bottom: var(--medium-spacer);
         display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
+        flex-direction: column;
+        justify-content: center;
         align-items: center;
-        gap: var(--large-spacer);
-
-        @include media.tablet {
-            gap: var(--medium-spacer);
-        }
-
-        @include media.phone {
-            flex-direction: column;
-            align-items: flex-start;
-            gap: var(--tiny-spacer);
-        }   
-
-        input {
-            width: 50%;
-
-            @include media.phone {
-                width: 100%;
-            }
-        }
-    }
-
-    .input_container {
-        width: 100%;
-        padding: var(--tiny-spacer) 0;
-    }
-
-    input {
-        width: 100%;
-        padding: var(--small-spacer) var(--small-spacer);
-        margin: var(--tiny-spacer) 0;
-        border-style: solid;
+        gap: var(--tiny-spacer);
+        background-color: var(--background-upload);
+        border-style: dashed;
         border-width: 1px;
         border-color: var(--gray-500);
         border-radius: var(--tiny-spacer);
-        outline: none;
-    }
-
-    input::placeholder {
-        color: var(--gray-500);
-    }
-
-    p {
-        font-size: 90%;
-        font-weight: 500;
+    
+        p {
+            font-size: 80%;
+            font-weight: 500;
+        }
+    
+        .purple_button {
+            padding: var(--tiny-spacer) var(--small-spacer);
+            font-size: 80%;
+        }
     }
-
-    h4 {
-        padding: var(--small-spacer) 0;
+    
+    .inputs_container {
+        margin: var(--small-spacer) 0;
+    
+        .column_container {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            gap: var(--large-spacer);
+    
+            @include media.tablet {
+                gap: var(--medium-spacer);
+            }
+    
+            @include media.phone {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: var(--tiny-spacer);
+            }   
+    
+            input {
+                width: 50%;
+    
+                @include media.phone {
+                    width: 100%;
+                }
+            }
+        }
+    
+        .input_container {
+            width: 100%;
+            padding: var(--tiny-spacer) 0;
+        }
+    
+        input {
+            width: 100%;
+            padding: var(--small-spacer) var(--small-spacer);
+            margin: var(--tiny-spacer) 0;
+            border-style: solid;
+            border-width: 1px;
+            border-color: var(--gray-500);
+            border-radius: var(--tiny-spacer);
+            outline: none;
+        }
+    
+        input::placeholder {
+            color: var(--gray-500);
+        }
+    
+        p {
+            font-size: 90%;
+            font-weight: 500;
+        }
+    
+        h4 {
+            padding: var(--small-spacer) 0;
+        }
     }
-}
-
-.selected_tags {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-content: flex-start;
-    flex-wrap: wrap;
-    overflow: scroll;
-    scrollbar-width: none;
-    gap: var(--tiny-spacer);
-    border: solid;
-    border-color: var(--gray-500);
-    border-width: 1px;
-    border-radius: var(--tiny-spacer);
-    padding: var(--small-spacer);
-    height: 160px;
-
-    .tag_display {
-        align-self: flex-start;
+    
+    .selected_tags {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-content: flex-start;
+        flex-wrap: wrap;
+        overflow: scroll;
+        scrollbar-width: none;
+        gap: var(--tiny-spacer);
         border: solid;
         border-color: var(--gray-500);
         border-width: 1px;
-        border-radius: 3px;
-        padding: var(--tiny-spacer) var(--small-spacer);
-        font-size: 90%;
-        font-weight: 500;
-    }
-
-    span {
-        color: var(--gray-500);
-        margin-left: var(--tiny-spacer);
-        cursor: pointer;
+        border-radius: var(--tiny-spacer);
+        padding: var(--small-spacer);
+        height: 160px;
+    
+        .tag_display {
+            align-self: flex-start;
+            border: solid;
+            border-color: var(--gray-500);
+            border-width: 1px;
+            border-radius: 3px;
+            padding: var(--tiny-spacer) var(--small-spacer);
+            font-size: 90%;
+            font-weight: 500;
+        }
+    
+        span {
+            color: var(--gray-500);
+            margin-left: var(--tiny-spacer);
+            cursor: pointer;
+        }
     }
 }
 
diff --git a/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx b/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
index 06c38ea..69e4b22 100644
--- a/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
+++ b/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
@@ -2,7 +2,6 @@
 import styles from './ProductForm.module.scss';
 import Image from 'next/image';
 import React, { useState } from 'react';
-import Textbox from '@components/Textbox/Textbox';
 import { FormEvent } from 'react';
 
 const ItemsBar = ({
@@ -57,34 +56,205 @@ export default function ProductForm() {
       ...prevTags.slice(index + 1),
     ]);
   };
+  const [types, setTypes] = useState<string[]>([]);
+  const addType = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    const input = event.target as HTMLInputElement;
+    const newType = input.value;
+    if (newType !== '') {
+      setTypes((prevTypes) => [...prevTypes, newType]);
+    }
+    input.value = '';
+  };
+  const deleteType = (index: number) => {
+    setTypes((prevTypes) => [
+      ...prevTypes.slice(0, index),
+      ...prevTypes.slice(index + 1),
+    ]);
+  };
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+  });
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
   const renderContent = () => {
     switch (activeTab) {
       case 0:
         return (
-          <div>
-            <h4>About the Product</h4>
-            <p> details </p>
+          <div className={styles.subpage_container}>
+            {/* Title - Text Box, Category - Text Box
+                Description - Larger Text Box
+                Product Type - Dropdown selector, Tags - Dropdown selector
+                Media - Image Uploading (placholder) */}
+            <form onSubmit={handleSubmit}>
+              <div className={styles.inputs_container}>
+                <div className={styles.input_container}>
+                  <p>Title</p>
+                  <input
+                    type="text"
+                    name="title"
+                    value={FormDataEvent.title}
+                    onChange={handleInputChange}
+                  />
+                  <p>Category</p>
+                  <div className={styles.column_container}>
+                    <input type="text" name="category" />
+                    {/* <div className={styles.toggle_container}>
+                      <p>List Product</p>
+                      <input
+                        className={styles.toggle}
+                        type="checkbox"
+                        name="list_toggle"
+                      />
+                    </div> */}
+                  </div>
+                </div>
+                <div className={styles.input_container}>
+                  <p>Description</p>
+                  <input
+                    type="text"
+                    name="description"
+                    value={FormDataEvent.description}
+                    onChange={handleInputChange}
+                  />
+                </div>
+                <div className={styles.input_container}>
+                  <p>Product Type</p> {/* unlink from tags section */}
+                  <input
+                    onKeyDown={(
+                      event: React.KeyboardEvent<HTMLInputElement>
+                    ) => {
+                      if (event.key === 'Enter') {
+                        addType(event);
+                      }
+                    }}
+                    id="type_search"
+                    type="text"
+                    placeholder="Watch.."
+                  />
+                  <div className={styles.selected_tags}>
+                    {types.map((type, index) => (
+                      <p key={index} className={styles.tag_display}>
+                        {type} <span onClick={() => deleteType(index)}>x</span>
+                      </p>
+                    ))}
+                  </div>
+                </div>
+                <div className={styles.input_container}>
+                  <p>Tags</p>
+                  <input
+                    onKeyDown={(
+                      event: React.KeyboardEvent<HTMLInputElement>
+                    ) => {
+                      if (event.key === 'Enter') {
+                        addTag(event);
+                      }
+                    }}
+                    id="tags_search"
+                    type="text"
+                    placeholder="Watch.."
+                  />
+                  <div className={styles.selected_tags}>
+                    {tags.map((tag, index) => (
+                      <p key={index} className={styles.tag_display}>
+                        {tag} <span onClick={() => deleteTag(index)}>x</span>
+                      </p>
+                    ))}
+                  </div>
+                </div>
+                <div className={styles.input_container}>
+                  <p>Media</p>
+                </div>
+                <div className={styles.img_container}>
+                  <Image
+                    src="/icons/cloud_upload.svg"
+                    alt="upload icon"
+                    width={34}
+                    height={34}
+                  />
+                  <p>Drag and Drop here</p>
+                  <p>or</p>
+                  <button className={styles.purple_button}>Select File</button>
+                </div>
+              </div>
+            </form>
           </div>
         );
       case 1:
         return (
-          <div>
-            <h4>Details</h4>
-            <p> details</p>
+          <div className={styles.subpage_container}>
+            <div className={styles.inputs_container}>
+              {/* Title - Shows input from About
+                  Description - Shows input from About
+                  Pricing - Text box, Processing Time - Text box
+                  Item Weight (Prepared for Packing) - 2 Text boxes (one for lbs, one for oz)
+                  Length - Text box, Width - Text box, Height - Text box */}
+              <div className={styles.input_container}>
+                <p>
+                  <strong>{formData.title}</strong>
+                </p>
+                <p>{formData.description}</p>
+              </div>
+              <div className={styles.img_container}>
+                <Image
+                  src="/icons/cloud_upload.svg"
+                  alt="upload icon"
+                  width={34}
+                  height={34}
+                />
+              </div>
+              <div className={styles.input_container}>
+                <p>Pricing</p>
+                <div className={styles.column_container}>
+                  <input type="text" name="pricing" />
+                </div>
+                <p>Processing Time</p>
+                <div className={styles.column_container}>
+                  <input type="text" name="processing_time" />
+                </div>
+              </div>
+              <div className={styles.input_container}>
+                <p>Item Weight (Prepared for Packing)</p>
+                <div className={styles.column_container}>
+                  <input type="text" name="pounds" />
+                  <input type="text" name="ounces" />
+                </div>
+              </div>
+              <div className={styles.input_container}>
+                <p>Length</p>
+                <div className={styles.column_container}>
+                  <input type="text" name="processing_time" />
+                </div>
+                <p>Width</p>
+                <div className={styles.column_container}>
+                  <input type="text" name="processing_time" />
+                </div>
+                <p>Height</p>
+                <div className={styles.column_container}>
+                  <input type="text" name="processing_time" />
+                </div>
+              </div>
+            </div>
           </div>
         );
       case 2:
         return (
-          <div>
+          <div className={styles.subpage_container}>
             <h4>Shipping Information</h4>
-            <p> placeholder </p>
+            <p> Placeholder </p>
           </div>
         );
       case 3:
         return (
-          <div>
+          <div className={styles.subpage_container}>
             <h4>Carriers Information</h4>
-            <p> placeholder </p>
+            <p> Placeholder </p>
           </div>
         );
       default:
@@ -110,68 +280,8 @@ export default function ProductForm() {
           onTabChange={setActiveTab}
         />
         {/* Dynamic Content */}
-        <div className={styles.content}>{renderContent()}</div>
         <form onSubmit={handleSubmit}>
-          <div className={styles.img_container}>
-            <Image
-              src="/icons/cloud_upload.svg"
-              alt="upload icon"
-              width={34}
-              height={34}
-            />
-            <p>Drag and Drop here</p>
-            <p>or</p>
-            <button className={styles.purple_button}>Select File</button>
-          </div>
-          <div className={styles.inputs_container}>
-            <div className={styles.input_container}>
-              <p>Product Name</p>
-              <input type="text" name="product_name" placeholder="iWatch" />
-            </div>
-            <div className={styles.input_container}>
-              <p>Price</p>
-              <div className={styles.column_container}>
-                <input type="text" name="product_price" placeholder="$$" />
-                <div className={styles.toggle_container}>
-                  <p>List Product</p>
-                  <input
-                    className={styles.toggle}
-                    type="checkbox"
-                    name="list_toggle"
-                  />
-                </div>
-              </div>
-            </div>
-            <h4>Details</h4>
-            <div className={styles.input_container}>
-              <p>Tags</p>
-              <input
-                onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
-                  if (event.key === 'Enter') {
-                    addTag(event);
-                  }
-                }}
-                id="tags_search"
-                type="text"
-                placeholder="Watch.."
-              />
-              <div className={styles.selected_tags}>
-                {tags.map((tag, index) => (
-                  <p key={index} className={styles.tag_display}>
-                    {tag} <span onClick={() => deleteTag(index)}>x</span>
-                  </p>
-                ))}
-              </div>
-            </div>
-            <div className={styles.input_container}>
-              <p>Product Description</p>
-              <Textbox />
-            </div>
-            <div className={styles.input_container}>
-              <p>Product Details</p>
-              <Textbox />
-            </div>
-          </div>
+          <div className={styles.content}>{renderContent()}</div>
           <div className={styles.button_container}>
             <input
               className={styles.white_button}

From 78884239212aa0bf3430fb5c1f95c2fc6bc4beac Mon Sep 17 00:00:00 2001
From: palina0k <korzik.polina@gmail.com>
Date: Thu, 24 Apr 2025 19:49:08 -0700
Subject: [PATCH 4/8] Fixed Errors for TypeScript check

---
 .../(app)/products/product-form/_components/ProductForm.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx b/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
index 69e4b22..3d5846d 100644
--- a/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
+++ b/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
@@ -76,7 +76,7 @@ export default function ProductForm() {
     title: '',
     description: '',
   });
-  const handleInputChange = (event) => {
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
     setFormData((prevData) => ({
       ...prevData,
@@ -99,7 +99,7 @@ export default function ProductForm() {
                   <input
                     type="text"
                     name="title"
-                    value={FormDataEvent.title}
+                    value={formData.title}
                     onChange={handleInputChange}
                   />
                   <p>Category</p>
@@ -120,7 +120,7 @@ export default function ProductForm() {
                   <input
                     type="text"
                     name="description"
-                    value={FormDataEvent.description}
+                    value={formData.description}
                     onChange={handleInputChange}
                   />
                 </div>

From 7388761aded13ffbff4085e5475668367e24285e Mon Sep 17 00:00:00 2001
From: palina0k <korzik.polina@gmail.com>
Date: Thu, 22 May 2025 22:10:54 -0700
Subject: [PATCH 5/8] Work in Progress - separated each component of the
 listing page into its own  file; incorporated the existing Textbox component;
 still working on the accurate design/format as well as how the listing will
 be saved/stored.

---
 .../product-form/_components/AboutPage.tsx    | 135 +++++++++++
 .../product-form/_components/CarriersPage.tsx |  11 +
 .../product-form/_components/DetailsPage.tsx  |  78 ++++++
 .../_components/ProductForm.module.scss       |  43 ++--
 .../product-form/_components/ProductForm.tsx  | 225 ++----------------
 .../product-form/_components/ShippingPage.tsx |  11 +
 .../ShortInput/ShortInput.module.scss         |  15 ++
 .../_components/ShortInput/ShortInput.tsx     |  38 +++
 public/icons/trash_red.svg                    |   1 +
 9 files changed, 328 insertions(+), 229 deletions(-)
 create mode 100644 app/(pages)/(app)/products/product-form/_components/AboutPage.tsx
 create mode 100644 app/(pages)/(app)/products/product-form/_components/CarriersPage.tsx
 create mode 100644 app/(pages)/(app)/products/product-form/_components/DetailsPage.tsx
 create mode 100644 app/(pages)/(app)/products/product-form/_components/ShippingPage.tsx
 create mode 100644 app/(pages)/_components/ShortInput/ShortInput.module.scss
 create mode 100644 app/(pages)/_components/ShortInput/ShortInput.tsx
 create mode 100644 public/icons/trash_red.svg

diff --git a/app/(pages)/(app)/products/product-form/_components/AboutPage.tsx b/app/(pages)/(app)/products/product-form/_components/AboutPage.tsx
new file mode 100644
index 0000000..67efda7
--- /dev/null
+++ b/app/(pages)/(app)/products/product-form/_components/AboutPage.tsx
@@ -0,0 +1,135 @@
+'use client';
+import styles from './ProductForm.module.scss';
+import Image from 'next/image';
+import React, { useState } from 'react';
+import Textbox from '@components/Textbox/Textbox';
+// import ShortInput from '@components/ShortInput/ShortInput';
+
+export default function AboutPage() {
+  const [tags, setTags] = useState<string[]>([]);
+  const addTag = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    const input = event.target as HTMLInputElement;
+    const newTag = input.value;
+    if (newTag !== '') {
+      setTags((prevTags) => [...prevTags, newTag]);
+    }
+    input.value = '';
+  };
+  const deleteTag = (index: number) => {
+    setTags((prevTags) => [
+      ...prevTags.slice(0, index),
+      ...prevTags.slice(index + 1),
+    ]);
+  };
+  const [types, setTypes] = useState<string[]>([]);
+  const addType = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    const input = event.target as HTMLInputElement;
+    const newType = input.value;
+    if (newType !== '') {
+      setTypes((prevTypes) => [...prevTypes, newType]);
+    }
+    input.value = '';
+  };
+  const deleteType = (index: number) => {
+    setTypes((prevTypes) => [
+      ...prevTypes.slice(0, index),
+      ...prevTypes.slice(index + 1),
+    ]);
+  };
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+  });
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+  return (
+    <div className={styles.subpage_container}>
+      {/* Title - Text Box, Category - Text Box
+            Description - Larger Text Box
+            Product Type - Dropdown selector, Tags - Dropdown selector
+            Media - Image Uploading (placholder) */}
+      <div className={styles.inputs_container}>
+        <div className={styles.row_container}>
+          <div className={styles.column_container}>
+            <p>Title</p>
+            <input
+              type="text"
+              name="title"
+              value={formData.title}
+              onChange={handleInputChange}
+            />
+          </div>
+          <div className={styles.column_container}>
+            <p>Category</p>
+            <input type="text" name="category" />
+          </div>
+        </div>
+        <div>
+          <p>Description</p>
+          <Textbox />
+        </div>
+        <div className={styles.input_container}>
+          <p>Product Type</p> {/* unlink from tags section */}
+          <input
+            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+              if (event.key === 'Enter') {
+                addType(event);
+              }
+            }}
+            id="type_search"
+            type="text"
+            placeholder="Watch.."
+          />
+          <div className={styles.selected_tags}>
+            {types.map((type, index) => (
+              <p key={index} className={styles.tag_display}>
+                {type} <span onClick={() => deleteType(index)}>x</span>
+              </p>
+            ))}
+          </div>
+        </div>
+        <div className={styles.input_container}>
+          <p>Tags</p>
+          <input
+            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+              if (event.key === 'Enter') {
+                addTag(event);
+              }
+            }}
+            id="tags_search"
+            type="text"
+            placeholder="Watch.."
+          />
+          <div className={styles.selected_tags}>
+            {tags.map((tag, index) => (
+              <p key={index} className={styles.tag_display}>
+                {tag} <span onClick={() => deleteTag(index)}>x</span>
+              </p>
+            ))}
+          </div>
+        </div>
+        <div className={styles.input_container}>
+          <p>Media</p>
+        </div>
+        <div className={styles.img_container}>
+          <Image
+            src="/icons/cloud_upload.svg"
+            alt="upload icon"
+            width={34}
+            height={34}
+          />
+          <p>Drag and Drop here</p>
+          <p>or</p>
+          <button className={styles.purple_button}>Select File</button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(pages)/(app)/products/product-form/_components/CarriersPage.tsx b/app/(pages)/(app)/products/product-form/_components/CarriersPage.tsx
new file mode 100644
index 0000000..f7d51e2
--- /dev/null
+++ b/app/(pages)/(app)/products/product-form/_components/CarriersPage.tsx
@@ -0,0 +1,11 @@
+'use client';
+import styles from './ProductForm.module.scss';
+
+export default function CarriersPage() {
+  return (
+    <div className={styles.subpage_container}>
+      <h4>Carriers Information</h4>
+      <p> Placeholder </p>
+    </div>
+  );
+}
diff --git a/app/(pages)/(app)/products/product-form/_components/DetailsPage.tsx b/app/(pages)/(app)/products/product-form/_components/DetailsPage.tsx
new file mode 100644
index 0000000..17ceec1
--- /dev/null
+++ b/app/(pages)/(app)/products/product-form/_components/DetailsPage.tsx
@@ -0,0 +1,78 @@
+'use client';
+import styles from './ProductForm.module.scss';
+import Image from 'next/image';
+import React, { useState } from 'react';
+
+export default function DetailsPage() {
+  const [formData] = useState({
+    title: '',
+    description: '',
+  });
+  return (
+    <div className={styles.subpage_container}>
+      <div className={styles.inputs_container}>
+        {/* Title - Shows input from About
+                Description - Shows input from About
+                Pricing - Text box, Processing Time - Text box
+                Item Weight (Prepared for Packing) - 2 Text boxes (one for lbs, one for oz)
+                Length - Text box, Width - Text box, Height - Text box */}
+        <div className={styles.input_container}>
+          <p>
+            <strong>{formData.title}</strong>
+          </p>
+          <p>{formData.description}</p>
+        </div>
+        <div className={styles.img_container}>
+          <Image
+            src="/icons/cloud_upload.svg"
+            alt="upload icon"
+            width={34}
+            height={34}
+          />
+        </div>
+        <div className={styles.inputs_container}>
+          <div className={styles.row_container}>
+            <div className={styles.column_container}>
+              <p>Pricing</p>
+              <input type="text" name="pricing" />
+            </div>
+            <div className={styles.column_container}>
+              <p>Processing Time</p>
+              <input type="text" name="processing_time" />
+            </div>
+          </div>
+        </div>
+        <div className={styles.inputs_container}>
+          <div className={styles.row_container}>
+            <div className={styles.column_container}>
+              <p>Item Weight (Prepared for Packing)</p>
+              <input type="text" name="pounds" />
+            </div>
+            <div className={styles.column_container}>
+              <p></p>
+              <p></p>
+              <p></p>
+              <input type="text" name="ounces" />
+            </div>
+          </div>
+        </div>
+        <div className={styles.inputs_container}>
+          <div className={styles.special_row_container}>
+            <div className={styles.column_container}>
+              <p>Length</p>
+              <input type="text" name="processing_time" />
+            </div>
+            <div className={styles.column_container}>
+              <p>Width</p>
+              <input type="text" name="processing_time" />
+            </div>
+            <div className={styles.column_container}>
+              <p>Height</p>
+              <input type="text" name="processing_time" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss b/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
index 12908eb..c39dc52 100644
--- a/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
+++ b/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
@@ -119,33 +119,39 @@
     }
     
     .inputs_container {
-        margin: var(--small-spacer) 0;
-    
+
+        .row_container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            row-gap: 1em;
+            gap: var(--small-spacer);
+
+        }
+
+        .special_row_container{
+            display: flex;
+            grid-template-columns: 1fr 1fr 1fr;
+            gap: var(--small-spacer);
+        }
+
         .column_container {
             display: flex;
-            flex-direction: row;
-            justify-content: flex-start;
-            align-items: center;
-            gap: var(--large-spacer);
-    
-            @include media.tablet {
-                gap: var(--medium-spacer);
-            }
-    
+            flex-direction: column;
+            gap: var(--tiny-spacer);
+
             @include media.phone {
-                flex-direction: column;
-                align-items: flex-start;
                 gap: var(--tiny-spacer);
-            }   
-    
+            }
+
             input {
-                width: 50%;
-    
+                width: 100%;
+
                 @include media.phone {
-                    width: 100%;
+                width: 100%;
                 }
             }
         }
+
     
         .input_container {
             width: 100%;
@@ -216,6 +222,7 @@
     display: flex;
     flex-direction: row;
     justify-content: right;
+    align-items: center;
     gap: var(--small-spacer);
 
     @include media.phone {
diff --git a/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx b/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
index 3d5846d..d417b71 100644
--- a/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
+++ b/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
@@ -3,6 +3,10 @@ import styles from './ProductForm.module.scss';
 import Image from 'next/image';
 import React, { useState } from 'react';
 import { FormEvent } from 'react';
+import AboutPage from './AboutPage';
+import DetailsPage from './DetailsPage';
+import ShippingPage from './ShippingPage';
+import CarriersPage from './CarriersPage';
 
 const ItemsBar = ({
   items,
@@ -40,223 +44,16 @@ export default function ProductForm() {
     event.preventDefault();
     console.log('Form submitted');
   };
-  const [tags, setTags] = useState<string[]>([]);
-  const addTag = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    event.preventDefault();
-    const input = event.target as HTMLInputElement;
-    const newTag = input.value;
-    if (newTag !== '') {
-      setTags((prevTags) => [...prevTags, newTag]);
-    }
-    input.value = '';
-  };
-  const deleteTag = (index: number) => {
-    setTags((prevTags) => [
-      ...prevTags.slice(0, index),
-      ...prevTags.slice(index + 1),
-    ]);
-  };
-  const [types, setTypes] = useState<string[]>([]);
-  const addType = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    event.preventDefault();
-    const input = event.target as HTMLInputElement;
-    const newType = input.value;
-    if (newType !== '') {
-      setTypes((prevTypes) => [...prevTypes, newType]);
-    }
-    input.value = '';
-  };
-  const deleteType = (index: number) => {
-    setTypes((prevTypes) => [
-      ...prevTypes.slice(0, index),
-      ...prevTypes.slice(index + 1),
-    ]);
-  };
-  const [formData, setFormData] = useState({
-    title: '',
-    description: '',
-  });
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = event.target;
-    setFormData((prevData) => ({
-      ...prevData,
-      [name]: value,
-    }));
-  };
   const renderContent = () => {
     switch (activeTab) {
       case 0:
-        return (
-          <div className={styles.subpage_container}>
-            {/* Title - Text Box, Category - Text Box
-                Description - Larger Text Box
-                Product Type - Dropdown selector, Tags - Dropdown selector
-                Media - Image Uploading (placholder) */}
-            <form onSubmit={handleSubmit}>
-              <div className={styles.inputs_container}>
-                <div className={styles.input_container}>
-                  <p>Title</p>
-                  <input
-                    type="text"
-                    name="title"
-                    value={formData.title}
-                    onChange={handleInputChange}
-                  />
-                  <p>Category</p>
-                  <div className={styles.column_container}>
-                    <input type="text" name="category" />
-                    {/* <div className={styles.toggle_container}>
-                      <p>List Product</p>
-                      <input
-                        className={styles.toggle}
-                        type="checkbox"
-                        name="list_toggle"
-                      />
-                    </div> */}
-                  </div>
-                </div>
-                <div className={styles.input_container}>
-                  <p>Description</p>
-                  <input
-                    type="text"
-                    name="description"
-                    value={formData.description}
-                    onChange={handleInputChange}
-                  />
-                </div>
-                <div className={styles.input_container}>
-                  <p>Product Type</p> {/* unlink from tags section */}
-                  <input
-                    onKeyDown={(
-                      event: React.KeyboardEvent<HTMLInputElement>
-                    ) => {
-                      if (event.key === 'Enter') {
-                        addType(event);
-                      }
-                    }}
-                    id="type_search"
-                    type="text"
-                    placeholder="Watch.."
-                  />
-                  <div className={styles.selected_tags}>
-                    {types.map((type, index) => (
-                      <p key={index} className={styles.tag_display}>
-                        {type} <span onClick={() => deleteType(index)}>x</span>
-                      </p>
-                    ))}
-                  </div>
-                </div>
-                <div className={styles.input_container}>
-                  <p>Tags</p>
-                  <input
-                    onKeyDown={(
-                      event: React.KeyboardEvent<HTMLInputElement>
-                    ) => {
-                      if (event.key === 'Enter') {
-                        addTag(event);
-                      }
-                    }}
-                    id="tags_search"
-                    type="text"
-                    placeholder="Watch.."
-                  />
-                  <div className={styles.selected_tags}>
-                    {tags.map((tag, index) => (
-                      <p key={index} className={styles.tag_display}>
-                        {tag} <span onClick={() => deleteTag(index)}>x</span>
-                      </p>
-                    ))}
-                  </div>
-                </div>
-                <div className={styles.input_container}>
-                  <p>Media</p>
-                </div>
-                <div className={styles.img_container}>
-                  <Image
-                    src="/icons/cloud_upload.svg"
-                    alt="upload icon"
-                    width={34}
-                    height={34}
-                  />
-                  <p>Drag and Drop here</p>
-                  <p>or</p>
-                  <button className={styles.purple_button}>Select File</button>
-                </div>
-              </div>
-            </form>
-          </div>
-        );
+        return <AboutPage />;
       case 1:
-        return (
-          <div className={styles.subpage_container}>
-            <div className={styles.inputs_container}>
-              {/* Title - Shows input from About
-                  Description - Shows input from About
-                  Pricing - Text box, Processing Time - Text box
-                  Item Weight (Prepared for Packing) - 2 Text boxes (one for lbs, one for oz)
-                  Length - Text box, Width - Text box, Height - Text box */}
-              <div className={styles.input_container}>
-                <p>
-                  <strong>{formData.title}</strong>
-                </p>
-                <p>{formData.description}</p>
-              </div>
-              <div className={styles.img_container}>
-                <Image
-                  src="/icons/cloud_upload.svg"
-                  alt="upload icon"
-                  width={34}
-                  height={34}
-                />
-              </div>
-              <div className={styles.input_container}>
-                <p>Pricing</p>
-                <div className={styles.column_container}>
-                  <input type="text" name="pricing" />
-                </div>
-                <p>Processing Time</p>
-                <div className={styles.column_container}>
-                  <input type="text" name="processing_time" />
-                </div>
-              </div>
-              <div className={styles.input_container}>
-                <p>Item Weight (Prepared for Packing)</p>
-                <div className={styles.column_container}>
-                  <input type="text" name="pounds" />
-                  <input type="text" name="ounces" />
-                </div>
-              </div>
-              <div className={styles.input_container}>
-                <p>Length</p>
-                <div className={styles.column_container}>
-                  <input type="text" name="processing_time" />
-                </div>
-                <p>Width</p>
-                <div className={styles.column_container}>
-                  <input type="text" name="processing_time" />
-                </div>
-                <p>Height</p>
-                <div className={styles.column_container}>
-                  <input type="text" name="processing_time" />
-                </div>
-              </div>
-            </div>
-          </div>
-        );
+        return <DetailsPage />;
       case 2:
-        return (
-          <div className={styles.subpage_container}>
-            <h4>Shipping Information</h4>
-            <p> Placeholder </p>
-          </div>
-        );
+        return <ShippingPage />;
       case 3:
-        return (
-          <div className={styles.subpage_container}>
-            <h4>Carriers Information</h4>
-            <p> Placeholder </p>
-          </div>
-        );
+        return <CarriersPage />;
       default:
         return null;
     }
@@ -268,6 +65,12 @@ export default function ProductForm() {
           <h3>Listing</h3>
         </div>
         <div className={styles.button_container}>
+          <Image
+            src="/icons/trash_red.svg"
+            alt="delete icon"
+            width={34}
+            height={34}
+          />
           <button className={styles.delete_button}>Delete</button>
         </div>
       </div>
diff --git a/app/(pages)/(app)/products/product-form/_components/ShippingPage.tsx b/app/(pages)/(app)/products/product-form/_components/ShippingPage.tsx
new file mode 100644
index 0000000..9c86823
--- /dev/null
+++ b/app/(pages)/(app)/products/product-form/_components/ShippingPage.tsx
@@ -0,0 +1,11 @@
+'use client';
+import styles from './ProductForm.module.scss';
+
+export default function ShippingPagge() {
+  return (
+    <div className={styles.subpage_container}>
+      <h4>Shipping Information</h4>
+      <p> Placeholder </p>
+    </div>
+  );
+}
diff --git a/app/(pages)/_components/ShortInput/ShortInput.module.scss b/app/(pages)/_components/ShortInput/ShortInput.module.scss
new file mode 100644
index 0000000..46e3522
--- /dev/null
+++ b/app/(pages)/_components/ShortInput/ShortInput.module.scss
@@ -0,0 +1,15 @@
+.container {
+    position: relative;
+
+    >input {
+        width: 50%;
+    }
+}
+
+.label {
+    position: absolute;
+    left: 12px;
+    transform: translateY(-50%);
+    background-color: white;
+    padding: 0 4px;
+}
\ No newline at end of file
diff --git a/app/(pages)/_components/ShortInput/ShortInput.tsx b/app/(pages)/_components/ShortInput/ShortInput.tsx
new file mode 100644
index 0000000..bac3a81
--- /dev/null
+++ b/app/(pages)/_components/ShortInput/ShortInput.tsx
@@ -0,0 +1,38 @@
+'use client';
+import styles from './ShortInput.module.scss';
+
+interface ShortInputProps {
+  label: string;
+  value: string | number;
+  type: 'text' | 'number';
+  updateValue?: (value: any) => void;
+  disabled?: boolean;
+  required?: boolean;
+}
+
+export default function ShortInput({
+  label,
+  value,
+  type,
+  updateValue = () => {},
+  disabled,
+  required,
+}: ShortInputProps) {
+  return (
+    <div className={styles.container}>
+      <label className={styles.label}>{label}</label>
+      <input
+        type={type}
+        value={value ?? ''}
+        onChange={(event) =>
+          type === 'number'
+            ? updateValue(Number.parseFloat(event.target.value))
+            : updateValue(event.target.value)
+        }
+        disabled={disabled}
+        required={required}
+        style={{ cursor: disabled ? 'not-allowed' : 'text' }}
+      />
+    </div>
+  );
+}
diff --git a/public/icons/trash_red.svg b/public/icons/trash_red.svg
new file mode 100644
index 0000000..cb20cf3
--- /dev/null
+++ b/public/icons/trash_red.svg
@@ -0,0 +1 @@
+<svg fill="#FA5252" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="500px" height="500px"><path d="M 21 0 C 19.355469 0 18 1.355469 18 3 L 18 5 L 10.1875 5 C 10.0625 4.976563 9.9375 4.976563 9.8125 5 L 8 5 C 7.96875 5 7.9375 5 7.90625 5 C 7.355469 5.027344 6.925781 5.496094 6.953125 6.046875 C 6.980469 6.597656 7.449219 7.027344 8 7 L 9.09375 7 L 12.6875 47.5 C 12.8125 48.898438 14.003906 50 15.40625 50 L 34.59375 50 C 35.996094 50 37.1875 48.898438 37.3125 47.5 L 40.90625 7 L 42 7 C 42.359375 7.003906 42.695313 6.816406 42.878906 6.503906 C 43.058594 6.191406 43.058594 5.808594 42.878906 5.496094 C 42.695313 5.183594 42.359375 4.996094 42 5 L 32 5 L 32 3 C 32 1.355469 30.644531 0 29 0 Z M 21 2 L 29 2 C 29.5625 2 30 2.4375 30 3 L 30 5 L 20 5 L 20 3 C 20 2.4375 20.4375 2 21 2 Z M 11.09375 7 L 38.90625 7 L 35.3125 47.34375 C 35.28125 47.691406 34.910156 48 34.59375 48 L 15.40625 48 C 15.089844 48 14.71875 47.691406 14.6875 47.34375 Z M 18.90625 9.96875 C 18.863281 9.976563 18.820313 9.988281 18.78125 10 C 18.316406 10.105469 17.988281 10.523438 18 11 L 18 44 C 17.996094 44.359375 18.183594 44.695313 18.496094 44.878906 C 18.808594 45.058594 19.191406 45.058594 19.503906 44.878906 C 19.816406 44.695313 20.003906 44.359375 20 44 L 20 11 C 20.011719 10.710938 19.894531 10.433594 19.6875 10.238281 C 19.476563 10.039063 19.191406 9.941406 18.90625 9.96875 Z M 24.90625 9.96875 C 24.863281 9.976563 24.820313 9.988281 24.78125 10 C 24.316406 10.105469 23.988281 10.523438 24 11 L 24 44 C 23.996094 44.359375 24.183594 44.695313 24.496094 44.878906 C 24.808594 45.058594 25.191406 45.058594 25.503906 44.878906 C 25.816406 44.695313 26.003906 44.359375 26 44 L 26 11 C 26.011719 10.710938 25.894531 10.433594 25.6875 10.238281 C 25.476563 10.039063 25.191406 9.941406 24.90625 9.96875 Z M 30.90625 9.96875 C 30.863281 9.976563 30.820313 9.988281 30.78125 10 C 30.316406 10.105469 29.988281 10.523438 30 11 L 30 44 C 29.996094 44.359375 30.183594 44.695313 30.496094 44.878906 C 30.808594 45.058594 31.191406 45.058594 31.503906 44.878906 C 31.816406 44.695313 32.003906 44.359375 32 44 L 32 11 C 32.011719 10.710938 31.894531 10.433594 31.6875 10.238281 C 31.476563 10.039063 31.191406 9.941406 30.90625 9.96875 Z"/></svg>
\ No newline at end of file

From 3902580d7510a0fc9ed357765de861544aa4ebe0 Mon Sep 17 00:00:00 2001
From: palina0k <korzik.polina@gmail.com>
Date: Fri, 23 May 2025 09:22:15 -0700
Subject: [PATCH 6/8] Two minor fixes that caused tests to fail.

---
 .../(app)/products/product-form/_components/ProductForm.tsx     | 1 -
 app/(pages)/_components/ShortInput/ShortInput.tsx               | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx b/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
index 545617e..d417b71 100644
--- a/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
+++ b/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
@@ -2,7 +2,6 @@
 import styles from './ProductForm.module.scss';
 import Image from 'next/image';
 import React, { useState } from 'react';
-import Textbox from '@components/Textbox/Textbox';
 import { FormEvent } from 'react';
 import AboutPage from './AboutPage';
 import DetailsPage from './DetailsPage';
diff --git a/app/(pages)/_components/ShortInput/ShortInput.tsx b/app/(pages)/_components/ShortInput/ShortInput.tsx
index bac3a81..9a4912c 100644
--- a/app/(pages)/_components/ShortInput/ShortInput.tsx
+++ b/app/(pages)/_components/ShortInput/ShortInput.tsx
@@ -5,7 +5,7 @@ interface ShortInputProps {
   label: string;
   value: string | number;
   type: 'text' | 'number';
-  updateValue?: (value: any) => void;
+  updateValue?: (value: string | number) => void;
   disabled?: boolean;
   required?: boolean;
 }

From da7156b5e138870b9ef0f47a2ec7a33cab71f433 Mon Sep 17 00:00:00 2001
From: brandonw504 <brandonw504@outlook.com>
Date: Thu, 26 Jun 2025 21:47:37 -0700
Subject: [PATCH 7/8] Some renaming

---
 .../product-form/_components/AboutPage.tsx    | 135 --------
 .../product-form/_components/CarriersPage.tsx |  11 -
 .../product-form/_components/DetailsPage.tsx  |  78 -----
 .../_components/ProductForm.module.scss       | 307 ------------------
 .../product-form/_components/ProductForm.tsx  | 104 ------
 .../product-form/_components/ShippingPage.tsx |  11 -
 .../(app)/products/product-form/page.tsx      |   9 -
 7 files changed, 655 deletions(-)
 delete mode 100644 app/(pages)/(app)/products/product-form/_components/AboutPage.tsx
 delete mode 100644 app/(pages)/(app)/products/product-form/_components/CarriersPage.tsx
 delete mode 100644 app/(pages)/(app)/products/product-form/_components/DetailsPage.tsx
 delete mode 100644 app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
 delete mode 100644 app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
 delete mode 100644 app/(pages)/(app)/products/product-form/_components/ShippingPage.tsx
 delete mode 100644 app/(pages)/(app)/products/product-form/page.tsx

diff --git a/app/(pages)/(app)/products/product-form/_components/AboutPage.tsx b/app/(pages)/(app)/products/product-form/_components/AboutPage.tsx
deleted file mode 100644
index 67efda7..0000000
--- a/app/(pages)/(app)/products/product-form/_components/AboutPage.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-'use client';
-import styles from './ProductForm.module.scss';
-import Image from 'next/image';
-import React, { useState } from 'react';
-import Textbox from '@components/Textbox/Textbox';
-// import ShortInput from '@components/ShortInput/ShortInput';
-
-export default function AboutPage() {
-  const [tags, setTags] = useState<string[]>([]);
-  const addTag = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    event.preventDefault();
-    const input = event.target as HTMLInputElement;
-    const newTag = input.value;
-    if (newTag !== '') {
-      setTags((prevTags) => [...prevTags, newTag]);
-    }
-    input.value = '';
-  };
-  const deleteTag = (index: number) => {
-    setTags((prevTags) => [
-      ...prevTags.slice(0, index),
-      ...prevTags.slice(index + 1),
-    ]);
-  };
-  const [types, setTypes] = useState<string[]>([]);
-  const addType = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    event.preventDefault();
-    const input = event.target as HTMLInputElement;
-    const newType = input.value;
-    if (newType !== '') {
-      setTypes((prevTypes) => [...prevTypes, newType]);
-    }
-    input.value = '';
-  };
-  const deleteType = (index: number) => {
-    setTypes((prevTypes) => [
-      ...prevTypes.slice(0, index),
-      ...prevTypes.slice(index + 1),
-    ]);
-  };
-  const [formData, setFormData] = useState({
-    title: '',
-    description: '',
-  });
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = event.target;
-    setFormData((prevData) => ({
-      ...prevData,
-      [name]: value,
-    }));
-  };
-  return (
-    <div className={styles.subpage_container}>
-      {/* Title - Text Box, Category - Text Box
-            Description - Larger Text Box
-            Product Type - Dropdown selector, Tags - Dropdown selector
-            Media - Image Uploading (placholder) */}
-      <div className={styles.inputs_container}>
-        <div className={styles.row_container}>
-          <div className={styles.column_container}>
-            <p>Title</p>
-            <input
-              type="text"
-              name="title"
-              value={formData.title}
-              onChange={handleInputChange}
-            />
-          </div>
-          <div className={styles.column_container}>
-            <p>Category</p>
-            <input type="text" name="category" />
-          </div>
-        </div>
-        <div>
-          <p>Description</p>
-          <Textbox />
-        </div>
-        <div className={styles.input_container}>
-          <p>Product Type</p> {/* unlink from tags section */}
-          <input
-            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
-              if (event.key === 'Enter') {
-                addType(event);
-              }
-            }}
-            id="type_search"
-            type="text"
-            placeholder="Watch.."
-          />
-          <div className={styles.selected_tags}>
-            {types.map((type, index) => (
-              <p key={index} className={styles.tag_display}>
-                {type} <span onClick={() => deleteType(index)}>x</span>
-              </p>
-            ))}
-          </div>
-        </div>
-        <div className={styles.input_container}>
-          <p>Tags</p>
-          <input
-            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
-              if (event.key === 'Enter') {
-                addTag(event);
-              }
-            }}
-            id="tags_search"
-            type="text"
-            placeholder="Watch.."
-          />
-          <div className={styles.selected_tags}>
-            {tags.map((tag, index) => (
-              <p key={index} className={styles.tag_display}>
-                {tag} <span onClick={() => deleteTag(index)}>x</span>
-              </p>
-            ))}
-          </div>
-        </div>
-        <div className={styles.input_container}>
-          <p>Media</p>
-        </div>
-        <div className={styles.img_container}>
-          <Image
-            src="/icons/cloud_upload.svg"
-            alt="upload icon"
-            width={34}
-            height={34}
-          />
-          <p>Drag and Drop here</p>
-          <p>or</p>
-          <button className={styles.purple_button}>Select File</button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/(pages)/(app)/products/product-form/_components/CarriersPage.tsx b/app/(pages)/(app)/products/product-form/_components/CarriersPage.tsx
deleted file mode 100644
index f7d51e2..0000000
--- a/app/(pages)/(app)/products/product-form/_components/CarriersPage.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-'use client';
-import styles from './ProductForm.module.scss';
-
-export default function CarriersPage() {
-  return (
-    <div className={styles.subpage_container}>
-      <h4>Carriers Information</h4>
-      <p> Placeholder </p>
-    </div>
-  );
-}
diff --git a/app/(pages)/(app)/products/product-form/_components/DetailsPage.tsx b/app/(pages)/(app)/products/product-form/_components/DetailsPage.tsx
deleted file mode 100644
index 17ceec1..0000000
--- a/app/(pages)/(app)/products/product-form/_components/DetailsPage.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-'use client';
-import styles from './ProductForm.module.scss';
-import Image from 'next/image';
-import React, { useState } from 'react';
-
-export default function DetailsPage() {
-  const [formData] = useState({
-    title: '',
-    description: '',
-  });
-  return (
-    <div className={styles.subpage_container}>
-      <div className={styles.inputs_container}>
-        {/* Title - Shows input from About
-                Description - Shows input from About
-                Pricing - Text box, Processing Time - Text box
-                Item Weight (Prepared for Packing) - 2 Text boxes (one for lbs, one for oz)
-                Length - Text box, Width - Text box, Height - Text box */}
-        <div className={styles.input_container}>
-          <p>
-            <strong>{formData.title}</strong>
-          </p>
-          <p>{formData.description}</p>
-        </div>
-        <div className={styles.img_container}>
-          <Image
-            src="/icons/cloud_upload.svg"
-            alt="upload icon"
-            width={34}
-            height={34}
-          />
-        </div>
-        <div className={styles.inputs_container}>
-          <div className={styles.row_container}>
-            <div className={styles.column_container}>
-              <p>Pricing</p>
-              <input type="text" name="pricing" />
-            </div>
-            <div className={styles.column_container}>
-              <p>Processing Time</p>
-              <input type="text" name="processing_time" />
-            </div>
-          </div>
-        </div>
-        <div className={styles.inputs_container}>
-          <div className={styles.row_container}>
-            <div className={styles.column_container}>
-              <p>Item Weight (Prepared for Packing)</p>
-              <input type="text" name="pounds" />
-            </div>
-            <div className={styles.column_container}>
-              <p></p>
-              <p></p>
-              <p></p>
-              <input type="text" name="ounces" />
-            </div>
-          </div>
-        </div>
-        <div className={styles.inputs_container}>
-          <div className={styles.special_row_container}>
-            <div className={styles.column_container}>
-              <p>Length</p>
-              <input type="text" name="processing_time" />
-            </div>
-            <div className={styles.column_container}>
-              <p>Width</p>
-              <input type="text" name="processing_time" />
-            </div>
-            <div className={styles.column_container}>
-              <p>Height</p>
-              <input type="text" name="processing_time" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss b/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
deleted file mode 100644
index c39dc52..0000000
--- a/app/(pages)/(app)/products/product-form/_components/ProductForm.module.scss
+++ /dev/null
@@ -1,307 +0,0 @@
-@use 'media';
-
-.container{
-    display: flex;
-    flex-direction: column;
-}
-
-.header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    width: 60%;
-    margin: auto;
-}
-
-.navbar {
-    display: flex;
-    position: relative;
-    justify-content: space-between;
-    overflow: hidden;
-
-    &::before {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 3px;
-        background-color: #e9e8e8;
-        z-index: 1;
-    }
-}
-
-.navItem {
-    flex: 1;
-    text-align: center;
-    padding: 0.8rem 0;
-    cursor: pointer;
-    color: #333;
-    transition: color 0.3s ease;
-
-    &:hover {
-        color: var(--purple);
-    }
-}
-
-.activeIndicator {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 3px;
-    width: 25%;
-    background-color: var(--purple);
-    z-index: 2;
-    transition: transform 0.3s ease;
-}
-
-.content {
-    margin-top: 1rem;
-    padding: 1rem;
-    
-    h4 {
-        font-weight: bold;
-    }
-
-    p {
-        margin: 0;
-    }
-}
-
-.listing {
-    width: 60%;
-    display: flex;
-    flex-direction: column;
-    margin: auto;
-    justify-content: center;
-    padding: var(--small-spacer);
-    text-align: left;
-    color: var(--text-light);
-    border-style: solid;
-    border-width: 2px;
-    background-color: transparent;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.374);
-}
-
-.title {
-    width: 60%;
-    justify-content: center;
-    //margin: auto;
-    padding: var(--small-spacer);
-    text-align: left;
-}
-
-.subpage_container{
-    .img_container {
-        padding: var(--large-spacer) var(--medium-spacer);
-        margin-bottom: var(--medium-spacer);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: var(--tiny-spacer);
-        background-color: var(--background-upload);
-        border-style: dashed;
-        border-width: 1px;
-        border-color: var(--gray-500);
-        border-radius: var(--tiny-spacer);
-    
-        p {
-            font-size: 80%;
-            font-weight: 500;
-        }
-    
-        .purple_button {
-            padding: var(--tiny-spacer) var(--small-spacer);
-            font-size: 80%;
-        }
-    }
-    
-    .inputs_container {
-
-        .row_container {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            row-gap: 1em;
-            gap: var(--small-spacer);
-
-        }
-
-        .special_row_container{
-            display: flex;
-            grid-template-columns: 1fr 1fr 1fr;
-            gap: var(--small-spacer);
-        }
-
-        .column_container {
-            display: flex;
-            flex-direction: column;
-            gap: var(--tiny-spacer);
-
-            @include media.phone {
-                gap: var(--tiny-spacer);
-            }
-
-            input {
-                width: 100%;
-
-                @include media.phone {
-                width: 100%;
-                }
-            }
-        }
-
-    
-        .input_container {
-            width: 100%;
-            padding: var(--tiny-spacer) 0;
-        }
-    
-        input {
-            width: 100%;
-            padding: var(--small-spacer) var(--small-spacer);
-            margin: var(--tiny-spacer) 0;
-            border-style: solid;
-            border-width: 1px;
-            border-color: var(--gray-500);
-            border-radius: var(--tiny-spacer);
-            outline: none;
-        }
-    
-        input::placeholder {
-            color: var(--gray-500);
-        }
-    
-        p {
-            font-size: 90%;
-            font-weight: 500;
-        }
-    
-        h4 {
-            padding: var(--small-spacer) 0;
-        }
-    }
-    
-    .selected_tags {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        align-content: flex-start;
-        flex-wrap: wrap;
-        overflow: scroll;
-        scrollbar-width: none;
-        gap: var(--tiny-spacer);
-        border: solid;
-        border-color: var(--gray-500);
-        border-width: 1px;
-        border-radius: var(--tiny-spacer);
-        padding: var(--small-spacer);
-        height: 160px;
-    
-        .tag_display {
-            align-self: flex-start;
-            border: solid;
-            border-color: var(--gray-500);
-            border-width: 1px;
-            border-radius: 3px;
-            padding: var(--tiny-spacer) var(--small-spacer);
-            font-size: 90%;
-            font-weight: 500;
-        }
-    
-        span {
-            color: var(--gray-500);
-            margin-left: var(--tiny-spacer);
-            cursor: pointer;
-        }
-    }
-}
-
-.button_container {
-    display: flex;
-    flex-direction: row;
-    justify-content: right;
-    align-items: center;
-    gap: var(--small-spacer);
-
-    @include media.phone {
-        flex-direction: column;
-    }
-}
-
-.white_button {
-    padding: var(--tiny-spacer) var(--medium-spacer);
-    border: none;
-    border-radius: var(--tiny-spacer);
-    cursor: pointer;
-    background-color: var(--background-secondary);
-    color: var(--purple);
-    font-weight: 500;
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--gray-300);
-}
-
-.purple_button {
-    padding: var(--tiny-spacer) var(--medium-spacer);
-    border: none;
-    border-radius: var(--tiny-spacer);
-    cursor: pointer;
-    background-color: var(--purple);
-    color: var(--text-light);
-    font-weight: 500;
-}
-
-.delete_button {
-    padding: var(--tiny-spacer) var(--medium-spacer);
-    border: none;
-    border-radius: var(--tiny-spacer);
-    cursor: pointer;
-    background-color: transparent;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-}
-
-.toggle_container {
-    display: flex;
-    align-items: center;
-    gap: var(--small-spacer);
-
-    .toggle {
-        appearance: none;
-        display: inline-block;
-        max-width: 64px;
-        min-width: 64px;
-        position: relative;
-        border-radius: 50px;
-        outline: none;
-        overflow: hidden;
-        cursor: pointer;
-        height: 32px;
-        background-color: var(--background-secondary);
-        transition: background-color ease 0.3s;
-      }
-      
-      .toggle:before {
-        content: "";
-        display: block;
-        position: absolute;
-        z-index: 2;
-        width: 28px;
-        height: 28px;
-        background: var(--gray-500);
-        left: 2px;
-        top: 2px;
-        border-radius: 50px;
-        color: var(--gray-500);
-        transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
-      }
-      
-      .toggle:checked {
-        background-color: var(--background-tertiary);
-      }
-      
-      .toggle:checked:before {
-        left: 32px;
-      }
-}
\ No newline at end of file
diff --git a/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx b/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
deleted file mode 100644
index d417b71..0000000
--- a/app/(pages)/(app)/products/product-form/_components/ProductForm.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-'use client';
-import styles from './ProductForm.module.scss';
-import Image from 'next/image';
-import React, { useState } from 'react';
-import { FormEvent } from 'react';
-import AboutPage from './AboutPage';
-import DetailsPage from './DetailsPage';
-import ShippingPage from './ShippingPage';
-import CarriersPage from './CarriersPage';
-
-const ItemsBar = ({
-  items,
-  activeIndex,
-  onTabChange,
-}: {
-  items: string[];
-  activeIndex: number;
-  onTabChange: (index: number) => void;
-}) => {
-  return (
-    <nav className={styles.navbar}>
-      {items.map((item, index) => (
-        <div
-          key={index}
-          className={`${styles.navItem} ${
-            activeIndex === index ? styles.active : ''
-          }`}
-          onClick={() => onTabChange(index)}
-        >
-          {item}
-        </div>
-      ))}
-      <div
-        className={styles.activeIndicator}
-        style={{ transform: `translateX(${activeIndex * 100}%)` }}
-      />
-    </nav>
-  );
-};
-
-export default function ProductForm() {
-  const [activeTab, setActiveTab] = useState(0);
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    console.log('Form submitted');
-  };
-  const renderContent = () => {
-    switch (activeTab) {
-      case 0:
-        return <AboutPage />;
-      case 1:
-        return <DetailsPage />;
-      case 2:
-        return <ShippingPage />;
-      case 3:
-        return <CarriersPage />;
-      default:
-        return null;
-    }
-  };
-  return (
-    <div className={styles.container}>
-      <div className={styles.header}>
-        <div className={styles.title}>
-          <h3>Listing</h3>
-        </div>
-        <div className={styles.button_container}>
-          <Image
-            src="/icons/trash_red.svg"
-            alt="delete icon"
-            width={34}
-            height={34}
-          />
-          <button className={styles.delete_button}>Delete</button>
-        </div>
-      </div>
-      {/* Content of Product Form */}
-      <div className={styles.listing}>
-        {/* Navigation Bar == Items bar*/}
-        <ItemsBar
-          items={['About', 'Details', 'Shipping', 'Carriers']}
-          activeIndex={activeTab}
-          onTabChange={setActiveTab}
-        />
-        {/* Dynamic Content */}
-        <form onSubmit={handleSubmit}>
-          <div className={styles.content}>{renderContent()}</div>
-          <div className={styles.button_container}>
-            <input
-              className={styles.white_button}
-              type="reset"
-              value="Cancel"
-            />
-            <input
-              className={styles.purple_button}
-              type="submit"
-              value="Save & Next"
-            />
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}
diff --git a/app/(pages)/(app)/products/product-form/_components/ShippingPage.tsx b/app/(pages)/(app)/products/product-form/_components/ShippingPage.tsx
deleted file mode 100644
index 9c86823..0000000
--- a/app/(pages)/(app)/products/product-form/_components/ShippingPage.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-'use client';
-import styles from './ProductForm.module.scss';
-
-export default function ShippingPagge() {
-  return (
-    <div className={styles.subpage_container}>
-      <h4>Shipping Information</h4>
-      <p> Placeholder </p>
-    </div>
-  );
-}
diff --git a/app/(pages)/(app)/products/product-form/page.tsx b/app/(pages)/(app)/products/product-form/page.tsx
deleted file mode 100644
index 6c7fe41..0000000
--- a/app/(pages)/(app)/products/product-form/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import ProductForm from './_components/ProductForm';
-
-export default function ViewProductForm() {
-  return (
-    <div>
-      <ProductForm />
-    </div>
-  );
-}

From 7afb7ada786ce05fab0dfc185e935f3bf613e8d8 Mon Sep 17 00:00:00 2001
From: brandonw504 <brandonw504@outlook.com>
Date: Thu, 26 Jun 2025 23:45:37 -0700
Subject: [PATCH 8/8] Renamed to create

---
 .../products/create/_components/AboutPage.tsx | 135 ++++++++
 .../create/_components/CarriersPage.tsx       |  11 +
 .../_components/CreateProductForm.module.scss | 307 ++++++++++++++++++
 .../create/_components/CreateProductForm.tsx  |  97 ++++++
 .../create/_components/DetailsPage.tsx        |  78 +++++
 .../create/_components/ShippingPage.tsx       |  11 +
 app/(pages)/(app)/products/create/page.tsx    |   9 +
 7 files changed, 648 insertions(+)
 create mode 100644 app/(pages)/(app)/products/create/_components/AboutPage.tsx
 create mode 100644 app/(pages)/(app)/products/create/_components/CarriersPage.tsx
 create mode 100644 app/(pages)/(app)/products/create/_components/CreateProductForm.module.scss
 create mode 100644 app/(pages)/(app)/products/create/_components/CreateProductForm.tsx
 create mode 100644 app/(pages)/(app)/products/create/_components/DetailsPage.tsx
 create mode 100644 app/(pages)/(app)/products/create/_components/ShippingPage.tsx
 create mode 100644 app/(pages)/(app)/products/create/page.tsx

diff --git a/app/(pages)/(app)/products/create/_components/AboutPage.tsx b/app/(pages)/(app)/products/create/_components/AboutPage.tsx
new file mode 100644
index 0000000..7f6137c
--- /dev/null
+++ b/app/(pages)/(app)/products/create/_components/AboutPage.tsx
@@ -0,0 +1,135 @@
+'use client';
+import styles from './CreateProductForm.module.scss';
+import Image from 'next/image';
+import React, { useState } from 'react';
+import Textbox from '@components/Textbox/Textbox';
+// import ShortInput from '@components/ShortInput/ShortInput';
+
+export default function AboutPage() {
+  const [tags, setTags] = useState<string[]>([]);
+  const addTag = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    const input = event.target as HTMLInputElement;
+    const newTag = input.value;
+    if (newTag !== '') {
+      setTags((prevTags) => [...prevTags, newTag]);
+    }
+    input.value = '';
+  };
+  const deleteTag = (index: number) => {
+    setTags((prevTags) => [
+      ...prevTags.slice(0, index),
+      ...prevTags.slice(index + 1),
+    ]);
+  };
+  const [types, setTypes] = useState<string[]>([]);
+  const addType = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    const input = event.target as HTMLInputElement;
+    const newType = input.value;
+    if (newType !== '') {
+      setTypes((prevTypes) => [...prevTypes, newType]);
+    }
+    input.value = '';
+  };
+  const deleteType = (index: number) => {
+    setTypes((prevTypes) => [
+      ...prevTypes.slice(0, index),
+      ...prevTypes.slice(index + 1),
+    ]);
+  };
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+  });
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+  return (
+    <div className={styles.subpage_container}>
+      {/* Title - Text Box, Category - Text Box
+            Description - Larger Text Box
+            Product Type - Dropdown selector, Tags - Dropdown selector
+            Media - Image Uploading (placholder) */}
+      <div className={styles.inputs_container}>
+        <div className={styles.row_container}>
+          <div className={styles.column_container}>
+            <p>Title</p>
+            <input
+              type="text"
+              name="title"
+              value={formData.title}
+              onChange={handleInputChange}
+            />
+          </div>
+          <div className={styles.column_container}>
+            <p>Category</p>
+            <input type="text" name="category" />
+          </div>
+        </div>
+        <div>
+          <p>Description</p>
+          <Textbox />
+        </div>
+        <div className={styles.input_container}>
+          <p>Product Type</p> {/* unlink from tags section */}
+          <input
+            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+              if (event.key === 'Enter') {
+                addType(event);
+              }
+            }}
+            id="type_search"
+            type="text"
+            placeholder="Watch.."
+          />
+          <div className={styles.selected_tags}>
+            {types.map((type, index) => (
+              <p key={index} className={styles.tag_display}>
+                {type} <span onClick={() => deleteType(index)}>x</span>
+              </p>
+            ))}
+          </div>
+        </div>
+        <div className={styles.input_container}>
+          <p>Tags</p>
+          <input
+            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+              if (event.key === 'Enter') {
+                addTag(event);
+              }
+            }}
+            id="tags_search"
+            type="text"
+            placeholder="Watch.."
+          />
+          <div className={styles.selected_tags}>
+            {tags.map((tag, index) => (
+              <p key={index} className={styles.tag_display}>
+                {tag} <span onClick={() => deleteTag(index)}>x</span>
+              </p>
+            ))}
+          </div>
+        </div>
+        <div className={styles.input_container}>
+          <p>Media</p>
+        </div>
+        <div className={styles.img_container}>
+          <Image
+            src="/icons/cloud_upload.svg"
+            alt="upload icon"
+            width={34}
+            height={34}
+          />
+          <p>Drag and Drop here</p>
+          <p>or</p>
+          <button className={styles.purple_button}>Select File</button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(pages)/(app)/products/create/_components/CarriersPage.tsx b/app/(pages)/(app)/products/create/_components/CarriersPage.tsx
new file mode 100644
index 0000000..613626f
--- /dev/null
+++ b/app/(pages)/(app)/products/create/_components/CarriersPage.tsx
@@ -0,0 +1,11 @@
+'use client';
+import styles from './CreateProductForm.module.scss';
+
+export default function CarriersPage() {
+  return (
+    <div className={styles.subpage_container}>
+      <h4>Carriers Information</h4>
+      <p> Placeholder </p>
+    </div>
+  );
+}
diff --git a/app/(pages)/(app)/products/create/_components/CreateProductForm.module.scss b/app/(pages)/(app)/products/create/_components/CreateProductForm.module.scss
new file mode 100644
index 0000000..c39dc52
--- /dev/null
+++ b/app/(pages)/(app)/products/create/_components/CreateProductForm.module.scss
@@ -0,0 +1,307 @@
+@use 'media';
+
+.container{
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 60%;
+    margin: auto;
+}
+
+.navbar {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background-color: #e9e8e8;
+        z-index: 1;
+    }
+}
+
+.navItem {
+    flex: 1;
+    text-align: center;
+    padding: 0.8rem 0;
+    cursor: pointer;
+    color: #333;
+    transition: color 0.3s ease;
+
+    &:hover {
+        color: var(--purple);
+    }
+}
+
+.activeIndicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    width: 25%;
+    background-color: var(--purple);
+    z-index: 2;
+    transition: transform 0.3s ease;
+}
+
+.content {
+    margin-top: 1rem;
+    padding: 1rem;
+    
+    h4 {
+        font-weight: bold;
+    }
+
+    p {
+        margin: 0;
+    }
+}
+
+.listing {
+    width: 60%;
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    justify-content: center;
+    padding: var(--small-spacer);
+    text-align: left;
+    color: var(--text-light);
+    border-style: solid;
+    border-width: 2px;
+    background-color: transparent;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.374);
+}
+
+.title {
+    width: 60%;
+    justify-content: center;
+    //margin: auto;
+    padding: var(--small-spacer);
+    text-align: left;
+}
+
+.subpage_container{
+    .img_container {
+        padding: var(--large-spacer) var(--medium-spacer);
+        margin-bottom: var(--medium-spacer);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: var(--tiny-spacer);
+        background-color: var(--background-upload);
+        border-style: dashed;
+        border-width: 1px;
+        border-color: var(--gray-500);
+        border-radius: var(--tiny-spacer);
+    
+        p {
+            font-size: 80%;
+            font-weight: 500;
+        }
+    
+        .purple_button {
+            padding: var(--tiny-spacer) var(--small-spacer);
+            font-size: 80%;
+        }
+    }
+    
+    .inputs_container {
+
+        .row_container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            row-gap: 1em;
+            gap: var(--small-spacer);
+
+        }
+
+        .special_row_container{
+            display: flex;
+            grid-template-columns: 1fr 1fr 1fr;
+            gap: var(--small-spacer);
+        }
+
+        .column_container {
+            display: flex;
+            flex-direction: column;
+            gap: var(--tiny-spacer);
+
+            @include media.phone {
+                gap: var(--tiny-spacer);
+            }
+
+            input {
+                width: 100%;
+
+                @include media.phone {
+                width: 100%;
+                }
+            }
+        }
+
+    
+        .input_container {
+            width: 100%;
+            padding: var(--tiny-spacer) 0;
+        }
+    
+        input {
+            width: 100%;
+            padding: var(--small-spacer) var(--small-spacer);
+            margin: var(--tiny-spacer) 0;
+            border-style: solid;
+            border-width: 1px;
+            border-color: var(--gray-500);
+            border-radius: var(--tiny-spacer);
+            outline: none;
+        }
+    
+        input::placeholder {
+            color: var(--gray-500);
+        }
+    
+        p {
+            font-size: 90%;
+            font-weight: 500;
+        }
+    
+        h4 {
+            padding: var(--small-spacer) 0;
+        }
+    }
+    
+    .selected_tags {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-content: flex-start;
+        flex-wrap: wrap;
+        overflow: scroll;
+        scrollbar-width: none;
+        gap: var(--tiny-spacer);
+        border: solid;
+        border-color: var(--gray-500);
+        border-width: 1px;
+        border-radius: var(--tiny-spacer);
+        padding: var(--small-spacer);
+        height: 160px;
+    
+        .tag_display {
+            align-self: flex-start;
+            border: solid;
+            border-color: var(--gray-500);
+            border-width: 1px;
+            border-radius: 3px;
+            padding: var(--tiny-spacer) var(--small-spacer);
+            font-size: 90%;
+            font-weight: 500;
+        }
+    
+        span {
+            color: var(--gray-500);
+            margin-left: var(--tiny-spacer);
+            cursor: pointer;
+        }
+    }
+}
+
+.button_container {
+    display: flex;
+    flex-direction: row;
+    justify-content: right;
+    align-items: center;
+    gap: var(--small-spacer);
+
+    @include media.phone {
+        flex-direction: column;
+    }
+}
+
+.white_button {
+    padding: var(--tiny-spacer) var(--medium-spacer);
+    border: none;
+    border-radius: var(--tiny-spacer);
+    cursor: pointer;
+    background-color: var(--background-secondary);
+    color: var(--purple);
+    font-weight: 500;
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--gray-300);
+}
+
+.purple_button {
+    padding: var(--tiny-spacer) var(--medium-spacer);
+    border: none;
+    border-radius: var(--tiny-spacer);
+    cursor: pointer;
+    background-color: var(--purple);
+    color: var(--text-light);
+    font-weight: 500;
+}
+
+.delete_button {
+    padding: var(--tiny-spacer) var(--medium-spacer);
+    border: none;
+    border-radius: var(--tiny-spacer);
+    cursor: pointer;
+    background-color: transparent;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.toggle_container {
+    display: flex;
+    align-items: center;
+    gap: var(--small-spacer);
+
+    .toggle {
+        appearance: none;
+        display: inline-block;
+        max-width: 64px;
+        min-width: 64px;
+        position: relative;
+        border-radius: 50px;
+        outline: none;
+        overflow: hidden;
+        cursor: pointer;
+        height: 32px;
+        background-color: var(--background-secondary);
+        transition: background-color ease 0.3s;
+      }
+      
+      .toggle:before {
+        content: "";
+        display: block;
+        position: absolute;
+        z-index: 2;
+        width: 28px;
+        height: 28px;
+        background: var(--gray-500);
+        left: 2px;
+        top: 2px;
+        border-radius: 50px;
+        color: var(--gray-500);
+        transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
+      }
+      
+      .toggle:checked {
+        background-color: var(--background-tertiary);
+      }
+      
+      .toggle:checked:before {
+        left: 32px;
+      }
+}
\ No newline at end of file
diff --git a/app/(pages)/(app)/products/create/_components/CreateProductForm.tsx b/app/(pages)/(app)/products/create/_components/CreateProductForm.tsx
new file mode 100644
index 0000000..f8eec43
--- /dev/null
+++ b/app/(pages)/(app)/products/create/_components/CreateProductForm.tsx
@@ -0,0 +1,97 @@
+'use client';
+import styles from './CreateProductForm.module.scss';
+import React, { useState } from 'react';
+import { FormEvent } from 'react';
+import AboutPage from './AboutPage';
+import DetailsPage from './DetailsPage';
+import ShippingPage from './ShippingPage';
+import CarriersPage from './CarriersPage';
+
+const ItemsBar = ({
+  items,
+  activeIndex,
+  onTabChange,
+}: {
+  items: string[];
+  activeIndex: number;
+  onTabChange: (index: number) => void;
+}) => {
+  return (
+    <nav className={styles.navbar}>
+      {items.map((item, index) => (
+        <div
+          key={index}
+          className={`${styles.navItem} ${
+            activeIndex === index ? styles.active : ''
+          }`}
+          onClick={() => onTabChange(index)}
+        >
+          {item}
+        </div>
+      ))}
+      <div
+        className={styles.activeIndicator}
+        style={{ transform: `translateX(${activeIndex * 100}%)` }}
+      />
+    </nav>
+  );
+};
+
+export default function CreateProductForm() {
+  const [activeTab, setActiveTab] = useState(0);
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    console.log('Form submitted');
+  };
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case 0:
+        return <AboutPage />;
+      case 1:
+        return <DetailsPage />;
+      case 2:
+        return <ShippingPage />;
+      case 3:
+        return <CarriersPage />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <div className={styles.title}>
+          <h3>Create Product</h3>
+        </div>
+        <div className={styles.button_container}>
+          <button className={styles.delete_button}>Delete</button>
+        </div>
+      </div>
+      <div className={styles.listing}>
+        <ItemsBar
+          items={['About', 'Details', 'Shipping', 'Carriers']}
+          activeIndex={activeTab}
+          onTabChange={setActiveTab}
+        />
+        <form onSubmit={handleSubmit}>
+          <div className={styles.content}>{renderContent()}</div>
+          <div className={styles.button_container}>
+            <input
+              className={styles.white_button}
+              type="reset"
+              value="Cancel"
+            />
+            <input
+              className={styles.purple_button}
+              type="submit"
+              value="Save & Next"
+            />
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(pages)/(app)/products/create/_components/DetailsPage.tsx b/app/(pages)/(app)/products/create/_components/DetailsPage.tsx
new file mode 100644
index 0000000..e9c361b
--- /dev/null
+++ b/app/(pages)/(app)/products/create/_components/DetailsPage.tsx
@@ -0,0 +1,78 @@
+'use client';
+import styles from './CreateProductForm.module.scss';
+import Image from 'next/image';
+import React, { useState } from 'react';
+
+export default function DetailsPage() {
+  const [formData] = useState({
+    title: '',
+    description: '',
+  });
+  return (
+    <div className={styles.subpage_container}>
+      <div className={styles.inputs_container}>
+        {/* Title - Shows input from About
+                Description - Shows input from About
+                Pricing - Text box, Processing Time - Text box
+                Item Weight (Prepared for Packing) - 2 Text boxes (one for lbs, one for oz)
+                Length - Text box, Width - Text box, Height - Text box */}
+        <div className={styles.input_container}>
+          <p>
+            <strong>{formData.title}</strong>
+          </p>
+          <p>{formData.description}</p>
+        </div>
+        <div className={styles.img_container}>
+          <Image
+            src="/icons/cloud_upload.svg"
+            alt="upload icon"
+            width={34}
+            height={34}
+          />
+        </div>
+        <div className={styles.inputs_container}>
+          <div className={styles.row_container}>
+            <div className={styles.column_container}>
+              <p>Pricing</p>
+              <input type="text" name="pricing" />
+            </div>
+            <div className={styles.column_container}>
+              <p>Processing Time</p>
+              <input type="text" name="processing_time" />
+            </div>
+          </div>
+        </div>
+        <div className={styles.inputs_container}>
+          <div className={styles.row_container}>
+            <div className={styles.column_container}>
+              <p>Item Weight (Prepared for Packing)</p>
+              <input type="text" name="pounds" />
+            </div>
+            <div className={styles.column_container}>
+              <p></p>
+              <p></p>
+              <p></p>
+              <input type="text" name="ounces" />
+            </div>
+          </div>
+        </div>
+        <div className={styles.inputs_container}>
+          <div className={styles.special_row_container}>
+            <div className={styles.column_container}>
+              <p>Length</p>
+              <input type="text" name="processing_time" />
+            </div>
+            <div className={styles.column_container}>
+              <p>Width</p>
+              <input type="text" name="processing_time" />
+            </div>
+            <div className={styles.column_container}>
+              <p>Height</p>
+              <input type="text" name="processing_time" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(pages)/(app)/products/create/_components/ShippingPage.tsx b/app/(pages)/(app)/products/create/_components/ShippingPage.tsx
new file mode 100644
index 0000000..9f6ac37
--- /dev/null
+++ b/app/(pages)/(app)/products/create/_components/ShippingPage.tsx
@@ -0,0 +1,11 @@
+'use client';
+import styles from './CreateProductForm.module.scss';
+
+export default function ShippingPagge() {
+  return (
+    <div className={styles.subpage_container}>
+      <h4>Shipping Information</h4>
+      <p> Placeholder </p>
+    </div>
+  );
+}
diff --git a/app/(pages)/(app)/products/create/page.tsx b/app/(pages)/(app)/products/create/page.tsx
new file mode 100644
index 0000000..6f53b27
--- /dev/null
+++ b/app/(pages)/(app)/products/create/page.tsx
@@ -0,0 +1,9 @@
+import CreateProductForm from './_components/CreateProductForm';
+
+export default function CreateProductPage() {
+  return (
+    <div>
+      <CreateProductForm />
+    </div>
+  );
+}