basic table

frontend/package.json

@@ -12,6 +12,7 @@
     "@types/node": "^16.18.126",
     "@types/react": "^19.1.7",
     "@types/react-dom": "^19.1.6",
+    "axios": "^1.10.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",
@@ -42,7 +43,7 @@
       "last 1 safari version"
     ]
   },
-   "jest": {
+  "jest": {
     "collectCoverageFrom": [
       "src/**/*.tsx"
     ],
@@ -55,5 +56,10 @@
       "html",
       "text"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17"
   }
 }

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.tsx

@@ -1,25 +1,10 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import ProductListPage from './pages/ProductListPage';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <ProductListPage></ProductListPage>
   );
 }
 

frontend/src/components/PaginationControls.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+interface Props {
+    filters: any;
+    setFilters: (filters: any) => void;
+    total: number;
+}
+
+const PaginationControls: React.FC<Props> = ({filters, setFilters, total}) => {
+    const page = filters.page || 0;
+    const size = filters.size || 10;
+    const totalPages = Math.ceil(total / size);
+
+    const goToPage = (newPage: number) => {
+        setFilters({...filters, page: newPage});
+    };
+
+    return (
+        <div className="flex justify-between items-center mt-4">
+            <button className="px-4 py-2 bg-gray-200 rounded disabled:opacity-50"
+            onClick={() => goToPage(page -1)}
+            disabled={page <=0}>
+                Return
+            </button>
+            <span className="text-sm">
+                Page <strong>{page + 1} of <strong>{totalPages}</strong></strong>
+            </span>
+            <button
+            className="px-4 py-2 bg-gray-200 rounded disabled:opacity-50"
+            onClick={() => goToPage(page + 1)}
+            disabled={page + 1 >= totalPages}>
+                Next
+            </button>
+        </div>
+    );
+};
+
+export default PaginationControls;

frontend/src/components/ProductFilters.tsx

@@ -0,0 +1,86 @@
+import React, {useState, useEffect} from "react";
+import { getCategories } from "../services/productService";
+
+interface Props {
+    filters: any;
+    setFilters: (filters: any) => void;
+}
+
+const ProductFilters: React.FC<Props> = ({filters, setFilters}) => {
+    const [name, setName] = useState(filters.name || "");
+    const [category, setCategory] = useState<string[]>(filters.category || []);
+    const [availability, setAvailability] = useState(filters.availability || "");
+
+    const [allCategories, setAllCategories] = useState<string[]> ([]);
+
+    useEffect(() => {
+        getCategories().then(setAllCategories).catch(err => {
+            console.error("Error getting categories");
+            setAllCategories([]);
+        });
+    }, []);
+
+    const handleApply = () => {
+        setFilters({
+            ...filters,
+            name,
+            category,
+            availability: availability === "" ? "" : availability === "in",
+            page: 0,
+        });
+    };
+
+    const toggleCategory = (value: string) => {
+        setCategory(prev =>
+            prev.includes(value)
+            ? prev.filter(c => c !== value)
+            : [...prev, value]
+        );
+    };
+
+    useEffect(() => {
+        handleApply();
+    }, [name, category, availability]);
+
+    return (
+        <div className="mb-4 p-4 bg-gray-100 rounded space-y-3">
+            <div>
+                <label className="block text-sm font-semibold">Search by name:</label>
+                <input type="text"
+                value={name}
+                onChange={e => setName(e.target.value)}
+                className="w-full p-2 border rounded"
+                placeholder="Product name..." />
+            </div>
+
+            <div>
+                <label className="block text-sm font-semibold">Filter by category</label>
+                <div className="glex flex-wrap gap-2 mt-1">
+                    {allCategories.map(cat => (
+                        <label key={cat} className="text-sm">
+                            <input type="checkbox"
+                            checked={category.includes(cat)}
+                            onChange={() => toggleCategory(cat)}
+                            className="mr-1" />
+                            {cat}
+                        </label>
+                    ))}
+                </div>
+            </div>
+
+            <div>
+                <label className="block text-sm font-semibold">Availability:</label>
+                <select 
+                value={availability}
+                onChange={e => setAvailability(e.target.value)}
+                className="w-full p-2 border rounded">
+                    <option value="">All</option>
+                    <option value="in">In stock</option>
+                    <option value="out">Out of stock</option>
+                </select>
+            </div>
+        </div>
+    );
+};
+
+export default ProductFilters

