Vf 324 lag skoler side

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>
                   ))}

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: "Norsk"
+    },
+    {
+      name: "Nidaros idrettsungdomsskole",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norsk"
+    },
+    {
+      name: "Rosenborg",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norsk"
+    },
+    {
+      name: "Ugla",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norsk"
+    },
+    {
+      name: "Trondheim idrettsungdomsskole",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norsk"
+    },
+    {
+      name: "Sunnland",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norsk"
+    },
+    {
+      name: "Lade",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norsk"
+    },
+    {
+      name: "Sjetne",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norsk"
+    },
+    {
+      name: "Hoeggen",
+      contact: "John Doe",
+      phone: "988 01 888",
+      email: "john.doe@ou.trondheim.kommune.no",
+      language: "Norsk"
+    }
+  ];
+}
+
+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"
+    }
+
+  ])
+}

app/routes/dashboard.skoler._index.tsx

@@ -1,8 +1,95 @@
+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 (
     <>
-      <h1>Skoler</h1>
+      <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 px-4 sm:px-6 lg:px-8 mb-6"
+        >
+          <div className="flex justify-center">
+            <TabsList className="my-5 flex flex-wrap justify-center">
+              <TabsTrigger value="active">Aktive skoler</TabsTrigger>
+              <TabsTrigger value="inactive">Inaktive skoler</TabsTrigger>
+            </TabsList>
+          </div>
+
+          <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 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>
     </>
   );
 }

app/routes/dashboard.sokere._index.tsx

@@ -39,7 +39,7 @@ export const columns: Array<ColumnDef<Soker>> = [
   },
   {
     accessorKey: "name",
-    header: "Navn",
+    header: "Skole",
   },
   {
     accessorKey: "tlf",

app/routes/dashboard.tsx

@@ -141,7 +141,7 @@ const mainLinks = [
       },
       {
         title: "Tidligere Assistenter",
-        url: href("/dashboard/tidligereassistenter"),
+        url: "/dashboard/tidligereassistenter",
       },
       {
         title: "Intervjufordeling",
@@ -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,15 +497,18 @@ 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" />
             <Separator orientation="vertical" className="mr-2 h-4" />
             <Breadcrumbs />
           </div>
         </header>
-        <Outlet />
+
+        <div className="flex-1 min-w-0 px-4 sm:px-6 lg:px-8">
+          <Outlet />
+        </div>
       </SidebarInset>
     </SidebarProvider>
   );