since3-portal/modules/admin/ui/views/settings-view.tsx

import { getAllProductTemplates } from "@/modules/admin/queries/settings"
import { PasswordForm, ProductTemplatesSection, ProfileForm } from "@/modules/admin/ui/components/settings-forms"

function Section({ title, description, children }: { title: string; description: string; children: React.ReactNode }) {
    return (
        <section className="flex flex-col gap-4 rounded-lg border border-border p-4 md:p-6">
            <div className="flex flex-col gap-1">
                <h2 className="text-xl font-semibold">{title}</h2>
                <p className="text-small text-muted-foreground">{description}</p>
            </div>
            {children}
        </section>
    )
}

const SettingsView = async ({ name, email }: { name: string; email: string }) => {
    const templates = await getAllProductTemplates()

    return (
        <div className="flex w-full max-w-4xl flex-col gap-6 md:gap-8">
            <h1 className="text-2xl font-semibold md:text-3xl">Einstellungen</h1>

            <Section title="Profil" description="So wirst du im Portal angezeigt, z. B. bei „zuletzt bearbeitet von“.">
                <ProfileForm name={name} email={email} />
            </Section>

            <Section title="Passwort" description="Ändere das Passwort für deinen Admin-Zugang.">
                <PasswordForm />
            </Section>

            <Section title="Produktvorlagen" description="Vorlagen für Rechnungspositionen. Inaktive Vorlagen erscheinen nicht mehr im Rechnungsdialog.">
                <ProductTemplatesSection templates={templates} />
            </Section>
        </div>
    )
}

export default SettingsView