Spaces:

ashrafkassem
/

LeadPilot

Running

App Files Files

Ashraf Al-Kassem commited on Mar 2

Commit

7d627c0

1 Parent(s): 49d2391

fix(website): Inject HTML shell and globals.css into root layout

Browse files

Files changed (5) hide show

Website/next-env.d.ts +1 -1
Website/package-lock.json +19 -0
Website/package.json +2 -0
Website/src/app/layout.tsx +29 -6
Website/src/lib/api.ts +227 -66

Website/next-env.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

Website/package-lock.json CHANGED Viewed

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "clsx": "^2.1.1",
         "lucide-react": "^0.574.0",
         "next": "16.1.6",
         "react": "19.2.3",
@@ -17,6 +18,7 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -1588,6 +1590,13 @@
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3349,6 +3358,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -4543,6 +4553,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

       "version": "0.1.0",
       "dependencies": {
         "clsx": "^2.1.1",
+        "js-cookie": "^3.0.5",
         "lucide-react": "^0.574.0",
         "next": "16.1.6",
         "react": "19.2.3",
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/js-cookie": "^3.0.6",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

Website/package.json CHANGED Viewed

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
     "lucide-react": "^0.574.0",
     "next": "16.1.6",
     "react": "19.2.3",
@@ -19,6 +20,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

   },
   "dependencies": {
     "clsx": "^2.1.1",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.574.0",
     "next": "16.1.6",
     "react": "19.2.3",
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

Website/src/app/layout.tsx CHANGED Viewed

@@ -1,12 +1,35 @@
 import MarketingHeader from "@/components/Header";
 import MarketingFooter from "@/components/Footer";
-export default function MarketingLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex flex-col min-h-screen">
-      <MarketingHeader />
-      <main className="flex-1">{children}</main>
-      <MarketingFooter />
-    </div>
   );
 }

+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
 import MarketingHeader from "@/components/Header";
 import MarketingFooter from "@/components/Footer";
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+export const metadata: Metadata = {
+  title: {
+    default: "LeadPilot — AI-Native Lead Capture, Qualification & Routing",
+    template: "%s | LeadPilot",
+  },
+  description:
+    "LeadPilot is the AI-native platform that captures, qualifies, and routes leads to the right rep automatically. Close more deals without growing headcount.",
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    siteName: "LeadPilot",
+  },
+};
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
+    <html lang="en">
+      <body className={`${inter.variable} font-inter antialiased`}>
+        <div className="flex flex-col min-h-screen">
+          <MarketingHeader />
+          <main className="flex-1">{children}</main>
+          <MarketingFooter />
+        </div>
+      </body>
+    </html>
   );
 }

Website/src/lib/api.ts CHANGED Viewed

@@ -1,105 +1,266 @@
 /**
- * Catalog API client — fetches public data from the LeadPilot backend.
- * Used by Server Components with ISR (revalidate every 60s).
  */
-const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
-/** Base URL for the product app (login, signup, dashboard). */
-export const APP_URL = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000";
-// ── Types ────────────────────────────────────────────────────────────
-export interface CatalogPlan {
-  id: string;
-  name: string;
-  display_name: string;
-  description: string | null;
-  sort_order: number;
-  entitlements: CatalogEntitlement[];
-}
-export interface CatalogEntitlement {
-  module_key: string;
-  hard_limit: number | null; // null = unlimited
 }
-export interface CatalogModule {
-  key: string;
-  label: string;
-  is_enabled: boolean;
 }
-export interface CatalogProvider {
-  key: string;
-  label: string;
-  description: string;
-  icon_hint: string;
-  fields: { name: string; label: string; type: string }[];
-}
-export interface CatalogTemplate {
-  id: string;
-  slug: string;
-  name: string;
-  description: string;
-  category: string;
-  industry_tags: string[];
-  platforms: string[];
-  required_integrations: string[];
-  is_featured: boolean;
-  clone_count: number;
 }
-export interface CatalogEnum {
-  key: string;
-  label: string;
 }
-// ── Generic fetcher ──────────────────────────────────────────────────
-interface Envelope<T> {
-  success: boolean;
-  data: T;
-  error: string | null;
 }
-async function fetchCatalog<T>(path: string): Promise<T> {
-  try {
-    const res = await fetch(`${API_BASE}/api/v1/catalog${path}`, {
-      next: { revalidate: 60 },
-    });
-    if (!res.ok) return [] as unknown as T;
-    const json: Envelope<T> = await res.json();
-    return json.success ? json.data : ([] as unknown as T);
-  } catch {
-    return [] as unknown as T;
-  }
 }
