From af359a01348e7761a173001ec91a62bf14eba5b7 Mon Sep 17 00:00:00 2001
From: Julia Dai <juliada@stud.ntnu.no>
Date: Wed, 1 Oct 2025 17:09:15 +0200
Subject: [PATCH 1/3] vf-324 Add (in)active schools tab

---
 app/routes/dashboard.skoler._index.tsx | 14 +++++++++++++-
 app/routes/dashboard.tsx               |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/routes/dashboard.skoler._index.tsx b/app/routes/dashboard.skoler._index.tsx
index 7d59303..306d79d 100644
--- a/app/routes/dashboard.skoler._index.tsx
+++ b/app/routes/dashboard.skoler._index.tsx
@@ -1,8 +1,20 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module
 export default function Skoler() {
   return (
     <>
-      <h1>Skoler</h1>
+      <section className="flex flex-col items-center">
+        <h1 className="mb-10 font-semibold text-2xl">Skoler</h1>
+        <Tabs defaultValue="active" className="w-[400px] items-center">
+          <TabsList>
+            <TabsTrigger value="active">Aktive skoler</TabsTrigger>
+            <TabsTrigger value="inactive">Inaktive skoler</TabsTrigger>
+          </TabsList>
+          <TabsContent value="active">Active</TabsContent>
+          <TabsContent value="inactive">Inactive</TabsContent>
+        </Tabs>
+      </section>
     </>
   );
 }
diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx
index 74ff5b7..a0a5869 100644
--- a/app/routes/dashboard.tsx
+++ b/app/routes/dashboard.tsx
@@ -141,7 +141,7 @@ const mainLinks = [
       },
       {
         title: "Tidligere Assistenter",
-        url: href("/dashboard/tidligereassistenter"),
+        url: "/dashboard/tidligereassistenter",
       },
       {
         title: "Intervjufordeling",

From 741170da5e0e84fbed7e64f531194e0d0ec774b6 Mon Sep 17 00:00:00 2001
From: Julia Dai <juliada@stud.ntnu.no>
Date: Wed, 8 Oct 2025 17:27:45 +0200
Subject: [PATCH 2/3] vf-324 Create school table

---
 app/components/data-table.tsx          |   4 +-
 app/mock/api/data-skoler.ts            | 123 +++++++++++++++++++++++++
 app/routes/dashboard.skoler._index.tsx |  86 +++++++++++++++--
 app/routes/dashboard.sokere._index.tsx |   2 +-
 4 files changed, 205 insertions(+), 10 deletions(-)
 create mode 100644 app/mock/api/data-skoler.ts

diff --git a/app/components/data-table.tsx b/app/components/data-table.tsx
index 95a9aa6..ccc92b8 100644
--- a/app/components/data-table.tsx
+++ b/app/components/data-table.tsx
@@ -109,7 +109,7 @@ export function DataTable<Data, Value>({
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext(),
+                            header.getContext()
                           )}
                     </TableHead>
                   );
@@ -128,7 +128,7 @@ export function DataTable<Data, Value>({
                     <TableCell key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext(),
+                        cell.getContext()
                       )}
                     </TableCell>
                   ))}
