feat: implementere oversikt for aktiv-shopping lister (#62)

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import NavigationMenu from "./components/navigationMenu/NavigationMenu";
+import ShoppingListsPage from "./pages/shoppingLists/ShoppingListsPage";
 
 import {
   BrowserRouter,
@@ -122,9 +123,12 @@ function AppLayout() {
 
         <Route
           path="/search"
-          element={
-            <SearchResultsPage key={location.search} />
-          }
+          element={<SearchResultsPage key={location.search} />}
+        />
+
+        <Route
+          path="/lists"
+          element={<ShoppingListsPage />}
         />
 
         <Route

frontend/src/pages/shoppingLists/ShoppingListCard.tsx

@@ -0,0 +1,84 @@
+
+import type { ShoppingList } from "./shoppingListTypes";
+import "./ShoppingListsPage.css";
+
+interface ShoppingListCardProps {
+  list: ShoppingList;
+  onOpen: (id: string) => void;
+}
+
+export default function ShoppingListCard({
+  list,
+  onOpen,
+}: ShoppingListCardProps) {
+  const productCount = list.items.length;
+
+  const itemCount = list.items.reduce(
+    (total, item) => total + item.quantity,
+    0
+);
+
+  const formattedPrice =
+    list.estimatedTotal !== null
+      ? list.estimatedTotal.toLocaleString("nb-NO", {
+          style: "currency",
+          currency: "NOK",
+        })
+      : "Pris ikke tilgjengelig";
+
+  const formattedDate = new Date(list.createdAt).toLocaleDateString(
+    "nb-NO",
+    { day: "numeric", month: "short" }
+  );
+
+  return (
+    <button
+      type="button"
+      className={`shopping-list-card ${list.inUse ? "shopping-list-card--in-use" : ""}`}
+      onClick={() => onOpen(list.id)}
+      aria-label={`Åpne handlelisten ${list.name}`}
+    >
+      <span className="shopping-list-card__tape" aria-hidden="true" />
+
+      <div className="shopping-list-card__content">
+        <div className="shopping-list-card__top">
+          <span className="shopping-list-card__date">
+            ENDRET {formattedDate}
+          </span>
+
+          {list.inUse && (
+            <span className="shopping-list-card__badge">
+              I BRUK
+            </span>
+          )}
+        </div>
+
+        <h2 className="shopping-list-card__title">
+          {list.name}
+        </h2>
+
+        <ul className="shopping-list-card__items">
+        {list.items.slice(0, 4).map((item) => (
+            <li key={item.id}>
+            {item.name}
+            {item.quantity > 1 && ` ×${item.quantity}`}
+            </li>
+        ))}
+
+        {list.items.length > 4 && (
+            <li className="shopping-list-card__more" aria-label="Flere varer i listen">
+            ...
+            </li>
+        )}
+        </ul>
+
+        <div className="shopping-list-card__footer">
+          <span>
+            {productCount} PRODUKTER · {itemCount} VARER
+          </span>
+          <strong>{formattedPrice}</strong>
+        </div>
+      </div>
+    </button>
+  );
+}