+ {isRefreshing && (
+
+
+
+ Synchronisiere...
+
+ )}
+ {renderContent()}
+
+
+ );
+ }
+
+ const renderContent = () => {
+ switch (currentView) {
+ case 'Dashboard': return
+
+
+ ICON DATABASE CONNECTING...
+
+ setIsSidebarOpen(!isSidebarOpen)}
+ />
+
+
+ setIsSidebarOpen(!isSidebarOpen)}
+ />
+
+
+ );
+};
+
+export default App;
diff --git a/legacy/components/Customers.tsx b/legacy/components/Customers.tsx
new file mode 100644
index 0000000..95573d3
--- /dev/null
+++ b/legacy/components/Customers.tsx
@@ -0,0 +1,448 @@
+
+import React, { useState, useEffect } from 'react';
+import { Customer, Contact } from '../types';
+import { supabase, TABLES } from '../lib/supabase';
+
+interface CustomersProps {
+ customers: Customer[];
+ refreshData: () => Promise
+ {/* Sidebar: Firmenliste */}
+
+
+
+
+
+
+
+
+
+ Kundenstamm
+
+ {customers.map(c => (
+
+ setSelectedCustomerId(c.id)}
+ className={`p-5 cursor-pointer transition-all flex items-center justify-between group ${selectedCustomerId === c.id ? 'bg-brand-50/50 dark:bg-brand-500/10' : 'hover:bg-slate-50 dark:hover:bg-slate-800'}`}
+ >
+
+ ))}
+
+
+
+
+ {c.logo ? (
+ 
+ ) : (
+ {c.company.charAt(0)}
+ )}
+
+
+
+ {c.company}
+{c.contacts?.length || 0} Personen
+
+ {activeCustomer ? (
+
+
+ {isModalOpen && (
+
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+ {activeCustomer.logo ? (
+ 
+ ) : (
+ activeCustomer.company.charAt(0)
+ )}
+
+
+
+ {activeCustomer.company}
+
+ PREMIUM KUNDE
+
+
+
+ Unternehmensprofil & Insights
+
+ {activeCustomer.notes || 'Keine Firmennotizen hinterlegt.'}
+
+
+
+
+
+
+
+ Ansprechpartner ({activeCustomer.contacts?.length || 0})
+
+ {activeCustomer.contacts?.map(contact => (
+
+
+
+ ))}
+
+ {contact.avatar ? (
+ 
+ ) : (
+
+ {contact.name.charAt(0)}
+ )}
+ {contact.name}
+{contact.role || 'Mitarbeiter'}
+ +
+
+
+
+ {contact.email || 'N/A'}
+
+
+
+ {contact.phone || 'N/A'}
+
+
+
+ )}
+
+
+
+ Bereit zur Auswahl
+Wählen Sie ein Unternehmen aus der Liste links aus.
+
+
+
+
+
+