232 lines
9.2 KiB
TypeScript
232 lines
9.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Loader2, Building2, MapPin, Receipt, Save } from 'lucide-react';
|
|
import { createClient } from '@/lib/supabase/client';
|
|
import { getBrandingSettings, saveBrandingSettings } from '@/lib/actions/branding';
|
|
import type { BrandingSettings } from '@/lib/constants/branding';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
export default function FirmendatenPage() {
|
|
const [loading, setLoading] = useState(true);
|
|
const [branding, setBranding] = useState<BrandingSettings>({
|
|
companyName: '',
|
|
street: '',
|
|
zip: '',
|
|
city: '',
|
|
billingStreet: '',
|
|
billingZip: '',
|
|
billingCity: '',
|
|
sameBillingAddress: true,
|
|
colorScheme: 'modern_blue',
|
|
primaryColor: '#2563eb',
|
|
accentColor: '#38bdf8',
|
|
});
|
|
const [saving, setSaving] = useState(false);
|
|
const [msg, setMsg] = useState('');
|
|
const [msgType, setMsgType] = useState<'success' | 'error' | ''>('');
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
async function loadData() {
|
|
try {
|
|
const supabase = createClient();
|
|
const { data: { user } } = await supabase.auth.getUser();
|
|
if (!user) {
|
|
router.push('/auth/login');
|
|
return;
|
|
}
|
|
const brandRes = await getBrandingSettings();
|
|
if (brandRes) setBranding(brandRes);
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
loadData();
|
|
}, [router]);
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
setMsg('');
|
|
try {
|
|
const res = await saveBrandingSettings(branding);
|
|
if (res.success) {
|
|
setMsgType('success');
|
|
setMsg('Firmendaten erfolgreich gespeichert.');
|
|
} else {
|
|
setMsgType('error');
|
|
setMsg(res.error || 'Fehler beim Speichern.');
|
|
}
|
|
} catch (err: any) {
|
|
setMsgType('error');
|
|
setMsg(err.message || 'Fehler beim Speichern.');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return <div className="p-8 text-white flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>;
|
|
}
|
|
|
|
return (
|
|
<div className="p-6 max-w-5xl mx-auto space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-extrabold tracking-tight text-white flex items-center gap-3">
|
|
<Building2 className="w-8 h-8 text-blue-400" />
|
|
Firmendaten & Anschrift
|
|
</h1>
|
|
<p className="text-slate-400 text-xs mt-1">
|
|
Verwaltung der eigenen Unternehmensanschrift für Rechnungen, Dokumente und Footereinträge.
|
|
</p>
|
|
</div>
|
|
|
|
{msg && (
|
|
<div className={`p-3.5 rounded-xl text-xs font-medium border ${msgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
|
|
}`}>
|
|
{msg}
|
|
</div>
|
|
)}
|
|
|
|
<div className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-5">
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs font-bold text-slate-300">Firmenname *</Label>
|
|
<Input
|
|
value={branding.companyName}
|
|
onChange={(e) => setBranding({ ...branding, companyName: e.target.value })}
|
|
placeholder="z. B. Meine Firma GmbH"
|
|
className="bg-slate-950/80 border-slate-800 text-white text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs font-bold text-slate-300">Logo-URL (Optional)</Label>
|
|
<Input
|
|
value={branding.logoUrl || ''}
|
|
onChange={(e) => setBranding({ ...branding, logoUrl: e.target.value })}
|
|
placeholder="https://domain.de/logo.png oder /assets/logo.png"
|
|
className="bg-slate-950/80 border-slate-800 text-white text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs font-bold text-slate-300">Entwickler / Subline Beschriftung (Footer & Header)</Label>
|
|
<Input
|
|
value={branding.developerFooter || ''}
|
|
onChange={(e) => setBranding({ ...branding, developerFooter: e.target.value })}
|
|
placeholder="CASPOS Shop"
|
|
className="bg-slate-950/80 border-slate-800 text-white text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-4 pt-3 border-t border-slate-800">
|
|
<div className="space-y-3">
|
|
<span className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
|
|
<MapPin className="w-3.5 h-3.5 text-blue-400" /> Hauptanschrift
|
|
</span>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs text-slate-400">Straße & Nr.</Label>
|
|
<Input
|
|
value={branding.street}
|
|
onChange={(e) => setBranding({ ...branding, street: e.target.value })}
|
|
placeholder="Musterstraße 12"
|
|
className="bg-slate-950/80 border-slate-800 text-white text-xs"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<div>
|
|
<Label className="text-xs text-slate-400">PLZ</Label>
|
|
<Input
|
|
value={branding.zip}
|
|
onChange={(e) => setBranding({ ...branding, zip: e.target.value })}
|
|
placeholder="12345"
|
|
className="bg-slate-950/80 border-slate-800 text-white text-xs"
|
|
/>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<Label className="text-xs text-slate-400">Ort</Label>
|
|
<Input
|
|
value={branding.city}
|
|
onChange={(e) => setBranding({ ...branding, city: e.target.value })}
|
|
placeholder="Musterstadt"
|
|
className="bg-slate-950/80 border-slate-800 text-white text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
|
|
<Receipt className="w-3.5 h-3.5 text-blue-400" /> Rechnungsadresse
|
|
</span>
|
|
<label className="flex items-center gap-1.5 text-xs text-slate-400 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={branding.sameBillingAddress}
|
|
onChange={(e) => setBranding({ ...branding, sameBillingAddress: e.target.checked })}
|
|
className="w-3.5 h-3.5 rounded border-slate-700 bg-slate-950 text-blue-500"
|
|
/>
|
|
Gleiche wie Hauptanschrift
|
|
</label>
|
|
</div>
|
|
|
|
{!branding.sameBillingAddress ? (
|
|
<div className="space-y-3 p-3 rounded-xl bg-slate-950/40 border border-slate-800">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs text-slate-400">Rechnungsstraße & Nr.</Label>
|
|
<Input
|
|
value={branding.billingStreet}
|
|
onChange={(e) => setBranding({ ...branding, billingStreet: e.target.value })}
|
|
placeholder="Rechnungsstraße 45"
|
|
className="bg-slate-950/80 border-slate-800 text-white text-xs"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<div>
|
|
<Label className="text-xs text-slate-400">PLZ</Label>
|
|
<Input
|
|
value={branding.billingZip}
|
|
onChange={(e) => setBranding({ ...branding, billingZip: e.target.value })}
|
|
placeholder="54321"
|
|
className="bg-slate-950/80 border-slate-800 text-white text-xs"
|
|
/>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<Label className="text-xs text-slate-400">Ort</Label>
|
|
<Input
|
|
value={branding.billingCity}
|
|
onChange={(e) => setBranding({ ...branding, billingCity: e.target.value })}
|
|
placeholder="Rechnungsstadt"
|
|
className="bg-slate-950/80 border-slate-800 text-white text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="p-3 rounded-xl bg-slate-950/40 border border-slate-800/60 text-xs text-slate-500 italic">
|
|
Verwendet automatisch die Hauptanschrift oben.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end pt-4 border-t border-slate-800">
|
|
<Button onClick={handleSave} disabled={saving} className="bg-blue-600 hover:bg-blue-500 text-white rounded-xl px-6 h-10 text-xs font-bold">
|
|
{saving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
|
|
Speichern
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|