feat: add placeholder dashboard page and give row an onclick to navig…

…ate to it

frontend/cypress/e2e/pages/overview.cy.ts

@@ -204,4 +204,27 @@ describe("DataTable component displays data correctly", () => {
 
     cy.get("table tbody tr").as("rows").should("have.length", 6);
   });
+
+  it("navigates to new page when clicked on row", () => {
+    // Find the index for the case number column
+    cy.get("table thead th").then(($headers) => {
+      const caseNumberIndex =
+        [...$headers].findIndex((header) =>
+          header.innerText.includes("Saksnummer"),
+        ) + 1;
+      // Get the case number of the first row
+      cy.get(`table tbody tr td:nth-child(${caseNumberIndex})`)
+        .first()
+        .invoke("text")
+        .then((caseNumber) => {
+          // Click on the first
+          cy.get("table tbody tr").first().click();
+          // Check that the URL has changed to the correct case number
+          cy.url().should(
+            "include",
+            `/mottakskontroll/dine-saker/dashbord/${caseNumber}`,
+          );
+        });
+    });
+  });
 });

frontend/src/app/mottakskontroll/dine-saker/DataTable.tsx

@@ -23,6 +23,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { type Application } from "~/types/application";
 import FilterDropdown from "../../_components/FilterDropdown";
+import { useRouter } from "next/navigation";
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -33,6 +34,8 @@ const DataTable = <TData extends Application, TValue>({
   columns,
   data,
 }: DataTableProps<TData, TValue>) => {
+  const router = useRouter();
+
   const [sorting, setSorting] = useState<SortingState>([]);
   const [filteredData, setFilteredData] = useState<TData[]>(data);
   const [selectedMunicipalities, setSelectedMunicipalities] = useState<
@@ -155,7 +158,11 @@ const DataTable = <TData extends Application, TValue>({
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && "selected"}
-                  onClick={() => console.log(row.original)}
+                  onClick={() =>
+                    router.push(
+                      `/mottakskontroll/dine-saker/dashbord/${row.original.id}`,
+                    )
+                  }
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id} className="w-[calc(100%/6)]">

frontend/src/app/mottakskontroll/dine-saker/dashbord/[caseNumber]/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import React from "react";
+
+const CaseDashboard: React.FC = () => {
+  const { caseNumber } = useParams();
+
+  return (
+    <div>
+      <h1>Dashbord for saksnummer: {caseNumber}</h1>
+    </div>
+  );
+};
+
+export default CaseDashboard;