70 feat implementere oversikt over tidligere handlelister

[taraa]

Beskrivelse

Implementerer en oversiktsside for tidligere fullførte handlelister, basert på Figma-designet «Tidligere handlelister» (FIG. 10).

Formålet er å gjøre det enkelt for brukeren å finne igjen tidligere innkjøp gjennom søk, sortering og gruppering etter måned og år.

Relaterte issues

• Closes feat: Implementere oversikt over tidligere handlelister #70
• feat: Implementere oversikt over aktive handlelister #62 – Oversikt over aktive handlelister (merget)
• feat: Integrere handlelisteoversikt med GraphQL #63 – GraphQL-integrasjon (gjenstår)
• feat: Side for tidligere handleliste #59 – Detaljside for tidligere handleliste (gjenstår)

Endringer gjort

• Opprettet PreviousListsPage.tsx, PreviousListRow.tsx og tilhørende CSS.
• Viser fullførte handlelister gruppert etter måned og år.
• Viser dato, listenavn, antall produkter, totalt antall varer og estimert totalpris.
• Implementert søk etter listenavn og sortering etter dato (nyeste/eldste først).
• Implementert «Last inn flere» og «Last inn færre» med 10 lister om gangen.
• Viser hvor mange lister som er synlige av totalt antall søkeresultater.
• Lagrer søk, sortering og antall viste lister i localStorage, slik at innstillingene beholdes ved navigasjon og oppdatering.
• Gjort fanene «Aktive» og «Tidligere» klikkbare.
• Gjenbrukt designvariabler fra theme.css, med tilpasninger for ulike skjermstørrelser.

Testing

• npm run build fullført uten feil.
• Søk og sortering implementert.
• Paginering med 10 lister om gangen implementert.
• Lagring av brukerinnstillinger med localStorage implementert.
• Endelig kontroll av mobilvisning og lys/mørk modus.

Gjenstående arbeid

• GraphQL (feat: Integrere handlelisteoversikt med GraphQL #63): Erstatte mockdata med handlelister fra databasen.
• Detaljside (feat: Side for tidligere handleliste #59): Gjøre tidligere handlelister klikkbare slik at brukeren kan åpne og se innholdet i en fullført liste.
• «Bruk på nytt»: Koble knappen til funksjonalitet for å opprette en ny handleliste basert på en tidligere liste. Knappen er foreløpig deaktivert.

Design

Implementasjonen tar utgangspunkt i Figma-designet «Tidligere handlelister» (FIG. 10).
Lightmode - nyeste først

Darkmode - eldtse først

Lightmode - eldste først

Lasting inn av flere

Lasting inn av flere - Last inn færre

Mobilvisning