Add export routes to backend and frontend; implement routing and UI components for data export management

backend/src/controllers/ExportController.js

@@ -0,0 +1,91 @@
+const ExportService = require('../services/ExportService');
+
+/**
+ * Controller für Daten-Export
+ * Verarbeitet HTTP-Requests und delegiert an ExportService
+ */
+class ExportController {
+  /**
+   * Exportiert Daten als CSV
+   */
+  async exportCSV(req, res) {
+    try {
+      const userId = req.user?.id || 1;
+      const { startDate, endDate } = req.query;
+      
+      if (!startDate || !endDate) {
+        return res.status(400).json({ 
+          message: 'Start- und Enddatum sind erforderlich' 
+        });
+      }
+      
+      const csv = await ExportService.exportCSV(userId, startDate, endDate);
+      
+      res.setHeader('Content-Type', 'text/csv; charset=utf-8');
+      res.setHeader('Content-Disposition', `attachment; filename="zeiterfassung_${startDate}_${endDate}.csv"`);
+      res.send(csv);
+    } catch (error) {
+      console.error('Fehler beim CSV-Export:', error);
+      res.status(500).json({ 
+        message: 'Fehler beim Export',
+        error: error.message 
+      });
+    }
+  }
+
+  /**
+   * Exportiert Daten als Excel
+   */
+  async exportExcel(req, res) {
+    try {
+      const userId = req.user?.id || 1;
+      const { startDate, endDate } = req.query;
+      
+      if (!startDate || !endDate) {
+        return res.status(400).json({ 
+          message: 'Start- und Enddatum sind erforderlich' 
+        });
+      }
+      
+      const excel = await ExportService.exportExcel(userId, startDate, endDate);
+      
+      res.setHeader('Content-Type', 'text/csv; charset=utf-8');
+      res.setHeader('Content-Disposition', `attachment; filename="zeiterfassung_${startDate}_${endDate}.csv"`);
+      res.send(excel);
+    } catch (error) {
+      console.error('Fehler beim Excel-Export:', error);
+      res.status(500).json({ 
+        message: 'Fehler beim Export',
+        error: error.message 
+      });
+    }
+  }
+
+  /**
+   * Exportiert Daten für PDF (gibt JSON zurück, PDF wird im Frontend generiert)
+   */
+  async exportPDF(req, res) {
+    try {
+      const userId = req.user?.id || 1;
+      const { startDate, endDate } = req.query;
+      
+      if (!startDate || !endDate) {
+        return res.status(400).json({ 
+          message: 'Start- und Enddatum sind erforderlich' 
+        });
+      }
+      
+      const data = await ExportService.exportPDFData(userId, startDate, endDate);
+      res.json(data);
+    } catch (error) {
+      console.error('Fehler beim PDF-Export:', error);
+      res.status(500).json({ 
+        message: 'Fehler beim Export',
+        error: error.message 
+      });
+    }
+  }
+}
+
+module.exports = new ExportController();
+

backend/src/index.js

@@ -114,6 +114,10 @@ app.use('/api/invite', authenticateToken, inviteRouter);
 const watcherRouter = require('./routes/watcher');
 app.use('/api/watcher', authenticateToken, watcherRouter);
 
