Vf 259 add routing from tabs

app/components/routing-tabs.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import React from "react";
+import { useNavigate } from "react-router";
+
+type TabItem = {
+  label: React.ReactNode;
+  to: string; // route path
+  value: string;
+};
+
+type RoutingTabsProps = {
+  tabs?: Array<TabItem>;
+  defaultValue?: string;
+};
+
+// Provide an array of { label, to } and the component will navigate when a tab is selected.
+export function RoutingTabs({ tabs, defaultValue }: RoutingTabsProps) {
+  const navigate = useNavigate();
+
+  const defaultTabs: Array<TabItem> = React.useMemo(
+    () => [
+      { label: "Søkere", to: "dashboard/sokere", value: "sokere" },
+      {
+        label: "Tidligere assistenter",
+        to: "dashboard/tidligere-assistenter",
+        value: "tidligere-assistenter",
+      },
+      {
+        label: "Intervjufordeling",
+        to: "dashboard/intervjufordeling",
+        value: "intervjufordeling",
+      },
+      { label: "Intervjuer", to: "dashboard/intervjuer", value: "intervjuer" },
+    ],
+    [],
+  );
+
+  const items = tabs ?? defaultTabs;
+
+  const handleTabChange = (value: string) => {
+    const item = items.find((tab) => (tab.value ?? tab.to) === value);
+    if (item) navigate(item.to);
+  };
+
+  return (
+    <Tabs
+      value={defaultValue}
+      className="mb-6 w-full max-w-7xl px-4 sm:px-6 lg:px-8"
+      onValueChange={handleTabChange}
+    >
+      <div className="flex justify-center">
+        <TabsList className="my-5 flex flex-wrap justify-center">
+          {items.map((tab) => (
+            <TabsTrigger
+              key={tab.to}
+              value={tab.value ?? tab.to}
+              className="hover:text-black"
+            >
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </div>
+    </Tabs>
+  );
+}

app/routes/dashboard.intervjuer._index.tsx

@@ -1,8 +1,10 @@
+import { RoutingTabs } from "@/components/routing-tabs";
 // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module
 export default function Intervjuer() {
   return (
     <>
       <h1>Intervjuer</h1>
+      <RoutingTabs defaultValue="intervjuer" />
     </>
   );
 }

app/routes/dashboard.intervjufordeling._index.tsx

@@ -1,8 +1,11 @@
+import { RoutingTabs } from "@/components/routing-tabs";
+
 // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module
 export default function Intervjufordeling() {
   return (
     <>
       <h1>Intervjufordeling</h1>
+      <RoutingTabs defaultValue="intervjufordeling" />
     </>
   );
 }

app/routes/dashboard.sokere._index.tsx

@@ -1,4 +1,5 @@
 import { DataTable } from "@/components/data-table";
+import { RoutingTabs } from "@/components/routing-tabs";
 import { Checkbox } from "@/components/ui/checkbox";
 import type { ColumnDef } from "@tanstack/react-table";
 import { DataSokere } from "../mock/api/data-sokere";
@@ -71,6 +72,7 @@ export const columns: Array<ColumnDef<Soker>> = [
 export default function Sokere() {
   return (
     <main className="flex h-full w-screen flex-col items-center justify-center gap-5 overflow-clip p-1 md:w-full md:p-6">
+      <RoutingTabs defaultValue="sokere" />
       {/* <Tabs defaultValue="account" className="w-[400px]">
         <TabsList>
           <TabsTrigger value="sokere">Søkere</TabsTrigger>

app/routes/dashboard.tidligere-assistenter._index.tsx

@@ -1,8 +1,11 @@
+import { RoutingTabs } from "@/components/routing-tabs";
+
 // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module
 export default function TidligereAssistenter() {
   return (
     <>
       <h1>Tidligere Assistenter</h1>
+      <RoutingTabs defaultValue="tidligere-assistenter" />
     </>
   );
 }

app/routes/dashboard.tsx

@@ -141,7 +141,7 @@ const mainLinks = [
       },
       {
         title: "Tidligere Assistenter",
-        url: href("/dashboard/tidligereassistenter"),
+        url: href("/dashboard/tidligere-assistenter"),
       },
       {
         title: "Intervjufordeling",