@ossy/booking 1.15.6 → 1.16.0

package/src/booking-detail.page.jsx

@@ -1,659 +1,189 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import { useRouter } from '@ossy/router-react'
+import { View, Title, Text, Button, Badge, Alert, Textarea, useLocale } from '@ossy/design-system'
 
-// ---------------------------------------------------------------------------
-// Tokens
-// ---------------------------------------------------------------------------
-const C = {
-  bg: '#fafafa',
-  surface: '#ffffff',
-  border: '#e4e4e7',
-  primary: '#111111',
-  secondary: '#52525b',
-  muted: '#a1a1aa',
-  pendingBg: '#fffbeb',
-  pendingText: '#92400e',
-  pendingBorder: '#fde68a',
-  confirmedBg: '#f0fdf4',
-  confirmedText: '#166534',
-  confirmedBorder: '#bbf7d0',
-  cancelledBg: '#f4f4f5',
-  cancelledText: '#52525b',
-  cancelledBorder: '#e4e4e7',
-  errorText: '#dc2626',
-  dangerBorder: '#fca5a5',
-  inputBorder: '#d4d4d8',
-}
-const FONT = 'system-ui, -apple-system, sans-serif'
-
-// ---------------------------------------------------------------------------
-// Page metadata
-// ---------------------------------------------------------------------------
 export const metadata = {
   id: 'booking/booking-detail',
-  path: {
-    sv: '/bokningar/:bookingId',
-    en: '/bookings/:bookingId',
-  },
+  path: { sv: '/bokningar/:bookingId', en: '/bookings/:bookingId' },
 }
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-const SV_MONTHS = [
-  'januari', 'februari', 'mars', 'april', 'maj', 'juni',
-  'juli', 'augusti', 'september', 'oktober', 'november', 'december',
-]
-const SV_WEEKDAYS = ['Söndag', 'Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag']
+const STATUS_VARIANT = { pending: 'warning', confirmed: 'success', cancelled: 'neutral' }
 
