Geburtstag-Management-Modal mit Reset + Send + Auto-Flag

Neuer Cake-Button neben dem Geburtsdatum in den Stammdaten öffnet ein Modal
mit drei Funktionen:

1. **Gruß-Marker zurücksetzen** (lastBirthdayGreetingYear → null)
   - Für Debugging oder als Fallback, wenn der Kunde den Gruß erneut sehen soll
   - Mit Bestätigungsdialog

2. **Geburtstagsgruß jetzt senden** (Email / WhatsApp / Telegram / Signal)
   - Email: direkt via System-SMTP mit HTML-Template (Du/Sie-abhängig)
   - WhatsApp/Telegram/Signal: öffnet vorbefülltes Fenster mit Gruß-Text
   - Text beachtet Du/Sie-Verhältnis (pronomen, possessiv, etc.)
   - Mit Bestätigungsdialog

3. **Automatisch senden** – neue Einstellung am Customer
   - autoBirthdayGreeting (Boolean) + autoBirthdayChannel (String)
   - Für späteren Cron-basierten Automatik-Versand vorbereitet

Backend:
- birthday.service.ts: resetBirthdayGreeting, buildBirthdayGreetingText, getBirthdayGreetingData
- birthday.controller.ts: resetBirthdayGreeting, sendBirthdayGreeting
- Routes: POST /birthdays/:customerId/reset + /send
- Audit-Log bei beiden Aktionen

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

frontend/src/components/BirthdayManagementModal.tsx

