GPT-36: Price History

amplify/data/resource.ts

@@ -20,12 +20,23 @@ const schema = a.schema({
       storeId: a.id().required(),
       isDiscount: a.boolean(),
       discountedPrice: a.float(),
+      priceHistory: a.hasMany("PriceHistory", "itemId"),
     })
     .secondaryIndexes((index) => [
       index("barcode"),
       index("itemName"),
     ])
     .authorization((allow) => [allow.guest()]),
+  PriceHistory: a.
+    model({
+      itemId: a.id().required(),
+      itemName: a.string().required(),
+      price: a.float().required(),
+      discountedPrice: a.float(),
+      changedAt: a.string().required(),
+      item: a.belongsTo("Item", "itemId"),
+    })
+    .authorization((allow) => [allow.guest()]),
   StoreLocation: a
     .customType({
       streetName: a.string().required(),

package.json

@@ -17,8 +17,11 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "aws-amplify": "^6.15.3",
+    "chart.js": "^4.5.0",
+    "chartjs-adapter-date-fns": "^3.0.0",
     "dompurify": "^3.2.6",
     "react": "^19.1.0",
+    "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.1.0",
     "react-dropdown-select": "^4.12.2",
     "react-qr-barcode-scanner": "^2.1.8",

src/components/ItemCard.tsx

@@ -1,6 +1,23 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { useNavigate } from "react-router-dom";
+import type { PriceHistory } from "../types/priceHistory";
+import 'chartjs-adapter-date-fns';
+import { Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  LineElement,
+  PointElement,
+  CategoryScale,
+  LinearScale,
+  Tooltip,
+  Legend,
+  TimeScale,
+  type ChartOptions,
+} from 'chart.js';
+
+ChartJS.register(LineElement, PointElement, CategoryScale, LinearScale, Tooltip, Legend, TimeScale);
+
 
 export interface ItemCardProps {
   id: string;
@@ -13,6 +30,7 @@ export interface ItemCardProps {
   isDiscount: boolean;
   itemPrice: number;
   discountedPrice?: number;
+  priceHistory?: PriceHistory[];
 }
 
 const ItemCard: React.FC<ItemCardProps> = ({
@@ -26,13 +44,106 @@ const ItemCard: React.FC<ItemCardProps> = ({
   isDiscount,
   itemPrice,
   discountedPrice,
+  priceHistory
 }) => {
   const navigate = useNavigate();
 
   const handleEditClick = () => {
     navigate(`/edit-item/${id}`);
   };
 
+  const formatPrice = (price: number) => {
+    return price % 1 === 0 ? `${price}` : `${price.toFixed(2)}` 
+  }
+
+  let sortedHistory = Array.isArray(priceHistory)
+    ? [...priceHistory]
+      .filter(h => h && h.changedAt && h.price !== undefined)
+      .sort((a, b) => new Date(a.changedAt).getTime() - new Date(b.changedAt).getTime())
+    : [];
+
+  if (sortedHistory.length > 0) {
+    const last = sortedHistory[sortedHistory.length - 1];
+    const lastDate = new Date(last.changedAt);
+    const today = new Date();
+    lastDate.setHours(0,0,0,0);
+    today.setHours(0,0,0,0);
+
+    if (lastDate.getTime() < today.getTime()) {
+      sortedHistory = [
+        ...sortedHistory,
+        {
+          ...last,
+          id: last.id + '-virtual',
+          changedAt: today.toISOString(),
+        }
+      ];
+    }
+  }
+
+  const chartData = {
+    datasets: [
+      {
+        label: 'Price',
+        data: sortedHistory.map(h => ({
+          x: h.changedAt,
+          y: h.discountedPrice !== undefined && h.discountedPrice !== null
+            ? h.discountedPrice
+            : h.price
+        })),
+        fill: false,
+        borderColor: '#c8ff00',
+        backgroundColor: '#c8ff00',
+        tension: 0.2,
+        stepped: 'before' as const,
+      },
+    ],
+  };
+
+  const chartOptions: ChartOptions<'line'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: false },
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function (context) {
+            const yValue = (context.raw as { x: any; y: number }).y;
+            return `$${formatPrice(yValue)}`;
+          },
+        },
+      },
+    },
+    scales: {
+      x: {
+        type: 'time',
+        time: {
+          unit: 'day',
+          tooltipFormat: 'MM/dd/yy hh:mm:ss a',
+          displayFormats: {
+            day: 'MM/dd/yy',
+          },
+        },
+        title: { display: false },
+        grid: { display: false },
+        border: { display: false },
+        ticks: { color: "#FFF", maxTicksLimit: 4}
+      },
+      y: {
+        title: { display: true, text: 'Price', color: "#FFF" },
+        grid: { display: false },
+        border: { display: false },
+        ticks: {
+          callback: function(value) {
+          return `${formatPrice(Number(value))}`;
+        },
+          color: "#FFF"
+        }
+      },
+    },
+  };
+
     return (
         <div className="item-card">
             <img src={itemImageUrl} alt={itemName}/>
@@ -42,18 +153,60 @@ const ItemCard: React.FC<ItemCardProps> = ({
             <div className="item-category">{category}</div>
             <div className="item-store">{storeName}</div>
             <div className="item-price">
-            {isDiscount && discountedPrice !== undefined ? (
-                <div>
-                <p>${discountedPrice}</p>
-                <s>${itemPrice}</s>
-                </div> 
-            ) : (
-                <p>${itemPrice}</p>
-            )}
+              {isDiscount && discountedPrice !== undefined ? (
+                  <div>
+                  <p>${formatPrice(discountedPrice)}</p>
+                  <s>${formatPrice(itemPrice)}</s>
+                  </div> 
+              ) : (
+                  <p>${formatPrice(itemPrice)}</p>
+              )}
             </div>
             <button className="button edit-button" onClick={handleEditClick}>
                 <FontAwesomeIcon icon={faPencilAlt} /> Edit
             </button>
+
+          {Array.isArray(priceHistory) && priceHistory.length > 0 && (
+            <div className="price-history">
+            <h4>Price History</h4>
+              {sortedHistory.length > 0 && (
+                <div className="price-history-graph">
+                  <Line data={chartData} options={chartOptions} />
+                </div>
+              )}
+              <table className="price-history-table">
+                <thead>
+                  <tr>
+                    <th>Date</th>
+                    <th>Price</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[...priceHistory]
+                    .sort((a, b) => new Date(a.changedAt).getTime() - new Date(b.changedAt).getTime())
+                    .map((h) => (
+                      <tr key={h.id}>
+                      <td>
+                        {new Date(h.changedAt).toLocaleDateString(undefined, {
+                          year: '2-digit',
+                          month: '2-digit',
+                          day: '2-digit'
+                        })}
+                      </td>
+                      <td>
+                        {h.discountedPrice !== undefined && h.discountedPrice !== null
+                          ? (
+                            <span>${formatPrice(h.discountedPrice)}</span>
+                          ) : (
+                            <span>${formatPrice(h.price)}</span>
+                          )}
+                      </td>
+                    </tr>
+                    ))}
+                </tbody>
+              </table>
+            </div>
+            )}
         </div>
     )
 }

src/index.css

@@ -628,6 +628,20 @@ h1 {
   margin-left: auto;
 }
 
+.price-history h4 {
+  margin-top: 0;
+}
+
+.price-history-graph {
+  min-width: 100%;
+  margin-bottom: 1rem;
+}
+
+.price-history-table td {
+  padding: 0.25rem 0.75rem;
+}
+
+
 @media (max-width: 1059.98px) { /* smaller desktop layout */
   .nav-bar {
     display: grid;

src/pages/CreateNewItem.tsx

@@ -125,7 +125,21 @@ const CreateNewItem: React.FC = () => {
     }
 
     try {
-      await client.models.Item.create(sanitizedItemInputs);
+      const result = await client.models.Item.create(sanitizedItemInputs);
+      if (!result?.data) {
+        throw new Error("no data returned on create new item");
+      }
+      const newItem = result.data;
+      await client.models.PriceHistory.create({
+        itemId: newItem.id, 
+        itemName: sanitizedItemInputs.itemName,
+        price: sanitizedItemInputs.itemPrice,
+        discountedPrice: sanitizedItemInputs.isDiscount
+          ? sanitizedItemInputs.discountedPrice
+          : undefined,
+        changedAt: new Date().toISOString(),
+      });
+
       const successMessage = `Item: ${sanitizedItemInputs.itemName} created successfully for $${sanitizedItemInputs.itemPrice} per ${sanitizedItemInputs.units}`;
       Swal.fire({
         title: 'New Item Successfully Created',