[WIP] Complete page

apps/web/app/ledamot/[id]/biography-entry.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { ChevronDownIcon } from "@heroicons/react/24/solid";
+import type { Information } from "@lib/api/member/types";
+import { useState } from "react";
+
+interface Props {
+  information: Information;
+}
+
+export default function BiographyEntry({ information }: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  function toggleEntry() {
+    setIsOpen((prevState) => !prevState);
+  }
+
+  return (
+    <button
+      className="group w-full border-t-2 border-slate-300 text-left dark:border-slate-600"
+      onClick={toggleEntry}
+      aria-expanded={isOpen}
+    >
+      <div className="flex items-center justify-between p-4">
+        {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">
+        {information.content}
+      </div>
+    </button>
+  );
+}

apps/web/app/ledamot/[id]/biography.tsx

@@ -0,0 +1,27 @@
+import { Card } from "@components/card";
+import type { Information } from "@lib/api/member/types";
+import BiographyEntry from "./biography-entry";
+
+interface Props {
+  memberInformation: Information[];
+}
+
+export default function Biography({ memberInformation }: Props) {
+  if (memberInformation.length === 0) {
+    return null;
+  }
+
+  return (
+    <Card className="p-0">
+      <h4 className="p-4 text-xl sm:text-2xl">Biografi</h4>
+      <div>
+        {memberInformation.map((info) => (
+          <BiographyEntry
+            key={`${info.type}:${info.code}`}
+            information={info}
+          />
+        ))}
+      </div>
+    </Card>
+  );
+}

apps/web/app/ledamot/[id]/documents.tsx

@@ -0,0 +1,24 @@
+"use client";
+import type { MemberDocuments } from "@lib/api/member/types";
+import { useState } from "react";
+
+function Document() {
+  return <div>hej</div>;
+}
+
+interface Props {
+  memberId: string;
+  initialDocuments: MemberDocuments;
+}
+
+export default function Documents({ initialDocuments, memberId }: Props) {
+  const [documents, setDocuments] = useState(initialDocuments.documents);
+
+  return (
+    <>
+      {documents.map((document) => (
+        <div key={document.id}>{document.altTitle}</div>
+      ))}
+    </>
+  );
+}

apps/web/app/ledamot/[id]/page.tsx

@@ -9,6 +9,8 @@ import Container from "@components/common/container";
 import Statistics from "./statistics";
 import getMemberWithAbsence from "@lib/api/member/get-member-with-absence";
 import getMemberDocuments from "@lib/api/documents/get-member-documents";
+import Biography from "./biography";
+import Tabs from "./tabs";
 
 interface PageProps {
   params: {
@@ -60,7 +62,12 @@ export default async function MemberPage({ params: { id } }: PageProps) {
             title: `${member.firstName} ${member.lastName}`,
           }}
         />
-        <Statistics member={member} documentCount={memberDocuments.count} />
+        <Statistics
+          absence={member.absence}
+          documentCount={memberDocuments.count}
+        />
+        <Biography memberInformation={member.information} />
+        <Tabs memberId={member.id} initialDocuments={memberDocuments} />
       </Container>
     </main>
   );

apps/web/app/ledamot/[id]/profile.tsx

@@ -8,7 +8,7 @@ interface ProfileProps {
 export default function Profile({ member }: ProfileProps) {
   return (
     <div className="grid justify-center gap-1 text-center">
-      <div className="bg-primary absolute h-28 w-full sm:h-36" />
+      <div className="bg-primary dark:bg-primary-dark absolute h-28 w-full sm:h-36" />
       <MemberImage
         member={member}
         className="mx-auto mt-8 h-40 w-40 sm:h-56 sm:w-56"

apps/web/app/ledamot/[id]/statistics.tsx

@@ -21,14 +21,11 @@ function StatisticsCard({
 }
 
 interface Props {
-  member: MemberDetailedResponse;
+  absence: MemberDetailedResponse["absence"];
   documentCount: number;
 }
 
-export default function Statistics({
-  member: { absence },
-  documentCount,
-}: Props) {
+export default function Statistics({ absence, documentCount }: Props) {
   return (
     <div className="flex flex-wrap gap-4">
       {absence.mandatePeriod.value !== null && (

apps/web/app/ledamot/[id]/tabs.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Card } from "@components/card";
+import type { MemberDocuments } from "@lib/api/member/types";
+import { useState } from "react";
+import Documents from "./documents";
+
+enum Tab {
+  Document = "document-tab",
+  Twitter = "twitter-tab",
+}
+
+interface Props {
+  memberId: string;
+  initialDocuments: MemberDocuments;
+}
+
+export default function Tabs({ memberId, initialDocuments }: Props) {
+  const [activeTab, setActiveTab] = useState(Tab.Document);
+
+  function setTab(event: React.MouseEvent) {
+    if ("id" in event.target) {
+      setActiveTab(event.target.id as Tab);
+    }
+  }
+
+  return (
+    <Card className="p-0">
+      <div className="flex" role="tablist">
+        <button
+          role="tab"
+          aria-selected={activeTab === Tab.Document}
+          id={Tab.Document}
+          onClick={setTab}
+          className="border-primary flex-1 py-4 aria-selected:border-b-2"
+        >
+          Dokument
+        </button>
+        <button
+          role="tab"
+          aria-selected={activeTab === Tab.Twitter}
+          id={Tab.Twitter}
+          onClick={setTab}
+          className="border-primary flex-1 py-4 aria-selected:border-b-2"
+        >
+          Twitter-flöde
+        </button>
+      </div>
+      {activeTab === Tab.Document && (
+        <Documents initialDocuments={initialDocuments} memberId={memberId} />
+      )}
+    </Card>
+  );
+}

apps/web/lib/api/documents/parsers/member-document.ts

@@ -5,12 +5,12 @@ export default function parseMemberDocument(
   document: DocumentListEntry,
 ): MemberDocument {
   const {
-    organ: authority,
+    organ: committee,
     dokumentnamn: title,
     undertitel: subtitle,
     notisrubrik: altTitle,
     id,
   } = document;
-
-  return { authority, title, subtitle, altTitle, id };
+  console.log(committee);
+  return { committee, title, subtitle, altTitle, id };
 }

apps/web/lib/api/member/parsers/task.ts

@@ -3,7 +3,7 @@ import type { Task } from "../types";
 
 export default function parseTask(unparsed: PersonTask): Task {
   const {
-    organ_kod: authorityCode,
+    organ_kod: committee,
     roll_kod: role,
     status,
     uppgift: content,
@@ -20,7 +20,7 @@ export default function parseTask(unparsed: PersonTask): Task {
       : [];
 
   return {
-    authorityCode,
+    committee,
     role,
     content: parsedContent,
     status,

apps/web/lib/api/member/types.ts

@@ -1,7 +1,7 @@
 import type { Party } from "@partiguiden/party-data/types";
 
 export interface MemberDocument {
-  authority: string | null;
+  committee: string | null;
   title: string;
   subtitle: string;
   altTitle: string;
@@ -21,7 +21,7 @@ export interface Information {
 }
 
 export interface Task {
-  authorityCode: string;
+  committee: string;
   role: string;
   content: Array<string>;
   status: string | null;

apps/web/lib/committes.ts

@@ -0,0 +1,125 @@
+export enum Committee {
+  AU = "AU",
+  CU = "CU",
+  FiU = "FiU",
+  FöU = "FöU",
+  JuU = "JuU",
+  KU = "KU",
+  KrU = "KrU",
+  MJU = "MJU",
+  NU = "NU",
+  SkU = "SkU",
+  SfU = "SfU",
+  SoU = "SoU",
+  TU = "TU",
+  UbU = "UbU",
+  UU = "UU",
+  UFöU = "UFöU",
+}
+
+export const committeeColors: Record<Committee, string> = {
+  [Committee.AU]: "#3498db",
+  [Committee.CU]: "#f39c12",
+  [Committee.FiU]: "#1abc9c",
+  [Committee.FöU]: "#2980b9",
+  [Committee.JuU]: "#34495e",
+  [Committee.KU]: "#d35400",
+  [Committee.KrU]: "#8e44ad",
+  [Committee.MJU]: "#27ae60",
+  [Committee.NU]: "#f1c40f",
+  [Committee.SkU]: "#575fcf",
+  [Committee.SfU]: "#ef5777",
+  [Committee.SoU]: "#ff5e57",
+  [Committee.TU]: "#3c40c6",
+  [Committee.UbU]: "#808e9b",
+  [Committee.UU]: "#f53b57",
+  [Committee.UFöU]: "#ffa801",
+};
+
+export interface CommitteeInformation {
+  name: string;
+  desc: string;
+}
+
+export const committeeInfo: Record<Committee, CommitteeInformation> = {
+  [Committee.AU]: {
+    name: "Arbetsmarknadsutskottet",
+    desc: "Arbetsmarknad och arbetsliv",
+    color: "#3498db",
+  },
+  [Committee.CU]: {
+    name: "Civilutskottet",
+    desc: "Bostad- och konsumentpolitik",
+    color: "#f39c12",
+  },
+  [Committee.FiU]: {
+    name: "Finansutskottet",
+    desc: "Ekonomi och finans",
+    color: "#1abc9c",
+  },
+  [Committee.FöU]: {
+    name: "Försvarsutskottet",
+    desc: "Försvar och militär",
+    color: "#2980b9",
+  },
+  [Committee.JuU]: {
+    name: "Justitieutskottet",
+    desc: "Rättsväsende och kriminalitet",
+    color: "#34495e",
+  },
+  [Committee.KU]: {
+    name: "Konstitutionsutskottet",
+    desc: "Riksdagen",
+    color: "#d35400",
+  },
+  [Committee.KrU]: {
+    name: "Kulturutskottet",
+    desc: "Kultur och folkbildning",
+    color: "#8e44ad",
+  },
+  [Committee.MJU]: {
+    name: "Miljö- och jordbruksutskottet",
+    desc: "Miljö och jordbruk",
+    color: "#27ae60",
+  },
+  [Committee.NU]: {
+    name: "Näringsutskottet",
+    desc: "Näringsliv och energi",
+    color: "#f1c40f",
+  },
+  [Committee.SkU]: {
+    name: "Skatteutskottet",
+    desc: "Skatter",
+    color: "#575fcf",
+  },
+  [Committee.SfU]: {
+    name: "Socialförsäkringsutskottet",
+    desc: "Socialförsäkringar",
+    color: "#ef5777",
+  },
+  [Committee.SoU]: {
+    name: "Socialutskottet",
+    desc: "Vård och omsorg",
+    color: "#ff5e57",
+  },
+  [Committee.TU]: {
+    name: "Trafikutskottet",
+    desc: "Trafik och transport",
+    color: "#3c40c6",
+  },
+  [Committee.UbU]: {
+    name: "Utbildningsutskottet",
+    desc: "Utbildning",
+    color: "#808e9b",
+  },
+  [Committee.UU]: {
+    name: "Utrikesutskottet",
+    desc: "Utrikes",
+    color: "#f53b57",
+  },
+  [Committee.UFöU]: {
+    name: "Sammansatta utrikes- och försvarsutskottet",
+    desc: "Utrikesförsvar",
+    color: "#ffa801",
+  },
+};

apps/web/tailwind.config.ts

@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";
 import colors from "tailwindcss/colors";
 import { partyColors } from "@partiguiden/party-data/utils";
+import { committeeInfo } from "@lib/committes";
 
 const themeColors = {
   primary: {