Add invite routes to backend and frontend; implement routing and UI components for invitation management

backend/create-invitation-table.sql

@@ -0,0 +1,28 @@
+-- SQL Script: Invitation-Tabelle erstellen
+-- Speichert gesendete Einladungen mit Spam-Schutz
+-- Ausführen mit: mysql -u root -p stechuhr < create-invitation-table.sql
+
+USE stechuhr;
+
+-- Erstelle Invitation-Tabelle falls nicht vorhanden
+CREATE TABLE IF NOT EXISTS invitation (
+  id BIGINT AUTO_INCREMENT PRIMARY KEY,
+  inviter_user_id BIGINT NOT NULL,
+  email VARCHAR(255) NOT NULL,
+  token VARCHAR(255) NOT NULL UNIQUE,
+  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  expires_at DATETIME NOT NULL,
+  status VARCHAR(20) NOT NULL DEFAULT 'pending',
+  
+  -- Foreign Keys
+  CONSTRAINT fk_invitation_user FOREIGN KEY (inviter_user_id) 
+    REFERENCES user(id) ON DELETE CASCADE,
+  
+  -- Indices für Performance
+  INDEX idx_invitation_token (token),
+  INDEX idx_invitation_email_created (email, created_at),
+  INDEX idx_invitation_status (status)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+SELECT 'Invitation-Tabelle erfolgreich erstellt oder bereits vorhanden.' AS status;
+

backend/src/config/database.js

@@ -82,6 +82,7 @@ class Database {
     const SickType = require('../models/SickType');
     const Timefix = require('../models/Timefix');
     const Timewish = require('../models/Timewish');
+    const Invitation = require('../models/Invitation');
 
     // Models mit Sequelize-Instanz initialisieren
     User.initialize(this.sequelize);
@@ -98,6 +99,7 @@ class Database {
     SickType.initialize(this.sequelize);
     Timefix.initialize(this.sequelize);
     Timewish.initialize(this.sequelize);
+    Invitation.initialize(this.sequelize);
 
     // Assoziationen definieren
     this.defineAssociations();
@@ -109,7 +111,7 @@ class Database {
    * Model-Assoziationen definieren
    */
   defineAssociations() {
-    const { User, Worklog, AuthInfo, AuthToken, AuthIdentity, State, WeeklyWorktime, Holiday, HolidayState, Vacation, Sick, SickType, Timefix, Timewish } = this.sequelize.models;
+    const { User, Worklog, AuthInfo, AuthToken, AuthIdentity, State, WeeklyWorktime, Holiday, HolidayState, Vacation, Sick, SickType, Timefix, Timewish, Invitation } = this.sequelize.models;
 
     // User Assoziationen
     User.hasMany(Worklog, { foreignKey: 'user_id', as: 'worklogs' });
@@ -175,6 +177,10 @@ class Database {
     // Timewish Assoziationen
     Timewish.belongsTo(User, { foreignKey: 'user_id', as: 'user' });
     User.hasMany(Timewish, { foreignKey: 'user_id', as: 'timewishes' });
+    
+    // Invitation Assoziationen
+    Invitation.belongsTo(User, { foreignKey: 'inviter_user_id', as: 'inviter' });
+    User.hasMany(Invitation, { foreignKey: 'inviter_user_id', as: 'invitations' });
   }
 
   /**

backend/src/controllers/InviteController.js

@@ -0,0 +1,63 @@
+const InviteService = require('../services/InviteService');
+
+/**
+ * Controller für Einladungen
+ * Verarbeitet HTTP-Requests und delegiert an InviteService
+ */
+class InviteController {
+  /**
+   * Sendet eine Einladung
+   */
+  async sendInvite(req, res) {
+    try {
+      const userId = req.user?.id || 1;
+      const { email } = req.body;
+      
+      if (!email) {
+        return res.status(400).json({ 
+          message: 'Email-Adresse ist erforderlich' 
+        });
+      }
+      
+      const invitation = await InviteService.sendInvite(userId, email);
+      res.status(201).json(invitation);
+    } catch (error) {
+      console.error('Fehler beim Senden der Einladung:', error);
+      
+      // Spezifische Fehlermeldungen
+      if (error.message.includes('bereits eingeladen')) {
+        return res.status(429).json({ message: error.message }); // Too Many Requests
+      }
+      
+      if (error.message.includes('bereits registriert')) {
+        return res.status(409).json({ message: error.message }); // Conflict
+      }
+      
+      res.status(500).json({ 
+        message: error.message || 'Fehler beim Senden der Einladung'
+      });
+    }
+  }
+
+  /**
+   * Holt alle Einladungen des aktuellen Users
+   */
+  async getMyInvitations(req, res) {
+    try {
+      const userId = req.user?.id || 1;
+      const activeOnly = req.query.activeOnly === 'true';
+      
+      const invitations = await InviteService.getUserInvitations(userId, activeOnly);
+      res.json(invitations);
+    } catch (error) {
+      console.error('Fehler beim Abrufen der Einladungen:', error);
+      res.status(500).json({ 
+        message: 'Fehler beim Abrufen der Einladungen',
+        error: error.message 
+      });
+    }
+  }
+}
+
+module.exports = new InviteController();
+

backend/src/index.js

@@ -106,6 +106,10 @@ app.use('/api/timewish', authenticateToken, timewishRouter);
 const rolesRouter = require('./routes/roles');
 app.use('/api/roles', authenticateToken, rolesRouter);
 
+// Invite routes (geschützt) - MIT ID-Hashing
+const inviteRouter = require('./routes/invite');
+app.use('/api/invite', authenticateToken, inviteRouter);
+
 // Error handling middleware
 app.use((err, req, res, next) => {
   console.error(err.stack);

backend/src/models/Invitation.js

@@ -0,0 +1,83 @@
+const { Model, DataTypes } = require('sequelize');
+
+/**
+ * Invitation Model
+ * Repräsentiert die invitation-Tabelle (falls vorhanden)
+ * Wenn nicht vorhanden, erstellen wir eine einfache In-Memory-Lösung
+ */
+class Invitation extends Model {
+  static initialize(sequelize) {
+    Invitation.init(
+      {
+        id: {
+          type: DataTypes.BIGINT,
+          primaryKey: true,
+          autoIncrement: true,
+          allowNull: false
+        },
+        inviter_user_id: {
+          type: DataTypes.BIGINT,
+          allowNull: false,
+          references: {
+            model: 'user',
+            key: 'id'
+          }
+        },
+        email: {
+          type: DataTypes.STRING(255),
+          allowNull: false
+        },
+        token: {
+          type: DataTypes.STRING(255),
+          allowNull: false,
+          unique: true
+        },
+        created_at: {
+          type: DataTypes.DATE,
+          allowNull: false,
+          defaultValue: DataTypes.NOW
+        },
+        expires_at: {
+          type: DataTypes.DATE,
+          allowNull: false
+        },
+        status: {
+          type: DataTypes.STRING(20),
+          allowNull: false,
+          defaultValue: 'pending' // pending, accepted, expired
+        }
+      },
+      {
+        sequelize,
+        tableName: 'invitation',
+        timestamps: false,
+        indexes: [
+          {
+            name: 'idx_invitation_token',
+            fields: ['token'],
+            unique: true
+          },
+          {
+            name: 'idx_invitation_email_created',
+            fields: ['email', 'created_at']
+          }
+        ]
+      }
+    );
+
+    return Invitation;
+  }
+
+  /**
+   * Definiert Assoziationen mit anderen Models
+   */
+  static associate(models) {
+    Invitation.belongsTo(models.User, {
+      foreignKey: 'inviter_user_id',
+      as: 'inviter'
+    });
+  }
+}
+
+module.exports = Invitation;
+

backend/src/models/index.js

@@ -15,6 +15,7 @@ const Sick = require('./Sick');
 const SickType = require('./SickType');
 const Timefix = require('./Timefix');
 const Timewish = require('./Timewish');
+const Invitation = require('./Invitation');
 
 module.exports = {
   User,
@@ -28,6 +29,7 @@ module.exports = {
   Sick,
   SickType,
   Timefix,
-  Timewish
+  Timewish,
+  Invitation
 };
 

backend/src/routes/invite.js

@@ -0,0 +1,16 @@
+const express = require('express');
+const router = express.Router();
+const InviteController = require('../controllers/InviteController');
+
+/**
+ * Routen für Einladungen
+ */
+
+// GET /api/invite - Eigene Einladungen abrufen
+router.get('/', InviteController.getMyInvitations.bind(InviteController));
+
+// POST /api/invite - Neue Einladung senden
+router.post('/', InviteController.sendInvite.bind(InviteController));
+
+module.exports = router;
+

backend/src/services/InviteService.js

@@ -0,0 +1,195 @@
+const database = require('../config/database');
+const { Op } = require('sequelize');
+const nodemailer = require('nodemailer');
+
+/**
+ * Service-Klasse für Einladungen
+ * Verwaltet Einladungs-Emails mit Spam-Schutz
+ */
+class InviteService {
+  constructor() {
+    this.emailTransporter = null;
+    this.initializeEmailTransporter();
+  }
+
+  /**
+   * Initialisiert den Email-Transporter
+   */
+  initializeEmailTransporter() {
+    if (!process.env.EMAIL_HOST) {
+      console.warn('⚠️  Email-Konfiguration fehlt - Einladungen können nicht versendet werden');
+      return;
+    }
+
+    this.emailTransporter = nodemailer.createTransport({
+      host: process.env.EMAIL_HOST,
+      port: parseInt(process.env.EMAIL_PORT) || 587,
+      secure: process.env.EMAIL_SECURE === 'true',
+      auth: {
+        user: process.env.EMAIL_USER,
+        pass: process.env.EMAIL_PASSWORD
+      }
+    });
+  }
+
+  /**
+   * Sendet eine Einladungs-Email
+   * @param {number} inviterUserId - ID des einladenden Users
+   * @param {string} inviteeEmail - Email-Adresse des Eingeladenen
+   * @returns {Promise<Object>} Einladungs-Info
+   */
+  async sendInvite(inviterUserId, inviteeEmail) {
+    const { User, Invitation } = database.getModels();
+
+    // Validiere Email
+    if (!inviteeEmail || !this._isValidEmail(inviteeEmail)) {
+      throw new Error('Ungültige Email-Adresse');
+    }
+
+    // Hole einladenden User
+    const inviter = await User.findByPk(inviterUserId);
+    if (!inviter) {
+      throw new Error('Benutzer nicht gefunden');
+    }
+
+    // Spam-Schutz: Prüfe ob diese Email heute schon eingeladen wurde
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    
+    const existingInvite = await Invitation.findOne({
+      where: {
+        email: inviteeEmail,
+        created_at: {
+          [Op.gte]: today
+        }
+      }
+    });
+
+    if (existingInvite) {
+      throw new Error('Diese Email-Adresse wurde heute bereits eingeladen. Bitte versuchen Sie es morgen erneut.');
+    }
+
+    // Prüfe ob Email bereits registriert ist
+    const { AuthInfo } = database.getModels();
+    const existingUser = await AuthInfo.findOne({
+      where: { email: inviteeEmail }
+    });
+
+    if (existingUser) {
+      throw new Error('Diese Email-Adresse ist bereits registriert');
+    }
+
+    // Erstelle Einladungs-Token
+    const token = this._generateToken();
+    const expiresAt = new Date();
+    expiresAt.setDate(expiresAt.getDate() + 7); // 7 Tage gültig
+
+    // Speichere Einladung
+    const invitation = await Invitation.create({
+      inviter_user_id: inviterUserId,
+      email: inviteeEmail,
+      token,
+      expires_at: expiresAt,
+      created_at: new Date(),
+      status: 'pending'
+    });
+
+    // Sende Email (falls konfiguriert)
+    if (this.emailTransporter) {
+      await this._sendInviteEmail(inviteeEmail, inviter.full_name, token);
+    } else {
+      console.warn('⚠️  Email-Transporter nicht konfiguriert - Einladung wurde gespeichert, aber keine Email versendet');
+    }
+
+    return {
+      id: invitation.id,
+      email: inviteeEmail,
+      token,
+      expiresAt,
+      status: 'sent'
+    };
+  }
+
+  /**
+   * Holt alle Einladungen eines Users (optional: nur aktive)
+   * @param {number} userId - User-ID
+   * @param {boolean} activeOnly - Nur aktive (nicht abgelaufene) Einladungen
+   * @returns {Promise<Array>} Array von Einladungen
+   */
+  async getUserInvitations(userId, activeOnly = false) {
+    const { Invitation } = database.getModels();
+    
+    const where = {
+      inviter_user_id: userId
+    };
+
+    if (activeOnly) {
+      where.expires_at = { [Op.gt]: new Date() };
+      where.status = 'pending';
+    }
+
+    const invitations = await Invitation.findAll({
+      where,
+      order: [['created_at', 'DESC']],
+      raw: true
+    });
+
+    return invitations.map(inv => ({
+      id: inv.id,
+      email: inv.email,
+      createdAt: inv.created_at,
+      expiresAt: inv.expires_at,
+      status: inv.status,
+      isExpired: new Date() > new Date(inv.expires_at)
+    }));
+  }
+
+  /**
+   * Validiert Email-Format
+   */
+  _isValidEmail(email) {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  }
+
+  /**
+   * Generiert einen zufälligen Token
+   */
+  _generateToken() {
+    return require('crypto').randomBytes(32).toString('hex');
+  }
+
+  /**
+   * Sendet die Einladungs-Email
+   */
+  async _sendInviteEmail(toEmail, inviterName, token) {
+    const appUrl = process.env.APP_URL || 'http://localhost:5010';
+    const registerUrl = `${appUrl}/register?token=${token}`;
+
+    const mailOptions = {
+      from: process.env.EMAIL_FROM || process.env.EMAIL_USER,
+      to: toEmail,
+      subject: 'Einladung zur Stechuhr - Zeiterfassungssystem',
+      html: `
+        <h2>Einladung zur Stechuhr</h2>
+        <p>Hallo,</p>
+        <p><strong>${inviterName}</strong> hat Sie eingeladen, die Stechuhr-Zeiterfassung zu nutzen.</p>
+        <p>Klicken Sie auf den folgenden Link, um Ihren Account zu erstellen:</p>
+        <p><a href="${registerUrl}" style="display: inline-block; padding: 12px 24px; background: #4CAF50; color: white; text-decoration: none; border-radius: 4px;">Account erstellen</a></p>
+        <p>Oder kopieren Sie diesen Link in Ihren Browser:</p>
+        <p style="word-break: break-all; color: #666;">${registerUrl}</p>
+        <p><small>Diese Einladung ist 7 Tage gültig.</small></p>
+        <hr>
+        <p style="color: #999; font-size: 12px;">
+          Wenn Sie diese Einladung nicht erwartet haben, können Sie diese Email ignorieren.
+        </p>
+      `
+    };
+
+    await this.emailTransporter.sendMail(mailOptions);
+    console.log(`✉️  Einladungs-Email an ${toEmail} versendet`);
+  }
+}
+
+module.exports = new InviteService();
+

frontend/src/App.vue

@@ -77,6 +77,7 @@ const pageTitle = computed(() => {
     'settings-profile': 'Persönliches',
     'settings-password': 'Passwort ändern',
     'settings-timewish': 'Zeitwünsche',
+    'settings-invite': 'Einladen',
     'entries': 'Einträge',
     'stats': 'Statistiken'
   }

frontend/src/router/index.js

@@ -20,6 +20,7 @@ import Profile from '../views/Profile.vue'
 import PasswordChange from '../views/PasswordChange.vue'
 import Timewish from '../views/Timewish.vue'
 import Roles from '../views/Roles.vue'
+import Invite from '../views/Invite.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -126,6 +127,12 @@ const router = createRouter({
       component: Timewish,
       meta: { requiresAuth: true }
     },
+    {
+      path: '/settings/invite',
+      name: 'settings-invite',
+      component: Invite,
+      meta: { requiresAuth: true }
+    },
     {
       path: '/entries',
       name: 'entries',

frontend/src/views/Invite.vue

@@ -0,0 +1,342 @@
+<template>
+  <div class="invite-page">
+    <div class="card">
+      <!-- Formular zum Senden einer Einladung -->
+      <form @submit.prevent="sendInvite" class="invite-form">
+        <h3>Einladung versenden</h3>
+        
+        <div class="form-group">
+          <label for="email">Email-Adresse</label>
+          <input 
+            type="email" 
+            id="email" 
+            v-model="form.email"
+            placeholder="name@beispiel.de"
+            required
+          >
+          <small class="help-text">
+            Der Empfänger erhält eine Email mit einem Registrierungslink, der 7 Tage gültig ist.
+          </small>
+        </div>
+
+        <div class="form-actions">
+          <button type="submit" class="btn btn-primary" :disabled="loading">
+            {{ loading ? 'Wird gesendet...' : 'Einladung senden' }}
+          </button>
+        </div>
+      </form>
+
+      <hr>
+
+      <!-- Tabelle mit gesendeten Einladungen -->
+      <h3>Gesendete Einladungen</h3>
+      <table class="invitations-table">
+        <thead>
+          <tr>
+            <th>Email-Adresse</th>
+            <th>Gesendet am</th>
+            <th>Gültig bis</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="invitations.length === 0">
+            <td colspan="4" class="no-data">Keine Einladungen versendet</td>
+          </tr>
+          <tr v-for="invitation in invitations" :key="invitation.id">
+            <td>{{ invitation.email }}</td>
+            <td>{{ formatDateTime(invitation.createdAt) }}</td>
+            <td>{{ formatDateTime(invitation.expiresAt) }}</td>
+            <td>
+              <span class="status-badge" :class="getStatusClass(invitation)">
+                {{ getStatusText(invitation) }}
+              </span>
+            </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 invitations = ref([])
+const loading = ref(false)
+
+const { showModal, modalConfig, alert, confirm, onConfirm, onCancel } = useModal()
+
+const form = ref({
+  email: ''
+})
+
+// Lade alle Einladungen
+async function loadInvitations() {
+  try {
+    const response = await fetch('http://localhost:3010/api/invite', {
+      headers: {
+        'Authorization': `Bearer ${authStore.token}`
+      }
+    })
+    
+    if (!response.ok) {
+      throw new Error('Fehler beim Laden der Einladungen')
+    }
+    
+    invitations.value = await response.json()
+  } catch (error) {
+    console.error('Fehler beim Laden der Einladungen:', error)
+  }
+}
+
+// Sende Einladung
+async function sendInvite() {
+  if (!form.value.email) {
+    await alert('Bitte geben Sie eine Email-Adresse ein', 'Fehlende Angaben')
+    return
+  }
+  
+  try {
+    loading.value = true
+    const response = await fetch('http://localhost:3010/api/invite', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${authStore.token}`
+      },
+      body: JSON.stringify({
+        email: form.value.email
+      })
+    })
+    
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error.message || 'Fehler beim Senden der Einladung')
+    }
+    
+    await alert('Einladung erfolgreich versendet!', 'Erfolg')
+    
+    // Formular zurücksetzen
+    form.value.email = ''
+    
+    // Liste neu laden
+    await loadInvitations()
+  } catch (error) {
+    console.error('Fehler beim Senden der Einladung:', error)
+    await alert(`Fehler: ${error.message}`, 'Fehler')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Formatiere Datum und Zeit
+function formatDateTime(dateStr) {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  return date.toLocaleString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+// Status-Text ermitteln
+function getStatusText(invitation) {
+  if (invitation.status === 'accepted') {
+    return 'Angenommen'
+  }
+  if (invitation.isExpired) {
+    return 'Abgelaufen'
+  }
+  return 'Ausstehend'
+}
+
+// Status-CSS-Klasse ermitteln
+function getStatusClass(invitation) {
+  if (invitation.status === 'accepted') {
+    return 'accepted'
+  }
+  if (invitation.isExpired) {
+    return 'expired'
+  }
+  return 'pending'
+}
+
+// Initiales Laden
+onMounted(() => {
+  loadInvitations()
+})
+</script>
+
+<style scoped>
+.invite-page {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.invite-form h3 {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+
+.form-group label {
+  font-weight: 600;
+  font-size: 14px;
+  color: #333;
+}
+
+.form-group input {
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #4CAF50;
+  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
+}
+
+.help-text {
+  font-size: 12px;
+  color: #666;
+  font-style: italic;
+}
+
+.form-actions {
+  margin-top: 8px;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #eee;
+  margin: 24px 0;
+}
+
+h3 {
+  margin: 0 0 16px 0;
+  font-size: 16px;
+  color: #333;
+}
+
+.invitations-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.invitations-table th {
+  text-align: left;
+  padding: 10px 8px;
+  background: #f5f5f5;
+  border-bottom: 2px solid #ddd;
+  font-weight: 600;
+  font-size: 12px;
+  color: #666;
+}
+
+.invitations-table td {
+  padding: 10px 8px;
+  border-bottom: 1px solid #eee;
+}
+
+.invitations-table tbody tr:hover {
+  background: #f9f9f9;
+}
+
+.no-data {
+  text-align: center;
+  color: #999;
+  font-style: italic;
+  padding: 20px !important;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.status-badge.pending {
+  background: #fff3cd;
+  color: #856404;
+}
+
+.status-badge.accepted {
+  background: #d4edda;
+  color: #155724;
+}
+
+.status-badge.expired {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+.btn {
+  padding: 10px 20px;
+  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>
+

frontend/src/views/Workdays.vue

@@ -144,7 +144,8 @@ onMounted(() => {
   border-bottom: none;
 }
 
-.stats-table th {
+.stats-table th,
+.stats-table td {
   text-align: left;
   padding: 12px 16px;
   font-weight: 600;