Add sick routes to backend and frontend; update routing and UI components for sickness tracking

2025-10-17 21:24:00 +02:00
parent b65a13d815
commit ca4002f402
11 changed files with 735 additions and 6 deletions
--- a/backend/add-sick-index.sql
+++ b/backend/add-sick-index.sql
@@ -0,0 +1,11 @@
+-- SQL Script: Index zur sick-Tabelle hinzufügen
+-- Verbessert die Performance beim Abrufen von Krankheitseinträgen
+-- Ausführen mit: mysql -u root -p stechuhr < add-sick-index.sql
+
+USE stechuhr;
+
+-- Index für user_id und first_day (für effiziente Abfragen nach User und Datum)
+CREATE INDEX IF NOT EXISTS idx_sick_user_first_day ON sick (user_id, first_day DESC);
+
+SELECT 'Index idx_sick_user_first_day erfolgreich erstellt oder bereits vorhanden.' AS status;
+
--- a/backend/src/controllers/SickController.js
+++ b/backend/src/controllers/SickController.js
@@ -0,0 +1,92 @@
+const SickService = require('../services/SickService');
+
+/**
+ * Controller für Krankheitseinträge
+ * Verarbeitet HTTP-Requests und delegiert an SickService
+ */
+class SickController {
+  /**
+   * Holt alle Krankheitseinträge für den aktuellen User
+   */
+  async getAllSickEntries(req, res) {
+    try {
+      const userId = req.user?.id || 1;
+      const sickEntries = await SickService.getAllSickEntries(userId);
+      res.json(sickEntries);
+    } catch (error) {
+      console.error('Fehler beim Abrufen der Krankheitseinträge:', error);
+      res.status(500).json({ 
+        message: 'Fehler beim Abrufen der Krankheitseinträge',
+        error: error.message 
+      });
+    }
+  }
+
+  /**
+   * Holt alle verfügbaren Krankheitstypen
+   */
+  async getSickTypes(req, res) {
+    try {
+      const types = await SickService.getSickTypes();
+      res.json(types);
+    } catch (error) {
+      console.error('Fehler beim Abrufen der Krankheitstypen:', error);
+      res.status(500).json({ 
+        message: 'Fehler beim Abrufen der Krankheitstypen',
+        error: error.message 
+      });
+    }
+  }
+
+  /**
+   * Erstellt einen neuen Krankheitseintrag
+   */
+  async createSickEntry(req, res) {
+    try {
+      const userId = req.user?.id || 1;
+      const { sickTypeId, startDate, endDate } = req.body;
+      
+      console.log('DEBUG createSickEntry:', { sickTypeId, startDate, endDate, body: req.body });
+      
+      if (!sickTypeId || !startDate) {
+        return res.status(400).json({ 
+          message: 'Krankheitstyp und Startdatum sind erforderlich' 
+        });
+      }
+      
+      const sick = await SickService.createSickEntry(userId, sickTypeId, startDate, endDate);
+      res.status(201).json(sick);
+    } catch (error) {
+      console.error('Fehler beim Erstellen des Krankheitseintrags:', error);
+      res.status(500).json({ 
+        message: 'Fehler beim Erstellen des Krankheitseintrags',
+        error: error.message 
+      });
+    }
+  }
+
+  /**
+   * Löscht einen Krankheitseintrag
+   */
+  async deleteSickEntry(req, res) {
+    try {
+      const userId = req.user?.id || 1;
+      const sickId = parseInt(req.params.id);
+      
+      if (isNaN(sickId)) {
+        return res.status(400).json({ message: 'Ungültige ID' });
+      }
+      
+      await SickService.deleteSickEntry(userId, sickId);
+      res.json({ message: 'Krankheitseintrag gelöscht' });
+    } catch (error) {
+      console.error('Fehler beim Löschen des Krankheitseintrags:', error);
+      res.status(error.message.includes('nicht gefunden') ? 404 : 500).json({ 
+        message: error.message 
+      });
+    }
+  }
+}
+
+module.exports = new SickController();
+
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -74,6 +74,10 @@ app.use('/api/timefix', authenticateToken, timefixRouter);
 const vacationRouter = require('./routes/vacation');
 app.use('/api/vacation', authenticateToken, vacationRouter);

