initial commit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/admin/components/dashboard/DashActivityFeed.tsx

@@ -0,0 +1,80 @@
+import { Link } from 'react-router-dom'
+import { ENTITY_TYPE_LABELS, getActivityIconClass, formatActivityTime } from '../../utils/dashboardHelpers'
+
+interface Activity {
+  id: number | string
+  action: string
+  description: string
+  username?: string
+  entity_type: string
+  created_at: string
+}
+
+interface DashActivityFeedProps {
+  activities: Activity[] | null
+}
+
+function getActivityIcon(action: string) {
+  switch (action) {
+    case 'create':
+      return (
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
+        </svg>
+      )
+    case 'update':
+      return (
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+        </svg>
+      )
+    case 'delete':
+      return (
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+        </svg>
+      )
+    case 'login':
+      return (
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" /><polyline points="10 17 15 12 10 7" /><line x1="15" y1="12" x2="3" y2="12" />
+        </svg>
+      )
+    default:
+      return (
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" />
+        </svg>
+      )
+  }
+}
+
+export default function DashActivityFeed({ activities }: DashActivityFeedProps) {
+  if (!activities) {
+    return null
+  }
+
+  return (
+    <div className="admin-card dash-activity-card">
+      <div className="admin-card-header flex-between">
+        <h2 className="admin-card-title">Audit log</h2>
+        <Link to="/audit-log" className="admin-btn admin-btn-primary admin-btn-sm">Detail &rarr;</Link>
+      </div>
+      <div className="admin-card-body" style={{ padding: 0 }}>
+        {activities.map((act) => (
+          <div key={act.id} className="dash-activity-row">
+            <div className={`dash-activity-icon ${getActivityIconClass(act.action)}`}>
+              {getActivityIcon(act.action)}
+            </div>
+            <div className="dash-activity-main">
+              <div className="dash-activity-text">{act.description}</div>
+              <div className="dash-activity-sub">{act.username || 'Systém'} · {ENTITY_TYPE_LABELS[act.entity_type] || act.entity_type}</div>
+            </div>
+            <div className="dash-activity-time admin-mono">{formatActivityTime(act.created_at)}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

src/admin/components/dashboard/DashAttendanceToday.tsx

@@ -0,0 +1,50 @@
+import { Link } from 'react-router-dom'
+import { LEAVE_TYPE_LABELS, STATUS_DOT_CLASS, STATUS_LABELS } from '../../utils/dashboardHelpers'
+
+interface AttendanceUser {
+  user_id: number | string
+  name: string
+  initials?: string
+  status: string
+  leave_type?: string
+  arrived_at?: string
+}
+
+interface AttendanceData {
+  users: AttendanceUser[]
+}
+
+interface DashAttendanceTodayProps {
+  attendance: AttendanceData | null
+}
+
+export default function DashAttendanceToday({ attendance }: DashAttendanceTodayProps) {
+  if (!attendance) {
+    return null
+  }
+
+  return (
+    <div className="admin-card dash-attendance-card">
+      <div className="admin-card-header flex-between">
+        <h2 className="admin-card-title">Docházka dnes</h2>
+        <Link to="/attendance/admin" className="admin-btn admin-btn-primary admin-btn-sm">Detail &rarr;</Link>
+      </div>
+      <div className="admin-card-body" style={{ padding: 0 }}>
+        {attendance.users.map((u, i) => (
+          <div key={`${u.user_id}-${i}`} className="dash-presence-row">
+            <div className={`dash-presence-avatar ${STATUS_DOT_CLASS[u.status]}`}>
+              {u.initials || '?'}
+            </div>
+            <div className="dash-presence-name">{u.name}</div>
+            <div className="dash-presence-end">
+              <span className={`dash-presence-label ${STATUS_DOT_CLASS[u.status]}`}>
+                {u.status === 'leave' ? (LEAVE_TYPE_LABELS[u.leave_type || ''] || 'Nepřítomen') : STATUS_LABELS[u.status]}
+              </span>
+              {u.arrived_at && <span className="admin-mono dash-presence-time">{u.arrived_at}</span>}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

src/admin/components/dashboard/DashKpiCards.tsx

@@ -0,0 +1,130 @@
+import { motion } from 'framer-motion'
+import { formatCurrency } from '../../utils/formatters'
+
+interface KpiCard {
+  label: string
+  value: string
+  sub?: string
+  color: string
+  footer: string | null
+}
+
+interface RevenueItem {
+  amount: number
+  currency: string
+}
+
+interface InvoicesData {
+  revenue_this_month: RevenueItem[]
+  revenue_czk?: number | null
+  unpaid_count: number
+}
+
+interface DashData {
+  attendance?: {
+    present_today: number
+    total_active: number
+    on_leave: number
+  }
+  offers?: {
+    open_count: number
+    created_this_month: number
+  }
+  invoices?: InvoicesData
+  leave_pending?: {
+    count: number
+  }
+}
+
+interface DashKpiCardsProps {
+  dashData: DashData | null
+}
+
+function buildKpiCards(dashData: DashData | null): KpiCard[] {
+  const cards: KpiCard[] = []
+  if (dashData?.attendance) {
+    cards.push({
+      label: 'Přítomní dnes',
+      value: `${dashData.attendance.present_today}`,
+      sub: `/ ${dashData.attendance.total_active}`,
+      color: 'success',
+      footer: dashData.attendance.on_leave > 0 ? `${dashData.attendance.on_leave} nepřítomných` : null,
+    })
+  }
+  if (dashData?.offers) {
+    cards.push({
+      label: 'Otevřené nabídky',
+      value: `${dashData.offers.open_count}`,
+      color: 'info',
+      footer: dashData.offers.created_this_month > 0 ? `${dashData.offers.created_this_month} tento měsíc` : null,
+    })
+  }
+  if (dashData?.invoices) {
+    cards.push(buildInvoiceKpi(dashData.invoices))
+  }
+  if (dashData?.leave_pending) {
+    cards.push({
+      label: 'Žádosti o volno',
+      value: `${dashData.leave_pending.count}`,
+      color: 'danger',
+      footer: dashData.leave_pending.count > 0 ? 'čeká na schválení' : null,
+    })
+  }
+  return cards
+}
+
+function buildInvoiceKpi(invoices: InvoicesData): KpiCard {
+  const rev = invoices.revenue_this_month || []
+  const hasForeign = rev.some(r => r.currency !== 'CZK')
+  const hasCzkTotal = hasForeign && invoices.revenue_czk !== null && invoices.revenue_czk !== undefined
+  const fallbackText = rev.length > 0
+    ? rev.map(r => formatCurrency(r.amount, r.currency)).join(' · ')
+    : '0 Kč'
+  const revenueText = hasCzkTotal
+    ? formatCurrency(invoices.revenue_czk!, 'CZK')
+    : fallbackText
+  const detailText = hasForeign && rev.length > 0
+    ? rev.map(r => formatCurrency(r.amount, r.currency)).join(' · ')
+    : null
+  const unpaidText = invoices.unpaid_count > 0
+    ? `${invoices.unpaid_count} neuhrazených`
+    : null
+  const footerParts = [detailText, unpaidText].filter(Boolean)
+  return {
+    label: 'Tržby (měsíc)',
+    value: revenueText,
+    color: 'warning',
+    footer: footerParts.length > 0 ? footerParts.join(' · ') : null,
+  }
+}
+
+const KPI_CLASS_MAP: Record<number, string> = { 4: 'dash-kpi-4', 3: 'dash-kpi-3', 2: 'dash-kpi-2', 1: 'dash-kpi-1' }
+
+export default function DashKpiCards({ dashData }: DashKpiCardsProps) {
+  const kpiCards = buildKpiCards(dashData)
+  if (kpiCards.length === 0) {
+    return null
+  }
+
+  const kpiClass = KPI_CLASS_MAP[Math.min(kpiCards.length, 4)] || 'dash-kpi-4'
+
+  return (
+    <motion.div
+      className={`dash-kpi-grid ${kpiClass}`}
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.25, delay: 0.06 }}
+    >
+      {kpiCards.map((kpi) => (
+        <div key={kpi.label} className={`admin-stat-card ${kpi.color}`}>
+          <div className="admin-stat-label">{kpi.label}</div>
+          <div className="admin-stat-value admin-mono">
+            {kpi.value}
+            {kpi.sub && <small className="text-muted" style={{ fontSize: '0.75em', fontWeight: 500, marginLeft: '0.25rem' }}>{kpi.sub}</small>}
+          </div>
+          {kpi.footer && <div className="admin-stat-footer">{kpi.footer}</div>}
+        </div>
+      ))}
+    </motion.div>
+  )
+}

src/admin/components/dashboard/DashProfile.tsx

@@ -0,0 +1,344 @@
+import { useState, useRef } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { useAuth } from '../../context/AuthContext'
+import { useAlert } from '../../context/AlertContext'
+import useModalLock from '../../hooks/useModalLock'
+import apiFetch from '../../utils/api'
+
+const API_BASE = '/api/admin'
+
+interface DashProfileProps {
+  totpEnabled: boolean
+  totpLoading: boolean
+  totpSubmitting: boolean
+  onStart2FASetup: () => void
+  onConfirm2FA: () => void
+  onDisable2FA: () => void
+  totpSecret: string | null
+  totpQrUri: string | null
+  totpCode: string
+  setTotpCode: (code: string) => void
+  backupCodes: string[] | null
+  setBackupCodes: (codes: string[] | null) => void
+  show2FASetup: boolean
+  setShow2FASetup: (show: boolean) => void
+  show2FADisable: boolean
+  setShow2FADisable: (show: boolean) => void
+  disableCode: string
+  setDisableCode: (code: string) => void
+}
+
+interface ProfileFormData {
+  username: string
+  email: string
+  new_password: string
+  current_password: string
+  first_name: string
+  last_name: string
+}
+
+export default function DashProfile({
+  totpEnabled, totpLoading, totpSubmitting,
+  onStart2FASetup, onConfirm2FA, onDisable2FA,
+  totpSecret, totpQrUri, totpCode, setTotpCode,
+  backupCodes, setBackupCodes,
+  show2FASetup, setShow2FASetup,
+  show2FADisable, setShow2FADisable,
+  disableCode, setDisableCode,
+}: DashProfileProps) {
+  const { user, updateUser } = useAuth()
+  const alert = useAlert()
+  const totpSetupRef = useRef<HTMLInputElement>(null)
+
+  const [showModal, setShowModal] = useState(false)
+  const [formData, setFormData] = useState<ProfileFormData>({
+    username: '', email: '', new_password: '', current_password: '', first_name: '', last_name: ''
+  })
+
+  useModalLock(showModal)
+
+  const openEditModal = () => {
+    const nameParts = (user?.fullName || '').split(' ')
+    setFormData({
+      username: user?.username || '',
+      email: user?.email || '',
+      new_password: '',
+      current_password: '',
+      first_name: nameParts[0] || '',
+      last_name: nameParts.slice(1).join(' ') || ''
+    })
+    setShowModal(true)
+  }
+
+  const handleSubmit = async (e?: React.FormEvent) => {
+    e?.preventDefault()
+    const dataToSave = { ...formData }
+    try {
+      const response = await apiFetch(`${API_BASE}/profile`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(dataToSave)
+      })
+      const data = await response.json()
+      if (data.success) {
+        updateUser({
+          username: dataToSave.username,
+          email: dataToSave.email,
+          fullName: `${dataToSave.first_name} ${dataToSave.last_name}`.trim()
+        })
+        setShowModal(false)
+        await new Promise(resolve => setTimeout(resolve, 300))
+        alert.success('Profil byl upraven')
+      } else {
+        alert.error(data.error || 'Nepodařilo se uložit profil')
+      }
+    } catch {
+      alert.error('Chyba připojení')
+    }
+  }
+
+  function getTotpStatusText(): string {
+    if (totpLoading) {
+      return 'Načítání...'
+    }
+    return totpEnabled ? 'Aktivní' : 'Neaktivní'
+  }
+
+  return (
+    <>
+      <motion.div
+        className="admin-card"
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.25, delay: 0.15 }}
+      >
+        <div className="admin-card-header flex-between">
+          <h2 className="admin-card-title">Váš účet</h2>
+          <button onClick={openEditModal} className="admin-btn admin-btn-secondary admin-btn-sm">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+            </svg>
+            Upravit
+          </button>
+        </div>
+        <div className="admin-card-body">
+          <div className="dash-profile-grid">
+            <div className="dash-profile-item">
+              <span className="dash-profile-label">Uživatel</span>
+              <span className="dash-profile-value">{user?.username}</span>
+            </div>
+            <div className="dash-profile-item">
+              <span className="dash-profile-label">E-mail</span>
+              <span className="dash-profile-value">{user?.email}</span>
+            </div>
+            <div className="dash-profile-item">
+              <span className="dash-profile-label">Jméno</span>
+              <span className="dash-profile-value">{user?.fullName}</span>
+            </div>
+            <div className="dash-profile-item">
+              <span className="dash-profile-label">Role</span>
+              <span className="dash-profile-value">{user?.roleDisplay || String(user?.role || '')}</span>
+            </div>
+          </div>
+
+          {/* 2FA Section */}
+          <div style={{ borderTop: '1px solid var(--border-color)', marginTop: '1rem', paddingTop: '1rem' }}>
+            <div className="flex-between">
+              <div className="flex-row-gap">
+                <div style={{
+                  width: 36, height: 36, borderRadius: '50%',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  background: totpEnabled ? 'var(--success-light)' : 'rgba(var(--text-secondary-rgb, 107, 114, 128), 0.1)',
+                  color: totpEnabled ? 'var(--success)' : 'var(--text-secondary)'
+                }}>
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                  </svg>
+                </div>
+                <div>
+                  <div style={{ fontWeight: 500, fontSize: '0.875rem' }}>Dvoufaktorové ověření (2FA)</div>
+                  <div className={totpEnabled ? 'text-success' : 'text-secondary'} style={{ fontSize: '0.75rem' }}>
+                    {getTotpStatusText()}
+                  </div>
+                </div>
+              </div>
+              {!totpLoading && (
+                totpEnabled ? (
+                  <button onClick={() => { setDisableCode(''); setShow2FADisable(true) }} className="admin-btn admin-btn-primary admin-btn-sm">
+                    Deaktivovat
+                  </button>
+                ) : (
+                  <button onClick={onStart2FASetup} disabled={totpSubmitting} className="admin-btn admin-btn-primary admin-btn-sm">
+                    {totpSubmitting ? 'Generuji...' : 'Aktivovat'}
+                  </button>
+                )
+              )}
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Edit Profile Modal */}
+      <AnimatePresence>
+        {showModal && (
+          <motion.div className="admin-modal-overlay" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.2 }}>
+            <div className="admin-modal-backdrop" onClick={() => setShowModal(false)} />
+            <motion.div className="admin-modal" initial={{ opacity: 0, scale: 0.95, y: 20 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95, y: 20 }} transition={{ duration: 0.2 }}>
+              <div className="admin-modal-header"><h2 className="admin-modal-title">Upravit profil</h2></div>
+              <div className="admin-modal-body">
+                <div className="admin-form">
+                  <div className="admin-form-row">
+                    <div className="admin-form-group">
+                      <label className="admin-form-label">Jméno</label>
+                      <input type="text" value={formData.first_name} onChange={(e) => setFormData({ ...formData, first_name: e.target.value })} required className="admin-form-input" />
+                    </div>
+                    <div className="admin-form-group">
+                      <label className="admin-form-label">Příjmení</label>
+                      <input type="text" value={formData.last_name} onChange={(e) => setFormData({ ...formData, last_name: e.target.value })} required className="admin-form-input" />
+                    </div>
+                  </div>
+                  <div className="admin-form-group">
+                    <label className="admin-form-label">Uživatelské jméno</label>
+                    <input type="text" value={formData.username} onChange={(e) => setFormData({ ...formData, username: e.target.value })} required className="admin-form-input" />
+                  </div>
+                  <div className="admin-form-group">
+                    <label className="admin-form-label">E-mail</label>
+                    <input type="email" value={formData.email} onChange={(e) => setFormData({ ...formData, email: e.target.value })} required className="admin-form-input" />
+                  </div>
+                  <div className="admin-form-group">
+                    <label className="admin-form-label">Nové heslo (ponechte prázdné pro zachování stávajícího)</label>
+                    <input type="password" value={formData.new_password} onChange={(e) => setFormData({ ...formData, new_password: e.target.value })} className="admin-form-input" />
+                  </div>
+                  {formData.new_password && (
+                    <div className="admin-form-group">
+                      <label className="admin-form-label required">Aktuální heslo</label>
+                      <input type="password" value={formData.current_password} onChange={(e) => setFormData({ ...formData, current_password: e.target.value })} className="admin-form-input" placeholder="Zadejte aktuální heslo pro potvrzení" />
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="admin-modal-footer">
+                <button type="button" onClick={() => setShowModal(false)} className="admin-btn admin-btn-secondary">Zrušit</button>
+                <button type="button" onClick={handleSubmit} className="admin-btn admin-btn-primary">Uložit změny</button>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* 2FA Setup Modal */}
+      <AnimatePresence>
+        {show2FASetup && (
+          <motion.div className="admin-modal-overlay" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.2 }}>
+            <div className="admin-modal-backdrop" onClick={() => { if (!backupCodes) { setShow2FASetup(false) } }} />
+            <motion.div className="admin-modal" initial={{ opacity: 0, scale: 0.95, y: 20 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95, y: 20 }} transition={{ duration: 0.2 }}>
+              <div className="admin-modal-header">
+                <h2 className="admin-modal-title">{backupCodes ? 'Záložní kódy' : 'Nastavení 2FA'}</h2>
+              </div>
+              <div className="admin-modal-body">
+                {backupCodes ? (
+                  <div>
+                    <div className="admin-role-locked-notice mb-4">
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+                        <line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" />
+                      </svg>
+                      Uložte si tyto kódy na bezpečné místo. Každý kód lze použít pouze jednou. Po zavření tohoto okna je již neuvidíte.
+                    </div>
+                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '0.5rem', padding: '1rem', background: 'var(--bg-secondary)', borderRadius: '0.5rem', fontFamily: 'monospace', fontSize: '1rem' }}>
+                      {backupCodes.map((code) => (
+                        <div key={code} style={{ padding: '0.25rem 0.5rem', textAlign: 'center', color: 'var(--text-primary)' }}>{code}</div>
+                      ))}
+                    </div>
+                    <div style={{ marginTop: '0.75rem' }}>
+                      <button onClick={() => { navigator.clipboard?.writeText(backupCodes.join('\n')); alert.success('Kódy zkopírovány') }} className="admin-btn admin-btn-secondary admin-btn-sm">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                        </svg>
+                        Kopírovat kódy
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <div>
+                    <p className="text-secondary" style={{ fontSize: '0.875rem', marginBottom: '1rem' }}>
+                      Naskenujte QR kód v autentizační aplikaci (Google Authenticator, Authy, Microsoft Authenticator apod.)
+                    </p>
+                    {totpQrUri && (
+                      <div style={{ textAlign: 'center', marginBottom: '1rem' }}>
+                        <img
+                          src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(totpQrUri)}`}
+                          alt="TOTP QR Code"
+                          style={{ width: 200, height: 200, borderRadius: '0.5rem', border: '1px solid var(--border-color)' }}
+                        />
+                      </div>
+                    )}
+                    {totpSecret && (
+                      <div className="mb-4">
+                        <label className="admin-form-label" style={{ fontSize: '0.75rem' }}>Nebo zadejte klíč ručně:</label>
+                        <div style={{ padding: '0.5rem 0.75rem', background: 'var(--bg-secondary)', borderRadius: '0.375rem', fontFamily: 'monospace', fontSize: '0.875rem', wordBreak: 'break-all', color: 'var(--text-primary)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.5rem' }}>
+                          <span>{totpSecret}</span>
+                          <button onClick={() => { navigator.clipboard?.writeText(totpSecret); alert.success('Klíč zkopírován') }} className="admin-btn-icon" title="Kopírovat" aria-label="Kopírovat" style={{ flexShrink: 0 }}>
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                              <rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                    <div className="admin-form-group">
+                      <label className="admin-form-label">Ověřovací kód z aplikace</label>
+                      <input ref={totpSetupRef} type="text" inputMode="numeric" pattern="[0-9]*" maxLength={6} value={totpCode} onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, ''))} placeholder="000000" className="admin-form-input" style={{ textAlign: 'center', fontSize: '1.25rem', letterSpacing: '0.4rem', fontFamily: 'monospace' }} onKeyDown={(e) => { if (e.key === 'Enter' && totpCode.length === 6) { onConfirm2FA() } }} />
+                    </div>
+                  </div>
+                )}
+              </div>
+              <div className="admin-modal-footer">
+                {backupCodes ? (
+                  <button onClick={() => { setShow2FASetup(false); setBackupCodes(null) }} className="admin-btn admin-btn-primary">
+                    Rozumím, uložil jsem si kódy
+                  </button>
+                ) : (
+                  <>
+                    <button onClick={() => setShow2FASetup(false)} className="admin-btn admin-btn-secondary" disabled={totpSubmitting}>Zrušit</button>
+                    <button onClick={onConfirm2FA} className="admin-btn admin-btn-primary" disabled={totpSubmitting || totpCode.length !== 6}>
+                      {totpSubmitting ? 'Ověřuji...' : 'Aktivovat 2FA'}
+                    </button>
+                  </>
+                )}
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* 2FA Disable Modal */}
+      <AnimatePresence>
+        {show2FADisable && (
+          <motion.div className="admin-modal-overlay" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.2 }}>
+            <div className="admin-modal-backdrop" onClick={() => setShow2FADisable(false)} />
+            <motion.div className="admin-modal" initial={{ opacity: 0, scale: 0.95, y: 20 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95, y: 20 }} transition={{ duration: 0.2 }}>
+              <div className="admin-modal-header"><h2 className="admin-modal-title">Deaktivovat 2FA</h2></div>
+              <div className="admin-modal-body">
+                <p style={{ color: 'var(--text-secondary)', fontSize: '0.875rem', marginBottom: '1rem' }}>
+                  Pro deaktivaci dvoufaktorového ověření zadejte aktuální kód z autentizační aplikace.
+                </p>
+                <div className="admin-form-group">
+                  <label className="admin-form-label">Ověřovací kód</label>
+                  <input type="text" inputMode="numeric" pattern="[0-9]*" maxLength={6} value={disableCode} onChange={(e) => setDisableCode(e.target.value.replace(/\D/g, ''))} placeholder="000000" className="admin-form-input" style={{ textAlign: 'center', fontSize: '1.25rem', letterSpacing: '0.4rem', fontFamily: 'monospace' }} onKeyDown={(e) => { if (e.key === 'Enter' && disableCode.length === 6) { onDisable2FA() } }} autoFocus />
+                </div>
+              </div>
+              <div className="admin-modal-footer">
+                <button onClick={() => setShow2FADisable(false)} className="admin-btn admin-btn-secondary" disabled={totpSubmitting}>Zrušit</button>
+                <button onClick={onDisable2FA} className="admin-btn admin-btn-primary" disabled={totpSubmitting || disableCode.length !== 6}>
+                  {totpSubmitting ? 'Deaktivuji...' : 'Deaktivovat 2FA'}
+                </button>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  )
+}

src/admin/components/dashboard/DashQuickActions.tsx

@@ -0,0 +1,378 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { motion, AnimatePresence } from 'framer-motion'
+import { useAuth } from '../../context/AuthContext'
+import { useAlert } from '../../context/AlertContext'
+import { formatKm } from '../../utils/formatters'
+import AdminDatePicker from '../AdminDatePicker'
+import apiFetch from '../../utils/api'
+import useModalLock from '../../hooks/useModalLock'
+
+const API_BASE = '/api/admin'
+
+interface Vehicle {
+  id: number | string
+  spz: string
+  name: string
+}
+
+interface TripForm {
+  vehicle_id: string
+  trip_date: string
+  start_km: string
+  end_km: string
+  route_from: string
+  route_to: string
+  is_business: number
+  notes: string
+}
+
+interface TripErrors {
+  vehicle_id?: string
+  trip_date?: string
+  start_km?: string
+  end_km?: string
+  route_from?: string
+  route_to?: string
+}
+
+interface DashQuickActionsProps {
+  dashData: {
+    my_shift?: {
+      has_ongoing: boolean
+    }
+  } | null
+  punching: boolean
+  onPunch: () => void
+}
+
+export default function DashQuickActions({ dashData, punching, onPunch }: DashQuickActionsProps) {
+  const { hasPermission } = useAuth()
+  const alert = useAlert()
+
+  const [showTripModal, setShowTripModal] = useState(false)
+  const [tripSubmitting, setTripSubmitting] = useState(false)
+  const [tripVehicles, setTripVehicles] = useState<Vehicle[]>([])
+  const [tripForm, setTripForm] = useState<TripForm>({
+    vehicle_id: '', trip_date: '', start_km: '', end_km: '',
+    route_from: '', route_to: '', is_business: 1, notes: ''
+  })
+  const [tripErrors, setTripErrors] = useState<TripErrors>({})
+
+  useModalLock(showTripModal)
+
+  const openTripModal = async () => {
+    setTripForm({
+      vehicle_id: '', trip_date: new Date().toISOString().split('T')[0],
+      start_km: '', end_km: '', route_from: '', route_to: '',
+      is_business: 1, notes: ''
+    })
+    setTripErrors({})
+    setShowTripModal(true)
+
+    try {
+      const response = await apiFetch(`${API_BASE}/vehicles`)
+      const result = await response.json()
+      if (result.success) {
+        setTripVehicles(Array.isArray(result.data) ? result.data : result.data?.vehicles || [])
+      }
+    } catch {
+      // vozidla se nenacetla
+    }
+  }
+
+  const handleTripVehicleChange = async (vehicleId: string) => {
+    setTripForm(prev => ({ ...prev, vehicle_id: vehicleId }))
+    if (!vehicleId) {
+      return
+    }
+    try {
+      const response = await apiFetch(`${API_BASE}/trips/last-km/${vehicleId}`)
+      const result = await response.json()
+      if (result.success) {
+        setTripForm(prev => ({ ...prev, start_km: result.data.last_km }))
+      }
+    } catch {
+      // last_km se nenacetlo
+    }
+  }
+
+  const handleTripSubmit = async () => {
+    const errs: TripErrors = {}
+    if (!tripForm.vehicle_id) {
+      errs.vehicle_id = 'Vyberte vozidlo'
+    }
+    if (!tripForm.trip_date) {
+      errs.trip_date = 'Zadejte datum'
+    }
+    if (!tripForm.start_km) {
+      errs.start_km = 'Zadejte počáteční km'
+    }
+    if (!tripForm.end_km) {
+      errs.end_km = 'Zadejte konečný km'
+    }
+    if (tripForm.start_km && tripForm.end_km && parseInt(tripForm.end_km) <= parseInt(tripForm.start_km)) {
+      errs.end_km = 'Musí být větší než počáteční'
+    }
+    if (!tripForm.route_from) {
+      errs.route_from = 'Zadejte místo odjezdu'
+    }
+    if (!tripForm.route_to) {
+      errs.route_to = 'Zadejte místo příjezdu'
+    }
+    setTripErrors(errs)
+    if (Object.keys(errs).length > 0) {
+      return
+    }
+
+    setTripSubmitting(true)
+    try {
+      const response = await apiFetch(`${API_BASE}/trips`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(tripForm)
+      })
+      const result = await response.json()
+      if (result.success) {
+        setShowTripModal(false)
+        alert.success(result.message)
+      } else {
+        alert.error(result.error)
+      }
+    } catch {
+      alert.error('Chyba připojení')
+    } finally {
+      setTripSubmitting(false)
+    }
+  }
+
+  const tripDistance = (): number => {
+    const s = parseInt(tripForm.start_km) || 0
+    const e = parseInt(tripForm.end_km) || 0
+    return e > s ? e - s : 0
+  }
+
+  const hasOngoingShift = dashData?.my_shift?.has_ongoing
+  const punchLabel = hasOngoingShift ? 'Zaznamenat odchod' : 'Zaznamenat příchod'
+  const quickActions: Array<{
+    label: string
+    color: string
+    icon: React.ReactNode
+    onClick?: () => void
+    path?: string
+    disabled?: boolean
+  }> = []
+
+  if (hasPermission('attendance.record')) {
+    quickActions.push({
+      label: punching ? 'Odesílám...' : punchLabel,
+      color: hasOngoingShift ? 'danger' : 'success',
+      icon: hasOngoingShift
+        ? <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><polyline points="16 17 21 12 16 7" /><line x1="21" y1="12" x2="9" y2="12" /></svg>
+        : <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 12l2 2 4-4" /><circle cx="12" cy="12" r="10" /></svg>,
+      onClick: onPunch,
+      disabled: punching,
+    })
+  }
+  if (hasPermission('offers.create')) {
+    quickActions.push({ label: 'Nová nabídka', path: '/offers/new', color: 'info', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /></svg> })
+  }
+  if (hasPermission('trips.record')) {
+    quickActions.push({
+      label: 'Přidat jízdu',
+      color: 'warning',
+      icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="1" y="3" width="15" height="13" rx="2" /><circle cx="8.5" cy="16" r="2.5" /><circle cx="18.5" cy="16" r="2.5" /><path d="M16 8h4l3 5v3h-7" /></svg>,
+      onClick: openTripModal,
+    })
+  }
+  if (hasPermission('invoices.create')) {
+    quickActions.push({ label: 'Vystavit fakturu', path: '/invoices/new', color: 'danger', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></svg> })
+  }
+
+  return (
+    <>
+      <motion.div
+        className="dash-quick-actions"
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.25, delay: 0.08 }}
+      >
+        {quickActions.map((action) => action.onClick ? (
+          <button
+            key={action.label}
+            onClick={action.onClick}
+            disabled={action.disabled}
+            className={`dash-quick-btn dash-quick-btn-${action.color}`}
+          >
+            {action.icon}
+            <span>{action.label}</span>
+          </button>
+        ) : (
+          <Link key={action.label} to={action.path!} className={`dash-quick-btn dash-quick-btn-${action.color}`}>
+            {action.icon}
+            <span>{action.label}</span>
+          </Link>
+        ))}
+      </motion.div>
+
+      <AnimatePresence>
+        {showTripModal && (
+          <motion.div
+            className="admin-modal-overlay"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            <div className="admin-modal-backdrop" onClick={() => setShowTripModal(false)} />
+            <motion.div
+              className="admin-modal admin-modal-lg"
+              initial={{ opacity: 0, scale: 0.95, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: 20 }}
+              transition={{ duration: 0.2 }}
+            >
+              <div className="admin-modal-header">
+                <h2 className="admin-modal-title">Přidat jízdu</h2>
+              </div>
+              <div className="admin-modal-body">
+                <div className="admin-form">
+                  <div className="admin-form-row">
+                    <div className={`admin-form-group${tripErrors.vehicle_id ? ' has-error' : ''}`}>
+                      <label className="admin-form-label required">Vozidlo</label>
+                      <select
+                        value={tripForm.vehicle_id}
+                        onChange={(e) => {
+                          handleTripVehicleChange(e.target.value)
+                          setTripErrors(prev => ({ ...prev, vehicle_id: undefined }))
+                        }}
+                        className="admin-form-select"
+                      >
+                        <option value="">Vyberte vozidlo</option>
+                        {tripVehicles.map((v) => (
+                          <option key={v.id} value={v.id}>{v.spz} - {v.name}</option>
+                        ))}
+                      </select>
+                      {tripErrors.vehicle_id && <span className="admin-form-error">{tripErrors.vehicle_id}</span>}
+                    </div>
+                    <div className={`admin-form-group${tripErrors.trip_date ? ' has-error' : ''}`}>
+                      <label className="admin-form-label required">Datum jízdy</label>
+                      <AdminDatePicker
+                        mode="date"
+                        value={tripForm.trip_date}
+                        onChange={(val: string) => {
+                          setTripForm(prev => ({ ...prev, trip_date: val }))
+                          setTripErrors(prev => ({ ...prev, trip_date: undefined }))
+                        }}
+                      />
+                      {tripErrors.trip_date && <span className="admin-form-error">{tripErrors.trip_date}</span>}
+                    </div>
+                  </div>
+
+                  <div className="admin-form-row admin-form-row-3">
+                    <div className={`admin-form-group${tripErrors.start_km ? ' has-error' : ''}`}>
+                      <label className="admin-form-label required">Počáteční stav km</label>
+                      <input
+                        type="number"
+                        inputMode="numeric"
+                        value={tripForm.start_km}
+                        onChange={(e) => {
+                          setTripForm(prev => ({ ...prev, start_km: e.target.value }))
+                          setTripErrors(prev => ({ ...prev, start_km: undefined }))
+                        }}
+                        className="admin-form-input"
+                        min="0"
+                      />
+                      {tripErrors.start_km && <span className="admin-form-error">{tripErrors.start_km}</span>}
+                    </div>
+                    <div className={`admin-form-group${tripErrors.end_km ? ' has-error' : ''}`}>
+                      <label className="admin-form-label required">Konečný stav km</label>
+                      <input
+                        type="number"
+                        inputMode="numeric"
+                        value={tripForm.end_km}
+                        onChange={(e) => {
+                          setTripForm(prev => ({ ...prev, end_km: e.target.value }))
+                          setTripErrors(prev => ({ ...prev, end_km: undefined }))
+                        }}
+                        className="admin-form-input"
+                        min="0"
+                      />
+                      {tripErrors.end_km && <span className="admin-form-error">{tripErrors.end_km}</span>}
+                    </div>
+                    <div className="admin-form-group">
+                      <label className="admin-form-label">Vzdálenost</label>
+                      <input type="text" value={`${formatKm(tripDistance())} km`} className="admin-form-input" readOnly disabled />
+                    </div>
+                  </div>
+
+                  <div className="admin-form-row">
+                    <div className={`admin-form-group${tripErrors.route_from ? ' has-error' : ''}`}>
+                      <label className="admin-form-label required">Místo odjezdu</label>
+                      <input
+                        type="text"
+                        value={tripForm.route_from}
+                        onChange={(e) => {
+                          setTripForm(prev => ({ ...prev, route_from: e.target.value }))
+                          setTripErrors(prev => ({ ...prev, route_from: undefined }))
+                        }}
+                        className="admin-form-input"
+                        placeholder="Např. Praha"
+                      />
+                      {tripErrors.route_from && <span className="admin-form-error">{tripErrors.route_from}</span>}
+                    </div>
+                    <div className={`admin-form-group${tripErrors.route_to ? ' has-error' : ''}`}>
+                      <label className="admin-form-label required">Místo příjezdu</label>
+                      <input
+                        type="text"
+                        value={tripForm.route_to}
+                        onChange={(e) => {
+                          setTripForm(prev => ({ ...prev, route_to: e.target.value }))
+                          setTripErrors(prev => ({ ...prev, route_to: undefined }))
+                        }}
+                        className="admin-form-input"
+                        placeholder="Např. Brno"
+                      />
+                      {tripErrors.route_to && <span className="admin-form-error">{tripErrors.route_to}</span>}
+                    </div>
+                  </div>
+
+                  <div className="admin-form-group">
+                    <label className="admin-form-label">Typ jízdy</label>
+                    <select
+                      value={tripForm.is_business}
+                      onChange={(e) => setTripForm(prev => ({ ...prev, is_business: parseInt(e.target.value) }))}
+                      className="admin-form-select"
+                    >
+                      <option value={1}>Služební</option>
+                      <option value={0}>Soukromá</option>
+                    </select>
+                  </div>
+
+                  <div className="admin-form-group">
+                    <label className="admin-form-label">Poznámky</label>
+                    <textarea
+                      value={tripForm.notes}
+                      onChange={(e) => setTripForm(prev => ({ ...prev, notes: e.target.value }))}
+                      className="admin-form-textarea"
+                      rows={2}
+                      placeholder="Volitelné poznámky..."
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="admin-modal-footer">
+                <button type="button" onClick={() => setShowTripModal(false)} className="admin-btn admin-btn-secondary" disabled={tripSubmitting}>
+                  Zrušit
+                </button>
+                <button type="button" onClick={handleTripSubmit} className="admin-btn admin-btn-primary" disabled={tripSubmitting}>
+                  {tripSubmitting ? 'Ukládám...' : 'Uložit'}
+                </button>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  )
+}

src/admin/components/dashboard/DashSessions.tsx

@@ -0,0 +1,218 @@
+import { useState, useEffect, useCallback } from 'react'
+import { motion } from 'framer-motion'
+import { useAlert } from '../../context/AlertContext'
+import ConfirmModal from '../ConfirmModal'
+import useModalLock from '../../hooks/useModalLock'
+import apiFetch from '../../utils/api'
+import { formatSessionDate } from '../../utils/dashboardHelpers'
+
+const API_BASE = '/api/admin'
+
+interface DeviceInfo {
+  icon?: string
+  browser?: string
+  os?: string
+}
+
+interface Session {
+  id: number | string
+  is_current: boolean
+  device_info?: DeviceInfo
+  ip_address: string
+  created_at: string
+}
+
+interface DeleteModalState {
+  isOpen: boolean
+  session: Session | null
+}
+
+function getDeviceIcon(iconType?: string) {
+  switch (iconType) {
+    case 'smartphone':
+      return (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <rect x="5" y="2" width="14" height="20" rx="2" ry="2" /><line x1="12" y1="18" x2="12" y2="18" />
+        </svg>
+      )
+    case 'tablet':
+      return (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <rect x="4" y="2" width="16" height="20" rx="2" ry="2" /><line x1="12" y1="18" x2="12" y2="18" />
+        </svg>
+      )
+    default:
+      return (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+          <line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" />
+        </svg>
+      )
+  }
+}
+
+export default function DashSessions() {
+  const alert = useAlert()
+
+  const [sessions, setSessions] = useState<Session[]>([])
+  const [sessionsLoading, setSessionsLoading] = useState(true)
+  const [deleteModal, setDeleteModal] = useState<DeleteModalState>({ isOpen: false, session: null })
+  const [deleteAllModal, setDeleteAllModal] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+
+  useModalLock(deleteAllModal)
+
+  const fetchSessions = useCallback(async () => {
+    try {
+      const response = await apiFetch(`${API_BASE}/sessions`)
+      const data = await response.json()
+      if (data.success) {
+        setSessions(Array.isArray(data.data) ? data.data : data.data?.sessions || [])
+      }
+    } catch {
+      // session fetch failed silently
+    } finally {
+      setSessionsLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchSessions()
+  }, [fetchSessions])
+
+  const handleDeleteSession = async () => {
+    if (!deleteModal.session) {
+      return
+    }
+    const sessionId = deleteModal.session.id
+    setDeleting(true)
+    try {
+      const response = await apiFetch(`${API_BASE}/sessions/${sessionId}`, { method: 'DELETE' })
+      const data = await response.json()
+      if (data.success) {
+        setDeleteModal({ isOpen: false, session: null })
+        setSessions(prev => prev.filter(s => s.id !== sessionId))
+        alert.success('Relace byla ukončena')
+      } else {
+        alert.error(data.error || 'Nepodařilo se ukončit relaci')
+      }
+    } catch {
+      alert.error('Chyba připojení')
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  const handleDeleteAllSessions = async () => {
+    setDeleting(true)
+    try {
+      const response = await apiFetch(`${API_BASE}/sessions?action=all`, { method: 'DELETE' })
+      const data = await response.json()
+      if (data.success) {
+        setDeleteAllModal(false)
+        setSessions(prev => prev.filter(s => s.is_current))
+        alert.success(data.message || 'Ostatní relace byly ukončeny')
+      } else {
+        alert.error(data.error || 'Nepodařilo se ukončit relace')
+      }
+    } catch {
+      alert.error('Chyba připojení')
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  return (
+    <>
+      <motion.div
+        className="admin-card"
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.25, delay: 0.15 }}
+      >
+        <div className="admin-card-header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.75rem' }}>
+          <h2 className="admin-card-title">Přihlášená zařízení</h2>
+          {sessions.filter(s => !s.is_current).length > 0 && (
+            <button onClick={() => setDeleteAllModal(true)} className="admin-btn admin-btn-secondary admin-btn-sm">
+              Odhlásit ostatní
+            </button>
+          )}
+        </div>
+        <div className="admin-card-body" style={{ padding: 0 }}>
+          {sessionsLoading && (
+            <div className="admin-skeleton" style={{ padding: '1rem', gap: '1rem' }}>
+              {[0, 1, 2].map(i => (
+                <div key={i} className="admin-skeleton-row">
+                  <div className="admin-skeleton-line circle" />
+                  <div className="flex-1">
+                    <div className="admin-skeleton-line w-1/2" style={{ marginBottom: '0.5rem' }} />
+                    <div className="admin-skeleton-line w-1/3" style={{ height: '10px' }} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+          {!sessionsLoading && sessions.length === 0 && (
+            <div className="text-secondary" style={{ padding: '1.5rem', textAlign: 'center', fontSize: '0.875rem' }}>
+              Žádné aktivní relace
+            </div>
+          )}
+          {!sessionsLoading && sessions.length > 0 && (
+            <div className="sessions-list">
+              {sessions.map((session) => (
+                <div key={session.id} className={`session-item ${session.is_current ? 'session-item-current' : ''}`}>
+                  <div className="session-icon">{getDeviceIcon(session.device_info?.icon)}</div>
+                  <div className="session-info">
+                    <div className="session-device">
+                      {session.device_info?.browser} na {session.device_info?.os}
+                      {session.is_current && (
+                        <span className="admin-badge admin-badge-success" style={{ marginLeft: '0.5rem' }}>Aktuální</span>
+                      )}
+                    </div>
+                    <div className="session-meta">
+                      <span>{session.ip_address}</span>
+                      <span className="session-meta-separator">|</span>
+                      <span>{formatSessionDate(session.created_at)}</span>
+                    </div>
+                  </div>
+                  <div className="session-actions">
+                    {!session.is_current && (
+                      <button onClick={() => setDeleteModal({ isOpen: true, session })} className="admin-btn-icon danger" title="Ukončit relaci" aria-label="Ukončit relaci">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><polyline points="16 17 21 12 16 7" /><line x1="21" y1="12" x2="9" y2="12" />
+                        </svg>
+                      </button>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </motion.div>
+
+      <ConfirmModal
+        isOpen={deleteModal.isOpen}
+        onClose={() => setDeleteModal({ isOpen: false, session: null })}
+        onConfirm={handleDeleteSession}
+        title="Ukončit relaci"
+        message={`Opravdu chcete ukončit relaci na zařízení "${deleteModal.session?.device_info?.browser} na ${deleteModal.session?.device_info?.os}"? Toto zařízení bude odhlášeno.`}
+        confirmText="Ukončit"
+        cancelText="Zrušit"
+        type="danger"
+        loading={deleting}
+      />
+      <ConfirmModal
+        isOpen={deleteAllModal}
+        onClose={() => setDeleteAllModal(false)}
+        onConfirm={handleDeleteAllSessions}
+        title="Odhlásit ostatní zařízení"
+        message="Opravdu chcete ukončit všechny ostatní relace? Budete odhlášeni ze všech zařízení kromě tohoto."
+        confirmText="Odhlásit vše"
+        cancelText="Zrušit"
+        type="warning"
+        loading={deleting}
+      />
+    </>
+  )
+}