404 - Page Not Found
} />
+ 404 - Page Not Found
}
+ />
);
}
diff --git a/builder-frontend/src/api/auth.js b/builder-frontend/src/api/auth.js
deleted file mode 100644
index f44572f9..00000000
--- a/builder-frontend/src/api/auth.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { auth } from "../firebase/firebase.js";
-
-
-export async function authFetch(input, init = {}) {
- const user = auth.currentUser;
-
- // If no user is logged in, you can handle it accordingly
- if (!user) {
- throw new Error("User not authenticated");
- }
-
- const token = await user.getIdToken();
- const headers = new Headers(init.headers || {});
-
- headers.set("Authorization", `Bearer ${token}`);
- return fetch(input, { ...init, headers });
-}
diff --git a/builder-frontend/src/api/auth.ts b/builder-frontend/src/api/auth.ts
new file mode 100644
index 00000000..50a0ea28
--- /dev/null
+++ b/builder-frontend/src/api/auth.ts
@@ -0,0 +1,29 @@
+import { auth } from "../firebase/firebase.js";
+
+type RestMethod = "GET" | "POST" | "PUT" | "DELETE";
+type FetchInit = {
+ headers: Record
- {buttonText}
-
- );
-}
+import { useAuth } from "../context/AuthContext";
+import "./Header.css";
export default function Header() {
const { logout } = useAuth();
const navigate = useNavigate();
const location = useLocation();
- const isNotRoot = location.pathname !== "/";
+ const isNotRoot = createMemo(() => location.pathname !== "/");
const handleLogout = () => {
logout();
@@ -32,15 +17,24 @@ export default function Header() {
};
return (
-
- 
-
-
-
- navigate("/")} />
-
-
+
+ 
+
+
+
);
diff --git a/builder-frontend/src/components/Project/DeleteConfirmation.tsx b/builder-frontend/src/components/Project/DeleteConfirmation.tsx
new file mode 100644
index 00000000..0e30ffe2
--- /dev/null
+++ b/builder-frontend/src/components/Project/DeleteConfirmation.tsx
@@ -0,0 +1,30 @@
+import { Trash2 } from "lucide-solid";
+
+import { Button } from "@/components/shared/Button";
+
+interface Props {
+ id: string;
+ screenerName: string;
+ onCancel: () => void;
+ onDelete: () => void;
+}
+export default function DeleteConfirmation(props: Props) {
+ return (
+ ["refetch"];
+}
+
+export default function EditScreenerForm(props: ParentProps) {
+ const [showDelete, setShowDelete] = createSignal(false);
+ const [error, setError] = createSignal(null);
+ const [isLoading, setIsLoading] = createSignal(false);
+
+ const handleSubmit: JSX.EventHandler = (e) => {
+ e.preventDefault();
+ setIsLoading(true);
+ const fd = new FormData(e.currentTarget);
+ const screenerName = fd.get("screenerName")?.toString() || "";
+
+ if (screenerName.length > 0) {
+ setError(null);
+ updateScreener({ screenerName, id: props.id })
+ .then(() => {
+ props.refetchProjects();
+ setIsLoading(false);
+ })
+ .catch((e) => {
+ setIsLoading(false);
+ });
+ } else {
+ setError("Please enter a name.");
+ setIsLoading(false);
+ }
+ };
+
+ const handleDelete = () => {
+ setIsLoading(true);
+ deleteScreener(props.id)
+ .then(() => {
+ props.refetchProjects();
+ setIsLoading(false);
+ })
+ .catch((e) => {
+ setIsLoading(false);
+ });
+ };
+
+ return (
+ ();
+
+ const handleSubmit: JSX.EventHandler = async (
+ e,
+ ) => {
+ e.preventDefault();
+ setIsLoading(true);
+ const fd = new FormData(e.currentTarget);
+ const screenerName = fd.get("screenerName")?.toString() || "";
+
+ if (screenerName.length > 0) {
+ setError(null);
+ const newScreener = await createNewScreener({ screenerName });
+ navigate(`/projects/${newScreener.id}`);
+ } else {
+ setError("Please enter a name.");
+ setIsLoading(false);
+ }
+ };
+
+ return (
+ ["refetch"];
+}
+
+export const ProjectCard: Component> = (props) => {
+ const [showMenu, setShowMenu] = createSignal(false);
+
+ return (
+ = () => {
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 +66,8 @@ function Project() {
return (
,
- setBenefitIdToRemove: Setter
- }
-) => {
+const BenefitCard = ({
+ benefit,
+ setBenefitIdToConfigure,
+ setBenefitIdToRemove,
+}: {
+ benefit: BenefitDetail;
+ setBenefitIdToConfigure: Setter;
+ setBenefitIdToRemove: Setter;
+}) => {
return (
);
-}
+};
export default BenefitList;
diff --git a/builder-frontend/src/components/project/manageBenefits/benefitList/modals/AddNewBenefitModal.tsx b/builder-frontend/src/components/Project/ProjectDetails/manageBenefits/benefitList/modals/AddNewBenefitModal.tsx
similarity index 100%
rename from builder-frontend/src/components/project/manageBenefits/benefitList/modals/AddNewBenefitModal.tsx
rename to builder-frontend/src/components/Project/ProjectDetails/manageBenefits/benefitList/modals/AddNewBenefitModal.tsx
diff --git a/builder-frontend/src/components/project/manageBenefits/benefitList/modals/SelectExistingBenefitModal.tsx b/builder-frontend/src/components/Project/ProjectDetails/manageBenefits/benefitList/modals/SelectExistingBenefitModal.tsx
similarity index 100%
rename from builder-frontend/src/components/project/manageBenefits/benefitList/modals/SelectExistingBenefitModal.tsx
rename to builder-frontend/src/components/Project/ProjectDetails/manageBenefits/benefitList/modals/SelectExistingBenefitModal.tsx
diff --git a/builder-frontend/src/components/project/manageBenefits/benefitList/screenerBenefitsResource.ts b/builder-frontend/src/components/Project/ProjectDetails/manageBenefits/benefitList/screenerBenefitsResource.ts
similarity index 100%
rename from builder-frontend/src/components/project/manageBenefits/benefitList/screenerBenefitsResource.ts
rename to builder-frontend/src/components/Project/ProjectDetails/manageBenefits/benefitList/screenerBenefitsResource.ts
diff --git a/builder-frontend/src/components/project/manageBenefits/configureBenefit/ConfigureBenefit.tsx b/builder-frontend/src/components/Project/ProjectDetails/manageBenefits/configureBenefit/ConfigureBenefit.tsx
similarity index 95%
rename from builder-frontend/src/components/project/manageBenefits/configureBenefit/ConfigureBenefit.tsx
rename to builder-frontend/src/components/Project/ProjectDetails/manageBenefits/configureBenefit/ConfigureBenefit.tsx
index b3cc645c..77e54149 100644
--- a/builder-frontend/src/components/project/manageBenefits/configureBenefit/ConfigureBenefit.tsx
+++ b/builder-frontend/src/components/Project/ProjectDetails/manageBenefits/configureBenefit/ConfigureBenefit.tsx
@@ -2,7 +2,7 @@ import { Accessor, createResource, createSignal, For, Show } from "solid-js";
import SelectedEligibilityCheck from "./SelectedEligibilityCheck";
import EligibilityCheckListView from "./EligibilityCheckListView";
-import Loading from "../../../Loading";
+import Loading from "@/components/Loading";
import BenefitResource from "./benefitResource";
import { fetchPublicChecks, fetchUserDefinedChecks } from "@/api/check";
@@ -26,7 +26,7 @@ const ConfigureBenefit = ({
createSignal("public");
const [publicChecks] = createResource(fetchPublicChecks);
const [userDefinedChecks] = createResource(() =>
- fetchUserDefinedChecks(false)
+ fetchUserDefinedChecks(false),
);
const onRemoveEligibilityCheck = (checkIndexToRemove: number) => {
@@ -93,11 +93,11 @@ const ConfigureBenefit = ({
onRemoveEligibilityCheck(checkIndex())
}
updateCheckConfigParams={(
- newCheckData: ParameterValues
+ newCheckData: ParameterValues,
) => {
actions.updateCheckConfigParams(
checkIndex(),
- newCheckData
+ newCheckData,
);
}}
/>
diff --git a/builder-frontend/src/components/project/manageBenefits/configureBenefit/EligibilityCheckListView.tsx b/builder-frontend/src/components/Project/ProjectDetails/manageBenefits/configureBenefit/EligibilityCheckListView.tsx
similarity index 100%
rename from builder-frontend/src/components/project/manageBenefits/configureBenefit/EligibilityCheckListView.tsx
rename to builder-frontend/src/components/Project/ProjectDetails/manageBenefits/configureBenefit/EligibilityCheckListView.tsx
diff --git a/builder-frontend/src/components/project/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx b/builder-frontend/src/components/Project/ProjectDetails/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx
similarity index 100%
rename from builder-frontend/src/components/project/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx
rename to builder-frontend/src/components/Project/ProjectDetails/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx
diff --git a/builder-frontend/src/components/project/manageBenefits/configureBenefit/benefitResource.ts b/builder-frontend/src/components/Project/ProjectDetails/manageBenefits/configureBenefit/benefitResource.ts
similarity index 100%
rename from builder-frontend/src/components/project/manageBenefits/configureBenefit/benefitResource.ts
rename to builder-frontend/src/components/Project/ProjectDetails/manageBenefits/configureBenefit/benefitResource.ts
diff --git a/builder-frontend/src/components/project/manageBenefits/configureBenefit/modals/ConfigureCheckModal.tsx b/builder-frontend/src/components/Project/ProjectDetails/manageBenefits/configureBenefit/modals/ConfigureCheckModal.tsx
similarity index 100%
rename from builder-frontend/src/components/project/manageBenefits/configureBenefit/modals/ConfigureCheckModal.tsx
rename to builder-frontend/src/components/Project/ProjectDetails/manageBenefits/configureBenefit/modals/ConfigureCheckModal.tsx
diff --git a/builder-frontend/src/components/project/preview/FormRenderer.tsx b/builder-frontend/src/components/Project/ProjectDetails/preview/FormRenderer.tsx
similarity index 100%
rename from builder-frontend/src/components/project/preview/FormRenderer.tsx
rename to builder-frontend/src/components/Project/ProjectDetails/preview/FormRenderer.tsx
diff --git a/builder-frontend/src/components/project/preview/Preview.tsx b/builder-frontend/src/components/Project/ProjectDetails/preview/Preview.tsx
similarity index 82%
rename from builder-frontend/src/components/project/preview/Preview.tsx
rename to builder-frontend/src/components/Project/ProjectDetails/preview/Preview.tsx
index e7049585..e0a9ebbd 100644
--- a/builder-frontend/src/components/project/preview/Preview.tsx
+++ b/builder-frontend/src/components/Project/ProjectDetails/preview/Preview.tsx
@@ -3,13 +3,13 @@ import { Accessor, createSignal } from "solid-js";
import FormRenderer from "./FormRenderer";
import Results from "./Results";
-import { evaluateScreener } from "../../../api/screener";
+import { evaluateScreener } from "@/api/screener";
import { PreviewFormData, ScreenerResult } from "./types";
-
const Preview = ({ project, formSchema }) => {
- const [lastInputDataSent, setLastInputDataSent] = createSignal({});
+ const [lastInputDataSent, setLastInputDataSent] =
+ createSignal({});
const [results, setResults] = createSignal();
const [resultsLoading, setResultsLoading] = createSignal(false);
@@ -24,7 +24,7 @@ const Preview = ({ project, formSchema }) => {
schemaVersion: 18,
type: "default",
};
- }
+ };
const handleSubmitForm = async (data: PreviewFormData) => {
setLastInputDataSent(data);
@@ -39,13 +39,17 @@ const Preview = ({ project, formSchema }) => {
+
+
);
-}
+};
export default Preview;
diff --git a/builder-frontend/src/components/project/preview/Results.tsx b/builder-frontend/src/components/Project/ProjectDetails/preview/Results.tsx
similarity index 65%
rename from builder-frontend/src/components/project/preview/Results.tsx
rename to builder-frontend/src/components/Project/ProjectDetails/preview/Results.tsx
index 26b306c7..9b965bc5 100644
--- a/builder-frontend/src/components/project/preview/Results.tsx
+++ b/builder-frontend/src/components/Project/ProjectDetails/preview/Results.tsx
@@ -2,19 +2,19 @@ import { Accessor, For, Match, Show, Switch } from "solid-js";
import { PreviewFormData, ScreenerResult } from "./types";
-import checkIcon from "../../../assets/images/checkIcon.svg";
-import questionIcon from "../../../assets/images/questionIcon.svg";
-import xIcon from "../../../assets/images/xIcon.svg";
+import checkIcon from "@/assets/images/checkIcon.svg";
+import questionIcon from "@/assets/images/questionIcon.svg";
+import xIcon from "@/assets/images/xIcon.svg";
-
-export default function Results(
- { inputData, results, resultsLoading }:
- {
- inputData: Accessor,
- results: Accessor,
- resultsLoading: Accessor
- }
-) {
+export default function Results({
+ inputData,
+ results,
+ resultsLoading,
+}: {
+ inputData: Accessor;
+ results: Accessor;
+ resultsLoading: Accessor;
+}) {
return (
+
+
+
+ {isNotRoot() && (
+
+ ← Back to home
+
+ )}
+
+
+ );
+}
diff --git a/builder-frontend/src/components/Project/EditScreenerForm.tsx b/builder-frontend/src/components/Project/EditScreenerForm.tsx
new file mode 100644
index 00000000..74c572b1
--- /dev/null
+++ b/builder-frontend/src/components/Project/EditScreenerForm.tsx
@@ -0,0 +1,95 @@
+import {
+ createSignal,
+ JSX,
+ ParentProps,
+ ResourceActions,
+ Show,
+} from "solid-js";
+import { Trash2 } from "lucide-solid";
+
+import type { Project } from "@/types";
+import { deleteScreener, updateScreener } from "@/api/screener";
+import Form from "@/components/shared/Form";
+import { Button } from "@/components/shared/Button";
+import { Modal } from "@/components/shared/Modal";
+import DeleteConfirmation from "./DeleteConfirmation";
+
+interface Props {
+ id: string;
+ screenerName: string;
+ refetchProjects: ResourceActions+ Are you sure you would like to delete {props.screenerName}? +
+
+ Once deleted, all associated data will be deleted and cant be recovered.
+
+
+
+
+
+
+
+ + + + setShowDelete(false)}>
+ setShowDelete(false)}
+ onDelete={handleDelete}
+ />
+
+ {isLoading() &&
+ );
+}
diff --git a/builder-frontend/src/components/Project/NewProjectCard.tsx b/builder-frontend/src/components/Project/NewProjectCard.tsx
new file mode 100644
index 00000000..5c535b02
--- /dev/null
+++ b/builder-frontend/src/components/Project/NewProjectCard.tsx
@@ -0,0 +1,19 @@
+import { createSignal } from "solid-js";
+
+import { Modal } from "@/components/shared/Modal";
+import NewScreenerForm from "@/components/Project/NewScreenerForm";
+import { Button } from "@/components/shared/Button";
+
+export const NewProjectCard = () => {
+ const [showModal, setShowModal] = createSignal(false);
+ return (
+ Edit screener
+ + + ++ + + +
Loading ...
}
+ setShowModal(true)}>
+ setShowModal(false)}>
+
+
+ );
+};
diff --git a/builder-frontend/src/components/Project/NewScreenerForm.tsx b/builder-frontend/src/components/Project/NewScreenerForm.tsx
new file mode 100644
index 00000000..f19623a1
--- /dev/null
+++ b/builder-frontend/src/components/Project/NewScreenerForm.tsx
@@ -0,0 +1,51 @@
+import { createSignal, type JSX, Show } from "solid-js";
+import { useNavigate } from "@solidjs/router";
+
+import { createNewScreener } from "@/api/screener";
+import Form from "@/components/shared/Form";
+
+export default function NewScreenerForm() {
+ const navigate = useNavigate();
+ const [isLoading, setIsLoading] = createSignal(false);
+ const [error, setError] = createSignal
+ Create new screener
+
+
+
+ );
+}
diff --git a/builder-frontend/src/components/Project/ProjectCard.tsx b/builder-frontend/src/components/Project/ProjectCard.tsx
new file mode 100644
index 00000000..6c44a87e
--- /dev/null
+++ b/builder-frontend/src/components/Project/ProjectCard.tsx
@@ -0,0 +1,39 @@
+import {
+ Component,
+ createSignal,
+ ParentProps,
+ ResourceActions,
+} from "solid-js";
+import { Ellipsis } from "lucide-solid";
+
+import { Modal } from "@/components/shared/Modal";
+import EditScreenerForm from "@/components/Project/EditScreenerForm";
+import { Project } from "@/types";
+
+interface Props {
+ id: string;
+ screenerName: string;
+ refetchProjects: ResourceActionsCreate a screener
+ +
+
+
+
+ );
+};
diff --git a/builder-frontend/src/components/project/FormEditorView.tsx b/builder-frontend/src/components/Project/ProjectDetails/FormEditorView.tsx
similarity index 95%
rename from builder-frontend/src/components/project/FormEditorView.tsx
rename to builder-frontend/src/components/Project/ProjectDetails/FormEditorView.tsx
index 320e7290..52941732 100644
--- a/builder-frontend/src/components/project/FormEditorView.tsx
+++ b/builder-frontend/src/components/Project/ProjectDetails/FormEditorView.tsx
@@ -6,12 +6,11 @@ import { FormEditor } from "@bpmn-io/form-js-editor";
import FilterFormComponentsModule from "./formJsExtensions/FilterFormComponentsModule";
import CustomFormFieldsModule from "./formJsExtensions/customFormFields";
-import { saveFormSchema } from "../../api/screener";
+import { saveFormSchema } from "@/api/screener";
import "@bpmn-io/form-js/dist/assets/form-js.css";
import "@bpmn-io/form-js-editor/dist/assets/form-js-editor.css";
-
function FormEditorView({ formSchema, setFormSchema }) {
const [isUnsaved, setIsUnsaved] = createSignal(false);
const [isSaving, setIsSaving] = createSignal(false);
@@ -31,10 +30,7 @@ function FormEditorView({ formSchema, setFormSchema }) {
onMount(() => {
formEditor = new FormEditor({
container,
- additionalModules: [
- FilterFormComponentsModule,
- CustomFormFieldsModule
- ],
+ additionalModules: [FilterFormComponentsModule, CustomFormFieldsModule],
});
if (formSchema()) {
diff --git a/builder-frontend/src/components/project/Project.tsx b/builder-frontend/src/components/Project/ProjectDetails/Project.tsx
similarity index 73%
rename from builder-frontend/src/components/project/Project.tsx
rename to builder-frontend/src/components/Project/ProjectDetails/Project.tsx
index 5fb28868..dada30c8 100644
--- a/builder-frontend/src/components/project/Project.tsx
+++ b/builder-frontend/src/components/Project/ProjectDetails/Project.tsx
@@ -2,8 +2,7 @@ import { createSignal, createResource, Accessor } from "solid-js";
import { useParams } from "@solidjs/router";
import FormEditorView from "./FormEditorView";
-import Header from "../Header";
-import Loading from "../Loading";
+import Loading from "@/components/Loading";
import ManageBenefits from "./manageBenefits/ManageBenefits";
import Preview from "./preview/Preview";
import Publish from "./Publish";
@@ -11,7 +10,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 +32,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{props.screenerName}
+
+
-
+ { return project()?.screenerName };
- const isPublished = () => { return project()?.publishedScreenerId !== null };
- const lastPublishDate = () => { return project()?.lastPublishDate };
+ const screenerName = () => {
+ return project()?.screenerName;
+ };
+ const isPublished = () => {
+ return project()?.publishedScreenerId !== null;
+ };
+ const lastPublishDate = () => {
+ return project()?.lastPublishDate;
+ };
const screenerUrl = () => {
- return window.location.protocol + "//" +window.location.host + "/screener/" + project()?.publishedScreenerId;
+ return (
+ window.location.protocol +
+ "//" +
+ window.location.host +
+ "/screener/" +
+ project()?.publishedScreenerId
+ );
};
const { projectId } = useParams();
diff --git a/builder-frontend/src/components/project/formJsExtensions/FilterFormComponentsModule.tsx b/builder-frontend/src/components/Project/ProjectDetails/formJsExtensions/FilterFormComponentsModule.tsx
similarity index 100%
rename from builder-frontend/src/components/project/formJsExtensions/FilterFormComponentsModule.tsx
rename to builder-frontend/src/components/Project/ProjectDetails/formJsExtensions/FilterFormComponentsModule.tsx
diff --git a/builder-frontend/src/components/project/formJsExtensions/customFormFields/YesNoQuestion.ts b/builder-frontend/src/components/Project/ProjectDetails/formJsExtensions/customFormFields/YesNoQuestion.ts
similarity index 100%
rename from builder-frontend/src/components/project/formJsExtensions/customFormFields/YesNoQuestion.ts
rename to builder-frontend/src/components/Project/ProjectDetails/formJsExtensions/customFormFields/YesNoQuestion.ts
diff --git a/builder-frontend/src/components/project/formJsExtensions/customFormFields/index.js b/builder-frontend/src/components/Project/ProjectDetails/formJsExtensions/customFormFields/index.js
similarity index 100%
rename from builder-frontend/src/components/project/formJsExtensions/customFormFields/index.js
rename to builder-frontend/src/components/Project/ProjectDetails/formJsExtensions/customFormFields/index.js
diff --git a/builder-frontend/src/components/project/manageBenefits/ManageBenefits.tsx b/builder-frontend/src/components/Project/ProjectDetails/manageBenefits/ManageBenefits.tsx
similarity index 100%
rename from builder-frontend/src/components/project/manageBenefits/ManageBenefits.tsx
rename to builder-frontend/src/components/Project/ProjectDetails/manageBenefits/ManageBenefits.tsx
diff --git a/builder-frontend/src/components/project/manageBenefits/benefitList/BenefitList.tsx b/builder-frontend/src/components/Project/ProjectDetails/manageBenefits/benefitList/BenefitList.tsx
similarity index 69%
rename from builder-frontend/src/components/project/manageBenefits/benefitList/BenefitList.tsx
rename to builder-frontend/src/components/Project/ProjectDetails/manageBenefits/benefitList/BenefitList.tsx
index 9b10d104..eca15b1a 100644
--- a/builder-frontend/src/components/project/manageBenefits/benefitList/BenefitList.tsx
+++ b/builder-frontend/src/components/Project/ProjectDetails/manageBenefits/benefitList/BenefitList.tsx
@@ -1,37 +1,43 @@
import { Accessor, createSignal, For, Setter, Show } from "solid-js";
import AddNewBenefitModal from "./modals/AddNewBenefitModal";
-import ConfirmationModal from "../../../shared/ConfirmationModal";
+import ConfirmationModal from "@/components/shared/ConfirmationModal";
import SelectExistingBenefitModal from "./modals/SelectExistingBenefitModal";
import screenerBenefitResource from "./screenerBenefitsResource";
-import Loading from "../../../Loading";
+import Loading from "@/components/Loading";
import type { BenefitDetail } from "@/types";
-
-const BenefitList = (
- { screenerId, setBenefitIdToConfigure }:
- { screenerId: Accessor; setBenefitIdToConfigure: Setter }
-) => {
- const { screenerBenefits, actions, actionInProgress, initialLoadStatus } = screenerBenefitResource(screenerId);
+const BenefitList = ({
+ screenerId,
+ setBenefitIdToConfigure,
+}: {
+ screenerId: Accessor;
+ setBenefitIdToConfigure: Setter;
+}) => {
+ const { screenerBenefits, actions, actionInProgress, initialLoadStatus } =
+ screenerBenefitResource(screenerId);
const [addingNewBenefit, setAddingNewBenefit] = createSignal(false);
- const [selectExistingBenefitModal, setSelectExistingBenefitModal] = createSignal(false);
- const [benefitIdToRemove, setBenefitIdToRemove] = createSignal(null);
+ const [selectExistingBenefitModal, setSelectExistingBenefitModal] =
+ createSignal(false);
+ const [benefitIdToRemove, setBenefitIdToRemove] = createSignal(
+ null,
+ );
return (
setAddingNewBenefit(false)}
addNewBenefit={actions.addNewBenefit}
/>
- }
+ )}
{/* {
selectExistingBenefitModal() &&
actions.removeBenefit(benefitIdToRemove()) }
- closeModal={() => setBenefitIdToRemove(null) }
+ callback={() => actions.removeBenefit(benefitIdToRemove())}
+ closeModal={() => setBenefitIdToRemove(null)}
/>
- }
+ )}
- )
+ );
};
-const BenefitCard = (
- { benefit, setBenefitIdToConfigure, setBenefitIdToRemove }:
- {
- benefit: BenefitDetail,
- setBenefitIdToConfigure: Setter
-
-
-
+
- {
- addingNewBenefit() &&
+ {addingNewBenefit() && (
- Manage Benefits
-
+ Manage Benefits
- Define and organize the benefits available in your screener.
- Each benefit can have associated eligibility checks.
+ Define and organize the benefits available in your screener. Each
+ benefit can have associated eligibility checks.
{setAddingNewBenefit(true)}}
+ onClick={() => {
+ setAddingNewBenefit(true);
+ }}
>
Create New Benefit
@@ -47,9 +53,14 @@ const BenefitList = (
grid-cols-1 md:grid-cols-2 xl:grid-cols-3"
>
No benefits found. Please add a new benefit.
@@ -66,13 +77,12 @@ const BenefitList = (
}}
-
- {benefit.name}
-
+ {benefit.name}
Description: {benefit.description}
@@ -125,13 +133,17 @@ const BenefitCard = (
>
{ setBenefitIdToConfigure(benefit.id); } }
+ onClick={() => {
+ setBenefitIdToConfigure(benefit.id);
+ }}
>
Edit
{ setBenefitIdToRemove(benefit.id); } }
+ onClick={() => {
+ setBenefitIdToRemove(benefit.id);
+ }}
>
Remove
@@ -139,6 +151,6 @@ const BenefitCard = (
Form
- Results
-
@@ -27,7 +27,9 @@ export default function Results(
{([key, value]) => (
{key}:
- {value?.toString() || "--"}
+
+ {value?.toString() || "--"}
+
)}
@@ -39,7 +41,13 @@ export default function Results(
- 0}>
+ 0
+ }
+ >
(fetchProjects, {
+ initialValue: [],
+ });
+ const navigate = useNavigate();
+ const { user } = useAuth();
+
+ onMount(() => {
+ // Change to and redirect user to /projects after sign in?
+ if (user() === null) {
+ navigate("/login", { replace: true });
+ }
+ });
+
+ return (
+ = (props) => {
+ return ;
+ refetchProjects: ResourceActions["refetch"];
+}
+
+export default function ProjectsList(props: Props) {
+ return (
+
+ {(item) => (
+
+ );
+}
diff --git a/builder-frontend/src/components/auth/AuthForm.jsx b/builder-frontend/src/components/auth/AuthForm.jsx
index 744537ad..cf74dd87 100644
--- a/builder-frontend/src/components/auth/AuthForm.jsx
+++ b/builder-frontend/src/components/auth/AuthForm.jsx
@@ -4,6 +4,7 @@ import { useAuth } from "../../context/AuthContext";
import Login from "./Login";
import Signup from "./Signup";
import { useLocation, useNavigate } from "@solidjs/router";
+import { Title } from "@solidjs/meta";
export default function AuthForm() {
const [isSigningIn, setIsSigningIn] = createSignal(false);
@@ -12,10 +13,10 @@ export default function AuthForm() {
const location = useLocation();
const toggleMode = () => {
- if (location.pathname === "/login") {
- navigate("/signup");
+ if (location.pathname === "/signup") {
+ navigate("/");
} else {
- navigate("/login");
+ navigate("/signup");
}
};
@@ -38,10 +39,16 @@ export default function AuthForm() {
Sign up to Builder Decision Toolkit
+ Log in to Builder Decision Toolkit
+
diff --git a/builder-frontend/src/components/homeScreen/DeleteConfirmation.jsx b/builder-frontend/src/components/homeScreen/DeleteConfirmation.jsx deleted file mode 100644 index 9cd2c793..00000000 --- a/builder-frontend/src/components/homeScreen/DeleteConfirmation.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import TrashIcon from "../icon/TrashIcon"; - -export default function DeleteConfirmation({ - screenerData, - setIsConfirmationVisible, - handleDelete, -}) { - return ( - = () => {
- return {
- tabDefs: [
- { key: "screeners", label: "Screeners", onClick: () => setScreenMode("screeners") },
- { key: "checks", label: "Eligibility checks", onClick: () => setScreenMode("checks") },
- ],
- activeTabKey: () => screenMode(),
- titleDef: null,
- }
- };
+ const [screenMode, setScreenMode] = createSignal<"screeners" | "checks">(
+ "screeners",
+ );
return (
- {isNewScreenerModalVisible() && (
- ("");
- const [screenMode, setScreenMode] = createSignal("paramConfig");
+ const [screenMode, setScreenMode] =
+ createSignal("paramConfig");
const [validationErrors, setValidationErrors] = createSignal([]);
- const [showingErrorModal, setShowingErrorModal] = createSignal(false);
+ const [showingErrorModal, setShowingErrorModal] =
+ createSignal(false);
const { eligibilityCheck, actions, actionInProgress, initialLoadStatus } =
eligibilityCheckDetailResource(() => checkId);
@@ -43,15 +48,31 @@ const EligibilityCheckDetail = () => {
} else {
toast.success("No validation errors found in DMN model.");
}
- }
+ };
const navbarDefs: Accessor = () => {
return {
tabDefs: [
- { key: "paramConfig", label: "Parameter Configuration", onClick: () => setScreenMode("paramConfig") },
- { key: "dmnDefinition", label: "DMN Definition", onClick: () => setScreenMode("dmnDefinition") },
- { key: "testing", label: "Testing", onClick: () => setScreenMode("testing") },
- { key: "publish", label: "Publish", onClick: () => setScreenMode("publish") },
+ {
+ key: "paramConfig",
+ label: "Parameter Configuration",
+ onClick: () => setScreenMode("paramConfig"),
+ },
+ {
+ key: "dmnDefinition",
+ label: "DMN Definition",
+ onClick: () => setScreenMode("dmnDefinition"),
+ },
+ {
+ key: "testing",
+ label: "Testing",
+ onClick: () => setScreenMode("testing"),
+ },
+ {
+ key: "publish",
+ label: "Publish",
+ onClick: () => setScreenMode("publish"),
+ },
],
activeTabKey: () => screenMode(),
titleDef: { label: eligibilityCheck().name },
@@ -63,10 +84,13 @@ const EligibilityCheckDetail = () => {
-
+
{
Validate Current DMN
Loading results...
Benefits
@@ -59,7 +67,9 @@ export default function Results(
Ineligible
-
+
Need more information
@@ -74,13 +84,29 @@ export default function Results(
{check.name}:{" "}
- 
+
- 
+
-
- 
+
+
diff --git a/builder-frontend/src/components/project/preview/types.ts b/builder-frontend/src/components/Project/ProjectDetails/preview/types.ts
similarity index 100%
rename from builder-frontend/src/components/project/preview/types.ts
rename to builder-frontend/src/components/Project/ProjectDetails/preview/types.ts
diff --git a/builder-frontend/src/components/Project/Projects.css b/builder-frontend/src/components/Project/Projects.css
new file mode 100644
index 00000000..ace6e612
--- /dev/null
+++ b/builder-frontend/src/components/Project/Projects.css
@@ -0,0 +1,20 @@
+@reference "tailwindcss";
+
+.new-project-card {
+ @apply p-4 w-80 h-60 flex justify-center cursor-pointer border-4 border-gray-300 rounded-lg shadow-md hover:shadow-lg hover:bg-gray-200;
+}
+.project-card {
+ @apply w-80 h-60 relative cursor-pointer border-2 border-gray-300 rounded-lg shadow-md hover:shadow-lg hover:bg-gray-200;
+ color: var(--text-strong);
+}
+.project-card-menu {
+ @apply absolute px-2 top-2 right-2 hover:bg-gray-300 rounded-xl;
+}
+
+.project-card-link {
+ @apply h-60 p-4 flex flex-col justify-center items-center no-underline;
+ color: var(--text-strong);
+}
+.project-card-link:hover {
+ color: var(--text-strong);
+}
diff --git a/builder-frontend/src/components/Project/Projects.tsx b/builder-frontend/src/components/Project/Projects.tsx
new file mode 100644
index 00000000..ced0b732
--- /dev/null
+++ b/builder-frontend/src/components/Project/Projects.tsx
@@ -0,0 +1,39 @@
+import { Show, createResource, onMount } from "solid-js";
+import { useNavigate } from "@solidjs/router";
+
+import type { Project } from "@/types";
+import { fetchProjects } from "@/api/screener";
+import { useAuth } from "@/context/AuthContext";
+import { NewProjectCard } from "@/components/Project/NewProjectCard";
+import ProjectsList from "@/components/Project/ProjectsList";
+
+import "./Projects.css";
+
+export default function Projects() {
+ const [projectsList, { refetch }] = createResource
+
+
+
+
+
+ );
+}
diff --git a/builder-frontend/src/components/Project/ProjectsLayout.tsx b/builder-frontend/src/components/Project/ProjectsLayout.tsx
new file mode 100644
index 00000000..b3f2cc2e
--- /dev/null
+++ b/builder-frontend/src/components/Project/ProjectsLayout.tsx
@@ -0,0 +1,5 @@
+import { Component, createSignal, JSX, ParentProps } from "solid-js";
+
+export const ProjectsLayout: Component
+
+ Loading screeners...
+ {props.children}
;
+};
diff --git a/builder-frontend/src/components/Project/ProjectsList.tsx b/builder-frontend/src/components/Project/ProjectsList.tsx
new file mode 100644
index 00000000..4650024f
--- /dev/null
+++ b/builder-frontend/src/components/Project/ProjectsList.tsx
@@ -0,0 +1,23 @@
+import { For, Resource, ResourceActions } from "solid-js";
+
+import { Project } from "@/types";
+import { ProjectCard } from "@/components/Project/ProjectCard";
+
+interface Props {
+ projects: Resource
Benefits Decision Tookit
- {location.pathname === "/login" ? (
- diff --git a/builder-frontend/src/components/homeScreen/DeleteConfirmation.jsx b/builder-frontend/src/components/homeScreen/DeleteConfirmation.jsx deleted file mode 100644 index 9cd2c793..00000000 --- a/builder-frontend/src/components/homeScreen/DeleteConfirmation.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import TrashIcon from "../icon/TrashIcon"; - -export default function DeleteConfirmation({ - screenerData, - setIsConfirmationVisible, - handleDelete, -}) { - return ( -
setIsConfirmationVisible(false)}
- className="fixed inset-0 bg-black/10 flex items-center justify-center z-100"
- >
-
- );
-}
diff --git a/builder-frontend/src/components/homeScreen/EditScreenerForm.jsx b/builder-frontend/src/components/homeScreen/EditScreenerForm.jsx
deleted file mode 100644
index 71256ca3..00000000
--- a/builder-frontend/src/components/homeScreen/EditScreenerForm.jsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { createSignal, onCleanup, onMount } from "solid-js";
-import TrashIcon from "../icon/TrashIcon";
-import DeleteConfirmation from "./DeleteConfirmation";
-
-export default function EditScreenerForm({
- setIsEditModalVisible,
- screenerData,
- handleEditScreener,
- handleDeleteScreener,
-}) {
- const [isLoading, setIsLoading] = createSignal(false);
- const [isConfirmationVisible, setIsConfirmationVisible] = createSignal(false);
- const [screenerName, setScreenerName] = createSignal();
- let isActive = true;
-
- onMount(() => {
- if (screenerData?.screenerName) {
- setScreenerName(screenerData.screenerName);
- }
- });
-
- onCleanup(() => {
- isActive = false;
- });
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- try {
- setIsLoading(true);
- const data = {
- screenerName: screenerName(),
- id: screenerData.id,
- };
- await handleEditScreener(data);
- if (isActive) setIsLoading(false);
- } catch (e) {
- if (setIsLoading()) {
- setIsLoading(false);
- }
- }
- };
-
- const handleDelete = async () => {
- try {
- setIsLoading(true);
- const data = {
- id: screenerData.id,
- };
- await handleDeleteScreener(data);
- if (isActive) setIsLoading(false);
- } catch (e) {
- if (setIsLoading()) {
- setIsLoading(false);
- }
- }
- };
-
- const handleDeleteClicked = (e) => {
- e.preventDefault();
- setIsConfirmationVisible(true);
- };
-
- return (
- <>
- e.stopPropagation()}
- className="bg-white px-12 py-8 rounded-xl max-w-100 w-1/2 min-w-80 h-80"
- >
-
-
- Are you sure you would like to delete {screenerData.screenerName}?
-
-
- Once deleted, all associated data will be deleted and cant be
- recovered.
-
-
-
-
-
- setIsEditModalVisible(false)}
- className="fixed inset-0 bg-black/10 backdrop-blur-sm flex items-center justify-center z-50"
- >
-
-
- {isConfirmationVisible() && (
-
-
+ BDT Home
+ {/*
-
+ */}
- )
-}
-export default HomeScreen;
\ No newline at end of file
+ );
+};
+export default HomeScreen;
diff --git a/builder-frontend/src/components/homeScreen/NewScreenerForm.jsx b/builder-frontend/src/components/homeScreen/NewScreenerForm.jsx
deleted file mode 100644
index f781a3e7..00000000
--- a/builder-frontend/src/components/homeScreen/NewScreenerForm.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { createSignal, onCleanup } from "solid-js";
-
-export default function NewScreenerForm({
- setIsModalVisible,
- handleCreateNewScreener,
-}) {
- const [isLoading, setIsLoading] = createSignal(false);
- let nameInput;
- let isActive = true;
-
- onCleanup(() => {
- isActive = false;
- });
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- setIsLoading(true);
- const data = {
- screenerName: nameInput.value,
- };
- await handleCreateNewScreener(data);
- if (isActive) setIsLoading(false);
- };
-
- return (
- setIsModalVisible(false)}
- className="fixed inset-0 bg-black/10 backdrop-blur-sm flex items-center justify-center z-50"
- >
-
- );
-}
diff --git a/builder-frontend/src/components/homeScreen/ProjectsList.tsx b/builder-frontend/src/components/homeScreen/ProjectsList.tsx
deleted file mode 100644
index af91db72..00000000
--- a/builder-frontend/src/components/homeScreen/ProjectsList.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { For, Show, createResource, createSignal, onMount } from "solid-js";
-import { useNavigate } from "@solidjs/router";
-
-import EditScreenerForm from "./EditScreenerForm";
-import NewScreenerForm from "./NewScreenerForm";
-import MenuIcon from "../icon/MenuIcon";
-
-import {
- fetchProjects, updateScreener, deleteScreener, createNewScreener,
-} from "@/api/screener";
-import { useAuth } from "@/context/AuthContext";
-
-
-export default function ProjectsList() {
- const [projectList, { refetch: refetchProjectList }] = createResource(fetchProjects);
- const [isNewScreenerModalVisible, setIsNewScreenerModalVisible] = createSignal(false);
- const [isEditModalVisible, setIsEditgModalVisible] = createSignal(false);
- const [editModelData, setEditModalData] = createSignal();
- const navigate = useNavigate();
- const { user } = useAuth();
-
- onMount(() => {
- if (user() === null) {
- navigate("/login", { replace: true });
- }
- });
-
- const navigateToProject = (project) => {
- navigate("/project/" + project.id);
- };
-
- const handleCreateNewScreener = async (screenerData) => {
- try {
- const newScreener = await createNewScreener(screenerData);
- navigate(`/project/${newScreener.id}`);
- } catch (e) {
- console.log("Error creating screener", e);
- }
- };
-
- const handleProjectMenuClicked = (e, screenerData) => {
- e.stopPropagation();
- setEditModalData(screenerData);
- setIsEditgModalVisible(true);
- };
-
- const handleUpdateScreener = async (screenerData) => {
- try {
- await updateScreener(screenerData);
- refetchProjectList();
- setIsEditgModalVisible(false);
- } catch (e) {
- console.log("Error editing screener", e);
- }
- };
-
- const handleDeleteScreener = async (screenerData) => {
- try {
- await deleteScreener(screenerData);
- refetchProjectList();
- setIsEditgModalVisible(false);
- } catch (e) {
- console.log("Error deleting screener", e);
- }
- };
-
- return (
- <>
- e.stopPropagation()}
- className="bg-white px-12 py-8 rounded-xl max-w-140 w-1/2 min-w-80 h-96"
- >
-
-
-
- Create a screener
- setIsModalVisible(false)}
- className="text-2xl hover:font-bold hover:cursor-pointer"
- >
- X
-
-
- What is the name of your screener?
-
-
-
- Loading...
}>
-
-
-
-
- {(item) =>
- item && (
-
-
-
- setIsNewScreenerModalVisible(true)}
- class="
- p-4 w-80 h-60 flex justify-center cursor-pointer
- border-4 border-gray-300 rounded-lg
- shadow-md hover:shadow-lg hover:bg-gray-200"
- >
-
-
- Create new screener
-
-
-
-
- Loading screeners...
-
-
-
- )
- }
- handleProjectMenuClicked(e, item)}
- >
-
- navigateToProject(item)}
- class="h-60 p-4 flex flex-col justify-center items-center"
- >
-
-
- {item.screenerName}
-
- actions.saveDmnModel(currentDmnModel())}
>
Save Changes
diff --git a/builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/checkTesting/EligibilityCheckTest.tsx b/builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/checkTesting/EligibilityCheckTest.tsx
index 5d05733c..0e1704e9 100644
--- a/builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/checkTesting/EligibilityCheckTest.tsx
+++ b/builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/checkTesting/EligibilityCheckTest.tsx
@@ -6,7 +6,7 @@ import {
OptionalBoolean,
ParameterValues,
} from "@/types";
-import SelectedEligibilityCheck from "@/components/project/manageBenefits/configureBenefit/SelectedEligibilityCheck";
+import SelectedEligibilityCheck from "@/components/Project/ProjectDetails/manageBenefits/configureBenefit/SelectedEligibilityCheck";
import CheckJsonEditor from "./CheckJsonEditor";
import { JSONContent } from "vanilla-jsoneditor";
@@ -22,7 +22,7 @@ const EligibilityCheckTest = ({
eligibilityCheck: Accessor;
testEligibility: (
checkConfg: CheckConfig,
- inputData: Record
+ inputData: Record,
) => Promise;
}) => {
const [checkConfig, setCheckConfig] = createSignal({
@@ -56,7 +56,7 @@ const EligibilityCheckTest = ({
onClick={async () => {
const result = await testEligibility(
checkConfig(),
- currentJsonContent().json
+ currentJsonContent().json,
);
if (!result) {
return;
diff --git a/builder-frontend/src/components/screener/FormRenderer.tsx b/builder-frontend/src/components/screener/FormRenderer.tsx
index 9bc6944c..f04abb51 100644
--- a/builder-frontend/src/components/screener/FormRenderer.tsx
+++ b/builder-frontend/src/components/screener/FormRenderer.tsx
@@ -4,18 +4,24 @@ import debounce from "lodash.debounce";
import { Form } from "@bpmn-io/form-js-viewer";
import { State } from "@bpmn-io/form-js-viewer/dist/types/Form";
-import CustomFormFieldsModule from "../project/formJsExtensions/customFormFields";
+import CustomFormFieldsModule from "@/components/Project/ProjectDetails/formJsExtensions/customFormFields";
import "@bpmn-io/form-js/dist/assets/form-js.css";
-function FormRenderer(
- { schema, submitForm }:
- { schema: { [key: string]: any; }, submitForm: (data: any) => void }
-) {
+function FormRenderer({
+ schema,
+ submitForm,
+}: {
+ schema: { [key: string]: any };
+ submitForm: (data: any) => void;
+}) {
let container: Element | null = null;
onMount(() => {
- const form: Form = new Form({ container, additionalModules: [ CustomFormFieldsModule ] });
+ const form: Form = new Form({
+ container,
+ additionalModules: [CustomFormFieldsModule],
+ });
const debouncedSubmit = debounce((data) => {
submitForm(data);
diff --git a/builder-frontend/src/components/shared/ANavBar.css b/builder-frontend/src/components/shared/ANavBar.css
new file mode 100644
index 00000000..17197ec4
--- /dev/null
+++ b/builder-frontend/src/components/shared/ANavBar.css
@@ -0,0 +1,11 @@
+@reference "tailwindcss";
+
+.navbarlink {
+ @apply px-4 py-2 no-underline border-b-2 hover:bg-gray-200 transition-colors;
+}
+.navbarlink.inactive {
+ @apply border-transparent text-gray-500 hover:text-gray-700;
+}
+.navbarlink.active {
+ @apply border-b border-gray-700 text-gray-700;
+}
diff --git a/builder-frontend/src/components/shared/ANavBar.tsx b/builder-frontend/src/components/shared/ANavBar.tsx
new file mode 100644
index 00000000..97a3d928
--- /dev/null
+++ b/builder-frontend/src/components/shared/ANavBar.tsx
@@ -0,0 +1,21 @@
+import type { Component } from "solid-js";
+import { A } from "@solidjs/router";
+
+import "./ANavBar.css";
+
+interface Props {
+ items: { label: string; href: string }[];
+}
+const ANavBar: Component = (props) => {
+ return (
+ {
+ variant?:
+ | "primary"
+ | "secondary"
+ | "tertiary"
+ | "danger"
+ | "outline-primary"
+ | "outline-secondary"
+ | "outline-tertiary"
+ | "outline-danger";
+}
+
+export const Button: Component> = (props) => {
+ const { type, variant, children, ...rest } = props;
+ return (
+
+ );
+};
diff --git a/builder-frontend/src/components/shared/Form.css b/builder-frontend/src/components/shared/Form.css
new file mode 100644
index 00000000..dde3f53f
--- /dev/null
+++ b/builder-frontend/src/components/shared/Form.css
@@ -0,0 +1,35 @@
+@reference "tailwindcss";
+
+.textfield {
+ @apply relative;
+}
+.textfield .textfield-input,
+.textfield-above {
+ @apply border-2 border-slate-400 rounded-sm;
+}
+.textfield:hover .textfield-input,
+.textfield-above:hover {
+ @apply border-slate-500;
+}
+.textfield-above {
+ @apply relative;
+ flex-direction: column;
+ margin-bottom: 1rem;
+}
+.textfield-label {
+ @apply py-2;
+}
+.textfield-above > .textfield-label {
+ @apply absolute top-0 left-0 p-4 text-slate-500 pointer-events-none;
+}
+.textfield-above:has(.textfield-input:focus) {
+ @apply border-slate-800;
+}
+.textfield-above > .textfield-input:focus ~ .textfield-label,
+.textfield-above > .textfield-input:not(:placeholder-shown) ~ .textfield-label {
+ transform: scale(0.8) translateY(-1.5rem);
+ transform-origin: 1rem;
+}
+.textfield-input {
+ @apply w-full p-4 focus:outline-0 text-(--text-strong);
+}
diff --git a/builder-frontend/src/components/shared/Form.tsx b/builder-frontend/src/components/shared/Form.tsx
new file mode 100644
index 00000000..452470a5
--- /dev/null
+++ b/builder-frontend/src/components/shared/Form.tsx
@@ -0,0 +1,94 @@
+import {
+ Component,
+ createContext,
+ createSignal,
+ JSX,
+ splitProps,
+ useContext,
+} from "solid-js";
+
+import "./Form.css";
+
+interface FormProps extends JSX.FormHTMLAttributes {}
+interface FormWrapperProps extends JSX.HTMLAttributes {
+ htmlFor: string;
+}
+interface LabelWrapperProps extends JSX.HTMLAttributes {
+ htmlFor: string;
+ placeholder: string;
+}
+interface TextInputProps extends JSX.InputHTMLAttributes {
+ value?: string;
+ placeholder?: string;
+}
+interface LabelProps extends JSX.LabelHTMLAttributes {}
+
+const mergeClasses = (...classes: (string | undefined)[]): string => {
+ return classes.filter((c) => c !== undefined && c.length > 0).join(" ");
+};
+const FormContext = createContext<{ htmlFor?: string }>({});
+
+const TextInput = (props: TextInputProps) => {
+ const [value, setValue] = createSignal(props.value || "");
+ const [local, rest] = splitProps(props, ["class", "placeholder"]);
+ const ctx = useContext(FormContext);
+ const showPlaceholder =
+ value().length < 1 && (local.placeholder || "").length > 0;
+
+ return (
+ setValue(e.target.value)}
+ placeholder={showPlaceholder ? local.placeholder : ""}
+ {...rest}
+ />
+ );
+};
+const Label = (props: LabelProps) => {
+ const [local, rest] = splitProps(props, ["class"]);
+ const ctx = useContext(FormContext);
+
+ return (
+
+ );
+};
+const LabelAbove = (props: LabelWrapperProps) => {
+ const [local, rest] = splitProps(props, [
+ "children",
+ "htmlFor",
+ "placeholder",
+ ]);
+ return (
+
+ {local.children}
+
+
+ );
+};
+const FormWrapper = (props: FormWrapperProps) => {
+ const [local, rest] = splitProps(props, ["htmlFor"]);
+ return (
+
+
+
+ );
+};
+
+const Form: Component = (props) => {
+ return ;
+};
+
+export default Object.assign(Form, {
+ Label,
+ TextInput,
+ FormWrapper,
+ LabelAbove,
+});
diff --git a/builder-frontend/src/components/shared/Modal.module.css b/builder-frontend/src/components/shared/Modal.module.css
new file mode 100644
index 00000000..4f58426c
--- /dev/null
+++ b/builder-frontend/src/components/shared/Modal.module.css
@@ -0,0 +1,27 @@
+@reference "tailwindcss";
+
+.modal-wrapper {
+ @apply fixed top-0 left-0 h-full w-full bg-black/10 backdrop-blur-sm;
+ z-index: 10;
+ overflow-y: auto;
+}
+.modal-content {
+ @apply bg-white rounded-xl mx-auto my-24 w-1/2;
+ position: relative;
+ padding: 2rem;
+ width: fit-content;
+ min-width: 50%;
+}
+.modal-header {
+ display: flex;
+ justify-content: flex-end;
+}
+.modal-close {
+ @apply w-fit text-gray-500;
+}
+.modal-close:hover {
+ @apply text-gray-800 cursor-pointer;
+}
+body:has(.modal-wrapper) {
+ overflow-y: hidden;
+}
diff --git a/builder-frontend/src/components/shared/Modal.tsx b/builder-frontend/src/components/shared/Modal.tsx
new file mode 100644
index 00000000..96dff16f
--- /dev/null
+++ b/builder-frontend/src/components/shared/Modal.tsx
@@ -0,0 +1,36 @@
+import { Accessor, Component, createEffect, ParentProps, Show } from "solid-js";
+import { Portal } from "solid-js/web";
+
+import styles from "./Modal.module.css";
+import { CircleX } from "lucide-solid";
+
+interface Props {
+ show: Accessor;
+ onClose: () => void;
+}
+export const Modal: Component> = (props) => {
+ return (
+
+
+
+
+ );
+};
diff --git a/builder-frontend/src/context/AuthContext.jsx b/builder-frontend/src/context/AuthContext.jsx
deleted file mode 100644
index 3bca567f..00000000
--- a/builder-frontend/src/context/AuthContext.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import {
- createSignal,
- createContext,
- useContext,
- onCleanup,
- onMount,
-} from "solid-js";
-import {
- onAuthStateChanged,
- signOut,
- signInWithEmailAndPassword,
- createUserWithEmailAndPassword,
- signInWithPopup,
- GoogleAuthProvider,
-} from "firebase/auth";
-
-import { auth } from "../firebase/firebase";
-
-const AuthContext = createContext();
-const googleProvider = new GoogleAuthProvider();
-
-export function AuthProvider(props) {
- const [user, setUser] = createSignal("loading");
- const [isAuthLoading, setIsAuthLoading] = createSignal(true);
- let unsubscribe;
-
- onMount(() => {
- unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
- setIsAuthLoading(true);
- setUser(firebaseUser);
- setIsAuthLoading(false);
- });
- });
-
- onCleanup(() => {
- if (unsubscribe) unsubscribe();
- });
-
- const login = async (email, password) => {
- return signInWithEmailAndPassword(auth, email, password);
- };
-
- const register = async (email, password) => {
- return createUserWithEmailAndPassword(auth, email, password);
- };
-
- const loginWithGoogle = async () => {
- try {
- return signInWithPopup(auth, googleProvider);
- } catch (error) {
- console.error("Google sign-in error:", error.message);
- }
- };
-
- const logout = async () => {
- await signOut(auth);
- };
-
- return (
-
- {props.children}
-
- );
-}
-
-export function useAuth() {
- return useContext(AuthContext);
-}
diff --git a/builder-frontend/src/context/AuthContext.tsx b/builder-frontend/src/context/AuthContext.tsx
new file mode 100644
index 00000000..65f31539
--- /dev/null
+++ b/builder-frontend/src/context/AuthContext.tsx
@@ -0,0 +1,91 @@
+import {
+ createSignal,
+ createContext,
+ useContext,
+ onCleanup,
+ onMount,
+ Accessor,
+ ParentProps,
+} from "solid-js";
+import {
+ onAuthStateChanged,
+ signOut,
+ signInWithEmailAndPassword,
+ createUserWithEmailAndPassword,
+ signInWithPopup,
+ GoogleAuthProvider,
+ User,
+ UserCredential,
+ Unsubscribe,
+} from "firebase/auth";
+
+import { auth } from "../firebase/firebase";
+
+type AuthContextValue = {
+ user: Accessor;
+ isAuthLoading: Accessor;
+ login: (email: string, password: string) => Promise;
+ loginWithGoogle: () => Promise;
+ register: (email: string, password: string) => Promise;
+ logout: () => Promise;
+};
+const AuthContext = createContext();
+const googleProvider = new GoogleAuthProvider();
+
+export function AuthProvider(props: ParentProps) {
+ const [user, setUser] = createSignal(null);
+ const [isAuthLoading, setIsAuthLoading] = createSignal(true);
+ let unsubscribe: Unsubscribe | undefined;
+
+ onMount(() => {
+ unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
+ setIsAuthLoading(true);
+ setUser(firebaseUser);
+ setIsAuthLoading(false);
+ });
+ });
+
+ onCleanup(() => {
+ if (unsubscribe) unsubscribe();
+ });
+
+ const login = (email: string, password: string) => {
+ return signInWithEmailAndPassword(auth, email, password);
+ };
+
+ const register = (email: string, password: string) => {
+ return createUserWithEmailAndPassword(auth, email, password);
+ };
+
+ const loginWithGoogle = async () => {
+ return signInWithPopup(auth, googleProvider).catch((error) => {
+ console.error("Google sign-in error:", error.message);
+ return null;
+ });
+ // try {
+ // return signInWithPopup(auth, googleProvider);
+ // } catch (error) {
+ // console.error("Google sign-in error:", error.message);
+ // }
+ };
+
+ const logout = () => signOut(auth);
+
+ return (
+
+ {props.children}
+
+ );
+}
+
+export function useAuth() {
+ const ctx = useContext(AuthContext);
+
+ if (!ctx) {
+ throw new Error("AuthContext must be used within
-
-
-
+
+ Benefit Decision Toolkit
+
+
+
+
+
),
- root
+ root,
);
diff --git a/builder-frontend/src/types.ts b/builder-frontend/src/types.ts
index b4a6a93f..44db9591 100644
--- a/builder-frontend/src/types.ts
+++ b/builder-frontend/src/types.ts
@@ -1,3 +1,14 @@
+export type Project = {
+ id: string;
+ screenerName: string;
+ owner: string;
+ organizationName: null;
+ benefits: BenefitDetail[];
+ formSchema: null;
+ resultsSchema: null;
+ publishedScreenerId: string;
+ lastPublishedDate: Date;
+};
/* Types for managing benefits in a project */
export interface ScreenerBenefits {
benefits: BenefitDetail[];
diff --git a/builder-frontend/tailwind.config.js b/builder-frontend/tailwind.config.js
index 72006dc3..1d0aeb6c 100644
--- a/builder-frontend/tailwind.config.js
+++ b/builder-frontend/tailwind.config.js
@@ -5,8 +5,8 @@ export default {
extend: {},
},
plugins: [
- require('@tailwindcss/forms')({
- strategy: 'class', // only apply styles when using form-* classes
+ require("@tailwindcss/forms")({
+ strategy: "class", // only apply styles when using form-* classes
}),
],
-}
+};
diff --git a/builder-frontend/tsconfig.json b/builder-frontend/tsconfig.json
index d5e8cbe6..3c78901e 100644
--- a/builder-frontend/tsconfig.json
+++ b/builder-frontend/tsconfig.json
@@ -1,24 +1,30 @@
{
"compilerOptions": {
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
- "outDir": "dist",
+ /* Language and Environment */
"target": "es5",
- "module": "esnext",
- "types": ["vite/client"],
+ "lib": ["dom", "dom.iterable", "esnext"],
"jsx": "preserve",
"jsxImportSource": "solid-js",
- "allowJs": true,
- "allowSyntheticDefaultImports": true,
+
+ /* Modules */
+ "module": "esnext",
"moduleResolution": "node",
"paths": {
- "@/*": ["./src/*"],
- }
+ "@/*": ["./src/*"]
+ },
+ "types": ["vite/client"],
+
+ /* JavaScript Support */
+ "allowJs": true,
+
+ /* Emit */
+ "outDir": "dist",
+
+ /* Interop Constraints */
+ "allowSyntheticDefaultImports": true,
+
+ /* Type Checking */
+ "strict": true
},
- "include": [
- "src"
- ]
+ "include": ["src/**/*"]
}
diff --git a/builder-frontend/vite.config.js b/builder-frontend/vite.config.js
index ed314820..7322ee63 100644
--- a/builder-frontend/vite.config.js
+++ b/builder-frontend/vite.config.js
@@ -1,10 +1,21 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
import solid from "vite-plugin-solid";
-import tsconfigPaths from 'vite-tsconfig-paths'
+import tsconfigPaths from "vite-tsconfig-paths";
-export default defineConfig({
- plugins: [solid(), tsconfigPaths()],
- server: {
- port: process.env.DEV_SERVER_PORT || 5173
- }
+export default defineConfig(({ mode }) => {
+ // Load variables from .env before vite.config.js finishes running
+ const env = loadEnv(mode, process.cwd(), "");
+ return {
+ plugins: [solid(), tsconfigPaths()],
+ server: {
+ port: process.env.DEV_SERVER_PORT || 5173,
+ // Proxy to connect to backend
+ // https://vite.dev/config/server-options#server-proxy
+ proxy: {
+ "/api": {
+ target: env.VITE_API_URL || "http://localhost:8081",
+ },
+ },
+ },
+ };
});
+ {props.items.map(({ label, href }) => (
+
+ {label}
+
+ ))}
+
+ );
+};
+
+export default ANavBar;
diff --git a/builder-frontend/src/components/shared/Button.module.css b/builder-frontend/src/components/shared/Button.module.css
new file mode 100644
index 00000000..f3bd2191
--- /dev/null
+++ b/builder-frontend/src/components/shared/Button.module.css
@@ -0,0 +1,45 @@
+@reference "tailwindcss";
+
+.button {
+ @apply inline-flex py-1.5 px-4 rounded border-2 disabled:opacity-50;
+}
+
+.primary {
+ @apply border-(--brand) bg-(--brand) text-white;
+}
+.primary:not([disabled]):hover {
+ @apply brightness-110;
+}
+.outline-primary {
+ @apply border-(--brand) bg-white text-(--brand);
+}
+.outline-primary:not([disabled]):hover {
+ @apply border-(--brand)/70 bg-(--brand)/30;
+}
+
+.secondary {
+ @apply border-(--text-strong) bg-(--text-strong) text-white;
+}
+.secondary:not([disabled]):hover {
+ @apply brightness-130;
+}
+.outline-secondary {
+ @apply border-(--text-strong) bg-white text-(--text-strong);
+}
+.outline-secondary:not([disabled]):hover {
+ @apply border-(--text-strong)/70 bg-(--text-strong)/30;
+}
+
+.tertiary {
+ @apply border-(--text-strong) bg-(--text-strong) text-white;
+}
+
+.danger {
+ @apply border-red-400 bg-red-400 text-white;
+}
+.outline-danger {
+ @apply border-red-400 bg-white text-red-400;
+}
+.outline-danger:not([disabled]):hover {
+ @apply bg-red-100;
+}
diff --git a/builder-frontend/src/components/shared/Button.tsx b/builder-frontend/src/components/shared/Button.tsx
new file mode 100644
index 00000000..654f1a87
--- /dev/null
+++ b/builder-frontend/src/components/shared/Button.tsx
@@ -0,0 +1,28 @@
+import { Component, JSX, ParentProps } from "solid-js";
+
+import styles from "./Button.module.css";
+
+interface Props extends JSX.ButtonHTMLAttributes props.onClose()}>
+
+
+