-function formatDateTime(iso) {
+function formatDateTime (iso, language) {
   if (!iso) return '—'
-  const d = new Date(iso)
-  const weekday = SV_WEEKDAYS[d.getDay()]
-  const day = d.getDate()
-  const month = SV_MONTHS[d.getMonth()]
-  const year = d.getFullYear()
-  const hh = String(d.getHours()).padStart(2, '0')
-  const mm = String(d.getMinutes()).padStart(2, '0')
+  const locale = language === 'sv' ? 'sv-SE' : 'en-GB'
   try {
-    const tz = new Intl.DateTimeFormat('sv-SE', { timeZoneName: 'short', hour: 'numeric' })
-      .formatToParts(d).find(p => p.type === 'timeZoneName')?.value ?? ''
-    return `${weekday} ${day} ${month} ${year} kl. ${hh}:${mm}${tz ? ` (${tz})` : ''}`
+    return new Intl.DateTimeFormat(locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit', timeZoneName: 'short' }).format(new Date(iso))
   } catch {
-    return `${weekday} ${day} ${month} ${year} kl. ${hh}:${mm}`
+    return new Date(iso).toLocaleString(locale)
   }
 }
 
-function formatDuration(minutes) {
+function formatDuration (minutes, t) {
   if (!minutes) return '—'
-  if (minutes < 60) return `${minutes} minuter`
+  if (minutes < 60) return t('booking.bookingDetail.durationMinutes', { minutes })
   const h = Math.floor(minutes / 60)
   const m = minutes % 60
-  return m ? `${h} timme ${m} min` : `${h} timme`
-}
-
-// ---------------------------------------------------------------------------
-// Status badge
-// ---------------------------------------------------------------------------
-function StatusBadge({ status }) {
-  const variants = {
-    pending: { bg: C.pendingBg, color: C.pendingText, border: C.pendingBorder, label: 'Väntar på bekräftelse' },
-    confirmed: { bg: C.confirmedBg, color: C.confirmedText, border: C.confirmedBorder, label: 'Bekräftad' },
-    cancelled: { bg: C.cancelledBg, color: C.cancelledText, border: C.cancelledBorder, label: 'Avbokad' },
-  }
-  const v = variants[status] ?? variants.cancelled
-
-  return (
-    <span
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        padding: '4px 12px',
-        borderRadius: 999,
-        fontSize: 13,
-        fontWeight: 600,
-        fontFamily: FONT,
-        background: v.bg,
-        color: v.color,
-        border: `1px solid ${v.border}`,
-      }}
-    >
-      {v.label}
-    </span>
-  )
+  return m ? t('booking.bookingDetail.durationHoursMinutes', { hours: h, minutes: m }) : t('booking.bookingDetail.durationHours', { hours: h })
 }
 
-// ---------------------------------------------------------------------------
-// Detail row
-// ---------------------------------------------------------------------------
-function DetailRow({ label, value }) {
+function DetailRow ({ label, value }) {
   return (
-    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-      <span
-        style={{
-          width: 120,
-          flexShrink: 0,
-          fontSize: 13,
-          fontWeight: 600,
-          color: C.secondary,
-          fontFamily: FONT,
-          paddingTop: 1,
-        }}
-      >
-        {label}
-      </span>
-      <span style={{ fontSize: 14, color: C.primary, fontFamily: FONT, flex: 1 }}>
-        {value ?? '—'}
-      </span>
-    </div>
+    <View layout="row" gap="m" style={{ flexWrap: 'wrap' }}>
+      <Text weight="medium" color="secondary" style={{ width: 120, flexShrink: 0 }}>{label}</Text>
+      <Text style={{ flex: 1 }}>{value ?? '—'}</Text>
+    </View>
   )
 }
 
-// ---------------------------------------------------------------------------
-// Spinner
-// ---------------------------------------------------------------------------
-function Spinner() {
-  return (
-    <>
-      <style href="booking/detail-spinner" precedence="low">
-        {`@keyframes booking-detail-spin { to { transform: rotate(360deg) } }`}
-      </style>
-      <div
-        style={{
-          width: 22,
-          height: 22,
-          border: '3px solid #e4e4e7',
-          borderTopColor: C.primary,
-          borderRadius: '50%',
-          animation: 'booking-detail-spin 0.7s linear infinite',
-          margin: '48px auto',
-        }}
-      />
-    </>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Confirm form
-// ---------------------------------------------------------------------------
-function ConfirmForm({ booking, onSuccess, onError }) {
+function ConfirmForm ({ booking, onSuccess, onError, t }) {
   const [loading, setLoading] = useState(false)
-
   const handleConfirm = async () => {
     setLoading(true)
     try {
-      const res = await fetch('/actions/booking/confirm', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ bookingId: booking.id }),
-      })
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data?.message ?? 'Bekräftning misslyckades')
-      }
+      const res = await fetch('/actions/booking/confirm', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ bookingId: booking.id }) })
+      if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data?.message ?? t('booking.bookingDetail.errorConfirm')) }
       onSuccess()
-    } catch (err) {
-      onError(err.message)
-    } finally {
-      setLoading(false)
-    }
+    } catch (err) { onError(err.message) } finally { setLoading(false) }
   }
-
   return (
-    <button
-      onClick={handleConfirm}
-      disabled={loading}
-      style={{
-        padding: '10px 20px',
-        background: loading ? C.muted : C.primary,
-        color: '#ffffff',
-        border: 'none',
-        borderRadius: 8,
-        fontFamily: FONT,
-        fontSize: 14,
-        fontWeight: 600,
-        cursor: loading ? 'not-allowed' : 'pointer',
-      }}
-    >
-      {loading ? 'Bekräftar…' : 'Bekräfta bokning'}
-    </button>
+    <Button variant="primary" disabled={loading} onClick={handleConfirm}>
+      {loading ? t('booking.bookingDetail.confirming') : t('booking.bookingDetail.confirm')}
+    </Button>
   )
 }
 
-// ---------------------------------------------------------------------------
-// Decline form
-// ---------------------------------------------------------------------------
-function DeclineForm({ booking, onSuccess, onError }) {
+function DeclineForm ({ booking, onSuccess, onError, t }) {
   const [reason, setReason] = useState('')
   const [loading, setLoading] = useState(false)
   const [expanded, setExpanded] = useState(false)
-
   const handleDecline = async () => {
     setLoading(true)
     try {
-      const res = await fetch('/actions/booking/decline', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ bookingId: booking.id, reason: reason.trim() || null }),
-      })
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data?.message ?? 'Avböjning misslyckades')
-      }
+      const res = await fetch('/actions/booking/decline', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ bookingId: booking.id, reason: reason.trim() || null }) })
+      if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data?.message ?? t('booking.bookingDetail.errorDecline')) }
       onSuccess()
