Rewrite Admin dashboard with tabbed layout
cgen-b3adf2085f4148f693748703c1e60577
This commit is contained in:
Builder.io
parent
6fea8ffe8c
commit
14a2f34976
1 changed files with 474 additions and 404 deletions
|
|
@ -111,17 +111,16 @@ export default function Admin() {
|
|||
<Layout>
|
||||
<div className="min-h-screen bg-aethex-gradient py-12">
|
||||
<div className="container mx-auto px-4 max-w-3xl">
|
||||
<Card className="bg-red-500/10 border-red-500/30">
|
||||
<Card className="bg-red-500/10 border-red-500/30 backdrop-blur">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-red-400">Access Denied</CardTitle>
|
||||
<CardTitle className="text-red-400">Access denied</CardTitle>
|
||||
<CardDescription>
|
||||
You don't have permission to access the admin panel.
|
||||
This panel is restricted to {ownerEmail}. If you need access, contact the site owner.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onClick={() => navigate("/dashboard")}>
|
||||
Go to Dashboard
|
||||
</Button>
|
||||
<CardContent className="flex gap-2">
|
||||
<Button onClick={() => navigate("/dashboard")}>Go to dashboard</Button>
|
||||
<Button variant="outline" onClick={() => navigate("/support")}>Contact support</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
@ -287,447 +286,518 @@ export default function Admin() {
|
|||
<Layout>
|
||||
<div className="min-h-screen bg-aethex-gradient py-12">
|
||||
<div className="container mx-auto px-4 max-w-6xl space-y-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gradient">Admin Panel</h1>
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-3xl font-bold text-gradient">Admin Control Center</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Site Owner • Admin • Founder
|
||||
Unified oversight for AeThex operations, content, and community.
|
||||
</p>
|
||||
<div className="flex gap-2 mt-2">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-green-500/50 text-green-400"
|
||||
>
|
||||
Site Owner
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant="outline" className="border-green-500/50 text-green-300">
|
||||
Owner
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-blue-500/50 text-blue-400"
|
||||
>
|
||||
<Badge variant="outline" className="border-blue-500/50 text-blue-300">
|
||||
Admin
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-purple-500/50 text-purple-400"
|
||||
>
|
||||
<Badge variant="outline" className="border-purple-500/50 text-purple-300">
|
||||
Founder
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Signed in as <span className="text-foreground">{normalizedEmail || ownerEmail}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button variant="outline" onClick={() => navigate("/dashboard")}>
|
||||
Dashboard
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => navigate("/profile")}>
|
||||
Profile
|
||||
</Button>
|
||||
<Button onClick={() => setActiveTab("content")}>Create update</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Card className="bg-card/50 border-border/50">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-5 w-5 text-green-400" />
|
||||
<CardTitle className="text-lg">Access Control</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Owner-only access is enforced by email
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="text-sm space-y-1 text-muted-foreground">
|
||||
<li>
|
||||
Owner:{" "}
|
||||
<span className="text-foreground">mrpiglr@gmail.com</span>
|
||||
</li>
|
||||
<li>All other users are denied access</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
|
||||
<TabsList className="w-full justify-start gap-2 overflow-x-auto border border-border/40 bg-background/40 px-1 py-1 backdrop-blur">
|
||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||
<TabsTrigger value="content">Content</TabsTrigger>
|
||||
<TabsTrigger value="community">Community</TabsTrigger>
|
||||
<TabsTrigger value="operations">Operations</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<Card className="bg-card/50 border-border/50">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-5 w-5 text-blue-400" />
|
||||
<CardTitle className="text-lg">Users & Roles</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Future: manage roles, invitations, and status
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">Coming soon</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<TabsContent value="overview" className="space-y-6">
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
{overviewStats.map((stat) => (
|
||||
<AdminStatCard
|
||||
key={stat.title}
|
||||
title={stat.title}
|
||||
value={stat.value}
|
||||
description={stat.description}
|
||||
trend={stat.trend}
|
||||
icon={stat.icon}
|
||||
tone={stat.tone}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Blog Posts Management */}
|
||||
<Card className="bg-card/50 border-border/50 md:col-span-2 lg:col-span-3">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<PenTool className="h-5 w-5 text-aethex-400" />
|
||||
<CardTitle className="text-lg">Blog Posts</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Manage blog content stored in Supabase
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={loadingPosts}
|
||||
onClick={async () => {
|
||||
try {
|
||||
setLoadingPosts(true);
|
||||
const res = await fetch("/api/blog?limit=100");
|
||||
const data = res.ok ? await res.json() : [];
|
||||
if (Array.isArray(data)) setBlogPosts(data);
|
||||
} finally {
|
||||
setLoadingPosts(false);
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<Card className="bg-card/60 border-border/40 backdrop-blur">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Command className="h-5 w-5 text-aethex-300" />
|
||||
<CardTitle>Quick actions</CardTitle>
|
||||
</div>
|
||||
<CardDescription>Launch frequent administrative workflows.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-3">
|
||||
{quickActions.map(({ label, description, icon: ActionIcon, action }) => (
|
||||
<button
|
||||
key={label}
|
||||
type="button"
|
||||
onClick={action}
|
||||
className="group flex items-start gap-3 rounded-lg border border-border/30 bg-background/40 px-4 py-3 text-left transition hover:border-aethex-400/60 hover:bg-background/60"
|
||||
>
|
||||
<ActionIcon className="mt-0.5 h-5 w-5 text-aethex-400 transition group-hover:text-aethex-200" />
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium text-foreground">{label}</p>
|
||||
<p className="text-sm text-muted-foreground">{description}</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card/60 border-border/40 backdrop-blur">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-5 w-5 text-green-400" />
|
||||
<CardTitle>Access control</CardTitle>
|
||||
</div>
|
||||
<CardDescription>Owner-only access enforced via Supabase roles.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm text-muted-foreground">
|
||||
<ul className="space-y-2 leading-relaxed">
|
||||
<li>
|
||||
Owner email: <span className="text-foreground">{ownerEmail}</span>
|
||||
</li>
|
||||
<li>Roles are provisioned automatically on owner sign-in.</li>
|
||||
<li>Grant additional admins by updating Supabase role assignments.</li>
|
||||
</ul>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => setActiveTab("community")}>
|
||||
View members
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => navigate("/support")}>
|
||||
Contact support
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="content" className="space-y-6">
|
||||
<Card className="bg-card/60 border-border/40 backdrop-blur">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<PenTool className="h-5 w-5 text-aethex-300" />
|
||||
<CardTitle>Content overview</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
{publishedPosts} published {publishedPosts === 1 ? "post" : "posts"} · {loadingPosts ? "refreshing content…" : "latest Supabase sync"}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground space-y-2">
|
||||
<p>
|
||||
Drafts and announcements appear instantly on the public blog after saving. Use scheduled releases for major updates and keep thumbnails optimised for 1200×630.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card/60 border-border/40 backdrop-blur">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<PenTool className="h-5 w-5 text-aethex-400" />
|
||||
<CardTitle className="text-lg">Blog posts</CardTitle>
|
||||
</div>
|
||||
<CardDescription>Manage blog content stored in Supabase</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={loadingPosts}
|
||||
onClick={async () => {
|
||||
try {
|
||||
setLoadingPosts(true);
|
||||
const res = await fetch("/api/blog?limit=100");
|
||||
const data = res.ok ? await res.json() : [];
|
||||
if (Array.isArray(data)) setBlogPosts(data);
|
||||
} finally {
|
||||
setLoadingPosts(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{loadingPosts ? "Refreshing…" : "Refresh"}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setBlogPosts([
|
||||
{
|
||||
title: "New Post",
|
||||
slug: "new-post",
|
||||
category: "General",
|
||||
},
|
||||
...blogPosts,
|
||||
])
|
||||
}
|
||||
}}
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setBlogPosts([
|
||||
{
|
||||
title: "New Post",
|
||||
slug: "new-post",
|
||||
category: "General",
|
||||
},
|
||||
...blogPosts,
|
||||
])
|
||||
}
|
||||
>
|
||||
Add Post
|
||||
</Button>
|
||||
</div>
|
||||
>
|
||||
Add post
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{blogPosts.map((p, i) => (
|
||||
<div
|
||||
key={p.id || p.slug || i}
|
||||
className="p-3 rounded border border-border/40 space-y-2"
|
||||
>
|
||||
<div className="grid md:grid-cols-2 gap-2">
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
placeholder="Title"
|
||||
value={p.title || ""}
|
||||
{blogPosts.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No posts loaded yet. Use “Refresh” or “Add post” to start managing content.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{blogPosts.map((p, i) => (
|
||||
<div
|
||||
key={p.id || p.slug || i}
|
||||
className="space-y-2 rounded border border-border/40 bg-background/40 p-3"
|
||||
>
|
||||
<div className="grid gap-2 md:grid-cols-2">
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
placeholder="Title"
|
||||
value={p.title || ""}
|
||||
onChange={(e) => {
|
||||
const next = blogPosts.slice();
|
||||
next[i] = { ...next[i], title: e.target.value };
|
||||
setBlogPosts(next);
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
placeholder="Slug"
|
||||
value={p.slug || ""}
|
||||
onChange={(e) => {
|
||||
const next = blogPosts.slice();
|
||||
next[i] = { ...next[i], slug: e.target.value };
|
||||
setBlogPosts(next);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2 md:grid-cols-2">
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
placeholder="Author"
|
||||
value={p.author || ""}
|
||||
onChange={(e) => {
|
||||
const n = blogPosts.slice();
|
||||
n[i] = { ...n[i], author: e.target.value };
|
||||
setBlogPosts(n);
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
placeholder="Date"
|
||||
value={p.date || ""}
|
||||
onChange={(e) => {
|
||||
const n = blogPosts.slice();
|
||||
n[i] = { ...n[i], date: e.target.value };
|
||||
setBlogPosts(n);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2 md:grid-cols-3">
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
placeholder="Read time (e.g., 8 min read)"
|
||||
value={p.read_time || ""}
|
||||
onChange={(e) => {
|
||||
const n = blogPosts.slice();
|
||||
n[i] = { ...n[i], read_time: e.target.value };
|
||||
setBlogPosts(n);
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
placeholder="Category"
|
||||
value={p.category || ""}
|
||||
onChange={(e) => {
|
||||
const n = blogPosts.slice();
|
||||
n[i] = { ...n[i], category: e.target.value };
|
||||
setBlogPosts(n);
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
placeholder="Image URL"
|
||||
value={p.image || ""}
|
||||
onChange={(e) => {
|
||||
const n = blogPosts.slice();
|
||||
n[i] = { ...n[i], image: e.target.value };
|
||||
setBlogPosts(n);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<textarea
|
||||
className="w-full bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
rows={2}
|
||||
placeholder="Excerpt"
|
||||
value={p.excerpt || ""}
|
||||
onChange={(e) => {
|
||||
const next = blogPosts.slice();
|
||||
next[i] = { ...next[i], title: e.target.value };
|
||||
setBlogPosts(next);
|
||||
const n = blogPosts.slice();
|
||||
n[i] = { ...n[i], excerpt: e.target.value };
|
||||
setBlogPosts(n);
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
placeholder="Slug"
|
||||
value={p.slug || ""}
|
||||
<textarea
|
||||
className="w-full bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
rows={6}
|
||||
placeholder="Body HTML"
|
||||
value={p.body_html || ""}
|
||||
onChange={(e) => {
|
||||
const next = blogPosts.slice();
|
||||
next[i] = { ...next[i], slug: e.target.value };
|
||||
setBlogPosts(next);
|
||||
const n = blogPosts.slice();
|
||||
n[i] = { ...n[i], body_html: e.target.value };
|
||||
setBlogPosts(n);
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => deletePost(i)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => savePost(i)}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-2">
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
placeholder="Author"
|
||||
value={p.author || ""}
|
||||
onChange={(e) => {
|
||||
const n = blogPosts.slice();
|
||||
n[i] = { ...n[i], author: e.target.value };
|
||||
setBlogPosts(n);
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
placeholder="Date"
|
||||
value={p.date || ""}
|
||||
onChange={(e) => {
|
||||
const n = blogPosts.slice();
|
||||
n[i] = { ...n[i], date: e.target.value };
|
||||
setBlogPosts(n);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="community" className="space-y-6">
|
||||
<Card className="bg-card/60 border-border/40 backdrop-blur">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-5 w-5 text-cyan-300" />
|
||||
<CardTitle>Member directory</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Showing {displayProfiles.length} of {totalMembers} profiles.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{displayProfiles.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No profiles were returned from the identity service. Trigger a refresh or invite teammates to join AeThex.
|
||||
</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead>
|
||||
<tr className="text-left text-xs uppercase tracking-wide text-muted-foreground">
|
||||
<th className="pb-2 pr-4 font-medium">Name</th>
|
||||
<th className="pb-2 pr-4 font-medium">Email</th>
|
||||
<th className="pb-2 pr-4 font-medium">Role</th>
|
||||
<th className="pb-2 font-medium">Loyalty</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border/30">
|
||||
{displayProfiles.map((profile) => (
|
||||
<tr key={profile.id} className="text-foreground/90">
|
||||
<td className="py-2 pr-4">
|
||||
{profile.full_name || profile.username || "Unknown"}
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-muted-foreground">
|
||||
{profile.email || "—"}
|
||||
</td>
|
||||
<td className="py-2 pr-4">
|
||||
<Badge variant="outline">{profile.role || "member"}</Badge>
|
||||
</td>
|
||||
<td className="py-2 text-muted-foreground">
|
||||
{profile.loyalty_points ?? 0}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-2">
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
placeholder="Read time (e.g., 8 min read)"
|
||||
value={p.read_time || ""}
|
||||
onChange={(e) => {
|
||||
const n = blogPosts.slice();
|
||||
n[i] = { ...n[i], read_time: e.target.value };
|
||||
setBlogPosts(n);
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
placeholder="Category"
|
||||
value={p.category || ""}
|
||||
onChange={(e) => {
|
||||
const n = blogPosts.slice();
|
||||
n[i] = { ...n[i], category: e.target.value };
|
||||
setBlogPosts(n);
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
placeholder="Image URL"
|
||||
value={p.image || ""}
|
||||
onChange={(e) => {
|
||||
const n = blogPosts.slice();
|
||||
n[i] = { ...n[i], image: e.target.value };
|
||||
setBlogPosts(n);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card/60 border-border/40 backdrop-blur">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<UserCog className="h-5 w-5 text-teal-300" />
|
||||
<CardTitle>Community actions</CardTitle>
|
||||
</div>
|
||||
<CardDescription>Grow the network and celebrate contributors.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-wrap gap-2">
|
||||
<Button size="sm" onClick={() => navigate("/community")}>Open community hub</Button>
|
||||
<Button size="sm" variant="outline" onClick={() => navigate("/mentorship")}>
|
||||
Manage mentorships
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={() => navigate("/support")}>Support queue</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="operations" className="space-y-6">
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<Card className="bg-card/60 border-border/40 backdrop-blur lg:col-span-2">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Settings className="h-5 w-5 text-yellow-300" />
|
||||
<CardTitle>Featured studios</CardTitle>
|
||||
</div>
|
||||
<textarea
|
||||
className="w-full bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
rows={2}
|
||||
placeholder="Excerpt"
|
||||
value={p.excerpt || ""}
|
||||
onChange={(e) => {
|
||||
const n = blogPosts.slice();
|
||||
n[i] = { ...n[i], excerpt: e.target.value };
|
||||
setBlogPosts(n);
|
||||
}}
|
||||
/>
|
||||
<textarea
|
||||
className="w-full bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
rows={6}
|
||||
placeholder="Body HTML"
|
||||
value={p.body_html || ""}
|
||||
onChange={(e) => {
|
||||
const n = blogPosts.slice();
|
||||
n[i] = { ...n[i], body_html: e.target.value };
|
||||
setBlogPosts(n);
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-end gap-2">
|
||||
<CardDescription>Control studios highlighted across AeThex experiences.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{studios.map((s, i) => (
|
||||
<div
|
||||
key={`${s.name}-${i}`}
|
||||
className="space-y-2 rounded border border-border/40 bg-background/40 p-3"
|
||||
>
|
||||
<div className="grid gap-2 md:grid-cols-2">
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
value={s.name}
|
||||
onChange={(e) => {
|
||||
const next = studios.slice();
|
||||
next[i] = { ...next[i], name: e.target.value };
|
||||
setStudios(next);
|
||||
}}
|
||||
placeholder="Studio name"
|
||||
/>
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
value={s.tagline || ""}
|
||||
onChange={(e) => {
|
||||
const next = studios.slice();
|
||||
next[i] = { ...next[i], tagline: e.target.value };
|
||||
setStudios(next);
|
||||
}}
|
||||
placeholder="Tagline"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2 md:grid-cols-2">
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
value={s.metrics || ""}
|
||||
onChange={(e) => {
|
||||
const next = studios.slice();
|
||||
next[i] = { ...next[i], metrics: e.target.value };
|
||||
setStudios(next);
|
||||
}}
|
||||
placeholder="Metrics (e.g., 1B+ sessions)"
|
||||
/>
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
value={(s.specialties || []).join(", ")}
|
||||
onChange={(e) => {
|
||||
const next = studios.slice();
|
||||
next[i] = {
|
||||
...next[i],
|
||||
specialties: e.target.value
|
||||
.split(",")
|
||||
.map((v) => v.trim())
|
||||
.filter(Boolean),
|
||||
};
|
||||
setStudios(next);
|
||||
}}
|
||||
placeholder="Specialties (comma separated)"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => setStudios(studios.filter((_, idx) => idx !== i))}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex flex-wrap justify-between gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => deletePost(i)}
|
||||
onClick={() => setStudios([...studios, { name: "New Studio" }])}
|
||||
>
|
||||
Delete
|
||||
Add studio
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => savePost(i)}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card/50 border-border/50">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Settings className="h-5 w-5 text-yellow-400" />
|
||||
<CardTitle className="text-lg">Featured Studios</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Manage studios shown on Game Development page
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{studios.map((s, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="p-3 rounded border border-border/40 space-y-2"
|
||||
>
|
||||
<div className="grid md:grid-cols-2 gap-2">
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
value={s.name}
|
||||
onChange={(e) => {
|
||||
const next = studios.slice();
|
||||
next[i] = { ...next[i], name: e.target.value };
|
||||
setStudios(next);
|
||||
}}
|
||||
placeholder="Studio name"
|
||||
/>
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
value={s.tagline || ""}
|
||||
onChange={(e) => {
|
||||
const next = studios.slice();
|
||||
next[i] = { ...next[i], tagline: e.target.value };
|
||||
setStudios(next);
|
||||
}}
|
||||
placeholder="Tagline"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-2">
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
value={s.metrics || ""}
|
||||
onChange={(e) => {
|
||||
const next = studios.slice();
|
||||
next[i] = { ...next[i], metrics: e.target.value };
|
||||
setStudios(next);
|
||||
}}
|
||||
placeholder="Metrics (e.g., 1B+ sessions)"
|
||||
/>
|
||||
<input
|
||||
className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
|
||||
value={(s.specialties || []).join(", ")}
|
||||
onChange={(e) => {
|
||||
const next = studios.slice();
|
||||
next[i] = {
|
||||
...next[i],
|
||||
specialties: e.target.value
|
||||
.split(",")
|
||||
.map((v) => v.trim())
|
||||
.filter(Boolean),
|
||||
};
|
||||
setStudios(next);
|
||||
}}
|
||||
placeholder="Specialties (comma separated)"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
const next = studios.filter((_, idx) => idx !== i);
|
||||
setStudios(next);
|
||||
onClick={async () => {
|
||||
const resp = await fetch("/api/featured-studios", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ studios }),
|
||||
});
|
||||
if (!resp.ok) {
|
||||
aethexToast.error({
|
||||
title: "Save failed",
|
||||
description: "Unable to persist featured studios.",
|
||||
});
|
||||
} else {
|
||||
aethexToast.success({
|
||||
title: "Studios saved",
|
||||
description: "Featured studios updated successfully.",
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
Save studios
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex justify-between">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
setStudios([...studios, { name: "New Studio" }])
|
||||
}
|
||||
>
|
||||
Add Studio
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={async () => {
|
||||
const resp = await fetch("/api/featured-studios", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ studios }),
|
||||
});
|
||||
if (!resp.ok) {
|
||||
alert("Failed to save studios");
|
||||
return;
|
||||
}
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card/50 border-border/50">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="h-5 w-5 text-orange-400" />
|
||||
<CardTitle className="text-lg">System Status</CardTitle>
|
||||
</div>
|
||||
<CardDescription>Auth, database, and services</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="text-sm text-muted-foreground space-y-1">
|
||||
<li>Auth: Operational</li>
|
||||
<li>Database: Operational (mock fallback available)</li>
|
||||
<li>Realtime: Operational</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card/50 border-border/50">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Rocket className="h-5 w-5 text-purple-400" />
|
||||
<CardTitle className="text-lg">Quick Actions</CardTitle>
|
||||
</div>
|
||||
<CardDescription>Common admin operations</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-wrap gap-2">
|
||||
<Button size="sm" onClick={() => navigate("/dashboard")}>
|
||||
View Dashboard
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => navigate("/onboarding")}
|
||||
>
|
||||
Run Onboarding
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card/50 border-border/50">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<UserCog className="h-5 w-5 text-teal-400" />
|
||||
<CardTitle className="text-lg">Your Account</CardTitle>
|
||||
</div>
|
||||
<CardDescription>Signed in as {user.email}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
You have full administrative access.
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card/50 border-border/50">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-5 w-5 text-cyan-400" />
|
||||
<CardTitle className="text-lg">Demo Accounts</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Managed by{" "}
|
||||
<span className="text-foreground">mrpiglr@gmail.com</span>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{managedProfiles.length === 0 && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
No developer profiles found yet.
|
||||
</div>
|
||||
)}
|
||||
{managedProfiles.map((p) => (
|
||||
<div
|
||||
key={p.id}
|
||||
className="flex items-center justify-between p-2 rounded border border-border/40"
|
||||
>
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{p.full_name || p.username}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{p.email}
|
||||
</div>
|
||||
<Card className="bg-card/60 border-border/40 backdrop-blur">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="h-5 w-5 text-orange-300" />
|
||||
<CardTitle>System status</CardTitle>
|
||||
</div>
|
||||
<Badge variant="outline">Managed</Badge>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<CardDescription>Auth, database, and realtime services.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground space-y-1">
|
||||
<p>Auth: Operational</p>
|
||||
<p>Database: Operational (mock fallback available)</p>
|
||||
<p>Realtime: Operational</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card/60 border-border/40 backdrop-blur">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<UserCog className="h-5 w-5 text-teal-300" />
|
||||
<CardTitle>Your account</CardTitle>
|
||||
</div>
|
||||
<CardDescription>Owner privileges are active.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground space-y-2">
|
||||
<p>Signed in as {user.email}.</p>
|
||||
<p>You have full administrative access across AeThex services.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Reference in a new issue