actions.saveDmnModel(currentDmnModel())}
>
Save Changes
diff --git a/builder-frontend/src/components/project/Project.tsx b/builder-frontend/src/components/project/Project.tsx
index 5fb28868..a92d0b12 100644
--- a/builder-frontend/src/components/project/Project.tsx
+++ b/builder-frontend/src/components/project/Project.tsx
@@ -2,7 +2,7 @@ import { createSignal, createResource, Accessor } from "solid-js";
import { useParams } from "@solidjs/router";
import FormEditorView from "./FormEditorView";
-import Header from "../Header";
+import Header from "../Header/Header";
import Loading from "../Loading";
import ManageBenefits from "./manageBenefits/ManageBenefits";
import Preview from "./preview/Preview";
@@ -11,7 +11,6 @@ import Publish from "./Publish";
import { fetchProject } from "@/api/screener";
import BdtNavbar, { NavbarProps } from "@/components/shared/BdtNavbar";
-
type TabOption = "manageBenefits" | "formEditor" | "preview" | "publish";
function Project() {
@@ -34,16 +33,32 @@ function Project() {
// including a dummy signal 'forceUpdate' that can be unique for
// each call to the refetch
() => [params.projectId, forceUpdate()],
- fetchAndCacheProject
+ fetchAndCacheProject,
);
const navbarDefs: Accessor
= () => {
return {
tabDefs: [
- { key: "manageBenefits", label: "Manage Benefits", onClick: () => setActiveTab("manageBenefits") },
- { key: "formEditor", label: "Form Editor", onClick: () => setActiveTab("formEditor") },
- { key: "preview", label: "Preview", onClick: () => setActiveTab("preview") },
- { key: "publish", label: "Publish", onClick: () => setActiveTab("publish") },
+ {
+ key: "manageBenefits",
+ label: "Manage Benefits",
+ onClick: () => setActiveTab("manageBenefits"),
+ },
+ {
+ key: "formEditor",
+ label: "Form Editor",
+ onClick: () => setActiveTab("formEditor"),
+ },
+ {
+ key: "preview",
+ label: "Preview",
+ onClick: () => setActiveTab("preview"),
+ },
+ {
+ key: "publish",
+ label: "Publish",
+ onClick: () => setActiveTab("publish"),
+ },
],
activeTabKey: () => activeTab(),
titleDef: { label: project().screenerName },
@@ -52,9 +67,9 @@ function Project() {
return (
-
+
{project.loading ? (
-
+
) : (
<>
@@ -64,11 +79,9 @@ function Project() {
setFormSchema={setFormSchema}
/>
)}
- {activeTab() == "manageBenefits" && (
-
- )}
+ {activeTab() == "manageBenefits" &&
}
{activeTab() == "preview" && (
-
+
)}
{activeTab() == "publish" && (
Date: Wed, 4 Mar 2026 15:45:05 -0500
Subject: [PATCH 2/4] Added to containing user email and
logout button
---
.../src/components/Header/AccountMenu.tsx | 50 +++++++++++++++++++
.../src/components/Header/Header.css | 34 +++++++++++++
.../src/components/Header/Header.tsx | 7 ++-
3 files changed, 89 insertions(+), 2 deletions(-)
create mode 100644 builder-frontend/src/components/Header/AccountMenu.tsx
create mode 100644 builder-frontend/src/components/Header/Header.css
diff --git a/builder-frontend/src/components/Header/AccountMenu.tsx b/builder-frontend/src/components/Header/AccountMenu.tsx
new file mode 100644
index 00000000..aec44d71
--- /dev/null
+++ b/builder-frontend/src/components/Header/AccountMenu.tsx
@@ -0,0 +1,50 @@
+import { useAuth } from "@/context/AuthContext";
+import { useNavigate } from "@solidjs/router";
+import { createSignal, onCleanup, onMount, Show } from "solid-js";
+
+export const AccountMenu = () => {
+ const [root, setRoot] = createSignal();
+ const [showMenu, setShowMenu] = createSignal(false);
+ const navigate = useNavigate();
+
+ const auth = useAuth();
+ const userEmail = auth.user().email;
+ const { logout } = auth;
+
+ const handleClickOutside = (ev: MouseEvent) => {
+ const el = root();
+ if (showMenu() && el && !el.contains(ev.target as Node)) {
+ setShowMenu(false);
+ }
+ };
+
+ onMount(() => {
+ document.addEventListener("click", handleClickOutside);
+ });
+
+ onCleanup(() => {
+ document.removeEventListener("click", handleClickOutside);
+ });
+
+ const handleLogout = () => {
+ logout();
+ navigate("/login", { replace: true });
+ };
+
+ return (
+
+ );
+};
diff --git a/builder-frontend/src/components/Header/Header.css b/builder-frontend/src/components/Header/Header.css
new file mode 100644
index 00000000..4b9deb1b
--- /dev/null
+++ b/builder-frontend/src/components/Header/Header.css
@@ -0,0 +1,34 @@
+@import "tailwindcss";
+
+.account-menu-wrapper {
+ position: relative;
+ display: inline-block;
+}
+
+.account-menu-toggle {
+ @apply px-4 py-3 font-bold text-gray-700 rounded-sm;
+}
+.account-menu-toggle:hover {
+ @apply bg-gray-300 cursor-pointer;
+}
+
+.account-menu-panel {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+
+ z-index: 1000;
+
+ background-color: white;
+ padding: 0.5rem;
+ margin-top: 0.5rem;
+ @apply border-1 border-black rounded-sm;
+}
+
+.account-menu-item {
+ @apply p-2 rounded-sm;
+}
+.account-menu-item:hover {
+ @apply bg-slate-200 cursor-pointer;
+}
diff --git a/builder-frontend/src/components/Header/Header.tsx b/builder-frontend/src/components/Header/Header.tsx
index 8ef8cf41..48cf3b67 100644
--- a/builder-frontend/src/components/Header/Header.tsx
+++ b/builder-frontend/src/components/Header/Header.tsx
@@ -1,8 +1,11 @@
import { useAuth } from "../../context/AuthContext";
import { useLocation, useNavigate } from "@solidjs/router";
-import bdtLogo from "../assets/logos/bdt-logo-large-mono-light.svg";
+import bdtLogo from "@/assets/logos/bdt-logo-large-mono-light.svg";
import { Show } from "solid-js";
+import { AccountMenu } from "@/components/Header/AccountMenu";
+
+import "./Header.css";
const HeaderButton = ({
buttonText,
@@ -57,7 +60,7 @@ export default function Header() {
buttonText="User Guide"
onClick={() => window.open("https://bdt-docs.web.app/", "_blank")}
/>
-
+
Open menu
+
+
+
+
+