-// ── Typed fetchers ───────────────────────────────────────────────────
 export async function getPlans(): Promise<CatalogPlan[]> {
-  return fetchCatalog<CatalogPlan[]>("/plans");
 }
 export async function getModules(): Promise<CatalogModule[]> {
-  return fetchCatalog<CatalogModule[]>("/modules");
 }
 export async function getIntegrationProviders(): Promise<CatalogProvider[]> {
-  return fetchCatalog<CatalogProvider[]>("/integration-providers");
 }
 export async function getPublicTemplates(category?: string): Promise<CatalogTemplate[]> {
-  const params = category ? `?category=${encodeURIComponent(category)}` : "";
-  return fetchCatalog<CatalogTemplate[]>(`/templates${params}`);
 }
 export async function getTemplateCategories(): Promise<CatalogEnum[]> {
-  return fetchCatalog<CatalogEnum[]>("/template-categories");
 }
 export async function getTemplatePlatforms(): Promise<CatalogEnum[]> {
-  return fetchCatalog<CatalogEnum[]>("/template-platforms");
 }

 /**
+ * LeadPilot Robust API Client
+ * - Handles JSON vs Text response detection
+ * - Automatic Authorization header injection
+ * - Workspace context management
+ * - Consistent error handling
  */
+import { auth } from "./auth";
+const getBaseUrl = () => {
+    if (process.env.NEXT_PUBLIC_API_BASE_URL) return process.env.NEXT_PUBLIC_API_BASE_URL;
+    if (process.env.NEXT_PUBLIC_API_URL) return process.env.NEXT_PUBLIC_API_URL;
+    if (typeof window !== "undefined") {
+        // Browser context: localhost dev hits backend directly; production uses
+        // relative paths so nginx can proxy /api/* to the backend.
+        if (window.location.hostname === "localhost") {
+            return "http://localhost:8000";
+        }
+        return ""; // relative URLs — works in any production deployment (HF, Docker, etc.)
+    }
+    // Server-side (SSR inside Docker): backend is accessible at 127.0.0.1:8000 internally.
+    return "http://127.0.0.1:8000";
+};
+const API_BASE_URL = getBaseUrl();
+if (!API_BASE_URL && typeof window !== "undefined" && window.location.hostname === "localhost") {
+    console.warn("WARNING: NEXT_PUBLIC_API_BASE_URL not defined. Falling back to http://localhost:8000");
 }
+export interface ApiResponse<T = any> {
+    success: boolean;
+    data?: T;
+    error?: string;
 }
+class ApiClient {
+    private getToken(): string | null {
+        return auth.getToken();
+    }
+    private getWorkspaceId(): string | null {
+        return auth.getWorkspaceId();
+    }
+    async request<T = any>(
+        path: string,
+        options: RequestInit = {}
+    ): Promise<ApiResponse<T>> {
+        // If API_BASE_URL is empty, it defaults to relative paths (e.g., /api/v1/...)
+        // Safe base URL with /api/v1 prefix - ALWAYS absolute
+        const base = API_BASE_URL.replace(/\/$/, "");
+        const cleanPath = path.startsWith("/") ? path : `/${path}`;
+        const url = `${base}/api/v1${cleanPath}`;
+        const method = options.method || "GET";
+        console.log(`[API] ${method} ${url}`);
+        const token = this.getToken();
+        const workspaceId = this.getWorkspaceId();
+        const headers = new Headers(options.headers || {});
+        // Always inject Authorization if token exists
+        if (token) {
+            headers.set("Authorization", `Bearer ${token}`);
+        }
+        // Always inject X-Workspace-ID
+        if (workspaceId) {
+            headers.set("X-Workspace-ID", workspaceId);
+        }
+        if (!headers.has("Content-Type") && !(options.body instanceof FormData)) {
+            headers.set("Content-Type", "application/json");
+        }
+        try {
+            const response = await fetch(url, {
+                ...options,
+                headers,
+            });
+            // Handle 401 (expired/invalid session) → logout
+            if (response.status === 401) {
+                if (typeof window !== "undefined") {
+                    auth.logout();
+                }
+                return { success: false, error: "Session expired. Please login again." };
+            }
+            // Handle 403 (forbidden / module disabled / insufficient role) → surface error, don't logout
+            if (response.status === 403) {
+                const contentType = response.headers.get("content-type");
+                if (contentType && contentType.includes("application/json")) {
+                    const json = await response.json();
+                    return { success: false, error: json.error || json.detail || "Access denied (403)." };
+                }
+                return { success: false, error: "Access denied (403)." };
+            }
+            const contentType = response.headers.get("content-type");
+            if (contentType && contentType.includes("application/json")) {
+                const json = await response.json();
+                if (!response.ok) {
+                    return {
+                        success: false,
+                        error: json.error || json.detail || `API Error (${response.status})`
+                    };
+                }
+                if (json.hasOwnProperty("success")) {
+                    return json as ApiResponse<T>;
+                }
+                return { success: true, data: json as T };
+            } else {
+                const text = await response.text();
+                if (!response.ok) {
+                    console.error("Non-JSON Error Response:", text.substring(0, 200));
+                    return {
+                        success: false,
+                        error: `Backend Error (${response.status}): ${text.substring(0, 50)}...`
+                    };
+                }
+                return { success: true, data: text as any };
+            }
+        } catch (error: any) {
+            console.error("API Connectivity Error:", error);
+            return {
+                success: false,
+                error: `Backend unreachable (${error.message || 'Network Error'}). Check API base URL or server status.`
+            };
+        }
+    }
+    get<T = any>(path: string, options?: RequestInit) {
+        return this.request<T>(path, { ...options, method: "GET" });
+    }
+    post<T = any>(path: string, body?: any, options?: RequestInit) {
+        return this.request<T>(path, {
+            ...options,
+            method: "POST",
+            body: body instanceof FormData ? body : JSON.stringify(body),
+        });
+    }
+    put<T = any>(path: string, body?: any, options?: RequestInit) {
+        return this.request<T>(path, {
+            ...options,
+            method: "PUT",
+            body: body instanceof FormData ? body : JSON.stringify(body),
+        });
+    }
+    patch<T = any>(path: string, body?: any, options?: RequestInit) {
+        return this.request<T>(path, {
+            ...options,
+            method: "PATCH",
+            body: body instanceof FormData ? body : JSON.stringify(body),
+        });
+    }
+    delete<T = any>(path: string, options?: RequestInit) {
+        return this.request<T>(path, { ...options, method: "DELETE" });
+    }
 }
