From 101df25c529728160b5f60bb622546b61fa2fb22 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 14 Jun 2026 13:25:27 +0000
Subject: [PATCH 1/2] Bob AI: Add dashboard page

---
 src/App.tsx                 |  2 +
 src/components/Layout.tsx   |  4 +-
 src/pages/DashboardPage.tsx | 74 +++++++++++++++++++++++++++++++++++++
 src/routes.ts               |  1 +
 4 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/DashboardPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 33d15f9..21c0cfa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import DashboardPage from "@/pages/DashboardPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/dashboard" element={<DashboardPage />} />
       </Route>
     </Routes>
   );
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 815d53a..8671380 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -34,7 +34,9 @@ export default function Layout() {
   {
     "name": "Testimonials",
     "href": "#testimonials"
-  }
+  },
+  { name: "Dashboard", href: "/dashboard" },
+
 ];
 
   return (
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
new file mode 100644
index 0000000..b5d9475
--- /dev/null
+++ b/src/pages/DashboardPage.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import MetricsSimpleCards from "@/components/sections/metrics/MetricsSimpleCards";
+import FeaturesIconCards from "@/components/sections/features/FeaturesIconCards";
+import FooterMinimal from "@/components/sections/footer/FooterMinimal";
+
+export default function DashboardPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground flex flex-col">
+      <NavbarCentered
+        logo="DiscordDash"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Login with Discord", href: "/login" }}
+      />
+
+      <main className="flex-grow">
+        <HeroSplit
+          tag="Authentication"
+          title="Manage Your Discord Community"
+          description="Connect your Discord account to access your personalized dashboard. Powered by Supabase for secure, real-time user data storage and seamless integration."
+          primaryButton={{ text: "Login with Discord", href: "/auth/discord" }}
+          secondaryButton={{ text: "View Documentation", href: "/docs" }}
+          imageSrc="https://images.unsplash.com/photo-1614680376593-902f74cf0d41?auto=format&fit=crop&w=800&q=80"
+        />
+
+        <MetricsSimpleCards
+          tag="Overview"
+          title="Server Statistics"
+          description="Real-time insights from your connected Discord server, synced instantly via Supabase."
+          metrics={[
+            { value: "12.4k", description: "Total Registered Users" },
+            { value: "850", description: "Active Voice Sessions" },
+            { value: "99.9%", description: "Database Uptime" }
+          ]}
+        />
+
+        <FeaturesIconCards
+          tag="Database"
+          title="Powered by Supabase"
+          description="Secure, scalable, and real-time data storage for your community's custom needs."
+          features={[
+            {
+              icon: "🗄️",
+              title: "User Profiles",
+              description: "Store and manage custom user data, roles, and preferences securely in Postgres."
+            },
+            {
+              icon: "📊",
+              title: "Activity Logs",
+              description: "Track message counts, voice time, and server interactions with real-time inserts."
+            },
+            {
+              icon: "💰",
+              title: "Economy System",
+              description: "Built-in support for virtual currencies and inventory management using Supabase RPCs."
+            },
+            {
+              icon: "⚡",
+              title: "Real-time Sync",
+              description: "Instant updates across all connected clients using Supabase real-time subscriptions."
+            }
+          ]}
+        />
+      </main>
+
+      <FooterMinimal
+        brand="DiscordDash"
+        copyright="© 2024 DiscordDash. All rights reserved."
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
index 362ecb5..6f95978 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/dashboard', label: 'Dashboard', pageFile: 'DashboardPage' },
 ];
-- 
2.49.1


From 73cfe0d1f3e850d153d0b0150ff6754bff9bc0da Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 14 Jun 2026 13:27:07 +0000
Subject: [PATCH 2/2] Bob AI: Populate the newly-created page at
 src/pages/DashboardPage.t

---
 src/pages/DashboardPage.tsx | 164 ++++++++++++++++++++++--------------
 1 file changed, 102 insertions(+), 62 deletions(-)

diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index b5d9475..8c504c7 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -1,74 +1,114 @@
-import React from "react";
+import React, { useState } from "react";
 import { routes } from "@/routes";
