feat(frontend): implement modern card and modal based UX design [32788f42]
This commit is contained in:
@@ -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<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// New state for the detail modal
|
||||
const [selectedJob, setSelectedJob] = useState<Job | null>(null);
|
||||
const [processingJobId, setProcessingJobId] = useState<string | null>(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 (
|
||||
<div className="min-h-screen bg-gray-50 p-4">
|
||||
<div className="max-w-7xl mx-auto bg-white p-6 rounded-lg shadow-md border border-gray-200">
|
||||
<h1 className="text-3xl font-bold mb-6 text-gray-800 border-b pb-4">Fotograf.de ERP & Scraper</h1>
|
||||
|
||||
{/* Tab Navigation */}
|
||||
<div className="flex border-b border-gray-200 mb-6">
|
||||
{['kiga', 'schule'].map((type) => (
|
||||
<div className="min-h-screen bg-gray-50 text-gray-900 font-sans">
|
||||
|
||||
{/* Top Navigation Bar */}
|
||||
<header className="bg-white shadow-sm sticky top-0 z-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-2xl">📸</span>
|
||||
<h1 className="text-xl font-bold text-gray-800 tracking-tight">Fotograf.de ERP</h1>
|
||||
</div>
|
||||
|
||||
{/* Main Tabs */}
|
||||
<nav className="flex space-x-1 bg-gray-100 p-1 rounded-lg">
|
||||
<button
|
||||
key={type}
|
||||
className={`py-3 px-6 font-medium text-sm rounded-t-lg transition-colors duration-200 ${
|
||||
activeTab === type
|
||||
? 'bg-indigo-50 border-t-2 border-l-2 border-r-2 border-indigo-500 text-indigo-700'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-100'
|
||||
onClick={() => setActiveTab('kiga')}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
|
||||
activeTab === 'kiga' ? 'bg-white shadow text-indigo-700' : 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
onClick={() => setActiveTab(type as AccountType)}
|
||||
>
|
||||
{type === 'kiga' ? '📸 Kindergarten Fotografie' : '🏫 Schul-Fotografie'}
|
||||
Kindergarten
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={() => setActiveTab('schule')}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
|
||||
activeTab === 'schule' ? 'bg-white shadow text-indigo-700' : 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
Schule
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Status and Refresh Area */}
|
||||
<div className="mb-6 flex items-center justify-between bg-gray-50 p-4 rounded-md border border-gray-100">
|
||||
<p className="text-sm text-gray-600 font-medium">
|
||||
{currentJobs === null ? "Aufträge wurden noch nicht geladen." : `${currentJobs.length} Aufträge geladen.`}
|
||||
</p>
|
||||
{/* Main Content Area */}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
|
||||
{/* Action Bar */}
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
{activeTab === 'kiga' ? 'Kindergarten Aufträge' : 'Schul Aufträge'}
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
{currentJobs === null ? "Noch nicht geladen." : `${currentJobs.length} aktive Projekte gefunden.`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={isLoading}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 focus:ring-4 focus:ring-indigo-100 transition-all disabled:opacity-70 disabled:cursor-not-allowed shadow-sm"
|
||||
>
|
||||
{isLoading ? 'Selenium läuft (ca. 45s)...' : (currentJobs === null ? 'Liste initial abrufen' : 'Liste aktualisieren')}
|
||||
{isLoading ? (
|
||||
<>
|
||||
<svg className="animate-spin h-4 w-4" 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>
|
||||
Synchronisiere...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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" /></svg>
|
||||
{currentJobs === null ? 'Aufträge abrufen' : 'Liste aktualisieren'}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
|
||||
<p className="text-red-700 font-bold">Fehler:</p>
|
||||
<p className="text-red-600">{error}</p>
|
||||
{/* Global Errors */}
|
||||
{error && !selectedJob && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-8 flex items-start gap-3">
|
||||
<svg className="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" /></svg>
|
||||
<div>
|
||||
<h3 className="font-semibold text-sm">Systemfehler</h3>
|
||||
<p className="text-sm mt-1">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Jobs Table */}
|
||||
{currentJobs !== null && (
|
||||
<div className="overflow-x-auto rounded-lg border border-gray-200">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Name des Auftrags</th>
|
||||
<th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Datum</th>
|
||||
<th className="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Features & Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{currentJobs.map((job) => (
|
||||
<tr key={job.id} className="hover:bg-indigo-50 transition-colors">
|
||||
<td className="px-6 py-4 text-sm font-medium text-gray-900">
|
||||
<a href={job.url} target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:text-indigo-900 hover:underline">
|
||||
{job.name}
|
||||
</a>
|
||||
<div className="text-xs text-gray-500 font-normal mt-1">Status: {job.status}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{job.date}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
|
||||
<div className="flex justify-center space-x-2">
|
||||
|
||||
<button
|
||||
onClick={() => handleGeneratePdf(job)}
|
||||
disabled={processingJobId === job.id}
|
||||
className="bg-blue-50 text-blue-700 hover:bg-blue-100 border border-blue-200 rounded px-3 py-1.5 text-xs transition-colors shadow-sm disabled:opacity-50"
|
||||
>
|
||||
{processingJobId === job.id ? '⌛ Generiere...' : '📄 1) PDF Liste'}
|
||||
</button>
|
||||
|
||||
<button className="bg-emerald-50 text-emerald-700 border border-emerald-200 rounded px-3 py-1.5 text-xs opacity-50 cursor-not-allowed">
|
||||
📇 2) QR-Karten
|
||||
</button>
|
||||
|
||||
<button className="bg-amber-50 text-amber-700 border border-amber-200 rounded px-3 py-1.5 text-xs opacity-50 cursor-not-allowed">
|
||||
✉️ 3) Nachfass
|
||||
</button>
|
||||
|
||||
<button className="bg-purple-50 text-purple-700 border border-purple-200 rounded px-3 py-1.5 text-xs opacity-50 cursor-not-allowed">
|
||||
📊 4) Statistik
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{/* Empty State */}
|
||||
{currentJobs !== null && currentJobs.length === 0 && !isLoading && !error && (
|
||||
<div className="text-center py-16 bg-white rounded-xl border border-dashed border-gray-300">
|
||||
<svg className="mx-auto h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path vectorEffect="non-scaling-stroke" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" /></svg>
|
||||
<h3 className="mt-2 text-sm font-semibold text-gray-900">Keine Projekte</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">Es wurden keine aktiven Aufträge für diesen Account gefunden.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Grid of Job Cards */}
|
||||
{currentJobs !== null && currentJobs.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{currentJobs.map((job) => (
|
||||
<div
|
||||
key={job.id}
|
||||
className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md hover:border-indigo-300 transition-all duration-200 cursor-pointer flex flex-col h-full"
|
||||
onClick={() => setSelectedJob(job)}
|
||||
>
|
||||
{/* Card Header (Status Color Band) */}
|
||||
<div className={`h-2 w-full ${job.status.toLowerCase().includes('abgeschlossen') ? 'bg-gray-300' : 'bg-indigo-500'}`}></div>
|
||||
|
||||
<div className="p-6 flex-1 flex flex-col">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
|
||||
{job.id ? `ID: ${job.id}` : 'Unbekannte ID'}
|
||||
</span>
|
||||
<span className="text-sm font-medium text-gray-500 bg-gray-50 px-2 py-1 rounded">
|
||||
{job.date || 'Kein Datum'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-bold text-gray-900 leading-tight mb-2 line-clamp-2">
|
||||
{job.name}
|
||||
</h3>
|
||||
|
||||
<div className="mt-auto pt-4 flex flex-col gap-2">
|
||||
<p className="text-sm text-gray-600 flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500"></span>
|
||||
{job.status}
|
||||
</p>
|
||||
<p className="text-xs text-gray-400">Typ: {job.shooting_type}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Footer */}
|
||||
<div className="bg-gray-50 px-6 py-3 border-t border-gray-100 flex justify-between items-center">
|
||||
<span className="text-sm font-medium text-indigo-600 group-hover:text-indigo-800">
|
||||
Details verwalten →
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* --- Detail Modal Overlay --- */}
|
||||
{selectedJob && (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
||||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
|
||||
{/* Background backdrop */}
|
||||
<div className="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity" aria-hidden="true" onClick={() => setSelectedJob(null)}></div>
|
||||
|
||||
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
||||
|
||||
{/* Modal Panel */}
|
||||
<div className="inline-block align-bottom bg-gray-50 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl w-full">
|
||||
|
||||
{/* 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">
|
||||
<span>📅 {selectedJob.date}</span>
|
||||
<span>•</span>
|
||||
<span className="text-emerald-600 font-medium">{selectedJob.status}</span>
|
||||
<span>•</span>
|
||||
<a href={selectedJob.url} target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:underline inline-flex items-center gap-1">
|
||||
In Fotograf.de öffnen <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
onClick={() => setSelectedJob(null)}
|
||||
>
|
||||
<span className="sr-only">Schließen</span>
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Body - Tools & Actions Grid */}
|
||||
<div className="px-6 py-8">
|
||||
|
||||
{error && processingJobId === selectedJob.id && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h4 className="text-lg font-bold text-gray-800 mb-4">Verfügbare Tools</h4>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
|
||||
{/* Tool 1: PDF List */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-5 hover:border-blue-300 transition-colors shadow-sm">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="p-2 bg-blue-50 rounded-lg text-blue-600 text-xl">📄</div>
|
||||
</div>
|
||||
<h5 className="font-bold text-gray-900 mb-1">Teilnehmerliste (PDF)</h5>
|
||||
<p className="text-sm text-gray-500 mb-4 line-clamp-2">Lädt die Anmeldungen herunter und formatiert sie als sauberes PDF (Gruppen/Klassen sortiert).</p>
|
||||
<button
|
||||
onClick={() => handleGeneratePdf(selectedJob)}
|
||||
disabled={processingJobId === selectedJob.id}
|
||||
className="w-full flex justify-center items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:ring-4 focus:ring-blue-100 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{processingJobId === selectedJob.id ? 'Lädt CSV via Selenium...' : 'PDF generieren & speichern'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tool 2: QR Cards */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-5 hover:border-emerald-300 transition-colors shadow-sm">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="p-2 bg-emerald-50 rounded-lg text-emerald-600 text-xl">📇</div>
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">Demnächst</span>
|
||||
</div>
|
||||
<h5 className="font-bold text-gray-900 mb-1">QR-Zugangskarten</h5>
|
||||
<p className="text-sm text-gray-500 mb-4 line-clamp-2">Druckt Namen und Buchungszeiten auf vorbereitete PDF-Bögen für Familienfotos.</p>
|
||||
<button className="w-full px-4 py-2 bg-gray-100 text-gray-500 text-sm font-medium rounded-lg cursor-not-allowed">
|
||||
Karten-Generator öffnen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tool 3: Follow-up Emails */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-5 hover:border-amber-300 transition-colors shadow-sm">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="p-2 bg-amber-50 rounded-lg text-amber-600 text-xl">✉️</div>
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">Demnächst</span>
|
||||
</div>
|
||||
<h5 className="font-bold text-gray-900 mb-1">Nachfass-Mails (Supermailer)</h5>
|
||||
<p className="text-sm text-gray-500 mb-4 line-clamp-2">Analysiert das Kaufverhalten und generiert eine fertige CSV-Liste für den Supermailer.</p>
|
||||
<button className="w-full px-4 py-2 bg-gray-100 text-gray-500 text-sm font-medium rounded-lg cursor-not-allowed">
|
||||
Analyse starten (Dauert lange)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tool 4: Statistics */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-5 hover:border-purple-300 transition-colors shadow-sm">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="p-2 bg-purple-50 rounded-lg text-purple-600 text-xl">📊</div>
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">Demnächst</span>
|
||||
</div>
|
||||
<h5 className="font-bold text-gray-900 mb-1">Verkaufsstatistik</h5>
|
||||
<p className="text-sm text-gray-500 mb-4 line-clamp-2">Durchforstet alle Alben und liefert eine Übersicht: Wie viele Kinder haben wie viel gekauft?</p>
|
||||
<button className="w-full px-4 py-2 bg-gray-100 text-gray-500 text-sm font-medium rounded-lg cursor-not-allowed">
|
||||
Statistik-Lauf starten
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Optional Data View Area (for later use, e.g., showing the stats table here) */}
|
||||
<div className="mt-8 border-t border-gray-200 pt-6 hidden">
|
||||
<h4 className="text-lg font-bold text-gray-800 mb-4">Ergebnisse</h4>
|
||||
{/* Table or graphs will go here */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
<div className="bg-gray-100 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse border-t border-gray-200">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
onClick={() => setSelectedJob(null)}
|
||||
>
|
||||
Schließen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
|
||||
Reference in New Issue
Block a user