From ee1847c937e20ec2ce4cfb0c60930983b637e9b6 Mon Sep 17 00:00:00 2001
From: Axel Pettersson <axel@pettersson.cc>
Date: Sun, 1 Oct 2023 17:29:52 +0200
Subject: [PATCH] Various improvements and member document support

---
 .../api/member/[id]/documents/[page]/route.ts |  22 +++
 apps/web/app/cookie-policy/page.tsx           |   2 +-
 apps/web/app/error.tsx                        |   4 +-
 apps/web/app/layout.tsx                       |   6 +-
 apps/web/app/ledamot/[id]/biography-entry.tsx |   4 +-
 apps/web/app/ledamot/[id]/biography.tsx       |   2 +-
 apps/web/app/ledamot/[id]/documents.tsx       |  63 ++++++++-
 apps/web/app/ledamot/[id]/statistics.tsx      |   2 +-
 apps/web/app/ledamot/[id]/tabs.tsx            |   2 +-
 apps/web/app/not-found.tsx                    |   2 +-
 apps/web/app/om-oss/page.tsx                  |   2 +-
 apps/web/app/page.tsx                         |   8 +-
 apps/web/app/parti/[party]/page.tsx           |   2 +-
 .../standpunkter/[id]/party-standpoints.tsx   |  29 ++--
 apps/web/components/card.tsx                  |  19 ---
 apps/web/components/common/breadcrumbs.tsx    |   2 +-
 apps/web/components/{ => common}/button.tsx   |   0
 apps/web/components/common/card.tsx           |  52 +++++++
 apps/web/components/common/pagination.tsx     | 127 ++++++++++++++++++
 apps/web/components/header/header.tsx         |   2 +-
 .../components/{ => header}/theme-toggle.tsx  |   0
 .../api/documents/parsers/member-document.ts  |   8 +-
 apps/web/lib/api/member/get-absence.ts        |   2 +-
 .../lib/api/member/get-member-with-absence.ts |   4 +-
 apps/web/lib/api/member/parsers/absence.ts    |   3 +-
 apps/web/lib/api/member/types.ts              |  15 ++-
 apps/web/lib/api/parliament/types.ts          |   3 +-
 apps/web/lib/committes.ts                     |  18 +++
 apps/web/lib/navigation.tsx                   |   9 +-
 apps/web/lib/styles/committees.ts             |  22 +++
 apps/web/lib/styles/party.ts                  |  31 ++---
 apps/web/tailwind.config.ts                   |   6 +-
 32 files changed, 387 insertions(+), 86 deletions(-)
 create mode 100644 apps/web/app/api/member/[id]/documents/[page]/route.ts
 delete mode 100644 apps/web/components/card.tsx
 rename apps/web/components/{ => common}/button.tsx (100%)
 create mode 100644 apps/web/components/common/card.tsx
 create mode 100644 apps/web/components/common/pagination.tsx
 rename apps/web/components/{ => header}/theme-toggle.tsx (100%)

diff --git a/apps/web/app/api/member/[id]/documents/[page]/route.ts b/apps/web/app/api/member/[id]/documents/[page]/route.ts
new file mode 100644
index 000000000..b64c12c58
--- /dev/null
+++ b/apps/web/app/api/member/[id]/documents/[page]/route.ts
@@ -0,0 +1,22 @@
+import getMemberDocuments from "@lib/api/documents/get-member-documents";
+
+interface Payload {
+  params: {
+    id: string;
+    page: string;
+  };
+}
+
+export async function GET(
+  _request: Request,
+  { params: { id, page } }: Payload,
+) {
+  const pageInt = parseInt(page);
+
+  if (Number.isNaN(pageInt)) {
+    return new Response("Invalid page", { status: 400 });
+  }
+
+  const memberDocuments = await getMemberDocuments({ id, page: pageInt });
+  return Response.json(memberDocuments);
+}
diff --git a/apps/web/app/cookie-policy/page.tsx b/apps/web/app/cookie-policy/page.tsx
index 57bb426a2..7ab09e23c 100644
--- a/apps/web/app/cookie-policy/page.tsx
+++ b/apps/web/app/cookie-policy/page.tsx
@@ -1,4 +1,4 @@
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import Container from "@components/common/container";
 import PageTitle from "@components/common/page-title";
 import { CodeBracketIcon } from "@heroicons/react/24/solid";
