Merge pull request #4 from AeThex-Corporation/feat/database-migration-and-dev-platform

feat: Improve developer platform navigation and discoverability

client/App.tsx

@@ -831,7 +831,14 @@ const App = () => (
 
                         {/* Developer Platform Routes */}
                         <Route path="/dev-platform" element={<DeveloperPlatform />} />
-                        <Route path="/dev-platform/dashboard" element={<DeveloperDashboard />} />
+                        <Route 
+                          path="/dev-platform/dashboard" 
+                          element={
+                            <RequireAccess>
+                              <DeveloperDashboard />
+                            </RequireAccess>
+                          } 
+                        />
                         <Route path="/dev-platform/api-reference" element={<ApiReference />} />
                         <Route path="/dev-platform/quick-start" element={<QuickStart />} />
                         <Route path="/dev-platform/templates" element={<Templates />} />

client/components/Layout.tsx

@@ -88,6 +88,8 @@ export default function CodeLayout({ children, hideFooter }: LayoutProps) {
     { name: "Templates", href: "/dev-platform/templates" },
     { name: "Marketplace", href: "/dev-platform/marketplace" },
     { name: "Examples", href: "/dev-platform/examples" },
+    { name: "divider", href: "#" },
+    { name: "Main Dashboard", href: "/dashboard" },
     { name: "Exit Dev Mode", href: "/" },
   ];
 

client/pages/Dashboard.tsx

@@ -411,6 +411,41 @@ export default function Dashboard() {
 
             {/* Realms Tab */}
             <TabsContent value="realms" className="space-y-6 animate-fade-in">
+              {/* Developer CTA Card */}
+              {user && (
+                <Card className="p-6 bg-gradient-to-br from-primary/10 to-primary/5 border-primary/20 hover:border-primary/40 transition-all">
+                  <div className="flex flex-col md:flex-row items-start gap-4">
+                    <div className="p-3 bg-primary/20 rounded-lg shrink-0">
+                      <Code className="w-6 h-6 text-primary" />
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-lg font-semibold mb-2">Building with AeThex?</h3>
+                      <p className="text-sm text-muted-foreground mb-4">
+                        Get API keys, access comprehensive documentation, and explore developer tools to integrate AeThex into your applications.
+                      </p>
+                      <div className="flex flex-wrap gap-3">
+                        <Link to="/dev-platform/dashboard">
+                          <Button size="sm">
+                            <Rocket className="w-4 h-4 mr-2" />
+                            Get API Keys
+                          </Button>
+                        </Link>
+                        <Link to="/dev-platform/api-reference">
+                          <Button size="sm" variant="outline">
+                            View API Docs
+                          </Button>
+                        </Link>
+                        <Link to="/dev-platform/templates">
+                          <Button size="sm" variant="outline">
+                            Browse Templates
+                          </Button>
+                        </Link>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              )}
+              
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 {ARMS.map((arm) => {
                   const IconComponent = arm.icon;

client/pages/dev-platform/ApiReference.tsx

@@ -1,5 +1,6 @@
 import Layout from "@/components/Layout";
 import SEO from "@/components/SEO";
+import { Breadcrumbs } from "@/components/dev-platform/Breadcrumbs";
 import { ThreeColumnLayout } from "@/components/dev-platform/layouts/ThreeColumnLayout";
 import { ApiEndpointCard } from "@/components/dev-platform/ui/ApiEndpointCard";
 import { CodeTabs } from "@/components/dev-platform/CodeTabs";
@@ -68,6 +69,7 @@ export default function ApiReference() {
   return (
     <Layout>
       <SEO pageTitle="API Reference" description="Complete documentation for the AeThex Developer API" />
+      <Breadcrumbs className="mb-6" />
       <ThreeColumnLayout
         sidebar={sidebarContent}
         aside={asideContent}

client/pages/dev-platform/CodeExamples.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Layout from "@/components/Layout";
 import SEO from "@/components/SEO";
+import { Breadcrumbs } from "@/components/dev-platform/Breadcrumbs";
 import { ExampleCard } from "@/components/dev-platform/ExampleCard";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";

client/pages/dev-platform/DeveloperDashboard.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import Layout from "@/components/Layout";
 import SEO from "@/components/SEO";
+import { Breadcrumbs } from "@/components/dev-platform/Breadcrumbs";
 import { StatCard } from "@/components/dev-platform/ui/StatCard";
 import { ApiKeyCard } from "@/components/dev-platform/ApiKeyCard";
 import { CreateApiKeyDialog } from "@/components/dev-platform/CreateApiKeyDialog";
@@ -215,6 +216,7 @@ export default function DeveloperDashboard() {
   return (
     <Layout>
       <SEO pageTitle="Developer Dashboard" description="Manage your API keys and monitor usage" />
+      <Breadcrumbs className="mb-6" />
       <div className="space-y-8">
         {/* Warning for expiring keys */}
         {expiringSoon.length > 0 && (

client/pages/dev-platform/Marketplace.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Layout from "@/components/Layout";
 import SEO from "@/components/SEO";
+import { Breadcrumbs } from "@/components/dev-platform/Breadcrumbs";
 import { MarketplaceCard } from "@/components/dev-platform/MarketplaceCard";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";

client/pages/dev-platform/QuickStart.tsx

@@ -1,5 +1,6 @@
 import Layout from "@/components/Layout";
 import SEO from "@/components/SEO";
+import { Breadcrumbs } from "@/components/dev-platform/Breadcrumbs";
 import { ThreeColumnLayout } from "@/components/dev-platform/layouts/ThreeColumnLayout";
 import { CodeTabs } from "@/components/dev-platform/CodeTabs";
 import { Callout } from "@/components/dev-platform/ui/Callout";
@@ -85,6 +86,7 @@ export default function QuickStart() {
   return (
     <Layout>
       <SEO pageTitle="Quick Start Guide" description="Get up and running with the AeThex API in minutes" />
+      <Breadcrumbs className="mb-6" />
       <ThreeColumnLayout sidebar={sidebarContent} aside={asideContent}>
         <div className="space-y-12">
           {/* Introduction */}

client/pages/dev-platform/Templates.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Layout from "@/components/Layout";
 import SEO from "@/components/SEO";
+import { Breadcrumbs } from "@/components/dev-platform/Breadcrumbs";
 import { TemplateCard } from "@/components/dev-platform/TemplateCard";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";