@@ -0,0 +1,302 @@
+import { useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { birthdayApi, customerApi } from '../services/api';
+import Button from './ui/Button';
+import { X, Cake, RotateCcw, Send, AlertTriangle, Loader2, Check } from 'lucide-react';
+import type { Customer } from '../types';
+
+interface Props {
+  customer: Customer;
+  onClose: () => void;
+}
+
+type Channel = 'email' | 'whatsapp' | 'telegram' | 'signal';
+
+const channelLabels: Record<Channel, { label: string; icon: string }> = {
+  email: { label: 'Per E-Mail', icon: '✉️' },
+  whatsapp: { label: 'Per WhatsApp', icon: '💬' },
+  telegram: { label: 'Per Telegram', icon: '📨' },
+  signal: { label: 'Per Signal', icon: '📱' },
+};
+
+type ConfirmState =
+  | { type: 'none' }
+  | { type: 'reset' }
+  | { type: 'send'; channel: Channel };
+
+export default function BirthdayManagementModal({ customer, onClose }: Props) {
+  const queryClient = useQueryClient();
+  const [confirm, setConfirm] = useState<ConfirmState>({ type: 'none' });
+  const [autoEnabled, setAutoEnabled] = useState(customer.autoBirthdayGreeting ?? false);
+  const [autoChannel, setAutoChannel] = useState<Channel>(
+    (customer.autoBirthdayChannel as Channel) || 'email',
+  );
+  const [saved, setSaved] = useState(false);
+  const [sentChannel, setSentChannel] = useState<Channel | null>(null);
+  const [reset, setReset] = useState(false);
+
+  const resetMutation = useMutation({
+    mutationFn: () => birthdayApi.resetGreeting(customer.id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['customer', customer.id] });
+      setReset(true);
+      setTimeout(() => setReset(false), 2500);
+    },
+  });
+
+  const sendMutation = useMutation({
+    mutationFn: (channel: Channel) => birthdayApi.sendGreeting(customer.id, channel),
+    onSuccess: (result, channel) => {
+      const text = result.data?.messageText || '';
+      if (channel === 'whatsapp') {
+        window.open(`https://wa.me/?text=${encodeURIComponent(text)}`, '_blank');
+      } else if (channel === 'telegram') {
+        window.open(
+          `https://t.me/share/url?url=&text=${encodeURIComponent(text)}`,
+          '_blank',
+        );
+      } else if (channel === 'signal') {
+        window.open(`signal://send?text=${encodeURIComponent(text)}`, '_blank');
+      }
+      setSentChannel(channel);
+      setTimeout(() => setSentChannel(null), 2500);
+    },
+  });
+
+  const saveAutoMutation = useMutation({
+    mutationFn: () =>
+      customerApi.update(customer.id, {
+        autoBirthdayGreeting: autoEnabled,
+        autoBirthdayChannel: autoEnabled ? autoChannel : null,
+      } as any),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['customer', customer.id] });
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    },
+  });
+
+  const handleConfirmAction = () => {
+    if (confirm.type === 'reset') {
+      resetMutation.mutate();
+    } else if (confirm.type === 'send') {
+      sendMutation.mutate(confirm.channel);
+    }
+    setConfirm({ type: 'none' });
+  };
+
+  const birthDateDisplay = customer.birthDate
+    ? new Date(customer.birthDate).toLocaleDateString('de-DE', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+      })
+    : '-';
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
+      <div className="bg-white rounded-2xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
+        {/* Header */}
+        <div className="bg-gradient-to-r from-pink-500 to-purple-500 p-6 text-white relative">
+          <button
+            onClick={onClose}
+            className="absolute top-3 right-3 text-white/80 hover:text-white transition-colors"
+            aria-label="Schließen"
+          >
+            <X className="w-5 h-5" />
+          </button>
+          <div className="flex items-center gap-3">
+            <Cake className="w-8 h-8" />
+            <div>
+              <h2 className="text-xl font-bold">Geburtstag verwalten</h2>
+              <p className="text-sm text-white/90">
+                {customer.companyName || `${customer.firstName} ${customer.lastName}`}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="p-6 space-y-6">
+          {/* Info */}
+          <div className="bg-gray-50 rounded-lg p-4 text-sm space-y-1">
+            <div className="flex justify-between">
+              <span className="text-gray-500">Geburtsdatum:</span>
+              <span className="font-medium">{birthDateDisplay}</span>
+            </div>
+            {customer.birthPlace && (
+              <div className="flex justify-between">
+                <span className="text-gray-500">Geburtsort:</span>
+                <span className="font-medium">{customer.birthPlace}</span>
+              </div>
+            )}
+            <div className="flex justify-between">
+              <span className="text-gray-500">Anrede per:</span>
+              <span className="font-medium">
+                {customer.useInformalAddress ? 'Du (informell)' : 'Sie (formell)'}
+              </span>
+            </div>
+          </div>
+
+          {/* Gruß zurücksetzen */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
+              <RotateCcw className="w-4 h-4" />
+              Gruß-Marker zurücksetzen
+            </h3>
+            <p className="text-xs text-gray-500 mb-3">
+              Setzt die Markierung zurück, dass dem Kunden dieses Jahr bereits der Geburtstagsgruß
+              angezeigt wurde. Beim nächsten Portal-Login erscheint das Modal wieder.
+            </p>
+            <Button
+              variant="secondary"
+              onClick={() => setConfirm({ type: 'reset' })}
+              disabled={resetMutation.isPending || reset}
+              className="w-full"
+            >
+              {resetMutation.isPending ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Zurücksetzen…
+                </>
+              ) : reset ? (
+                <>
+                  <Check className="w-4 h-4 mr-2 text-green-600" />
+                  Zurückgesetzt!
+                </>
+              ) : (
+                <>
+                  <RotateCcw className="w-4 h-4 mr-2" />
+                  Gruß-Marker zurücksetzen
+                </>
+              )}
+            </Button>
+          </div>
+
+          {/* Gruß senden */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
+              <Send className="w-4 h-4" />
+              Geburtstagsgruß jetzt senden
+            </h3>
+            <p className="text-xs text-gray-500 mb-3">
+              Sendet einen persönlichen Geburtstagsgruß über den gewählten Kanal.
+            </p>
+            <div className="grid grid-cols-2 gap-2">
+              {(Object.entries(channelLabels) as [Channel, typeof channelLabels[Channel]][]).map(
+                ([ch, info]) => (
+                  <button
+                    key={ch}
+                    onClick={() => setConfirm({ type: 'send', channel: ch })}
+                    disabled={sendMutation.isPending}
+                    className="flex items-center gap-2 px-3 py-2 border rounded-lg text-sm hover:bg-gray-50 disabled:opacity-50 transition-colors"
+                  >
+                    <span>{info.icon}</span>
+                    <span className="flex-1 text-left">{info.label}</span>
+                    {sentChannel === ch && <Check className="w-4 h-4 text-green-600" />}
+                  </button>
+                ),
+              )}
+            </div>
+            {sendMutation.isError && (
+              <p className="text-xs text-red-600 mt-2">
+                {(sendMutation.error as any)?.message || 'Fehler beim Senden'}
+              </p>
+            )}
+          </div>
+
+          {/* Automatisch senden */}
+          <div className="pt-4 border-t">
+            <h3 className="text-sm font-semibold text-gray-700 mb-2">Automatisch senden</h3>
+            <label className="flex items-start gap-2 cursor-pointer mb-3">
+              <input
+                type="checkbox"
+                checked={autoEnabled}
+                onChange={(e) => setAutoEnabled(e.target.checked)}
+                className="mt-0.5"
+              />
+              <div className="text-sm">
+                <span className="font-medium">
+                  Geburtstagsgruß automatisch am Geburtstag senden
+                </span>
+                <p className="text-xs text-gray-500">
+                  Der Gruß wird am Geburtstag des Kunden automatisch über den gewählten Kanal
+                  versendet.
+                </p>
+              </div>
+            </label>
+            {autoEnabled && (
+              <div className="pl-6 space-y-2">
+                <label className="block text-xs text-gray-600 mb-1">Kanal</label>
+                <select
+                  value={autoChannel}
+                  onChange={(e) => setAutoChannel(e.target.value as Channel)}
+                  className="w-full border rounded px-3 py-2 text-sm"
+                >
+                  {(Object.entries(channelLabels) as [Channel, typeof channelLabels[Channel]][]).map(
+                    ([ch, info]) => (
+                      <option key={ch} value={ch}>
+                        {info.icon} {info.label}
+                      </option>
+                    ),
+                  )}
+                </select>
+                <p className="text-xs text-amber-600">
+                  Hinweis: WhatsApp/Telegram/Signal erfordern aktuell einen manuellen Klick im
+                  Browser. Aktuell wird nur automatischer E-Mail-Versand unterstützt.
+                </p>
+              </div>
+            )}
+            <Button
+              onClick={() => saveAutoMutation.mutate()}
+              disabled={saveAutoMutation.isPending || saved}
+              className="mt-3 w-full"
+              variant="secondary"
+            >
+              {saveAutoMutation.isPending ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Speichere…
+                </>
+              ) : saved ? (
+                <>
+                  <Check className="w-4 h-4 mr-2 text-green-600" />
+                  Gespeichert
+                </>
+              ) : (
+                'Einstellung speichern'
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Bestätigungs-Dialog */}
+      {confirm.type !== 'none' && (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 px-4">
+          <div className="bg-white rounded-xl shadow-2xl max-w-md w-full p-6">
+            <div className="flex items-start gap-3 mb-4">
+              <div className="bg-amber-100 p-2 rounded-full">
+                <AlertTriangle className="w-5 h-5 text-amber-600" />
+              </div>
+              <div className="flex-1">
+                <h3 className="font-semibold text-gray-900 mb-1">Bist du sicher?</h3>
+                <p className="text-sm text-gray-600">
+                  {confirm.type === 'reset'
+                    ? 'Möchtest du den Geburtstagsgruß-Marker wirklich zurücksetzen? Beim nächsten Portal-Login sieht der Kunde das Geburtstagsmodal erneut.'
+                    : `Möchtest du den Geburtstagsgruß wirklich ${channelLabels[confirm.channel].label.toLowerCase()} senden?`}
+                </p>
+              </div>
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button variant="secondary" onClick={() => setConfirm({ type: 'none' })}>
+                Abbrechen
+              </Button>
+              <Button onClick={handleConfirmAction}>Ja, ausführen</Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/customers/CustomerDetail.tsx

@@ -13,8 +13,9 @@ import Modal from '../../components/ui/Modal';
 import Input from '../../components/ui/Input';
 import Select from '../../components/ui/Select';
 import FileUpload from '../../components/ui/FileUpload';
-import { Edit, Plus, Trash2, MapPin, CreditCard, FileText, Gauge, Eye, EyeOff, Download, Globe, UserPlus, X, Search, Mail, Copy, Check, ChevronDown, ChevronRight, Info, Shield, ShieldCheck, ShieldX, ShieldAlert, Lock, ArrowLeft } from 'lucide-react';
+import { Edit, Plus, Trash2, MapPin, CreditCard, FileText, Gauge, Eye, EyeOff, Download, Globe, UserPlus, X, Search, Mail, Copy, Check, ChevronDown, ChevronRight, Info, Shield, ShieldCheck, ShieldX, ShieldAlert, Lock, ArrowLeft, Cake } from 'lucide-react';
 import CopyButton, { CopyableBlock } from '../../components/ui/CopyButton';
+import BirthdayManagementModal from '../../components/BirthdayManagementModal';
 import { formatDate } from '../../utils/dateFormat';
 import { getContractTypeInfo } from '../../utils/contractInfo';
 import type { Address, BankCard, IdentityDocument, Meter, Customer, CustomerRepresentative, CustomerSummary, CustomerConsent, ConsentType, ConsentStatus, RepresentativeAuthorization } from '../../types';
@@ -42,6 +43,7 @@ export default function CustomerDetail({ portalCustomerId }: { portalCustomerId?
   const [showDocumentModal, setShowDocumentModal] = useState(false);
   const [showMeterModal, setShowMeterModal] = useState(false);
   const [showStressfreiEmailModal, setShowStressfreiEmailModal] = useState(false);
+  const [showBirthdayModal, setShowBirthdayModal] = useState(false);
   const [showInactive, setShowInactive] = useState(false);
   const [editingBankCard, setEditingBankCard] = useState<BankCard | null>(null);
   const [editingDocument, setEditingDocument] = useState<IdentityDocument | null>(null);
@@ -313,6 +315,16 @@ export default function CustomerDetail({ portalCustomerId }: { portalCustomerId?
                 <dd className="flex items-center gap-1">
                   {new Date(c.birthDate).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })}
                   <CopyButton value={new Date(c.birthDate).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })} />
+                  {!isCustomerPortal && hasPermission('customers:update') && (
+                    <button
+                      type="button"
+                      onClick={() => setShowBirthdayModal(true)}
+                      className="ml-1 p-1 hover:bg-pink-50 rounded transition-colors"
+                      title="Geburtstag verwalten"
+                    >
+                      <Cake className="w-4 h-4 text-pink-500" />
+                    </button>
+                  )}
                 </dd>
               </div>
             )}
@@ -451,6 +463,13 @@ export default function CustomerDetail({ portalCustomerId }: { portalCustomerId?
         email={editingStressfreiEmail}
         customerEmail={customer?.data?.email}
       />
+
+      {showBirthdayModal && c && (
+        <BirthdayManagementModal
+          customer={c}
+          onClose={() => setShowBirthdayModal(false)}
+        />
+      )}
     </div>
   );
 }

frontend/src/services/api.ts

@@ -1620,6 +1620,17 @@ export const birthdayApi = {
     const res = await api.post<ApiResponse<void>>('/birthdays/my-birthday/acknowledge');
     return res.data;
   },
+  resetGreeting: async (customerId: number) => {
+    const res = await api.post<ApiResponse<void>>(`/birthdays/${customerId}/reset`);
+    return res.data;
+  },
+  sendGreeting: async (customerId: number, channel: 'email' | 'whatsapp' | 'telegram' | 'signal') => {
+    const res = await api.post<ApiResponse<{ channel: string; messageText: string }>>(
+      `/birthdays/${customerId}/send`,
+      { channel },
+    );
+    return res.data;
+  },
 };
 
 export default api;

frontend/src/types/index.ts

@@ -63,6 +63,8 @@ export interface Customer {
   type: 'PRIVATE' | 'BUSINESS';
   salutation?: string;
   useInformalAddress?: boolean;
+  autoBirthdayGreeting?: boolean;
+  autoBirthdayChannel?: string | null;
   firstName: string;
   lastName: string;
   companyName?: string;