diff --git a/apps/web/app/error.tsx b/apps/web/app/error.tsx
index 253d8f1f5..2e3007c70 100644
--- a/apps/web/app/error.tsx
+++ b/apps/web/app/error.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { PrimaryButton } from "@components/button";
-import { Card } from "@components/card";
+import { PrimaryButton } from "@components/common/button";
+import { Card } from "@components/common/card";
 import Container from "@components/common/container";
 import PageTitle from "@components/common/page-title";
 import { ExclamationCircleIcon } from "@heroicons/react/24/solid";
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 36b09ca0b..0bbddff8a 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -5,6 +5,7 @@ import Head from "./head";
 import Footer from "./footer";
 import Header from "@components/header/header";
 import { ThemeProvider } from "@components/providers/theme-provider";
+import { twMerge } from "tailwind-merge";
 
 const roboto = Roboto({
   weight: ["300", "400", "500", "700"],
@@ -18,7 +19,10 @@ export default function RootLayout({ children }: PropsWithChildren) {
     <html lang="sv" suppressHydrationWarning>
       <Head />
       <body
-        className={`${roboto.className} bg-background-light dark:bg-background-dark text-font-light dark:text-font-dark flex min-h-screen flex-col shadow-sm`}
+        className={twMerge(
+          roboto.className,
+          "bg-background-light dark:bg-background-dark text-font-light dark:text-font-dark flex min-h-screen flex-col",
+        )}
       >
         <ThemeProvider attribute="class">
           <Header />
diff --git a/apps/web/app/ledamot/[id]/biography-entry.tsx b/apps/web/app/ledamot/[id]/biography-entry.tsx
index a5f790992..4de60b74e 100644
--- a/apps/web/app/ledamot/[id]/biography-entry.tsx
+++ b/apps/web/app/ledamot/[id]/biography-entry.tsx
@@ -25,9 +25,9 @@ export default function BiographyEntry({ information }: Props) {
         {information.code}
         <ChevronDownIcon className="h-4 w-4 transition-transform group-aria-[expanded=true]:rotate-180" />
       </div>
-      <div className="px-4 pb-6 pt-2 group-aria-[expanded=false]:hidden">
+      <p className="px-4 pb-6 pt-2 group-aria-[expanded=false]:hidden">
         {information.content}
-      </div>
+      </p>
     </button>
   );
 }
diff --git a/apps/web/app/ledamot/[id]/biography.tsx b/apps/web/app/ledamot/[id]/biography.tsx
index 1aa7ee0bc..8af125f53 100644
--- a/apps/web/app/ledamot/[id]/biography.tsx
+++ b/apps/web/app/ledamot/[id]/biography.tsx
@@ -1,4 +1,4 @@
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import type { Information } from "@lib/api/member/types";
 import BiographyEntry from "./biography-entry";
 
diff --git a/apps/web/app/ledamot/[id]/documents.tsx b/apps/web/app/ledamot/[id]/documents.tsx
index 66dd72f99..6b6c4393a 100644
--- a/apps/web/app/ledamot/[id]/documents.tsx
+++ b/apps/web/app/ledamot/[id]/documents.tsx
@@ -1,9 +1,32 @@
 "use client";
-import type { MemberDocuments } from "@lib/api/member/types";
-import { useState } from "react";
+import { Card, CommitteeHeader } from "@components/common/card";
+import Pagination from "@components/common/pagination";
+import type { MemberDocument, MemberDocuments } from "@lib/api/member/types";
+import { routes } from "@lib/navigation";
+import Link from "next/link";
+import { useRef, useState } from "react";
 
-function Document() {
-  return <div>hej</div>;
+interface DocumentProps {
+  document: MemberDocument;
+}
+
+function Document({ document }: DocumentProps) {
+  return (
+    <Link href={routes.document(document.id)}>
+      <Card className="p-0 transition-opacity hover:opacity-75 dark:shadow-slate-900">
+        <CommitteeHeader committee={document.committee} />
+        <div className="p-4 ">
+          <p className="text-sm text-slate-600 dark:text-slate-400">
+            {document.title}
+          </p>
+          <p className="pb-1">{document.altTitle}</p>
+          <p className="text-sm text-slate-600 dark:text-slate-400">
+            {document.subtitle}
+          </p>
+        </div>
+      </Card>
+    </Link>
+  );
 }
 
 interface Props {
@@ -12,13 +35,39 @@ interface Props {
 }
 
 export default function Documents({ initialDocuments, memberId }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [page, setPage] = useState(1);
   const [documents, setDocuments] = useState(initialDocuments.documents);
 
+  async function changePage(page: number) {
+    const response = await fetch(
+      `${window.location.origin}${routes.api.memberDocument(memberId, page)}`,
+      { next: { revalidate: 60 * 60 * 24 } },
+    );
+    const newDocuments: MemberDocuments = await response.json();
+    setPage(page);
+    setDocuments(newDocuments.documents);
+    containerRef.current?.scrollIntoView();
+  }
+
   return (
-    <>
+    <div
+      className="scroll-mt-header-with-margin sm:scroll-mt-header-sm-with-margin m-4 grid gap-4"
+      ref={containerRef}
+    >
+      <Pagination
+        current={page}
+        total={initialDocuments.pages}
+        onChange={changePage}
+      />
       {documents.map((document) => (
-        <div key={document.id}>{document.altTitle}</div>
+        <Document key={document.id} document={document} />
       ))}
-    </>
+      <Pagination
+        current={page}
+        total={initialDocuments.pages}
+        onChange={changePage}
+      />
+    </div>
   );
 }
diff --git a/apps/web/app/ledamot/[id]/statistics.tsx b/apps/web/app/ledamot/[id]/statistics.tsx
index 3420dedbf..80cc51eee 100644
--- a/apps/web/app/ledamot/[id]/statistics.tsx
+++ b/apps/web/app/ledamot/[id]/statistics.tsx
@@ -1,4 +1,4 @@
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import type { MemberDetailedResponse } from "@lib/api/member/types";
 import { twMerge } from "tailwind-merge";
 
diff --git a/apps/web/app/ledamot/[id]/tabs.tsx b/apps/web/app/ledamot/[id]/tabs.tsx
index f29cad6f8..18f1db074 100644
--- a/apps/web/app/ledamot/[id]/tabs.tsx
+++ b/apps/web/app/ledamot/[id]/tabs.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import type { MemberDocuments } from "@lib/api/member/types";
 import { useState } from "react";
 import Documents from "./documents";
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
index 8c1ba8c0d..3f7de4a95 100644
--- a/apps/web/app/not-found.tsx
+++ b/apps/web/app/not-found.tsx
@@ -1,4 +1,4 @@
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import Container from "@components/common/container";
 import PageTitle from "@components/common/page-title";
 import { ExclamationCircleIcon } from "@heroicons/react/24/solid";
diff --git a/apps/web/app/om-oss/page.tsx b/apps/web/app/om-oss/page.tsx
index 5ab591caf..1cfaf76a5 100644
--- a/apps/web/app/om-oss/page.tsx
+++ b/apps/web/app/om-oss/page.tsx
@@ -1,6 +1,6 @@
 import { githubFrontend, githubProfile, linkedIn } from "@lib/socials";
 import PageTitle from "@components/common/page-title";
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import React from "react";
 import { InformationCircleIcon } from "@heroicons/react/24/solid";
 import ExternalLink from "@components/common/external-link";
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 09fadb736..3bd1220a5 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,9 +1,10 @@
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import Typed from "@components/common/typed";
 import Link from "next/link";
 import { routes } from "@lib/navigation";
 import PageTitle from "@components/common/page-title";
 import Container from "@components/common/container";
+import { twMerge } from "tailwind-merge";
 
 export const metadata = {
   title: "Partiguiden | Rösta rätt",
@@ -53,7 +54,10 @@ export default function IndexPage() {
               <Link
                 key={subject.id}
                 href={routes.standpoint(subject.id)}
-                className="bg-background-elevated-light dark:bg-background-elevated-dark-200 rounded py-3 shadow-md transition-opacity hover:opacity-70"
+                className={twMerge(
+                  "bg-background-elevated-light rounded py-3 shadow-md transition-opacity hover:opacity-70",
+                  "dark:bg-background-elevated-dark-200 dark:shadow-slate-900",
+                )}
               >
                 {subject.name}
               </Link>
diff --git a/apps/web/app/parti/[party]/page.tsx b/apps/web/app/parti/[party]/page.tsx
index 84f8dc198..64093c622 100644
--- a/apps/web/app/parti/[party]/page.tsx
+++ b/apps/web/app/parti/[party]/page.tsx
@@ -1,4 +1,4 @@
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import Container from "@components/common/container";
 import { Divider } from "@components/common/divider";
 import ExternalLink from "@components/common/external-link";
diff --git a/apps/web/app/standpunkter/[id]/party-standpoints.tsx b/apps/web/app/standpunkter/[id]/party-standpoints.tsx
index 82272dbe9..8a3977907 100644
--- a/apps/web/app/standpunkter/[id]/party-standpoints.tsx
+++ b/apps/web/app/standpunkter/[id]/party-standpoints.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import { Card } from "@components/card";
+import { Card } from "@components/common/card";
 import { ChevronUpIcon } from "@heroicons/react/24/solid";
 import { dateString } from "@lib/dates";
 import {
-  backgroundHover,
-  borderBottom,
-  marker,
-  textColor,
+  partyBackgroundHover,
+  partyBorderBottom,
+  partyMarker,
+  partyTextColor,
 } from "@lib/styles/party";
 import type { Standpoint } from "@partiguiden/party-data/types";
 import type { Party } from "@partiguiden/party-data/types";
@@ -34,13 +34,14 @@ export default function PartyStandpoints({
     <>
       <button
         onClick={handleClick}
-        className={`${borderBottom[party]} flex w-full items-center justify-between border-b-2 py-3 pl-2 text-start text-3xl font-light`}
+        aria-expanded={visible ? "true" : "false"}
+        className={twMerge(
+          partyBorderBottom[party],
+          "group flex w-full items-center justify-between border-b-2 py-3 pl-2 text-start text-3xl font-light",
+        )}
       >
         {partyNames[party]}
-        <ChevronUpIcon
-          data-active={visible ? "true" : "false"}
-          className="mr-2 h-6 w-6 transition-transform duration-300 data-[active=true]:rotate-180"
-        />
+        <ChevronUpIcon className="mr-2 h-6 w-6 transition-transform duration-300 group-aria-[expanded=true]:rotate-180" />
       </button>
 
       {visible && (
@@ -49,7 +50,9 @@ export default function PartyStandpoints({
             <Card key={standpoint.url} className="grid gap-5">
               <p className="text-2xl">{standpoint.title}</p>
               {standpoint.opinions.length > 0 ? (
-                <ul className={`${marker[party]} ml-4 grid list-disc gap-3`}>
+                <ul
+                  className={`${partyMarker[party]} ml-4 grid list-disc gap-3`}
+                >
                   {standpoint.opinions.map((opinion) => (
                     <li key={opinion}>{opinion}</li>
                   ))}
@@ -61,8 +64,8 @@ export default function PartyStandpoints({
                 <a
                   className={twMerge(
                     "whitespace-nowrap rounded p-2 text-sm font-medium uppercase transition-colors",
-                    textColor[party],
-                    backgroundHover[party],
+                    partyTextColor[party],
+                    partyBackgroundHover[party],
                   )}
                   target="_blank"
                   rel="noopener noreferrer"
diff --git a/apps/web/components/card.tsx b/apps/web/components/card.tsx
deleted file mode 100644
index 5e670c2ec..000000000
--- a/apps/web/components/card.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { twMerge } from "tailwind-merge";
-
-type BaseCardProps = React.PropsWithChildren<
-  React.HTMLAttributes<HTMLDivElement>
->;
-
-export function Card({ children, className = "", ...props }: BaseCardProps) {
-  return (
-    <div
-      className={twMerge(
-        "dark:bg-background-elevated-dark rounded bg-white p-4 shadow-md",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
diff --git a/apps/web/components/common/breadcrumbs.tsx b/apps/web/components/common/breadcrumbs.tsx
index 56e387578..f550f23dd 100644
--- a/apps/web/components/common/breadcrumbs.tsx
+++ b/apps/web/components/common/breadcrumbs.tsx
@@ -17,7 +17,7 @@ export interface BreadcrumbsProps {
 
 export default function Breadcrumbs({ links, current }: BreadcrumbsProps) {
   return (
-    <nav aria-label="Breadcrumbs">
+    <nav aria-label="Brödsmulor">
       <ol className="sm:text-md inline-flex flex-wrap items-center gap-1 text-sm text-slate-700 dark:text-slate-300 ">
         <li>
           <Link
diff --git a/apps/web/components/button.tsx b/apps/web/components/common/button.tsx
similarity index 100%
rename from apps/web/components/button.tsx
rename to apps/web/components/common/button.tsx
diff --git a/apps/web/components/common/card.tsx b/apps/web/components/common/card.tsx
new file mode 100644
index 000000000..b3a3002c6
--- /dev/null
+++ b/apps/web/components/common/card.tsx
@@ -0,0 +1,52 @@
+import { committeeInfo, type Committee } from "@lib/committes";
+import { committeeBackground } from "@lib/styles/committees";
+import { twMerge } from "tailwind-merge";
+
+type CardHeaderProps = React.PropsWithChildren<{
+  className?: string;
+}>;
+
+export function CardHeader({ children, className }: CardHeaderProps) {
+  return (
+    <div className={twMerge("w-full px-4 py-1", className)}>
+      <span>{children}</span>
+    </div>
+  );
+}
+
+type CommitteeHeaderProps = {
+  committee?: Committee | null;
+};
+
+export function CommitteeHeader({ committee }: CommitteeHeaderProps) {
+  if (!committee) {
+    return;
+  }
+  const info = committeeInfo[committee];
+  return (
+    <CardHeader
+      className={twMerge("text-font-dark", committeeBackground[committee])}
+    >
+      {info.desc}
+    </CardHeader>
+  );
+}
+
+type BaseCardProps = React.PropsWithChildren<
+  React.HTMLAttributes<HTMLDivElement>
+>;
+
+export function Card({ children, className = "", ...props }: BaseCardProps) {
+  return (
+    <div
+      className={twMerge(
+        "overflow-hidden rounded bg-white p-4 shadow-md",
+        "dark:bg-background-elevated-dark",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/apps/web/components/common/pagination.tsx b/apps/web/components/common/pagination.tsx
new file mode 100644
index 000000000..bdfe03948
--- /dev/null
+++ b/apps/web/components/common/pagination.tsx
@@ -0,0 +1,127 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/solid";
+import { twMerge } from "tailwind-merge";
+
+enum SeparatorType {
+  SeparatorStart = "start",
+  SeparatorEnd = "end",
+}
+
+function generatePagination(currentPage: number, max: number) {
+  const firstPage = 1;
+  const lastPage = max;
+
+  const offsetLeft = [...Array(5).keys()]
+    .map((index) =>
+      currentPage - index <= firstPage || currentPage - index === currentPage
+        ? undefined
+        : Math.abs(index - currentPage),
+    )
+    .reverse()
+    .filter((page): page is number => page !== undefined);
+
+  const offsetRight = [...Array(5).keys()]
+    .map((index) =>
+      currentPage + index >= lastPage || currentPage + index === currentPage
+        ? undefined
+        : currentPage + index,
+    )
+    .filter((page): page is number => page !== undefined);
+
+  // Balance the offsets
+  while (offsetLeft.length + offsetRight.length > 4) {
+    if (offsetLeft.length > offsetRight.length) {
+      offsetLeft.shift();
+      continue;
+    }
+    if (offsetLeft.length < offsetRight.length) {
+      offsetRight.pop();
+      continue;
+    }
+    offsetLeft.shift();
+    offsetRight.pop();
+  }
+
+  let pagination: (number | SeparatorType)[] = [firstPage];
+  if (Math.abs(firstPage - currentPage) > 3) {
+    pagination.push(SeparatorType.SeparatorStart);
+  }
+
+  pagination = pagination.concat(offsetLeft);
+
+  if (currentPage !== firstPage && currentPage !== lastPage) {
+    pagination.push(currentPage);
+  }
+
+  pagination = pagination.concat(offsetRight);
+
+  if (Math.abs(lastPage - currentPage) > 3) {
+    pagination.push(SeparatorType.SeparatorEnd);
+  }
+
+  pagination.push(lastPage);
+
+  return pagination;
+}
+
+function Separator() {
+  return <div>...</div>;
+}
+
+interface PaginationProps {
+  current: number;
+  total: number;
+  onChange: (page: number) => void;
+}
+
+export default function Pagination({
+  current,
+  total,
+  onChange,
+}: PaginationProps) {
+  function createOnChange(page: number) {
+    return () => onChange(page);
+  }
+
+  const pagination = generatePagination(current, total);
+
+  return (
+    <nav className="mx-auto flex gap-2">
+      <button
+        aria-label="Föregående sida"
+        disabled={current === 1}
+        onClick={createOnChange(current - 1)}
+        className="disabled:opacity-60"
+      >
+        <ChevronLeftIcon className="h-3 w-3 sm:h-4 sm:w-4" />
+      </button>
+
+      {pagination.map((page) =>
+        typeof page === "number" ? (
+          <button
+            key={page}
+            onClick={createOnChange(page)}
+            disabled={page === current}
+            aria-current={page === current}
+            className={twMerge(
+              "h-6 w-6 rounded-full text-xs transition-colors sm:h-8 sm:w-8",
+              "aria-[current=true]:bg-slate-200 dark:aria-[current=true]:bg-slate-600",
+              "hover:bg-slate-200 dark:hover:bg-slate-600",
+            )}
+          >
+            {page}
+          </button>
+        ) : (
+          <Separator key={page} />
+        ),
+      )}
+
+      <button
+        aria-label="Nästa sida"
+        onClick={createOnChange(current + 1)}
+        className="disabled:opacity-60"
+      >
+        <ChevronRightIcon className="h-3 w-3 sm:h-4 sm:w-4" />
+      </button>
+    </nav>
+  );
+}
diff --git a/apps/web/components/header/header.tsx b/apps/web/components/header/header.tsx
index 62f61ebff..81f7fe466 100644
--- a/apps/web/components/header/header.tsx
+++ b/apps/web/components/header/header.tsx
@@ -1,4 +1,4 @@
-import ThemeToggle from "@components/theme-toggle";
+import ThemeToggle from "./theme-toggle";
 import TabNavigation from "./tab-navigation";
 import DrawerNavigation from "./drawer-navigation";
 import MainLogo from "./main-logo";
diff --git a/apps/web/components/theme-toggle.tsx b/apps/web/components/header/theme-toggle.tsx
similarity index 100%
rename from apps/web/components/theme-toggle.tsx
rename to apps/web/components/header/theme-toggle.tsx
diff --git a/apps/web/lib/api/documents/parsers/member-document.ts b/apps/web/lib/api/documents/parsers/member-document.ts
index 445c9743e..bfca6712d 100644
--- a/apps/web/lib/api/documents/parsers/member-document.ts
+++ b/apps/web/lib/api/documents/parsers/member-document.ts
@@ -1,15 +1,21 @@
 import type { MemberDocument } from "@lib/api/member/types";
 import type { DocumentListEntry } from "@lib/api/parliament/types";
+import { Committee } from "@lib/committes";
 
 export default function parseMemberDocument(
   document: DocumentListEntry,
 ): MemberDocument {
   const {
-    organ: committee,
+    organ,
     dokumentnamn: title,
     undertitel: subtitle,
     notisrubrik: altTitle,
     id,
   } = document;
+
+  const committee = Object.values(Committee).includes(organ)
+    ? organ
+    : undefined;
+
   return { committee, title, subtitle, altTitle, id };
 }
diff --git a/apps/web/lib/api/member/get-absence.ts b/apps/web/lib/api/member/get-absence.ts
index ff102412d..7be6ff408 100644
--- a/apps/web/lib/api/member/get-absence.ts
+++ b/apps/web/lib/api/member/get-absence.ts
@@ -9,7 +9,7 @@ interface Query {
 export default async function getAbsence({
   id,
   parliamentYears,
-}: Query): Promise<number | null> {
+}: Query): Promise<number | undefined> {
   const query = new URLSearchParams({
     iid: id,
     rm: parliamentYears.join(","),
diff --git a/apps/web/lib/api/member/get-member-with-absence.ts b/apps/web/lib/api/member/get-member-with-absence.ts
index e992f6429..a2b68f972 100644
--- a/apps/web/lib/api/member/get-member-with-absence.ts
+++ b/apps/web/lib/api/member/get-member-with-absence.ts
@@ -5,7 +5,7 @@ import { getCurrentMandatePeriod } from "../parliament/get-current-mandate-perio
 
 export default async function getMemberWithAbsence(
   id: string,
-): Promise<MemberDetailedResponse | null> {
+): Promise<MemberDetailedResponse | undefined> {
   // Get latest parliament year and mandate period
   const mandatePeriod = await getCurrentMandatePeriod();
 
@@ -27,7 +27,7 @@ export default async function getMemberWithAbsence(
     ]);
 
   if (!memberData) {
-    return null;
+    return undefined;
   }
 
   return {
diff --git a/apps/web/lib/api/member/parsers/absence.ts b/apps/web/lib/api/member/parsers/absence.ts
index 6158445ed..14fac2d21 100644
--- a/apps/web/lib/api/member/parsers/absence.ts
+++ b/apps/web/lib/api/member/parsers/absence.ts
@@ -2,7 +2,7 @@ import type { VoteListGroupedSingle } from "@lib/api/parliament/types";
 
 export default function serializeAbsence(
   data: VoteListGroupedSingle,
-): number | null {
+): number | undefined {
   if (data.voteringlista.votering) {
     const votes = data.voteringlista.votering;
     const total =
@@ -15,5 +15,4 @@ export default function serializeAbsence(
       10
     );
   }
-  return null;
 }
diff --git a/apps/web/lib/api/member/types.ts b/apps/web/lib/api/member/types.ts
index 086171ea6..66e127e4a 100644
--- a/apps/web/lib/api/member/types.ts
+++ b/apps/web/lib/api/member/types.ts
@@ -1,7 +1,8 @@
+import type { Committee } from "@lib/committes";
 import type { Party } from "@partiguiden/party-data/types";
 
 export interface MemberDocument {
-  committee: string | null;
+  committee?: Committee;
   title: string;
   subtitle: string;
   altTitle: string;
@@ -11,20 +12,20 @@ export interface MemberDocument {
 export interface MemberDocuments {
   pages: number;
   count: number;
-  documents: Array<MemberDocument>;
+  documents: MemberDocument[];
 }
 
 export interface Information {
   code: string;
-  content: Array<string>;
+  content: string[];
   type: string;
 }
 
 export interface Task {
   committee: string;
   role: string;
-  content: Array<string>;
-  status: string | null;
+  content: string[];
+  status?: string;
   type: string;
   from: string;
   to: string;
@@ -50,7 +51,7 @@ export interface MemberResponse extends MemberListEntry {
 }
 
 export interface MemberAbsenceResponse extends MemberListEntry {
-  absence: number | null;
+  absence?: number;
 }
 
 export enum AbsencePeriod {
@@ -58,7 +59,7 @@ export enum AbsencePeriod {
   parliamentYear = "riksmöte",
 }
 export interface Absence {
-  value: number | null;
+  value?: number;
   description: string;
 }
 
diff --git a/apps/web/lib/api/parliament/types.ts b/apps/web/lib/api/parliament/types.ts
index 6aa04e97b..a62a649d3 100644
--- a/apps/web/lib/api/parliament/types.ts
+++ b/apps/web/lib/api/parliament/types.ts
@@ -1,3 +1,4 @@
+import type { Committee } from "@lib/committes";
 import type { Party } from "@partiguiden/party-data/types";
 
 export type MemberParty = Party | "-";
@@ -372,7 +373,7 @@ export interface DocumentListEntry {
   relurl: string;
   titel: string;
   rm: string;
-  organ: string;
+  organ: Committee;
   relaterat_id: string;
   doktyp: string;
   typ: string;
diff --git a/apps/web/lib/committes.ts b/apps/web/lib/committes.ts
index 0246685c9..a67a95b30 100644
--- a/apps/web/lib/committes.ts
+++ b/apps/web/lib/committes.ts
@@ -36,6 +36,24 @@ export const committeeColors: Record<Committee, string> = {
   [Committee.UFöU]: "#ffa801",
 };
 
+export const committeeColorsDark: Record<Committee, string> = {
+  [Committee.AU]: "#236a95",
+  [Committee.CU]: "#9f650d",
+  [Committee.FiU]: "#126f65",
+  [Committee.FöU]: "#1a597d",
+  [Committee.JuU]: "#232f40",
+  [Committee.KU]: "#8a3500",
+  [Committee.KrU]: "#602274",
+  [Committee.MJU]: "#1a723a",
+  [Committee.NU]: "#9d870b",
+  [Committee.SkU]: "#39399a",
+  [Committee.SfU]: "#a33257",
+  [Committee.SoU]: "#d03a3a",
+  [Committee.TU]: "#27238b",
+  [Committee.UbU]: "#535860",
+  [Committee.UU]: "#d01739",
+  [Committee.UFöU]: "#b07300",
+};
 export interface CommitteeInformation {
   name: string;
   desc: string;
diff --git a/apps/web/lib/navigation.tsx b/apps/web/lib/navigation.tsx
index c738504a2..2c89364f3 100644
--- a/apps/web/lib/navigation.tsx
+++ b/apps/web/lib/navigation.tsx
@@ -34,9 +34,16 @@ export const routes = {
   },
   memberStatsYear: "/member-stats/year",
   memberStatsPeriod: "/member-stats/period",
-  document: "/document/[id]",
+  document(id: string) {
+    return `/document/${id}`;
+  },
   debates: "/debate",
   debate: "/debate/[id]",
+  api: {
+    memberDocument(id: string, page: number) {
+      return `/api/member/${id}/documents/${page}`;
+    },
+  },
 };
 
 export interface RouteEntry {
diff --git a/apps/web/lib/styles/committees.ts b/apps/web/lib/styles/committees.ts
index e69de29bb..69042cea4 100644
--- a/apps/web/lib/styles/committees.ts
+++ b/apps/web/lib/styles/committees.ts
@@ -0,0 +1,22 @@
+import { Committee } from "@lib/committes";
+
+export const committeeBackground: {
+  [K in Committee]: `bg-committee-${K} dark:bg-committee-dark-${K}`;
+} = {
+  [Committee.AU]: "bg-committee-AU dark:bg-committee-dark-AU",
+  [Committee.CU]: "bg-committee-CU dark:bg-committee-dark-CU",
+  [Committee.FiU]: "bg-committee-FiU dark:bg-committee-dark-FiU",
+  [Committee.FöU]: "bg-committee-FöU dark:bg-committee-dark-FöU",
+  [Committee.JuU]: "bg-committee-JuU dark:bg-committee-dark-JuU",
+  [Committee.KU]: "bg-committee-KU dark:bg-committee-dark-KU",
+  [Committee.KrU]: "bg-committee-KrU dark:bg-committee-dark-KrU",
+  [Committee.MJU]: "bg-committee-MJU dark:bg-committee-dark-MJU",
+  [Committee.NU]: "bg-committee-NU dark:bg-committee-dark-NU",
+  [Committee.SkU]: "bg-committee-SkU dark:bg-committee-dark-SkU",
+  [Committee.SfU]: "bg-committee-SfU dark:bg-committee-dark-SfU",
+  [Committee.SoU]: "bg-committee-SoU dark:bg-committee-dark-SoU",
+  [Committee.TU]: "bg-committee-TU dark:bg-committee-dark-TU",
+  [Committee.UbU]: "bg-committee-UbU dark:bg-committee-dark-UbU",
+  [Committee.UU]: "bg-committee-UU dark:bg-committee-dark-UU",
+  [Committee.UFöU]: "bg-committee-UFöU dark:bg-committee-dark-UFöU",
+};
diff --git a/apps/web/lib/styles/party.ts b/apps/web/lib/styles/party.ts
index ade9e6f44..8c83f8447 100644
--- a/apps/web/lib/styles/party.ts
+++ b/apps/web/lib/styles/party.ts
@@ -1,6 +1,6 @@
 import { Party } from "@partiguiden/party-data/types";
 
-export const borderBottom = {
+export const partyBorderBottom: { [K in Party]: `border-b-party-${K}` } = {
   [Party.C]: "border-b-party-C",
   [Party.KD]: "border-b-party-KD",
   [Party.L]: "border-b-party-L",
@@ -9,9 +9,9 @@ export const borderBottom = {
   [Party.S]: "border-b-party-S",
   [Party.SD]: "border-b-party-SD",
   [Party.V]: "border-b-party-V",
-} as const;
+};
 
-export const textColor = {
+export const partyTextColor: { [K in Party]: `text-party-${K}` } = {
   [Party.C]: "text-party-C",
   [Party.KD]: "text-party-KD",
   [Party.L]: "text-party-L",
@@ -22,7 +22,7 @@ export const textColor = {
   [Party.V]: "text-party-V",
 } as const;
 
-export const background = {
+export const partyBackground: { [K in Party]: `bg-party-${K}` } = {
   [Party.C]: "bg-party-C",
   [Party.KD]: "bg-party-KD",
   [Party.L]: "bg-party-L",
@@ -33,18 +33,19 @@ export const background = {
   [Party.V]: "bg-party-V",
 } as const;
 
-export const backgroundHover = {
-  [Party.C]: "hover:bg-party-C/25",
-  [Party.KD]: "hover:bg-party-KD/25",
-  [Party.L]: "hover:bg-party-L/25",
-  [Party.M]: "hover:bg-party-M/25",
-  [Party.MP]: "hover:bg-party-MP/25",
-  [Party.S]: "hover:bg-party-S/25",
-  [Party.SD]: "hover:bg-party-SD/25",
-  [Party.V]: "hover:bg-party-V/25",
-} as const;
+export const partyBackgroundHover: { [K in Party]: `hover:bg-party-${K}/25` } =
+  {
+    [Party.C]: "hover:bg-party-C/25",
+    [Party.KD]: "hover:bg-party-KD/25",
+    [Party.L]: "hover:bg-party-L/25",
+    [Party.M]: "hover:bg-party-M/25",
+    [Party.MP]: "hover:bg-party-MP/25",
+    [Party.S]: "hover:bg-party-S/25",
+    [Party.SD]: "hover:bg-party-SD/25",
+    [Party.V]: "hover:bg-party-V/25",
+  } as const;
 
-export const marker = {
+export const partyMarker: { [K in Party]: `marker:text-party-${K}` } = {
   [Party.C]: "marker:text-party-C",
   [Party.KD]: "marker:text-party-KD",
   [Party.L]: "marker:text-party-L",
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index d89ad8ae7..563ea6555 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -1,7 +1,7 @@
 import type { Config } from "tailwindcss";
 import colors from "tailwindcss/colors";
 import { partyColors } from "@partiguiden/party-data/utils";
-import { committeeColors } from "./lib/committes";
+import { committeeColors, committeeColorsDark } from "./lib/committes";
 
 const themeColors = {
   primary: {
@@ -18,6 +18,9 @@ const themeColors = {
   },
   committee: {
     ...committeeColors,
+    dark: {
+      ...committeeColorsDark,
+    },
   },
   background: {
     elevated: {
@@ -44,6 +47,7 @@ const themeColors = {
 
 const themeHeight = {
   header: "3.5rem",
+  "header-with-margin": "4.5rem",
   "header-sm": "6rem",
   "header-sm-with-margin": "7rem",
 };