frontend/src/components/ProductTable.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { Product } from "../types/Product";
+import { markOutOfStock, markInStock, deleteProduct } from "../services/productService";
+
+interface Props{
+    products: Product[];
+    filters: any;
+    setFilters: (f: any) => void;
+}
+
+const ProductTable: React.FC<Props> = ({products, filters, setFilters}) => {
+    const handleSort = (field: string, secondary = false) => {
+        if(secondary) {
+            setFilters({ ...filters, sortBy2: field, asc2: !filters.asc2});
+        }else {
+            setFilters({...filters, sortBy: field, asc: !filters.asc});
+        }
+    };
+
+    const toggleStock = async (product: Product) => {
+        if(product.quantityInStock === 0) {
+            await markInStock(product.id);
+        } else {
+            await markOutOfStock(product.id);
+        }
+        setFilters({ ...filters});
+    }
+
+    const handleDelete = async (id:string) => {
+        if(window.confirm("Are you sure you want to delete this product?")) {
+            await deleteProduct(id);
+            setFilters({...filters});
+        }
+    };
+
+    const getExpirationColor = (exp?: string) => {
+        if(!exp) return "";
+        const now = new Date();
+        const date = new Date(exp);
+        const diff = (date.getTime() - now.getTime()) / (1000 * 60 * 60 * 24);
+        if ( diff < 7) return "bg-red-100";
+        if (diff <14) return "bg-yellow-100";
+        return "bg-green-100";
+    };
+
+    const getStockColor = (stock: number) => {
+        if(stock === 0) return "text-gray-400 line-through";
+        if(stock < 5) return "text-red-600";
+        if(stock <= 10) return "text-yellow-500";
+        return "";
+    };
+
+    return(
+        <table className="w-full border mt-4">
+            <thead className="bg-gray-200">
+                <tr>
+                    <th></th>
+                    <th onClick={() => handleSort("name")} className="cursor-pointer">Name</th>
+                    <th onClick={() => handleSort("category")} className="cursor-pointer">Category</th>
+                    <th onClick={() => handleSort("unitPrice")} className="cursor-pointer">Price</th>
+                    <th onClick={() => handleSort("quantityInStock")} className="cursor-pointer">Stock</th>
+                    <th onClick={() => handleSort("expirationDate")} className="cursor-pointer">Expiration date</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                {products.map(p => (
+                    <tr
+                    key={p.id}
+                    className={`${getExpirationColor(p.expirationDate)} border-b`}>
+                        <td>
+                            <input 
+                            type="checkbox"
+                            checked={p.quantityInStock === 0}
+                            onChange={() => toggleStock(p)}/>
+                        </td>
+                        <td className={getStockColor(p.quantityInStock)}>{p.name}</td>
+                        <td>{p.category}</td>
+                        <td>${p.unitPrice.toFixed(2)}</td>
+                        <td className={getStockColor(p.quantityInStock)}>{p.quantityInStock}</td>
+                        <td>{p.expirationDate ?? "-"}</td>
+                        <td>
+                            <button
+                            onClick={() => alert("pending edit modal")} className="text-blue-600 hove:underline mr-2">
+                                Edit
+                            </button>
+                            <button
+                            onClick={() => handleDelete(p.id)} className="text-red-600 hover:underline"> Delete</button>
+                        </td>
+                    </tr>
+                ))}
+                {products.length === 0 && (
+                    <tr><td colSpan={7} className="text-center py-4 text-gray-500">No available products :C</td></tr>
+                )}
+            </tbody>
+        </table>
+    );
+};
+
+export default ProductTable;

frontend/src/index.css

@@ -1,3 +1,7 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',