feat: Refactor Admin Pages to use SSR for data fetching (Fixes data loading issues)

frontend/src/components/admin/content/AvatarManager.tsx

@@ -4,52 +4,20 @@ import { getDirectusClient } from '@/lib/directus/client';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 
-export default function AvatarManager() {
-    const [avatars, setAvatars] = useState([]);
-    const [variants, setVariants] = useState([]);
-    const [loading, setLoading] = useState(true);
+interface Props {
+    initialAvatars?: any[];
+    initialVariants?: any[];
+}
+
+export default function AvatarManager({ initialAvatars = [], initialVariants = [] }: Props) {
+    const [avatars, setAvatars] = useState(initialAvatars);
+    const [variants, setVariants] = useState(initialVariants);
     const [selectedAvatar, setSelectedAvatar] = useState(null);
 
-    useEffect(() => {
-        loadData();
-    }, []);
-
-    const loadData = async () => {
-        try {
-            const directus = await getDirectusClient();
-
-            // Load avatars
-            const avatarData = await directus.request({
-                method: 'GET',
-                path: '/items/avatar_intelligence'
-            });
-            setAvatars(avatarData.data || []);
-
-            // Load variants
-            const variantData = await directus.request({
-                method: 'GET',
-                path: '/items/avatar_variants'
-            });
-            setVariants(variantData.data || []);
-
-            setLoading(false);
-        } catch (error) {
-            console.error('Error loading avatars:', error);
-            setLoading(false);
-        }
-    };
-
     const getVariantsForAvatar = (avatarKey) => {
         return variants.filter(v => v.avatar_key === avatarKey);
     };
 
-    if (loading) {
-        return (
-            <div className="flex items-center justify-center h-64">
-                <div className="text-white">Loading avatars...</div>
-            </div>
-        );
-    }
 
     return (
         <div className="space-y-6">

frontend/src/components/admin/content/CartesianManager.tsx

@@ -4,32 +4,12 @@ import { getDirectusClient } from '@/lib/directus/client';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 
-export default function CartesianManager() {
-    const [patterns, setPatterns] = useState([]);
-    const [loading, setLoading] = useState(true);
+interface Props {
+    initialPatterns?: any[];
+}
 
-    useEffect(() => {
-        loadData();
-    }, []);
-
-    const loadData = async () => {
-        try {
-            const directus = await getDirectusClient();
-            const response = await directus.request({
-                method: 'GET',
-                path: '/items/cartesian_patterns'
-            });
-            setPatterns(response.data || []);
-            setLoading(false);
-        } catch (error) {
-            console.error('Error loading cartesian patterns:', error);
-            setLoading(false);
-        }
-    };
-
-    if (loading) {
-        return <div className="text-white">Loading Cartesian Patterns...</div>;
-    }
+export default function CartesianManager({ initialPatterns = [] }: Props) {
+    const [patterns, setPatterns] = useState(initialPatterns);
 
     return (
         <div className="space-y-6">

frontend/src/components/admin/content/GeoManager.tsx

@@ -4,32 +4,12 @@ import { getDirectusClient } from '@/lib/directus/client';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 
-export default function GeoManager() {
-    const [clusters, setClusters] = useState([]);
-    const [loading, setLoading] = useState(true);
+interface Props {
+    initialClusters?: any[];
+}
 
-    useEffect(() => {
-        loadData();
-    }, []);
-
-    const loadData = async () => {
-        try {
-            const directus = await getDirectusClient();
-            const response = await directus.request({
-                method: 'GET',
-                path: '/items/geo_intelligence'
-            });
-            setClusters(response.data || []);
-            setLoading(false);
-        } catch (error) {
-            console.error('Error loading geo clusters:', error);
-            setLoading(false);
-        }
-    };
-
-    if (loading) {
-        return <div className="text-white">Loading Geo Intelligence...</div>;
-    }
+export default function GeoManager({ initialClusters = [] }: Props) {
+    const [clusters, setClusters] = useState(initialClusters);
 
     return (
         <div className="space-y-6">

frontend/src/components/admin/content/SpintaxManager.tsx

@@ -4,32 +4,12 @@ import { getDirectusClient } from '@/lib/directus/client';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 
-export default function SpintaxManager() {
-    const [dictionaries, setDictionaries] = useState([]);
-    const [loading, setLoading] = useState(true);
+interface Props {
+    initialDictionaries?: any[];
+}
 
-    useEffect(() => {
-        loadData();
-    }, []);
-
-    const loadData = async () => {
-        try {
-            const directus = await getDirectusClient();
-            const response = await directus.request({
-                method: 'GET',
-                path: '/items/spintax_dictionaries'
-            });
-            setDictionaries(response.data || []);
-            setLoading(false);
-        } catch (error) {
-            console.error('Error loading spintax dictionaries:', error);
-            setLoading(false);
-        }
-    };
-
-    if (loading) {
-        return <div className="text-white">Loading Spintax Dictionaries...</div>;
-    }
+export default function SpintaxManager({ initialDictionaries = [] }: Props) {
+    const [dictionaries, setDictionaries] = useState(initialDictionaries);
 
     return (
         <div className="space-y-6">

frontend/src/pages/admin/content/avatars.astro

@@ -2,6 +2,11 @@
 ---
 import Layout from '@/layouts/AdminLayout.astro';
 import AvatarManager from '@/components/admin/content/AvatarManager';
+import { getDirectusClient, readItems } from '@/lib/directus/client';
+
+const directus = getDirectusClient();
+const avatars = await directus.request(readItems('avatar_intelligence')).catch(() => []);
+const variants = await directus.request(readItems('avatar_variants')).catch(() => []);
 ---
 <Layout title="Avatars Intelligence">
   <div class="p-8">
@@ -9,6 +14,6 @@ import AvatarManager from '@/components/admin/content/AvatarManager';
       <h1 class="text-3xl font-bold text-white mb-2">Avatar Intelligence</h1>
       <p class="text-gray-400">Manage your 10 base avatars, variants, and business niches.</p>
     </div>
-    <AvatarManager client:load />
+    <AvatarManager client:load initialAvatars={avatars} initialVariants={variants} />
   </div>
 </Layout>

frontend/src/pages/admin/content/cartesian_patterns.astro

@@ -1,14 +1,17 @@
-
 ---
 import Layout from '@/layouts/AdminLayout.astro';
 import CartesianManager from '@/components/admin/content/CartesianManager';
+import { getDirectusClient, readItems } from '@/lib/directus/client';
+
+const directus = getDirectusClient();
+const patterns = await directus.request(readItems('cartesian_patterns')).catch(() => []);
 ---
 <Layout title="Cartesian Patterns">
   <div class="p-8">
     <div class="mb-6">
       <h1 class="text-3xl font-bold text-white mb-2">Cartesian Patterns</h1>
-      <p class="text-gray-400">Headline and Hook Formulas for the Multiplication Engine.</p>
+      <p class="text-gray-400">Manage headline and content generation formulas.</p>
     </div>
-    <CartesianManager client:load />
+    <CartesianManager client:load initialPatterns={patterns} />
   </div>
 </Layout>

frontend/src/pages/admin/content/geo_clusters.astro

@@ -1,14 +1,17 @@
-
 ---
 import Layout from '@/layouts/AdminLayout.astro';
 import GeoManager from '@/components/admin/content/GeoManager';
+import { getDirectusClient, readItems } from '@/lib/directus/client';
+
+const directus = getDirectusClient();
+const clusters = await directus.request(readItems('geo_intelligence')).catch(() => []);
 ---
-<Layout title="Geo Intelligence">
+<Layout title="Geo Clusters">
   <div class="p-8">
     <div class="mb-6">
-      <h1 class="text-3xl font-bold text-white mb-2">Geo Clusters</h1>
-      <p class="text-gray-400">Manage Geographic Intelligence (Silicon Valleys, Growth Havens) for localized content.</p>
+      <h1 class="text-3xl font-bold text-white mb-2">Geo Intelligence</h1>
+      <p class="text-gray-400">Manage your geographic targeting clusters.</p>
     </div>
-    <GeoManager client:load />
+    <GeoManager client:load initialClusters={clusters} />
   </div>
 </Layout>

frontend/src/pages/admin/content/spintax_dictionaries.astro

@@ -1,14 +1,17 @@
-
 ---
 import Layout from '@/layouts/AdminLayout.astro';
 import SpintaxManager from '@/components/admin/content/SpintaxManager';
+import { getDirectusClient, readItems } from '@/lib/directus/client';
+
+const directus = getDirectusClient();
+const dictionaries = await directus.request(readItems('spintax_dictionaries')).catch(() => []);
 ---
-<Layout title="Spintax Dictionary">
+<Layout title="Spintax Dictionaries">
   <div class="p-8">
     <div class="mb-6">
       <h1 class="text-3xl font-bold text-white mb-2">Spintax Dictionaries</h1>
-      <p class="text-gray-400">Global Search & Replace Dictionaries for content randomization.</p>
+      <p class="text-gray-400">Manage word variations for automated content generation.</p>
     </div>
-    <SpintaxManager client:load />
+    <SpintaxManager client:load initialDictionaries={dictionaries} />
   </div>
 </Layout>