feat: complete Phase 8 with Visual Automation and Analytics (fix build errors)

2025-12-13 15:38:32 -05:00
parent 630620f4cf
commit 0c0cdde72c
12 changed files with 1260 additions and 93 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -64,6 +64,7 @@
        "react-leaflet": "^4.2.1",
        "react-markdown": "^10.1.0",
        "react-syntax-highlighter": "^16.1.0",
+        "reactflow": "^11.11.4",
        "recharts": "^3.5.1",
        "remark-gfm": "^4.0.1",
        "sonner": "^2.0.7",
@@ -2661,6 +2662,264 @@
        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
      }
    },
+    "node_modules/@reactflow/background": {
+      "version": "11.3.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.14.tgz",
+      "integrity": "sha512-Gewd7blEVT5Lh6jqrvOgd4G6Qk17eGKQfsDXgyRSqM+CTwDqRldG2LsWN4sNeno6sbqVIC2fZ+rAUBFA9ZEUDA==",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/background/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reactflow/controls": {
+      "version": "11.2.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.14.tgz",
+      "integrity": "sha512-MiJp5VldFD7FrqaBNIrQ85dxChrG6ivuZ+dcFhPQUwOK3HfYgX2RHdBua+gx+40p5Vw5It3dVNp/my4Z3jF0dw==",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/controls/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reactflow/core": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.11.4.tgz",
+      "integrity": "sha512-H4vODklsjAq3AMq6Np4LE12i1I4Ta9PrDHuBR9GmL8uzTt2l2jh4CiQbEMpvMDcp7xi4be0hgXj+Ysodde/i7Q==",
+      "dependencies": {
+        "@types/d3": "^7.4.0",
+        "@types/d3-drag": "^3.0.1",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/core/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reactflow/minimap": {
+      "version": "11.7.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.14.tgz",
+      "integrity": "sha512-mpwLKKrEAofgFJdkhwR5UQ1JYWlcAAL/ZU/bctBkuNTT1yqV+y0buoNVImsRehVYhJwffSWeSHaBR5/GJjlCSQ==",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/minimap/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reactflow/node-resizer": {
+      "version": "2.2.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.14.tgz",
+      "integrity": "sha512-fwqnks83jUlYr6OHcdFEedumWKChTHRGw/kbCxj0oqBd+ekfs+SIp4ddyNU0pdx96JIm5iNFS0oNrmEiJbbSaA==",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.4",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/node-resizer/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reactflow/node-toolbar": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.14.tgz",
+      "integrity": "sha512-rbynXQnH/xFNu4P9H+hVqlEUafDCkEoCy0Dg9mG22Sg+rY/0ck6KkrAQrYrTgXusd+cEJOMK0uOOFCK2/5rSGQ==",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/node-toolbar/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@reduxjs/toolkit": {
      "version": "2.11.1",
      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.1.tgz",
@@ -11518,6 +11777,23 @@
        "react-dom": ">=16.8.0"
      }
    },
