GPT-9: Filter and Sort Dashboard

src/components/FilterSidebar.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useState } from "react";
+import { categoryOptions } from "../custom-dropdown-select/CategoriesDropdownSelect";
+import { generateClient } from 'aws-amplify/data';
+import type { Schema } from "../../amplify/data/resource";
+
+const client = generateClient<Schema>();
+
+interface FilterSidebarProps {
+  selectedCategories: string[];
+  onCategoryChange: (categories: string[]) => void;
+  selectedStores: string[];
+  onStoreChange: (stores: string[]) => void;
+  minPrice: number | null;
+  maxPrice: number | null;
+  onMinPriceChange: (value: number | null) => void;
+  onMaxPriceChange: (value: number | null) => void;
+}
+
+const FilterSidebar: React.FC<FilterSidebarProps> = ({
+  selectedCategories,
+  onCategoryChange,
+  selectedStores,
+  onStoreChange,
+  minPrice,
+  maxPrice,
+  onMinPriceChange,
+  onMaxPriceChange,
+}) => {
+  const [storeOptions, setStoreOptions] = useState<string[]>([]);
+
+  const fetchStores = async () => {
+    try {
+      const { data: stores } = await client.models.Store.list();
+      if (stores && stores.length > 0) {
+        setStoreOptions(stores.map(store => store.storeName));
+      }
+    } catch (error) {
+      console.error("Error fetching stores:", error);
+      setStoreOptions([]);
+    }
+  };
+
+  useEffect(() => {
+    fetchStores();
+  }, []);
+
+
+  const handleCategoryChange = (value: string) => {
+    const newSelected = selectedCategories.includes(value)
+      ? selectedCategories.filter(v => v !== value)
+      : [...selectedCategories, value];
+    onCategoryChange(newSelected);
+  };
+
+  const handleStoreChange = (store: string) => {
+    const newSelected = selectedStores.includes(store)
+      ? selectedStores.filter(s => s !== store)
+      : [...selectedStores, store];
+    onStoreChange(newSelected);
+  };
+
+  return (
+    <div>
+      <div className="filter-section">
+        <h3>Filter by Store</h3>
+        {storeOptions.map(store => (
+          <div key={store}>
+            <label>
+              <input
+                type="checkbox"
+                checked={selectedStores.includes(store)}
+                onChange={() => handleStoreChange(store)}
+              />
+              {store}
+            </label>
+          </div>
+        ))}
+      </div>
+
+      <div className="filter-section">
+        <h3>Filter by Price</h3>
+        <div className="price-filter">
+          <input
+            type="number"
+            min="0"
+            placeholder="Min"
+            value={minPrice ?? ""}
+            onChange={(e) =>
+              onMinPriceChange(e.target.value ? Number(e.target.value) : null)
+            }
+          />
+          to
+          <input
+            type="number"
+            min="0"
+            placeholder="Max"
+            value={maxPrice ?? ""}
+            onChange={(e) =>
+              onMaxPriceChange(e.target.value ? Number(e.target.value) : null)
+            }
+          />
+        </div>
+      </div>
+
+      <div className="filter-section">
+        <h3>Filter by Category</h3>
+        {categoryOptions.map(option => (
+          <div key={option.value}>
+            <label>
+              <input
+                type="checkbox"
+                checked={selectedCategories.includes(option.value)}
+                onChange={() => handleCategoryChange(option.value)}
+              />
+              {option.label}
+            </label>
+          </div>
+        ))}
+      </div>  
+    </div>
+  );
+};
+
+export default FilterSidebar;

src/custom-dropdown-select/CategoriesDropdownSelect.tsx

@@ -10,7 +10,7 @@ interface CategoriesDropdownSelectProps {
     value?: string;
 }
 
