From 3604d7b4847d1402a7df0365e147591e78acd77a Mon Sep 17 00:00:00 2001
From: Truls Henrik Jakobsen <thj@variant.no>
Date: Tue, 19 Nov 2024 09:10:01 +0100
Subject: [PATCH 1/9] feat: add filters to employee list

---
 .../sections/employees/EmployeeList.tsx       | 150 ++++++++++++++++++
 .../sections/employees/Employees.tsx          |  23 +--
 src/types/employees.ts                        |   8 +-
 3 files changed, 165 insertions(+), 16 deletions(-)
 create mode 100644 src/components/sections/employees/EmployeeList.tsx

diff --git a/src/components/sections/employees/EmployeeList.tsx b/src/components/sections/employees/EmployeeList.tsx
new file mode 100644
index 000000000..e87ac7c2d
--- /dev/null
+++ b/src/components/sections/employees/EmployeeList.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+
+import Button from "src/components/buttons/Button";
+import Text from "src/components/text/Text";
+import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
+import { ChewbaccaEmployee, Competence } from "src/types/employees";
+import { aliasFromEmail } from "src/utils/employees";
+
+import styles from "./employees.module.css";
+
+export interface EmployeesProps {
+  employees: ChewbaccaEmployee[];
+  language: string;
+  employeesPageSlug: string;
+}
+
+export default function EmployeeList({
+  employees,
+  language,
+  employeesPageSlug,
+}: EmployeesProps) {
+  const [filteredEmployees, setFilteredEmployees] =
+    useState<ChewbaccaEmployee[]>(employees);
+
+  const competences: Competence[] = [
+    "Utvikling",
+    "Administasjon",
+    "Design",
+    "Project Management",
+  ];
+
+  const competenceCounts: Record<Competence, number> = {
+    Utvikling: 0,
+    Administasjon: 0,
+    Design: 0,
+    "Project Management": 0,
+  };
+
+  employees
+    .flatMap((e) => e.competences)
+    .forEach((c) => (competenceCounts[c] += 1));
+
+  const [competenceFilters, setCompetenceFilters] = useState(
+    new Map<Competence, boolean>(competences.map((c) => [c, false])),
+  );
+
+  function toggleFilter(toggleFilterKey: Competence) {
+    const newFilters = competenceFilters;
+    newFilters.set(toggleFilterKey, !newFilters.get(toggleFilterKey));
+    setCompetenceFilters(newFilters);
+
+    console.log(newFilters.values());
+
+    if (newFilters.values().every((x) => !x)) {
+      setFilteredEmployees(employees);
+      return;
+    }
+
+    const newFilteredEmployees = employees.filter((x) =>
+      x.competences.some((c) => newFilters.get(c)),
+    );
+
+    setFilteredEmployees(newFilteredEmployees);
+  }
+
+  return (
+    <>
+      <div className={styles.employeeCountWrapper}>
+        <p className={styles.employeeCount}>
+          Viser{" "}
+          <span className={styles.employeeCountValue}>
+            {filteredEmployees.length}
+          </span>{" "}
+          av{" "}
+          <span className={styles.employeeCountValue}>{employees.length}</span>{" "}
+          konsulenter
+        </p>
+        <div style={{ display: "flex" }}>
+          {competences.map((competence) => {
+            const active = competenceFilters.get(competence);
+            return (
+              <Button
+                key={competence}
+                type={active ? "secondaryFilled" : "secondary"}
+                onClick={() => toggleFilter(competence)}
+              >
+                {competence} ({competenceCounts[competence]})
+              </Button>
+              //   <Checkbox
+              //     key={competence}
+              //     name={`show${competence}`}
+              //     value={competenceFilters.get(competence)!}
+              //     label={competence}
+              //     onChange={() => {
+              //       toggleFilter(competence);
+              //     }}
+              //   />
+            );
+          })}
+        </div>
+      </div>
+
+      {filteredEmployees.map(
+        (employee) =>
+          employee.imageThumbUrl &&
+          employee.name &&
+          employee.email && (
+            <div key={employee.email} className={styles.employee}>
+              <Link
+                href={`/${language}/${employeesPageSlug}/${aliasFromEmail(employee.email)}`}
+              >
+                <div className={styles.employeeImage}>
+                  <Image
+                    src={employee.imageUrl ?? employee.imageThumbUrl}
+                    alt={employee.name}
+                    style={{ objectFit: "cover" }}
+                    fill={true}
+                  />
+                </div>
+              </Link>
+              <div className={styles.employeeInfo}>
+                <p className={styles.employeeName}>{employee.name}</p>
+                {employee.competences.map((competence) => (
+                  <Text
+                    type="labelRegular"
+                    key={competence}
+                    className={styles.employeeRole}
+                  >
+                    {competence}
+                  </Text>
+                ))}
+                {employee.email && (
+                  <p className={styles.employeeEmail}>{employee.email}</p>
+                )}
+                {employee.telephone && (
+                  <p className={styles.employeeTelephone}>
+                    {formatPhoneNumber(employee.telephone)}
+                  </p>
+                )}
+              </div>
+            </div>
+          ),
+      )}
+    </>
+  );
+}
diff --git a/src/components/sections/employees/Employees.tsx b/src/components/sections/employees/Employees.tsx
index 3fb4fa227..4c7b86fe6 100644
--- a/src/components/sections/employees/Employees.tsx
+++ b/src/components/sections/employees/Employees.tsx
@@ -1,11 +1,6 @@
 import { headers } from "next/headers";