-    } catch (err) {
-      onError(err.message)
-    } finally {
-      setLoading(false)
-    }
+    } catch (err) { onError(err.message) } finally { setLoading(false) }
   }
-
-  if (!expanded) {
-    return (
-      <button
-        onClick={() => setExpanded(true)}
-        style={{
-          padding: '10px 20px',
-          background: 'transparent',
-          color: C.errorText,
-          border: `1px solid ${C.dangerBorder}`,
-          borderRadius: 8,
-          fontFamily: FONT,
-          fontSize: 14,
-          fontWeight: 600,
-          cursor: 'pointer',
-        }}
-      >
-        Avböj förfrågan
-      </button>
-    )
-  }
-
+  if (!expanded) return <Button variant="danger" onClick={() => setExpanded(true)}>{t('booking.bookingDetail.decline')}</Button>
   return (
-    <div
-      style={{
-        background: '#fff5f5',
-        border: `1px solid ${C.dangerBorder}`,
-        borderRadius: 10,
-        padding: '16px 20px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 12,
-      }}
-    >
-      <span style={{ fontSize: 14, fontWeight: 600, color: C.errorText, fontFamily: FONT }}>
-        Avböj bokningsförfrågan
-      </span>
-
-      <div>
-        <label
-          style={{ display: 'block', fontSize: 13, color: C.secondary, fontFamily: FONT, marginBottom: 6 }}
-        >
-          Anledning (valfritt — skickas till klienten)
-        </label>
-        <textarea
-          value={reason}
-          onChange={e => setReason(e.target.value)}
-          rows={3}
-          placeholder="T.ex. Tyvärr är den begärda tiden inte längre tillgänglig…"
-          style={{
-            width: '100%',
-            padding: '8px 12px',
-            border: `1px solid ${C.inputBorder}`,
-            borderRadius: 6,
-            fontFamily: FONT,
-            fontSize: 13,
-            color: C.primary,
-            background: '#fff',
-            boxSizing: 'border-box',
-            resize: 'vertical',
-            outline: 'none',
-          }}
-        />
-      </div>
-
-      <div style={{ display: 'flex', gap: 8 }}>
-        <button
-          onClick={handleDecline}
-          disabled={loading}
-          style={{
-            padding: '8px 16px',
-            background: loading ? C.muted : C.errorText,
-            color: '#ffffff',
-            border: 'none',
-            borderRadius: 6,
-            fontFamily: FONT,
-            fontSize: 13,
-            fontWeight: 600,
-            cursor: loading ? 'not-allowed' : 'pointer',
-          }}
-        >
-          {loading ? 'Avböjer…' : 'Bekräfta avböjning'}
-        </button>
-        <button
-          onClick={() => setExpanded(false)}
-          style={{
-            padding: '8px 16px',
-            background: 'transparent',
-            color: C.secondary,
-            border: `1px solid ${C.border}`,
-            borderRadius: 6,
-            fontFamily: FONT,
-            fontSize: 13,
-            cursor: 'pointer',
-          }}
-        >
-          Avbryt
-        </button>
-      </div>
-    </div>
+    <Alert variant="danger" title={t('booking.bookingDetail.declineTitle')}>
+      <View gap="s">
+        <Textarea value={reason} onChange={e => setReason(e.target.value)} rows={3} placeholder={t('booking.bookingDetail.declinePlaceholder')} />
+        <Text variant="small" color="secondary">{t('booking.bookingDetail.declineReasonHint')}</Text>
+        <View layout="row" gap="s">
+          <Button variant="danger" disabled={loading} onClick={handleDecline}>{loading ? t('booking.bookingDetail.declining') : t('booking.bookingDetail.declineConfirm')}</Button>
+          <Button variant="neutral" onClick={() => setExpanded(false)}>{t('booking.bookingDetail.cancelButton')}</Button>
+        </View>
+      </View>
+    </Alert>
   )
 }
 
