Remove unused opencode.json configuration.

The file is not part of the BilHej toolchain and is no longer needed in
the repository root.

backend/src/main/java/se/bilhalsning/controller/OrderController.java

@@ -61,6 +61,7 @@ public class OrderController {
         return new OrderResponse(
                 order.getId(),
                 order.getPlate(),
+                order.getLetterText(),
                 order.getStatus().getValue(),
                 order.getTrackingId(),
                 order.getAmountPaid(),

backend/src/main/java/se/bilhalsning/controller/PaymentController.java

@@ -46,6 +46,7 @@ public class PaymentController {
         return new OrderResponse(
                 order.getId(),
                 order.getPlate(),
+                order.getLetterText(),
                 order.getStatus().getValue(),
                 order.getTrackingId(),
                 order.getAmountPaid(),

backend/src/main/java/se/bilhalsning/dto/OrderResponse.java

@@ -7,6 +7,7 @@ import java.util.UUID;
 public record OrderResponse(
         UUID id,
         String plate,
+        String letterText,
         String status,
         String trackingId,
         BigDecimal amountPaid,

backend/src/test/java/se/bilhalsning/controller/OrderControllerTest.java

@@ -83,6 +83,7 @@ class OrderControllerTest {
                 .andExpect(status().isOk())
                 .andExpect(jsonPath("$[0].id").value("c1eebc99-9c0b-4ef8-bb6d-6bb9bd380a11"))
                 .andExpect(jsonPath("$[0].plate").value("ABC123"))
+                .andExpect(jsonPath("$[0].letterText").value("Test letter"))
                 .andExpect(jsonPath("$[0].status").value("sent"))
                 .andExpect(jsonPath("$[0].trackingId").value("PN123456789"));
     }
@@ -130,6 +131,7 @@ class OrderControllerTest {
                 .andExpect(status().isCreated())
                 .andExpect(jsonPath("$.id").value("d1eebc99-9c0b-4ef8-bb6d-6bb9bd380a11"))
                 .andExpect(jsonPath("$.plate").value("ABC123"))
+                .andExpect(jsonPath("$.letterText").value("Hej fin bil!"))
                 .andExpect(jsonPath("$.status").value("pending_payment"));
     }
 

docker-compose.prod.yml

@@ -29,6 +29,7 @@ services:
       STRIPE_SECRET_KEY: ${STRIPE_SECRET_KEY}
       STRIPE_WEBHOOK_SECRET: ${STRIPE_WEBHOOK_SECRET}
       STRIPE_PRICE_ID: ${STRIPE_PRICE_ID}
+      SWISH_NUMBER: ${SWISH_NUMBER}
     depends_on:
       postgres:
         condition: service_healthy

frontend/e2e/admin-dashboard.spec.ts

@@ -47,13 +47,30 @@ test.describe('Admin dashboard', () => {
     await expect(page.getByText('GHI789').first()).toBeVisible()
   })
 
-  test('click expand button shows letter content', async ({ page }) => {
+  test('show message button opens modal with full letter text', async ({
+    page,
+  }) => {
+    await page.goto('/admin')
+
+    await page
+      .locator('.admin__row', { hasText: 'ABC123' })
+      .getByRole('button', { name: 'Visa meddelande' })
+      .click()
+
+    const dialog = page.getByRole('dialog', { name: 'Brevtext' })
+    await expect(dialog).toBeVisible()
+    await expect(dialog).toContainText('fin bil')
+    await dialog.getByRole('button', { name: 'Stäng' }).click()
+    await expect(dialog).not.toBeVisible()
+  })
+
+  test('click expand button shows tracking section', async ({ page }) => {
     await page.goto('/admin')
 
     const expandBtns = page.locator('.admin__expand-btn')
     await expandBtns.first().click()
 
-    await expect(page.getByText('Brevtext')).toBeVisible()
+    await expect(page.getByText('Spårnings-ID').first()).toBeVisible()
   })
 
   test('click expand button again collapses it', async ({ page }) => {
@@ -61,10 +78,10 @@ test.describe('Admin dashboard', () => {
 
     const expandBtns = page.locator('.admin__expand-btn')
     await expandBtns.first().click()
-    await expect(page.getByText('Brevtext')).toBeVisible()
+    await expect(page.locator('.admin__tracking-input').first()).toBeVisible()
 
     await expandBtns.first().click()
-    await expect(page.getByText('Brevtext')).not.toBeVisible()
+    await expect(page.locator('.admin__tracking-input').first()).not.toBeVisible()
   })
 
   test('status dropdown changes update order status', async ({ page }) => {

frontend/e2e/deferred-payment-admin.spec.ts

@@ -0,0 +1,144 @@
+import { test, expect } from '@playwright/test'
+
+test.describe.configure({ mode: 'serial' })
+
+function uniquePlate(prefix: string): string {
+  const digits = String((Date.now() % 90) + 10)
+  return `${prefix}${digits}E`
+}
+
+test.describe('Deferred payment and admin lookup', () => {
+  const plate = uniquePlate('LAT')
+  const letterText = 'E2E-test: betalar senare från orderhistoriken.'
+
+  let orderId = ''
+  let shortOrderId = ''
+
+  async function loginAsTestUser(page: import('@playwright/test').Page) {
+    await page.goto('/logga-in')
+    await page.getByLabel('E-postadress').fill('test@bilhalsning.se')
+    await page.getByLabel('Lösenord').fill('test1234')
+    await page.getByRole('button', { name: 'Logga in' }).click()
+    await page.waitForURL('/')
+  }
+
+  async function loginAsAdmin(page: import('@playwright/test').Page) {
+    await page.goto('/logga-in')
+    await page.getByLabel('E-postadress').fill('admin@bilhalsning.se')
+    await page.getByLabel('Lösenord').fill('test1234')
+    await page.getByRole('button', { name: 'Logga in' }).click()
+    await page.waitForURL('/')
+  }
+
+  async function completeSwishPayment(page: import('@playwright/test').Page) {
+    await page.getByRole('button', { name: 'Jag har betalat' }).click()
+    await page.getByRole('button', { name: 'Ja, jag har betalat' }).click()
+  }
+
+  test('user creates order, leaves payment, and pays later from orders', async ({
+    page,
+  }) => {
+    await loginAsTestUser(page)
+
+    await page.goto(`/compose?plate=${plate}`)
+    await page.getByLabel('Ditt meddelande').fill(letterText)
+    await page.getByRole('button', { name: 'Fortsätt till betalning' }).click()
+
+    await page.waitForURL(/\/betalning\/[a-f0-9-]+/i)
+    const match = page.url().match(/\/betalning\/([a-f0-9-]+)/i)
+    expect(match).not.toBeNull()
+    orderId = match![1]
+    shortOrderId = orderId.slice(0, 8)
+
+    await expect(page.locator('.payment__order-id')).toHaveText(orderId)
+
+    await page.goto('/')
+    await page.getByRole('link', { name: 'Mina beställningar' }).click()
+    await expect(page).toHaveURL('/orders')
+
+    const orderCard = page.locator('.orders__card', { hasText: orderId })
+    await expect(orderCard.getByText(plate)).toBeVisible()
+    await expect(orderCard.locator('.badge')).toHaveText('Väntar på betalning')
+    await expect(orderCard.getByRole('link', { name: 'Betala nu' })).toBeVisible()
+
+    await orderCard.getByRole('link', { name: 'Betala nu' }).click()
+    await expect(page).toHaveURL(new RegExp(`/betalning/${orderId}`))
+    await completeSwishPayment(page)
+
+    await expect(page).toHaveURL('/orders')
+    await expect(orderCard.locator('.badge')).toHaveText('Hanteras')
+    await expect(orderCard.getByRole('link', { name: 'Betala nu' })).not.toBeVisible()
+  })
+
+  test('admin finds paid order under Att göra when searching partial order id', async ({
+    page,
+  }) => {
+    await loginAsAdmin(page)
+    await page.goto('/admin')
+
+    await page.getByRole('button', { name: /Att göra/ }).click()
+    await page.locator('#admin-order-search').fill(shortOrderId)
+
+    const row = page.locator('.admin__row', { hasText: shortOrderId })
+    await expect(row).toBeVisible()
+    await expect(row.locator('.admin__order-id')).toHaveText(shortOrderId)
+    await expect(row.locator('.admin__plate')).toHaveText(plate)
+    await expect(row).toHaveClass(/admin__row--todo/)
+  })
+
+  test('admin finds paid order when searching full order id', async ({ page }) => {
+    await loginAsAdmin(page)
+    await page.goto('/admin')
+
+    await page.getByRole('button', { name: /Att göra/ }).click()
+    await page.locator('#admin-order-search').fill(orderId)
+
+    const row = page.locator('.admin__row', { hasText: shortOrderId })
+    await expect(row).toBeVisible()
+    await expect(row.locator('.admin__order-id')).toHaveText(shortOrderId)
+    await expect(row.locator('.admin__plate')).toHaveText(plate)
+  })
+
+  test('admin finds paid order when searching registration number', async ({
+    page,
+  }) => {
+    await loginAsAdmin(page)
+    await page.goto('/admin')
+
+    await page.getByRole('button', { name: /Att göra/ }).click()
+    await page.locator('#admin-order-search').fill(plate)
+
+    const row = page.locator('.admin__row', { hasText: shortOrderId })
+    await expect(row).toBeVisible()
+    await expect(row.locator('.admin__plate')).toHaveText(plate)
+  })
+
+  test('admin does not show unpaid order under Att göra before payment', async ({
+    page,
+  }) => {
+    await loginAsTestUser(page)
+
+    const unpaidPlate = uniquePlate('UNP')
+    await page.goto(`/compose?plate=${unpaidPlate}`)
+    await page.getByLabel('Ditt meddelande').fill('E2E-test: ska ligga under Väntar.')
+    await page.getByRole('button', { name: 'Fortsätt till betalning' }).click()
+    await page.waitForURL(/\/betalning\/([a-f0-9-]+)/i)
+    const unpaidMatch = page.url().match(/\/betalning\/([a-f0-9-]+)/i)
+    const unpaidOrderId = unpaidMatch![1]
+    const unpaidShortId = unpaidOrderId.slice(0, 8)
+    await page.goto('/orders')
+
+    await page.evaluate(() => localStorage.clear())
+    await loginAsAdmin(page)
+    await page.goto('/admin')
+    await page.getByRole('button', { name: /Att göra/ }).click()
+
+    const unpaidRow = page.locator('.admin__row', { hasText: unpaidShortId })
+    await expect(unpaidRow).not.toBeVisible()
+
+    await page.getByRole('button', { name: /Väntar/ }).click()
+    await page.locator('#admin-order-search').fill(unpaidPlate)
+    await expect(unpaidRow).toBeVisible()
+    await expect(unpaidRow.locator('.admin__plate')).toHaveText(unpaidPlate)
+  })
+})

frontend/e2e/order-history.spec.ts

@@ -54,6 +54,26 @@ test.describe('Order history', () => {
     await expect(page.getByText('Levererat').first()).toBeVisible()
   })
 
+  test('shows pay button for unpaid order and opens payment page', async ({
+    page,
+  }) => {
+    await page.goto('/logga-in')
+    await page.getByLabel('E-postadress').fill('test@bilhalsning.se')
+    await page.getByLabel('Lösenord').fill('test1234')
+    await page.getByRole('button', { name: 'Logga in' }).click()
+    await page.waitForURL('/')
+
+    await page.goto('/orders')
+
+    const unpaidCard = page.locator('.orders__card', { hasText: 'DEF456' })
+    await expect(unpaidCard.getByRole('link', { name: 'Betala nu' })).toBeVisible()
+    await unpaidCard.getByRole('link', { name: 'Betala nu' }).click()
+
+    await expect(page).toHaveURL(/\/betalning\/c2eebc99/)
+    await expect(page.getByRole('heading', { name: 'Betalning' })).toBeVisible()
+    await expect(page.getByText('DEF456')).toBeVisible()
+  })
+
   test('shows tracking links for orders with tracking ID', async ({ page }) => {
     await page.goto('/logga-in')
     await page.getByLabel('E-postadress').fill('test@bilhalsning.se')

frontend/src/__tests__/AdminDashboard.spec.ts

@@ -55,6 +55,16 @@ const mockOrders = [
     amountPaid: null,
     createdAt: '2026-05-14T13:00:00Z',
   },
+  {
+    id: 'c3eebc99-9c0b-4ef8-bb6d-6bb9bd380a13',
+    email: 'pending@example.com',
+    plate: 'PND111',
+    letterText: 'Väntar på betalning.',
+    status: 'pending_payment',
+    trackingId: null,
+    amountPaid: null,
+    createdAt: '2026-05-15T14:00:00Z',
+  },
 ]
 
 describe('AdminDashboard', () => {
@@ -91,8 +101,10 @@ describe('AdminDashboard', () => {
     const { wrapper } = mountPage()
     await new Promise((r) => setTimeout(r, 50))
     expect(wrapper.text()).toContain('Datum')
+    expect(wrapper.text()).toContain('Beställnings-ID')
     expect(wrapper.text()).toContain('E-post')
     expect(wrapper.text()).toContain('Regnr')
+    expect(wrapper.text()).toContain('Meddelande')
     expect(wrapper.text()).toContain('Status')
   })
 
@@ -121,19 +133,30 @@ describe('AdminDashboard', () => {
     expect(wrapper.text()).toContain('Kunde inte hämta beställningar')
   })
 
-  it('expands row on button click to show letter content', async () => {
+  it('opens message modal with full letter text', async () => {
     const { wrapper } = mountPage()
     await new Promise((r) => setTimeout(r, 50))
 
-    const rows = wrapper.findAll('.admin__row')
-    expect(rows.length).toBe(2)
-
-    const expandBtns = wrapper.findAll('.admin__expand-btn')
-    await expandBtns[0].trigger('click')
+    const messageBtns = wrapper.findAll('.admin__message-btn')
+    await messageBtns[0].trigger('click')
     await new Promise((r) => setTimeout(r, 50))
 
-    expect(wrapper.text()).toContain('Hej fin bil!')
-    expect(wrapper.text()).toContain('Brevtext')
+    expect(wrapper.find('.admin-modal').exists()).toBe(true)
+    expect(wrapper.find('.admin-modal__body').text()).toBe('Hej fin bil!')
+    expect(wrapper.text()).toContain('ABC123')
+    expect(wrapper.text()).toContain('c1eebc99')
+  })
+
+  it('closes message modal on close button click', async () => {
+    const { wrapper } = mountPage()
+    await new Promise((r) => setTimeout(r, 50))
+
+    await wrapper.findAll('.admin__message-btn')[0].trigger('click')
+    await new Promise((r) => setTimeout(r, 50))
+    await wrapper.find('.admin-modal__close').trigger('click')
+    await new Promise((r) => setTimeout(r, 50))
+
+    expect(wrapper.find('.admin-modal').exists()).toBe(false)
   })
 
   it('collapses row on second button click', async () => {
@@ -143,11 +166,11 @@ describe('AdminDashboard', () => {
     const expandBtns = wrapper.findAll('.admin__expand-btn')
     await expandBtns[0].trigger('click')
     await new Promise((r) => setTimeout(r, 50))
-    expect(wrapper.text()).toContain('Hej fin bil!')
+    expect(wrapper.find('.admin__expanded-row').exists()).toBe(true)
 
     await expandBtns[0].trigger('click')
     await new Promise((r) => setTimeout(r, 50))
-    expect(wrapper.text()).not.toContain('Hej fin bil!')
+    expect(wrapper.find('.admin__expanded-row').exists()).toBe(false)
   })
 
   it('only expands one row at a time', async () => {
@@ -157,12 +180,12 @@ describe('AdminDashboard', () => {
     const expandBtns = wrapper.findAll('.admin__expand-btn')
     await expandBtns[0].trigger('click')
     await new Promise((r) => setTimeout(r, 50))
-    expect(wrapper.text()).toContain('Hej fin bil!')
+    expect(wrapper.findAll('.admin__expanded-row')).toHaveLength(1)
 
     await expandBtns[1].trigger('click')
     await new Promise((r) => setTimeout(r, 50))
-    expect(wrapper.text()).not.toContain('Hej fin bil!')
-    expect(wrapper.text()).toContain('Vill köpa din bil.')
+    expect(wrapper.findAll('.admin__expanded-row')).toHaveLength(1)
+    expect(wrapper.find('.admin__tracking-row').exists()).toBe(true)
   })
 
   it('renders status dropdowns', async () => {
@@ -170,7 +193,7 @@ describe('AdminDashboard', () => {
     await new Promise((r) => setTimeout(r, 50))
 
     const selects = wrapper.findAll('.admin__status-select')
-    expect(selects.length).toBe(2)
+    expect(selects.length).toBe(3)
   })
 
   it('fires status update API on dropdown change', async () => {
@@ -309,11 +332,67 @@ describe('AdminDashboard', () => {
     expect(wrapper.text()).toContain('Att göra')
   })
 
+  it('shows visa meddelande button in each row', async () => {
+    const { wrapper } = mountPage()
+    await new Promise((r) => setTimeout(r, 50))
+    expect(wrapper.findAll('.admin__message-btn')).toHaveLength(3)
+    expect(wrapper.text()).toContain('Visa meddelande')
+  })
+
+  it('filters orders when Väntar tab is clicked', async () => {
+    const { wrapper } = mountPage()
+    await new Promise((r) => setTimeout(r, 50))
+
+    const stats = wrapper.findAll('.admin__stat')
+    const waitingTab = stats.find((stat) => stat.text().includes('Väntar'))
+    expect(waitingTab).toBeDefined()
+    await waitingTab!.trigger('click')
+    await new Promise((r) => setTimeout(r, 50))
+
+    expect(wrapper.text()).toContain('pending@example.com')
+    expect(wrapper.text()).not.toContain('test@bilhalsning.se')
+    expect(wrapper.text()).not.toContain('user@example.com')
+  })
+
+  it('filters orders by partial order id search', async () => {
+    const { wrapper } = mountPage()
+    await new Promise((r) => setTimeout(r, 50))
+
+    await wrapper.find('#admin-order-search').setValue('c2eebc99')
+    await new Promise((r) => setTimeout(r, 50))
+
+    expect(wrapper.text()).toContain('user@example.com')
+    expect(wrapper.text()).not.toContain('test@bilhalsning.se')
+    expect(wrapper.text()).not.toContain('pending@example.com')
+  })
+
+  it('filters orders by registration number search', async () => {
+    const { wrapper } = mountPage()
+    await new Promise((r) => setTimeout(r, 50))
+
+    await wrapper.find('#admin-order-search').setValue('abc123')
+    await new Promise((r) => setTimeout(r, 50))
+
+    expect(wrapper.text()).toContain('test@bilhalsning.se')
+    expect(wrapper.text()).not.toContain('user@example.com')
+    expect(wrapper.text()).not.toContain('pending@example.com')
+  })
+
+  it('shows shortened order id with full id in title', async () => {
+    const { wrapper } = mountPage()
+    await new Promise((r) => setTimeout(r, 50))
+
+    const orderIdCell = wrapper.find('.admin__order-id')
+    expect(orderIdCell.text()).toBe('c1eebc99')
+    expect(orderIdCell.attributes('title')).toBe(mockOrders[0].id)
+  })
+
   it('highlights processing rows', async () => {
     const { wrapper } = mountPage()
     await new Promise((r) => setTimeout(r, 50))
 
     const rows = wrapper.findAll('.admin__row')
-    expect(rows[1].classes()).toContain('admin__row--todo')
+    const processingRow = rows.find((row) => row.text().includes('XYZ789'))
+    expect(processingRow?.classes()).toContain('admin__row--todo')
   })
 })

frontend/src/__tests__/OrdersPage.spec.ts

@@ -17,6 +17,11 @@ function createTestRouter() {
     history: createMemoryHistory(),
     routes: [
       { path: '/orders', name: 'orders', component: OrdersPage },
+      {
+        path: '/betalning/:orderId',
+        name: 'payment',
+        component: { template: '<div>Payment</div>' },
+      },
       { path: '/', name: 'home', component: { template: '<div>Home</div>' } },
     ],
   })
@@ -38,6 +43,7 @@ const mockOrders = [
   {
     id: 'c1eebc99-9c0b-4ef8-bb6d-6bb9bd380a11',
     plate: 'ABC123',
+    letterText: 'Hej fin bil!',
     status: 'sent',
     trackingId: 'PN123456789',
     createdAt: '2026-05-11T12:00:00Z',
@@ -45,6 +51,7 @@ const mockOrders = [
   {
     id: 'c2eebc99-9c0b-4ef8-bb6d-6bb9bd380a12',
     plate: 'DEF456',
+    letterText: 'Vill köpa din bil.',
     status: 'pending_payment',
     trackingId: null,
     createdAt: '2026-05-14T13:00:00Z',
@@ -112,6 +119,7 @@ describe('OrdersPage', () => {
       {
         id: 'c2eebc99-9c0b-4ef8-bb6d-6bb9bd380a12',
         plate: 'DEF456',
+        letterText: 'Test',
         status: 'pending_payment',
         trackingId: null,
         createdAt: '2026-05-14T13:00:00Z',
@@ -126,6 +134,16 @@ describe('OrdersPage', () => {
     expect(link.exists()).toBe(false)
   })
 
+  it('renders order id and message', async () => {
+    const { wrapper } = mountPage()
+    await new Promise((r) => setTimeout(r, 50))
+    expect(wrapper.text()).toContain('Beställnings-ID')
+    expect(wrapper.text()).toContain('c1eebc99-9c0b-4ef8-bb6d-6bb9bd380a11')
+    expect(wrapper.text()).toContain('Meddelande')
+    expect(wrapper.text()).toContain('Hej fin bil!')
+    expect(wrapper.text()).toContain('Vill köpa din bil.')
+  })
+
   it('renders formatted date', async () => {
     const { wrapper } = mountPage()
     await new Promise((r) => setTimeout(r, 50))
@@ -156,11 +174,35 @@ describe('OrdersPage', () => {
     expect(badges[1].classes()).toContain('badge--muted')
   })
 
+  it('shows pay button only for pending payment orders', async () => {
+    const { wrapper } = mountPage()
+    await new Promise((r) => setTimeout(r, 50))
+
+    const payLinks = wrapper.findAll('.orders__pay-btn')
+    expect(payLinks).toHaveLength(1)
+    expect(payLinks[0].text()).toBe('Betala nu')
+
+    const href = payLinks[0].attributes('href')
+    expect(href).toContain('c2eebc99-9c0b-4ef8-bb6d-6bb9bd380a12')
+    expect(href).toContain('plate=DEF456')
+  })
+
+  it('does not show pay button for paid or sent orders', async () => {
+    const { wrapper } = mountPage()
+    await new Promise((r) => setTimeout(r, 50))
+
+    const sentCard = wrapper
+      .findAll('.orders__card')
+      .find((card) => card.text().includes('ABC123'))
+    expect(sentCard?.find('.orders__pay-btn').exists()).toBe(false)
+  })
+
   it('renders processing status correctly', async () => {
     const ordersWithProcessing = [
       {
         id: 'c4eebc99-9c0b-4ef8-bb6d-6bb9bd380a14',
         plate: 'XYZ123',
+        letterText: 'Processing message',
         status: 'processing',
         trackingId: null,
         createdAt: '2026-05-15T10:00:00Z',

frontend/src/__tests__/PaymentRedirect.spec.ts

@@ -74,6 +74,18 @@ describe('PaymentRedirect', () => {
     expect(wrapper.text()).toContain('ABC123')
   })
 
+  it('shows full order id for Swish reference', async () => {
+    const orderId = 'b82fb935-369e-4402-9d72-667bf59e4e29'
+    const { wrapper } = await mountPage(orderId, 'HDO732')
+    await vi.waitFor(() => {
+      expect(wrapper.text()).toContain('Beställnings-ID')
+      expect(wrapper.text()).toContain(orderId)
+      expect(wrapper.text()).toContain(
+        'Ange beställnings-ID ovan som meddelande i Swish-appen',
+      )
+    })
+  })
+
   it('shows Swish payment button', async () => {
     const { wrapper } = await mountPage()
     await vi.waitFor(() => {

frontend/src/api/orders.ts

@@ -3,6 +3,7 @@ import { request } from './client'
 export interface Order {
   id: string
   plate: string
+  letterText: string
   status: string
   trackingId: string | null
   amountPaid: number | null

frontend/src/pages/AdminPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, computed } from 'vue'
+import { ref, onMounted, onUnmounted, reactive, computed } from 'vue'
 import {
   fetchAllOrders,
   updateOrderStatus,
@@ -13,7 +13,12 @@ const loading = ref(true)
 const error = ref('')
 const statusError = ref('')
 const trackingError = ref('')
+const activeFilter = ref<'all' | 'processing' | 'paid_group' | 'pending_payment'>(
+  'all',
+)
+const searchQuery = ref('')
 const trackingInputValues = reactive<Record<string, string>>({})
+const messageModalOrder = ref<AdminOrder | null>(null)
 
 const statusLabels: Record<string, string> = {
   pending_payment: 'Väntar på betalning',
@@ -54,6 +59,35 @@ const stats = computed(() => {
   return { total, todo, paid, pending }
 })
 
+const filteredOrders = computed(() => {
+  let result = orders.value
+
+  if (activeFilter.value === 'processing') {
+    result = result.filter((o) => o.status === 'processing')
+  } else if (activeFilter.value === 'paid_group') {
+    result = result.filter((o) =>
+      ['paid', 'sent', 'delivered'].includes(o.status),
+    )
+  } else if (activeFilter.value === 'pending_payment') {
+    result = result.filter((o) => o.status === 'pending_payment')
+  }
+
+  const query = searchQuery.value.trim().toLowerCase()
+  if (query) {
+    result = result.filter(
+      (o) =>
+        o.id.toLowerCase().includes(query) ||
+        o.plate.toLowerCase().includes(query),
+    )
+  }
+
+  return result
+})
+
+function shortOrderId(id: string): string {
+  return id.slice(0, 8)
+}
+
 function formatDate(iso: string): string {
   return new Date(iso).toLocaleDateString('sv-SE', {
     year: 'numeric',
@@ -62,6 +96,20 @@ function formatDate(iso: string): string {
   })
 }
 
+function openMessageModal(order: AdminOrder) {
+  messageModalOrder.value = order
+}
+
+function closeMessageModal() {
+  messageModalOrder.value = null
+}
+
+function handleModalKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && messageModalOrder.value) {
+    closeMessageModal()
+  }
+}
+
 function toggleExpand(orderId: string) {
   if (expandedOrderId.value === orderId) {
     expandedOrderId.value = null
@@ -108,6 +156,7 @@ async function handleTrackingSave(orderId: string) {
 }
 
 onMounted(async () => {
+  window.addEventListener('keydown', handleModalKeydown)
   try {
     orders.value = await fetchAllOrders()
   } catch {
@@ -116,6 +165,10 @@ onMounted(async () => {
     loading.value = false
   }
 })
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleModalKeydown)
+})
 </script>
 
 <template>
@@ -138,24 +191,64 @@ onMounted(async () => {
 
     <template v-else>
       <div class="admin__stats">
-        <div class="admin__stat">
+        <button
+          type="button"
+          class="admin__stat"
+          :class="{ 'admin__stat--active': activeFilter === 'all' }"
+          @click="activeFilter = 'all'"
+        >
           <span class="admin__stat-value">{{ stats.total }}</span>
           <span class="admin__stat-label">Totalt</span>
-        </div>
-        <div class="admin__stat admin__stat--todo">
+        </button>
+        <button
+          type="button"
+          class="admin__stat"
+          :class="{ 'admin__stat--active': activeFilter === 'processing' }"
+          @click="activeFilter = 'processing'"
+        >
           <span class="admin__stat-value">{{ stats.todo }}</span>
           <span class="admin__stat-label">Att göra</span>
-        </div>
-        <div class="admin__stat">
+        </button>
+        <button
+          type="button"
+          class="admin__stat"
+          :class="{ 'admin__stat--active': activeFilter === 'paid_group' }"
+          @click="activeFilter = 'paid_group'"
+        >
           <span class="admin__stat-value">{{ stats.paid }}</span>
           <span class="admin__stat-label">Betalda</span>
-        </div>
-        <div class="admin__stat">
+        </button>
+        <button
+          type="button"
+          class="admin__stat"
+          :class="{ 'admin__stat--active': activeFilter === 'pending_payment' }"
+          @click="activeFilter = 'pending_payment'"
+        >
           <span class="admin__stat-value">{{ stats.pending }}</span>
           <span class="admin__stat-label">Väntar</span>
-        </div>
+        </button>
       </div>
 
+      <div class="admin__toolbar">
+        <label for="admin-order-search" class="admin__search-label"
+          >Sök beställnings-ID eller regnr</label
+        >
+        <input
+          id="admin-order-search"
+          v-model="searchQuery"
+          class="admin__search-input"
+          type="search"
+          placeholder="t.ex. c1eebc99 eller ABC123"
+        />
+      </div>
+
+      <p
+        v-if="filteredOrders.length === 0"
+        class="message message--info admin__filter-empty"
+      >
+        Inga beställningar matchar filtret.
+      </p>
+
       <p
         v-if="statusError"
         class="message message--error admin__status-error"
@@ -164,19 +257,21 @@ onMounted(async () => {
         {{ statusError }}
       </p>
 
-      <div class="admin__table-wrap">
+      <div v-if="filteredOrders.length > 0" class="admin__table-wrap">
         <table class="admin__table">
           <thead>
             <tr>
               <th>Datum</th>
+              <th>Beställnings-ID</th>
               <th>E-post</th>
               <th>Regnr</th>
+              <th>Meddelande</th>
               <th>Status</th>
               <th></th>
             </tr>
           </thead>
           <tbody>
-            <template v-for="order in orders" :key="order.id">
+            <template v-for="order in filteredOrders" :key="order.id">
               <tr
                 class="admin__row"
                 :class="{
@@ -185,8 +280,20 @@ onMounted(async () => {
                 }"
               >
                 <td>{{ formatDate(order.createdAt) }}</td>
+                <td class="admin__order-id" :title="order.id">
+                  {{ shortOrderId(order.id) }}
+                </td>
                 <td>{{ order.email }}</td>
                 <td class="admin__plate">{{ order.plate }}</td>
+                <td>
+                  <button
+                    type="button"
+                    class="btn btn--ghost btn--sm admin__message-btn"
+                    @click.stop="openMessageModal(order)"
+                  >
+                    Visa meddelande
+                  </button>
+                </td>
                 <td>
                   <select
                     class="admin__status-select"
@@ -242,15 +349,8 @@ onMounted(async () => {
                 v-if="expandedOrderId === order.id"
                 class="admin__expanded-row"
               >
-                <td :colspan="5">
+                <td :colspan="7">
                   <div class="admin__expanded-inner">
-                    <div class="admin__section">
-                      <div class="admin__section-label">Brevtext</div>
-                      <div class="admin__section-body">
-                        {{ order.letterText }}
-                      </div>
-                    </div>
-
                     <div class="admin__section">
                       <div class="admin__section-header">
                         <span class="admin__section-label">Spårnings-ID</span>
@@ -313,6 +413,52 @@ onMounted(async () => {
         </table>
       </div>
     </template>
+
+    <div
+      v-if="messageModalOrder"
+      class="admin-modal-overlay"
+      @click.self="closeMessageModal"
+    >
+      <div
+        class="admin-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="admin-message-modal-title"
+      >
+        <div class="admin-modal__header">
+          <h2 id="admin-message-modal-title" class="admin-modal__title">
+            Brevtext
+          </h2>
+          <button
+            type="button"
+            class="admin-modal__close"
+            aria-label="Stäng"
+            @click="closeMessageModal"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              width="20"
+              height="20"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              aria-hidden="true"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+        <p class="admin-modal__meta">
+          {{ messageModalOrder.plate }} ·
+          {{ shortOrderId(messageModalOrder.id) }}
+        </p>
+        <div class="admin-modal__body">
+          {{ messageModalOrder.letterText }}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -343,13 +489,67 @@ onMounted(async () => {
   padding: var(--space-md) var(--space-lg);
   text-align: center;
   box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  font: inherit;
+  width: 100%;
+  transition:
+    border-color var(--transition-fast),
+    background var(--transition-fast);
 }
 
-.admin__stat--todo {
+.admin__stat:hover {
+  border-color: var(--color-primary);
+}
+
+.admin__stat--active {
   background: var(--color-primary-soft);
   border-color: var(--color-primary);
 }
 
+.admin__toolbar {
+  margin-bottom: var(--space-lg);
+}
+
+.admin__search-label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: var(--space-xs);
+}
+
+.admin__search-input {
+  width: 100%;
+  max-width: 24rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  color: var(--color-ink);
+  outline: none;
+  transition: border-color var(--transition-fast);
+}
+
+.admin__search-input:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary-ring);
+}
+
+.admin__filter-empty {
+  margin-bottom: var(--space-md);
+}
+
+.admin__order-id {
+  font-family: ui-monospace, monospace;
+  font-size: 0.8125rem;
+}
+
+.admin__message-btn {
+  white-space: nowrap;
+}
+
 .admin__stat-value {
   display: block;
   font-size: 1.5rem;
@@ -559,6 +759,82 @@ onMounted(async () => {
   font-size: 0.8125rem;
 }
 
+.admin-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: var(--space-md);
+}
+
+.admin-modal {
+  background: var(--color-surface);
+  border-radius: var(--radius-xl);
+  width: 100%;
+  max-width: 32rem;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-card);
+  border: 1px solid var(--color-border);
+}
+
+.admin-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-lg) var(--space-lg) 0;
+}
+
+.admin-modal__title {
+  margin: 0;
+  font-size: 1.125rem;
+  color: var(--color-ink);
+}
+
+.admin-modal__close {
+  background: none;
+  border: none;
+  color: var(--color-muted);
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    color var(--transition-fast),
+    background var(--transition-fast);
+}
+
+.admin-modal__close:hover {
+  color: var(--color-ink);
+  background: var(--color-border-light);
+}
+
+.admin-modal__meta {
+  margin: var(--space-sm) var(--space-lg) 0;
+  font-size: 0.8125rem;
+  color: var(--color-muted);
+  font-family: ui-monospace, monospace;
+}
+
+.admin-modal__body {
+  margin: var(--space-md) var(--space-lg) var(--space-lg);
+  padding: var(--space-md);
+  background: var(--color-border-light);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  color: var(--color-ink);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-y: auto;
+  max-height: 60vh;
+}
+
 @media (max-width: 768px) {
   .admin__stats {
     grid-template-columns: repeat(2, 1fr);

frontend/src/pages/OrdersPage.vue

@@ -86,6 +86,14 @@ onMounted(async () => {
         </div>
 
         <div class="orders__card-meta">
+          <span class="orders__meta-label">Beställnings-ID</span>
+          <span class="orders__meta-value orders__order-id">{{ order.id }}</span>
+
+          <span class="orders__meta-label">Meddelande</span>
+          <span class="orders__meta-value orders__message">{{
+            order.letterText
+          }}</span>
+
           <span class="orders__meta-label">Datum</span>
           <span class="orders__meta-value">{{
             formatDate(order.createdAt)
@@ -103,6 +111,22 @@ onMounted(async () => {
             </a>
           </template>
         </div>
+
+        <div
+          v-if="order.status === 'pending_payment'"
+          class="orders__card-actions"
+        >
+          <RouterLink
+            :to="{
+              name: 'payment',
+              params: { orderId: order.id },
+              query: { plate: order.plate },
+            }"
+            class="btn btn--primary orders__pay-btn"
+          >
+            Betala nu
+          </RouterLink>
+        </div>
       </div>
     </div>
   </div>
@@ -177,6 +201,17 @@ onMounted(async () => {
   color: var(--color-ink);
 }
 
+.orders__order-id {
+  font-family: ui-monospace, monospace;
+  font-size: 0.8125rem;
+  word-break: break-all;
+}
+
+.orders__message {
+  white-space: pre-wrap;
+  line-height: 1.5;
+}
+
 .orders__tracking {
   font-size: 0.875rem;
   color: var(--color-primary);
@@ -188,6 +223,17 @@ onMounted(async () => {
   text-decoration: underline;
 }
 
+.orders__card-actions {
+  padding: var(--space-md) var(--space-lg);
+  border-top: 1px solid var(--color-border);
+  background: var(--color-border-light);
+}
+
+.orders__pay-btn {
+  width: 100%;
+  justify-content: center;
+}
+
 .orders__empty {
   padding: var(--space-2xl) 0;
   text-align: center;

frontend/src/pages/PaymentRedirect.vue

@@ -54,6 +54,11 @@ async function confirmPayment() {
         Registreringsnummer: <strong>{{ route.query.plate || '—' }}</strong>
       </p>
 
+      <div class="payment__order-ref">
+        <p class="payment__order-ref-label">Beställnings-ID</p>
+        <p class="payment__order-id">{{ orderId }}</p>
+      </div>
+
       <div class="payment__summary">
         <div class="payment__row">
           <span class="payment__label">Att betala</span>
@@ -74,8 +79,7 @@ async function confirmPayment() {
           <p class="payment__swish-label">Swisha till</p>
           <p class="payment__swish-number">{{ swishNumber }}</p>
           <p class="payment__swish-instruction">
-            Ange <strong class="payment__order-id">{{ orderId }}</strong>
-            som meddelande i Swish-appen.
+            Ange beställnings-ID ovan som meddelande i Swish-appen.
           </p>
           <p class="payment__swish-instruction">
             Tryck sedan på knappen nedan för att bekräfta.
@@ -140,11 +144,37 @@ async function confirmPayment() {
 }
 
 .page__plate {
-  margin: 0 0 var(--space-xl) 0;
+  margin: 0 0 var(--space-md) 0;
   font-size: 0.875rem;
   color: var(--color-muted);
 }
 
+.payment__order-ref {
+  margin: 0 0 var(--space-xl) 0;
+  padding: var(--space-md);
+  background: var(--color-border-light);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.payment__order-ref-label {
+  margin: 0 0 var(--space-xs) 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.payment__order-id {
+  margin: 0;
+  font-family: ui-monospace, monospace;
+  font-size: 0.8125rem;
+  color: var(--color-ink);
+  word-break: break-all;
+  line-height: 1.5;
+}
+
 .payment__summary {
   margin-bottom: var(--space-lg);
   padding-bottom: var(--space-lg);
@@ -205,11 +235,6 @@ async function confirmPayment() {
   margin-top: var(--space-xs);
 }
 
-.payment__order-id {
-  word-break: break-all;
-  color: var(--color-ink);
-}
-
 .payment__submit {
   width: 100%;
 }

opencode.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://opencode.ai/config.json",
-  "instructions": ["CODING_GUIDELINES.md", "REQUIREMENTS.md"],
-  "lsp": true,
-  "formatter": true,
-  "permission": {
-    "edit": "ask",
-    "bash": "ask"
-  },
-  "tools": {
-    "websearch": true,
-    "codesearch": true
-  },
-  "compaction": {
-    "auto": true,
-    "prune": true
-  },
-  "watcher": {
-    "ignore": ["node_modules/**", ".git/**", "dist/**", "build/**", "**/target/**"]
-  }
-}