@consilioweb/payload-support 0.8.1 → 0.9.4

package/src/views/TicketInboxView/client.tsx

@@ -71,6 +71,15 @@ export const TicketInboxClient: React.FC = () => {
     if (urlTab && ['all', 'open', 'waiting_client', 'resolved'].includes(urlTab)) return urlTab as Tab
     return 'all'
   })
+  // Sync tab with URL searchParams on navigation
+  useEffect(() => {
+    const urlTab = searchParams.get('tab')
+    if (urlTab && ['all', 'open', 'waiting_client', 'resolved'].includes(urlTab)) {
+      setTab(urlTab as Tab)
+    } else if (!urlTab) {
+      setTab('all')
+    }
+  }, [searchParams])
   const [search, setSearch] = useState('')
   const [sort, setSort] = useState('-updatedAt')
   const [counts, setCounts] = useState({ all: 0, open: 0, waiting: 0, resolved: 0 })
@@ -152,7 +161,7 @@ export const TicketInboxClient: React.FC = () => {
     fetchCounts()
   }, [])
 
-  // Auto-refresh 60s
+  // Auto-refresh 30s
   useEffect(() => {
     const iv = setInterval(fetchTickets, 60000)
     return () => clearInterval(iv)
@@ -179,78 +188,57 @@ export const TicketInboxClient: React.FC = () => {
     { key: 'resolved', label: t('inbox.tabs.resolved'), count: counts.resolved },
   ]
 
-  const S: Record<string, React.CSSProperties> = {
-    page: { padding: '20px 30px', maxWidth: 1100, margin: '0 auto' },
-    header: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 },
-    title: { fontSize: 24, fontWeight: 700, margin: 0, color: 'var(--theme-text)' },
-    headerRight: { display: 'flex', gap: 10, alignItems: 'center' },
-    searchWrap: { position: 'relative' as const, display: 'flex', alignItems: 'center' },
-    searchInput: { padding: '6px 12px 6px 30px', borderRadius: 8, border: '1px solid var(--theme-elevation-200)', fontSize: 13, background: 'var(--theme-elevation-0)', color: 'var(--theme-text)', width: 200 },
-    newTicketBtn: { padding: '7px 14px', borderRadius: 8, background: '#2563eb', color: '#fff', fontSize: 13, fontWeight: 600, textDecoration: 'none', whiteSpace: 'nowrap' as const },
-    tabsRow: { display: 'flex', gap: 4, marginBottom: 12, borderBottom: '1px solid var(--theme-elevation-200)', paddingBottom: 8 },
-    tab: { padding: '6px 12px', borderRadius: 6, border: 'none', background: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--theme-elevation-500)', fontWeight: 500 },
-    tabActive: { background: 'var(--theme-elevation-100)', color: 'var(--theme-text)', fontWeight: 700 },
-    sortRow: { display: 'flex', alignItems: 'center', marginBottom: 12 },
-    sortSelect: { padding: '4px 10px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, background: 'var(--theme-elevation-0)', color: 'var(--theme-text)', cursor: 'pointer' },
-    loading: { padding: 40, textAlign: 'center' as const, color: '#94a3b8' },
-    empty: { padding: 60, textAlign: 'center' as const, color: '#94a3b8' },
-    list: { display: 'flex', flexDirection: 'column' as const, gap: 1 },
-    row: { display: 'grid', gridTemplateColumns: '20px 10px 60px 70px 1fr 140px 80px 4px 50px 10px', gap: 8, alignItems: 'center', padding: '10px 12px', borderRadius: 8, textDecoration: 'none', color: 'var(--theme-text)', fontSize: 13, cursor: 'pointer', transition: 'background 100ms', background: 'var(--theme-elevation-0)' },
-    rowHover: { background: 'var(--theme-elevation-50)' },
-    statusDot: { width: 8, height: 8, borderRadius: '50%' },
-    priorityBar: { width: 4, height: 20, borderRadius: 2 },
-    unreadDot: { width: 8, height: 8, borderRadius: '50%', background: '#2563eb' },
-    keyboardHints: { display: 'flex', gap: 12, marginTop: 16, fontSize: 11, color: 'var(--theme-elevation-400)' },
-  }
-
   return (
-    <div style={S.page}>
+    <div className={s.page}>
       {/* Header */}
-      <div style={S.header}>
-        <h1 style={S.title}>{t('inbox.title')}</h1>
-        <div style={S.headerRight}>
-          <div style={S.searchWrap}>
+      <div className={s.header}>
+        <h1 className={s.title}>{t('inbox.title')}</h1>
+        <div className={s.headerRight}>
+          <div className={s.searchWrap}>
+            <svg className={s.searchIcon} width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.5"/><path d="M11 11l3.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
             <input
               type="text"
-              style={S.searchInput}
+              className={s.searchInput}
               placeholder={t('inbox.searchPlaceholder')}
               value={search}
               onChange={(e) => setSearch(e.target.value)}
             />
+            <span className={s.searchHint}>&#8984;K</span>
           </div>
-          <Link href="/admin/support/new-ticket" style={S.newTicketBtn}>{t('inbox.newTicketBtn')}</Link>
+          <Link href="/admin/support/new-ticket" className={s.newTicketBtn}>{t('inbox.newTicketBtn')}</Link>
         </div>
       </div>
 
       {/* Tabs */}
-      <div style={S.tabsRow}>
-        {tabs.map((tb) => (
+      <div className={s.tabs}>
+        {tabs.map((tk) => (
           <button
-            key={tb.key}
-            style={{ ...S.tab, ...(tab === tb.key ? S.tabActive : {}) }}
-            onClick={() => { setTab(tb.key); setSelectedIdx(-1) }}
+            key={tk.key}
+            className={`${s.tab} ${tab === tk.key ? s.tabActive : ''}`}
+            onClick={() => { setTab(tk.key); setSelectedIdx(-1) }}
           >
-            {tb.label} <span style={{ opacity: 0.6 }}>({tb.count})</span>
+            {tk.label}
+            <span className={s.tabCount}>({tk.count})</span>
           </button>
         ))}
       </div>
 
       {/* Sort + Bulk */}
-      <div style={S.sortRow}>
+      <div className={s.sortRow}>
         {checkedIds.size > 0 ? (
           <div style={{ display: 'flex', gap: 8, alignItems: 'center', flex: 1 }}>
             <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--theme-text)' }}>{checkedIds.size > 1 ? t('inbox.selectedPlural', { count: String(checkedIds.size) }) : t('inbox.selected', { count: String(checkedIds.size) })}</span>
-            <button style={S.sortSelect} onClick={() => handleBulkAction('close')} disabled={bulkProcessing}>{t('inbox.closeAction')}</button>
-            <button style={S.sortSelect} onClick={() => handleBulkAction('reopen')} disabled={bulkProcessing}>{t('inbox.reopenAction')}</button>
-            <select style={S.sortSelect} value={bulkAction} onChange={(e) => { if (e.target.value) handleBulkAction(e.target.value); setBulkAction('') }}>
+            <button className={s.sortSelect} onClick={() => handleBulkAction('close')} disabled={bulkProcessing}>{t('inbox.closeAction')}</button>
+            <button className={s.sortSelect} onClick={() => handleBulkAction('reopen')} disabled={bulkProcessing}>{t('inbox.reopenAction')}</button>
+            <select className={s.sortSelect} value={bulkAction} onChange={(e) => { if (e.target.value) handleBulkAction(e.target.value); setBulkAction('') }}>
               <option value="">{t('inbox.moreActions')}</option>
               <option value="set_priority">{t('inbox.changePriority')}</option>
               <option value="delete">{t('inbox.deleteAction')}</option>
             </select>
-            <button style={{ ...S.sortSelect, marginLeft: 'auto' }} onClick={() => setCheckedIds(new Set())}>{t('inbox.deselect')}</button>
+            <button className={s.sortSelect} onClick={() => setCheckedIds(new Set())} style={{ marginLeft: 'auto' }}>{t('inbox.deselect')}</button>
           </div>
         ) : (
-          <select style={S.sortSelect} value={sort} onChange={(e) => setSort(e.target.value)}>
+          <select className={s.sortSelect} value={sort} onChange={(e) => setSort(e.target.value)}>
             <option value="-updatedAt">{t('inbox.sort.newest')}</option>
             <option value="updatedAt">{t('inbox.sort.oldest')}</option>
             <option value="-createdAt">{t('inbox.sort.created')}</option>
@@ -261,16 +249,19 @@ export const TicketInboxClient: React.FC = () => {
 
       {/* List */}
       {loading ? (
-        <div style={S.loading}>{t('common.loading')}</div>
+        <div className={s.loading}>{t('common.loading')}</div>
       ) : tickets.length === 0 ? (
-        <div style={S.empty}>{t('inbox.empty')}</div>
+        <div className={s.empty}>
+          <div className={s.emptyIcon}>--</div>
+          <div className={s.emptyText}>{t('inbox.empty')}</div>
+        </div>
       ) : (
-        <div style={S.list}>
+        <div className={s.list}>
           {tickets.map((tk, idx) => {
             const clientObj = typeof tk.client === 'object' ? tk.client : null
             const clientName = clientObj ? `${clientObj.firstName || ''} ${clientObj.lastName || ''}`.trim() : ''
             const clientCompany = clientObj?.company || ''
-            const displayClient = clientName ? `${clientName}${clientCompany ? `, ${clientCompany}` : ''}` : '--'
+            const displayClient = clientName ? `${clientName}${clientCompany ? `, ${clientCompany}` : ''}` : '—'
             const isUnread = tk.lastClientMessageAt && (!tk.lastAdminReadAt || new Date(tk.lastClientMessageAt) > new Date(tk.lastAdminReadAt))
             const priorityColor = PRIORITY_COLORS[tk.priority] || 'transparent'
 
@@ -278,7 +269,7 @@ export const TicketInboxClient: React.FC = () => {
               <a
                 key={tk.id}
                 href={`/admin/support/ticket?id=${tk.id}`}
-                style={{ ...S.row, ...(idx === selectedIdx ? { background: 'var(--theme-elevation-100)' } : {}) }}
+                className={`${s.row} ${idx === selectedIdx ? s.rowSelected : ''}`}
                 onClick={(e) => { e.preventDefault(); window.location.href = `/admin/support/ticket?id=${tk.id}` }}
               >
                 <input
@@ -288,15 +279,15 @@ export const TicketInboxClient: React.FC = () => {
                   onChange={() => toggleCheck(tk.id)}
                   style={{ width: 14, height: 14, cursor: 'pointer', accentColor: '#2563eb' }}
                 />
-                <div style={{ ...S.statusDot, backgroundColor: STATUS_DOTS[tk.status] || '#94a3b8' }} />
-                <span style={{ fontSize: 11, color: 'var(--theme-elevation-500)' }}>{STATUS_LABEL_KEYS[tk.status] ? t(STATUS_LABEL_KEYS[tk.status]) : tk.status}</span>
-                <span style={{ fontWeight: 600, fontSize: 12, color: 'var(--theme-elevation-400)' }}>{tk.ticketNumber}</span>
-                <span style={{ fontWeight: 500 }}>{tk.subject}</span>
-                <span style={{ fontSize: 12, color: 'var(--theme-elevation-500)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{displayClient}</span>
-                {tk.category ? <span style={{ fontSize: 11, color: 'var(--theme-elevation-400)' }}>[{CATEGORY_LABEL_KEYS[tk.category] ? t(CATEGORY_LABEL_KEYS[tk.category]) : tk.category}]</span> : <span />}
-                <div style={{ ...S.priorityBar, backgroundColor: priorityColor }} />
-                <span style={{ fontSize: 11, color: 'var(--theme-elevation-400)', textAlign: 'right' }}>{relativeTime(tk.updatedAt)}</span>
-                {isUnread ? <div style={S.unreadDot} /> : <span />}
+                <div className={s.statusDot} style={{ backgroundColor: STATUS_DOTS[tk.status] || '#94a3b8' }} />
+                <span className={s.statusText}>{t(STATUS_LABEL_KEYS[tk.status] || 'ticket.status.open')}</span>
+                <span className={s.ticketNum}>{tk.ticketNumber}</span>
+                <span className={s.subject}>{tk.subject}</span>
+                <span className={s.client}>{displayClient}</span>
+                {tk.category ? <span className={s.categoryChip}>[{t(CATEGORY_LABEL_KEYS[tk.category] || 'ticket.category.bug')}]</span> : <span />}
+                <div className={s.priorityBar} style={{ backgroundColor: priorityColor }} />
+                <span className={s.timeAgo}>{relativeTime(tk.updatedAt)}</span>
+                {isUnread ? <div className={s.unreadDot} /> : <span />}
               </a>
             )
           })}
@@ -304,9 +295,9 @@ export const TicketInboxClient: React.FC = () => {
       )}
 
       {/* Keyboard hints */}
-      <div style={S.keyboardHints}>
-        <span><kbd>&#8593;</kbd><kbd>&#8595;</kbd> {t('inbox.keyboardNavigate')}</span>
-        <span><kbd>&#8629;</kbd> {t('inbox.keyboardOpen')}</span>
+      <div className={s.keyboardHints}>
+        <span><kbd>↑</kbd><kbd>↓</kbd> {t('inbox.keyboardNavigate')}</span>
+        <span><kbd>↵</kbd> {t('inbox.keyboardOpen')}</span>
       </div>
     </div>
   )

package/src/views/TicketingSettingsView/client.tsx

@@ -5,7 +5,8 @@ import { Settings, Mail, Bot, Clock, Timer, Globe, FileSignature } from 'lucide-
 import { V, btnStyle } from '../shared/adminTokens'
 import { AdminViewHeader } from '../shared/AdminViewHeader'
 import { getFeatures, saveFeatures, DEFAULT_FEATURES, type TicketingFeatures } from '../../components/TicketConversation/config'
-import ts from './TicketingSettings.module.scss'
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import ts from '../../styles/TicketingSettings.module.scss'
 
 /* ============================================
  * Types
@@ -293,6 +294,7 @@ const FieldRow: React.FC<{
  * ============================================ */
 
 export const TicketingSettingsClient: React.FC = () => {
+  const { t } = useTranslation()
   const [features, setFeatures] = useState<TicketingFeatures>(() => getFeatures())
   const [settings, setSettings] = useState<AllSettings>(DEFAULT_SETTINGS)
   const [signature, setSignature] = useState('')
@@ -379,34 +381,33 @@ export const TicketingSettingsClient: React.FC = () => {
     <div className={ts.page}>
       <AdminViewHeader
         icon={<Settings size={24} />}
-        title="Configuration du module Support"
-        subtitle={`${enabledCount}/${totalCount} fonctionnalites activees`}
+        title={t('settingsView.configTitle')}
+        subtitle={t('settings.subtitle', { enabled: String(enabledCount), total: String(totalCount) })}
         actions={
           <div style={{ display: 'flex', gap: 8 }}>
             <button onClick={handleReset} style={btnStyle('var(--theme-elevation-400)', { small: true })}>
-              Reinitialiser
+              {t('settingsView.reset')}
             </button>
             <button
               onClick={handleSave}
               disabled={saving}
               style={btnStyle(saved ? V.green : V.blue, { small: true })}
             >
-              {saving ? '...' : saved ? '\u2713 Sauvegarde' : 'Sauvegarder'}
+              {saving ? '...' : saved ? t('settingsView.saved') : t('common.save')}
             </button>
           </div>
         }
       />
 
       <p className={ts.intro}>
-        Configurez le module de support : fonctionnalités, email, IA, SLA et fermeture automatique.
-        Les changements prennent effet immédiatement après sauvegarde (rechargez la page du ticket).
+        {t('settingsView.intro')}
       </p>
 
       {/* ========================================
        * SECTION 1 — Feature Flags
        * ======================================== */}
       <CollapsibleSection
-        title="Fonctionnalités"
+        title={t('settingsView.features')}
         icon={<Settings size={16} />}
         color={V.blue}
         badge={
@@ -416,7 +417,7 @@ export const TicketingSettingsClient: React.FC = () => {
         }
       >
         <p className={ts.sectionDescription}>
-          Activez ou desactivez les fonctionnalites du module. Les fonctionnalites desactivees sont completement masquees de l&apos;interface.
+          {t('settingsView.featuresDescription')}
         </p>
 
         {CATEGORIES.map((cat) => {

package/src/views/TimeDashboardView/client.tsx

@@ -1,8 +1,10 @@
+/* eslint-disable @next/next/no-html-link-for-pages */
 'use client'
 
 import React, { useState, useEffect, useCallback } from 'react'
+import { SkeletonDashboard } from '../shared/Skeleton'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
-import s from '../../styles/TimeDashboard.module.scss'
+import styles from '../../styles/TimeDashboard.module.scss'
 
 interface TimeEntry {
   id: number
@@ -12,11 +14,32 @@ interface TimeEntry {
   date: string
 }
 
-interface GroupedData { label: string; entries: TimeEntry[]; totalMinutes: number }
+interface GroupedData {
+  label: string
+  entries: TimeEntry[]
+  totalMinutes: number
+}
+
+function formatDuration(minutes: number): string {
+  const h = Math.floor(minutes / 60)
+  const m = minutes % 60
+  if (h === 0) return `${m}min`
+  if (m === 0) return `${h}h`
+  return `${h}h${m}m`
+}
+
+function getWeekNumber(d: Date): number {
+  const oneJan = new Date(d.getFullYear(), 0, 1)
+  return Math.ceil(((d.getTime() - oneJan.getTime()) / 86400000 + oneJan.getDay() + 1) / 7)
+}
+
+function getMonthRange(offset: number): { from: string; to: string } {
+  const now = new Date()
+  const start = new Date(now.getFullYear(), now.getMonth() + offset, 1)
+  const end = new Date(now.getFullYear(), now.getMonth() + offset + 1, 0)
+  return { from: start.toISOString().split('T')[0], to: end.toISOString().split('T')[0] }
+}
 
-function formatDuration(minutes: number): string { const h = Math.floor(minutes / 60); const m = minutes % 60; if (h === 0) return `${m}min`; if (m === 0) return `${h}h`; return `${h}h${m}m` }
-function getWeekNumber(d: Date): number { const oneJan = new Date(d.getFullYear(), 0, 1); return Math.ceil(((d.getTime() - oneJan.getTime()) / 86400000 + oneJan.getDay() + 1) / 7) }
-function getMonthRange(offset: number): { from: string; to: string } { const now = new Date(); const start = new Date(now.getFullYear(), now.getMonth() + offset, 1); const end = new Date(now.getFullYear(), now.getMonth() + offset + 1, 0); return { from: start.toISOString().split('T')[0], to: end.toISOString().split('T')[0] } }
 const MONTHS_FR = ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec']
 
 export const TimeDashboardClient: React.FC = () => {
@@ -30,113 +53,205 @@ export const TimeDashboardClient: React.FC = () => {
   const fetchEntries = useCallback(async () => {
     setLoading(true)
     try {
-      const params = new URLSearchParams({ limit: '500', depth: '2', sort: '-date' })
+      const params = new URLSearchParams({
+        limit: '500',
+        depth: '2',
+        sort: '-date',
+      })
       if (from) params.set('where[date][greater_than_equal]', from)
       if (to) params.set('where[date][less_than_equal]', to)
+
       const res = await fetch(`/api/time-entries?${params}`)
-      if (res.ok) { const json = await res.json(); setEntries(json.docs || []) }
+      if (res.ok) {
+        const json = await res.json()
+        setEntries(json.docs || [])
+      }
     } catch { /* silent */ }
     setLoading(false)
   }, [from, to])
 
-  useEffect(() => { fetchEntries() }, [fetchEntries])
+  useEffect(() => {
+    fetchEntries()
+  }, [fetchEntries])
 
   const totalMinutes = entries.reduce((sum, e) => sum + (e.duration || 0), 0)
+  const totalEntries = entries.length
 
+  // Group entries
   const grouped: GroupedData[] = React.useMemo(() => {
     const map = new Map<string, TimeEntry[]>()
+
     for (const entry of entries) {
       let key: string
-      if (groupBy === 'day') { key = entry.date ? entry.date.split('T')[0] : 'Sans date' }
-      else if (groupBy === 'week') { const d = new Date(entry.date); key = `Semaine ${getWeekNumber(d)} (${MONTHS_FR[d.getMonth()]} ${d.getFullYear()})` }
-      else { const ticket = typeof entry.ticket === 'object' ? entry.ticket : null; const project = ticket && typeof ticket.project === 'object' ? ticket.project : null; key = project?.name || 'Sans projet' }
+      if (groupBy === 'day') {
+        key = entry.date ? entry.date.split('T')[0] : 'Sans date'
+      } else if (groupBy === 'week') {
+        const d = new Date(entry.date)
+        key = `Semaine ${getWeekNumber(d)} (${MONTHS_FR[d.getMonth()]} ${d.getFullYear()})`
+      } else {
+        const ticket = typeof entry.ticket === 'object' ? entry.ticket : null
+        const project = ticket && typeof ticket.project === 'object' ? ticket.project : null
+        key = project?.name || 'Sans projet'
+      }
+
       if (!map.has(key)) map.set(key, [])
       map.get(key)!.push(entry)
     }
-    return Array.from(map.entries()).map(([label, items]) => ({ label, entries: items, totalMinutes: items.reduce((sum, e) => sum + (e.duration || 0), 0) }))
+
+    return Array.from(map.entries()).map(([label, items]) => ({
+      label,
+      entries: items,
+      totalMinutes: items.reduce((sum, e) => sum + (e.duration || 0), 0),
+    }))
   }, [entries, groupBy])
 
+  // Daily chart data (last 30 days)
   const dailyChart = React.useMemo(() => {
     const dayMap = new Map<string, number>()
-    for (const entry of entries) { const day = entry.date ? entry.date.split('T')[0] : null; if (day) dayMap.set(day, (dayMap.get(day) || 0) + (entry.duration || 0)) }
-    return Array.from(dayMap.entries()).sort(([a], [b]) => a.localeCompare(b)).slice(-30).map(([day, mins]) => ({ day, minutes: mins }))
+    for (const entry of entries) {
+      const day = entry.date ? entry.date.split('T')[0] : null
+      if (day) {
+        dayMap.set(day, (dayMap.get(day) || 0) + (entry.duration || 0))
+      }
+    }
+    return Array.from(dayMap.entries())
+      .sort(([a], [b]) => a.localeCompare(b))
+      .slice(-30)
+      .map(([day, mins]) => ({ day, minutes: mins }))
   }, [entries])
 
   const maxDailyMinutes = Math.max(...dailyChart.map((d) => d.minutes), 1)
-  const setPeriod = (range: { from: string; to: string }) => { setFrom(range.from); setTo(range.to) }
-
-  const S: Record<string, React.CSSProperties> = {
-    page: { padding: '20px 30px', maxWidth: 1100, margin: '0 auto' },
-    btn: { padding: '6px 12px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, cursor: 'pointer', background: 'var(--theme-elevation-0)', color: 'var(--theme-text)' },
-    btnPrimary: { padding: '6px 12px', borderRadius: 6, border: 'none', fontSize: 12, cursor: 'pointer', background: '#2563eb', color: '#fff', fontWeight: 600 },
-    kpis: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 20 },
-    kpiCard: { padding: '16px 20px', borderRadius: 10, border: '1px solid var(--theme-elevation-150)' },
-    groupCard: { marginBottom: 12, borderRadius: 10, border: '1px solid var(--theme-elevation-150)', overflow: 'hidden' },
-    groupHeader: { display: 'flex', justifyContent: 'space-between', padding: '10px 16px', background: 'var(--theme-elevation-50)', borderBottom: '1px solid var(--theme-elevation-150)' },
-    table: { width: '100%', borderCollapse: 'collapse' as const, fontSize: 12 },
-    td: { padding: '6px 8px', borderBottom: '1px solid var(--theme-elevation-100)' },
+
+  const setPeriod = (range: { from: string; to: string }) => {
+    setFrom(range.from)
+    setTo(range.to)
   }
 
   return (
-    <div style={S.page}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
-        <div>
-          <h1 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>{t('timeDashboard.title')}</h1>
-          <p style={{ fontSize: 13, color: 'var(--theme-elevation-500)', margin: '4px 0 0' }}>{t('timeDashboard.subtitle')}</p>
+    <div className={styles.page}>
+      {/* Header */}
+      <div className={styles.header}>
+        <div className={styles.headerLeft}>
+          <h1 className={styles.title}>{t('timeDashboard.title')}</h1>
+          <p className={styles.subtitle}>{t('timeDashboard.subtitle')}</p>
         </div>
-        <a href="/admin/collections/time-entries/create" style={{ ...S.btnPrimary, textDecoration: 'none', display: 'inline-block' }}>{t('timeDashboard.newEntry')}</a>
+        <a href="/admin/collections/time-entries/create" className={styles.newEntryBtn}>
+          {t('timeDashboard.newEntry')}
+        </a>
       </div>
 
-      <div style={{ marginBottom: 16 }}>
-        <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
-          <button style={S.btnPrimary} onClick={() => setPeriod(getMonthRange(0))}>{t('timeDashboard.filters.thisMonth')}</button>
-          <button style={S.btn} onClick={() => setPeriod(getMonthRange(-1))}>{t('timeDashboard.filters.lastMonth')}</button>
-          <button style={S.btn} onClick={() => setPeriod(getMonthRange(-2))}>{t('timeDashboard.filters.twoMonthsAgo')}</button>
+      {/* Filters */}
+      <div className={styles.filters}>
+        <div className={styles.quickPeriod}>
+          <button className={styles.btnPrimary} onClick={() => setPeriod(getMonthRange(0))}>{t('timeDashboard.filters.thisMonth')}</button>
+          <button className={styles.btnSecondary} onClick={() => setPeriod(getMonthRange(-1))}>{t('timeDashboard.filters.lastMonth')}</button>
+          <button className={styles.btnAmber} onClick={() => setPeriod(getMonthRange(-2))}>{t('timeDashboard.filters.twoMonthsAgo')}</button>
         </div>
-        <div style={{ display: 'flex', gap: 12, alignItems: 'flex-end' }}>
-          <div><label style={{ fontSize: 11, fontWeight: 600, display: 'block', marginBottom: 4, color: 'var(--theme-elevation-500)' }}>{t('timeDashboard.filters.from')}</label><input type="date" value={from} onChange={(e) => setFrom(e.target.value)} style={{ padding: '6px 10px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }} /></div>
-          <div><label style={{ fontSize: 11, fontWeight: 600, display: 'block', marginBottom: 4, color: 'var(--theme-elevation-500)' }}>{t('timeDashboard.filters.to')}</label><input type="date" value={to} onChange={(e) => setTo(e.target.value)} style={{ padding: '6px 10px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }} /></div>
-          <div><label style={{ fontSize: 11, fontWeight: 600, display: 'block', marginBottom: 4, color: 'var(--theme-elevation-500)' }}>{t('timeDashboard.filters.groupBy')}</label><select value={groupBy} onChange={(e) => setGroupBy(e.target.value as 'day' | 'week' | 'project')} style={{ padding: '6px 10px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }}><option value="day">{t('timeDashboard.filters.day')}</option><option value="week">{t('timeDashboard.filters.week')}</option><option value="project">{t('timeDashboard.filters.project')}</option></select></div>
+        <div className={styles.filterRow}>
+          <div className={styles.fieldGroup}>
+            <label className={styles.label}>{t('timeDashboard.filters.from')}</label>
+            <input type="date" value={from} onChange={(e) => setFrom(e.target.value)} className={styles.input} />
+          </div>
+          <div className={styles.fieldGroup}>
+            <label className={styles.label}>{t('timeDashboard.filters.to')}</label>
+            <input type="date" value={to} onChange={(e) => setTo(e.target.value)} className={styles.input} />
+          </div>
+          <div className={styles.fieldGroup}>
+            <label className={styles.label}>{t('timeDashboard.filters.groupBy')}</label>
+            <select value={groupBy} onChange={(e) => setGroupBy(e.target.value as 'day' | 'week' | 'project')} className={styles.select}>
+              <option value="day">{t('timeDashboard.filters.day')}</option>
+              <option value="week">{t('timeDashboard.filters.week')}</option>
+              <option value="project">{t('timeDashboard.filters.project')}</option>
+            </select>
+          </div>
         </div>
       </div>
 
-      {loading ? <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>{t('common.loading')}</div> : (
+      {loading ? (
+        <div className={styles.loading}>
+          <SkeletonDashboard />
+        </div>
+      ) : (
         <>
-          <div style={S.kpis}>
-            <div style={S.kpiCard}><div style={{ fontSize: 11, color: 'var(--theme-elevation-500)' }}>{t('timeDashboard.kpis.totalTime')}</div><div style={{ fontSize: 24, fontWeight: 700, color: '#2563eb' }}>{formatDuration(totalMinutes)}</div></div>
-            <div style={S.kpiCard}><div style={{ fontSize: 11, color: 'var(--theme-elevation-500)' }}>{t('timeDashboard.kpis.entries')}</div><div style={{ fontSize: 24, fontWeight: 700, color: '#d97706' }}>{entries.length}</div></div>
-            <div style={S.kpiCard}><div style={{ fontSize: 11, color: 'var(--theme-elevation-500)' }}>{t('timeDashboard.kpis.dailyAverage')}</div><div style={{ fontSize: 24, fontWeight: 700, color: '#ea580c' }}>{dailyChart.length > 0 ? formatDuration(Math.round(totalMinutes / dailyChart.length)) : '-'}</div></div>
+          {/* KPIs */}
+          <div className={styles.kpis}>
+            <div className={styles.kpiCardPrimary}>
+              <div className={styles.kpiLabel}>{t('timeDashboard.kpis.totalTime')}</div>
+              <div className={styles.kpiPrimary}>{formatDuration(totalMinutes)}</div>
+            </div>
+            <div className={styles.kpiCardAmber}>
+              <div className={styles.kpiLabel}>{t('timeDashboard.kpis.entries')}</div>
+              <div className={styles.kpiAmber}>{totalEntries}</div>
+            </div>
+            <div className={styles.kpiCardOrange}>
+              <div className={styles.kpiLabel}>{t('timeDashboard.kpis.dailyAverage')}</div>
+              <div className={styles.kpiOrange}>
+                {dailyChart.length > 0 ? formatDuration(Math.round(totalMinutes / dailyChart.length)) : '-'}
+              </div>
+            </div>
           </div>
 
+          {/* Chart */}
           {dailyChart.length > 0 && (
-            <div style={{ padding: 16, borderRadius: 10, border: '1px solid var(--theme-elevation-150)', marginBottom: 20 }}>
-              <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 8 }}>{t('timeDashboard.chart.title')}</div>
-              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 80 }}>
-                {dailyChart.map((d) => <div key={d.day} style={{ flex: 1, background: '#3b82f6', borderRadius: '3px 3px 0 0', height: `${Math.max((d.minutes / maxDailyMinutes) * 100, 4)}%` }} title={`${d.day}: ${formatDuration(d.minutes)}`} />)}
+            <div className={styles.chartWrap}>
+              <div className={styles.chartHeader}>
+                {t('timeDashboard.chart.title')}
+              </div>
+              <div className={styles.chartBars}>
+                {dailyChart.map((d) => (
+                  <div
+                    key={d.day}
+                    className={styles.chartBar}
+                    style={{ height: `${Math.max((d.minutes / maxDailyMinutes) * 100, 4)}%` }}
+                    title={`${d.day}: ${formatDuration(d.minutes)}`}
+                  />
+                ))}
               </div>
             </div>
           )}
 
-          {grouped.length === 0 ? <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>{t('timeDashboard.empty')}</div> : grouped.map((group) => (
-            <div key={group.label} style={S.groupCard}>
-              <div style={S.groupHeader}><span style={{ fontWeight: 700 }}>{group.label}</span><span style={{ fontWeight: 700, color: '#2563eb' }}>{formatDuration(group.totalMinutes)}</span></div>
-              <table style={S.table}>
-                <tbody>
-                  {group.entries.map((entry) => {
-                    const ticket = typeof entry.ticket === 'object' ? entry.ticket : null
-                    return (
-                      <tr key={entry.id}>
-                        <td style={S.td}>{ticket ? <a href={`/admin/collections/tickets/${ticket.id}`} style={{ color: '#2563eb', textDecoration: 'none', fontWeight: 600 }}>{ticket.ticketNumber || `#${ticket.id}`}</a> : '-'}</td>
-                        <td style={S.td}>{ticket?.subject || ''}</td>
-                        <td style={{ ...S.td, color: 'var(--theme-elevation-500)' }}>{entry.description || '-'}</td>
-                        <td style={{ ...S.td, textAlign: 'right', fontWeight: 600 }}>{formatDuration(entry.duration)}</td>
-                      </tr>
-                    )
-                  })}
-                </tbody>
-              </table>
+          {/* Grouped entries */}
+          {grouped.length === 0 ? (
+            <div className={styles.empty}>
+              {t('timeDashboard.empty')}
             </div>
-          ))}
+          ) : (
+            grouped.map((group) => (
+              <div key={group.label} className={styles.groupCard}>
+                <div className={styles.groupHeader}>
+                  <span className={styles.groupLabel}>{group.label}</span>
+                  <span className={styles.groupTotal}>{formatDuration(group.totalMinutes)}</span>
+                </div>
+                <table className={styles.table}>
+                  <tbody>
+                    {group.entries.map((entry) => {
+                      const ticket = typeof entry.ticket === 'object' ? entry.ticket : null
+                      return (
+                        <tr key={entry.id} className={styles.entryRow}>
+                          <td className={styles.tdTicket}>
+                            {ticket ? (
+                              <a href={`/admin/collections/tickets/${ticket.id}`} className={styles.ticketLink}>
+                                {ticket.ticketNumber || `#${ticket.id}`}
+                              </a>
+                            ) : '-'}
+                          </td>
+                          <td className={styles.tdSubject}>
+                            {ticket?.subject || ''}
+                          </td>
+                          <td className={styles.tdDescription}>
+                            {entry.description || '-'}
+                          </td>
+                          <td className={styles.tdDuration}>
+                            {formatDuration(entry.duration)}
+                          </td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            ))
+          )}
         </>
       )}
     </div>