diff --git a/app/mock/api/data-skoler.ts b/app/mock/api/data-skoler.ts
new file mode 100644
index 0000000..cafa076
--- /dev/null
+++ b/app/mock/api/data-skoler.ts
@@ -0,0 +1,123 @@
+type School = {
+  name: string,
+  contact: string,
+  phone: string,
+  email: string,
+  language: string
+}
+
+export function getActiveSchools(): Array<School> {
+  return [
+    {
+      name: "Blussvoll",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norsk"
+    },
+    {
+      name: "Birrale",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@birrale.no",
+      language: "Internasjonal"
+    },
+    {
+      name: "Charlottenlund",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norsk"
+    },
+    {
+      name: "Markaplassen",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norwegian"
+    },
+    {
+      name: "Nidaros idrettsungdomsskole",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norwegian"
+    },
+    {
+      name: "Rosenborg",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norwegian"
+    },
+    {
+      name: "Ugla",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norwegian"
+    },
+    {
+      name: "Trondheim idrettsungdomsskole",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norwegian"
+    },
+    {
+      name: "Sunnland",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norwegian"
+    },
+    {
+      name: "Lade",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norwegian"
+    },
+    {
+      name: "Sjetne",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norwegian"
+    },
+    {
+      name: "Hoeggen",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norwegian"
+    }
+  ];
+}
+
+export function getInactiveSchools(): Array<School> {
+  return ([
+    {
+      name: "Åsheim",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norsk"
+    },
+    {
+      name: "Blussvoll",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norsk"
+    },
+    {
+      name: "Flatåsen",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norsk"
+    }
+
+  ])
+}
diff --git a/app/routes/dashboard.skoler._index.tsx b/app/routes/dashboard.skoler._index.tsx
index 306d79d..4283cba 100644
--- a/app/routes/dashboard.skoler._index.tsx
+++ b/app/routes/dashboard.skoler._index.tsx
@@ -1,18 +1,90 @@
+import { DataTable } from "@/components/data-table";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ColumnDef } from "@tanstack/react-table";
+import { getActiveSchools, getInactiveSchools } from "../mock/api/data-skoler";
+
+export type School = {
+  name: string;
+  contact: string;
+  phone: string;
+  email: string;
+  language: string;
+};
+
+export const columns: Array<ColumnDef<School>> = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "name",
+    header: "Skole",
+  },
+  {
+    accessorKey: "contact",
+    header: "Kontaktperson",
+  },
+  {
+    accessorKey: "phone",
+    header: "Telefon",
+  },
+  {
+    accessorKey: "email",
+    header: "E-post",
+  },
+  {
+    accessorKey: "language",
+    header: "Språk",
+  },
+];
 
 // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module
 export default function Skoler() {
+  const activeSchools = getActiveSchools();
+  const inactiveSchools = getInactiveSchools();
+
   return (
     <>
       <section className="flex flex-col items-center">
         <h1 className="mb-10 font-semibold text-2xl">Skoler</h1>
-        <Tabs defaultValue="active" className="w-[400px] items-center">
-          <TabsList>
-            <TabsTrigger value="active">Aktive skoler</TabsTrigger>
-            <TabsTrigger value="inactive">Inaktive skoler</TabsTrigger>
-          </TabsList>
-          <TabsContent value="active">Active</TabsContent>
-          <TabsContent value="inactive">Inactive</TabsContent>
+        <Tabs defaultValue="active" className="w-full max-w-7xl mx-10 mb-6">
+          <div className="flex justify-center">
+            <TabsList className="my-5">
+              <TabsTrigger value="active">Aktive skoler</TabsTrigger>
+              <TabsTrigger value="inactive">Inaktive skoler</TabsTrigger>
+            </TabsList>
+          </div>
+          <TabsContent
+            className="w-full h-[500px] md:h-[600px] px-5"
+            value="active"
+          >
+            <DataTable columns={columns} data={activeSchools}></DataTable>
+          </TabsContent>
+          <TabsContent
+            className="5/6 h-[500px] md:h-[700px] px-5"
+            value="inactive"
+          >
+            <DataTable columns={columns} data={inactiveSchools}></DataTable>
+          </TabsContent>
         </Tabs>
       </section>
     </>
diff --git a/app/routes/dashboard.sokere._index.tsx b/app/routes/dashboard.sokere._index.tsx
index 8689b45..95cbcfb 100644
--- a/app/routes/dashboard.sokere._index.tsx
+++ b/app/routes/dashboard.sokere._index.tsx
@@ -39,7 +39,7 @@ export const columns: Array<ColumnDef<Soker>> = [
   },
   {
     accessorKey: "name",
-    header: "Navn",
+    header: "Skole",
   },
   {
     accessorKey: "tlf",

From d61f90401b515db23844ede6f0113c5f7123ffc0 Mon Sep 17 00:00:00 2001
From: Julia Dai <juliada@stud.ntnu.no>
Date: Mon, 13 Oct 2025 17:53:55 +0200
Subject: [PATCH 3/3] vf-324 Make school table responsive

---
 app/mock/api/data-skoler.ts            | 18 ++++++++--------
 app/routes/dashboard.skoler._index.tsx | 29 ++++++++++++++------------
 app/routes/dashboard.tsx               |  9 +++++---
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/app/mock/api/data-skoler.ts b/app/mock/api/data-skoler.ts
index cafa076..6749663 100644
--- a/app/mock/api/data-skoler.ts
+++ b/app/mock/api/data-skoler.ts
@@ -34,63 +34,63 @@ export function getActiveSchools(): Array<School> {
       contact: "John Doe",
       phone: "988 01 888",
       email: "john.doe@ou.trondheim.kommune.no",
-      language: "Norwegian"
+      language: "Norsk"
     },
     {
       name: "Nidaros idrettsungdomsskole",
       contact: "John Doe",
       phone: "988 01 888",
       email: "john.doe@ou.trondheim.kommune.no",
-      language: "Norwegian"
+      language: "Norsk"
     },
     {
       name: "Rosenborg",
       contact: "John Doe",
       phone: "988 01 888",
       email: "john.doe@ou.trondheim.kommune.no",
-      language: "Norwegian"
+      language: "Norsk"
     },
     {
       name: "Ugla",
       contact: "John Doe",
       phone: "988 01 888",
       email: "john.doe@ou.trondheim.kommune.no",
-      language: "Norwegian"
+      language: "Norsk"
     },
     {
       name: "Trondheim idrettsungdomsskole",
       contact: "John Doe",
       phone: "988 01 888",
       email: "john.doe@ou.trondheim.kommune.no",
-      language: "Norwegian"
+      language: "Norsk"
     },
     {
       name: "Sunnland",
       contact: "John Doe",
       phone: "988 01 888",
       email: "john.doe@ou.trondheim.kommune.no",
-      language: "Norwegian"
+      language: "Norsk"
     },
     {
       name: "Lade",
       contact: "John Doe",
       phone: "988 01 888",
       email: "john.doe@ou.trondheim.kommune.no",
-      language: "Norwegian"
+      language: "Norsk"
     },
     {
       name: "Sjetne",
       contact: "John Doe",
       phone: "988 01 888",
       email: "john.doe@ou.trondheim.kommune.no",
-      language: "Norwegian"
+      language: "Norsk"
     },
     {
       name: "Hoeggen",
       contact: "John Doe",
       phone: "988 01 888",
       email: "john.doe@ou.trondheim.kommune.no",
-      language: "Norwegian"
+      language: "Norsk"
     }
   ];
 }
diff --git a/app/routes/dashboard.skoler._index.tsx b/app/routes/dashboard.skoler._index.tsx
index 4283cba..449231e 100644
--- a/app/routes/dashboard.skoler._index.tsx
+++ b/app/routes/dashboard.skoler._index.tsx
@@ -64,26 +64,29 @@ export default function Skoler() {
 
   return (
     <>
-      <section className="flex flex-col items-center">
+      <section className="flex flex-col items-center w-full min-w-0">
         <h1 className="mb-10 font-semibold text-2xl">Skoler</h1>
-        <Tabs defaultValue="active" className="w-full max-w-7xl mx-10 mb-6">
+        <Tabs
+          defaultValue="active"
+          className="w-full max-w-7xl px-4 sm:px-6 lg:px-8 mb-6"
+        >
           <div className="flex justify-center">
-            <TabsList className="my-5">
+            <TabsList className="my-5 flex flex-wrap justify-center">
               <TabsTrigger value="active">Aktive skoler</TabsTrigger>
               <TabsTrigger value="inactive">Inaktive skoler</TabsTrigger>
             </TabsList>
           </div>
-          <TabsContent
-            className="w-full h-[500px] md:h-[600px] px-5"
-            value="active"
-          >
-            <DataTable columns={columns} data={activeSchools}></DataTable>
+
+          <TabsContent value="active" className="overflow-x-auto min-w-0">
+            <div className="min-w-full max-w-full overflow-x-auto rounded-lg border border-gray-200">
+              <DataTable columns={columns} data={activeSchools} />
+            </div>
           </TabsContent>
-          <TabsContent
-            className="5/6 h-[500px] md:h-[700px] px-5"
-            value="inactive"
-          >
-            <DataTable columns={columns} data={inactiveSchools}></DataTable>
+
+          <TabsContent value="inactive" className="overflow-x-auto min-w-0">
+            <div className="min-w-full max-w-full overflow-x-auto rounded-lg border border-gray-200">
+              <DataTable columns={columns} data={inactiveSchools} />
+            </div>
           </TabsContent>
         </Tabs>
       </section>
diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx
index a0a5869..5e3fdd2 100644
--- a/app/routes/dashboard.tsx
+++ b/app/routes/dashboard.tsx
@@ -398,7 +398,7 @@ function Breadcrumbs() {
             to={`/${fullPath}`}
             className={cn(
               isEnd ? "text-black" : "text-gray-500",
-              "hover:text-black",
+              "hover:text-black"
             )}
             prefetch="intent"
           >
@@ -497,7 +497,7 @@ export default function Layout() {
         </Sidebar>
       </aside>
 
-      <SidebarInset>
+      <SidebarInset className="flex-1 min-w-0 overflow-x-hidden">
         <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
           <div className="flex items-center gap-2 px-4">
             <SidebarTrigger className="-ml-1" />
@@ -505,7 +505,10 @@ export default function Layout() {
             <Breadcrumbs />
           </div>
         </header>
-        <Outlet />
+
+        <div className="flex-1 min-w-0 px-4 sm:px-6 lg:px-8">
+          <Outlet />
+        </div>
       </SidebarInset>
     </SidebarProvider>
   );