-const categoryOptions = [
+export const categoryOptions = [
   { label: "Meat", value: "Meat" },
   { label: "Seafood", value: "Seafood" },
   { label: "Fruits & Vegetables", value: "Fruits & Vegetables" },

src/index.css

@@ -155,6 +155,13 @@ h1 {
   left: 0;
 }
 
+.page-title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+
 .nav-bar {
   display: flex;
   align-items: center;
@@ -262,7 +269,7 @@ h1 {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-top: 5em;
+  margin-top: 4em;
 }
 
 .page-text {
@@ -413,9 +420,11 @@ h1 {
 
 .items-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 1rem;
   width: 90%;
+  justify-content: center;
+  margin: 0 auto;
 }
 
 .item-card {
@@ -452,7 +461,8 @@ h1 {
 .item-category, .item-store {
   font-size: 1.1rem;
   font-weight: 600;
-  margin-bottom: 0.7rem;
+  margin-bottom: 0.6rem;
+  line-height: 1.2;
 }
 
 .item-price {
@@ -530,8 +540,79 @@ h1 {
   text-align: center;
 }
 
-@media (max-width: 1059.98px) { /* smaller desktop layout */
+.dashboard {
+  display: flex;
+  width: 100%;
+  padding: 0 1rem;
+  box-sizing: border-box;
+}
+
+.price-filter {
+  display: flex;
+  gap: 0.7rem;
+  margin-top: 1rem;
+  align-items: center;
+}
+
+.price-filter input {
+  max-width: 6.5rem;
+  font-size: 16px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.4em 0 0.4em 1em;
+  border-radius: 3rem;
+  border: 1px solid #ccc;
+  background-color: #2c2c2c;
+  color: #f0f0f0;
+  font-size: 1rem;
+}
+
+.filter-sidebar {
+  width: max-content;
+  padding-right: 1rem;
+  white-space: nowrap;
+  padding-bottom: 1rem;
+}
+
+.filter-sidebar h3 {
+  margin: 0;
+}
+
+.filter-section {
+  margin-bottom: 1rem;
+}
+
+.sidebar-toggle-button, .sidebar-close-button {
+  display: none;
+  margin-bottom: 0;
+}
 
+.sidebar-close-button {
+  margin-bottom: 1rem;
+}
+
+.sidebar-results-counter {
+  margin-bottom: 1rem;
+  margin-top: 0;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 1rem;
+  box-sizing: border-box;
+  height: 7rem;
+}
+
+.sort-button {
+  height: 2.5rem;
+  padding: 0 1rem;
+  margin-left: auto;
+}
+
+@media (max-width: 1059.98px) { /* smaller desktop layout */
   .nav-bar {
     display: grid;
     grid-template-columns: auto 1fr;
@@ -688,6 +769,12 @@ h1 {
     padding: 0 1em;
   }
 
+  .page-header {
+    height: 5.5rem;
+    align-items: center;
+    padding: 0;
+  }
+
   /* navigation */
   .nav-bar {
     display: flex;
@@ -809,6 +896,46 @@ h1 {
   }
 
   /* footer good at 650px, so removed. if >3 footers, need formatting */
+
+  /* dashboard */
+
+  .filter-sidebar {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 1000;
+    background-color: #1a1a1a;
+    padding: 1rem;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    box-shadow: 2px 0 8px rgba(0,0,0,0.3);
+    font-size: 20px;
+  }
+
+  .filter-sidebar.open {
+    display: block;
+    animation: fadeInMenu 0.15s ease forwards;
+  }
+
+  .sidebar-toggle-button, .sidebar-close-button, .sort-button{
+    display: block;
+    font-size: 1.25rem;
+    padding: 0.5rem 1rem;
+    height: 2.5rem;
+  }
+
+  .sidebar-toggle-button, .sort-button {
+    width: 5.5rem;
+    padding: 0;
+
+  }
+
+  .filter-sidebar .filter-section:last-child {
+    margin-bottom: 3rem;
+  }
 }
 
 @media (max-width: 450px) { /* small mobile screens */

src/pages/CreateNewItem.tsx

@@ -169,7 +169,9 @@ const CreateNewItem: React.FC = () => {
 
       <main className="main">
         <section className="page-container">
-          <h1 className="page-title">Create New Item</h1>
+          <div className="page-header">
+            <h1 className="page-title">Create New Item</h1>
+          </div>
           <form
             className="add-form"
             onSubmit={handleSubmit}

src/pages/CreateNewStore.tsx

@@ -163,7 +163,9 @@ const CreateNewStore: React.FC = () => {
 
       <main className="main">
         <section className="page-container">
-          <h1 className="page-title">Create New Store</h1>
+          <div className="page-header">
+            <h1 className="page-title">Create New Store</h1>
+          </div>
           <form
             className="add-form"
             onSubmit={handleSubmit}