Merge pull request #52 from JumboCode/frontend/42-Internal-View-Categ…

…ories-Page

Frontend 42 Finished Categories Spreadsheet

app/categories/[[...categories]]/page.tsx

@@ -0,0 +1,94 @@
+'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 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';
+
+
+// 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-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-4 ml-6 mt-2" // specific margins to keep the delete icon in line with the edit icon
+                            />
+                            )}
+                            {showTable && (
+                                <Image
+                                src={editIcon}
+                                width={18}
+                                height={18}
+                                alt="delete Icon"
+                                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-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-4 mb-2 rounded text-[20px]">
+                                { "Category "} <FontAwesomeIcon className='' icon={faPlus} style={{ fontSize: '14px' }}/>
+                            </button>
+                        </div>
+
+
+                    </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; 
+
+
+/*
+pt-1 pb-1 px-1 mb-2 */

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-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}
+                                    width={10}
+                                    height={6}
+                                    alt="arrows Icon"
+                                    className="">
+                                    </Image>
+                        </div>
+                    </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>
+            <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="border-r-2 border-slate-200 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>
+
+    )
+}