thomasandClaude Opus 4.8
360e04d677
"Bewerbung senden" now asks for an extra confirmation (with the recipient) before dispatching. Job offers gain adresse and ansprechpartner fields — shown, editable, and carried through the REST API upsert (Swagger updated). Taking an offer over now writes the employer address (street, number, city) and the contact person into the application's AI notes (llm_notizen), so the LLM can use them for the letter's Anschriftfeld and salutation. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
596 lines
44 KiB
Plaintext
596 lines
44 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<%- include('partials/head') %>
|
||
</head>
|
||
<body class="min-h-screen transition-colors duration-300 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100" id="body">
|
||
<%- include('partials/header', { hideSettings: true }) %>
|
||
|
||
<%
|
||
const statusColor = {
|
||
'Entwurf': 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
|
||
'Gesendet': 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200',
|
||
'Eingangsbestätigung': 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
|
||
'Vorstellungsgespräch': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
|
||
'Einstellung': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
|
||
'Absage': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
|
||
'Keine Rückmeldung': 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
|
||
};
|
||
const aktuellerStatus = (application.status && application.status.trim()) ? application.status.trim() : 'Ohne Status';
|
||
const today = new Date().toISOString().split('T')[0];
|
||
%>
|
||
|
||
<main class="container mx-auto px-4 py-8 max-w-3xl">
|
||
<!-- Back link -->
|
||
<a href="/" class="inline-flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400 hover:underline mb-6">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
||
</svg>
|
||
Zurück zur Übersicht
|
||
</a>
|
||
|
||
<!-- Title -->
|
||
<div class="flex flex-wrap items-center gap-3 mb-6">
|
||
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">
|
||
<%= application.firma %> <span class="text-gray-400 dark:text-gray-500">–</span> <%= application.stelle %>
|
||
</h1>
|
||
<span class="px-3 py-1 rounded-full text-sm font-medium <%= statusColor[aktuellerStatus] || 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' %>">
|
||
<%= aktuellerStatus %>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Application data -->
|
||
<section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
|
||
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Bewerbungsdaten</h2>
|
||
<form action="/bewerbung/<%= application.id %>" method="POST" class="space-y-4">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Datum *</label>
|
||
<input type="date" name="datum" required value="<%= application.datum %>"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Art der Bewerbung</label>
|
||
<select name="art" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
|
||
<option value="">-- Bitte wählen --</option>
|
||
<% artOptions.forEach(option => { %>
|
||
<option value="<%= option %>" <%= application.art === option ? 'selected' : '' %>><%= option %></option>
|
||
<% }); %>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Firma *</label>
|
||
<input type="text" name="firma" required value="<%= application.firma %>"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Stelle *</label>
|
||
<input type="text" name="stelle" required value="<%= application.stelle %>"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notizen</label>
|
||
<textarea name="notizen" rows="6"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white leading-relaxed"
|
||
placeholder="Allgemeine Notizen zur Bewerbung..."><%= application.notizen || '' %></textarea>
|
||
</div>
|
||
<div>
|
||
<label class="text-sm font-medium text-amber-700 dark:text-amber-400 mb-2 flex items-center gap-1.5">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
||
</svg>
|
||
Interne Notizen (nicht im PDF)
|
||
</label>
|
||
<textarea name="interne_notizen" rows="4"
|
||
class="w-full px-3 py-2 border border-amber-300 dark:border-amber-700 rounded-md bg-amber-50 dark:bg-gray-700 text-gray-800 dark:text-white leading-relaxed"
|
||
placeholder="Nur für dich – erscheint nicht im Export..."><%= application.interne_notizen || '' %></textarea>
|
||
</div>
|
||
<div class="flex justify-end">
|
||
<button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors">
|
||
Bewerbungsdaten speichern
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- Bewerbungsunterlagen (KI-generiert) -->
|
||
<% const genStatus = application.generierung_status; %>
|
||
<% if (genStatus || (anhaenge && anhaenge.length) || (application.stellenbeschreibung && application.stellenbeschreibung.trim())) { %>
|
||
<section id="unterlagen" class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8"
|
||
data-status="<%= genStatus || '' %>">
|
||
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
|
||
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Bewerbungsunterlagen</h2>
|
||
</div>
|
||
|
||
<!-- Generation status banner -->
|
||
<div id="genBanner">
|
||
<% if (!genStatus || genStatus === 'nicht_gestartet') { %>
|
||
<div class="flex items-center gap-3 rounded-lg bg-gray-50 dark:bg-gray-700/40 border border-gray-200 dark:border-gray-700 px-4 py-3 mb-4">
|
||
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>
|
||
<span class="text-sm text-gray-700 dark:text-gray-300">Noch keine Unterlagen generiert. Ergänze bei Bedarf unten Notizen (z. B. die vollständige Firmenanschrift) und starte die Generierung.</span>
|
||
</div>
|
||
<% } else if (genStatus === 'ausstehend') { %>
|
||
<div class="flex items-center gap-3 rounded-lg bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 px-4 py-3 mb-4">
|
||
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
||
</svg>
|
||
<span class="text-sm text-blue-800 dark:text-blue-200">Die KI erstellt gerade individuelle Bewerbungsunterlagen … Diese Seite aktualisiert sich automatisch.</span>
|
||
</div>
|
||
<% } else if (genStatus === 'fehler') { %>
|
||
<div class="rounded-lg bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 px-4 py-3 mb-4">
|
||
<div class="flex items-center gap-2 mb-1">
|
||
<svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
|
||
</svg>
|
||
<span class="text-sm font-semibold text-red-800 dark:text-red-200">Generierung fehlgeschlagen</span>
|
||
</div>
|
||
<p class="text-sm text-red-700 dark:text-red-300 ml-7"><%= application.generierung_fehler || 'Unbekannter Fehler.' %></p>
|
||
</div>
|
||
<% } else if (genStatus === 'fertig') { %>
|
||
<div class="flex items-center gap-2 rounded-lg bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 px-4 py-3 mb-4">
|
||
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>
|
||
<span class="text-sm text-green-800 dark:text-green-200">Unterlagen wurden erstellt. Bitte vor dem Versand prüfen und ggf. anpassen.</span>
|
||
</div>
|
||
<% } %>
|
||
</div>
|
||
|
||
<!-- Attachments -->
|
||
<div id="anhaengeListe">
|
||
<% if (anhaenge && anhaenge.length) { %>
|
||
<ul class="space-y-2">
|
||
<% anhaenge.forEach(a => { %>
|
||
<li class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 px-4 py-3">
|
||
<div class="flex items-center gap-3 min-w-0">
|
||
<svg class="w-6 h-6 text-red-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
||
</svg>
|
||
<div class="min-w-0">
|
||
<p class="text-sm font-medium text-gray-800 dark:text-gray-100 truncate"><%= a.name || a.dateiname %></p>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 truncate"><%= a.dateiname %></p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-3 shrink-0">
|
||
<a href="/anhaenge/<%= a.id %>/download"
|
||
class="inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 hover:underline">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
|
||
</svg>
|
||
Download
|
||
</a>
|
||
<form action="/bewerbung/<%= application.id %>/anhaenge/<%= a.id %>/delete" method="POST"
|
||
onsubmit="return confirm('Diesen Anhang löschen?');">
|
||
<button type="submit" class="text-red-500 hover:text-red-700 dark:text-red-400" aria-label="Anhang löschen">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
||
</svg>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</li>
|
||
<% }); %>
|
||
</ul>
|
||
<% } else if (genStatus !== 'ausstehend') { %>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400">Noch keine generierten Unterlagen vorhanden.</p>
|
||
<% } %>
|
||
</div>
|
||
|
||
<!-- Editable e-mail cover text (Begleit-E-Mail) -->
|
||
<% if ((application.email_anschreiben && application.email_anschreiben.trim()) || genStatus === 'fertig') { %>
|
||
<div id="email" class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-5">
|
||
<div class="flex flex-wrap items-center justify-between gap-2 mb-1">
|
||
<h3 class="text-sm font-semibold text-gray-800 dark:text-white">Begleit-E-Mail</h3>
|
||
<button type="button" id="emailCopyBtn"
|
||
class="inline-flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 hover:underline">
|
||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
|
||
</svg>
|
||
<span id="emailCopyLabel">E-Mail-Text kopieren</span>
|
||
</button>
|
||
</div>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
|
||
Kurzer, normgerechter Text zum Versand der Bewerbung per E-Mail (Unterlagen im Anhang).
|
||
Du kannst Betreff und Text vor dem Versand frei anpassen und speichern.
|
||
</p>
|
||
<form action="/bewerbung/<%= application.id %>/email" method="POST">
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Betreff</label>
|
||
<input type="text" name="email_betreff" id="emailBetreff" value="<%= application.email_betreff || '' %>"
|
||
class="w-full px-3 py-2 mb-3 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white"
|
||
placeholder="Bewerbung als …">
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">E-Mail-Text</label>
|
||
<textarea name="email_anschreiben" id="emailText" rows="12"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white leading-relaxed font-sans"
|
||
placeholder="Sehr geehrte Damen und Herren, …"><%= application.email_anschreiben || '' %></textarea>
|
||
<div class="flex justify-end mt-3">
|
||
<button type="submit"
|
||
class="inline-flex items-center gap-1.5 px-4 py-2 text-sm bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||
</svg>
|
||
E-Mail-Text speichern
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<% } %>
|
||
|
||
<!-- LLM notes + generate/regenerate -->
|
||
<form action="/bewerbung/<%= application.id %>/generieren" method="POST"
|
||
class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-5"
|
||
<% if (genStatus === 'fertig') { %>onsubmit="return confirm('Unterlagen neu generieren? Vorhandene generierte Dateien werden ersetzt.');"<% } %>>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||
Notizen für die KI
|
||
</label>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2">
|
||
Zusätzliche Infos für die Generierung – z. B. die vollständige Firmenanschrift (Straße, PLZ, Ort),
|
||
ein Ansprechpartner oder besondere Hinweise zur Bewerbung. Die KI berücksichtigt diese Angaben.
|
||
</p>
|
||
<textarea name="llm_notizen" rows="4"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white leading-relaxed"
|
||
placeholder="z. B. Musterfirma GmbH Musterstraße 12 45128 Essen Ansprechpartner: Frau Müller"><%= application.llm_notizen || '' %></textarea>
|
||
<div class="flex justify-end mt-3">
|
||
<button type="submit" <%= genStatus === 'ausstehend' ? 'disabled' : '' %>
|
||
class="inline-flex items-center gap-1.5 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-md transition-colors">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||
</svg>
|
||
<%= genStatus === 'ausstehend' ? 'Wird generiert…' : (genStatus === 'fertig' ? 'Notizen speichern & neu generieren' : 'Unterlagen generieren') %>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- Job description from the import -->
|
||
<% if (application.stellenbeschreibung && application.stellenbeschreibung.trim()) { %>
|
||
<details class="mt-6 rounded-lg border border-gray-200 dark:border-gray-700">
|
||
<summary class="cursor-pointer select-none px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
Importierte Stellenbeschreibung anzeigen
|
||
</summary>
|
||
<div class="px-4 pb-4">
|
||
<% if (application.quelle_url) { %>
|
||
<a href="<%= application.quelle_url %>" target="_blank" rel="noopener"
|
||
class="inline-block mb-3 text-sm text-blue-600 dark:text-blue-400 hover:underline break-all"><%= application.quelle_url %></a>
|
||
<% } %>
|
||
<p class="whitespace-pre-wrap break-words text-sm leading-relaxed text-gray-700 dark:text-gray-300"><%= application.stellenbeschreibung %></p>
|
||
</div>
|
||
</details>
|
||
<% } %>
|
||
</section>
|
||
<% } %>
|
||
|
||
<!-- E-Mail-Korrespondenz -->
|
||
<section id="korrespondenz" class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
|
||
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
|
||
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">E-Mail-Korrespondenz</h2>
|
||
<% if (mailConfigured) { %>
|
||
<form action="/email/fetch" method="POST" class="shrink-0">
|
||
<input type="hidden" name="back" value="/bewerbung/<%= application.id %>#korrespondenz">
|
||
<button type="submit" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
|
||
Postfach abrufen
|
||
</button>
|
||
</form>
|
||
<% } %>
|
||
</div>
|
||
|
||
<% if (!mailConfigured) { %>
|
||
<div class="flex items-center gap-3 rounded-lg bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-800 px-4 py-3">
|
||
<svg class="w-5 h-5 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
|
||
<span class="text-sm text-yellow-800 dark:text-yellow-200">E-Mail ist nicht konfiguriert. Bitte <code>MAIL_HOST</code>, <code>MAIL_USER</code> und <code>MAIL_PASSWORD</code> in der <code>.env</code> setzen.</span>
|
||
</div>
|
||
<% } else { %>
|
||
|
||
<% if (mailError) { %>
|
||
<div class="rounded-lg bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 px-4 py-3 mb-4 text-sm text-red-800 dark:text-red-200"><%= mailError %></div>
|
||
<% } %>
|
||
<% if (mailOk) { %>
|
||
<div class="rounded-lg bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 px-4 py-3 mb-4 text-sm text-green-800 dark:text-green-200"><%= mailOk %></div>
|
||
<% } %>
|
||
|
||
<!-- Conversation thread -->
|
||
<% if (emails && emails.length) { %>
|
||
<ul class="space-y-3 mb-6">
|
||
<% emails.forEach(function(e){ var out = e.direction === 'out'; %>
|
||
<li class="rounded-lg border <%= out ? 'border-blue-200 dark:border-blue-800 bg-blue-50/60 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40' %> px-4 py-3">
|
||
<div class="flex flex-wrap items-center justify-between gap-2 mb-1">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium <%= out ? 'bg-blue-600 text-white' : 'bg-gray-600 text-white' %>"><%= out ? 'Gesendet' : 'Empfangen' %></span>
|
||
<span class="text-sm text-gray-700 dark:text-gray-200 truncate">
|
||
<%= out ? ('An: ' + (e.to_addr || '')) : ('Von: ' + (e.from_addr || '')) %>
|
||
</span>
|
||
</div>
|
||
<span class="text-xs text-gray-500 dark:text-gray-400 shrink-0"><%= e.email_date ? new Date(e.email_date).toLocaleString('de-DE') : '' %></span>
|
||
</div>
|
||
<p class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-1"><%= e.subject || '(kein Betreff)' %></p>
|
||
<p class="whitespace-pre-wrap break-words text-sm leading-relaxed text-gray-700 dark:text-gray-300"><%= e.body_text || '' %></p>
|
||
|
||
<% if (e.anhaenge && e.anhaenge.length) { %>
|
||
<div class="mt-2 flex flex-wrap gap-2">
|
||
<% e.anhaenge.forEach(function(a){ %>
|
||
<a href="/email-anhaenge/<%= a.id %>/download" class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:underline">
|
||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg>
|
||
<%= a.name || 'Anhang' %>
|
||
</a>
|
||
<% }); %>
|
||
</div>
|
||
<% } %>
|
||
|
||
<% if (!out) { %>
|
||
<div class="mt-2">
|
||
<button type="button" class="reply-toggle text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 hover:underline" data-target="reply-<%= e.id %>">Antworten</button>
|
||
</div>
|
||
<form action="/bewerbung/<%= application.id %>/email/send" method="POST" id="reply-<%= e.id %>" class="hidden mt-3 border-t border-gray-200 dark:border-gray-600 pt-3">
|
||
<input type="hidden" name="reply_to" value="<%= e.id %>">
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">An</label>
|
||
<input type="email" name="to" required value="<%= e.from_addr_clean || '' %>"
|
||
class="w-full px-3 py-2 mb-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white text-sm">
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Betreff</label>
|
||
<input type="text" name="subject" value="Re: <%= e.subject || '' %>"
|
||
class="reply-subject w-full px-3 py-2 mb-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white text-sm">
|
||
<div class="flex items-center justify-between mb-1">
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400">Nachricht</label>
|
||
<button type="button" class="ai-reply-btn inline-flex items-center gap-1 text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400 hover:underline"
|
||
data-email-id="<%= e.id %>" data-app-id="<%= application.id %>" data-target="reply-<%= e.id %>">
|
||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||
<span class="ai-reply-label">KI-Antwort generieren</span>
|
||
</button>
|
||
</div>
|
||
<textarea name="body" rows="8" required
|
||
class="reply-body w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white text-sm leading-relaxed"></textarea>
|
||
<div class="flex justify-end mt-2">
|
||
<button type="submit" class="inline-flex items-center gap-1.5 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors">Antwort senden</button>
|
||
</div>
|
||
</form>
|
||
<% } %>
|
||
</li>
|
||
<% }); %>
|
||
</ul>
|
||
<% } else { %>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Noch keine E-Mails. Sende die Bewerbung unten oder rufe das Postfach ab.</p>
|
||
<% } %>
|
||
|
||
<!-- Compose / send the application -->
|
||
<div class="border-t border-gray-200 dark:border-gray-700 pt-5">
|
||
<h3 class="text-sm font-semibold text-gray-800 dark:text-white mb-1">Bewerbung per E-Mail senden</h3>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
|
||
Versand über <code><%= mailFrom %></code>. Empfängeradresse eingeben, Betreff und Text prüfen,
|
||
Anhänge auswählen und senden.
|
||
</p>
|
||
<form action="/bewerbung/<%= application.id %>/email/send" method="POST"
|
||
onsubmit="return confirm('Bewerbung jetzt verbindlich an ' + (this.to.value.trim() || 'den Empfänger') + ' senden?');">
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Empfänger (E-Mail)</label>
|
||
<input type="email" name="to" required value="<%= application.email_empfaenger || '' %>"
|
||
placeholder="personal@unternehmen.de"
|
||
class="w-full px-3 py-2 mb-3 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Betreff</label>
|
||
<input type="text" name="subject" value="<%= application.email_betreff || ('Bewerbung als ' + (application.stelle || '')) %>"
|
||
class="w-full px-3 py-2 mb-3 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Nachricht</label>
|
||
<textarea name="body" rows="10"
|
||
class="w-full px-3 py-2 mb-3 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white leading-relaxed"><%= application.email_anschreiben || '' %></textarea>
|
||
|
||
<% if (anhaenge && anhaenge.length) { %>
|
||
<p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Anhänge</p>
|
||
<div class="space-y-1 mb-3">
|
||
<% anhaenge.forEach(function(a){ %>
|
||
<label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<input type="checkbox" name="anhang" value="<%= a.id %>" checked
|
||
class="rounded border-gray-300 dark:border-gray-600 text-blue-600">
|
||
<%= a.name || a.dateiname %> <span class="text-xs text-gray-400">(<%= a.dateiname %>)</span>
|
||
</label>
|
||
<% }); %>
|
||
</div>
|
||
<% } else { %>
|
||
<p class="text-xs text-gray-400 mb-3">Keine generierten Anhänge vorhanden - erst Unterlagen generieren.</p>
|
||
<% } %>
|
||
|
||
<div class="flex justify-end">
|
||
<button type="submit" class="inline-flex items-center gap-1.5 px-4 py-2 text-sm bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
|
||
Bewerbung senden
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<% } %>
|
||
</section>
|
||
|
||
<!-- Status timeline -->
|
||
<section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-1">Status-Verlauf</h2>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
|
||
Jede Statusänderung wird mit Datum dokumentiert. Der jüngste Eintrag bestimmt den aktuellen Status.
|
||
</p>
|
||
|
||
<!-- Existing entries -->
|
||
<% if (verlauf.length > 0) { %>
|
||
<ol class="relative border-l border-gray-200 dark:border-gray-600 ml-2 space-y-6 mb-8">
|
||
<% verlauf.forEach(eintrag => { %>
|
||
<li class="ml-6">
|
||
<span class="absolute -left-1.5 mt-2 w-3 h-3 rounded-full bg-blue-500 ring-4 ring-white dark:ring-gray-800"></span>
|
||
<form action="/bewerbung/<%= application.id %>/verlauf/<%= eintrag.id %>" method="POST"
|
||
class="bg-gray-50 dark:bg-gray-700/40 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3">
|
||
<div>
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Datum</label>
|
||
<input type="date" name="datum" required value="<%= eintrag.datum %>"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Status</label>
|
||
<select name="status" required
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
|
||
<% statusOptions.forEach(option => { %>
|
||
<option value="<%= option %>" <%= eintrag.status === option ? 'selected' : '' %>><%= option %></option>
|
||
<% }); %>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Kommentar</label>
|
||
<textarea name="kommentar" rows="2"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white leading-relaxed"
|
||
placeholder="Was ist passiert?"><%= eintrag.kommentar || '' %></textarea>
|
||
</div>
|
||
<div class="flex justify-end gap-2">
|
||
<button type="submit"
|
||
class="px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors">
|
||
Speichern
|
||
</button>
|
||
</div>
|
||
</form>
|
||
<form action="/bewerbung/<%= application.id %>/verlauf/<%= eintrag.id %>/delete" method="POST" class="mt-1 text-right"
|
||
onsubmit="return confirm('Diesen Verlaufseintrag löschen?');">
|
||
<button type="submit"
|
||
class="text-xs text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 hover:underline">
|
||
Eintrag löschen
|
||
</button>
|
||
</form>
|
||
</li>
|
||
<% }); %>
|
||
</ol>
|
||
<% } else { %>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-8">Noch keine Statusänderungen dokumentiert.</p>
|
||
<% } %>
|
||
|
||
<!-- Add new entry -->
|
||
<div class="border-t border-gray-200 dark:border-gray-700 pt-6">
|
||
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Statusänderung hinzufügen</h3>
|
||
<form action="/bewerbung/<%= application.id %>/verlauf" method="POST" class="space-y-3">
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||
<div>
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Datum</label>
|
||
<input type="date" name="datum" required value="<%= today %>"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Status</label>
|
||
<select name="status" required
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
|
||
<% statusOptions.forEach(option => { %>
|
||
<option value="<%= option %>"><%= option %></option>
|
||
<% }); %>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Kommentar</label>
|
||
<textarea name="kommentar" rows="2"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white leading-relaxed"
|
||
placeholder="Was ist passiert?"></textarea>
|
||
</div>
|
||
<div class="flex justify-end">
|
||
<button type="submit" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors">
|
||
Statusänderung hinzufügen
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<%- include('partials/footer') %>
|
||
|
||
<script>
|
||
(function () {
|
||
// The `dark` class lives on <html> so Tailwind's `.dark .dark:*`
|
||
// selectors also style the <body> itself.
|
||
const root = document.documentElement;
|
||
const dm = localStorage.getItem('darkMode');
|
||
if (dm === 'enabled' || (!dm && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||
root.classList.add('dark');
|
||
}
|
||
const toggle = document.getElementById('darkModeToggle');
|
||
const sun = document.getElementById('sunIcon');
|
||
const moon = document.getElementById('moonIcon');
|
||
function sync() {
|
||
const d = root.classList.contains('dark');
|
||
if (sun) sun.classList.toggle('hidden', d);
|
||
if (moon) moon.classList.toggle('hidden', !d);
|
||
}
|
||
sync();
|
||
if (toggle) toggle.addEventListener('click', () => {
|
||
root.classList.toggle('dark');
|
||
localStorage.setItem('darkMode', root.classList.contains('dark') ? 'enabled' : 'disabled');
|
||
sync();
|
||
});
|
||
const cy = document.getElementById('currentYear');
|
||
if (cy) cy.textContent = new Date().getFullYear();
|
||
|
||
// Copy the e-mail cover text (subject + body) to the clipboard.
|
||
const copyBtn = document.getElementById('emailCopyBtn');
|
||
if (copyBtn) copyBtn.addEventListener('click', async () => {
|
||
const betreff = (document.getElementById('emailBetreff') || {}).value || '';
|
||
const body = (document.getElementById('emailText') || {}).value || '';
|
||
const label = document.getElementById('emailCopyLabel');
|
||
const payload = (betreff ? 'Betreff: ' + betreff + '\n\n' : '') + body;
|
||
try {
|
||
await navigator.clipboard.writeText(payload);
|
||
if (label) { const t = label.textContent; label.textContent = 'Kopiert!'; setTimeout(() => { label.textContent = t; }, 1500); }
|
||
} catch (e) { /* clipboard blocked — ignore */ }
|
||
});
|
||
|
||
// Toggle inline reply forms under received e-mails.
|
||
document.querySelectorAll('.reply-toggle').forEach((btn) => {
|
||
btn.addEventListener('click', () => {
|
||
const form = document.getElementById(btn.dataset.target);
|
||
if (form) form.classList.toggle('hidden');
|
||
});
|
||
});
|
||
|
||
// Generate an AI draft reply and drop it into the reply form.
|
||
document.querySelectorAll('.ai-reply-btn').forEach((btn) => {
|
||
btn.addEventListener('click', async () => {
|
||
const form = document.getElementById(btn.dataset.target);
|
||
if (!form) return;
|
||
const label = btn.querySelector('.ai-reply-label');
|
||
const prev = label ? label.textContent : '';
|
||
if (label) label.textContent = 'Generiere …';
|
||
btn.disabled = true;
|
||
try {
|
||
const res = await fetch('/bewerbung/' + btn.dataset.appId + '/email/ai-reply', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ email_id: btn.dataset.emailId }),
|
||
});
|
||
const data = await res.json();
|
||
if (!res.ok) throw new Error(data.error || 'Fehler');
|
||
const body = form.querySelector('.reply-body');
|
||
const subject = form.querySelector('.reply-subject');
|
||
if (body && data.text) body.value = data.text;
|
||
if (subject && data.betreff) subject.value = data.betreff;
|
||
} catch (e) {
|
||
alert('KI-Antwort fehlgeschlagen: ' + e.message);
|
||
} finally {
|
||
if (label) label.textContent = prev;
|
||
btn.disabled = false;
|
||
}
|
||
});
|
||
});
|
||
|
||
// While documents are being generated, poll for completion and
|
||
// reload the page once the status changes.
|
||
const unterlagen = document.getElementById('unterlagen');
|
||
if (unterlagen && unterlagen.dataset.status === 'ausstehend') {
|
||
const appId = <%= application.id %>;
|
||
const poll = setInterval(async () => {
|
||
try {
|
||
const res = await fetch('/api/bewerbungen/' + appId + '/generierung', { cache: 'no-store' });
|
||
if (!res.ok) return;
|
||
const data = await res.json();
|
||
if (data.status && data.status !== 'ausstehend') {
|
||
clearInterval(poll);
|
||
window.location.reload();
|
||
}
|
||
} catch (e) { /* keep polling */ }
|
||
}, 4000);
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|