From ad345b980c6b3c68443eb46661fe2ad222143c28 Mon Sep 17 00:00:00 2001
From: alexanderviolet <alexander.violet@tufts.edu>
Date: Sun, 8 Dec 2024 21:15:08 -0500
Subject: [PATCH 1/4] Frontend 42 Finished Categories Spreasheet

---
 app/categories/[[...categories]]/page.tsx | 66 +++++++++++++++++++++
 app/components/CategoriesSpreadsheet.tsx  | 72 +++++++++++++++++++++++
 2 files changed, 138 insertions(+)
 create mode 100644 app/categories/[[...categories]]/page.tsx
 create mode 100644 app/components/CategoriesSpreadsheet.tsx

diff --git a/app/categories/[[...categories]]/page.tsx b/app/categories/[[...categories]]/page.tsx
new file mode 100644
index 0000000..f1661f9
--- /dev/null
+++ b/app/categories/[[...categories]]/page.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import React, { useState } from 'react';
+import { CategoriesSpreadsheet } from '@app/components/CategoriesSpreadsheet';
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { NameDropdown } from '@app/components/Dropdowns';
+import { InventorySpreadsheet } from '@app/components/InventorySpreadsheet';
+
+
+// export default function Categories()  {
+// FOR TESTING:
+
+const Categories: React.FC<{ onChange: (value: string) => void }> = ({ onChange }) => {
+
+    const optionsArr = ["Bakery", "Dairy & Eggs", "Dry Goods", "Meat", "Prepared Foods", "Produce"]
+    const categoryItems = [["bread", "100"], ["cupcake", "100"]]
+
+    const [showTable, setShowTable] = useState(false);
+
+    const switchState = () => {
+        setShowTable(true)
+    }
+
+
+    
+    return (
+        <div> 
+            <p className="font-bold pl-20 pt-10 text-[40px] ">Categories</p>
+           
+            <div className='flex justify-center items-center'> 
+                <div className="w-3/5 h-4/5 ">
+                    <div className='flex flex-col'>
+                    <p className="crimson-bold text-[24px] pt-5 ">Edit Category</p>
+                        <div className='flex justify-between items-center py-4 w-full'>
+                        <div className='flex flex-col w-1/2'>
+                            <div className="pt-">
+                                <NameDropdown options={optionsArr} onSelect={switchState} />
+                            </div>
+                        </div>
+
+                        {showTable && (<button className="bg-light-green hover:bg-dark-green text-white font-serif py-[5px] px-[20px] rounded text-[20px]">
+                            { "Item "} <FontAwesomeIcon className='' icon={faPlus} style={{ fontSize: '14px' }}/>
+                        </button>)}
+                    
+                        <button className="bg-light-green hover:bg-dark-green text-white font-serif py-[5px] px-[20px] rounded text-[20px]">
+                            { "Category "} <FontAwesomeIcon className='' icon={faPlus} style={{ fontSize: '14px' }}/>
+                        </button>
+
+
+                    </div>
+                </div>
+                    <div className="bg-slate-50 items-center h-full">
+                       {showTable && (<CategoriesSpreadsheet categoryItems={categoryItems} />)}
+                        {!showTable && (<p className="flex-center py-[250px] text-[20px] text-center">Select a category.</p>)}
+
+                    </div> 
+                </div>
+            </div>
+        </div>
+    
+        );
+}
+
+export default Categories; 
+
diff --git a/app/components/CategoriesSpreadsheet.tsx b/app/components/CategoriesSpreadsheet.tsx
new file mode 100644
index 0000000..3dc19c5
--- /dev/null
+++ b/app/components/CategoriesSpreadsheet.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import Image from 'next/image';
+import deleteIcon from '../images/delete.png';
+import editIcon from "../images/edit.png";
+import arrowsIcon from "../images/upAndDownArrows.png";
+
+interface CategoriesSpreadsheetProps {
+    inventoryItems: (string | number)[][];
+}
+
+export const CategoriesSpreadsheet: React.FC<CategoriesSpreadsheetProps> = ({ categoryItems = [] }) => {
+    console.log("categoryItems:", categoryItems);
+
+    return(
+        <div className="relative overflow-x-auto font-arial bg-slate-50">
+        <table className="table-auto w-full">
+            <thead className ="font-crimson crimson-regular content-start">
+                <tr className="bg-dark-blue text-white text-lg align-left ">
+                <th className="border-y-1 py-2 px-3">
+                    <div className="flex flex-row justify-between">
+                        <p>Item Name</p>
+                        <Image src={arrowsIcon}
+                                    width={10}
+                                    height={10}
+                                    alt="arrows Icon"
+                                    className="">
+                                    </Image>
+                        </div>
+                    </th>
+                <th className=" py-2 px-3">Units</th>
+                <th className=" py-2 px-3">Actions</th>
+                </tr>
+            </thead>
+            <tbody className="bg-slate-50 font-crimson crimson-regular">
+            {categoryItems.map((item, index) => (
+                        <tr key={index} className="py-2">
+                            {item.map((data, subIndex) => (
+                                <td
+                                    key={subIndex}
+                                    className=" py-2 px-3"
+                                >
+                                    {data}
+                                </td>
+                            ))}
+                            <td
+                                key={`actions-${index}`}
+                                className="flex row justify-around py-2 px-3"
+                            >
+                                <Image
+                                    src={editIcon}
+                                    width={18}
+                                    height={18}
+                                    alt="edit Icon"
+                                    className=""
+                                />
+                                <Image
+                                    src={deleteIcon}
+                                    width={18}
+                                    height={18}
+                                    alt="delete Icon"
+                                    className=""
+                                />
+
+                            </td>
+                        </tr>
+                    ))}
+            </tbody>
+            </table>
+        </div>
+
+    )
+}
\ No newline at end of file

