From 53f2a43181910287dadd0079bb1f1e738f1c6dff Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 27 Sep 2025 21:05:42 +0000
Subject: [PATCH] Add Admin page with access control for owner email

cgen-023d7e5b8be94c318cf20d26d11af67c
---
 client/pages/Admin.tsx | 165 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 165 insertions(+)
 create mode 100644 client/pages/Admin.tsx

diff --git a/client/pages/Admin.tsx b/client/pages/Admin.tsx
new file mode 100644
index 00000000..482e8984
--- /dev/null
+++ b/client/pages/Admin.tsx
@@ -0,0 +1,165 @@
+import Layout from "@/components/Layout";
+import LoadingScreen from "@/components/LoadingScreen";
+import { useAuth } from "@/contexts/AuthContext";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Shield, UserCog, Rocket, Settings, Users, Activity } from "lucide-react";
+
+export default function Admin() {
+  const { user, loading } = useAuth();
+  const navigate = useNavigate();
+  const isOwner = !!user?.email && user.email.toLowerCase() === "mrpiglr@gmail.com";
+
+  useEffect(() => {
+    if (!loading) {
+      if (!user) {
+        navigate("/login", { replace: true });
+      }
+    }
+  }, [user, loading, navigate]);
+
+  if (loading || !user) {
+    return (
+      <LoadingScreen message="Verifying admin access..." showProgress duration={1000} />
+    );
+  }
+
+  if (!isOwner) {
+    return (
+      <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">
+              <CardHeader>
+                <CardTitle className="text-red-400">Access Denied</CardTitle>
+                <CardDescription>You dont have permission to access the admin panel.</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button onClick={() => navigate("/dashboard")}>Go to Dashboard</Button>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <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>
+              <p className="text-muted-foreground">Site Owner • Admin • Founder</p>
+              <div className="flex gap-2 mt-2">
+                <Badge variant="outline" className="border-green-500/50 text-green-400">Site Owner</Badge>
+                <Badge variant="outline" className="border-blue-500/50 text-blue-400">Admin</Badge>
+                <Badge variant="outline" className="border-purple-500/50 text-purple-400">Founder</Badge>
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => navigate("/dashboard")}>Dashboard</Button>
+              <Button variant="outline" onClick={() => navigate("/profile")}>Profile</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>
+
+            <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>
+
+            <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">Site Settings</CardTitle>
+                </div>
+                <CardDescription>Branding, legal, integrations</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button variant="outline" onClick={() => navigate("/get-started")}>Open Settings</Button>
+              </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>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}