UI improvements (#90)

* deadline card fix

* auto select supplier

* Update app/(dashboard)/deadlines/page.tsx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* Update app/(dashboard)/customers/page.tsx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

app/(dashboard)/customers/page.tsx

@@ -179,7 +179,7 @@ export default function CustomersPage() {
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
           {filteredCustomers.map((customer) => (
               <Link key={customer.id} href={`/customers/${customer.id}`}>
-                <Card className="hover:border-primary/50 transition-colors cursor-pointer h-full group">
+                <Card className="cursor-pointer transition-all duration-150 hover:border-primary/50 hover:bg-accent/50 hover:shadow-sm motion-safe:active:scale-[0.99] active:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 h-full group">
                   <CardHeader className="pb-3">
                     <div className="flex items-center gap-3.5">
                       <div className="h-11 w-11 rounded-full bg-primary/10 flex items-center justify-center shrink-0 text-sm font-semibold text-primary tracking-tight">

app/(dashboard)/deadlines/page.tsx

@@ -4,9 +4,9 @@ import { useState, useEffect, useCallback } from 'react'
 import Link from 'next/link'
 import { createClient } from '@/lib/supabase/client'
 import { useToast } from '@/components/ui/use-toast'
+import { ToastAction } from '@/components/ui/toast'
 import { DeadlineList } from '@/components/deadlines/DeadlineList'
-import { Card, CardContent } from '@/components/ui/card'
+import { PageHeader } from '@/components/ui/page-header'
-import { Badge } from '@/components/ui/badge'
 import { AlertTriangle, ArrowRight } from 'lucide-react'
 import type { Deadline } from '@/types'
 
@@ -25,7 +25,6 @@ export default function DeadlinesPage() {
     try {
       const today = new Date().toISOString().split('T')[0]
 
-      // Fetch all data in parallel
       const [deadlinesRes, customersRes, overdueRes] = await Promise.all([
         supabase.from('deadlines').select('*, customer:customers(name)').order('due_date', { ascending: true }),
         supabase.from('customers').select('id, name').order('name', { ascending: true }),
@@ -92,11 +91,14 @@ export default function DeadlinesPage() {
   }
 
   const handleDeadlineToggle = async (deadline: Deadline) => {
+    const wasCompleted = deadline.is_completed
+    const newCompleted = !wasCompleted
+
     try {
       const response = await fetch(`/api/deadlines/${deadline.id}/complete`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ is_completed: !deadline.is_completed }),
+        body: JSON.stringify({ is_completed: newCompleted }),
       })
 
       if (!response.ok) {
@@ -104,11 +106,33 @@ export default function DeadlinesPage() {
         throw new Error(result.error || 'Failed to toggle deadline')
       }
 
-      toast({
-        title: deadline.is_completed ? 'Markerad som ej klar' : 'Markerad som klar',
-      })
-
       fetchData()
+
+      if (newCompleted) {
+        toast({
+          title: `"${deadline.title}" markerad som klar`,
+          action: (
+            <ToastAction altText="Ångra" onClick={async () => {
+              try {
+                await fetch(`/api/deadlines/${deadline.id}/complete`, {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify({ is_completed: false }),
+                })
+              } catch {
+                toast({
+                  title: 'Kunde inte ångra',
+                  variant: 'destructive',
+                })
+              }
+            }}>
+              Ångra
+            </ToastAction>
+          ),
+        })
+      } else {
+        toast({ title: `"${deadline.title}" markerad som ej klar` })
+      }
     } catch (error) {
       toast({
         title: 'Kunde inte uppdatera status',
@@ -157,10 +181,7 @@ export default function DeadlinesPage() {
         throw new Error(result.error || 'Failed to delete deadline')
       }
 
-      toast({
+      toast({ title: 'Deadline borttagen' })
-        title: 'Deadline borttagen',
-      })
-
       fetchData()
     } catch (error) {
       toast({
@@ -174,35 +195,21 @@ export default function DeadlinesPage() {
   if (isLoading) {
     return (
       <div className="space-y-6">
-        <div>
+        <PageHeader title="Deadlines" />
-          <h1 className="font-display text-2xl md:text-3xl font-medium tracking-tight">Deadlines</h1>
+        <div className="space-y-2">
-        </div>
-        {/* Overdue alert skeleton */}
-        <div className="rounded-lg border p-4 animate-pulse">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="h-5 w-5 bg-muted rounded" />
-              <div className="space-y-1">
-                <div className="h-4 bg-muted rounded w-32" />
-                <div className="h-3 bg-muted rounded w-24" />
-              </div>
-            </div>
-            <div className="h-5 bg-muted rounded w-8" />
-          </div>
-        </div>
-        {/* Deadline list skeleton */}
-        <div className="space-y-3">
           {[1, 2, 3, 4].map((i) => (
             <div key={i} className="rounded-lg border p-4 animate-pulse">
-              <div className="flex items-center justify-between">
+              <div className="flex items-center gap-4">
-                <div className="space-y-2">
+                <div className="w-12 space-y-1">
+                  <div className="h-5 bg-muted rounded w-8 mx-auto" />
+                  <div className="h-3 bg-muted rounded w-6 mx-auto" />
+                </div>
+                <div className="w-px h-8 bg-muted" />
+                <div className="flex-1 space-y-1.5">
                   <div className="h-4 bg-muted rounded w-48" />
-                  <div className="h-3 bg-muted rounded w-32" />
+                  <div className="h-3 bg-muted rounded w-24" />
-                </div>
-                <div className="flex items-center gap-2">
-                  <div className="h-5 bg-muted rounded w-16" />
-                  <div className="h-8 bg-muted rounded w-8" />
                 </div>
+                <div className="h-4 bg-muted rounded w-16" />
               </div>
             </div>
           ))}
@@ -213,32 +220,23 @@ export default function DeadlinesPage() {
 
   return (
     <div className="space-y-6">
-      <div>
+      <PageHeader title="Deadlines" />
-        <h1 className="font-display text-2xl md:text-3xl font-medium tracking-tight">Deadlines</h1>
-      </div>
 
+      {/* Overdue invoices alert */}
       {overdueInvoices.count > 0 && (
-        <Link href="/invoices?status=unpaid" className="block group">
+        <Link href="/invoices?status=unpaid" className="group block">
-          <Card className="border-destructive/50 bg-destructive/5 hover:bg-destructive/10 transition-colors">
+          <div className="flex items-center justify-between rounded-lg border border-destructive/20 bg-destructive/5 px-4 py-3 transition-colors hover:bg-destructive/10">
-            <CardContent className="p-4">
+            <div className="flex items-center gap-3">
-              <div className="flex items-center justify-between">
+              <AlertTriangle className="h-4 w-4 text-destructive flex-shrink-0" />
-                <div className="flex items-center gap-3">
+              <p className="text-sm">
-                  <AlertTriangle className="h-5 w-5 text-destructive flex-shrink-0" />
+                <span className="font-medium">{overdueInvoices.count} förfallna fakturor</span>
-                  <div>
+                <span className="text-muted-foreground ml-1.5">
-                    <p className="font-medium text-sm">Forfallna fakturor</p>
+                  {overdueInvoices.total.toLocaleString('sv-SE')} kr
-                    <p className="text-xs text-muted-foreground mt-0.5">
+                </span>
-                      {overdueInvoices.count} st totalt{' '}
+              </p>
-                      {overdueInvoices.total.toLocaleString('sv-SE')} kr
+            </div>
-                    </p>
+            <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:translate-x-0.5 transition-transform" />
-                  </div>
+          </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Badge variant="destructive">{overdueInvoices.count}</Badge>
-                  <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:translate-x-0.5 transition-transform" />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
         </Link>
       )}
 

app/(dashboard)/expenses/new/page.tsx

@@ -81,6 +81,7 @@ export default function NewExpensePage() {
   const [pendingData, setPendingData] = useState<FormData | null>(null)
   const [showNewSupplier, setShowNewSupplier] = useState(false)
   const [isCreatingSupplier, setIsCreatingSupplier] = useState(false)
+  const [pendingSupplierSelect, setPendingSupplierSelect] = useState<string | null>(null)
   const [advancedOpen, setAdvancedOpen] = useState(false)
   const [newSupplier, setNewSupplier] = useState<NewSupplierForm>({
     name: '',
@@ -146,6 +147,14 @@ export default function NewExpensePage() {
     }
   }, [watchedSupplierId, suppliers])
 
+  // Auto-select newly created supplier once it's in the list
+  useEffect(() => {
+    if (pendingSupplierSelect && suppliers.find((s) => s.id === pendingSupplierSelect)) {
+      setValue('supplier_id', pendingSupplierSelect, { shouldDirty: true, shouldValidate: true })
+      setPendingSupplierSelect(null)
+    }
+  }, [suppliers, pendingSupplierSelect, setValue])
+
   async function fetchSuppliers() {
     const res = await fetch('/api/suppliers')
     const { data } = await res.json()
@@ -220,7 +229,7 @@ export default function NewExpensePage() {
     } else {
       const created = result.data as Supplier
       setSuppliers((prev) => [...prev, created].sort((a, b) => a.name.localeCompare(b.name)))
-      setValue('supplier_id', created.id)
+      setPendingSupplierSelect(created.id)
       setShowNewSupplier(false)
       setNewSupplier({ name: '', supplier_type: 'swedish_business', org_number: '', bankgiro: '', plusgiro: '', default_expense_account: '' })
       toast({ title: 'Leverantör skapad', description: created.name })

app/(dashboard)/invoices/page.tsx

@@ -267,7 +267,7 @@ export default function InvoicesPage() {
             return (
               <Link key={invoice.id} href={`/invoices/${invoice.id}`}>
                 <Card className={cn(
-                  'hover:border-primary/50 transition-colors cursor-pointer',
+                  'cursor-pointer transition-all duration-150 hover:border-primary/50 hover:bg-accent/50 hover:shadow-sm active:scale-[0.99] active:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
                   isCreditNote ? 'border-destructive/30' : isProforma ? 'border-primary/30' : isDeliveryNote ? 'border-success/30' : status.borderColor,
                   invoice.status === 'overdue' && 'ring-1 ring-destructive/20'
                 )}>

components/dashboard/SandboxBanner.tsx

@@ -18,19 +18,19 @@ export function SandboxBanner() {
   }
 
   return (
-    <div className="relative z-50 flex items-center justify-center gap-3 bg-warning px-4 py-2 text-sm text-warning-foreground">
+    <div className="relative z-50 flex items-center justify-center gap-x-3 gap-y-1 bg-warning px-10 py-2 text-sm text-warning-foreground sm:px-4 flex-wrap">
-      <span className="font-medium">
+      <span className="font-medium text-center text-xs sm:text-sm">
-        Sandlådemiljö — dina data raderas automatiskt efter 24 timmar
+        Sandlådemiljö — data raderas efter 24h
       </span>
       <button
         onClick={handleCreateAccount}
-        className="rounded-md bg-warning-foreground/15 px-3 py-0.5 text-xs font-semibold hover:bg-warning-foreground/25 transition-colors"
+        className="shrink-0 rounded-md bg-warning-foreground/15 px-3 py-0.5 text-xs font-semibold hover:bg-warning-foreground/25 transition-colors"
       >
         Skapa konto
       </button>
       <button
         onClick={() => setDismissed(true)}
-        className="absolute right-3 top-1/2 -translate-y-1/2 rounded p-0.5 hover:bg-warning-foreground/15 transition-colors"
+        className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 hover:bg-warning-foreground/15 transition-colors"
         aria-label="Stäng"
       >
         <X className="h-3.5 w-3.5" />

components/deadlines/DeadlineCard.tsx

@@ -1,17 +1,16 @@
 'use client'
 
+import { useState, useRef, useEffect } from 'react'
 import { Deadline } from '@/types'
-import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 import {
   isDeadlineOverdue,
   DEADLINE_TYPE_LABELS,
-  PRIORITY_LABELS,
   parseDate,
   startOfDay,
 } from '@/lib/calendar/utils'
-import { Check, Circle, Trash2, Pencil } from 'lucide-react'
+import { Check, Pencil } from 'lucide-react'
 
 interface DeadlineCardProps {
   deadline: Deadline
@@ -21,18 +20,19 @@ interface DeadlineCardProps {
   compact?: boolean
 }
 
-function getRelativeDate(dateStr: string): string {
+function getRelativeDate(dateStr: string): { text: string; urgent: boolean } | null {
   const today = startOfDay(new Date())
   const target = parseDate(dateStr)
   const diffMs = target.getTime() - today.getTime()
   const diffDays = Math.round(diffMs / (1000 * 60 * 60 * 24))
 
-  if (diffDays === 0) return 'Idag'
+  if (diffDays === 0) return { text: 'Idag', urgent: true }
-  if (diffDays === 1) return 'Imorgon'
+  if (diffDays === 1) return { text: 'Imorgon', urgent: false }
-  if (diffDays === -1) return 'Igår'
+  if (diffDays === -1) return { text: '1 dag sedan', urgent: true }
-  if (diffDays < -1) return `${Math.abs(diffDays)}d sedan`
+  if (diffDays < -1) return { text: `${Math.abs(diffDays)} dagar sedan`, urgent: true }
-  if (diffDays <= 14) return `Om ${diffDays}d`
+  if (diffDays <= 7) return { text: `Om ${diffDays} dagar`, urgent: false }
-  return ''
+  if (diffDays <= 14) return { text: `Om ${diffDays} dagar`, urgent: false }
+  return null
 }
 
 const SWEDISH_MONTHS_SHORT = [
@@ -47,211 +47,223 @@ export function DeadlineCard({
   onDelete,
   compact = false,
 }: DeadlineCardProps) {
+  const [confirming, setConfirming] = useState(false)
+  const confirmRef = useRef<HTMLDivElement>(null)
   const overdue = isDeadlineOverdue(deadline)
   const completed = deadline.is_completed
-  const relativeDate = getRelativeDate(deadline.due_date)
+  const relative = getRelativeDate(deadline.due_date)
   const dueDate = parseDate(deadline.due_date)
   const dayNum = dueDate.getDate()
   const monthStr = SWEDISH_MONTHS_SHORT[dueDate.getMonth()]
 
+  // Dismiss confirmation when clicking outside
+  useEffect(() => {
+    if (!confirming) return
+    function handleClickOutside(e: MouseEvent) {
+      if (confirmRef.current && !confirmRef.current.contains(e.target as Node)) {
+        setConfirming(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [confirming])
+
+  function handleToggleClick(e: React.MouseEvent) {
+    e.stopPropagation()
+    if (completed) {
+      // Uncompleting doesn't need confirmation
+      onToggle(deadline)
+      return
+    }
+    setConfirming(true)
+  }
+
+  function handleConfirm(e: React.MouseEvent) {
+    e.stopPropagation()
+    setConfirming(false)
+    onToggle(deadline)
+  }
+
+  function handleCancel(e: React.MouseEvent) {
+    e.stopPropagation()
+    setConfirming(false)
+  }
+
+  function handleCardClick() {
+    if (confirming) return
+    if (onEdit) onEdit(deadline)
+  }
+
+  // -- Compact variant (used in dashboard widgets) --
   if (compact) {
     return (
       <div
+        onClick={handleCardClick}
         className={cn(
-          'group flex items-center gap-3 py-2 transition-colors',
+          'group flex items-center gap-3 py-2.5 transition-colors',
-          completed && 'opacity-50'
+          onEdit && !confirming && 'cursor-pointer hover:bg-accent/30 -mx-2 px-2 rounded-md',
+          completed && 'opacity-50',
         )}
       >
-        <button
+        <span className="text-xs tabular-nums w-14 flex-shrink-0 text-muted-foreground">
-          aria-label={completed ? 'Markera som ej klar' : 'Markera som klar'}
-          onClick={() => onToggle(deadline)}
-          className={cn(
-            'flex-shrink-0 h-[18px] w-[18px] rounded-full border transition-colors',
-            completed
-              ? 'bg-success border-success text-success-foreground'
-              : overdue
-              ? 'border-destructive/40 hover:border-destructive'
-              : 'border-border hover:border-foreground/30'
-          )}
-        >
-          {completed && <Check className="h-3 w-3 m-auto" />}
-        </button>
-
-        {/* Compact date */}
-        <span className={cn(
-          'text-xs tabular-nums w-12 flex-shrink-0',
-          overdue && !completed ? 'text-destructive font-medium' : 'text-muted-foreground'
-        )}>
           {dayNum} {monthStr}
         </span>
 
-        {/* Title */}
         <p className={cn(
           'text-sm truncate flex-1 min-w-0',
-          completed ? 'line-through text-muted-foreground' : 'text-foreground'
+          completed ? 'line-through text-muted-foreground' : 'text-foreground',
         )}>
           {deadline.title}
         </p>
 
-        {/* Relative date */}
+        {!completed && relative && (
-        {!completed && relativeDate && (
           <span className={cn(
             'text-xs flex-shrink-0',
-            overdue ? 'text-destructive' : 'text-muted-foreground'
+            relative.urgent ? 'text-destructive font-medium' : 'text-muted-foreground',
           )}>
-            {relativeDate}
+            {relative.text}
           </span>
         )}
+
+        {completed && (
+          <Check className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+        )}
       </div>
     )
   }
 
+  // -- Full card --
   return (
-    <div
+    <div ref={confirmRef}>
-      className={cn(
+      <div
-        'group relative rounded-lg border bg-card transition-[box-shadow,opacity]',
+        onClick={handleCardClick}
-        'duration-[--duration-fast] ease-[--ease-out]',
+        className={cn(
-        completed
+          'group rounded-lg border bg-card transition-all duration-150',
-          ? 'opacity-60'
+          onEdit && !confirming && 'cursor-pointer',
-          : 'hover:shadow-[var(--shadow-sm)]'
+          confirming && 'ring-2 ring-ring ring-offset-1',
-      )}
+          completed
-    >
+            ? 'opacity-50 hover:opacity-70'
-      <div className="flex items-stretch">
+            : !confirming && 'hover:bg-accent/40 active:bg-accent/60',
-        {/* Date block — calendar page motif */}
+        )}
-        <div className={cn(
+      >
-          'flex-shrink-0 w-16 flex flex-col items-center justify-center py-4 border-r',
+        {/* Main row */}
-          completed ? 'text-muted-foreground' : 'text-foreground'
+        <div className="flex items-center gap-4 py-3 px-4">
-        )}>
+          {/* Date block */}
-          <span className={cn(
+          <div className="flex-shrink-0 w-12 text-center">
-            'text-2xl font-display font-medium leading-none tabular-nums',
+            <span className={cn(
-            completed && 'line-through decoration-1'
+              'block text-lg font-display font-medium leading-none tabular-nums',
-          )}>
+              completed && 'text-muted-foreground',
-            {dayNum}
+            )}>
-          </span>
+              {dayNum}
-          <span className="text-[11px] uppercase tracking-wider mt-1 text-muted-foreground">
+            </span>
-            {monthStr}
+            <span className="block text-[11px] uppercase tracking-wider text-muted-foreground mt-0.5">
-          </span>
+              {monthStr}
-        </div>
+            </span>
+          </div>
 
-        {/* Content */}
+          {/* Divider */}
-        <div className="flex-1 min-w-0 py-3.5 px-4">
+          <div className="w-px h-8 bg-border flex-shrink-0" />
-          {/* Top: title + hover actions */}
-          <div className="flex items-start justify-between gap-3">
-            <div className="flex items-start gap-2.5 min-w-0 flex-1">
-              {/* Toggle */}
-              <button
-                onClick={() => onToggle(deadline)}
-                className={cn(
-                  'flex-shrink-0 mt-0.5 h-[18px] w-[18px] rounded-full border transition-colors',
-                  completed
-                    ? 'bg-success border-success text-success-foreground'
-                    : 'border-border hover:border-foreground/40'
-                )}
-              >
-                {completed && <Check className="h-3 w-3 m-auto" />}
-                {!completed && (
-                  <Circle className="h-3 w-3 m-auto text-transparent group-hover:text-muted-foreground/30 transition-colors" />
-                )}
-              </button>
 
-              <div className="min-w-0 flex-1">
+          {/* Content */}
-                <p className={cn(
+          <div className="flex-1 min-w-0">
-                  'font-medium leading-snug',
+            <div className="flex items-baseline gap-2">
-                  completed && 'line-through text-muted-foreground'
+              <p className={cn(
-                )}>
+                'text-sm font-medium truncate',
-                  {deadline.title}
+                completed && 'line-through text-muted-foreground',
-                </p>
+              )}>
-
+                {deadline.title}
-                {/* Meta line */}
+              </p>
-                <div className="flex items-center gap-1.5 mt-1 flex-wrap">
+              {deadline.deadline_type !== 'other' && (
-                  {deadline.due_time && (
+                <span className="text-[11px] text-muted-foreground/60 flex-shrink-0 hidden sm:inline">
-                    <span className="text-sm text-muted-foreground tabular-nums">
+                  {DEADLINE_TYPE_LABELS[deadline.deadline_type]}
-                      kl. {deadline.due_time.slice(0, 5)}
+                </span>
-                    </span>
+              )}
-                  )}
-                  {deadline.due_time && (deadline.customer || (!completed && relativeDate)) && (
-                    <span className="text-muted-foreground/30 text-sm">·</span>
-                  )}
-                  {!completed && relativeDate && (
-                    <span className={cn(
-                      'text-sm',
-                      overdue ? 'text-destructive font-medium' : 'text-muted-foreground'
-                    )}>
-                      {relativeDate}
-                    </span>
-                  )}
-                  {relativeDate && deadline.customer && !completed && (
-                    <span className="text-muted-foreground/30 text-sm">·</span>
-                  )}
-                  {deadline.customer && (
-                    <span className="text-sm text-muted-foreground truncate">
-                      {deadline.customer.name}
-                    </span>
-                  )}
-                </div>
-              </div>
             </div>
 
-            {/* Right column: badges + actions */}
+            <div className="flex items-center gap-1.5 mt-0.5">
-            <div className="flex items-center gap-2 flex-shrink-0">
+              {deadline.due_time && (
-              {/* Badges */}
+                <span className="text-xs text-muted-foreground tabular-nums">
-              <div className="flex items-center gap-1">
+                  kl {deadline.due_time.slice(0, 5)}
-                <Badge
+                </span>
-                  variant="outline"
+              )}
-                  className="text-[11px] px-1.5 py-0 h-5 font-normal"
+              {deadline.due_time && deadline.customer && (
-                >
+                <span className="text-muted-foreground/30 text-xs">·</span>
-                  {DEADLINE_TYPE_LABELS[deadline.deadline_type]}
+              )}
-                </Badge>
+              {deadline.customer && (
-                {!completed && deadline.priority !== 'normal' && (
+                <span className="text-xs text-muted-foreground truncate">
-                  <Badge
+                  {deadline.customer.name}
-                    variant={deadline.priority === 'critical' ? 'destructive' : 'warning'}
+                </span>
-                    className="text-[11px] px-1.5 py-0 h-5"
-                  >
-                    {PRIORITY_LABELS[deadline.priority]}
-                  </Badge>
-                )}
-                {overdue && !completed && (
-                  <Badge variant="destructive" className="text-[11px] px-1.5 py-0 h-5">
-                    Förfallen
-                  </Badge>
-                )}
-              </div>
-
-              {/* Actions */}
-              {(onEdit || onDelete) && !completed && (
-                <div className="flex items-center">
-                  <div className="w-px h-4 bg-border mr-2" />
-                  {onEdit && (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
-                      onClick={() => onEdit(deadline)}
-                    >
-                      <Pencil className="h-3.5 w-3.5" />
-                    </Button>
-                  )}
-                  {onDelete && (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive"
-                      onClick={() => onDelete(deadline)}
-                    >
-                      <Trash2 className="h-3.5 w-3.5" />
-                    </Button>
-                  )}
-                </div>
               )}
             </div>
           </div>
 
-          {/* Notes */}
+          {/* Right: relative date + action */}
-          {deadline.notes && !completed && (
+          <div className="flex items-center gap-3 flex-shrink-0">
-            <p className="text-sm text-muted-foreground mt-2 ml-[30px] line-clamp-2 leading-relaxed">
+            {!completed && relative && (
-              {deadline.notes}
+              <span className={cn(
-            </p>
+                'text-xs tabular-nums hidden sm:inline',
+                relative.urgent ? 'text-destructive font-medium' : 'text-muted-foreground',
+              )}>
+                {relative.text}
+              </span>
+            )}
+
+            {completed ? (
+              <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                <Check className="h-3.5 w-3.5" />
+                Klar
+              </span>
+            ) : (
+              <button
+                onClick={handleToggleClick}
+                className={cn(
+                  'text-xs text-muted-foreground hover:text-foreground transition-colors px-2.5 py-1 rounded-md border border-border hover:border-foreground/30 hover:bg-accent',
+                  confirming && 'invisible',
+                )}
+              >
+                Markera klar
+              </button>
+            )}
+
+            {/* Edit hint */}
+            {onEdit && !confirming && (
+              <Pencil className="h-3.5 w-3.5 text-muted-foreground/0 group-hover:text-muted-foreground/50 transition-colors flex-shrink-0" />
+            )}
+          </div>
+        </div>
+
+        {/* Inline confirmation bar */}
+        <div
+          className={cn(
+            'grid transition-all duration-200 ease-out',
+            confirming ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
           )}
+        >
+          <div className="overflow-hidden">
+            <div className="border-t px-4 py-3 flex items-center justify-between gap-4">
+              <p className="text-sm text-muted-foreground">
+                Markera <span className="font-medium text-foreground">{deadline.title}</span> som klar?
+              </p>
+              <div className="flex items-center gap-2 flex-shrink-0">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 px-3 text-xs"
+                  onClick={handleCancel}
+                >
+                  Avbryt
+                </Button>
+                <Button
+                  size="sm"
+                  className="h-8 px-3 text-xs"
+                  onClick={handleConfirm}
+                >
+                  <Check className="h-3.5 w-3.5 mr-1.5" />
+                  Bekräfta
+                </Button>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

components/deadlines/DeadlineForm.tsx

@@ -26,6 +26,7 @@ interface DeadlineFormProps {
   open: boolean
   onOpenChange: (open: boolean) => void
   onSubmit: (data: Omit<Deadline, 'id' | 'user_id' | 'created_at' | 'updated_at'>) => Promise<void>
+  onDelete?: (deadline: Partial<Deadline>) => void
   initialData?: Partial<Deadline>
   initialDate?: Date | null
   customers: { id: string; name: string }[]
@@ -35,10 +36,12 @@ export function DeadlineForm({
   open,
   onOpenChange,
   onSubmit,
+  onDelete,
   initialData,
   initialDate,
   customers,
 }: DeadlineFormProps) {
+  const [confirmDelete, setConfirmDelete] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [formData, setFormData] = useState({
     title: '',
@@ -53,6 +56,7 @@ export function DeadlineForm({
   // Reset form when dialog opens with new data
   useEffect(() => {
     if (open) {
+      setConfirmDelete(false)
       if (initialData) {
         setFormData({
           title: initialData.title || '',
@@ -245,17 +249,61 @@ export function DeadlineForm({
             />
           </div>
 
-          <DialogFooter>
+          <DialogFooter className="flex-row justify-between sm:justify-between gap-2">
-            <Button
+            {/* Delete (only when editing an existing deadline) */}
-              type="button"
+            {initialData?.id && onDelete ? (
-              variant="outline"
+              <div className="flex items-center gap-2">
-              onClick={() => onOpenChange(false)}
+                {confirmDelete ? (
-            >
+                  <>
-              Avbryt
+                    <span className="text-sm text-muted-foreground mr-1">Ta bort?</span>
-            </Button>
+                    <Button
-            <Button type="submit" disabled={isLoading || !formData.title}>
+                      type="button"
-              {isLoading ? 'Sparar...' : initialData?.id ? 'Spara' : 'Skapa'}
+                      variant="ghost"
-            </Button>
+                      size="sm"
+                      onClick={() => setConfirmDelete(false)}
+                    >
+                      Avbryt
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="destructive"
+                      size="sm"
+                      onClick={() => {
+                        onDelete(initialData)
+                        onOpenChange(false)
+                      }}
+                    >
+                      Ta bort
+                    </Button>
+                  </>
+                ) : (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive hover:text-destructive hover:bg-destructive/10"
+                    onClick={() => setConfirmDelete(true)}
+                  >
+                    Ta bort
+                  </Button>
+                )}
+              </div>
+            ) : (
+              <div />
+            )}
+
+            <div className="flex items-center gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                Avbryt
+              </Button>
+              <Button type="submit" disabled={isLoading || !formData.title}>
+                {isLoading ? 'Sparar...' : initialData?.id ? 'Spara' : 'Skapa'}
+              </Button>
+            </div>
           </DialogFooter>
         </form>
       </DialogContent>

components/deadlines/DeadlineList.tsx

@@ -7,7 +7,7 @@ import { DeadlineCard } from './DeadlineCard'
 import { DeadlineFilters } from './DeadlineFilters'
 import { DeadlineForm } from './DeadlineForm'
 import { isDeadlineOverdue } from '@/lib/calendar/utils'
-import { Plus, Calendar } from 'lucide-react'
+import { Plus } from 'lucide-react'
 
 interface DeadlineListProps {
   deadlines: Deadline[]
@@ -33,18 +33,13 @@ export function DeadlineList({
 
   const filteredDeadlines = useMemo(() => {
     return deadlines.filter((d) => {
-      // Status filter
       if (statusFilter === 'pending' && d.is_completed) return false
       if (statusFilter === 'completed' && !d.is_completed) return false
-
-      // Type filter
       if (typeFilter !== 'all' && d.deadline_type !== typeFilter) return false
-
       return true
     })
   }, [deadlines, statusFilter, typeFilter])
 
-  // Group by overdue, today, upcoming
   const groupedDeadlines = useMemo(() => {
     const today = new Date().toISOString().split('T')[0]
     const overdue: Deadline[] = []
@@ -92,9 +87,16 @@ export function DeadlineList({
     setEditingDeadline(null)
   }
 
+  const sections = [
+    { key: 'overdue', label: 'Förfallna', items: groupedDeadlines.overdue },
+    { key: 'today', label: 'Idag', items: groupedDeadlines.today },
+    { key: 'upcoming', label: 'Kommande', items: groupedDeadlines.upcoming },
+    { key: 'completed', label: 'Klara', items: groupedDeadlines.completed },
+  ].filter(s => s.items.length > 0)
+
   return (
-    <div className="space-y-4">
+    <div className="space-y-6">
-      {/* Header */}
+      {/* Toolbar */}
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
         <DeadlineFilters
           status={statusFilter}
@@ -109,33 +111,39 @@ export function DeadlineList({
         </Button>
       </div>
 
-      {/* Deadline groups */}
+      {/* Content */}
       {filteredDeadlines.length === 0 ? (
-        <div className="text-center py-16">
+        <div className="py-20 text-center">
-          <Calendar className="h-10 w-10 text-muted-foreground/40 mx-auto mb-4" />
+          <p className="text-sm text-muted-foreground">
-          <h3 className="text-base font-medium">Inga deadlines</h3>
-          <p className="text-sm text-muted-foreground mt-1">
             {statusFilter !== 'all' || typeFilter !== 'all'
-              ? 'Inga deadlines matchar dina filter'
+              ? 'Inga deadlines matchar filtret.'
-              : 'Skapa din första deadline för att komma igång'}
+              : 'Inga deadlines ännu.'}
           </p>
+          <Button
+            variant="outline"
+            size="sm"
+            className="mt-4"
+            onClick={() => setShowForm(true)}
+          >
+            <Plus className="h-3.5 w-3.5 mr-1.5" />
+            Skapa en deadline
+          </Button>
         </div>
       ) : (
         <div className="space-y-8">
-          {/* Overdue */}
+          {sections.map(({ key, label, items }) => (
-          {groupedDeadlines.overdue.length > 0 && (
+            <section key={key}>
-            <section>
+              <div className="flex items-center gap-3 mb-2 px-1">
-              <div className="flex items-center gap-3 mb-3">
                 <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                  Förfallna
+                  {label}
                 </h3>
-                <span className="text-xs tabular-nums text-muted-foreground/60">
+                <span className="text-xs tabular-nums text-muted-foreground/50">
-                  {groupedDeadlines.overdue.length}
+                  {items.length}
                 </span>
-                <div className="flex-1 h-px bg-border" />
+                <div className="flex-1 h-px bg-border/60" />
               </div>
-              <div className="space-y-2">
+              <div className="space-y-1.5">
-                {groupedDeadlines.overdue.map((deadline) => (
+                {items.map((deadline) => (
                   <DeadlineCard
                     key={deadline.id}
                     deadline={deadline}
@@ -146,93 +154,20 @@ export function DeadlineList({
                 ))}
               </div>
             </section>
-          )}
+          ))}
-
-          {/* Today */}
-          {groupedDeadlines.today.length > 0 && (
-            <section>
-              <div className="flex items-center gap-3 mb-3">
-                <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                  Idag
-                </h3>
-                <span className="text-xs tabular-nums text-muted-foreground/60">
-                  {groupedDeadlines.today.length}
-                </span>
-                <div className="flex-1 h-px bg-border" />
-              </div>
-              <div className="space-y-2">
-                {groupedDeadlines.today.map((deadline) => (
-                  <DeadlineCard
-                    key={deadline.id}
-                    deadline={deadline}
-                    onToggle={onDeadlineToggle}
-                    onEdit={handleEdit}
-                    onDelete={onDeadlineDelete}
-                  />
-                ))}
-              </div>
-            </section>
-          )}
-
-          {/* Upcoming */}
-          {groupedDeadlines.upcoming.length > 0 && (
-            <section>
-              <div className="flex items-center gap-3 mb-3">
-                <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                  Kommande
-                </h3>
-                <span className="text-xs tabular-nums text-muted-foreground/60">
-                  {groupedDeadlines.upcoming.length}
-                </span>
-                <div className="flex-1 h-px bg-border" />
-              </div>
-              <div className="space-y-2">
-                {groupedDeadlines.upcoming.map((deadline) => (
-                  <DeadlineCard
-                    key={deadline.id}
-                    deadline={deadline}
-                    onToggle={onDeadlineToggle}
-                    onEdit={handleEdit}
-                    onDelete={onDeadlineDelete}
-                  />
-                ))}
-              </div>
-            </section>
-          )}
-
-          {/* Completed */}
-          {groupedDeadlines.completed.length > 0 && (
-            <section>
-              <div className="flex items-center gap-3 mb-3">
-                <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                  Klara
-                </h3>
-                <span className="text-xs tabular-nums text-muted-foreground/60">
-                  {groupedDeadlines.completed.length}
-                </span>
-                <div className="flex-1 h-px bg-border" />
-              </div>
-              <div className="space-y-2">
-                {groupedDeadlines.completed.map((deadline) => (
-                  <DeadlineCard
-                    key={deadline.id}
-                    deadline={deadline}
-                    onToggle={onDeadlineToggle}
-                    onEdit={handleEdit}
-                    onDelete={onDeadlineDelete}
-                  />
-                ))}
-              </div>
-            </section>
-          )}
         </div>
       )}
 
-      {/* Deadline form dialog */}
       <DeadlineForm
         open={showForm}
         onOpenChange={handleFormClose}
         onSubmit={handleFormSubmit}
+        onDelete={(deadline) => {
+          if (deadline.id) {
+            const full = deadlines.find(d => d.id === deadline.id)
+            if (full) onDeadlineDelete(full)
+          }
+        }}
         initialData={editingDeadline || undefined}
         customers={customers}
       />