Pepe44DEV/Papo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: vollständiges Dashboard-Redesign mit HeroUI - monolithische App.tsx aufgelöst, 16 Seiten, Context-API, collapsible Sidebar, neues Dashboard-Layout
Some checks failed
Deploy Discord Bot / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Pepe44DEV
2026-07-01 06:15:56 +02:00
parent ccaf7bd4d2
commit e2d8002bf2
29 changed files with 2776 additions and 1296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
frontend/src/pages/SupportLogin.tsx Normal file
View File

@@ -0,0 +1,119 @@
import { Card, CardContent, CardHeader, Input, TextArea, Button, Chip, Switch, Separator } from '@heroui/react';
import { LogIn, UserRound, Eye, Save, Send, RefreshCw } from 'lucide-react';
import { useApp } from '../context/AppContext';
import { SectionCard } from '../components/shared/SectionCard';
export function SupportLogin() {
const { supportLogin, setSupportLogin, saveSupportLogin } = useApp();
return (
<SectionCard title="Support Login" subtitle="Login-Panel f<>r Supporter konfigurieren">
<div className="grid gap-5 xl:grid-cols-[1fr_400px]">
<Card className="border border-default-100 bg-default-50/20">
<CardHeader className="px-5 pt-5 pb-0">
<h3 className="text-base font-semibold">Panel-Konfiguration</h3>
</CardHeader>
<CardContent className="flex flex-col gap-4 p-5">
<Switch
isSelected={supportLogin?.config?.autoRefresh !== false}
onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, autoRefresh: v } } : s)}
>
Auto-Refresh aktiv
</Switch>
<Input
label="Panel Channel ID"
placeholder="Channel ID eingeben"
value={supportLogin?.config?.panelChannelId || ''}
onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, panelChannelId: v } } : s)}
/>
<Input
label="Titel"
value={supportLogin?.config?.title || 'Support Login'}
onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, title: v } } : s)}
/>
<TextArea
label="Beschreibung"
value={supportLogin?.config?.description || ''}
onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, description: v } } : s)}
/>
<Input
label="Login Button Label"
value={supportLogin?.config?.loginLabel || 'Ich bin jetzt im Support'}
onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, loginLabel: v } } : s)}
/>
<Input
label="Logout Button Label"
value={supportLogin?.config?.logoutLabel || 'Ich bin nicht mehr im Support'}
onValueChange={(v) => setSupportLogin((s) => s ? { ...s, config: { ...s.config, logoutLabel: v } } : s)}
/>
<Separator />
<div className="flex gap-2">
<Button color="primary" startContent={<Save size={16} />} onPress={saveSupportLogin}>
Speichern & Panel senden
</Button>
<Button variant="flat" startContent={<Send size={16} />}>
Panel manuell senden
</Button>
</div>
</CardContent>
</Card>
<div className="space-y-4">
<Card className="border border-default-100 bg-default-50/20">
<CardHeader className="px-5 pt-5 pb-0">
<h3 className="text-base font-semibold">Live Vorschau</h3>
</CardHeader>
<CardContent className="p-5">
<div className="rounded-xl border border-default-100 bg-gradient-to-b from-default-50/40 to-background p-4">
<div className="flex items-center gap-3 mb-3">
<div className="flex size-10 items-center justify-center rounded-xl bg-primary-500/10 text-primary-400">
<LogIn size={20} />
</div>
<div>
<div className="font-semibold">{supportLogin?.config?.title || 'Support Login'}</div>
<div className="text-tiny text-default-400">{supportLogin?.config?.description || 'Melde dich als Support an/ab.'}</div>
</div>
</div>
<div className="flex gap-2">
<Button size="sm" color="primary" variant="flat">{supportLogin?.config?.loginLabel || 'Login'}</Button>
<Button size="sm" variant="flat">{supportLogin?.config?.logoutLabel || 'Logout'}</Button>
</div>
</div>
</CardContent>
</Card>
<Card className="border border-default-100 bg-default-50/20">
<CardHeader className="px-5 pt-5 pb-0">
<h3 className="text-base font-semibold">Aktive Supporter</h3>
</CardHeader>
<CardContent className="flex flex-col gap-2 p-5">
{supportLogin?.status?.active?.length ? supportLogin.status.active.map((s, i) => (
<div key={i} className="flex items-center gap-3 rounded-xl border border-default-100 bg-default-50/30 px-4 py-3 text-small">
<div className="size-2 rounded-full bg-success-400" />
<Avatar name={s.username?.[0]} size="sm" className="size-6" />
<span className="font-medium">{s.username || s.userId}</span>
<Chip size="sm" variant="flat" color="success" className="ml-auto">Online</Chip>
</div>
)) : (
<div className="flex flex-col items-center gap-2 py-4 text-center text-tiny text-default-400">
<UserRound size={20} />
Keine aktiven Supporter
</div>
)}
<p className="mt-2 text-tiny text-default-400">
Support Role ID: {supportLogin?.supportRoleId || 'Nicht gesetzt'}
</p>
</CardContent>
</Card>
</div>
</div>
</SectionCard>
);
}