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>
2026-03-23 13:39:24 +01:00
parent 7c3518a080
commit e5f1350d5c
8 changed files with 362 additions and 360 deletions
@@ -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">
@@ -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 { Badge } from '@/components/ui/badge'
+import { PageHeader } from '@/components/ui/page-header'
 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({
-        title: 'Deadline borttagen',
-      })
-
+      toast({ title: 'Deadline borttagen' })
      fetchData()
    } catch (error) {
      toast({
@@ -174,35 +195,21 @@ export default function DeadlinesPage() {
  if (isLoading) {
    return (
      <div className="space-y-6">
-        <div>
-          <h1 className="font-display text-2xl md:text-3xl font-medium tracking-tight">Deadlines</h1>
-        </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">
+        <PageHeader title="Deadlines" />
+        <div className="space-y-2">
          {[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="space-y-2">
+              <div className="flex items-center gap-4">
+                <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>
-                <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 className="h-3 bg-muted rounded w-24" />
                </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>
-        <h1 className="font-display text-2xl md:text-3xl font-medium tracking-tight">Deadlines</h1>
-      </div>
+      <PageHeader title="Deadlines" />

+      {/* Overdue invoices alert */}
      {overdueInvoices.count > 0 && (
-        <Link href="/invoices?status=unpaid" className="block group">
-          <Card className="border-destructive/50 bg-destructive/5 hover:bg-destructive/10 transition-colors">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <AlertTriangle className="h-5 w-5 text-destructive flex-shrink-0" />
-                  <div>
-                    <p className="font-medium text-sm">Forfallna fakturor</p>
-                    <p className="text-xs text-muted-foreground mt-0.5">
-                      {overdueInvoices.count} st totalt{' '}
-                      {overdueInvoices.total.toLocaleString('sv-SE')} kr
-                    </p>
-                  </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 href="/invoices?status=unpaid" className="group block">
+          <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">
+            <div className="flex items-center gap-3">
+              <AlertTriangle className="h-4 w-4 text-destructive flex-shrink-0" />
+              <p className="text-sm">
+                <span className="font-medium">{overdueInvoices.count} förfallna fakturor</span>
+                <span className="text-muted-foreground ml-1.5">
+                  {overdueInvoices.total.toLocaleString('sv-SE')} kr
+                </span>
+              </p>
+            </div>
+            <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:translate-x-0.5 transition-transform" />
+          </div>
        </Link>
      )}

@@ -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 })
@@ -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'
                )}>
@@ -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">
-      <span className="font-medium">
-        Sandlådemiljö — dina data raderas automatiskt efter 24 timmar
+    <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 text-center text-xs sm:text-sm">
+        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" />
@@ -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 === 1) return 'Imorgon'
-  if (diffDays === -1) return 'Igår'
-  if (diffDays < -1) return `${Math.abs(diffDays)}d sedan`
-  if (diffDays <= 14) return `Om ${diffDays}d`
-  return ''
+  if (diffDays === 0) return { text: 'Idag', urgent: true }
+  if (diffDays === 1) return { text: 'Imorgon', urgent: false }
+  if (diffDays === -1) return { text: '1 dag sedan', urgent: true }
+  if (diffDays < -1) return { text: `${Math.abs(diffDays)} dagar sedan`, urgent: true }
+  if (diffDays <= 7) return { text: `Om ${diffDays} dagar`, urgent: false }
+  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',
-          completed && 'opacity-50'
+          'group flex items-center gap-3 py-2.5 transition-colors',
+          onEdit && !confirming && 'cursor-pointer hover:bg-accent/30 -mx-2 px-2 rounded-md',
+          completed && 'opacity-50',
        )}
      >
-        <button
-          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'
-        )}>
+        <span className="text-xs tabular-nums w-14 flex-shrink-0 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 && relativeDate && (
+        {!completed && relative && (
          <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
-      className={cn(
-        'group relative rounded-lg border bg-card transition-[box-shadow,opacity]',
-        'duration-[--duration-fast] ease-[--ease-out]',
-        completed
-          ? 'opacity-60'
-          : 'hover:shadow-[var(--shadow-sm)]'
-      )}
-    >
-      <div className="flex items-stretch">
-        {/* Date block — calendar page motif */}
-        <div className={cn(
-          'flex-shrink-0 w-16 flex flex-col items-center justify-center py-4 border-r',
-          completed ? 'text-muted-foreground' : 'text-foreground'
-        )}>
-          <span className={cn(
-            'text-2xl font-display font-medium leading-none tabular-nums',
-            completed && 'line-through decoration-1'
-          )}>
-            {dayNum}
-          </span>
-          <span className="text-[11px] uppercase tracking-wider mt-1 text-muted-foreground">
-            {monthStr}
-          </span>
-        </div>
+    <div ref={confirmRef}>
+      <div
+        onClick={handleCardClick}
+        className={cn(
+          'group rounded-lg border bg-card transition-all duration-150',
+          onEdit && !confirming && 'cursor-pointer',
+          confirming && 'ring-2 ring-ring ring-offset-1',
+          completed
+            ? 'opacity-50 hover:opacity-70'
+            : !confirming && 'hover:bg-accent/40 active:bg-accent/60',
+        )}
+      >
+        {/* Main row */}
+        <div className="flex items-center gap-4 py-3 px-4">
+          {/* Date block */}
+          <div className="flex-shrink-0 w-12 text-center">
+            <span className={cn(
+              'block text-lg font-display font-medium leading-none tabular-nums',
+              completed && 'text-muted-foreground',
+            )}>
+              {dayNum}
+            </span>
+            <span className="block text-[11px] uppercase tracking-wider text-muted-foreground mt-0.5">
+              {monthStr}
+            </span>
+          </div>

-        {/* Content */}
-        <div className="flex-1 min-w-0 py-3.5 px-4">
-          {/* 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>
+          {/* Divider */}
+          <div className="w-px h-8 bg-border flex-shrink-0" />

-              <div className="min-w-0 flex-1">
-                <p className={cn(
-                  'font-medium leading-snug',
-                  completed && 'line-through text-muted-foreground'
-                )}>
-                  {deadline.title}
-                </p>
-
-                {/* Meta line */}
-                <div className="flex items-center gap-1.5 mt-1 flex-wrap">
-                  {deadline.due_time && (
-                    <span className="text-sm text-muted-foreground tabular-nums">
-                      kl. {deadline.due_time.slice(0, 5)}
-                    </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>
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-baseline gap-2">
+              <p className={cn(
+                'text-sm font-medium truncate',
+                completed && 'line-through text-muted-foreground',
+              )}>
+                {deadline.title}
+              </p>
+              {deadline.deadline_type !== 'other' && (
+                <span className="text-[11px] text-muted-foreground/60 flex-shrink-0 hidden sm:inline">
+                  {DEADLINE_TYPE_LABELS[deadline.deadline_type]}
+                </span>
+              )}
            </div>

-            {/* Right column: badges + actions */}
-            <div className="flex items-center gap-2 flex-shrink-0">
-              {/* Badges */}
-              <div className="flex items-center gap-1">
-                <Badge
-                  variant="outline"
-                  className="text-[11px] px-1.5 py-0 h-5 font-normal"
-                >
-                  {DEADLINE_TYPE_LABELS[deadline.deadline_type]}
-                </Badge>
-                {!completed && deadline.priority !== 'normal' && (
-                  <Badge
-                    variant={deadline.priority === 'critical' ? 'destructive' : 'warning'}
-                    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 className="flex items-center gap-1.5 mt-0.5">
+              {deadline.due_time && (
+                <span className="text-xs text-muted-foreground tabular-nums">
+                  kl {deadline.due_time.slice(0, 5)}
+                </span>
+              )}
+              {deadline.due_time && deadline.customer && (
+                <span className="text-muted-foreground/30 text-xs">·</span>
+              )}
+              {deadline.customer && (
+                <span className="text-xs text-muted-foreground truncate">
+                  {deadline.customer.name}
+                </span>
              )}
            </div>
          </div>

-          {/* Notes */}
-          {deadline.notes && !completed && (
-            <p className="text-sm text-muted-foreground mt-2 ml-[30px] line-clamp-2 leading-relaxed">
-              {deadline.notes}
-            </p>
+          {/* Right: relative date + action */}
+          <div className="flex items-center gap-3 flex-shrink-0">
+            {!completed && relative && (
+              <span className={cn(
+                '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>
@@ -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>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-            >
-              Avbryt
-            </Button>
-            <Button type="submit" disabled={isLoading || !formData.title}>
-              {isLoading ? 'Sparar...' : initialData?.id ? 'Spara' : 'Skapa'}
-            </Button>
+          <DialogFooter className="flex-row justify-between sm:justify-between gap-2">
+            {/* Delete (only when editing an existing deadline) */}
+            {initialData?.id && onDelete ? (
+              <div className="flex items-center gap-2">
+                {confirmDelete ? (
+                  <>
+                    <span className="text-sm text-muted-foreground mr-1">Ta bort?</span>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      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>
@@ -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">
-      {/* Header */}
+    <div className="space-y-6">
+      {/* 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">
-          <Calendar className="h-10 w-10 text-muted-foreground/40 mx-auto mb-4" />
-          <h3 className="text-base font-medium">Inga deadlines</h3>
-          <p className="text-sm text-muted-foreground mt-1">
+        <div className="py-20 text-center">
+          <p className="text-sm text-muted-foreground">
            {statusFilter !== 'all' || typeFilter !== 'all'
-              ? 'Inga deadlines matchar dina filter'
-              : 'Skapa din första deadline för att komma igång'}
+              ? 'Inga deadlines matchar filtret.'
+              : '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 */}
-          {groupedDeadlines.overdue.length > 0 && (
-            <section>
-              <div className="flex items-center gap-3 mb-3">
+          {sections.map(({ key, label, items }) => (
+            <section key={key}>
+              <div className="flex items-center gap-3 mb-2 px-1">
                <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">
-                  {groupedDeadlines.overdue.length}
+                <span className="text-xs tabular-nums text-muted-foreground/50">
+                  {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">
-                {groupedDeadlines.overdue.map((deadline) => (
+              <div className="space-y-1.5">
+                {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}
      />