From 8cef14fd80ee95728eeeabdfc48cc01ff8fa679f Mon Sep 17 00:00:00 2001
From: Ingrihka <ingrihka@stud.ntnu.no>
Date: Tue, 20 Oct 2026 10:31:45 +0200
Subject: [PATCH] feat: vising for handlet liste(#59)

---
 .../pages/shoppingLists/CompletedListView.css | 106 +++++++++
 .../pages/shoppingLists/CompletedListView.tsx | 202 ++++++++++++++++++
 .../shoppingLists/ShoppingListDetailPage.tsx  |   5 +
 .../shoppingLists/shoppingListMockData.ts     | 125 +++++++++++
 .../pages/shoppingLists/shoppingListTypes.ts  |   2 +
 5 files changed, 440 insertions(+)
 create mode 100644 frontend/src/pages/shoppingLists/CompletedListView.css
 create mode 100644 frontend/src/pages/shoppingLists/CompletedListView.tsx

diff --git a/frontend/src/pages/shoppingLists/CompletedListView.css b/frontend/src/pages/shoppingLists/CompletedListView.css
new file mode 100644
index 0000000..b9374c4
--- /dev/null
+++ b/frontend/src/pages/shoppingLists/CompletedListView.css
@@ -0,0 +1,106 @@
+/* Visning for en handlet liste – fra Figma (Previous list).
+   Notatblokken, oppsummeringen og oppsettet kommer fra ShoppingListDetailPage.css. */
+
+.completed-list__paper {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding-bottom: 34px;
+}
+
+.completed-list__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+/* Skjevt «HANDLET»-stempel */
+.completed-list__stamp {
+  margin: 8px 24px 0 0;
+  padding: 6px 14px;
+  border: 2px solid var(--annotation);
+  border-radius: 4px;
+  font: 500 16px var(--font-mono);
+  letter-spacing: 0.24em;
+  color: var(--annotation);
+  transform: rotate(-8deg);
+}
+
+/* Varene i to kolonner */
+.completed-list__columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 36px;
+}
+
+.completed-list__column {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.completed-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--note-rule);
+}
+
+.completed-row__check {
+  flex-shrink: 0;
+  color: var(--text-accent);
+}
+
+.completed-row__name {
+  flex: 1;
+  min-width: 0;
+  font: 400 22px/28px var(--font-note);
+  color: var(--note-ink);
+}
+
+.completed-row__price {
+  white-space: nowrap;
+  font: 500 10px var(--font-mono);
+  letter-spacing: 0.06em;
+  color: var(--text-secondary);
+}
+
+/* «Slett lista» ser ut som en lenke, men er en knapp */
+.completed-list__delete {
+  align-self: flex-start;
+  padding: 0;
+  border: none;
+  background: none;
+  font: 500 10px var(--font-mono);
+  letter-spacing: 0.06em;
+  color: var(--text-accent);
+  cursor: pointer;
+}
+
+.completed-list__delete:hover {
+  text-decoration: underline;
+}
+
+.completed-list__delete:focus-visible {
+  outline: 2px solid var(--text-accent);
+  outline-offset: 2px;
+}
+
+/* Mobil: én kolonne, mindre stempel */
+@media (max-width: 600px) {
+  .completed-list__columns {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+
+  .completed-list__stamp {
+    margin-right: 0;
+    font-size: 12px;
+  }
+
+  .completed-row__name {
+    font-size: 19px;
+  }
+}
diff --git a/frontend/src/pages/shoppingLists/CompletedListView.tsx b/frontend/src/pages/shoppingLists/CompletedListView.tsx
new file mode 100644
index 0000000..ba294aa
--- /dev/null
+++ b/frontend/src/pages/shoppingLists/CompletedListView.tsx
@@ -0,0 +1,202 @@
+import { Link } from "react-router";
+import type { ShoppingList } from "./shoppingListTypes";
+import "./CompletedListView.css";
+import "../../components/button/Button.css";
+
+type CompletedListViewProps = {
+  list: ShoppingList;
+};
+
+// Gir f.eks. "47,80"
+function formatPrice(value: number) {
+  return value.toFixed(2).replace(".", ",");
+}
+
+// Gir f.eks. "18.09.2026"
+function formatShortDate(isoDate: string) {
+  return new Date(isoDate).toLocaleDateString("nb-NO", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  });
+}
+
+// Gir f.eks. "FREDAG 18. SEPTEMBER 2026"
+function formatLongDate(isoDate: string) {
+  return new Date(isoDate)
+    .toLocaleDateString("nb-NO", {
+      weekday: "long",
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+    })
+    .toUpperCase();
+}
+
+// Liten hake. Bruker currentColor, så fargen følger temaet.
+function CheckIcon() {
+  return (
+    <svg
+      className="completed-row__check"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+    >
+      <path
+        d="M2.5 8.5 6 12l7.5-8"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function CompletedListView({ list }: CompletedListViewProps) {
+  const completedAt = list.completedAt ?? list.createdAt;
+  const total =
+    list.estimatedTotal ??
+    list.items.reduce(
+      (sum, item) => sum + (item.unitPrice ?? 0) * item.quantity,
+      0,
+    );
+
+  // Deler varene i to kolonner: første halvdel til venstre, resten til høyre
+  const half = Math.ceil(list.items.length / 2);
+  const columns = [list.items.slice(0, half), list.items.slice(half)];
+
+  return (
+    <main className="shopping-list-page">
+      <div className="shopping-list-page__top">
+        {/* Oversikten over tidligere lister kobles av Alexis */}
+        <Link to="/lists" className="shopping-list-page__back">
+          ← TIDLIGERE HANDLELISTER
+        </Link>
+        <p className="shopping-list-page__fig">FIG. 11 — HANDLET LISTE</p>
+      </div>
+
+      <div className="shopping-list-page__layout">
+        <div className="notepad">
+          <div
+            className="notepad__sheet notepad__sheet--back"
+            aria-hidden="true"
+          />
+          <div
+            className="notepad__sheet notepad__sheet--middle"
+            aria-hidden="true"
+          />
+
+          <article className="notepad__pad" aria-labelledby="list-title">
+            <div className="notepad__bar">
+              <span>HANDLET · LISTE NR. {list.id}</span>
+              <span>{formatShortDate(completedAt)}</span>
+            </div>
+
+            <div className="notepad__paper completed-list__paper">
+              <header className="completed-list__header">
+                <div>
+                  <h1 id="list-title" className="notepad__title">
+                    {list.name}
+                  </h1>
+                  <p className="notepad__meta">
+                    HANDLET {formatLongDate(completedAt)} · {list.items.length}{" "}
+                    VARER
+                  </p>
+                </div>
+
+                <p className="completed-list__stamp">HANDLET</p>
+              </header>
+
+              <div className="completed-list__columns">
+                {columns.map((column, index) => (
+                  <ul key={index} className="completed-list__column">
+                    {column.map((item) => (
+                      <li key={item.id} className="completed-row">
+                        <CheckIcon />
+                        <span className="completed-row__name">
+                          {item.name}
+                          {item.quantity > 1 && ` ×${item.quantity}`}
+                        </span>
+                        <span className="completed-row__price">
+                          {item.unitPrice == null
+                            ? "—"
+                            : `${formatPrice(item.unitPrice * item.quantity)} KR`}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                ))}
+              </div>
+            </div>
+          </article>
+        </div>
+
+        <aside className="list-summary" aria-labelledby="about-title">
+          <h2 id="about-title" className="list-summary__label">
+            OM LISTA
+          </h2>
+
+          <dl className="list-summary__facts">
+            <div>
+              <dt>HANDLET</dt>
+              <span aria-hidden="true" />
+              <dd>{formatShortDate(completedAt)}</dd>
+            </div>
+            <div>
+              <dt>VARER</dt>
+              <span aria-hidden="true" />
+              <dd>{list.items.length}</dd>
+            </div>
+            <div>
+              <dt>BUTIKK</dt>
+              <span aria-hidden="true" />
+              <dd>{list.store?.toUpperCase() ?? "—"}</dd>
+            </div>
+          </dl>
+
+          <div className="list-summary__total">
+            <p className="list-summary__label list-summary__label--muted">
+              TOTALT
+            </p>
+            <p className="list-summary__sum">
+              {formatPrice(total)} <em>kr</em>
+            </p>
+          </div>
+
+          {/* Knappene kobles til backend senere (#63) */}
+          <button
+            type="button"
+            className="button button--primary button--l list-summary__button"
+          >
+            <span aria-hidden="true">↻</span> Bruk på nytt
+          </button>
+          <p className="list-summary__info">
+            Lager en ny aktiv lapp med de samme varene. Prisene oppdateres til
+            dagens priser.
+          </p>
+
+          <button
+            type="button"
+            className="button button--secondary button--l list-summary__button"
+          >
+            Legg varer på aktiv lapp
+          </button>
+
+          <button type="button" className="completed-list__delete">
+            SLETT LISTA
+          </button>
+        </aside>
+      </div>
+
+      <footer className="shopping-list-page__footer">
+        <p>HANDLELAPPEN — IT2810 · GRUPPE 27</p>
+        <p>SIDE 11 / 11</p>
+      </footer>
+    </main>
+  );
+}
+
+export default CompletedListView;
diff --git a/frontend/src/pages/shoppingLists/ShoppingListDetailPage.tsx b/frontend/src/pages/shoppingLists/ShoppingListDetailPage.tsx
index ced4b41..4c69a37 100644
--- a/frontend/src/pages/shoppingLists/ShoppingListDetailPage.tsx
+++ b/frontend/src/pages/shoppingLists/ShoppingListDetailPage.tsx
@@ -8,6 +8,7 @@ import "../../components/shoppingListRow/ShoppingListRow.css";
 import "../../components/checkbox/Checkbox.css";
 import "../../components/quantityStepper/QuantityStepper.css";
 import "../../components/button/Button.css";
+import CompletedListView from "./CompletedListView";
 
 type SortOrder = "added" | "alphabetical";
 
@@ -97,6 +98,10 @@ function ShoppingListDetailPage() {
       </main>
     );
   }
+  // Handlede lister vises uten redigering
+  if (list.status === "COMPLETED") {
+    return <CompletedListView list={list} />;
+  }
 
   return (
     <main className="shopping-list-page">
diff --git a/frontend/src/pages/shoppingLists/shoppingListMockData.ts b/frontend/src/pages/shoppingLists/shoppingListMockData.ts
index 6be5388..244f6f4 100644
--- a/frontend/src/pages/shoppingLists/shoppingListMockData.ts
+++ b/frontend/src/pages/shoppingLists/shoppingListMockData.ts
@@ -191,4 +191,129 @@ export const mockLists: ShoppingList[] = [
       },
     ],
   },
+
+  {
+    id: "11",
+    name: "Ukeshandel",
+    status: "COMPLETED",
+    inUse: false,
+    createdAt: "2026-09-15",
+    completedAt: "2026-09-18",
+    store: "Kiwi Lerkendal",
+    estimatedTotal: 669.6,
+    items: [
+      {
+        id: "19",
+        ean: "19",
+        name: "Lettmelk",
+        quantity: 2,
+        unitPrice: 23.9,
+        checked: true,
+      },
+      {
+        id: "20",
+        ean: "20",
+        name: "Grovbrød",
+        quantity: 1,
+        unitPrice: 39.9,
+        checked: true,
+      },
+      {
+        id: "21",
+        ean: "21",
+        name: "Norvegia 26 %",
+        quantity: 1,
+        unitPrice: 79.9,
+        checked: true,
+      },
+      {
+        id: "22",
+        ean: "22",
+        name: "Egg, 12 stk",
+        quantity: 1,
+        unitPrice: 54.9,
+        checked: true,
+      },
+      {
+        id: "23",
+        ean: "23",
+        name: "Bananer",
+        quantity: 1,
+        unitPrice: 29.9,
+        checked: true,
+      },
+      {
+        id: "24",
+        ean: "24",
+        name: "Epler",
+        quantity: 6,
+        unitPrice: 5.9,
+        checked: true,
+      },
+      {
+        id: "25",
+        ean: "25",
+        name: "Kyllingfilet",
+        quantity: 1,
+        unitPrice: 119,
+        checked: true,
+      },
+      {
+        id: "26",
+        ean: "26",
+        name: "Ris",
+        quantity: 1,
+        unitPrice: 32.9,
+        checked: true,
+      },
+      {
+        id: "27",
+        ean: "27",
+        name: "Tomater",
+        quantity: 4,
+        unitPrice: 6.9,
+        checked: true,
+      },
+      {
+        id: "28",
+        ean: "28",
+        name: "Agurk",
+        quantity: 1,
+        unitPrice: 16.9,
+        checked: true,
+      },
+      {
+        id: "29",
+        ean: "29",
+        name: "Kaffe",
+        quantity: 1,
+        unitPrice: 64.9,
+        checked: true,
+      },
+      {
+        id: "30",
+        ean: "30",
+        name: "Havregryn",
+        quantity: 1,
+        unitPrice: 28.9,
+        checked: true,
+      },
+      {
+        id: "31",
+        ean: "31",
+        name: "Yoghurt",
+        quantity: 3,
+        unitPrice: 12.9,
+        checked: true,
+      },
+      {
+        id: "32",
+        ean: "32",
+        name: "Smør",
+        quantity: 1,
+        unitPrice: 52.9,
+        checked: true,
+      },
+    ],
+  },
 ];
diff --git a/frontend/src/pages/shoppingLists/shoppingListTypes.ts b/frontend/src/pages/shoppingLists/shoppingListTypes.ts
index 93be9f5..8a7ed85 100644
--- a/frontend/src/pages/shoppingLists/shoppingListTypes.ts
+++ b/frontend/src/pages/shoppingLists/shoppingListTypes.ts
@@ -16,4 +16,6 @@ export interface ShoppingList {
   createdAt: string;
   items: ShoppingListItem[];
   estimatedTotal: number | null;
+  completedAt?: string; // dato listen ble handlet, f.eks. "2026-09-18"
+  store?: string; // butikken det ble handlet i
 }