From 49f11588d6ded8484adc0e3a2f041cff60da1fb3 Mon Sep 17 00:00:00 2001
From: zoyaamrit <tanvi.amrit@tufts.edu>
Date: Tue, 10 Dec 2024 14:28:50 -0500
Subject: [PATCH 2/4] Fix button alignment and add dropdown icons

---
 app/categories/[[...categories]]/page.tsx | 50 ++++++++++++++++++-----
 1 file changed, 39 insertions(+), 11 deletions(-)

diff --git a/app/categories/[[...categories]]/page.tsx b/app/categories/[[...categories]]/page.tsx
index f1661f9..383d58e 100644
--- a/app/categories/[[...categories]]/page.tsx
+++ b/app/categories/[[...categories]]/page.tsx
@@ -1,8 +1,12 @@
 'use client';
 
 import React, { useState } from 'react';
+import Image from 'next/image';
+
 import { CategoriesSpreadsheet } from '@app/components/CategoriesSpreadsheet';
-import { faPlus } from '@fortawesome/free-solid-svg-icons'
+import { faPlus} from '@fortawesome/free-solid-svg-icons'
+import deleteIcon from "../../images/delete.png"
+import editIcon from "../../images/edit.png"
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NameDropdown } from '@app/components/Dropdowns';
 import { InventorySpreadsheet } from '@app/components/InventorySpreadsheet';