-import NavbarCentered from "@/components/ui/NavbarCentered";
-import HeroSplit from "@/components/sections/hero/HeroSplit";
-import MetricsSimpleCards from "@/components/sections/metrics/MetricsSimpleCards";
-import FeaturesIconCards from "@/components/sections/features/FeaturesIconCards";
-import FooterMinimal from "@/components/sections/footer/FooterMinimal";
+import Button from "@/components/ui/Button";
+import Card from "@/components/ui/Card";
+import Tag from "@/components/ui/Tag";
+import { LogIn, Database, Users, Activity, CheckCircle2 } from "lucide-react";
 
 export default function DashboardPage() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
   return (
-    <div className="min-h-screen bg-background text-foreground flex flex-col">
-      <NavbarCentered
-        logo="DiscordDash"
-        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
-        ctaButton={{ text: "Login with Discord", href: "/login" }}
-      />
+    <div className="min-h-svh bg-background text-foreground flex flex-col">
+      <main className="flex-grow flex flex-col items-center justify-center px-6">
+        {!isLoggedIn ? (
+          <Card className="w-full max-w-content-width p-8 flex flex-col items-center text-center gap-6">
+            <div className="size-16 rounded-full bg-primary-cta/10 flex items-center justify-center mb-2">
+              <LogIn className="size-8 text-primary-cta" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold mb-2">Server Authentication</h1>
+              <p className="text-muted-foreground">
+                Connect your Discord account to access your personalized dashboard and Supabase database.
+              </p>
+            </div>
+            <Button 
+              text="Login with Discord" 
+              variant="primary" 
+              onClick={() => setIsLoggedIn(true)} 
+              className="w-full"
+            />
+          </Card>
+        ) : (
+          <div className="w-full max-w-content-width mx-auto flex flex-col">
+            <div className="flex flex-col gap-2">
+              <h1 className="text-4xl font-bold">Discord Server Dashboard</h1>
+              <p className="text-lg text-muted-foreground">
+                Manage your server data synced in real-time with Supabase.
+              </p>
+            </div>
 
-      <main className="flex-grow">
-        <HeroSplit
-          tag="Authentication"
-          title="Manage Your Discord Community"
-          description="Connect your Discord account to access your personalized dashboard. Powered by Supabase for secure, real-time user data storage and seamless integration."
-          primaryButton={{ text: "Login with Discord", href: "/auth/discord" }}
-          secondaryButton={{ text: "View Documentation", href: "/docs" }}
-          imageSrc="https://images.unsplash.com/photo-1614680376593-902f74cf0d41?auto=format&fit=crop&w=800&q=80"
-        />
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <Card className="p-6 flex flex-col gap-4">
+                <div className="flex items-center justify-between">
+                  <div className="size-10 rounded-full bg-primary-cta/10 flex items-center justify-center">
+                    <Database className="size-5 text-primary-cta" />
+                  </div>
+                  <Tag text="Connected" icon={CheckCircle2} />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold">Database Connection</h3>
+                  <p className="text-sm text-muted-foreground mt-1">Supabase Postgres DB is online and responding.</p>
+                </div>
+              </Card>
 
-        <MetricsSimpleCards
-          tag="Overview"
-          title="Server Statistics"
-          description="Real-time insights from your connected Discord server, synced instantly via Supabase."
-          metrics={[
-            { value: "12.4k", description: "Total Registered Users" },
-            { value: "850", description: "Active Voice Sessions" },
-            { value: "99.9%", description: "Database Uptime" }
-          ]}
-        />
+              <Card className="p-6 flex flex-col gap-4">
+                <div className="flex items-center justify-between">
+                  <div className="size-10 rounded-full bg-primary-cta/10 flex items-center justify-center">
+                    <Users className="size-5 text-primary-cta" />
+                  </div>
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold">User Data Storage</h3>
+                  <p className="text-3xl font-bold mt-2">1,204 <span className="text-sm font-normal text-muted-foreground">Members</span></p>
+                </div>
+              </Card>
 
-        <FeaturesIconCards
-          tag="Database"
-          title="Powered by Supabase"
-          description="Secure, scalable, and real-time data storage for your community's custom needs."
-          features={[
-            {
-              icon: "🗄️",
-              title: "User Profiles",
-              description: "Store and manage custom user data, roles, and preferences securely in Postgres."
-            },
-            {
-              icon: "📊",
-              title: "Activity Logs",
-              description: "Track message counts, voice time, and server interactions with real-time inserts."
-            },
-            {
-              icon: "💰",
-              title: "Economy System",
-              description: "Built-in support for virtual currencies and inventory management using Supabase RPCs."
-            },
-            {
-              icon: "⚡",
-              title: "Real-time Sync",
-              description: "Instant updates across all connected clients using Supabase real-time subscriptions."
-            }
-          ]}
-        />
+              <Card className="p-6 flex flex-col gap-4">
+                <div className="flex items-center justify-between">
+                  <div className="size-10 rounded-full bg-primary-cta/10 flex items-center justify-center">
+                    <Activity className="size-5 text-primary-cta" />
+                  </div>
+                  <Tag text="Active" icon={CheckCircle2} />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold">Realtime Sync</h3>
+                  <p className="text-sm text-muted-foreground mt-1">Listening to presence and message events.</p>
+                </div>
+              </Card>
+            </div>
+
+            <Card className="p-6 flex flex-col gap-6">
+              <h3 className="text-xl font-semibold">Recent Users</h3>
+              <div className="flex flex-col gap-4">
+                {[
+                  { name: "Alex", role: "Admin", status: "Online" },
+                  { name: "Sarah", role: "Moderator", status: "Online" },
+                  { name: "Mike", role: "Member", status: "Offline" },
+                  { name: "Emma", role: "Member", status: "Online" },
+                ].map((user, i) => (
+                  <div key={i} className="flex items-center justify-between p-4 rounded-lg border border-border/50 bg-background/50">
+                    <div className="flex items-center gap-4">
+                      <div className="size-10 rounded-full bg-primary-cta/20 flex items-center justify-center text-primary-cta font-bold">
+                        {user.name[0]}
+                      </div>
+                      <div>
+                        <p className="font-medium text-foreground">{user.name}</p>
+                        <p className="text-sm text-muted-foreground">{user.role}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className={`size-2 rounded-full ${user.status ==='Online' ? 'bg-green-500' : 'bg-gray-500'}`} />
+                      <span className="text-sm text-muted-foreground">{user.status}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Card>
+          </div>
+        )}
       </main>
 
-      <FooterMinimal
-        brand="DiscordDash"
-        copyright="© 2024 DiscordDash. All rights reserved."
-      />
     </div>
   );
 }
\ No newline at end of file
-- 
2.49.1