-import Image from "next/image";
-import Link from "next/link";
 
-import Text from "src/components/text/Text";
-import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import {
-  aliasFromEmail,
   domainFromEmail,
   fetchAllChewbaccaEmployees,
 } from "src/utils/employees";
@@ -14,6 +9,7 @@ import { EmployeesSection } from "studio/lib/interfaces/pages";
 import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
 import { loadStudioQuery } from "studio/lib/store";
 
+import EmployeeList from "./EmployeeList";
 import styles from "./employees.module.css";
 
 export interface EmployeesProps {
@@ -42,20 +38,17 @@ export default async function Employees({ language, section }: EmployeesProps) {
     (employee) =>
       employee.email != null && domainFromEmail(employee.email) === domain,
   );
-  const total = employees.length;
 
   return (
     <div className={styles.wrapper}>
       <div className={styles.employees}>
         <h1 className={styles.header}>{section.basicTitle}</h1>
-        <div className={styles.employeeCountWrapper}>
-          <p className={styles.employeeCount}>
-            Viser <span className={styles.employeeCountValue}>{total}</span> av{" "}
-            <span className={styles.employeeCountValue}>{total}</span>{" "}
-            konsulenter
-          </p>
-        </div>
-        {employees.map(
+        <EmployeeList
+          language={language}
+          employees={employees}
+          employeesPageSlug={employeesPageSlug}
+        />
+        {/* {employees.map(
           (employee) =>
             employee.imageThumbUrl &&
             employee.name &&
@@ -95,7 +88,7 @@ export default async function Employees({ language, section }: EmployeesProps) {
                 </div>
               </div>
             ),
-        )}
+        )} */}
       </div>
     </div>
   );
diff --git a/src/types/employees.ts b/src/types/employees.ts
index 2817161f3..9031f97ac 100644
--- a/src/types/employees.ts
+++ b/src/types/employees.ts
@@ -16,6 +16,12 @@ export function isChewbaccaEmployeesResponse(
   );
 }
 
+export type Competence =
+  | "Project Management"
+  | "Design"
+  | "Utvikling"
+  | "Administasjon";
+
 export interface ChewbaccaEmployee {
   email?: string | null;
   name?: string | null;
@@ -24,7 +30,7 @@ export interface ChewbaccaEmployee {
   imageThumbUrl?: string | null;
   officeName?: string | null;
   startDate?: string | null;
-  competences: string[];
+  competences: Competence[];
 }
 
 export function isChewbaccaEmployee(

From fb55c2b25b3a7894ea9b77c37094a132037f14f1 Mon Sep 17 00:00:00 2001
From: Truls Henrik Jakobsen <thj@variant.no>
Date: Tue, 19 Nov 2024 12:26:12 +0100
Subject: [PATCH 2/9] feat: add location filter

---
 .../sections/employees/EmployeeList.tsx       | 198 +++++++++++++-----
 .../sections/employees/Employees.tsx          |  41 ----
 .../sections/employees/employees.module.css   |  17 ++
 src/components/text/Text.tsx                  |  10 +-
 src/components/text/text.module.css           |   7 +
 src/utils/renderSection.tsx                   |   1 +
 6 files changed, 170 insertions(+), 104 deletions(-)

diff --git a/src/components/sections/employees/EmployeeList.tsx b/src/components/sections/employees/EmployeeList.tsx
index e87ac7c2d..849363ee5 100644
--- a/src/components/sections/employees/EmployeeList.tsx
+++ b/src/components/sections/employees/EmployeeList.tsx
@@ -12,27 +12,14 @@ import { aliasFromEmail } from "src/utils/employees";
 
 import styles from "./employees.module.css";
 
-export interface EmployeesProps {
-  employees: ChewbaccaEmployee[];
-  language: string;
-  employeesPageSlug: string;
-}
-
-export default function EmployeeList({
-  employees,
-  language,
-  employeesPageSlug,
-}: EmployeesProps) {
-  const [filteredEmployees, setFilteredEmployees] =
-    useState<ChewbaccaEmployee[]>(employees);
-
-  const competences: Competence[] = [
-    "Utvikling",
-    "Administasjon",
-    "Design",
-    "Project Management",
-  ];
-
+const competences: Competence[] = [
+  "Utvikling",
+  "Administasjon",
+  "Design",
+  "Project Management",
+];
+
+function countCompetences(employees: ChewbaccaEmployee[]) {
   const competenceCounts: Record<Competence, number> = {
     Utvikling: 0,
     Administasjon: 0,
@@ -44,64 +31,159 @@ export default function EmployeeList({
     .flatMap((e) => e.competences)
     .forEach((c) => (competenceCounts[c] += 1));
 
-  const [competenceFilters, setCompetenceFilters] = useState(
-    new Map<Competence, boolean>(competences.map((c) => [c, false])),
-  );
+  return competenceCounts;
+}
 
-  function toggleFilter(toggleFilterKey: Competence) {
-    const newFilters = competenceFilters;
-    newFilters.set(toggleFilterKey, !newFilters.get(toggleFilterKey));
-    setCompetenceFilters(newFilters);
+function countLocations(employees: ChewbaccaEmployee[]) {
+  const locationCounts: Record<string, number> = {};
 
-    console.log(newFilters.values());
+  employees
+    .flatMap((e) => e.officeName)
+    .filter((o) => !!o)
+    .forEach((o) =>
+      !locationCounts[o!]
+        ? (locationCounts[o!] = 1)
+        : (locationCounts[o!] += 1),
+    );
 
-    if (newFilters.values().every((x) => !x)) {
-      setFilteredEmployees(employees);
-      return;
-    }
+  return locationCounts;
+}
 
-    const newFilteredEmployees = employees.filter((x) =>
-      x.competences.some((c) => newFilters.get(c)),
-    );
+export interface EmployeesProps {
+  employees: ChewbaccaEmployee[];
+  language: string;
+  employeesPageSlug: string;
+}
+
+interface EmployeeFilters {
+  competenceFilter: Competence | null;
+  locationFilter: string | null;
+}
+
+export default function EmployeeList({
+  employees,
+  language,
+  employeesPageSlug,
+}: EmployeesProps) {
+  const competenceCounts = countCompetences(employees);
+  const locationCounts = countLocations(employees);
+  const locations = Object.keys(locationCounts);
+
+  const [filteredEmployees, setFilteredEmployees] =
+    useState<ChewbaccaEmployee[]>(employees);
+
+  const [employeeFilters, setEmployeeFilters] = useState<EmployeeFilters>({
+    competenceFilter: null,
+    locationFilter: null,
+  });
+
+  function filterEmployees(newFilters: Partial<EmployeeFilters>) {
+    const combinedFilters = { ...employeeFilters, ...newFilters };
+    setEmployeeFilters(combinedFilters);
+
+    console.table(newFilters);
+    console.table(combinedFilters);
+
+    const newFilteredEmployees = employees.filter((e) => {
+      if (
+        combinedFilters.competenceFilter !== null &&
+        !e.competences.includes(combinedFilters.competenceFilter)
+      ) {
+        console.log("Employee competence does not match filter", e.competences);
+        return false;
+      }
+
+      if (
+        combinedFilters.locationFilter !== null &&
+        e.officeName !== combinedFilters.locationFilter
+      ) {
+        console.log("Employee location does not match filter", e.officeName);
+        return false;
+      }
+
+      return true;
+    });
 
     setFilteredEmployees(newFilteredEmployees);
   }
 
   return (
     <>
-      <div className={styles.employeeCountWrapper}>
-        <p className={styles.employeeCount}>
-          Viser{" "}
-          <span className={styles.employeeCountValue}>
-            {filteredEmployees.length}
-          </span>{" "}
-          av{" "}
-          <span className={styles.employeeCountValue}>{employees.length}</span>{" "}
-          konsulenter
-        </p>
-        <div style={{ display: "flex" }}>
+      <div className={styles.employeeFiltersWrapper}>
+        <div className={styles.employeeFilterWrapper}>
+          <Text type="labelSemibold" className={styles.employeeFilterLabel}>
+            Fag
+          </Text>
+          <Button
+            size="small"
+            type={
+              employeeFilters.competenceFilter == null
+                ? "secondaryFilled"
+                : "secondary"
+            }
+            onClick={() => filterEmployees({ competenceFilter: null })}
+          >
+            Alle
+          </Button>
           {competences.map((competence) => {
-            const active = competenceFilters.get(competence);
+            const active = employeeFilters.competenceFilter == competence;
             return (
               <Button
+                size="small"
                 key={competence}
                 type={active ? "secondaryFilled" : "secondary"}
-                onClick={() => toggleFilter(competence)}
+                onClick={() =>
+                  filterEmployees({ competenceFilter: competence })
+                }
               >
                 {competence} ({competenceCounts[competence]})
               </Button>
-              //   <Checkbox
-              //     key={competence}
-              //     name={`show${competence}`}
-              //     value={competenceFilters.get(competence)!}
-              //     label={competence}
-              //     onChange={() => {
-              //       toggleFilter(competence);
-              //     }}
-              //   />
             );
           })}
         </div>
+        <div className={styles.employeeFilterWrapper}>
+          <Text type="labelSemibold" className={styles.employeeFilterLabel}>
+            Lokasjon
+          </Text>
+          <Button
+            size="small"
+            type={
+              employeeFilters.locationFilter == null
+                ? "secondaryFilled"
+                : "secondary"
+            }
+            onClick={() => filterEmployees({ locationFilter: null })}
+          >
+            Alle
+          </Button>
+          {locations.map((location) => {
+            const active = employeeFilters.locationFilter == location;
+            return (
+              <Button
+                size="small"
+                key={location}
+                type={active ? "secondaryFilled" : "secondary"}
+                onClick={() => filterEmployees({ locationFilter: location })}
+              >
+                {location} ({locationCounts[location]})
+              </Button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className={styles.employeeCountWrapper}>
+        <div style={{ display: "flex" }}></div>
+
+        <p className={styles.employeeCount}>
+          Viser{" "}
+          <span className={styles.employeeCountValue}>
+            {filteredEmployees.length}
+          </span>{" "}
+          av{" "}
+          <span className={styles.employeeCountValue}>{employees.length}</span>{" "}
+          konsulenter
+        </p>
       </div>
 
       {filteredEmployees.map(
diff --git a/src/components/sections/employees/Employees.tsx b/src/components/sections/employees/Employees.tsx
index 4c7b86fe6..df5b0291d 100644
--- a/src/components/sections/employees/Employees.tsx
+++ b/src/components/sections/employees/Employees.tsx
@@ -48,47 +48,6 @@ export default async function Employees({ language, section }: EmployeesProps) {
           employees={employees}
           employeesPageSlug={employeesPageSlug}
         />
-        {/* {employees.map(
-          (employee) =>
-            employee.imageThumbUrl &&
-            employee.name &&
-            employee.email && (
-              <div key={employee.email} className={styles.employee}>
-                <Link
-                  href={`/${language}/${employeesPageSlug}/${aliasFromEmail(employee.email)}`}
-                >
-                  <div className={styles.employeeImage}>
-                    <Image
-                      src={employee.imageUrl ?? employee.imageThumbUrl}
-                      alt={employee.name}
-                      objectFit="cover"
-                      fill={true}
-                    />
-                  </div>
-                </Link>
-                <div className={styles.employeeInfo}>
-                  <p className={styles.employeeName}>{employee.name}</p>
-                  {employee.competences.map((competence) => (
-                    <Text
-                      type="labelRegular"
-                      key={competence}
-                      className={styles.employeeRole}
-                    >
-                      {competence}
-                    </Text>
-                  ))}
-                  {employee.email && (
-                    <p className={styles.employeeEmail}>{employee.email}</p>
-                  )}
-                  {employee.telephone && (
-                    <p className={styles.employeeTelephone}>
-                      {formatPhoneNumber(employee.telephone)}
-                    </p>
-                  )}
-                </div>
-              </div>
-            ),
-        )} */}
       </div>
     </div>
   );
diff --git a/src/components/sections/employees/employees.module.css b/src/components/sections/employees/employees.module.css
index fab3a7777..f6f36ee12 100644
--- a/src/components/sections/employees/employees.module.css
+++ b/src/components/sections/employees/employees.module.css
@@ -12,6 +12,23 @@
   font-weight: 600;
 }
 
+.employeeFiltersWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.employeeFilterWrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.employeeFilterLabel {
+  min-width: 4.5rem;
+  width: 4.5rem;
+}
+
 .employeeCountWrapper {
   width: 100%;
   grid-column: 1 / -1;
diff --git a/src/components/text/Text.tsx b/src/components/text/Text.tsx
index d233234db..c8413ae56 100644
--- a/src/components/text/Text.tsx
+++ b/src/components/text/Text.tsx
@@ -34,11 +34,11 @@ const elementMap: { [key in TextType]: keyof JSX.IntrinsicElements } = {
   h6: "h6",
   desktopLink: "p",
   desktopLinkBig: "p",
-  labelSmall: "p",
-  labelLight: "p",
-  labelRegular: "p",
-  labelSemibold: "p",
-  labelBold: "p",
+  labelSmall: "span",
+  labelLight: "span",
+  labelRegular: "span",
+  labelSemibold: "span",
+  labelBold: "span",
   quoteItalic: "p",
   quoteNormal: "p",
   bodyExtraSmall: "p",
diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css
index 82e24402e..02cab9525 100644
--- a/src/components/text/text.module.css
+++ b/src/components/text/text.module.css
@@ -122,6 +122,13 @@
   line-height: 120%;
 }
 
+.labelBold {
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 800;
+  line-height: 120%;
+}
+
 .quoteNormal {
   font-size: 1.5rem;
   font-style: normal;
diff --git a/src/utils/renderSection.tsx b/src/utils/renderSection.tsx
index 57a98b2d2..4ca1e138d 100644
--- a/src/utils/renderSection.tsx
+++ b/src/utils/renderSection.tsx
@@ -220,6 +220,7 @@ const SectionRenderer = ({
     case "grid":
       return renderGridSection(section, sectionIndex, isDraftMode, initialData);
     case "employees":
+      console.table(section);
       return <Employees language={language} section={section} />;
     default:
       return null;

From 176794d4e8d7f81726dc304665f9b59c5679667a Mon Sep 17 00:00:00 2001
From: Truls Henrik Jakobsen <thj@variant.no>
Date: Tue, 19 Nov 2024 12:36:19 +0100
Subject: [PATCH 3/9] fix: filters should wrap

---
 src/components/sections/employees/employees.module.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/sections/employees/employees.module.css b/src/components/sections/employees/employees.module.css
index f6f36ee12..626bfae79 100644
--- a/src/components/sections/employees/employees.module.css
+++ b/src/components/sections/employees/employees.module.css
@@ -16,15 +16,18 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  grid-column: 1 / -1;
 }
 
 .employeeFilterWrapper {
+  flex-wrap: wrap;
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }
 
 .employeeFilterLabel {
+  flex-shrink: 0;
   min-width: 4.5rem;
   width: 4.5rem;
 }

From 38aaa6a803bdbd327942192d7ebf106ee9168680 Mon Sep 17 00:00:00 2001
From: Truls Henrik Jakobsen <thj@variant.no>
Date: Tue, 19 Nov 2024 12:38:20 +0100
Subject: [PATCH 4/9] remove console logs

---
 src/components/sections/employees/EmployeeList.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/sections/employees/EmployeeList.tsx b/src/components/sections/employees/EmployeeList.tsx
index 849363ee5..766a5ddf6 100644
--- a/src/components/sections/employees/EmployeeList.tsx
+++ b/src/components/sections/employees/EmployeeList.tsx
@@ -81,15 +81,11 @@ export default function EmployeeList({
     const combinedFilters = { ...employeeFilters, ...newFilters };
     setEmployeeFilters(combinedFilters);
 
-    console.table(newFilters);
-    console.table(combinedFilters);
-
     const newFilteredEmployees = employees.filter((e) => {
       if (
         combinedFilters.competenceFilter !== null &&
         !e.competences.includes(combinedFilters.competenceFilter)
       ) {
-        console.log("Employee competence does not match filter", e.competences);
         return false;
       }
 
@@ -97,7 +93,6 @@ export default function EmployeeList({
         combinedFilters.locationFilter !== null &&
         e.officeName !== combinedFilters.locationFilter
       ) {
-        console.log("Employee location does not match filter", e.officeName);
         return false;
       }
 

From a1c0c76c88119390f6b587bf02d8897465de3c2b Mon Sep 17 00:00:00 2001
From: Truls Henrik Jakobsen <thj@variant.no>
Date: Tue, 19 Nov 2024 13:06:31 +0100
Subject: [PATCH 5/9] refactor: integrate with EmployeeCard

---
 messages/en.json                              |  4 +-
 messages/no.json                              |  2 +-
 messages/se.json                              |  4 +-
 .../sections/employees/EmployeeList.tsx       | 69 +++++--------------
 .../sections/employees/Employees.tsx          | 27 ++------
 .../sections/employees/employees.module.css   |  3 +-
 src/utils/renderSection.tsx                   |  1 -
 7 files changed, 30 insertions(+), 80 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 6499cab02..ce531ce61 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -20,8 +20,8 @@
     "read_more": "Read more"
   },
   "employee_card": {
-    "show": "Show",
-    "of": "of",
+    "show": "Showing",
+    "of": "out of",
     "consultants": "consultants"
   }
 }
diff --git a/messages/no.json b/messages/no.json
index 831a2afb2..9392c0258 100644
--- a/messages/no.json
+++ b/messages/no.json
@@ -20,7 +20,7 @@
     "read_more": "Les mer"
   },
   "employee_card": {
-    "show": "Vis",
+    "show": "Viser",
     "of": "av",
     "consultants": "konsulenter"
   }
diff --git a/messages/se.json b/messages/se.json
index 4981d005f..a51a00a3f 100644
--- a/messages/se.json
+++ b/messages/se.json
@@ -20,8 +20,8 @@
     "read_more": "Läs mer"
   },
   "employee_card": {
-    "show": "Visa",
+    "show": "Visar",
     "of": "av",
-    "consultants": "konsulentar"
+    "consultants": "konsulter"
   }
 }
diff --git a/src/components/sections/employees/EmployeeList.tsx b/src/components/sections/employees/EmployeeList.tsx
index 766a5ddf6..ab0ec657c 100644
--- a/src/components/sections/employees/EmployeeList.tsx
+++ b/src/components/sections/employees/EmployeeList.tsx
@@ -1,16 +1,14 @@
 "use client";
 
-import Image from "next/image";
-import Link from "next/link";
 import { useState } from "react";
 
 import Button from "src/components/buttons/Button";
 import Text from "src/components/text/Text";
-import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import { ChewbaccaEmployee, Competence } from "src/types/employees";
-import { aliasFromEmail } from "src/utils/employees";
 
 import styles from "./employees.module.css";
+import { useTranslations } from "next-intl";
+import EmployeeCard from "src/components/employeeCard/EmployeeCard";
 
 const competences: Competence[] = [
   "Utvikling",
@@ -69,6 +67,8 @@ export default function EmployeeList({
   const locationCounts = countLocations(employees);
   const locations = Object.keys(locationCounts);
 
+  const t = useTranslations("employee_card");
+
   const [filteredEmployees, setFilteredEmployees] =
     useState<ChewbaccaEmployee[]>(employees);
 
@@ -171,57 +171,24 @@ export default function EmployeeList({
         <div style={{ display: "flex" }}></div>
 
         <p className={styles.employeeCount}>
-          Viser{" "}
-          <span className={styles.employeeCountValue}>
-            {filteredEmployees.length}
-          </span>{" "}
-          av{" "}
+          {t("show")}{" "}
+          <span className={styles.employeeCountValue}>{employees.length}</span>{" "}
+          {t("of")}{" "}
           <span className={styles.employeeCountValue}>{employees.length}</span>{" "}
-          konsulenter
+          {t("consultants")}
         </p>
       </div>
 
-      {filteredEmployees.map(
-        (employee) =>
-          employee.imageThumbUrl &&
-          employee.name &&
-          employee.email && (
-            <div key={employee.email} className={styles.employee}>
-              <Link
-                href={`/${language}/${employeesPageSlug}/${aliasFromEmail(employee.email)}`}
-              >
-                <div className={styles.employeeImage}>
-                  <Image
-                    src={employee.imageUrl ?? employee.imageThumbUrl}
-                    alt={employee.name}
-                    style={{ objectFit: "cover" }}
-                    fill={true}
-                  />
-                </div>
-              </Link>
-              <div className={styles.employeeInfo}>
-                <p className={styles.employeeName}>{employee.name}</p>
-                {employee.competences.map((competence) => (
-                  <Text
-                    type="labelRegular"
-                    key={competence}
-                    className={styles.employeeRole}
-                  >
-                    {competence}
-                  </Text>
-                ))}
-                {employee.email && (
-                  <p className={styles.employeeEmail}>{employee.email}</p>
-                )}
-                {employee.telephone && (
-                  <p className={styles.employeeTelephone}>
-                    {formatPhoneNumber(employee.telephone)}
-                  </p>
-                )}
-              </div>
-            </div>
-          ),
-      )}
+      <div className={styles.peopleContainer}>
+        {filteredEmployees.map((employee) => (
+          <EmployeeCard
+            employee={employee}
+            employeePageSlug={employeesPageSlug}
+            language={language}
+            key={employee.name}
+          />
+        ))}
+      </div>
     </>
   );
 }
diff --git a/src/components/sections/employees/Employees.tsx b/src/components/sections/employees/Employees.tsx
index 431c99dcc..ef1d07748 100644
--- a/src/components/sections/employees/Employees.tsx
+++ b/src/components/sections/employees/Employees.tsx
@@ -1,7 +1,5 @@
 import { headers } from "next/headers";
-import { getTranslations } from "next-intl/server";
 
-import EmployeeCard from "src/components/employeeCard/EmployeeCard";
 import {
   domainFromEmail,
   fetchAllChewbaccaEmployees,
@@ -19,7 +17,6 @@ export interface EmployeesProps {
 }
 
 export default async function Employees({ language, section }: EmployeesProps) {
-  const t = await getTranslations("employee_card");
   const employeesPageRes = await loadStudioQuery<{ slug: string }>(
     EMPLOYEE_PAGE_SLUG_QUERY,
     {
@@ -45,25 +42,11 @@ export default async function Employees({ language, section }: EmployeesProps) {
     <div className={styles.wrapper}>
       <div className={styles.employees}>
         <h1 className={styles.header}>{section.basicTitle}</h1>
-        <div className={styles.employeeCountWrapper}>
-          <p className={styles.employeeCount}>
-            {t("show")}
-            <span className={styles.employeeCountValue}>{total}</span>
-            {t("of")}
-            <span className={styles.employeeCountValue}>{total}</span>{" "}
-            {t("consultants")}
-          </p>
-        </div>
-        <div className={styles.peopleContainer}>
-          {employees.map((employee) => (
-            <EmployeeCard
-              employee={employee}
-              employeePageSlug={employeesPageSlug}
-              language={language}
-              key={employee.name}
-            />
-          ))}
-        </div>
+        <EmployeeList
+          employees={employees}
+          employeesPageSlug={employeesPageSlug}
+          language={language}
+        />
       </div>
     </div>
   );
diff --git a/src/components/sections/employees/employees.module.css b/src/components/sections/employees/employees.module.css
index 67b7e08de..0b88cad87 100644
--- a/src/components/sections/employees/employees.module.css
+++ b/src/components/sections/employees/employees.module.css
@@ -14,10 +14,11 @@
 }
 
 .employeeFiltersWrapper {
+  padding: 1.5rem 0;
+  align-self: flex-start;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
-  grid-column: 1 / -1;
 }
 
 .employeeFilterWrapper {
diff --git a/src/utils/renderSection.tsx b/src/utils/renderSection.tsx
index 4ca1e138d..57a98b2d2 100644
--- a/src/utils/renderSection.tsx
+++ b/src/utils/renderSection.tsx
@@ -220,7 +220,6 @@ const SectionRenderer = ({
     case "grid":
       return renderGridSection(section, sectionIndex, isDraftMode, initialData);
     case "employees":
-      console.table(section);
       return <Employees language={language} section={section} />;
     default:
       return null;

From 9021cba41e4da97250121d158f172d71537df7ad Mon Sep 17 00:00:00 2001
From: Truls Henrik Jakobsen <thj@variant.no>
Date: Tue, 19 Nov 2024 13:11:22 +0100
Subject: [PATCH 6/9] lint

---
 src/components/sections/employees/EmployeeList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sections/employees/EmployeeList.tsx b/src/components/sections/employees/EmployeeList.tsx
index ab0ec657c..d3fcdab68 100644
--- a/src/components/sections/employees/EmployeeList.tsx
+++ b/src/components/sections/employees/EmployeeList.tsx
@@ -1,14 +1,14 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 
 import Button from "src/components/buttons/Button";
+import EmployeeCard from "src/components/employeeCard/EmployeeCard";
 import Text from "src/components/text/Text";
 import { ChewbaccaEmployee, Competence } from "src/types/employees";
 
 import styles from "./employees.module.css";
-import { useTranslations } from "next-intl";
-import EmployeeCard from "src/components/employeeCard/EmployeeCard";
 
 const competences: Competence[] = [
   "Utvikling",

From 727e8c2a98e9fa39af49013aec21c71c2f40df97 Mon Sep 17 00:00:00 2001
From: Truls Henrik Jakobsen <thj@variant.no>
Date: Wed, 20 Nov 2024 10:54:00 +0100
Subject: [PATCH 7/9] remove duplicate lines

---
 src/components/text/Text.tsx        | 1 -
 src/components/text/text.module.css | 2 --
 2 files changed, 3 deletions(-)

diff --git a/src/components/text/Text.tsx b/src/components/text/Text.tsx
index c8413ae56..cb8c83341 100644
--- a/src/components/text/Text.tsx
+++ b/src/components/text/Text.tsx
@@ -19,7 +19,6 @@ export type TextType =
   | "bodyExtraSmall"
   | "bodySmall"
   | "bodyNormal"
-  | "bodySmall"
   | "bodyBig"
   | "bodyXl"
   | "mobileH1"
diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css
index 02cab9525..c7a4bab8d 100644
--- a/src/components/text/text.module.css
+++ b/src/components/text/text.module.css
@@ -2,8 +2,6 @@
   font-family: var(--font-britti-sans);
 }
 
-.bodyBig,
-.bodyNormal,
 .labelSmall,
 .labelLight,
 .labelRegular,

From 1ccd428ce16e18d65864c77a05b189874204da5a Mon Sep 17 00:00:00 2001
From: Truls Henrik Jakobsen <thj@variant.no>
Date: Wed, 20 Nov 2024 11:10:19 +0100
Subject: [PATCH 8/9] chore: add translations

---
 messages/en.json                                   | 8 +++++++-
 messages/no.json                                   | 8 +++++++-
 messages/se.json                                   | 8 +++++++-
 src/components/sections/employees/EmployeeList.tsx | 8 ++++----
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index ce531ce61..15750fcba 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -22,6 +22,12 @@
   "employee_card": {
     "show": "Showing",
     "of": "out of",
-    "consultants": "consultants"
+    "consultants": "consultants",
+    "location": "Location",
+    "all": "All",
+    "Project Management": "Project Management",
+    "Design": "Design",
+    "Utvikling": "Development",
+    "Administasjon": "Administration"
   }
 }
diff --git a/messages/no.json b/messages/no.json
index 9392c0258..e4f552376 100644
--- a/messages/no.json
+++ b/messages/no.json
@@ -22,6 +22,12 @@
   "employee_card": {
     "show": "Viser",
     "of": "av",
-    "consultants": "konsulenter"
+    "consultants": "konsulenter",
+    "location": "Lokasjon",
+    "all": "Alle",
+    "Project Management": "Prosjektledelse",
+    "Design": "Design",
+    "Utvikling": "Utvikling",
+    "Administasjon": "Administrasjon"
   }
 }
diff --git a/messages/se.json b/messages/se.json
index a51a00a3f..97d735d3a 100644
--- a/messages/se.json
+++ b/messages/se.json
@@ -22,6 +22,12 @@
   "employee_card": {
     "show": "Visar",
     "of": "av",
-    "consultants": "konsulter"
+    "consultants": "konsulter",
+    "location": "Kontor",
+    "all": "Alla",
+    "Project Management": "Projektledning",
+    "Design": "Design",
+    "Utvikling": "Utveckling",
+    "Administasjon": "Administration"
   }
 }
diff --git a/src/components/sections/employees/EmployeeList.tsx b/src/components/sections/employees/EmployeeList.tsx
index d3fcdab68..fb61d766e 100644
--- a/src/components/sections/employees/EmployeeList.tsx
+++ b/src/components/sections/employees/EmployeeList.tsx
@@ -118,7 +118,7 @@ export default function EmployeeList({
             }
             onClick={() => filterEmployees({ competenceFilter: null })}
           >
-            Alle
+            {t("all")}
           </Button>
           {competences.map((competence) => {
             const active = employeeFilters.competenceFilter == competence;
@@ -131,14 +131,14 @@ export default function EmployeeList({
                   filterEmployees({ competenceFilter: competence })
                 }
               >
-                {competence} ({competenceCounts[competence]})
+                {t(competence)} ({competenceCounts[competence]})
               </Button>
             );
           })}
         </div>
         <div className={styles.employeeFilterWrapper}>
           <Text type="labelSemibold" className={styles.employeeFilterLabel}>
-            Lokasjon
+            {t("location")}
           </Text>
           <Button
             size="small"
@@ -149,7 +149,7 @@ export default function EmployeeList({
             }
             onClick={() => filterEmployees({ locationFilter: null })}
           >
-            Alle
+            {t("all")}
           </Button>
           {locations.map((location) => {
             const active = employeeFilters.locationFilter == location;

From a2a10af7414d4b3185c7f02a37c964ad16370a77 Mon Sep 17 00:00:00 2001
From: Truls Henrik Jakobsen <thj@variant.no>
Date: Wed, 20 Nov 2024 11:18:59 +0100
Subject: [PATCH 9/9] tiny css fix

---
 src/components/employeeCard/employeeCard.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/employeeCard/employeeCard.module.css b/src/components/employeeCard/employeeCard.module.css
index 5e8b44ef4..51e71c5c6 100644
--- a/src/components/employeeCard/employeeCard.module.css
+++ b/src/components/employeeCard/employeeCard.module.css
@@ -51,7 +51,7 @@
   text-wrap: wrap;
   flex-direction: column;
   width: 100%;
-  height: fit-content, 100%;
+  height: fit-content;
   gap: 0.25rem;
   align-self: stretch;
 }