Comprehensive admin + user dashboards (production-ready)
This commit is contained in:
Leon Serfaty
@@ -2,20 +2,62 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { Loader2, Save } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import { authClient } from "@/lib/auth/auth-client";
|
||||
import { ConfirmDialog } from "@/components/admin/ui/confirm-dialog";
|
||||
import { authClient, signOut } from "@/lib/auth/auth-client";
|
||||
import { VOICE_CATALOG } from "@/lib/ai/voices";
|
||||
import { LANGUAGES } from "@/lib/episodes/options";
|
||||
import { savePreferencesAction, deleteAccountAction } from "@/app/(app)/settings/actions";
|
||||
|
||||
export function SettingsClient({ name, email }: { name: string; email: string }) {
|
||||
const NO_VOICE = "__none__";
|
||||
|
||||
interface Preferences {
|
||||
defaultVoiceId: string | null;
|
||||
defaultLanguage: string;
|
||||
emailOnEpisodeReady: boolean;
|
||||
productEmails: boolean;
|
||||
}
|
||||
|
||||
export function SettingsClient({
|
||||
name,
|
||||
email,
|
||||
preferences,
|
||||
}: {
|
||||
name: string;
|
||||
email: string;
|
||||
preferences: Preferences;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [displayName, setDisplayName] = useState(name);
|
||||
const [savingProfile, setSavingProfile] = useState(false);
|
||||
const [savingPw, setSavingPw] = useState(false);
|
||||
|
||||
// Defaults
|
||||
const [voiceId, setVoiceId] = useState(preferences.defaultVoiceId ?? NO_VOICE);
|
||||
const [language, setLanguage] = useState(preferences.defaultLanguage);
|
||||
const [savingDefaults, setSavingDefaults] = useState(false);
|
||||
|
||||
// Notifications
|
||||
const [emailOnReady, setEmailOnReady] = useState(preferences.emailOnEpisodeReady);
|
||||
const [productEmails, setProductEmails] = useState(preferences.productEmails);
|
||||
const [savingNotif, setSavingNotif] = useState(false);
|
||||
|
||||
// Danger zone
|
||||
const [confirmEmail, setConfirmEmail] = useState("");
|
||||
|
||||
async function saveProfile(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setSavingProfile(true);
|
||||
@@ -45,6 +87,38 @@ export function SettingsClient({ name, email }: { name: string; email: string })
|
||||
}
|
||||
}
|
||||
|
||||
async function saveDefaults() {
|
||||
setSavingDefaults(true);
|
||||
const res = await savePreferencesAction({
|
||||
defaultVoiceId: voiceId === NO_VOICE ? null : voiceId,
|
||||
defaultLanguage: language,
|
||||
});
|
||||
setSavingDefaults(false);
|
||||
if (res.ok) toast.success("Defaults saved");
|
||||
else toast.error(res.error ?? "Could not save");
|
||||
}
|
||||
|
||||
async function saveNotifications(next: Partial<Preferences>) {
|
||||
const emailVal = next.emailOnEpisodeReady ?? emailOnReady;
|
||||
const productVal = next.productEmails ?? productEmails;
|
||||
setEmailOnReady(emailVal);
|
||||
setProductEmails(productVal);
|
||||
setSavingNotif(true);
|
||||
const res = await savePreferencesAction({
|
||||
emailOnEpisodeReady: emailVal,
|
||||
productEmails: productVal,
|
||||
});
|
||||
setSavingNotif(false);
|
||||
if (!res.ok) {
|
||||
toast.error(res.error ?? "Could not save");
|
||||
// Revert optimistic state.
|
||||
setEmailOnReady(preferences.emailOnEpisodeReady);
|
||||
setProductEmails(preferences.productEmails);
|
||||
} else {
|
||||
toast.success("Notification preferences saved");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-xl space-y-6">
|
||||
<Card>
|
||||
@@ -92,6 +166,131 @@ export function SettingsClient({ name, email }: { name: string; email: string })
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Defaults</CardTitle>
|
||||
<CardDescription>
|
||||
Pre-select a voice and language when creating new episodes.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="default-voice">Default host voice</Label>
|
||||
<Select value={voiceId} onValueChange={setVoiceId}>
|
||||
<SelectTrigger id="default-voice">
|
||||
<SelectValue placeholder="Choose a voice" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={NO_VOICE}>No default (choose each time)</SelectItem>
|
||||
{VOICE_CATALOG.map((v) => (
|
||||
<SelectItem key={v.id} value={v.id}>
|
||||
{v.name}
|
||||
{v.accent ? ` · ${v.accent}` : ""}
|
||||
{v.description ? ` — ${v.description}` : ""}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="default-language">Default language</Label>
|
||||
<Select value={language} onValueChange={setLanguage}>
|
||||
<SelectTrigger id="default-language">
|
||||
<SelectValue placeholder="Choose a language" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{LANGUAGES.map((l) => (
|
||||
<SelectItem key={l.code} value={l.code}>
|
||||
{l.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Button onClick={saveDefaults} disabled={savingDefaults}>
|
||||
{savingDefaults ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
|
||||
Save defaults
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Notifications</CardTitle>
|
||||
<CardDescription>Choose which emails you want to receive.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-1">
|
||||
<div className="flex items-center justify-between gap-4 py-3">
|
||||
<div className="space-y-0.5">
|
||||
<p className="text-sm font-semibold">Episode ready</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Email me when an episode finishes generating.
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={emailOnReady}
|
||||
disabled={savingNotif}
|
||||
onCheckedChange={(v) => saveNotifications({ emailOnEpisodeReady: v })}
|
||||
aria-label="Email me when an episode is ready"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4 border-t py-3">
|
||||
<div className="space-y-0.5">
|
||||
<p className="text-sm font-semibold">Product updates</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Occasional product news, tips and announcements.
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={productEmails}
|
||||
disabled={savingNotif}
|
||||
onCheckedChange={(v) => saveNotifications({ productEmails: v })}
|
||||
aria-label="Receive product update emails"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-destructive/30">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-destructive">Danger zone</CardTitle>
|
||||
<CardDescription>
|
||||
Permanently delete your account and all of your episodes. This cannot be undone.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ConfirmDialog
|
||||
trigger={<Button variant="destructive">Delete account</Button>}
|
||||
title="Delete your account?"
|
||||
description="This permanently deletes your account, every episode, series, and all generated content. This action is irreversible."
|
||||
confirmLabel="Delete my account"
|
||||
successMessage="Account deleted"
|
||||
body={
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirm-email">
|
||||
Type <span className="font-semibold text-foreground">{email}</span> to confirm
|
||||
</Label>
|
||||
<Input
|
||||
id="confirm-email"
|
||||
value={confirmEmail}
|
||||
onChange={(e) => setConfirmEmail(e.target.value)}
|
||||
placeholder={email}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
onConfirm={async () => {
|
||||
const res = await deleteAccountAction(confirmEmail);
|
||||
if (res.ok) {
|
||||
await signOut();
|
||||
router.push("/");
|
||||
}
|
||||
return res;
|
||||
}}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user