-// ---------------------------------------------------------------------------
-// Cancel form
-// ---------------------------------------------------------------------------
-function CancelForm({ booking, onSuccess, onError }) {
+function CancelForm ({ booking, onSuccess, onError, t }) {
   const [loading, setLoading] = useState(false)
   const [expanded, setExpanded] = useState(false)
-
   const handleCancel = async () => {
     setLoading(true)
     try {
-      const res = await fetch('/actions/booking/cancel', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ bookingId: booking.id }),
-      })
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data?.message ?? 'Avbokning misslyckades')
-      }
+      const res = await fetch('/actions/booking/cancel', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ bookingId: booking.id }) })
+      if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data?.message ?? t('booking.bookingDetail.errorCancel')) }
       onSuccess()
-    } catch (err) {
-      onError(err.message)
-    } finally {
-      setLoading(false)
-    }
+    } catch (err) { onError(err.message) } finally { setLoading(false) }
   }
-
-  if (!expanded) {
-    return (
-      <button
-        onClick={() => setExpanded(true)}
-        style={{
-          padding: '10px 20px',
-          background: 'transparent',
-          color: C.errorText,
-          border: `1px solid ${C.dangerBorder}`,
-          borderRadius: 8,
-          fontFamily: FONT,
-          fontSize: 14,
-          fontWeight: 600,
-          cursor: 'pointer',
-        }}
-      >
-        Avboka möte
-      </button>
-    )
-  }
-
+  if (!expanded) return <Button variant="danger" onClick={() => setExpanded(true)}>{t('booking.bookingDetail.cancelMeeting')}</Button>
   return (
-    <div
-      style={{
-        background: '#fff5f5',
-        border: `1px solid ${C.dangerBorder}`,
-        borderRadius: 10,
-        padding: '16px 20px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 12,
-      }}
-    >
-      <span style={{ fontSize: 14, fontWeight: 600, color: C.errorText, fontFamily: FONT }}>
-        Avboka bekräftad bokning
-      </span>
-      <p style={{ margin: 0, fontSize: 13, color: C.secondary, fontFamily: FONT }}>
-        Klienten meddelas via e-post. Åtgärden kan inte ångras.
-      </p>
-      <div style={{ display: 'flex', gap: 8 }}>
-        <button
-          onClick={handleCancel}
-          disabled={loading}
-          style={{
-            padding: '8px 16px',
-            background: loading ? C.muted : C.errorText,
-            color: '#ffffff',
-            border: 'none',
-            borderRadius: 6,
-            fontFamily: FONT,
-            fontSize: 13,
-            fontWeight: 600,
-            cursor: loading ? 'not-allowed' : 'pointer',
-          }}
-        >
-          {loading ? 'Avbokar…' : 'Bekräfta avbokning'}
-        </button>
-        <button
-          onClick={() => setExpanded(false)}
-          style={{
-            padding: '8px 16px',
-            background: 'transparent',
-            color: C.secondary,
-            border: `1px solid ${C.border}`,
-            borderRadius: 6,
-            fontFamily: FONT,
-            fontSize: 13,
-            cursor: 'pointer',
-          }}
-        >
-          Avbryt
-        </button>
-      </div>
-    </div>
+    <Alert variant="danger" title={t('booking.bookingDetail.cancelTitle')}>
+      <View gap="s">
+        <Text color="secondary">{t('booking.bookingDetail.cancelBody')}</Text>
+        <View layout="row" gap="s">
+          <Button variant="danger" disabled={loading} onClick={handleCancel}>{loading ? t('booking.bookingDetail.cancelling') : t('booking.bookingDetail.cancelConfirm')}</Button>
+          <Button variant="neutral" onClick={() => setExpanded(false)}>{t('booking.bookingDetail.cancelButton')}</Button>
+        </View>
+      </View>
+    </Alert>
   )
 }
 