@@ -31,21 +35,42 @@ const Categories: React.FC<{ onChange: (value: string) => void }> = ({ onChange
             <div className='flex justify-center items-center'> 
                 <div className="w-3/5 h-4/5 ">
                     <div className='flex flex-col'>
-                    <p className="crimson-bold text-[24px] pt-5 ">Edit Category</p>
+                        <p className="crimson-bold text-[24px] pt-5 ">Edit Category</p>
                         <div className='flex justify-between items-center py-4 w-full'>
-                        <div className='flex flex-col w-1/2'>
-                            <div className="pt-">
+                        <div className='flex flex-row items-center w-1/2'>
+                            <div className='w-full'>
                                 <NameDropdown options={optionsArr} onSelect={switchState} />
                             </div>
+                            {showTable && (
+                                <Image
+                                src={deleteIcon}
+                                width={18}
+                                height={18}
+                                alt="delete Icon"
+                                className="m-2"
+                            />
+                            )}
+                            {showTable && (
+                                <Image
+                                src={editIcon}
+                                width={18}
+                                height={18}
+                                alt="delete Icon"
+                                className="m-2"
+                            />
+                            )}
                         </div>
 
-                        {showTable && (<button className="bg-light-green hover:bg-dark-green text-white font-serif py-[5px] px-[20px] rounded text-[20px]">
-                            { "Item "} <FontAwesomeIcon className='' icon={faPlus} style={{ fontSize: '14px' }}/>
-                        </button>)}
-                    
-                        <button className="bg-light-green hover:bg-dark-green text-white font-serif py-[5px] px-[20px] rounded text-[20px]">
-                            { "Category "} <FontAwesomeIcon className='' icon={faPlus} style={{ fontSize: '14px' }}/>
-                        </button>
+                        <div>
+
+                            {showTable && (<button className="bg-light-green hover:bg-dark-green text-white font-serif pt-1 pb-1 px-1 mr-2 mb-2 rounded text-[20px]">
+                                { "Item "} <FontAwesomeIcon className='' icon={faPlus} style={{ fontSize: '14px' }}/>
+                            </button>)}
+                        
+                            <button className="bg-light-green hover:bg-dark-green text-white font-serif pt-1 pb-1 px-1 mb-2 rounded text-[20px]">
+                                { "Category "} <FontAwesomeIcon className='' icon={faPlus} style={{ fontSize: '14px' }}/>
+                            </button>
+                        </div>
 
 
                     </div>
@@ -64,3 +89,6 @@ const Categories: React.FC<{ onChange: (value: string) => void }> = ({ onChange
 
 export default Categories; 
 
+
+/*
+pt-1 pb-1 px-1 mb-2 */
\ No newline at end of file

From 6f76bd02a8761a664dd2617a8f74739c70f8b8ee Mon Sep 17 00:00:00 2001
From: alexanderviolet <alexander.violet@tufts.edu>
Date: Tue, 10 Dec 2024 20:40:12 -0500
Subject: [PATCH 3/4] Added columns

---
 app/components/CategoriesSpreadsheet.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/CategoriesSpreadsheet.tsx b/app/components/CategoriesSpreadsheet.tsx
index 3dc19c5..1e61283 100644
--- a/app/components/CategoriesSpreadsheet.tsx
+++ b/app/components/CategoriesSpreadsheet.tsx
@@ -16,7 +16,7 @@ export const CategoriesSpreadsheet: React.FC<CategoriesSpreadsheetProps> = ({ ca
         <table className="table-auto w-full">
             <thead className ="font-crimson crimson-regular content-start">
                 <tr className="bg-dark-blue text-white text-lg align-left ">
-                <th className="border-y-1 py-2 px-3">
+                <th className="border-r-2 border-slate-400 border-y-1 py-2 px-3">
                     <div className="flex flex-row justify-between">
                         <p>Item Name</p>
                         <Image src={arrowsIcon}
@@ -27,7 +27,7 @@ export const CategoriesSpreadsheet: React.FC<CategoriesSpreadsheetProps> = ({ ca
                                     </Image>
                         </div>
                     </th>
-                <th className=" py-2 px-3">Units</th>
+                <th className="border-r-2 border-slate-400 py-2 px-3">Units</th>
                 <th className=" py-2 px-3">Actions</th>
                 </tr>
             </thead>
@@ -37,7 +37,7 @@ export const CategoriesSpreadsheet: React.FC<CategoriesSpreadsheetProps> = ({ ca
                             {item.map((data, subIndex) => (
                                 <td
                                     key={subIndex}
-                                    className=" py-2 px-3"
+                                    className="border-r-2 border-slate-200 py-2 px-3"
                                 >
                                     {data}
                                 </td>

From f4ce35cbf9283e4a1e48683d8ba21eb62ff6fef7 Mon Sep 17 00:00:00 2001
From: Jiyoon Choi <jiyoonchoi15@gmail.com>
Date: Wed, 15 Jan 2025 12:58:22 -0500
Subject: [PATCH 4/4] fixed spacing on delete and edit icon next to dropdown

---
 app/categories/[[...categories]]/page.tsx | 8 ++++----
 app/components/CategoriesSpreadsheet.tsx  | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/categories/[[...categories]]/page.tsx b/app/categories/[[...categories]]/page.tsx
index 383d58e..3c23ba3 100644
--- a/app/categories/[[...categories]]/page.tsx
+++ b/app/categories/[[...categories]]/page.tsx
@@ -47,7 +47,7 @@ const Categories: React.FC<{ onChange: (value: string) => void }> = ({ onChange
                                 width={18}
                                 height={18}
                                 alt="delete Icon"
-                                className="m-2"
+                                className="m-4 ml-6 mt-2" // specific margins to keep the delete icon in line with the edit icon
                             />
                             )}
                             {showTable && (
@@ -56,18 +56,18 @@ const Categories: React.FC<{ onChange: (value: string) => void }> = ({ onChange
                                 width={18}
                                 height={18}
                                 alt="delete Icon"
-                                className="m-2"
+                                className="m-2 mb-3.5" // specific margins to keep the edit icon in line with the delete icon
                             />
                             )}
                         </div>
 
                         <div>
 
-                            {showTable && (<button className="bg-light-green hover:bg-dark-green text-white font-serif pt-1 pb-1 px-1 mr-2 mb-2 rounded text-[20px]">
+                            {showTable && (<button className="bg-light-green hover:bg-dark-green text-white font-serif pt-1 pb-1 px-4 mr-2 mb-2 rounded text-[20px]">
                                 { "Item "} <FontAwesomeIcon className='' icon={faPlus} style={{ fontSize: '14px' }}/>
                             </button>)}
                         
-                            <button className="bg-light-green hover:bg-dark-green text-white font-serif pt-1 pb-1 px-1 mb-2 rounded text-[20px]">
+                            <button className="bg-light-green hover:bg-dark-green text-white font-serif pt-1 pb-1 px-4 mb-2 rounded text-[20px]">
                                 { "Category "} <FontAwesomeIcon className='' icon={faPlus} style={{ fontSize: '14px' }}/>
                             </button>
                         </div>
diff --git a/app/components/CategoriesSpreadsheet.tsx b/app/components/CategoriesSpreadsheet.tsx
index 1e61283..3fc3883 100644
--- a/app/components/CategoriesSpreadsheet.tsx
+++ b/app/components/CategoriesSpreadsheet.tsx
@@ -21,7 +21,7 @@ export const CategoriesSpreadsheet: React.FC<CategoriesSpreadsheetProps> = ({ ca
                         <p>Item Name</p>
                         <Image src={arrowsIcon}
                                     width={10}
-                                    height={10}
+                                    height={6}
                                     alt="arrows Icon"
                                     className="">
                                     </Image>