70 feat implementere oversikt over tidligere handlelister

frontend/src/App.tsx

@@ -1,8 +1,4 @@
 import { useState } from "react";
-import NavigationMenu from "./components/navigationMenu/NavigationMenu";
-import ShoppingListsPage from "./pages/shoppingLists/ShoppingListsPage";
-import ShoppingListDetailPage from "./pages/shoppingLists/ShoppingListDetailPage";
-
 import {
   BrowserRouter,
   Routes,
@@ -11,17 +7,25 @@ import {
   useNavigate,
 } from "react-router";
 
+// Felles komponenter
 import Header from "./components/header/Header";
+import NavigationMenu from "./components/navigationMenu/NavigationMenu";
+
+// Sider
 import HomePage from "./pages/home/HomePage";
 import SearchResultsPage from "./pages/SearchResults/SearchResultsPage";
+import ShoppingListsPage from "./pages/shoppingLists/ShoppingListsPage";
+import ShoppingListDetailPage from "./pages/shoppingLists/ShoppingListDetailPage";
+import PreviousListsPage from "./pages/shoppingLists/PreviousListsPage";
 
+// Hjelpefunksjoner
 import {
   loadSearchPreferences,
   saveSearchPreferences,
 } from "./pages/SearchResults/searchPreferences";
-
 import { createCategoryUrl } from "./pages/home/categoryNavigation";
 
+// Styling
 import "./App.css";
 
 function AppLayout() {
@@ -131,6 +135,11 @@ function AppLayout() {
 
         <Route path="/lists/:id" element={<ShoppingListDetailPage />} />
 
+        <Route
+          path="/lists/history"
+          element={<PreviousListsPage />}
+        />
+
         <Route
           path="*"
           element={

frontend/src/pages/shoppingLists/PreviousListRow.tsx

@@ -0,0 +1,75 @@
+
+import { Link } from "react-router";
+import type { ShoppingList } from "./shoppingListTypes";
+
+interface PreviousListRowProps {
+  list: ShoppingList;
+  onReuse?: (id: string) => void;
+}
+
+export default function PreviousListRow({
+  list,
+  onReuse,
+}: PreviousListRowProps) {
+  const formattedDate = new Date(
+    `${list.createdAt.slice(0, 10)}T12:00:00`
+  ).toLocaleDateString("nb-NO", {
+    day: "2-digit",
+    month: "2-digit",
+  });
+
+  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";
+
+  return (
+    <div className="previous-list-row">
+      <Link
+        to={`/lists/${list.id}`}
+        className="previous-list-row__link"
+        aria-label={`Åpne handlelisten ${list.name}`}
+      >
+        <span className="previous-list-row__date">
+          {formattedDate}
+        </span>
+
+        <span className="previous-list-row__name">
+          {list.name}
+        </span>
+
+        <span className="previous-list-row__count">
+          {productCount} produkter · {itemCount} varer
+        </span>
+
+        <span className="previous-list-row__price">
+          {formattedPrice}
+        </span>
+      </Link>
+
+      <button
+        type="button"
+        className="previous-list-row__reuse"
+        onClick={() => onReuse?.(list.id)}
+        disabled={!onReuse}
+        title={
+          onReuse
+            ? `Bruk ${list.name} på nytt`
+            : "Funksjonen kommer senere"
+        }
+      >
+        ↻ Bruk på nytt
+      </button>
+    </div>
+  );
+}