-// ---------------------------------------------------------------------------
-// Page
-// ---------------------------------------------------------------------------
-export default function BookingDetailPage({ bookingId: bookingIdProp }) {
+export default function BookingDetailPage ({ bookingId: bookingIdProp }) {
+  const { t, language } = useLocale()
   const router = useRouter()
   const bookingId = bookingIdProp ?? router?.params?.bookingId
-
   const [booking, setBooking] = useState(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
   const [actionError, setActionError] = useState(null)
 
+  const statusLabel = useMemo(() => ({
+    pending: t('booking.bookingDetail.status.pending'),
+    confirmed: t('booking.bookingDetail.status.confirmed'),
+    cancelled: t('booking.bookingDetail.status.cancelled'),
+  }), [t])
+
   const loadBooking = useCallback(async () => {
     if (!bookingId) return
-    setLoading(true)
-    setError(null)
+    setLoading(true); setError(null)
     try {
-      const res = await fetch('/actions/booking/list', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({}),
-      })
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data?.message ?? `Fel ${res.status}`)
-      }
+      const res = await fetch('/actions/booking/list', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({}) })
+      if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data?.message ?? t('booking.bookingDetail.errorStatus', { status: res.status })) }
       const all = await res.json()
       const found = all.find(b => b.id === bookingId)
-      if (!found) throw new Error('Bokningen hittades inte')
+      if (!found) throw new Error(t('booking.bookingDetail.notFound'))
       setBooking(found)
-    } catch (err) {
-      setError(err.message)
-    } finally {
-      setLoading(false)
-    }
-  }, [bookingId])
+    } catch (err) { setError(err.message) } finally { setLoading(false) }
+  }, [bookingId, t])
 
-  useEffect(() => {
-    loadBooking()
-  }, [loadBooking])
+  useEffect(() => { loadBooking() }, [loadBooking])
 
-  const handleSuccess = () => {
-    setActionError(null)
-    loadBooking()
-  }
-
-  const goBack = () => {
-    if (window.history.length > 1) window.history.back()
-    else window.location.href = '/bokningar'
-  }
+  const goBack = () => { if (window.history.length > 1) window.history.back(); else window.location.href = '/bokningar' }
 
   return (
-    <div
-      style={{
-        fontFamily: FONT,
-        height: '100%',
-        overflowY: 'auto',
-        background: C.bg,
-        padding: 'var(--space-m, 16px) var(--space-l, 24px)',
-        boxSizing: 'border-box',
-      }}
-    >
-      {/* Back link */}
-      <button
-        onClick={goBack}
-        style={{
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer',
-          color: C.secondary,
-          fontFamily: FONT,
-          fontSize: 13,
-          padding: 0,
-          marginBottom: 20,
-          display: 'flex',
-          alignItems: 'center',
-          gap: 4,
-        }}
-      >
-        ← Alla bokningar
-      </button>
-
+    <View gap="m" surface="primary" style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}>
+      <Button variant="link" onClick={goBack}>{t('booking.bookingDetail.back')}</Button>
       {loading ? (
-        <Spinner />
+        <Text color="secondary" style={{ textAlign: 'center', padding: 'var(--space-l)' }}>{t('booking.bookingDetail.loading')}</Text>
       ) : error ? (
-        <div
-          style={{
-            padding: 24,
-            background: C.surface,
-            border: `1px solid ${C.border}`,
-            borderRadius: 12,
-            fontSize: 14,
-            color: C.errorText,
-            fontFamily: FONT,
-            textAlign: 'center',
-          }}
-        >
-          {error}
-        </div>
+        <Alert variant="danger">{error}</Alert>
       ) : booking ? (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 680 }}>
