databricks-solutions · ameliachu · May 22, 2026 · May 22, 2026
diff --git a/adtech_series_sp26/impression_logs_realtime/campaign_pacing_app/app.yaml b/adtech_series_sp26/impression_logs_realtime/campaign_pacing_app/app.yaml
@@ -13,3 +13,5 @@ env:
     value: databricks_postgres
   - name: LAKEBASE_INSTANCE
     value: campaign-pacing
+  - name: DATABRICKS_WAREHOUSE_ID
+    valueFrom: campaign-pacing-warehouse
diff --git a/adtech_series_sp26/impression_logs_realtime/campaign_pacing_app/frontend/.gitignore b/adtech_series_sp26/impression_logs_realtime/campaign_pacing_app/frontend/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+*.local
+.vite/
diff --git a/adtech_series_sp26/impression_logs_realtime/campaign_pacing_app/frontend/index.html b/adtech_series_sp26/impression_logs_realtime/campaign_pacing_app/frontend/index.html
@@ -3,7 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Campaign Pacing</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <title>Databricks: Campaign Pacing</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/adtech_series_sp26/impression_logs_realtime/campaign_pacing_app/frontend/package-lock.json b/adtech_series_sp26/impression_logs_realtime/campaign_pacing_app/frontend/package-lock.json
diff --git a/...gs_realtime/campaign_pacing_app/frontend/public/MegaCorp_Logo_-_Transparent.png b/...gs_realtime/campaign_pacing_app/frontend/public/MegaCorp_Logo_-_Transparent.png
diff --git a/...pression_logs_realtime/campaign_pacing_app/frontend/public/apple-touch-icon.png b/...pression_logs_realtime/campaign_pacing_app/frontend/public/apple-touch-icon.png
diff --git a/.../impression_logs_realtime/campaign_pacing_app/frontend/public/favicon-32x32.png b/.../impression_logs_realtime/campaign_pacing_app/frontend/public/favicon-32x32.png
diff --git a/...ession_logs_realtime/campaign_pacing_app/frontend/public/icons/apache-spark.svg b/...ession_logs_realtime/campaign_pacing_app/frontend/public/icons/apache-spark.svg
diff --git a/...p26/impression_logs_realtime/campaign_pacing_app/frontend/public/icons/apps.svg b/...p26/impression_logs_realtime/campaign_pacing_app/frontend/public/icons/apps.svg
diff --git a/...sion_logs_realtime/campaign_pacing_app/frontend/public/icons/data-streaming.svg b/...sion_logs_realtime/campaign_pacing_app/frontend/public/icons/data-streaming.svg
diff --git a/...n_logs_realtime/campaign_pacing_app/frontend/public/icons/databricks-symbol.svg b/...n_logs_realtime/campaign_pacing_app/frontend/public/icons/databricks-symbol.svg
diff --git a/...pression_logs_realtime/campaign_pacing_app/frontend/public/icons/delta-lake.svg b/...pression_logs_realtime/campaign_pacing_app/frontend/public/icons/delta-lake.svg
diff --git a/...26/impression_logs_realtime/campaign_pacing_app/frontend/public/icons/kafka.svg b/...26/impression_logs_realtime/campaign_pacing_app/frontend/public/icons/kafka.svg
diff --git a/...impression_logs_realtime/campaign_pacing_app/frontend/public/icons/lakebase.svg b/...impression_logs_realtime/campaign_pacing_app/frontend/public/icons/lakebase.svg
diff --git a/...ssion_logs_realtime/campaign_pacing_app/frontend/public/icons/unity-catalog.svg b/...ssion_logs_realtime/campaign_pacing_app/frontend/public/icons/unity-catalog.svg
diff --git a/adtech_series_sp26/impression_logs_realtime/campaign_pacing_app/frontend/src/App.tsx b/adtech_series_sp26/impression_logs_realtime/campaign_pacing_app/frontend/src/App.tsx
@@ -1,28 +1,5 @@
-import CampaignDashboard from "./components/CampaignDashboard";
+import { AppLayout } from "./components/AppLayout";
 
 export default function App() {
-  return (
-    <div className="min-h-screen bg-gray-950 text-gray-100">
-      <header className="border-b border-gray-800 px-6 py-4">
-        <div className="mx-auto max-w-5xl flex items-center justify-between">
-          <div>
-            <h1 className="text-xl font-semibold tracking-tight">
-              Campaign Pacing
-            </h1>
-            <p className="text-xs text-gray-500 mt-0.5">
-              Real-time impression tracking · powered by Spark RTM + Lakebase
-            </p>
-          </div>
-          <span className="flex items-center gap-1.5 text-xs text-emerald-400">
-            <span className="inline-block h-2 w-2 rounded-full bg-emerald-400 animate-pulse" />
-            Live
-          </span>
-        </div>
-      </header>
-
-      <main className="mx-auto max-w-5xl px-6 py-8">
-        <CampaignDashboard />
-      </main>
-    </div>
-  );
+  return <AppLayout />;
 }
diff --git a/...s_sp26/impression_logs_realtime/campaign_pacing_app/frontend/src/components/AppLayout.tsx b/...s_sp26/impression_logs_realtime/campaign_pacing_app/frontend/src/components/AppLayout.tsx
@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { LeftNav, type NavPage } from "./LeftNav";
+import CampaignDashboard from "./CampaignDashboard";
+import { SettingsPage } from "./SettingsPage";
+import { ArchitecturePage } from "./ArchitecturePage";
+import { PageHeader } from "./PageHeader";
+import { useTheme } from "../lib/theme";
+
+export const AppLayout: React.FC = () => {
+  const [navExpanded, setNavExpanded] = useState(false);
+  const [page, setPage] = useState<NavPage>("monitoring");
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-gray-50 dark:bg-gray-950">
+      <LeftNav
+        currentPage={page}
+        onNavigate={setPage}
+        expanded={navExpanded}
+        onExpandedChange={setNavExpanded}
+      />
+      <main className="flex-1 flex flex-col min-w-0 overflow-hidden">
+        <div className="flex-1 min-h-0 overflow-hidden flex flex-col">
+          {page === "monitoring" && (
+            <>
+              <PageHeader
+                title="Campaign Pacing"
+                description="Real-time impression tracking — Spark RTM + Lakebase"
+              >
+                <span className="flex items-center gap-1.5 text-xs font-medium text-databricks-lava-600">
+                  <span className="inline-block h-2 w-2 rounded-full bg-databricks-lava-600 animate-pulse" />
+                  Live
+                </span>
+              </PageHeader>
+              <div className="flex-1 overflow-auto">
+                <div className="mx-auto max-w-5xl px-6 py-6">
+                  <CampaignDashboard
+                    onNavigateToArchitecture={() => setPage("architecture")}
+                  />
+                </div>
+              </div>
+            </>
+          )}
+          {page === "architecture" && <ArchitecturePage />}
+          {page === "settings" && (
+            <SettingsPage theme={theme} onToggleTheme={toggleTheme} />
+          )}
+        </div>
+        <footer className="h-14 text-center text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 flex items-center justify-center gap-1.5 shrink-0">
+          Powered by Databricks
+          <img
+            src="https://cdn.bfldr.com/9AYANS2F/at/k5sfk4xt8n4xpxpgxxr9rkjh/databricks-symbol-navy-900.svg?auto=webp"
+            alt="Databricks"
+            className="h-4 w-auto inline-block"
+          />
+        </footer>
+      </main>
+    </div>
+  );
+};
+
+export default AppLayout;