+// Export routes (geschützt) - MIT ID-Hashing
+const exportRouter = require('./routes/export');
+app.use('/api/export', authenticateToken, exportRouter);
+
 // Error handling middleware
 app.use((err, req, res, next) => {
   console.error(err.stack);

backend/src/routes/export.js

@@ -0,0 +1,19 @@
+const express = require('express');
+const router = express.Router();
+const ExportController = require('../controllers/ExportController');
+
+/**
+ * Routen für Daten-Export
+ */
+
+// GET /api/export/csv?startDate=2025-01-01&endDate=2025-12-31
+router.get('/csv', ExportController.exportCSV.bind(ExportController));
+
+// GET /api/export/excel?startDate=2025-01-01&endDate=2025-12-31
+router.get('/excel', ExportController.exportExcel.bind(ExportController));
+
+// GET /api/export/pdf?startDate=2025-01-01&endDate=2025-12-31
+router.get('/pdf', ExportController.exportPDF.bind(ExportController));
+
+module.exports = router;
+

backend/src/services/ExportService.js

@@ -0,0 +1,220 @@
+const database = require('../config/database');
+const { Op } = require('sequelize');
+
+/**
+ * Service-Klasse für Daten-Export
+ * Exportiert Arbeitszeiten in verschiedenen Formaten
+ */
+class ExportService {
+  /**
+   * Exportiert Daten als CSV
+   * Format: Datum;Uhrzeit;Aktivität;Gesamt-Netto-Arbeitszeit
+   * @param {number} userId - User-ID
+   * @param {string} startDate - Startdatum (YYYY-MM-DD)
+   * @param {string} endDate - Enddatum (YYYY-MM-DD)
+   * @returns {Promise<string>} CSV-String
+   */
+  async exportCSV(userId, startDate, endDate) {
+    const data = await this._getExportData(userId, startDate, endDate);
+    
+    // CSV Header
+    let csv = 'Datum;Uhrzeit;Aktivität;Gesamt-Netto-Arbeitszeit\n';
+    
+    // CSV Zeilen
+    data.forEach(row => {
+      csv += `${row.date};${row.time};${row.activity};${row.netWorkTime}\n`;
+    });
+    
+    return csv;
+  }
+
+  /**
+   * Exportiert Daten als Excel (CSV mit Excel-kompatiblem Encoding)
+   * @param {number} userId - User-ID
+   * @param {string} startDate - Startdatum
+   * @param {string} endDate - Enddatum
+   * @returns {Promise<string>} Excel-kompatibles CSV mit BOM
+   */
+  async exportExcel(userId, startDate, endDate) {
+    const csv = await this.exportCSV(userId, startDate, endDate);
+    
+    // UTF-8 BOM für Excel
+    return '\ufeff' + csv;
+  }
+
+  /**
+   * Bereitet Daten für PDF-Export vor (Wochen-Format)
+   * @param {number} userId - User-ID
+   * @param {string} startDate - Startdatum
+   * @param {string} endDate - Enddatum
+   * @returns {Promise<Object>} Strukturierte Daten für PDF
+   */
+  async exportPDFData(userId, startDate, endDate) {
+    const TimeEntryService = require('./TimeEntryService');
+    
+    const start = new Date(startDate + 'T00:00:00');
+    const end = new Date(endDate + 'T00:00:00');
+    
+    // Berechne Anzahl Wochen
+    const weeks = [];
+    let currentDate = new Date(start);
+    
+    while (currentDate <= end) {
+      // Finde Montag der aktuellen Woche
+      const dayOfWeek = currentDate.getDay();
+      const daysToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+      const weekStart = new Date(currentDate);
+      weekStart.setDate(weekStart.getDate() + daysToMonday);
+      
+      // Berechne Wochen-Offset
+      const now = new Date();
+      const nowDayOfWeek = now.getDay();
+      const nowDaysToMonday = nowDayOfWeek === 0 ? -6 : 1 - nowDayOfWeek;
+      const thisWeekMonday = new Date(now);
+      thisWeekMonday.setDate(thisWeekMonday.getDate() + nowDaysToMonday);
+      thisWeekMonday.setHours(0, 0, 0, 0);
+      weekStart.setHours(0, 0, 0, 0);
+      
+      const weekOffset = Math.round((weekStart - thisWeekMonday) / (7 * 24 * 60 * 60 * 1000));
+      
+      // Hole Wochendaten
+      const weekData = await TimeEntryService.getWeekOverview(userId, weekOffset);
+      weeks.push(weekData);
+      
+      // Nächste Woche
+      currentDate.setDate(currentDate.getDate() + 7);
+    }
+    
+    return {
+      startDate,
+      endDate,
+      weeks
+    };
+  }
+
+  /**
+   * Holt Export-Daten (für CSV/Excel)
+   * @private
+   */
+  async _getExportData(userId, startDate, endDate) {
+    const { Worklog, Timefix } = database.getModels();
+    const sequelize = database.sequelize;
+    
+    // Hole alle Worklog-Einträge mit Timefix-Korrekturen
+    const query = `
+      SELECT 
+        w.id,
+        DATE(w.tstamp) as date,
+        w.tstamp,
+        w.state,
+        w.relatedTo_id,
+        COALESCE(tf.fix_date_time, w.tstamp) as corrected_time,
+        COALESCE(tf.fix_type, 
+          CASE 
+            WHEN w.state LIKE '%start work%' THEN 'start work'
+            WHEN w.state LIKE '%stop work%' THEN 'stop work'
+            WHEN w.state LIKE '%start pause%' THEN 'start pause'
+            WHEN w.state LIKE '%stop pause%' THEN 'stop pause'
+            ELSE w.state
+          END
+        ) as corrected_action
+      FROM worklog w
+      LEFT JOIN timefix tf ON tf.worklog_id = w.id
+      WHERE w.user_id = :userId
+        AND DATE(w.tstamp) BETWEEN :startDate AND :endDate
+      ORDER BY w.tstamp ASC
+    `;
+    
+    const entries = await sequelize.query(query, {
+      replacements: { userId, startDate, endDate },
+      type: sequelize.QueryTypes.SELECT
+    });
+    
+    // Gruppiere nach Datum und berechne Nettoarbeitszeit
+    const dayMap = new Map();
+    
+    entries.forEach(entry => {
+      if (!dayMap.has(entry.date)) {
+        dayMap.set(entry.date, {
+          entries: [],
+          netMinutes: 0
+        });
+      }
+      dayMap.get(entry.date).entries.push(entry);
+    });
+    
+    // Berechne für jeden Tag
+    const result = [];
+    
+    dayMap.forEach((dayData, date) => {
+      const dayEntries = dayData.entries;
+      let netMinutes = 0;
+      
+      // Finde alle start work -> stop work Paare
+      dayEntries.forEach(entry => {
+        const action = entry.corrected_action;
+        
+        if (action === 'stop work') {
+          const startEntry = dayEntries.find(e => e.id === entry.relatedTo_id);
+          
+          if (startEntry) {
+            const start = new Date(startEntry.corrected_time);
+            const end = new Date(entry.corrected_time);
+            const workMinutes = (end - start) / (1000 * 60);
+            
+            // Subtrahiere Pausen
+            const pauses = dayEntries.filter(e => 
+              new Date(e.corrected_time) > start && 
+              new Date(e.corrected_time) < end &&
+              (e.corrected_action === 'start pause' || e.corrected_action === 'stop pause')
+            );
+            
+            let pauseMinutes = 0;
+            pauses.forEach(pauseEntry => {
+              if (pauseEntry.corrected_action === 'stop pause') {
+                const pauseStart = pauses.find(p => p.id === pauseEntry.relatedTo_id);
+                if (pauseStart) {
+                  const pStart = new Date(pauseStart.corrected_time);
+                  const pEnd = new Date(pauseEntry.corrected_time);
+                  pauseMinutes += (pEnd - pStart) / (1000 * 60);
+                }
+              }
+            });
+            
+            netMinutes += workMinutes - pauseMinutes;
+          }
+        }
+      });
+      
+      // Formatiere Netto-Arbeitszeit
+      const netHours = Math.floor(netMinutes / 60);
+      const netMins = Math.round(netMinutes % 60);
+      const netTimeFormatted = `${netHours}:${netMins.toString().padStart(2, '0')}`;
+      
+      // Erstelle Zeilen für alle Einträge dieses Tages
+      dayEntries.forEach(entry => {
+        const time = new Date(entry.corrected_time);
+        const timeStr = time.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+        
+        const activityLabels = {
+          'start work': 'Arbeit gestartet',
+          'stop work': 'Arbeit beendet',
+          'start pause': 'Pause gestartet',
+          'stop pause': 'Pause beendet'
+        };
+        
+        result.push({
+          date: new Date(date + 'T00:00:00').toLocaleDateString('de-DE'),
+          time: timeStr,
+          activity: activityLabels[entry.corrected_action] || entry.corrected_action,
+          netWorkTime: entry.corrected_action === 'stop work' ? netTimeFormatted : ''
+        });
+      });
+    });
+    
+    return result;
+  }
+}
+
+module.exports = new ExportService();
+

frontend/src/App.vue

@@ -79,6 +79,7 @@ const pageTitle = computed(() => {
     'settings-timewish': 'Zeitwünsche',
     'settings-invite': 'Einladen',
     'settings-permissions': 'Berechtigungen',
+    'export': 'Export',
     'entries': 'Einträge',
     'stats': 'Statistiken'
   }

frontend/src/router/index.js

@@ -22,6 +22,7 @@ import Timewish from '../views/Timewish.vue'
 import Roles from '../views/Roles.vue'
 import Invite from '../views/Invite.vue'
 import Permissions from '../views/Permissions.vue'
+import Export from '../views/Export.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -140,6 +141,12 @@ const router = createRouter({
       component: Permissions,
       meta: { requiresAuth: true }
     },
+    {
+      path: '/export',
+      name: 'export',
+      component: Export,
+      meta: { requiresAuth: true }
+    },
     {
       path: '/entries',
       name: 'entries',

frontend/src/views/Export.vue

@@ -0,0 +1,454 @@
+<template>
+  <div class="export-page">
+    <div class="card">
+      <h3>Zeiterfassung exportieren</h3>
+      
+      <form @submit.prevent="exportData" class="export-form">
+        <div class="form-row">
+          <div class="form-group">
+            <label for="startDate">Von</label>
+            <input 
+              type="date" 
+              id="startDate" 
+              v-model="form.startDate" 
+              required
+            >
+          </div>
+          
+          <div class="form-group">
+            <label for="endDate">Bis</label>
+            <input 
+              type="date" 
+              id="endDate" 
+              v-model="form.endDate" 
+              required
+            >
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="format">Format</label>
+            <select 
+              id="format" 
+              v-model="form.format" 
+              required
+            >
+              <option value="pdf">PDF (Wochen-Übersicht)</option>
+              <option value="excel">Excel (Detailliert)</option>
+              <option value="csv">CSV (Detailliert)</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="format-description">
+          <div v-if="form.format === 'pdf'">
+            <strong>PDF-Format:</strong> Zeigt die Daten wie in der Wochenübersicht mit allen Details (Arbeitszeiten, Pausen, Urlaub, etc.)
+          </div>
+          <div v-else>
+            <strong>{{ form.format === 'excel' ? 'Excel' : 'CSV' }}-Format:</strong> 
+            Detaillierte Liste mit Spalten: Datum, Uhrzeit, Aktivität, Gesamt-Netto-Arbeitszeit
+          </div>
+        </div>
+
+        <div class="form-actions">
+          <button type="submit" class="btn btn-primary" :disabled="loading">
+            {{ loading ? 'Wird exportiert...' : 'Herunterladen' }}
+          </button>
+        </div>
+      </form>
+
+      <div class="info-box">
+        <h4>Hinweise:</h4>
+        <ul>
+          <li>Es werden nur die <strong>korrigierten Zeiten</strong> exportiert (inkl. Zeitkorrekturen)</li>
+          <li><strong>PDF</strong>: Übersichtliche Darstellung nach Wochen, ideal für Ausdrucke</li>
+          <li><strong>Excel/CSV</strong>: Detaillierte Rohdaten, ideal für weitere Analysen</li>
+          <li>Die Netto-Arbeitszeit ist bereits um Pausen bereinigt</li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Modal-Komponente -->
+    <Modal 
+      v-if="showModal"
+      :show="showModal"
+      :title="modalConfig.title"
+      :message="modalConfig.message"
+      :type="modalConfig.type"
+      :confirmText="modalConfig.confirmText"
+      :cancelText="modalConfig.cancelText"
+      @confirm="onConfirm" 
+      @cancel="onCancel" 
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useAuthStore } from '../stores/authStore'
+import { useModal } from '../composables/useModal'
+import Modal from '../components/Modal.vue'
+
+const authStore = useAuthStore()
+const loading = ref(false)
+
+const { showModal, modalConfig, alert, confirm, onConfirm, onCancel } = useModal()
+
+// Default: Aktuelles Jahr bis heute
+const now = new Date()
+const yearStart = new Date(now.getFullYear(), 0, 1)
+
+const form = ref({
+  startDate: yearStart.toISOString().split('T')[0],
+  endDate: now.toISOString().split('T')[0],
+  format: 'pdf'
+})
+
+// Exportiere Daten
+async function exportData() {
+  if (!form.value.startDate || !form.value.endDate) {
+    await alert('Bitte geben Sie Start- und Enddatum an', 'Fehlende Angaben')
+    return
+  }
+  
+  if (new Date(form.value.startDate) > new Date(form.value.endDate)) {
+    await alert('Das Startdatum muss vor dem Enddatum liegen', 'Ungültige Eingabe')
+    return
+  }
+  
+  try {
+    loading.value = true
+    
+    if (form.value.format === 'pdf') {
+      await exportPDF()
+    } else if (form.value.format === 'excel') {
+      await downloadFile('excel')
+    } else if (form.value.format === 'csv') {
+      await downloadFile('csv')
+    }
+  } catch (error) {
+    console.error('Fehler beim Export:', error)
+    await alert(`Fehler: ${error.message}`, 'Fehler')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Download CSV/Excel-Datei
+async function downloadFile(format) {
+  const url = `http://localhost:3010/api/export/${format}?startDate=${form.value.startDate}&endDate=${form.value.endDate}`
+  
+  const response = await fetch(url, {
+    headers: {
+      'Authorization': `Bearer ${authStore.token}`
+    }
+  })
+  
+  if (!response.ok) {
+    throw new Error('Fehler beim Export')
+  }
+  
+  const blob = await response.blob()
+  const downloadUrl = window.URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = downloadUrl
+  a.download = `zeiterfassung_${form.value.startDate}_${form.value.endDate}.csv`
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  window.URL.revokeObjectURL(downloadUrl)
+}
+
+// PDF-Export (Browser-Print)
+async function exportPDF() {
+  const url = `http://localhost:3010/api/export/pdf?startDate=${form.value.startDate}&endDate=${form.value.endDate}`
+  
+  const response = await fetch(url, {
+    headers: {
+      'Authorization': `Bearer ${authStore.token}`
+    }
+  })
+  
+  if (!response.ok) {
+    throw new Error('Fehler beim PDF-Export')
+  }
+  
+  const data = await response.json()
+  
+  // Öffne neues Fenster für PDF-Druck
+  const printWindow = window.open('', '_blank')
+  printWindow.document.write(generatePDFHTML(data))
+  printWindow.document.close()
+  
+  // Warte kurz, dann öffne Druckdialog
+  setTimeout(() => {
+    printWindow.print()
+  }, 500)
+}
+
+// Generiere HTML für PDF-Druck
+function generatePDFHTML(data) {
+  const dayNames = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
+  
+  let html = `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8">
+      <title>Zeiterfassung ${data.startDate} - ${data.endDate}</title>
+      <style>
+        body {
+          font-family: Arial, sans-serif;
+          padding: 20px;
+          font-size: 11pt;
+        }
+        h1 {
+          font-size: 18pt;
+          margin-bottom: 10px;
+        }
+        .week {
+          page-break-inside: avoid;
+          margin-bottom: 30px;
+        }
+        .week-header {
+          background: #f0f0f0;
+          padding: 8px;
+          font-weight: bold;
+          margin-bottom: 10px;
+        }
+        table {
+          width: 100%;
+          border-collapse: collapse;
+          margin-bottom: 10px;
+        }
+        th {
+          background: #e0e0e0;
+          padding: 6px;
+          text-align: left;
+          border: 1px solid #ccc;
+          font-size: 10pt;
+        }
+        td {
+          padding: 6px;
+          border: 1px solid #ccc;
+          font-size: 10pt;
+        }
+        .summary-row {
+          background: #f9f9f9;
+          font-weight: bold;
+        }
+        @media print {
+          body { padding: 0; }
+          .week { page-break-inside: avoid; }
+        }
+      </style>
+    </head>
+    <body>
+      <h1>Zeiterfassung</h1>
+      <p>Zeitraum: ${formatDate(data.startDate)} - ${formatDate(data.endDate)}</p>
+  `
+  
+  data.weeks.forEach(week => {
+    html += `
+      <div class="week">
+        <div class="week-header">
+          Woche: ${formatDate(week.weekStart)} - ${formatDate(week.weekEnd)}
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th>Tag</th>
+              <th>Datum</th>
+              <th>Arbeitszeit</th>
+              <th>Pausen</th>
+              <th>Gesamt</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+    `
+    
+    week.days.forEach(day => {
+      const date = new Date(day.date)
+      const dayName = dayNames[date.getDay()]
+      
+      html += `
+        <tr>
+          <td>${dayName}</td>
+          <td>${formatDate(day.date)}</td>
+          <td>${day.totalWorkTime || '—'}</td>
+          <td>${day.pauseTimes?.map(p => p.time).join(', ') || '—'}</td>
+          <td>${day.netWorkTime || '—'}</td>
+          <td>${day.statusText || '—'}</td>
+        </tr>
+      `
+    })
+    
+    html += `
+            <tr class="summary-row">
+              <td colspan="4">Wochensumme</td>
+              <td>${week.weekTotal}</td>
+              <td></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    `
+  })
+  
+  html += `
+    </body>
+    </html>
+  `
+  
+  return html
+}
+
+// Formatiere Datum
+function formatDate(dateStr) {
+  if (!dateStr) return ''
+  const date = new Date(dateStr + 'T00:00:00')
+  return date.toLocaleDateString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric'
+  })
+}
+</script>
+
+<style scoped>
+.export-page {
+  max-width: 700px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+h3 {
+  margin: 0 0 20px 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.export-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-row {
+  display: flex;
+  gap: 16px;
+}
+
+.form-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.form-group label {
+  font-weight: 600;
+  font-size: 14px;
+  color: #333;
+}
+
+.form-group input,
+.form-group select {
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+  outline: none;
+  border-color: #4CAF50;
+  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
+}
+
+.format-description {
+  background: #f0f8ff;
+  border: 1px solid #d0e8ff;
+  border-radius: 4px;
+  padding: 12px;
+  font-size: 13px;
+  color: #1565c0;
+}
+
+.format-description strong {
+  color: #0d47a1;
+}
+
+.form-actions {
+  margin-top: 8px;
+}
+
+.info-box {
+  background: #f9f9f9;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  padding: 16px;
+  margin-top: 24px;
+}
+
+.info-box h4 {
+  margin: 0 0 10px 0;
+  font-size: 14px;
+  color: #333;
+}
+
+.info-box ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.info-box li {
+  margin: 6px 0;
+  font-size: 13px;
+  color: #555;
+  line-height: 1.5;
+}
+
+.info-box strong {
+  color: #333;
+}
+
+.btn {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #4CAF50, #45a049);
+  color: white;
+  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
+}
+</style>
+