+// Sick routes (geschützt) - MIT ID-Hashing
+const sickRouter = require('./routes/sick');
+app.use('/api/sick', authenticateToken, sickRouter);
+
 // Error handling middleware
 app.use((err, req, res, next) => {
  console.error(err.stack);
--- a/backend/src/routes/sick.js
+++ b/backend/src/routes/sick.js
@@ -0,0 +1,23 @@
+const express = require('express');
+const router = express.Router();
+const SickController = require('../controllers/SickController');
+const unhashRequestIds = require('../middleware/unhashRequest');
+
+/**
+ * Routen für Krankheitseinträge
+ */
+
+// GET /api/sick - Alle Krankheitseinträge abrufen
+router.get('/', SickController.getAllSickEntries.bind(SickController));
+
+// GET /api/sick/types - Alle Krankheitstypen abrufen (MIT ID-Hashing)
+router.get('/types', SickController.getSickTypes.bind(SickController));
+
+// POST /api/sick - Neuen Krankheitseintrag erstellen (mit unhashing)
+router.post('/', unhashRequestIds, SickController.createSickEntry.bind(SickController));
+
+// DELETE /api/sick/:id - Krankheitseintrag löschen
+router.delete('/:id', unhashRequestIds, SickController.deleteSickEntry.bind(SickController));
+
+module.exports = router;
+
--- a/backend/src/services/SickService.js
+++ b/backend/src/services/SickService.js
@@ -0,0 +1,169 @@
+const database = require('../config/database');
+const { Op } = require('sequelize');
+
+/**
+ * Service-Klasse für Krankheitseinträge
+ * Enthält die gesamte Business-Logik für Sick
+ */
+class SickService {
+  constructor() {
+    this.defaultUserId = 1;
+  }
+
+  /**
+   * Holt alle Krankheitseinträge für einen User
+   * Zeigt dieses Jahr und die letzten 3 Monate
+   * @param {number} userId - Benutzer-ID
+   * @returns {Promise<Array>} Array von Krankheitseinträgen
+   */
+  async getAllSickEntries(userId) {
+    const { Sick, SickType } = database.getModels();
+    
+    const now = new Date();
+    const currentYear = now.getFullYear();
+    
+    // Berechne das Datum von vor 3 Monaten
+    const threeMonthsAgo = new Date(now);
+    threeMonthsAgo.setMonth(now.getMonth() - 3);
+    
+    // Nimm das frühere Datum (was weiter zurück liegt): Entweder Jahresanfang oder 3 Monate zurück
+    const yearStart = new Date(currentYear, 0, 1); // 1. Januar dieses Jahres
+    const startDate = yearStart < threeMonthsAgo ? yearStart : threeMonthsAgo;
+    
+    const startDateStr = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;
+    
+    const sickEntries = await Sick.findAll({
+      where: {
+        user_id: userId,
+        first_day: {
+          [Op.gte]: startDateStr
+        }
+      },
+      include: [
+        {
+          model: SickType,
+          as: 'sickType',
+          attributes: ['id', 'description']
+        }
+      ],
+      order: [['first_day', 'DESC']],
+      raw: true,
+      nest: true
+    });
+    
+    // Mapping: Englisch -> Deutsch
+    const typeNames = {
+      'self': 'Selbst',
+      'child': 'Kinder',
+      'parents': 'Eltern',
+      'partner': 'Partner'
+    };
+    
+    // Formatiere die Daten
+    return sickEntries.map(sick => ({
+      id: sick.id,
+      startDate: sick.first_day,
+      endDate: sick.last_day,
+      sickTypeId: sick.sick_type_id,
+      sickTypeName: typeNames[sick.sickType?.description] || sick.sickType?.description || 'Unbekannt'
+    }));
+  }
+
+  /**
+   * Holt alle verfügbaren Krankheitstypen
+   * @returns {Promise<Array>} Array von Krankheitstypen
+   */
+  async getSickTypes() {
+    const { SickType } = database.getModels();
+    
+    const types = await SickType.findAll({
+      order: [['id', 'ASC']],
+      raw: true
+    });
+    
+    // Mapping: Englisch -> Deutsch
+    const typeNames = {
+      'self': 'Selbst',
+      'child': 'Kinder',
+      'parents': 'Eltern',
+      'partner': 'Partner'
+    };
+    
+    return types.map(type => ({
+      id: type.id,
+      name: typeNames[type.description] || type.description
+    }));
+  }
+
+  /**
+   * Erstellt einen neuen Krankheitseintrag
+   * @param {number} userId - Benutzer-ID
+   * @param {number} sickTypeId - Krankheitstyp-ID
+   * @param {string} startDate - Startdatum (YYYY-MM-DD)
+   * @param {string} endDate - Enddatum (YYYY-MM-DD)
+   * @returns {Promise<Object>} Erstellter Krankheitseintrag
+   */
+  async createSickEntry(userId, sickTypeId, startDate, endDate) {
+    const { Sick, SickType } = database.getModels();
+    
+    if (!endDate) {
+      endDate = startDate; // Falls kein Enddatum: Single-Day
+    }
+    
+    // Prüfe ob SickType existiert
+    const sickType = await SickType.findByPk(sickTypeId);
+    if (!sickType) {
+      throw new Error('Ungültiger Krankheitstyp');
+    }
+    
+    const sick = await Sick.create({
+      user_id: userId,
+      sick_type_id: sickTypeId,
+      first_day: startDate,
+      last_day: endDate,
+      version: 0
+    });
+    
+    // Mapping: Englisch -> Deutsch
+    const typeNames = {
+      'self': 'Selbst',
+      'child': 'Kinder',
+      'parents': 'Eltern',
+      'partner': 'Partner'
+    };
+    
+    return {
+      id: sick.id,
+      startDate: sick.first_day,
+      endDate: sick.last_day,
+      sickTypeId: sick.sick_type_id,
+      sickTypeName: typeNames[sickType.description] || sickType.description
+    };
+  }
+
+  /**
+   * Löscht einen Krankheitseintrag
+   * @param {number} userId - Benutzer-ID
+   * @param {number} sickId - Sick-ID
+   * @returns {Promise<void>}
+   */
+  async deleteSickEntry(userId, sickId) {
+    const { Sick } = database.getModels();
+    
+    const sick = await Sick.findByPk(sickId);
+    
+    if (!sick) {
+      throw new Error('Krankheitseintrag nicht gefunden');
+    }
+    
+    // Prüfe Berechtigung
+    if (sick.user_id !== userId) {
+      throw new Error('Keine Berechtigung für diesen Eintrag');
+    }
+    
+    await sick.destroy();
+  }
+}
+
+module.exports = new SickService();
+
--- a/backend/src/services/TimeEntryService.js
+++ b/backend/src/services/TimeEntryService.js
@@ -490,20 +490,33 @@ class TimeEntryService {
    const todayDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const includeTodayInOvertime = !runningEntry; // Nur wenn heute schon abgeschlossen ist
    
+    console.log(`DEBUG Wochen-Überstunden: runningEntry=${!!runningEntry}, includeTodayInOvertime=${includeTodayInOvertime}, weekData.days.length=${weekData.days.length}`);
+    
    weekData.days.forEach(day => {
-      // Parse day.date (YYYY-MM-DD)
-      const dayDate = new Date(day.date);
+      // Parse day.date (YYYY-MM-DD) - mit expliziter Zeit um Midnight
+      const dayDate = new Date(day.date + 'T00:00:00');
+      const dayDateOnly = new Date(dayDate.getFullYear(), dayDate.getMonth(), dayDate.getDate());
+      
+      const isToday = dayDateOnly.getTime() === todayDate.getTime();
+      
+      console.log(`DEBUG Wochen-Überstunden: Prüfe Tag ${day.date}, isToday=${isToday}, dayDateOnly=${dayDateOnly.toISOString()}, todayDate=${todayDate.toISOString()}, netWorkTime=${day.netWorkTime}`);
      
      // Zukünftige Tage überspringen
-      if (dayDate > todayDate) {
+      if (dayDateOnly > todayDate) {
+        console.log(`DEBUG Wochen-Überstunden: Tag ${day.date} übersprungen (Zukunft)`);
        return;
      }
      
      // Heute überspringen, wenn noch gearbeitet wird
-      if (dayDate.getTime() === todayDate.getTime() && !includeTodayInOvertime) {
+      if (isToday && !includeTodayInOvertime) {
+        console.log(`DEBUG Wochen-Überstunden: Tag ${day.date} übersprungen (heute, noch nicht abgeschlossen)`);
        return;
      }
      
+      if (isToday && includeTodayInOvertime) {
+        console.log(`DEBUG Wochen-Überstunden: Tag ${day.date} WIRD GEZÄHLT (heute, abgeschlossen)`);
+      }
+      
      const dayOfWeek = dayDate.getDay(); // 0=So, 1=Mo, ..., 6=Sa
      
      // Nur Mo-Fr berücksichtigen
@@ -1362,12 +1375,20 @@ class TimeEntryService {
        });
        const endFix = endFixEntry ? timefixMap.get(endFixEntry.id)?.find(f => f.fix_type === 'stop work') : null;
        
+        if (startFix || endFix) {
+          console.log(`DEBUG Timefix für Block ${pair.id}: startFix=${!!startFix}, endFix=${!!endFix}`);
+          if (startFix) {
+            console.log(`DEBUG startFix.fix_date_time:`, startFix.fix_date_time, typeof startFix.fix_date_time);
+          }
+        }
+        
        // Verwende korrigierte Zeiten falls vorhanden
        const originalStartTime = workStartUTC;
        const originalEndTime = workEndUTC;
        
        if (startFix) {
          workStartUTC = new Date(startFix.fix_date_time);
+          console.log(`DEBUG workStartUTC nach Korrektur:`, workStartUTC, workStartUTC.getHours());
        }
        if (endFix) {
          workEndUTC = new Date(endFix.fix_date_time);
@@ -1385,8 +1406,9 @@ class TimeEntryService {
          return { hours: timeStr.getHours(), minutes: timeStr.getMinutes() };
        };
        
-        const start = parseTimeString(pair.start_time);
-        const end = parseTimeString(pair.end_time);
+        // Verwende korrigierte Zeiten für die Anzeige
+        const start = parseTimeString(startFix ? workStartUTC : pair.start_time);
+        const end = parseTimeString(endFix ? workEndUTC : pair.end_time);
        const startHours = start.hours;
        const startMinutes = start.minutes;
        const endHours = end.hours;
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -69,6 +69,7 @@ const pageTitle = computed(() => {
    'week-overview': 'Wochenübersicht',
    'timefix': 'Zeitkorrekturen',
    'vacation': 'Urlaub',
+    'sick': 'Krankheit',
    'entries': 'Einträge',
    'stats': 'Statistiken'
  }
--- a/frontend/src/components/StatusBox.vue
+++ b/frontend/src/components/StatusBox.vue
@@ -293,9 +293,11 @@ const handleAction = async (action) => {
    }
    
    // Aktualisiere Status und Worklog-Daten sofort
+    console.log('DEBUG: Lade Daten nach Stempel-Aktion neu...')
    await fetchCurrentState()
    await fetchWorklogData()
    await fetchStats()
+    console.log('DEBUG: Daten neu geladen, stats =', stats.value)
    
    // Event auslösen für andere Komponenten (z.B. WeekOverview)
    window.dispatchEvent(new CustomEvent('worklog-updated'))
--- a/frontend/src/composables/useModal.js
+++ b/frontend/src/composables/useModal.js
@@ -26,6 +26,7 @@ export function useModal() {
  }

  const confirm = (message, title = 'Bestätigung') => {
+    console.log('DEBUG useModal.confirm called:', { message, title })
    return new Promise((resolve) => {
      modalConfig.value = {
        title,
@@ -34,7 +35,9 @@ export function useModal() {
        confirmText: 'Ja',
        cancelText: 'Abbrechen'
      }
+      console.log('DEBUG useModal: setting showModal to true')
      showModal.value = true
+      console.log('DEBUG useModal: showModal.value =', showModal.value)
      resolvePromise.value = resolve
    })
  }
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -12,6 +12,7 @@ import OAuthCallback from '../views/OAuthCallback.vue'
 import WeekOverview from '../views/WeekOverview.vue'
 import Timefix from '../views/Timefix.vue'
 import Vacation from '../views/Vacation.vue'
+import Sick from '../views/Sick.vue'

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
@@ -70,6 +71,12 @@ const router = createRouter({
      component: Vacation,
      meta: { requiresAuth: true }
    },
+    {
+      path: '/bookings/sick',
+      name: 'sick',
+      component: Sick,
+      meta: { requiresAuth: true }
+    },
    {
      path: '/entries',
      name: 'entries',
--- a/frontend/src/views/Sick.vue
+++ b/frontend/src/views/Sick.vue
@@ -0,0 +1,395 @@
+<template>
+  <div class="sick-page">
+    <div class="card">
+      <!-- Formular zum Erstellen eines neuen Krankheitseintrags -->
+      <form @submit.prevent="createSick" class="sick-form">
+        <div class="form-row">
+          <div class="form-group">
+            <label for="startDate">Erster Krankheitstag</label>
+            <input 
+              type="date" 
+              id="startDate" 
+              v-model="form.startDate" 
+              required
+            >
+          </div>
+          
+          <div class="form-group">
+            <label for="endDate">Letzter Krankheitstag</label>
+            <input 
+              type="date" 
+              id="endDate" 
+              v-model="form.endDate"
+            >
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="sickType">Wer war krank?</label>
+            <select 
+              id="sickType" 
+              v-model="form.sickTypeId" 
+              required
+            >
+              <option value="">Bitte wählen...</option>
+              <option 
+                v-for="type in sickTypes" 
+                :key="type.id" 
+                :value="type.id"
+              >
+                {{ type.name }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <button type="submit" class="btn btn-primary" :disabled="loading">
+              {{ loading ? 'Wird gespeichert...' : 'Erkrankung eintragen' }}
+            </button>
+          </div>
+        </div>
+      </form>
+
+      <hr>
+
+      <!-- Tabelle mit bestehenden Krankheitseinträgen -->
+      <table class="sick-table">
+        <thead>
+          <tr>
+            <th>Erster Krankheitstag</th>
+            <th>Letzter Krankheitstag</th>
+            <th>Wer war krank?</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="sickEntries.length === 0">
+            <td colspan="4" class="no-data">Keine Krankheitseinträge vorhanden</td>
+          </tr>
+          <tr v-for="sick in sickEntries" :key="sick.id">
+            <td>{{ formatDate(sick.startDate) }}</td>
+            <td>{{ formatDate(sick.endDate) }}</td>
+            <td>{{ sick.sickTypeName }}</td>
+            <td>
+              <button 
+                @click="deleteSick(sick.id)" 
+                class="btn btn-delete"
+                :disabled="loading"
+              >
+                Löschen
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </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, onMounted } from 'vue'
+import { useAuthStore } from '../stores/authStore'
+import { useModal } from '../composables/useModal'
+import Modal from '../components/Modal.vue'
+
+const authStore = useAuthStore()
+const sickEntries = ref([])
+const sickTypes = ref([])
+const loading = ref(false)
+
+const { showModal, modalConfig, alert, confirm, onConfirm, onCancel } = useModal()
+
+const form = ref({
+  startDate: new Date().toISOString().split('T')[0],
+  endDate: '',
+  sickTypeId: ''
+})
+
+// Lade alle Krankheitseinträge
+async function loadSickEntries() {
+  try {
+    loading.value = true
+    const response = await fetch('http://localhost:3010/api/sick', {
+      headers: {
+        'Authorization': `Bearer ${authStore.token}`
+      }
+    })
+    
+    if (!response.ok) {
+      throw new Error('Fehler beim Laden der Krankheitseinträge')
+    }
+    
+    sickEntries.value = await response.json()
+  } catch (error) {
+    console.error('Fehler beim Laden der Krankheitseinträge:', error)
+    await alert(`Fehler: ${error.message}`, 'Fehler')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Lade alle Krankheitstypen
+async function loadSickTypes() {
+  try {
+    const response = await fetch('http://localhost:3010/api/sick/types', {
+      headers: {
+        'Authorization': `Bearer ${authStore.token}`
+      }
+    })
+    
+    if (!response.ok) {
+      throw new Error('Fehler beim Laden der Krankheitstypen')
+    }
+    
+    sickTypes.value = await response.json()
+  } catch (error) {
+    console.error('Fehler beim Laden der Krankheitstypen:', error)
+    await alert(`Fehler: ${error.message}`, 'Fehler')
+  }
+}
+
+// Erstelle neuen Krankheitseintrag
+async function createSick() {
+  if (!form.value.startDate || !form.value.sickTypeId || form.value.sickTypeId === '') {
+    await alert('Bitte füllen Sie alle Pflichtfelder aus', 'Fehlende Angaben')
+    return
+  }
+  
+  try {
+    loading.value = true
+    const response = await fetch('http://localhost:3010/api/sick', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${authStore.token}`
+      },
+      body: JSON.stringify({
+        sickTypeId: form.value.sickTypeId, // Sende gehashte ID
+        startDate: form.value.startDate,
+        endDate: form.value.endDate || form.value.startDate
+      })
+    })
+    
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error.message || 'Fehler beim Erstellen des Krankheitseintrags')
+    }
+    
+    // Formular zurücksetzen
+    resetForm()
+    
+    // Liste neu laden
+    await loadSickEntries()
+  } catch (error) {
+    console.error('Fehler beim Erstellen des Krankheitseintrags:', error)
+    await alert(`Fehler: ${error.message}`, 'Fehler')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Lösche Krankheitseintrag
+async function deleteSick(id) {
+  const confirmed = await confirm('Möchten Sie diesen Krankheitseintrag wirklich löschen?', 'Krankheitseintrag löschen')
+  
+  if (!confirmed) {
+    return
+  }
+  
+  try {
+    loading.value = true
+    const response = await fetch(`http://localhost:3010/api/sick/${id}`, {
+      method: 'DELETE',
+      headers: {
+        'Authorization': `Bearer ${authStore.token}`
+      }
+    })
+    
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error.message || 'Fehler beim Löschen des Krankheitseintrags')
+    }
+    
+    await loadSickEntries()
+  } catch (error) {
+    console.error('Fehler beim Löschen des Krankheitseintrags:', error)
+    await alert(`Fehler: ${error.message}`, 'Fehler')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Formatiere Datum für Anzeige (DD.MM.YYYY)
+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'
+  })
+}
+
+// Formular zurücksetzen
+function resetForm() {
+  form.value = {
+    startDate: new Date().toISOString().split('T')[0],
+    endDate: '',
+    sickTypeId: ''
+  }
+}
+
+// Initiales Laden
+onMounted(async () => {
+  await Promise.all([
+    loadSickTypes(),
+    loadSickEntries()
+  ])
+})
+</script>
+
+<style scoped>
+.sick-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.sick-form {
+  margin-bottom: 16px;
+}
+
+.form-row {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 12px;
+  align-items: flex-end;
+}
+
+.form-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group label {
+  font-weight: 500;
+  margin-bottom: 6px;
+  font-size: 13px;
+  color: #333;
+}
+
+.form-group input,
+.form-group select {
+  padding: 8px 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+  outline: none;
+  border-color: #4CAF50;
+  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #eee;
+  margin: 16px 0;
+}
+
+.sick-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.sick-table th {
+  text-align: left;
+  padding: 10px 8px;
+  background: #f5f5f5;
+  border-bottom: 2px solid #ddd;
+  font-weight: 600;
+  font-size: 12px;
+  color: #666;
+}
+
+.sick-table td {
+  padding: 10px 8px;
+  border-bottom: 1px solid #eee;
+}
+
+.sick-table tbody tr:hover {
+  background: #f9f9f9;
+}
+
+.no-data {
+  text-align: center;
+  color: #999;
+  font-style: italic;
+  padding: 20px !important;
+}
+
+.btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  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);
+}
+
+.btn-delete {
+  background: #f44336;
+  color: white;
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+.btn-delete:hover:not(:disabled) {
+  background: #da190b;
+}
+</style>
+