+export const apiClient = new ApiClient();
+// ── Marketing Website Functions ──
+export interface CatalogPlan {
+    id: string;
+    name: string;
+    display_name: string;
+    description: string | null;
+    sort_order: number;
+    entitlements: any[];
 }
+export interface CatalogModule {
+    key: string;
+    label: string;
+    is_enabled: boolean;
+}
+export interface CatalogProvider {
+    key: string;
+    label: string;
+    description: string;
+    icon_hint: string;
+    fields: { name: string; label: string; type: string }[];
 }
+export interface CatalogTemplate {
+    id: string;
+    slug: string;
+    name: string;
+    description: string;
+    category: string;
+    industry_tags: string[];
+    platforms: string[];
+    required_integrations: string[];
+    is_featured: boolean;
+    clone_count: number;
 }
+export const APP_URL = "http://localhost:3000";
 export async function getPlans(): Promise<CatalogPlan[]> {
+    try {
+        const res = await fetch(`${API_BASE_URL}/api/v1/catalog/plans`, { next: { revalidate: 60 } });
+        const json = await res.json();
+        return json.success ? json.data : [];
+    } catch { return []; }
 }
 export async function getModules(): Promise<CatalogModule[]> {
+    try {
+        const res = await fetch(`${API_BASE_URL}/api/v1/catalog/modules`, { next: { revalidate: 60 } });
+        const json = await res.json();
+        return json.success ? json.data : [];
+    } catch { return []; }
 }
 export async function getIntegrationProviders(): Promise<CatalogProvider[]> {
+    try {
+        const res = await fetch(`${API_BASE_URL}/api/v1/catalog/integration-providers`, { next: { revalidate: 60 } });
+        const json = await res.json();
+        return json.success ? json.data : [];
+    } catch { return []; }
 }
 export async function getPublicTemplates(category?: string): Promise<CatalogTemplate[]> {
+    const params = category ? `?category=${encodeURIComponent(category)}` : "";
+    try {
+        const res = await fetch(`${API_BASE_URL}/api/v1/catalog/templates${params}`, { next: { revalidate: 60 } });
+        const json = await res.json();
+        return json.success ? json.data : [];
+    } catch { return []; }
+}
+export interface CatalogEnum {
+    key: string;
+    label: string;
 }
 export async function getTemplateCategories(): Promise<CatalogEnum[]> {
+    try {
+        const res = await fetch(`${API_BASE_URL}/api/v1/catalog/template-categories`, { next: { revalidate: 60 } });
+        const json = await res.json();
+        return json.success ? json.data : [];
+    } catch { return []; }
 }
 export async function getTemplatePlatforms(): Promise<CatalogEnum[]> {
+    try {
+        const res = await fetch(`${API_BASE_URL}/api/v1/catalog/template-platforms`, { next: { revalidate: 60 } });
+        const json = await res.json();
+        return json.success ? json.data : [];
+    } catch { return []; }
 }