diff --git a/fotograf-de-scraper/frontend/src/App.tsx b/fotograf-de-scraper/frontend/src/App.tsx index 63080ea0c..9e0a99491 100644 --- a/fotograf-de-scraper/frontend/src/App.tsx +++ b/fotograf-de-scraper/frontend/src/App.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import './App.css'; interface Job { @@ -19,8 +19,11 @@ function App() { schule: null, }); const [isLoading, setIsLoading] = useState(false); - const [processingJobId, setProcessingJobId] = useState(null); const [error, setError] = useState(null); + + // New state for the detail modal + const [selectedJob, setSelectedJob] = useState(null); + const [processingJobId, setProcessingJobId] = useState(null); const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://192.168.178.6:8002'; @@ -73,103 +76,277 @@ function App() { const currentJobs = jobsCache[activeTab]; return ( -
-
-

Fotograf.de ERP & Scraper

- - {/* Tab Navigation */} -
- {['kiga', 'schule'].map((type) => ( +
+ + {/* Top Navigation Bar */} +
+
+
+ 📸 +

Fotograf.de ERP

+
+ + {/* Main Tabs */} +
+
- {/* Status and Refresh Area */} -
-

- {currentJobs === null ? "Aufträge wurden noch nicht geladen." : `${currentJobs.length} Aufträge geladen.`} -

+ {/* Main Content Area */} +
+ + {/* Action Bar */} +
+
+

+ {activeTab === 'kiga' ? 'Kindergarten Aufträge' : 'Schul Aufträge'} +

+

+ {currentJobs === null ? "Noch nicht geladen." : `${currentJobs.length} aktive Projekte gefunden.`} +

+
+
- {error && ( -
-

Fehler:

-

{error}

+ {/* Global Errors */} + {error && !selectedJob && ( +
+ +
+

Systemfehler

+

{error}

+
)} - {/* Jobs Table */} - {currentJobs !== null && ( -
- - - - - - - - - - {currentJobs.map((job) => ( - - - - - - ))} - -
Name des AuftragsDatumFeatures & Aktionen
- - {job.name} - -
Status: {job.status}
- 		{job.date} -
- - - - - - - - - -
-
+ {/* Empty State */} + {currentJobs !== null && currentJobs.length === 0 && !isLoading && !error && ( +
+ +

Keine Projekte

+

Es wurden keine aktiven Aufträge für diesen Account gefunden.

)} -
+ + {/* Grid of Job Cards */} + {currentJobs !== null && currentJobs.length > 0 && ( +
+ {currentJobs.map((job) => ( +
setSelectedJob(job)} + > + {/* Card Header (Status Color Band) */} +
+ +
+
+ + {job.id ? `ID: ${job.id}` : 'Unbekannte ID'} + + + {job.date || 'Kein Datum'} + +
+ +

+ {job.name} +

+ +
+

+ + {job.status} +

+

Typ: {job.shooting_type}

+
+
+ + {/* Card Footer */} +
+ + Details verwalten → + +
+
+ ))} +
+ )} +
+ + {/* --- Detail Modal Overlay --- */} + {selectedJob && ( +
+
+ + {/* Background backdrop */} + + + + + {/* Modal Panel */} +
+ + {/* Modal Header */} +
+
+ +

+ 📅 {selectedJob.date} + • + {selectedJob.status} + • + + In Fotograf.de öffnen + +

+
+ +
+ + {/* Modal Body - Tools & Actions Grid */} +
+ + {error && processingJobId === selectedJob.id && ( +
+ {error} +
+ )} + +

VerfĂĽgbare Tools

+ +
+ + {/* Tool 1: PDF List */} +
+
+
đź“„
+
+
Teilnehmerliste (PDF)
+

Lädt die Anmeldungen herunter und formatiert sie als sauberes PDF (Gruppen/Klassen sortiert).

+ +
+ + {/* Tool 2: QR Cards */} +
+
+
📇
+ Demnächst +
+
QR-Zugangskarten
+

Druckt Namen und Buchungszeiten auf vorbereitete PDF-Bögen für Familienfotos.

+ +
+ + {/* Tool 3: Follow-up Emails */} +
+
+
✉️
+ Demnächst +
+
Nachfass-Mails (Supermailer)
+

Analysiert das Kaufverhalten und generiert eine fertige CSV-Liste fĂĽr den Supermailer.

+ +
+ + {/* Tool 4: Statistics */} +
+
+
đź“Š
+ Demnächst +
+
Verkaufsstatistik
+

Durchforstet alle Alben und liefert eine Ăśbersicht: Wie viele Kinder haben wie viel gekauft?

+ +
+ +
+ + {/* Optional Data View Area (for later use, e.g., showing the stats table here) */} +
+

Ergebnisse

+ {/* Table or graphs will go here */} +
+ +
+ + {/* Modal Footer */} +
+ +
+ +
+
+
+ )}
); } -export default App; \ No newline at end of file +export default App;