-          {/* Header card */}
-          <div
-            style={{
-              background: C.surface,
-              border: `1px solid ${C.border}`,
-              borderRadius: 12,
-              padding: '24px 28px',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 16,
-            }}
-          >
-            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
-              <div>
-                <h1 style={{ margin: 0, fontSize: 20, fontWeight: 700, color: C.primary }}>
-                  {booking.clientName ?? '—'}
-                </h1>
-                <p style={{ margin: '4px 0 0', fontSize: 14, color: C.secondary }}>
-                  {booking.clientEmail ?? ''}
-                </p>
-              </div>
-              <StatusBadge status={booking.status} />
-            </div>
-
-            <div
-              style={{
-                height: 1,
-                background: C.border,
-              }}
-            />
-
-            {/* Details */}
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-              <DetailRow label="Datum och tid" value={formatDateTime(booking.startsAt)} />
-              <DetailRow label="Längd" value={formatDuration(booking.duration)} />
+        <View gap="m" style={{ maxWidth: 680 }}>
+          <View gap="m" surface="secondary" roundness="m" inset="l">
+            <View layout="row" justifyContent="space-between" alignItems="flex-start" gap="m" style={{ flexWrap: 'wrap' }}>
+              <View gap="xs">
+                <Title variant="secondary">{booking.clientName ?? '—'}</Title>
+                {booking.clientEmail && <Text color="secondary">{booking.clientEmail}</Text>}
+              </View>
+              <Badge label={statusLabel[booking.status] ?? booking.status} variant={STATUS_VARIANT[booking.status] ?? 'neutral'} />
+            </View>
+            <View gap="s">
+              <DetailRow label={t('booking.bookingDetail.label.dateTime')} value={formatDateTime(booking.startsAt, language)} />
+              <DetailRow label={t('booking.bookingDetail.label.duration')} value={formatDuration(booking.duration, t)} />
               {booking.clientMessage && (
-                <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-                  <span
-                    style={{
-                      width: 120,
-                      flexShrink: 0,
-                      fontSize: 13,
-                      fontWeight: 600,
-                      color: C.secondary,
-                      fontFamily: FONT,
-                      paddingTop: 1,
-                    }}
-                  >
-                    Meddelande
-                  </span>
-                  <div
-                    style={{
-                      flex: 1,
-                      fontSize: 14,
-                      color: C.primary,
-                      fontFamily: FONT,
-                      background: '#fafafa',
-                      borderRadius: 6,
-                      padding: '10px 14px',
-                      borderLeft: `3px solid ${C.border}`,
-                      whiteSpace: 'pre-wrap',
-                    }}
-                  >
-                    {booking.clientMessage}
-                  </div>
-                </div>
+                <View gap="xs">
+                  <Text weight="medium" color="secondary">{t('booking.bookingDetail.label.message')}</Text>
+                  <View surface="primary" roundness="s" inset="s" style={{ borderLeft: '3px solid var(--separator)' }}>
+                    <Text style={{ whiteSpace: 'pre-wrap' }}>{booking.clientMessage}</Text>
+                  </View>
+                </View>
               )}
-            </div>
-          </div>
-
-          {/* Actions card — only shown for pending or confirmed */}
+            </View>
+          </View>
           {(booking.status === 'pending' || booking.status === 'confirmed') && (
-            <div
-              style={{
-                background: C.surface,
-                border: `1px solid ${C.border}`,
-                borderRadius: 12,
-                padding: '20px 28px',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 12,
-              }}
-            >
-              <h2 style={{ margin: 0, fontSize: 15, fontWeight: 600, color: C.primary }}>
-                {booking.status === 'pending' ? 'Hantera förfrågan' : 'Hantera bokning'}
-              </h2>
-
-              {actionError && (
-                <div style={{ fontSize: 13, color: C.errorText, fontFamily: FONT }}>
-                  {actionError}
-                </div>
-              )}
-
+            <View gap="s" surface="secondary" roundness="m" inset="l">
+              <Title variant="tertiary">{booking.status === 'pending' ? t('booking.bookingDetail.manageRequest') : t('booking.bookingDetail.manageBooking')}</Title>
+              {actionError && <Alert variant="danger">{actionError}</Alert>}
               {booking.status === 'pending' && (
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-                  <ConfirmForm
-                    booking={booking}
-                    onSuccess={handleSuccess}
-                    onError={setActionError}
-                  />
-                  <DeclineForm
-                    booking={booking}
-                    onSuccess={handleSuccess}
-                    onError={setActionError}
-                  />
-                </div>
+                <View gap="s">
+                  <ConfirmForm booking={booking} onSuccess={() => { setActionError(null); loadBooking() }} onError={setActionError} t={t} />
+                  <DeclineForm booking={booking} onSuccess={() => { setActionError(null); loadBooking() }} onError={setActionError} t={t} />
+                </View>
               )}
-
               {booking.status === 'confirmed' && (
-                <CancelForm
-                  booking={booking}
-                  onSuccess={handleSuccess}
-                  onError={setActionError}
-                />
+                <CancelForm booking={booking} onSuccess={() => { setActionError(null); loadBooking() }} onError={setActionError} t={t} />
               )}
-            </div>
+            </View>
           )}
-        </div>
+        </View>
       ) : null}
-    </div>
+    </View>
   )
 }