Floke/Brancheneinstufung2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[34588f42] Feature: Globaler Sync-Button & Sofort-Statistik

Browse Source 
- Globaler 'Daten abgleichen' Button im Modal-Header integriert.
- Neue fast-stats API zeigt Statistiken sofort beim Öffnen des Modals (aus DB).
- UI entrümpelt und Redundanzen entfernt.
This commit is contained in:
Floke
2026-04-18 13:58:53 +00:00
parent 995b3ff829
commit d49f6d51f4
3 changed files with 76 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
fotograf-de-scraper/frontend/src/App.tsx
View File

@@ -47,6 +47,26 @@ function App() {
const [isGmailAuthenticated, setIsGmailAuthenticated] = useState(false);
const [isSyncing, setIsSyncing] = useState(false);
const fetchFastStats = async (jobId: string) => {
try {
const response = await fetch(`${API_BASE_URL}/api/jobs/${jobId}/fast-stats`);
if (response.ok) {
const data = await response.json();
if (data && data.length > 0) {
setStatsResult(data);
}
}
} catch (e) {
console.error("Failed to fetch fast stats", e);
}
};
useEffect(() => {
if (selectedJob) {
fetchFastStats(selectedJob.id);
}
}, [selectedJob]);
const handleSyncParticipants = async (job: Job) => {
setIsSyncing(true);
try {
@@ -54,7 +74,8 @@ function App() {
method: 'POST'
});
if (response.ok) {
alert("Daten erfolgreich mit Fotograf.de synchronisiert!");
// alert("Daten erfolgreich mit Fotograf.de synchronisiert!");
fetchFastStats(job.id); // Refresh stats immediately
} else {
alert("Synchronisierung fehlgeschlagen.");
}
@@ -890,11 +911,32 @@ function App() {
{/* Modal Header */}
<div className="bg-white px-6 py-6 border-b border-gray-200 flex justify-between items-start">
<div>
<h3 className="text-2xl font-bold text-gray-900" id="modal-title">
{selectedJob.name}
</h3>
<p className="text-sm text-gray-500 mt-1 flex items-center gap-3">
<div className="flex-1">
<div className="flex items-center gap-4 mb-1">
<h3 className="text-2xl font-bold text-gray-900" id="modal-title">
{selectedJob.name}
</h3>
<button
onClick={() => handleSyncParticipants(selectedJob)}
disabled={isSyncing}
className={`flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold transition-all border ${
isSyncing
? 'bg-indigo-50 text-indigo-400 border-indigo-100'
: 'bg-white text-indigo-600 border-indigo-200 hover:bg-indigo-50 hover:border-indigo-300 shadow-sm'
}`}
title="Aktualisiert E-Mails, Logins & Bestellungen direkt von Fotograf.de"
>
{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...
</>
) : (
<>🔄 Daten abgleichen</>
)}
</button>
</div>
<p className="text-sm text-gray-500 flex items-center gap-3">
<span>📅 {selectedJob.date}</span>
<span>•</span>
<span className="text-emerald-600 font-medium">{selectedJob.status}</span>
@@ -976,27 +1018,8 @@ function App() {
<option key={et.uri} value={et.name}>{et.name}</option>
))}
</select>
<p className="text-xs text-gray-500 mt-2 mb-4">Wird für QR-Karten und die Terminübersicht benötigt.</p>
<div className="pt-4 border-t border-gray-100">
<button
onClick={() => handleSyncParticipants(selectedJob)}
disabled={isSyncing}
className="w-full px-3 py-2 bg-white border border-indigo-200 text-indigo-600 text-xs font-bold rounded-lg hover:bg-indigo-50 transition-colors flex items-center justify-center gap-2"
>
{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>
Sync läuft...
</>
) : (
<>🔄 Daten von Fotograf.de abgleichen</>
)}
</button>
<p className="text-[10px] text-gray-400 mt-2">Aktualisiert E-Mails, Logins & Bestellstatus.</p>
</div>
</div>
<p className="text-xs text-gray-500 mt-2 mb-4">Wird für QR-Karten und die Terminübersicht benötigt.</p>
</div>
{/* Actions */}
<div className="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -1518,7 +1541,7 @@ function App() {
<h5 className="font-bold text-gray-900 text-lg">Verkaufsstatistik</h5>
</div>
</div>
<p className="text-sm text-gray-500 mb-4">Wie viele Kinder haben wie viel gekauft? Starten Sie den Job, um die Daten abzurufen.</p>
<p className="text-sm text-gray-500 mb-4">Übersicht der Verkäufe basierend auf den lokal gespeicherten Daten. Nutze "Daten abgleichen" im Kopfbereich für ein Update.</p>
<div className="mb-6">
{isStatsRunning ? (