tanweer919
1d37593102
Wire the AppShell SDK for auth/identity across the CRM, gated behind isShellConfigured() so the existing mock portal + static demo user stay the fallback until the Shell BFF is configured. - providers.tsx: app-wide <AppShellProvider> (auth passed only when Supabase env set) - next.config.ts: transpilePackages + /shell -> BFF rewrite (keeps /api/geo intact) - login: password -> login(), social -> loginWithOAuth(), OAuth return -> completeOAuthLogin() - register: email/password sign-ups call register() on finish - dashboard: AuthGate bounces unauthenticated visitors; topbar shows ACE identity - docs/APPSHELL_INTEGRATION.md, .env.local.example, .npmrc for GitHub Packages
45 lines
2.0 KiB
TypeScript
45 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { Sun, Moon, ChevronDown } from "lucide-react";
|
|
import { Icon } from "./ui";
|
|
import { user } from "./account-data";
|
|
import { useAuth } from "@abe-kap/appshell-sdk/react";
|
|
|
|
function initialsOf(name: string): string {
|
|
return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
|
|
}
|
|
|
|
export function Topbar({ theme, onToggle, title, subtitle }: { theme: "dark" | "light"; onToggle: () => void; title: string; subtitle: string }) {
|
|
// When signed in through the Shell, show the real identity from the App Context
|
|
// Envelope; otherwise fall back to the static demo user.
|
|
const { user: me } = useAuth();
|
|
const name = me?.displayName || user.name;
|
|
const initials = me ? initialsOf(me.displayName) : user.initials;
|
|
return (
|
|
<header className="dash-topbar">
|
|
<div className="dash-title">
|
|
<h1>{title}</h1>
|
|
<p>{subtitle}</p>
|
|
</div>
|
|
<div className="top-actions">
|
|
<button className="ic-btn" aria-label="Search"><Icon name="search" size={18} /></button>
|
|
<button className="ic-btn" aria-label="Toggle theme" onClick={onToggle}>
|
|
{theme === "dark" ? <Moon size={18} /> : <Sun size={18} />}
|
|
</button>
|
|
<button className="ic-btn" aria-label="Notifications" style={{ position: "relative" }}>
|
|
<Icon name="bell" size={18} />
|
|
<span style={{ position: "absolute", top: 9, right: 10, width: 7, height: 7, borderRadius: 99, background: "var(--orange)", border: "2px solid var(--panel)" }} />
|
|
</button>
|
|
<button className="top-user">
|
|
<span className="av" style={{ background: user.avatarGradient, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>{initials}</span>
|
|
<div style={{ textAlign: "left" }}>
|
|
<div className="nm">{name}</div>
|
|
<div className="rl">{user.role}</div>
|
|
</div>
|
|
<ChevronDown size={16} />
|
|
</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|