dotkom · brage-andreas · Sep 16, 2025
diff --git a/apps/dashboard/src/app/(internal)/event/components/event-filters.tsx b/apps/dashboard/src/app/(internal)/event/components/event-filters.tsx
@@ -25,7 +25,7 @@ export const EventFilters = ({ onChange }: Props) => {
       }}
     >
       <Group gap={4}>
-        <TextInput placeholder="Søk etter arrangementer..." {...form.register("bySearchTerm")} />
+        <TextInput placeholder="Søk etter arrangementtittel..." {...form.register("bySearchTerm")} />
         {Boolean(data.bySearchTerm) && (
           <ActionIcon
             size="input-sm"

diff --git a/apps/dashboard/src/app/(internal)/event/page.tsx b/apps/dashboard/src/app/(internal)/event/page.tsx
@@ -5,12 +5,15 @@ import {
   type EventFilterQuery,
   type EventStatus,
   type EventWithAttendance,
+  getAttendanceCapacity,
+  getReservedAttendeeCount,
+  getUnreservedAttendeeCount,
   mapEventTypeToLabel,
 } from "@dotkomonline/types"
-import { Anchor, Button, Group, Skeleton, Stack, Text, Title, Tooltip } from "@mantine/core"
-import { IconPencil } from "@tabler/icons-react"
+import { Anchor, AspectRatio, Badge, Button, Group, Image, Skeleton, Stack, Text, Title, Tooltip } from "@mantine/core"
+import { IconArrowUpRight, IconPencil } from "@tabler/icons-react"
 import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table"
-import { formatDate } from "date-fns"
+import { formatDate, formatDistanceToNowStrict, isFuture, isPast } from "date-fns"
 import { nb } from "date-fns/locale"
 import Link from "next/link"
 import { useMemo, useState } from "react"
@@ -37,30 +40,99 @@ export default function EventPage() {
   const columnHelper = createColumnHelper<EventWithAttendance>()
   const columns = useMemo(
     () => [
-      columnHelper.accessor(({ event }) => event, {
+      columnHelper.accessor(({ event }) => event.title, {
         id: "title",
-        header: () => "Arrangementnavn",
-        cell: (info) => (
-          <Anchor component={Link} size="sm" href={`/event/${info.getValue().id}`}>
-            {info.getValue().title}
-          </Anchor>
-        ),
+        header: () => "Arrangement",
+        cell: (info) => {
+          const event = info.row.original.event
+
+          return (
+            <Anchor component={Link} size="sm" href={`/event/${event.id}`}>
+              <Group>
+                <AspectRatio ratio={16 / 9}>
+                  <Image
+                    src={event.imageUrl}
+                    height={48}
+                    radius="var(--mantine-radius-sm)"
+                    style={{ filter: isPast(event.end) ? "grayscale(50%) opacity(50%)" : undefined }}
+                  />
+                </AspectRatio>
+                <Text>{event.title}</Text>
+              </Group>
+            </Anchor>
+          )
+        },
       }),
       columnHelper.accessor("event.start", {
         header: () => "Startdato",
         cell: (info) => {
-          const longDate = formatDate(info.getValue(), "eeee dd. MMMM yyyy HH:mm", { locale: nb })
-          const shortDate = formatDate(info.getValue(), "dd. MMM yyyy", { locale: nb })
+          const event = info.row.original.event
+
+          const longDate = formatDate(info.getValue(), "EEEE dd. MMMM yyyy 'kl.' HH:mm O", { locale: nb })
+          const shortDate = formatDate(info.getValue(), "yyyy-MM-dd 'kl.' HH:mm", { locale: nb })
+          const relative = formatDistanceToNowStrict(info.getValue(), { addSuffix: true, locale: nb })
 
           return (
             <Tooltip label={capitalizeFirstLetter(longDate)}>
-              <Text size="sm" w="fit-content">
-                {shortDate}
-              </Text>
+              <Stack gap={0} w="fit-content" c={isPast(event.end) ? "gray" : undefined}>
+                <Text size="sm">{shortDate}</Text>
+                <Text size="xs">{capitalizeFirstLetter(relative)}</Text>
+              </Stack>
             </Tooltip>
           )
         },
       }),
+      columnHelper.accessor("attendance", {
+        id: "attendance",
+        header: () => "Påmelding",
+        cell: (info) => {
+          const attendance = info.getValue()
+          const event = info.row.original.event
+
+          const reserved = attendance && getReservedAttendeeCount(attendance)
+          const unreserved = attendance && getUnreservedAttendeeCount(attendance)
+          const capacity = attendance && getAttendanceCapacity(attendance)
+
+          const beforeStart = attendance && isFuture(attendance.registerStart)
+          const ongoing = attendance && !beforeStart && !isPast(attendance.registerEnd)
+
+          return (
+            <Anchor href={`/event/${event.id}&tab=pamelding`} underline="never">
+              <Stack gap={4} px={12} py={6} bg="gray.2" w="fit-content" style={{borderRadius: "var(--mantine-radius-sm)"}}>
+                <Group gap={4}>
+                  {attendance?.pools.length ? (
+                    <Badge
+                      color={ongoing || beforeStart ? "dark" : "gray"}
+                      variant={beforeStart ? "light" : ongoing ? "filled" : "outline"}
+                    >
+                      {reserved}
+                      {capacity ? `/${capacity}` : null}
+                      {unreserved ? ` +${unreserved}` : null}
+                    </Badge>
+                  ) : attendance ? (
+                    <Badge color="red" variant="filled">
+                      Ingen grupper
+                    </Badge>
+                  ) : (
+                    <Badge color="gray" variant="outline">
+                      Nei
+                    </Badge>
+                  )}
+                  {attendance?.attendancePrice ? (
+                    <Badge color="dark" variant="filled">
+                      {attendance.attendancePrice} kr
+                    </Badge>
+                  ) : null}
+                </Group>
+                <Group gap={4}>
+                <Text c="gray" size="xs">Til påmelding</Text>
+                  <IconArrowUpRight color="var(--mantine-color-gray-6)" size={14} />
+                </Group>
+              </Stack>
+            </Anchor>
+          )
+        },
+      }),
       columnHelper.accessor(({ event }) => event, {
         id: "organizers",
         header: () => "Arrangører",
@@ -104,7 +176,7 @@ export default function EventPage() {
       </Group>
 
       <Skeleton visible={isEventsLoading}>
-        <GenericTable table={table} onLoadMore={fetchNextPage} />
+        <GenericTable table={table} onLoadMore={fetchNextPage} maxHeight={800} />
       </Skeleton>
     </Stack>
   )

diff --git a/apps/dashboard/src/components/GenericTable.tsx b/apps/dashboard/src/components/GenericTable.tsx
@@ -8,9 +8,10 @@ export interface GenericTableProps<T> {
   readonly table: ReactTable<T>
   filterable?: boolean
   onLoadMore?(): void
+  maxHeight?: number
 }
 
-export function GenericTable<T>({ table, filterable, onLoadMore }: GenericTableProps<T>) {
+export function GenericTable<T>({ table, filterable, onLoadMore, maxHeight = 400 }: GenericTableProps<T>) {
   const { ref, inViewport } = useInViewport()
 
   useEffect(() => {
@@ -21,7 +22,7 @@ export function GenericTable<T>({ table, filterable, onLoadMore }: GenericTableP
 
   return (
     <Card withBorder p="xs">
-      <Table.ScrollContainer minWidth={600} maxHeight={400} type="native">
+      <Table.ScrollContainer minWidth={600} maxHeight={maxHeight} type="native">
         <Table striped stickyHeader>
           <TableThead>
             {table.getHeaderGroups().map((headerGroup) => (