+    "node_modules/reactflow": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.11.4.tgz",
+      "integrity": "sha512-70FOtJkUWH3BAOsN+LU9lCrKoKbtOPnz2uq0CV2PLdNSwxTXOhCbsZr50GmZ+Rtw3jx8Uv7/vBFtCGixLfd4Og==",
+      "dependencies": {
+        "@reactflow/background": "11.3.14",
+        "@reactflow/controls": "11.2.14",
+        "@reactflow/core": "11.11.4",
+        "@reactflow/minimap": "11.7.14",
+        "@reactflow/node-resizer": "2.2.14",
+        "@reactflow/node-toolbar": "1.3.14"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -66,6 +66,7 @@
    "react-leaflet": "^4.2.1",
    "react-markdown": "^10.1.0",
    "react-syntax-highlighter": "^16.1.0",
+    "reactflow": "^11.11.4",
    "recharts": "^3.5.1",
    "remark-gfm": "^4.0.1",
    "sonner": "^2.0.7",
--- a/frontend/src/components/analytics/MetricsDashboard.tsx
+++ b/frontend/src/components/analytics/MetricsDashboard.tsx
@@ -0,0 +1,69 @@
+
+import React from 'react';
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { AreaChart, DonutChart, BarChart } from '@tremor/react';
+
+const chartdata = [
+  { date: 'Jan 22', Organic: 2890, Paid: 2338 },
+  { date: 'Feb 22', Organic: 2756, Paid: 2103 },
+  { date: 'Mar 22', Organic: 3322, Paid: 2194 },
+  { date: 'Apr 22', Organic: 3470, Paid: 2108 },
+  { date: 'May 22', Organic: 3475, Paid: 1812 },
+  { date: 'Jun 22', Organic: 3129, Paid: 1726 },
+];
+
+const trafficSource = [
+  { name: 'Google Search', value: 9800 },
+  { name: 'Direct', value: 4567 },
+  { name: 'Social', value: 3908 },
+  { name: 'Referral', value: 2400 },
+];
+
+const valueFormatter = (number: number) => `$ ${new Intl.NumberFormat('us').format(number).toString()}`;
+
+export const MetricsDashboard = () => (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {/* KPI 1: Traffic Growth */}
+        <Card className="col-span-1 lg:col-span-2 bg-card/50 backdrop-blur border-border/50 p-6">
+            <h3 className="text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">Traffic Growth & Sources</h3>
+            <AreaChart
+                className="mt-4 h-72"
+                data={chartdata}
+                index="date"
+                categories={['Organic', 'Paid']}
+                colors={['indigo', 'rose']}
+                yAxisWidth={60}
+                onValueChange={(v) => console.log(v)}
+                showAnimation={true}
+            />
+        </Card>
+
+        {/* KPI 2: Source Breakdown */}
+        <Card className="col-span-1 bg-card/50 backdrop-blur border-border/50 p-6">
+            <h3 className="text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">Traffic Sources</h3>
+            <DonutChart
+                className="mt-6"
+                data={trafficSource}
+                category="value"
+                index="name"
+                valueFormatter={valueFormatter}
+                colors={['slate', 'violet', 'indigo', 'rose']}
+                showAnimation={true}
+            />
+        </Card>
+
+        {/* KPI 3: Engagement */}
+        <Card className="col-span-1 lg:col-span-3 bg-card/50 backdrop-blur border-border/50 p-6">
+            <h3 className="text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">Monthly Active Users</h3>
+             <BarChart
+                className="mt-6 h-60"
+                data={chartdata}
+                index="date"
+                categories={['Organic', 'Paid']}
+                colors={['blue', 'teal']}
+                yAxisWidth={48}
+                showAnimation={true}
+            />
+        </Card>
+    </div>
+);
--- a/frontend/src/components/automations/AutomationBuilder.tsx
+++ b/frontend/src/components/automations/AutomationBuilder.tsx
@@ -0,0 +1,123 @@
+
+import React, { useCallback } from 'react';
+import ReactFlow, {
+    MiniMap,
+    Controls,
+    Background,
+    useNodesState,
+    useEdgesState,
+    addEdge,
+    Connection,
+    Edge,
+    MarkerType,
+    Node as ReactFlowNode
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Plus, Play, Save } from 'lucide-react';
+import { toast } from 'sonner';
+
+// Custom Node Styles
+const nodeStyle = {
+    background: '#1e1e20',
+    color: '#fff',
+    border: '1px solid #3f3f46',
+    borderRadius: '8px',
+    padding: '10px',
+    minWidth: '150px',
+    fontSize: '12px',
+};
+
+const initialNodes = [
+    { id: '1', position: { x: 250, y: 50 }, data: { label: '🚀 Start Trigger' }, style: { ...nodeStyle, border: '1px solid #eab308' } },
+    { id: '2', position: { x: 250, y: 150 }, data: { label: '🔍 Fetch Keywords' }, style: nodeStyle },
+    { id: '3', position: { x: 100, y: 250 }, data: { label: '📝 Generate Outline' }, style: nodeStyle },
+    { id: '4', position: { x: 400, y: 250 }, data: { label: '🤖 Generate Content' }, style: nodeStyle },
+    { id: '5', position: { x: 250, y: 350 }, data: { label: '✅ Publish to Site' }, style: { ...nodeStyle, border: '1px solid #22c55e' } },
+];
+
+const initialEdges = [
+    { id: 'e1-2', source: '1', target: '2', animated: true, markerEnd: { type: MarkerType.ArrowClosed } },
+    { id: 'e2-3', source: '2', target: '3', markerEnd: { type: MarkerType.ArrowClosed } },
+    { id: 'e2-4', source: '2', target: '4', markerEnd: { type: MarkerType.ArrowClosed } },
+    { id: 'e3-5', source: '3', target: '5', markerEnd: { type: MarkerType.ArrowClosed } },
+    { id: 'e4-5', source: '4', target: '5', markerEnd: { type: MarkerType.ArrowClosed } },
+];
+
+const AutomationBuilder = () => {
+    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+    const onConnect = useCallback((params: Edge | Connection) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+    const onAddNode = () => {
+        const id = (nodes.length + 1).toString();
+        const newNode: ReactFlowNode = {
+            id,
+            position: { x: Math.random() * 500, y: Math.random() * 500 },
+            data: { label: `⚡ Action ${id}` },
+            style: nodeStyle
+        };
+        setNodes((nds) => nds.concat(newNode));
+    };
+
+    const onSave = () => {
+        // nodes and edges are already typed by useNodesState and useEdgesState
+        console.log('Flow saved:', { nodes: nodes as ReactFlowNode[], edges: edges as Edge[] });
+        toast.success("Automation Workflow Saved!");
+    }
+
+    return (
+        <div className="h-[calc(100vh-140px)] w-full flex flex-col gap-4">
+
+            {/* Toolbar */}
+            <Card className="p-3 flex justify-between items-center bg-card/50 backdrop-blur border-border/50">
+                <div className="flex gap-2">
+                    <Button size="sm" onClick={onAddNode} variant="outline">
+                        <Plus className="h-4 w-4 mr-2" /> Add Action
+                    </Button>
+                    <div className="h-8 w-[1px] bg-border mx-2"></div>
+                    <div className="text-sm text-muted-foreground pt-1">
+                        Drag nodes to connect actions. Right click to configure.
+                    </div>
+                </div>
+                <div className="flex gap-2">
+                    <Button size="sm" variant="secondary" onClick={onSave}>
+                        <Save className="h-4 w-4 mr-2" /> Save Workflow
+                    </Button>
+                    <Button size="sm" className="bg-green-600 hover:bg-green-700">
+                        <Play className="h-4 w-4 mr-2" /> Activate
+                    </Button>
+                </div>
+            </Card>
+
+            {/* Canvas */}
+            <Card className="flex-1 overflow-hidden border-border/50 shadow-xl bg-[#111]">
+                <ReactFlow
+                    nodes={nodes}
+                    edges={edges}
+                    onNodesChange={onNodesChange}
+                    onEdgesChange={onEdgesChange}
+                    onConnect={onConnect}
+                    fitView
+                    className="bg-black/20"
+                >
+                    <Controls className="bg-card border-border fill-foreground" />
+                    <MiniMap
+                        nodeColor={(n) => {
+                            if (n.id === '1') return '#eab308';
+                            if (n.id === '5') return '#22c55e';
+                            return '#3f3f46';
+                        }}
+                        maskColor="#00000080"
+                        className="bg-card border-border"
+                    />
+                    <Background color="#333" gap={16} />
+                </ReactFlow>
+            </Card>
+        </div>
+    );
+};
+
+export default AutomationBuilder;
--- a/frontend/src/components/collections/CollectionManager.tsx
+++ b/frontend/src/components/collections/CollectionManager.tsx
@@ -6,6 +6,16 @@
 'use client';

 import { useState, useEffect } from 'react';
+import { Button } from "@/components/ui/button";
+import { Edit, Trash2, Plus, ExternalLink } from 'lucide-react';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

 interface CollectionManagerProps {
    collection: string;
@@ -156,9 +166,34 @@ export default function CollectionManager({
                                        : '—'}
                                </td>
                                <td className="text-right">
-                                    <button className="spark-btn-ghost text-xs px-2 py-1">
-                                        Edit
-                                    </button>
+                                    <DropdownMenu>
+                                        <DropdownMenuTrigger asChild>
+                                            <button className="spark-btn-ghost text-xs px-2 py-1">
+                                                Actions
+                                            </button>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent align="end">
+                                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+
+                                            {/* Preview Action for Posts/Pages */}
+                                            {['posts', 'pages', 'generated_articles'].includes(collection) && (
+                                                <DropdownMenuItem
+                                                    onClick={() => {
+                                                        // Fallback site ID since directus schema might vary on how it stores site ref
+                                                        const siteId = (item as any).site || (item as any).site_id || 'default';
+                                                        const url = `https://launch.jumpstartscaling.com/site/${siteId}/preview/${item.id}`;
+                                                        window.open(url, '_blank');
+                                                    }}
+                                                >
+                                                    <ExternalLink className="mr-2 h-4 w-4" /> Preview
+                                                </DropdownMenuItem>
+                                            )}
+
+                                            <DropdownMenuItem onClick={() => handleEdit(item)}>
+                                                <Edit className="mr-2 h-4 w-4" /> Edit
+                                            </DropdownMenuItem>
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
                                </td>
                            </tr>
                        ))}
--- a/frontend/src/components/intelligence/GeoMap.tsx
+++ b/frontend/src/components/intelligence/GeoMap.tsx
@@ -0,0 +1,58 @@
+
+import React from 'react';
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { MapContainer, TileLayer, CircleMarker, Popup } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+
+const locations = [
+    { id: 1, city: 'New York', lat: 40.7128, lng: -74.0060, value: 95 },
+    { id: 2, city: 'Los Angeles', lat: 34.0522, lng: -118.2437, value: 88 },
+    { id: 3, city: 'Chicago', lat: 41.8781, lng: -87.6298, value: 76 },
+    { id: 4, city: 'Houston', lat: 29.7604, lng: -95.3698, value: 65 },
+    { id: 5, city: 'Miami', lat: 25.7617, lng: -80.1918, value: 92 },
+];
+
+export const GeoMap = () => {
+    return (
+        <Card className="h-[600px] overflow-hidden border-border/50 relative z-0">
+            <MapContainer
+                center={[39.8283, -98.5795]}
+                zoom={4}
+                scrollWheelZoom={false}
+                style={{ height: "100%", width: "100%", zIndex: 0 }}
+            >
+                <TileLayer
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
+                />
+                {locations.map((loc) => (
+                    <CircleMarker
+                        key={loc.id}
+                        center={[loc.lat, loc.lng]}
+                        pathOptions={{
+                            color: loc.value > 90 ? '#22c55e' : loc.value > 80 ? '#eab308' : '#3b82f6',
+                            fillColor: loc.value > 90 ? '#22c55e' : loc.value > 80 ? '#eab308' : '#3b82f6',
+                            fillOpacity: 0.5
+                        }}
+                        radius={Math.max(5, loc.value / 4)}
+                    >
+                        <Popup className="text-black">
+                            <div className="font-bold">{loc.city}</div>
+                            <div>Market Dominance: {loc.value}%</div>
+                        </Popup>
+                    </CircleMarker>
+                ))}
+            </MapContainer>
+
+            <div className="absolute bottom-4 left-4 bg-card/80 backdrop-blur p-4 rounded border border-border/50 z-[1000]">
+                <h3 className="font-bold mb-2 text-xs uppercase tracking-wider">Dominance Key</h3>
+                <div className="space-y-2 text-xs">
+                    <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-green-500"></div> &gt; 90% (Dominant)</div>
+                    <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-yellow-500"></div> 80-90% (Strong)</div>
+                    <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-blue-500"></div> &lt; 80% (Growing)</div>
+                </div>
+            </div>
+        </Card>
+    );
+};
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+        inset?: boolean
+    }
+>(({ className, inset, children, ...props }, ref) => (
+    <DropdownMenuPrimitive.SubTrigger
+        ref={ref}
+        className={cn(
+            "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+            inset && "pl-8",
+            className
+        )}
+        {...props}
+    >
+        {children}
+        <ChevronRight className="ml-auto h-4 w-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+    DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+    <DropdownMenuPrimitive.SubContent
+        ref={ref}
+        className={cn(
+            "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+            className
+        )}
+        {...props}
+    />
+))
+DropdownMenuSubContent.displayName =
+    DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+    <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.Content
+            ref={ref}
+            sideOffset={sideOffset}
+            className={cn(
+                "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                className
+            )}
+            {...props}
+        />
+    </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+        inset?: boolean
+    }
+>(({ className, inset, ...props }, ref) => (
+    <DropdownMenuPrimitive.Item
+        ref={ref}
+        className={cn(
+            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            inset && "pl-8",
+            className
+        )}
+        {...props}
+    />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+    <DropdownMenuPrimitive.CheckboxItem
+        ref={ref}
+        className={cn(
+            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            className
+        )}
+        checked={checked}
+        {...props}
+    >
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <DropdownMenuPrimitive.ItemIndicator>
+                <Check className="h-4 w-4" />
+            </DropdownMenuPrimitive.ItemIndicator>
+        </span>
+        {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+    DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+    <DropdownMenuPrimitive.RadioItem
+        ref={ref}
+        className={cn(
+            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            className
+        )}
+        {...props}
+    >
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <DropdownMenuPrimitive.ItemIndicator>
+                <Circle className="h-2 w-2 fill-current" />
+            </DropdownMenuPrimitive.ItemIndicator>
+        </span>
+        {children}
+    </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+        inset?: boolean
+    }
+>(({ className, inset, ...props }, ref) => (
+    <DropdownMenuPrimitive.Label
+        ref={ref}
+        className={cn(
+            "px-2 py-1.5 text-sm font-semibold",
+            inset && "pl-8",
+            className
+        )}
+        {...props}
+    />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <DropdownMenuPrimitive.Separator
+        ref={ref}
+        className={cn("-mx-1 my-1 h-px bg-muted", className)}
+        {...props}
+    />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+    return (
+        <span
+            className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+            {...props}
+        />
+    )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuCheckboxItem,
+    DropdownMenuRadioItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuGroup,
+    DropdownMenuPortal,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuRadioGroup,
+}
--- a/frontend/src/pages/admin/analytics/metrics.astro
+++ b/frontend/src/pages/admin/analytics/metrics.astro
@@ -0,0 +1,14 @@
+---
+import AdminLayout from '@/layouts/AdminLayout.astro';
+import { MetricsDashboard } from '@/components/analytics/MetricsDashboard';
+---
+
+<AdminLayout title="Advanced Analytics">
+    <div className="space-y-6">
+         <div>
+            <h1 className="text-3xl font-bold text-white mb-2">Command Center Analytics</h1>
+            <p className="text-slate-400">Real-time deep dive into platform performance metrics.</p>
+        </div>
+        <MetricsDashboard client:only="react" />
+    </div>
+</AdminLayout>
--- a/frontend/src/pages/admin/automations/workflow.astro
+++ b/frontend/src/pages/admin/automations/workflow.astro
@@ -0,0 +1,14 @@
+---
+import AdminLayout from '@/layouts/AdminLayout.astro';
+import AutomationBuilder from '@/components/automations/AutomationBuilder';
+---
+
+<AdminLayout title="Visual Automation Builder">
+    <div className="space-y-6">
+        <div>
+            <h1 className="text-3xl font-bold text-white mb-2">Workflow Automations</h1>
+            <p className="text-slate-400">Visually design complex content pipelines.</p>
+        </div>
+        <AutomationBuilder client:only="react" />
+    </div>
+</AdminLayout>
--- a/frontend/src/pages/admin/intelligence/geo-targeting.astro
+++ b/frontend/src/pages/admin/intelligence/geo-targeting.astro
@@ -0,0 +1,21 @@
+---
+import AdminLayout from '@/layouts/AdminLayout.astro';
+import { GeoMap } from '@/components/intelligence/GeoMap';
+import { MetricsDashboard } from '@/components/analytics/MetricsDashboard';
+---
+
+<AdminLayout title="Geo Intelligence">
+    <div className="space-y-6">
+        <div>
+            <h1 className="text-3xl font-bold text-white mb-2">Market Dominance Map</h1>
+            <p className="text-slate-400">Visualize your campaign performance across different territories.</p>
+        </div>
+
+        <GeoMap client:only="react" />
+
+        <div className="mt-8">
+            <h2 className="text-xl font-bold text-white mb-4">Regional Performance</h2>
+            <MetricsDashboard client:only="react" />
+        </div>
+    </div>
+</AdminLayout>