477 lines
18 KiB
TypeScript
477 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { supabase } from '@/lib/supabase';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { useRouter } from 'next/navigation';
|
|
import {
|
|
Calendar,
|
|
User,
|
|
Building,
|
|
Phone,
|
|
Mail,
|
|
FileText,
|
|
Clock,
|
|
Play,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
Users,
|
|
Target,
|
|
Globe,
|
|
Palette,
|
|
Settings,
|
|
TrendingUp
|
|
} from 'lucide-react';
|
|
|
|
interface Customer {
|
|
id: string;
|
|
berater?: string;
|
|
firma?: string;
|
|
ansprechpartn?: string;
|
|
telefon?: string;
|
|
email?: string;
|
|
beschreibung?: string;
|
|
zielgruppe?: string;
|
|
website_vorha?: boolean;
|
|
was_gefaellt_c?: string;
|
|
ziel_der_websi?: string;
|
|
seiten_geplant?: string;
|
|
texte_bilder_v?: boolean;
|
|
fokus_inhalte?: string;
|
|
logo_farben_v?: boolean;
|
|
stilvorbilder?: string;
|
|
design_wunsch?: string;
|
|
features_gewu?: string;
|
|
drittanbieter?: string;
|
|
selbst_pflegen?: boolean;
|
|
laufende_betre?: boolean;
|
|
deadline?: string;
|
|
projekt_verant?: string;
|
|
budget?: string;
|
|
kommunikation?: string;
|
|
feedback_gesc?: string;
|
|
beispiellinks?: string;
|
|
benoetigte_fur?: string;
|
|
webseiten_ziel?: string;
|
|
geplante_seite?: string;
|
|
termin_datum?: string;
|
|
erstellt_am: string;
|
|
appointment_status?: 'pending' | 'running' | 'completed';
|
|
started_by?: string;
|
|
started_at?: string;
|
|
}
|
|
|
|
export default function KundenProjektePage() {
|
|
const [customers, setCustomers] = useState<Customer[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState<string>('all');
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
fetchCustomers();
|
|
}, []);
|
|
|
|
const fetchCustomers = async () => {
|
|
try {
|
|
console.log('🔍 Fetching customers with appointments...');
|
|
|
|
const { data, error } = await supabase
|
|
.from('kunden_projekte')
|
|
.select('*')
|
|
.not('termin_datum', 'is', null)
|
|
.order('id', { ascending: false });
|
|
|
|
if (error) {
|
|
console.error('❌ Error fetching customers:', error);
|
|
return;
|
|
}
|
|
|
|
console.log('✅ Customers fetched:', data?.length || 0);
|
|
setCustomers(data || []);
|
|
} catch (error) {
|
|
console.error('❌ Error:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const updateAppointmentStatus = async (customerId: string, status: 'pending' | 'running' | 'completed') => {
|
|
try {
|
|
console.log(`🔄 Updating appointment status for ${customerId} to ${status}`);
|
|
|
|
const updateData: any = { appointment_status: status };
|
|
|
|
if (status === 'running') {
|
|
updateData.started_by = 'admin@example.com'; // TODO: Get from auth
|
|
updateData.started_at = new Date().toISOString();
|
|
} else if (status === 'completed') {
|
|
updateData.completed_at = new Date().toISOString();
|
|
}
|
|
|
|
const { error } = await supabase
|
|
.from('kunden_projekte')
|
|
.update(updateData)
|
|
.eq('id', customerId);
|
|
|
|
if (error) {
|
|
console.error('❌ Error updating status:', error);
|
|
return;
|
|
}
|
|
|
|
console.log('✅ Status updated successfully');
|
|
fetchCustomers(); // Refresh data
|
|
} catch (error) {
|
|
console.error('❌ Error:', error);
|
|
}
|
|
};
|
|
|
|
const getStatusBadge = (status: string, startedBy?: string) => {
|
|
switch (status) {
|
|
case 'pending':
|
|
return (
|
|
<Badge variant="secondary" className="flex items-center gap-1">
|
|
<AlertCircle className="w-3 h-3" />
|
|
Termin wartet
|
|
</Badge>
|
|
);
|
|
case 'running':
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="default" className="bg-green-500 flex items-center gap-1">
|
|
<Play className="w-3 h-3" />
|
|
Termin läuft
|
|
</Badge>
|
|
{startedBy && (
|
|
<span className="text-sm text-gray-600">({startedBy})</span>
|
|
)}
|
|
</div>
|
|
);
|
|
case 'completed':
|
|
return (
|
|
<Badge variant="outline" className="flex items-center gap-1">
|
|
<CheckCircle className="w-3 h-3" />
|
|
Termin abgeschlossen
|
|
</Badge>
|
|
);
|
|
default:
|
|
return (
|
|
<Badge variant="secondary" className="flex items-center gap-1">
|
|
<AlertCircle className="w-3 h-3" />
|
|
Termin wartet
|
|
</Badge>
|
|
);
|
|
}
|
|
};
|
|
|
|
const getStatusActions = (customer: Customer) => {
|
|
switch (customer.appointment_status) {
|
|
case 'pending':
|
|
return (
|
|
<Button
|
|
onClick={() => updateAppointmentStatus(customer.id, 'running')}
|
|
className="bg-green-500 hover:bg-green-600 flex items-center gap-2"
|
|
>
|
|
<Play className="w-4 h-4" />
|
|
Termin starten
|
|
</Button>
|
|
);
|
|
case 'running':
|
|
return (
|
|
<div className="flex gap-2">
|
|
<Button
|
|
onClick={() => router.push(`/kunden-projekte/${customer.id}`)}
|
|
className="bg-blue-500 hover:bg-blue-600 flex items-center gap-2"
|
|
>
|
|
<FileText className="w-4 h-4" />
|
|
Befragung
|
|
</Button>
|
|
<Button
|
|
onClick={() => updateAppointmentStatus(customer.id, 'completed')}
|
|
variant="outline"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<CheckCircle className="w-4 h-4" />
|
|
Beenden
|
|
</Button>
|
|
</div>
|
|
);
|
|
case 'completed':
|
|
return (
|
|
<div className="flex gap-2">
|
|
<Button
|
|
onClick={() => router.push(`/kunden-projekte/${customer.id}`)}
|
|
variant="outline"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<FileText className="w-4 h-4" />
|
|
Projekt anzeigen
|
|
</Button>
|
|
<Button
|
|
onClick={() => updateAppointmentStatus(customer.id, 'pending')}
|
|
variant="outline"
|
|
size="sm"
|
|
>
|
|
Zurücksetzen
|
|
</Button>
|
|
</div>
|
|
);
|
|
default:
|
|
return (
|
|
<Button
|
|
onClick={() => updateAppointmentStatus(customer.id, 'running')}
|
|
className="bg-green-500 hover:bg-green-600 flex items-center gap-2"
|
|
>
|
|
<Play className="w-4 h-4" />
|
|
Termin starten
|
|
</Button>
|
|
);
|
|
}
|
|
};
|
|
|
|
const getCompletionStatus = (customer: Customer) => {
|
|
const fields = [
|
|
customer.firma, customer.ansprechpartn, customer.telefon, customer.email,
|
|
customer.beschreibung, customer.zielgruppe, customer.ziel_der_websi,
|
|
customer.seiten_geplant, customer.fokus_inhalte, customer.design_wunsch,
|
|
customer.features_gewu, customer.budget, customer.deadline
|
|
];
|
|
const filledFields = fields.filter(field => field && field.trim() !== '').length;
|
|
const totalFields = fields.length;
|
|
const percentage = Math.round((filledFields / totalFields) * 100);
|
|
|
|
return { filledFields, totalFields, percentage };
|
|
};
|
|
|
|
const filteredCustomers = customers.filter(customer => {
|
|
const matchesSearch = (customer.ansprechpartn || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
(customer.firma || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
(customer.email || '').toLowerCase().includes(searchTerm.toLowerCase());
|
|
const matchesStatus = statusFilter === 'all' || customer.appointment_status === statusFilter;
|
|
return matchesSearch && matchesStatus;
|
|
});
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="text-center">
|
|
<h1 className="text-3xl font-bold mb-4 text-gray-800">Kunden-Projekte</h1>
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-4 border-blue-500 border-t-transparent mx-auto"></div>
|
|
<p className="mt-4 text-gray-600">Lade Projekte...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
|
<div className="max-w-7xl mx-auto p-6">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-3 bg-blue-500 rounded-xl">
|
|
<Users className="w-8 h-8 text-white" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-4xl font-bold text-gray-800">Kunden-Projekte</h1>
|
|
<p className="text-lg text-gray-600">
|
|
Professionelle Projektverwaltung und Kundenbefragung
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
|
<Card className="bg-white/80 backdrop-blur-sm">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-blue-100 rounded-lg">
|
|
<Calendar className="w-5 h-5 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-600">Gesamt Projekte</p>
|
|
<p className="text-2xl font-bold text-gray-800">{customers.length}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white/80 backdrop-blur-sm">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-yellow-100 rounded-lg">
|
|
<AlertCircle className="w-5 h-5 text-yellow-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-600">Wartend</p>
|
|
<p className="text-2xl font-bold text-gray-800">
|
|
{customers.filter(c => c.appointment_status === 'pending').length}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white/80 backdrop-blur-sm">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-green-100 rounded-lg">
|
|
<Play className="w-5 h-5 text-green-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-600">Aktiv</p>
|
|
<p className="text-2xl font-bold text-gray-800">
|
|
{customers.filter(c => c.appointment_status === 'running').length}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white/80 backdrop-blur-sm">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-gray-100 rounded-lg">
|
|
<CheckCircle className="w-5 h-5 text-gray-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-600">Abgeschlossen</p>
|
|
<p className="text-2xl font-bold text-gray-800">
|
|
{customers.filter(c => c.appointment_status === 'completed').length}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="flex flex-col sm:flex-row gap-4 mb-6">
|
|
<div className="flex-1">
|
|
<div className="relative">
|
|
<Input
|
|
placeholder="Nach Kunde, Firma oder E-Mail suchen..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10 bg-white/80 backdrop-blur-sm border-0 shadow-sm"
|
|
/>
|
|
<User className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
|
|
</div>
|
|
</div>
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
|
<SelectTrigger className="w-full sm:w-48 bg-white/80 backdrop-blur-sm border-0 shadow-sm">
|
|
<SelectValue placeholder="Status filtern" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Alle Status</SelectItem>
|
|
<SelectItem value="pending">Wartend</SelectItem>
|
|
<SelectItem value="running">Aktiv</SelectItem>
|
|
<SelectItem value="completed">Abgeschlossen</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Projects Grid */}
|
|
{filteredCustomers.length === 0 ? (
|
|
<Card className="bg-white/80 backdrop-blur-sm">
|
|
<CardContent className="p-12 text-center">
|
|
<div className="p-4 bg-blue-100 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
|
|
<Users className="w-8 h-8 text-blue-600" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-gray-800 mb-2">
|
|
{customers.length === 0
|
|
? "Keine Projekte gefunden"
|
|
: "Keine Projekte entsprechen den Filterkriterien"}
|
|
</h3>
|
|
<p className="text-gray-600">
|
|
{customers.length === 0
|
|
? "Erstellen Sie Ihr erstes Kundenprojekt über die Terminbuchung."
|
|
: "Versuchen Sie andere Suchkriterien oder Filter."}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="grid gap-6">
|
|
{filteredCustomers.map((customer) => {
|
|
const completion = getCompletionStatus(customer);
|
|
return (
|
|
<Card key={customer.id} className="bg-white/80 backdrop-blur-sm hover:shadow-lg transition-all duration-300 border-0 shadow-sm">
|
|
<CardHeader>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className="p-2 bg-blue-100 rounded-lg">
|
|
<Building className="w-5 h-5 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-xl text-gray-800">
|
|
{customer.ansprechpartn || customer.firma || 'Unbekannter Kunde'}
|
|
</CardTitle>
|
|
<p className="text-sm text-gray-600">
|
|
{customer.firma && customer.ansprechpartn ? `${customer.firma} - ${customer.ansprechpartn}` : customer.firma || customer.ansprechpartn}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<Mail className="w-4 h-4" />
|
|
<span>{customer.email || 'E-Mail nicht angegeben'}</span>
|
|
</div>
|
|
{customer.telefon && (
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<Phone className="w-4 h-4" />
|
|
<span>{customer.telefon}</span>
|
|
</div>
|
|
)}
|
|
{customer.termin_datum && (
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<Calendar className="w-4 h-4" />
|
|
<span>{new Date(customer.termin_datum).toLocaleString('de-DE')}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Completion Progress */}
|
|
<div className="mb-4">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium text-gray-700">Befragung Fortschritt</span>
|
|
<span className="text-sm text-gray-600">{completion.percentage}%</span>
|
|
</div>
|
|
<div className="w-full bg-gray-200 rounded-full h-2">
|
|
<div
|
|
className={`h-2 rounded-full transition-all duration-300 ${
|
|
completion.percentage >= 80 ? 'bg-green-500' :
|
|
completion.percentage >= 50 ? 'bg-yellow-500' : 'bg-blue-500'
|
|
}`}
|
|
style={{ width: `${completion.percentage}%` }}
|
|
></div>
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
{completion.filledFields} von {completion.totalFields} Feldern ausgefüllt
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-end gap-3">
|
|
{getStatusBadge(customer.appointment_status || 'pending', customer.started_by)}
|
|
{getStatusActions(customer)}
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|