[34288f42] Feature: Add 'Skip Calendly' option for siblings list generation
This commit is contained in:
@@ -37,15 +37,45 @@ function App() {
|
||||
|
||||
const [eventTypes, setEventTypes] = useState<any[]>([]);
|
||||
const [selectedEventType, setSelectedEventType] = useState<string>("");
|
||||
const [skipCalendly, setSkipCalendly] = useState(false);
|
||||
const [isListGenerating, setIsListGenerating] = useState(false);
|
||||
const [isSiblingsGenerating, setIsSiblingsGenerating] = useState(false);
|
||||
const [isSiblingsQrGenerating, setIsSiblingsQrGenerating] = useState(false);
|
||||
const [reminderTaskId, setReminderTaskId] = useState<string | null>(null);
|
||||
const [reminderProgress, setReminderProgress] = useState<string>('');
|
||||
const [isReminderRunning, setIsReminderRunning] = useState(false);
|
||||
const [maxLogins, setMaxLogins] = useState<number>(1);
|
||||
const [excludePurchased, setExcludePurchased] = useState<boolean>(true);
|
||||
const [loginDistribution, setLoginDistribution] = useState<{logins: number, count: number}[] | null>(null);
|
||||
const [latestFile, setLatestFile] = useState<any>(null);
|
||||
const [isGmailAuthenticated, setIsGmailAuthenticated] = useState(false);
|
||||
const [isSyncing, setIsSyncing] = useState(false);
|
||||
const [syncTaskId, setSyncTaskId] = useState<string | null>(null);
|
||||
const [syncProgress, setSyncProgress] = useState<string>('');
|
||||
|
||||
const fetchLoginDistribution = async (jobId: string) => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/jobs/${jobId}/login-distribution`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setLoginDistribution(data);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch login distribution", e);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchReminderHistory = async (jobId: string) => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/jobs/${jobId}/reminder-history`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setReminderHistory(data);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch reminder history", e);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchFastStats = async (jobId: string) => {
|
||||
try {
|
||||
@@ -64,33 +94,68 @@ function App() {
|
||||
useEffect(() => {
|
||||
if (selectedJob) {
|
||||
fetchFastStats(selectedJob.id);
|
||||
fetchLoginDistribution(selectedJob.id);
|
||||
fetchReminderHistory(selectedJob.id);
|
||||
}
|
||||
}, [selectedJob]);
|
||||
|
||||
const handleSyncParticipants = async (job: Job) => {
|
||||
setIsSyncing(true);
|
||||
setSyncProgress('Starte Synchronisierung...');
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/jobs/${job.id}/sync-participants?account_type=${activeTab}`, {
|
||||
method: 'POST'
|
||||
});
|
||||
if (response.ok) {
|
||||
// alert("Daten erfolgreich mit Fotograf.de synchronisiert!");
|
||||
fetchFastStats(job.id); // Refresh stats immediately
|
||||
} else {
|
||||
alert("Synchronisierung fehlgeschlagen.");
|
||||
}
|
||||
} catch (e) {
|
||||
alert("Netzwerkfehler.");
|
||||
if (!response.ok) throw new Error("Synchronisierung konnte nicht gestartet werden.");
|
||||
const data = await response.json();
|
||||
setSyncTaskId(data.task_id);
|
||||
} catch (e: any) {
|
||||
setError(e.message || "Netzwerkfehler.");
|
||||
setIsSyncing(false);
|
||||
}
|
||||
setIsSyncing(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let interval: ReturnType<typeof setInterval>;
|
||||
if (syncTaskId) {
|
||||
interval = setInterval(async () => {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/api/tasks/${syncTaskId}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setSyncProgress(data.progress);
|
||||
if (data.status === 'completed') {
|
||||
setIsSyncing(false);
|
||||
setSyncTaskId(null);
|
||||
setSyncProgress(data.progress);
|
||||
if (selectedJob) {
|
||||
fetchFastStats(selectedJob.id);
|
||||
fetchLoginDistribution(selectedJob.id);
|
||||
}
|
||||
} else if (data.status === 'error') {
|
||||
setIsSyncing(false);
|
||||
setSyncTaskId(null);
|
||||
setError(data.progress || "Ein Fehler ist aufgetreten.");
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Polling error", err);
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
return () => clearInterval(interval);
|
||||
}, [syncTaskId, selectedJob]);
|
||||
|
||||
// Email States
|
||||
const [reminderResult, setReminderResult] = useState<any[] | null>(null);
|
||||
const [reminderHistory, setReminderHistory] = useState<any[] | null>(null);
|
||||
const [emailSubject, setEmailSubject] = useState("Fotos von {Kindernamen}");
|
||||
const [emailBody, setEmailBody] = useState("Hallo {Name Käufer},<br><br>deine Fotos sind fertig und warten auf dich! Klicke einfach auf die Links unten, um direkt zu den Galerien zu gelangen:<br><br>{LinksHTML}<br><br>Viel Spaß beim Anschauen!");
|
||||
const [isSendingEmails, setIsSendingEmails] = useState(false);
|
||||
const [emailSendStatus, setEmailSendStatus] = useState<string | null>(null);
|
||||
const [reminderTab, setReminderTab] = useState<'config' | 'preview' | 'history'>('config');
|
||||
const [reminderPreviewIndex, setReminderPreviewIndex] = useState(0);
|
||||
|
||||
// Release Request States
|
||||
const [releaseEmails, setReleaseEmails] = useState("");
|
||||
@@ -155,8 +220,6 @@ function App() {
|
||||
}).filter(e => e.to);
|
||||
}, [releaseEmails, selectedJob]);
|
||||
|
||||
const [reminderTab, setReminderTab] = useState<'config' | 'preview'>('config');
|
||||
const [reminderPreviewIndex, setReminderPreviewIndex] = useState(0);
|
||||
const [mainTab, setMainTab] = useState<'vorbereitung' | 'followup' | 'statistik'>('vorbereitung');
|
||||
|
||||
const parsedReminderEmails = useMemo(() => {
|
||||
@@ -580,8 +643,24 @@ function App() {
|
||||
setIsSiblingsGenerating(true);
|
||||
setError(null);
|
||||
try {
|
||||
const downloadUrl = `${API_BASE_URL}/api/jobs/${job.id}/siblings-list?account_type=${activeTab}&event_type_name=${encodeURIComponent(selectedEventType)}`;
|
||||
window.open(downloadUrl, '_blank');
|
||||
let url = `${API_BASE_URL}/api/jobs/${job.id}/siblings-list?account_type=${activeTab}`;
|
||||
if (!skipCalendly && selectedEventType) {
|
||||
url += `&event_type_name=${encodeURIComponent(selectedEventType)}`;
|
||||
}
|
||||
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
const errData = await response.json().catch(() => ({}));
|
||||
throw new Error(errData.detail || 'Generierung fehlgeschlagen');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (data.status === 'success' && data.download_url) {
|
||||
window.open(`${API_BASE_URL}${data.download_url}`, '_blank');
|
||||
} else {
|
||||
throw new Error('Download URL konnte nicht vom Server abgerufen werden.');
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
setIsSiblingsGenerating(false);
|
||||
fetchLatestFile();
|
||||
@@ -612,10 +691,11 @@ function App() {
|
||||
const handleStartReminderAnalysis = async (job: Job) => {
|
||||
setIsReminderRunning(true);
|
||||
setReminderProgress('Starte Analyse...');
|
||||
setReminderResult(null);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/jobs/${job.id}/reminder-analysis?account_type=${activeTab}`, {
|
||||
const response = await fetch(`${API_BASE_URL}/api/jobs/${job.id}/reminder-analysis?account_type=${activeTab}&max_logins=${maxLogins}&exclude_purchased_emails=${excludePurchased}`, {
|
||||
method: 'POST'
|
||||
});
|
||||
if (!response.ok) throw new Error('Konnte Analyse nicht starten.');
|
||||
@@ -637,7 +717,7 @@ function App() {
|
||||
};
|
||||
|
||||
const handleSendEmails = async () => {
|
||||
if (!reminderResult || !isGmailAuthenticated) return;
|
||||
if (!reminderResult || !isGmailAuthenticated || !selectedJob) return;
|
||||
|
||||
setIsSendingEmails(true);
|
||||
setEmailSendStatus("Sende...");
|
||||
@@ -658,21 +738,25 @@ function App() {
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/publish-request/send`, {
|
||||
const response = await fetch(`${API_BASE_URL}/api/jobs/${selectedJob.id}/reminder-send`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
emails: emailsToSend,
|
||||
scheduled_time: scheduledTime || null
|
||||
max_logins: maxLogins,
|
||||
scheduled_time: scheduledTime || null,
|
||||
recipients_data: reminderResult // Storing the full result row for history
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setEmailSendStatus(`✅ Fertig! ${data.success} gesendet.`);
|
||||
if (data.failed.length > 0) {
|
||||
setEmailSendStatus(`✅ Fertig! ${data.success || 0} gesendet.`);
|
||||
if (data.failed && data.failed.length > 0) {
|
||||
setEmailSendStatus(prev => `${prev} (${data.failed.length} Fehler)`);
|
||||
}
|
||||
// Refresh history
|
||||
fetchReminderHistory(selectedJob.id);
|
||||
} else {
|
||||
throw new Error("Sende-Fehler");
|
||||
}
|
||||
@@ -929,7 +1013,7 @@ function App() {
|
||||
{isSyncing ? (
|
||||
<>
|
||||
<svg className="animate-spin h-3 w-3" viewBox="0 0 24 24" fill="none"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" /></svg>
|
||||
Abgleich läuft...
|
||||
{syncProgress || 'Abgleich läuft...'}
|
||||
</>
|
||||
) : (
|
||||
<>🔄 Daten abgleichen</>
|
||||
@@ -1085,6 +1169,19 @@ function App() {
|
||||
<div>
|
||||
<h6 className="font-bold text-sm text-gray-800 mb-1">👨👩👧👦 Geschwisterliste (Einrichtungsintern)</h6>
|
||||
<p className="text-xs text-gray-600 mb-3">Abgleich von Kindergarten-Anmeldungen mit Calendly-Buchungen.</p>
|
||||
|
||||
<div className="flex items-center mb-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`skip-calendly-${selectedJob.id}`}
|
||||
checked={skipCalendly}
|
||||
onChange={(e) => setSkipCalendly(e.target.checked)}
|
||||
className="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label htmlFor={`skip-calendly-${selectedJob.id}`} className="ml-2 block text-xs text-gray-700">
|
||||
Ohne Nachmittags-Shooting (Kein Calendly-Abgleich)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3 mt-auto">
|
||||
<button
|
||||
@@ -1369,8 +1466,78 @@ function App() {
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 p-4 rounded-lg border border-gray-100 flex flex-col">
|
||||
<h6 className="font-bold text-sm text-gray-800 mb-1">Erinnerungen (0-1 Logins)</h6>
|
||||
<p className="text-xs text-gray-600 mb-4">Identifiziert Nicht-Käufer für den Supermailer oder Gmail Direkt-Versand.</p>
|
||||
<h6 className="font-bold text-sm text-gray-800 mb-1">Erinnerungen (Konfigurierbar)</h6>
|
||||
<p className="text-xs text-gray-600 mb-4">Identifiziert Nicht-Käufer basierend auf der Login-Anzahl.</p>
|
||||
|
||||
{/* Login Distribution Visualization */}
|
||||
{loginDistribution && (
|
||||
<div className="mb-6">
|
||||
<label className="text-[10px] font-bold text-gray-400 uppercase mb-2 block">Login-Verteilung (Anzahl Personen)</label>
|
||||
<div className="flex items-end gap-1 h-20 border-b border-gray-200 pb-1">
|
||||
{loginDistribution.map((item, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`flex-1 flex flex-col justify-end items-center group relative ${item.logins <= maxLogins ? 'opacity-100' : 'opacity-30'}`}
|
||||
>
|
||||
<div
|
||||
className={`w-full rounded-t-sm transition-all duration-300 ${item.logins <= maxLogins ? 'bg-amber-400' : 'bg-gray-300'}`}
|
||||
style={{ height: `${Math.max(5, (item.count / Math.max(...loginDistribution.map(d => d.count))) * 100)}%` }}
|
||||
></div>
|
||||
<span className="text-[8px] text-gray-500 mt-1">{item.logins}</span>
|
||||
{/* Tooltip */}
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 bg-gray-800 text-white text-[8px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none mb-1 whitespace-nowrap z-20">
|
||||
{item.count} Personen mit {item.logins} Logins
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4 mb-6 bg-white p-3 rounded-lg border border-gray-100 shadow-sm">
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<label className="text-xs font-bold text-gray-700">Max. Logins: {maxLogins}</label>
|
||||
<span className="text-[10px] text-amber-600 font-bold">
|
||||
{loginDistribution
|
||||
? `Treffer: ${loginDistribution.filter(d => d.logins <= maxLogins).reduce((sum, d) => sum + d.count, 0)} Personen`
|
||||
: ''}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="10"
|
||||
value={maxLogins}
|
||||
onChange={(e) => {
|
||||
setMaxLogins(parseInt(e.target.value));
|
||||
setReminderResult(null);
|
||||
setReminderTaskId(null);
|
||||
}}
|
||||
className="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-amber-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label className="flex items-center gap-3 cursor-pointer group">
|
||||
<div className="relative inline-flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="sr-only peer"
|
||||
checked={excludePurchased}
|
||||
onChange={(e) => {
|
||||
setExcludePurchased(e.target.checked);
|
||||
setReminderResult(null);
|
||||
setReminderTaskId(null);
|
||||
}}
|
||||
/>
|
||||
<div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-amber-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-amber-500"></div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs font-bold text-gray-700">E-Mail bei Käufen ausschließen</span>
|
||||
<span className="text-[10px] text-gray-500">Ignoriert die Mail, wenn bereits ein Kind gekauft hat.</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto">
|
||||
{isReminderRunning ? (
|
||||
@@ -1431,6 +1598,12 @@ function App() {
|
||||
>
|
||||
2. Vorschau & Versand
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setReminderTab('history')}
|
||||
className={`px-4 py-2 text-xs font-bold ${reminderTab === 'history' ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
>
|
||||
3. Historie
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{reminderTab === 'config' && (
|
||||
@@ -1520,20 +1693,69 @@ function App() {
|
||||
<>{parsedReminderEmails.length} Erinnerungs-Mails jetzt versenden</>
|
||||
)}
|
||||
</button>
|
||||
{emailSendStatus && (
|
||||
<p className="text-center text-xs font-bold text-indigo-600 mt-2">{emailSendStatus}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* --- TAB: STATISTIK --- */} {mainTab === 'statistik' && (
|
||||
{emailSendStatus && (
|
||||
<p className="text-center text-xs font-bold text-indigo-600 mt-2">{emailSendStatus}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{reminderTab === 'history' && (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-white border border-gray-100 rounded-lg p-3 shadow-inner">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h6 className="text-[10px] font-bold text-gray-500 uppercase">Versand-Historie (Erinnerungen)</h6>
|
||||
<button
|
||||
onClick={() => fetchReminderHistory(selectedJob.id)}
|
||||
className="text-[10px] bg-amber-50 text-amber-600 px-2 py-1 rounded hover:bg-amber-100 transition-colors flex items-center gap-1"
|
||||
>
|
||||
🔄 Aktualisieren
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!reminderHistory || reminderHistory.length === 0 ? (
|
||||
<p className="text-[10px] text-gray-400 italic text-center py-4">Noch keine Versand-Aktivitäten für diesen Auftrag.</p>
|
||||
) : (
|
||||
<div className="max-h-80 overflow-y-auto rounded border border-gray-50">
|
||||
<table className="min-w-full text-[10px] text-left">
|
||||
<thead className="bg-gray-50 text-gray-400 sticky top-0">
|
||||
<tr>
|
||||
<th className="px-2 py-1">Datum/Zeit</th>
|
||||
<th className="px-2 py-1">Empfänger</th>
|
||||
<th className="px-2 py-1">Max Logins</th>
|
||||
<th className="px-2 py-1">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-50">
|
||||
{reminderHistory.map((h, idx) => (
|
||||
<tr key={idx} className="hover:bg-amber-50/30 border-b border-gray-50">
|
||||
<td className="px-2 py-2 text-gray-700">
|
||||
{new Date(h.timestamp).toLocaleDateString('de-DE', {day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'})}
|
||||
</td>
|
||||
<td className="px-2 py-2">
|
||||
<div className="font-bold text-amber-600">{h.recipient_count} Personen</div>
|
||||
<div className="text-[8px] text-gray-400 truncate max-w-[200px]">
|
||||
{h.recipients.map((r: any) => r["Kindernamen"]).join(", ")}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2 py-2 text-gray-600">{h.max_logins}</td>
|
||||
<td className="px-2 py-2 text-gray-400 italic">{h.scheduled_time || 'Sofort'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{/* --- TAB: STATISTIK --- */} {mainTab === 'statistik' && (
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-5 hover:border-purple-300 transition-colors shadow-sm md:col-span-2">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
|
||||
Reference in New Issue
Block a user