@olenbetong/synergi-react 2.3.1 → 2.3.3

package/es/elements/ElementDamage/DescriptionInput.d.ts

@@ -7,8 +7,10 @@ export type DescriptionInputType = {
 type DescriptionInputProps = {
     value?: DescriptionInputType | null;
     defaultValue?: DescriptionInputType | null;
+    descriptionOptions?: string[];
+    storageNamespace?: string;
     onCopyPrevDamage?: (value: DescriptionInputType) => void;
     onChange?: (value: DescriptionInputType) => void;
 };
-export declare function DescriptionInput({ value, defaultValue, onCopyPrevDamage, onChange }: DescriptionInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function DescriptionInput({ value, defaultValue, descriptionOptions, storageNamespace, onCopyPrevDamage, onChange, }: DescriptionInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/es/elements/ElementDamage/DescriptionInput.js

@@ -2,11 +2,15 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Autocomplete, Button, TextField } from "@mui/material";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useEffect, useRef, useState } from "react";
-export function DescriptionInput({ value, defaultValue, onCopyPrevDamage, onChange }) {
+export function DescriptionInput({ value, defaultValue, descriptionOptions = [
+    getLocalizedString("Tear in element"),
+    getLocalizedString("Damage around lifting anchor"),
+    getLocalizedString("Damage on underside"),
+], storageNamespace = "ElementDamage", onCopyPrevDamage, onChange, }) {
     let initializedRef = useRef(false);
     let [input, setInput] = useState(defaultValue ?? null);
     let inputValue = value === undefined ? input : value;
-    // biome-ignore lint: intentionally skipping "value" dependency as this should never run when "value" changes
+    // biome-ignore lint: intentionally skipping "value" dependency as this shouldn't run when "value" changes
     useEffect(() => {
         if (initializedRef.current) {
             return;
@@ -17,9 +21,9 @@ export function DescriptionInput({ value, defaultValue, onCopyPrevDamage, onChan
         }
     }, [defaultValue]);
     function handleCopyPrevDamage() {
-        let description = localStorage.getItem("ElementDamage_Description") ?? "";
-        let cause = localStorage.getItem("ElementDamage_Cause") ?? "";
-        let action = localStorage.getItem("ElementDamage_Action") ?? "";
+        let description = localStorage.getItem(`${storageNamespace}_Description`) ?? "";
+        let cause = localStorage.getItem(`${storageNamespace}_Cause`) ?? "";
+        let action = localStorage.getItem(`${storageNamespace}_Action`) ?? "";
         onCopyPrevDamage?.({
             Description: description,
             Cause: cause,
@@ -36,9 +40,5 @@ export function DescriptionInput({ value, defaultValue, onCopyPrevDamage, onChan
         onChange?.(value);
         setInput(value);
     }
-    return (_jsxs(_Fragment, { children: [_jsx(TextField, { name: "Date", type: "date", value: (inputValue?.Date ?? new Date()).toISOString().split("T")[0], onChange: (event) => handleOnChange({ ...inputValue, Date: new Date(event.target.value) }), id: "NewElementDamage_Date", label: getLocalizedString("Date"), fullWidth: true, required: true, slotProps: { inputLabel: { shrink: true } } }), _jsx(Button, { variant: "contained", onClick: handleCopyPrevDamage, children: getLocalizedString("Copy previous damage") }), _jsx(Autocomplete, { value: inputValue?.Description ?? "", onChange: (_event, value) => handleOnChange({ ...inputValue, Description: value ?? "" }), options: [
-                    getLocalizedString("Tear in element"),
-                    getLocalizedString("Damage around lifting anchor"),
-                    getLocalizedString("Damage on underside"),
-                ], freeSolo: true, renderInput: (params) => (_jsx(TextField, { name: "Description", required: true, ...params, label: getLocalizedString("Description") })) }), _jsx(TextField, { name: "Cause", id: "NewElementDamage_Cause", value: inputValue?.Cause ?? "", onChange: (event) => handleOnChange({ ...inputValue, Cause: event.currentTarget.value }), label: getLocalizedString("Cause"), fullWidth: true }), _jsx(TextField, { name: "Action", id: "NewElementDamage_Action", value: inputValue?.Action ?? "", onChange: (event) => handleOnChange({ ...inputValue, Action: event.currentTarget.value }), label: getLocalizedString("Action"), fullWidth: true })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(TextField, { name: "Date", type: "date", value: (inputValue?.Date ?? new Date()).toISOString().split("T")[0], onChange: (event) => handleOnChange({ ...inputValue, Date: new Date(event.target.value) }), id: "NewElementDamage_Date", label: getLocalizedString("Date"), fullWidth: true, required: true, slotProps: { inputLabel: { shrink: true } } }), _jsx(Button, { variant: "contained", onClick: handleCopyPrevDamage, children: getLocalizedString("Copy previous damage") }), _jsx(Autocomplete, { value: inputValue?.Description ?? "", onChange: (_event, value) => handleOnChange({ ...inputValue, Description: value ?? "" }), options: descriptionOptions, freeSolo: true, renderInput: (params) => (_jsx(TextField, { name: "Description", required: true, ...params, label: getLocalizedString("Description") })) }), _jsx(TextField, { name: "Cause", id: "NewElementDamage_Cause", value: inputValue?.Cause ?? "", onChange: (event) => handleOnChange({ ...inputValue, Cause: event.currentTarget.value }), label: getLocalizedString("Cause"), fullWidth: true }), _jsx(TextField, { name: "Action", id: "NewElementDamage_Action", value: inputValue?.Action ?? "", onChange: (event) => handleOnChange({ ...inputValue, Action: event.currentTarget.value }), label: getLocalizedString("Action"), fullWidth: true })] }));
 }

package/es/elements/ElementDamage/DuplicateDamage/DesktopView.d.ts

@@ -1,7 +1,8 @@
 import type { DamagesRecord } from "../../data";
 type ElementDamagesItemProps = {
     record: DamagesRecord;
+    linkToDamage: boolean;
 };
-export declare function ElementDamagesItem({ record }: ElementDamagesItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementDamagesItem({ record, linkToDamage }: ElementDamagesItemProps): import("react/jsx-runtime").JSX.Element;
 export declare function ElementDamagesHeader(): import("react/jsx-runtime").JSX.Element;
 export {};

package/es/elements/ElementDamage/DuplicateDamage/DesktopView.js

@@ -5,11 +5,11 @@ import { Link } from "@olenbetong/appframe-mui";
 function SummaryItem({ col, label, children, em, align, padding }) {
     return (_jsxs(Grid, { size: col, sx: { p: padding ?? 2, borderBottom: (t) => `1px solid ${t.palette.divider}` }, children: [label && (_jsx(Typography, { variant: "body1", fontSize: "0.9rem", fontWeight: 500, mb: 1, textAlign: align, children: getLocalizedString(label) })), children && (_jsx(Typography, { fontSize: em ? "1.4rem" : "0.9rem", whiteSpace: "pre-line", fontWeight: em ? 600 : undefined, textAlign: align, children: children }))] }));
 }
-export function ElementDamagesItem({ record }) {
-    return (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { col: 1.5, children: _jsx(Link, { href: "#", onClick: (e) => {
+export function ElementDamagesItem({ record, linkToDamage }) {
+    return (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { col: 1.5, children: linkToDamage ? (_jsx(Link, { href: "#", onClick: (e) => {
                         e.preventDefault();
                         window.location.href = `${record.ID}`;
-                    }, children: record.ID }) }), _jsx(SummaryItem, { col: 2.5, align: "right", children: record.Date.toISOString().split("T")[0] }), _jsx(SummaryItem, { col: 3, children: record.Description }), _jsx(SummaryItem, { col: 2.5, children: record.Cause }), _jsx(SummaryItem, { col: 2.5, children: record.Action })] }));
+                    }, children: record.ID })) : (_jsx("span", { children: record.ID })) }), _jsx(SummaryItem, { col: 2.5, align: "right", children: record.Date.toISOString().split("T")[0] }), _jsx(SummaryItem, { col: 3, children: record.Description }), _jsx(SummaryItem, { col: 2.5, children: record.Cause }), _jsx(SummaryItem, { col: 2.5, children: record.Action })] }));
 }
 export function ElementDamagesHeader() {
     return (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { col: 1.5, label: "ID" }), _jsx(SummaryItem, { col: 2.5, label: "Date", align: "right" }), _jsx(SummaryItem, { col: 3, label: "Description" }), _jsx(SummaryItem, { col: 2.5, label: "Cause" }), _jsx(SummaryItem, { col: 2.5, label: "Action" })] }));

package/es/elements/ElementDamage/DuplicateDamage/DublicateElementDamageDialog.d.ts

@@ -5,6 +5,7 @@ type DuplicateElementDamageDialogProps = {
     record: DamagesRecord[];
     onRegisterAnyway: () => void;
     loading: boolean;
+    linkToDamage: boolean;
 };
-export declare function DuplicateElementDamageDialog({ open, onClose, record, onRegisterAnyway, loading, }: DuplicateElementDamageDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function DuplicateElementDamageDialog({ open, onClose, record, onRegisterAnyway, loading, linkToDamage, }: DuplicateElementDamageDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/es/elements/ElementDamage/DuplicateDamage/DublicateElementDamageDialog.js

@@ -5,8 +5,8 @@ import { getLocalizedString } from "@olenbetong/appframe-core";
 import { theme } from "@olenbetong/appframe-mui";
 import { ElementDamagesHeader, ElementDamagesItem } from "./DesktopView";
 import { DuplicatePhoneViewItem } from "./PhoneView";
-export function DuplicateElementDamageDialog({ open, onClose, record, onRegisterAnyway, loading, }) {
+export function DuplicateElementDamageDialog({ open, onClose, record, onRegisterAnyway, loading, linkToDamage, }) {
     let matches = useMediaQuery(theme.breakpoints.up("lg"));
     let backgroundColor = "#e9ebee";
-    return (_jsxs(Dialog, { open: open, onClose: onClose, fullWidth: true, fullScreen: !matches, children: [_jsx(DialogTitle, { sx: { backgroundColor: backgroundColor }, children: getLocalizedString("This element has one or more unfixed registered damage") }), _jsx(DialogContent, { sx: { backgroundColor: backgroundColor }, children: _jsx(Grid, { container: true, children: matches ? (_jsxs(_Fragment, { children: [_jsx(ElementDamagesHeader, {}), record.map((record) => (_jsx(ElementDamagesItem, { record: record }, record.PrimKey)))] })) : (_jsx("div", { className: "flow", style: { width: "100%" }, children: record.map((record) => (_jsx(DuplicatePhoneViewItem, { record: record }, record.PrimKey))) })) }) }), _jsxs(DialogActions, { sx: { backgroundColor: backgroundColor }, children: [_jsx(Button, { onClick: onClose, children: getLocalizedString("Cancel") }), _jsx(Button, { startIcon: _jsx(Add, {}), variant: "contained", type: "submit", onClick: onRegisterAnyway, loading: loading, loadingPosition: "start", children: getLocalizedString("Register damage anyway") })] })] }));
+    return (_jsxs(Dialog, { open: open, onClose: onClose, fullWidth: true, fullScreen: !matches, children: [_jsx(DialogTitle, { sx: { backgroundColor: backgroundColor }, children: getLocalizedString("This element has one or more unfixed registered damage") }), _jsx(DialogContent, { sx: { backgroundColor: backgroundColor }, children: _jsx(Grid, { container: true, children: matches ? (_jsxs(_Fragment, { children: [_jsx(ElementDamagesHeader, {}), record.map((record) => (_jsx(ElementDamagesItem, { record: record, linkToDamage: linkToDamage }, record.PrimKey)))] })) : (_jsx("div", { className: "flow", style: { width: "100%" }, children: record.map((record) => (_jsx(DuplicatePhoneViewItem, { record: record, linkToDamage: linkToDamage }, record.PrimKey))) })) }) }), _jsxs(DialogActions, { sx: { backgroundColor: backgroundColor }, children: [_jsx(Button, { onClick: onClose, children: getLocalizedString("Cancel") }), _jsx(Button, { startIcon: _jsx(Add, {}), variant: "contained", type: "submit", onClick: onRegisterAnyway, loading: loading, loadingPosition: "start", children: getLocalizedString("Register damage anyway") })] })] }));
 }

package/es/elements/ElementDamage/DuplicateDamage/PhoneView.d.ts

@@ -1,6 +1,7 @@
 import type { DamagesRecord } from "../../data";
 type DuplicatePhoneViewItemProps = {
     record: DamagesRecord;
+    linkToDamage: boolean;
 };
-export declare function DuplicatePhoneViewItem({ record }: DuplicatePhoneViewItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DuplicatePhoneViewItem({ record, linkToDamage }: DuplicatePhoneViewItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/es/elements/ElementDamage/DuplicateDamage/PhoneView.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardContent, Typography } from "@mui/material";
 import { getLocalizedString } from "@olenbetong/appframe-core";
-export function DuplicatePhoneViewItem({ record }) {
+export function DuplicatePhoneViewItem({ record, linkToDamage }) {
     return (_jsx(Card, { variant: "outlined", onClick: () => {
-            window.location.href = `${record.ID}`;
+            if (linkToDamage) {
+                window.location.href = `${record.ID}`;
+            }
         }, children: _jsxs(CardContent, { children: [_jsx(Typography, { sx: { fontSize: 14 }, color: "text.secondary", gutterBottom: true, children: record.Date.toLocaleDateString() }), _jsxs(Typography, { variant: "h5", mb: 1.5, children: [record.ElementID, " - ", record.DisplayName] }), _jsxs(Typography, { children: [getLocalizedString("Description"), ":"] }), _jsx(Typography, { mb: 1.5, color: "text.secondary", children: record.Description }), _jsxs(Typography, { children: [getLocalizedString("Cause"), ": "] }), _jsx(Typography, { mb: 1.5, color: "text.secondary", children: record.Cause }), _jsxs(Typography, { children: [getLocalizedString("Action"), ": "] }), _jsx(Typography, { mb: 1.5, color: "text.secondary", children: record.Action })] }) }));
 }

package/es/elements/ElementDamage/DuplicateDamage/index.d.ts

@@ -21,6 +21,10 @@ type DuplicateElementDamageProps = {
      * Loading state for submit button
      */
     loading?: boolean;
+    /**
+     * Indicate if a link to the element damage form should be used
+     */
+    linkToDamage?: boolean;
     /**
      * Called when duplicate or duplicates are found
      * @param record Array with all of the duplicate damages

package/es/elements/ElementDamage/DuplicateDamage/index.js

@@ -4,7 +4,7 @@ import { forwardRef, useImperativeHandle, useMemo, useState } from "react";
 import { dsDamagesDuplicateCheck } from "../../data";
 import { DuplicateElementDamageDialog } from "./DublicateElementDamageDialog";
 export { DuplicateElementDamageDialog } from "./DublicateElementDamageDialog";
-export const DuplicateElementDamage = forwardRef(function DuplicateElementDamage({ element, open: controlledOpen, onOpenChange, disableCheck = false, loading = false, onRegisterAnyway, }, ref) {
+export const DuplicateElementDamage = forwardRef(function DuplicateElementDamage({ element, open: controlledOpen, onOpenChange, disableCheck = false, loading = false, linkToDamage = true, onRegisterAnyway, }, ref) {
     let [record, setRecord] = useState([]);
     let [uncontrolledOpen, setUncontrolledOpen] = useState(false);
     let open = controlledOpen === undefined ? uncontrolledOpen : controlledOpen;
@@ -36,5 +36,8 @@ export const DuplicateElementDamage = forwardRef(function DuplicateElementDamage
         checkDuplicate: () => runDuplicateCheck(),
         record: record,
     }));
-    return (_jsx(DuplicateElementDamageDialog, { open: open, onClose: () => handleOpenChange(false), record: record, onRegisterAnyway: onRegisterAnyway ?? (() => { }), loading: loading ?? false }));
+    return (_jsx(DuplicateElementDamageDialog, { open: open, onClose: () => {
+            setRecord([]);
+            handleOpenChange(false);
+        }, record: record, onRegisterAnyway: onRegisterAnyway ?? (() => { }), loading: loading ?? false, linkToDamage: linkToDamage }));
 });

package/es/elements/ElementLookup.d.ts

@@ -14,7 +14,9 @@ export type ElementLookupProps = {
     value?: Element | null;
     defaultValue?: Element | null;
     ref?: RefObject<ElementLookupHandle | null>;
+    elementIDRequired?: boolean;
     openLookupDialogIcon?: boolean;
     onChange?: (value: Element | null) => void;
+    onDialogChange?: (open: boolean) => void;
 };
-export declare function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon, onChange }: ElementLookupProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementLookup({ value, defaultValue, ref, elementIDRequired, openLookupDialogIcon, onChange, onDialogChange, }: ElementLookupProps): import("react/jsx-runtime").JSX.Element;

package/es/elements/ElementLookup.js

@@ -2,17 +2,23 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import SearchIcon from "@mui/icons-material/Search";
 import { IconButton, TextField } from "@mui/material";
 import { getLocalizedString } from "@olenbetong/appframe-core";
-import { useEffect, useImperativeHandle, useState } from "react";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
 import { ElementLookupDialog } from "./ElementLookupDialog";
-export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon, onChange }) {
+export function ElementLookup({ value, defaultValue, ref, elementIDRequired = false, openLookupDialogIcon, onChange, onDialogChange, }) {
+    let initializedRef = useRef(false);
     let [openElementLookupDialog, setOpenElementLookupDialog] = useState(false);
     let [element, setElement] = useState(defaultValue ?? null);
     let elementValue = value === undefined ? element : value;
+    // biome-ignore lint: intentionally skipping "value" dependency as this shouldn't run when "value" changes
     useEffect(() => {
+        if (initializedRef.current) {
+            return;
+        }
         if (value === undefined && defaultValue) {
             setElement(defaultValue);
+            initializedRef.current = true;
         }
-    }, [defaultValue, value]);
+    }, [defaultValue]);
     useImperativeHandle(ref, () => ({
         openDialog: () => setOpenElementLookupDialog(true),
         closeDialog: () => setOpenElementLookupDialog(false),
@@ -21,10 +27,15 @@ export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon,
         onChange?.(addElement.element);
         setElement(addElement.element);
     }
-    return (_jsxs(_Fragment, { children: [_jsx(ElementLookupDialog, { open: openElementLookupDialog, mode: "single", onClose: () => setOpenElementLookupDialog(false), onAdd: handleAddElement }), _jsx("input", { type: "hidden", name: "ProjectID", value: elementValue?.ProjectID ?? "" }), _jsx("input", { type: "hidden", name: "ElementRef", value: elementValue?.PrimKey ?? "" }), _jsx(TextField, { id: "NewElementDamge_Project", value: elementValue ? `${elementValue.ProjectID}: ${elementValue.ProjectName}` : "", label: getLocalizedString("Project"), fullWidth: true, required: true, autoComplete: "off", slotProps: { htmlInput: { readOnly: true } } }), _jsx(TextField, { name: "ElementID", id: "NewElementDamage_ElementID", value: elementValue ? elementValue.ElementID : "", label: getLocalizedString("Element ID"), fullWidth: true, autoComplete: "off", slotProps: {
+    // biome-ignore lint: only run when openElementLookupDialog changes
+    useEffect(() => {
+        onDialogChange?.(openElementLookupDialog);
+    }, [openElementLookupDialog]);
+    return (_jsxs(_Fragment, { children: [_jsx(ElementLookupDialog, { open: openElementLookupDialog, mode: "single", onClose: () => setOpenElementLookupDialog(false), onAdd: handleAddElement, allowEmptyElement: !elementIDRequired }), _jsx("input", { type: "hidden", name: "ProjectID", value: elementValue?.ProjectID ?? "" }), _jsx("input", { type: "hidden", name: "ElementRef", value: elementValue?.PrimKey ?? "" }), _jsx(TextField, { id: "NewElementDamge_Project", value: elementValue ? `${elementValue.ProjectID}: ${elementValue.ProjectName}` : "", label: getLocalizedString("Project"), fullWidth: true, required: true, autoComplete: "off", slotProps: { htmlInput: { readOnly: true } } }), _jsx(TextField, { name: "ElementID", id: "NewElementDamage_ElementID", value: elementValue ? elementValue.ElementID : "", label: getLocalizedString("Element ID"), fullWidth: true, required: elementIDRequired, autoComplete: "off", slotProps: {
                     htmlInput: { readOnly: true },
                     input: {
                         endAdornment: openLookupDialogIcon ? (_jsx(IconButton, { onClick: () => setOpenElementLookupDialog(true), children: _jsx(SearchIcon, {}) })) : undefined,
                     },
+                    inputLabel: { shrink: !!elementValue?.ElementID },
                 } })] }));
 }

package/es/elements/ElementLookupDialog/Manual/ManualForm.d.ts

@@ -8,5 +8,6 @@ export type AddElementManualFormProps = {
     onAdd: (element: string | ElementDetails) => Promise<void>;
     mode?: "single" | "multi";
     defaultProject?: ProjectRecordBase;
+    allowEmptyElement?: boolean;
 };
-export declare function AddElementManualForm({ onAdd, mode, defaultProject }: AddElementManualFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function AddElementManualForm({ onAdd, mode, defaultProject, allowEmptyElement, }: AddElementManualFormProps): import("react/jsx-runtime").JSX.Element;

package/es/elements/ElementLookupDialog/Manual/ManualForm.js

@@ -7,7 +7,7 @@ import { ProjectSelect } from "../../ProjectSelect";
 import { getElement } from "../getElement";
 const isElementsOnly = /^([a-z]{2,4}[\s]*[0-9]{4,8}[\s,]*)+$/i;
 const matchElements = /([a-z]{2,4}[\s]*[0-9]{4,8})/gi;
-export function AddElementManualForm({ onAdd, mode, defaultProject }) {
+export function AddElementManualForm({ onAdd, mode, defaultProject, allowEmptyElement = false, }) {
     let id = useId();
     let buttonRef = useRef(null);
     let [working, setWorking] = useState(false);
@@ -20,29 +20,52 @@ export function AddElementManualForm({ onAdd, mode, defaultProject }) {
             let formData = new FormData(evt.target);
             let elements = formData.get("ElementID");
             let domain = formData.get("Domain");
-            let projectId = formData.get("ProjectID");
-            if (!projectId || !domain || !elements) {
-                let warning = getLocalizedString(mode === "multi" ? "Project and elements are required" : "Project and element are required");
-                alert(warning);
-                return;
+            let project = JSON.parse(formData.get("Project"));
+            if (allowEmptyElement) {
+                if (!project.ProjectID) {
+                    alert(getLocalizedString("Project is required"));
+                    return;
+                }
             }
-            setWorking(true);
-            let record = elements
-                .match(matchElements)
-                ?.map((elementId) => elementId.replace(/\s+/g, ""))
-                .map((elementId) => getElement({ projectId: projectId, elementId: elementId }, { mode: "manual" }));
-            if (!record) {
-                alert(getLocalizedString("Invalid elements"));
-                return;
+            else {
+                if (!project.ProjectID || !domain || !elements) {
+                    let warning = getLocalizedString(mode === "multi" ? "Project and elements are required" : "Project and element are required");
+                    alert(warning);
+                    return;
+                }
+            }
+            if (elements) {
+                setWorking(true);
+                let record = elements
+                    .match(matchElements)
+                    ?.map((elementId) => elementId.replace(/\s+/g, ""))
+                    .map((elementId) => getElement({ projectId: project.ProjectID, elementId: elementId }, { mode: "manual" }));
+                if (!record) {
+                    alert(getLocalizedString("Invalid elements"));
+                    return;
+                }
+                let loaded = (await Promise.all(record)).map((record) => onAdd(record));
+                await Promise.all(loaded);
+                setWorking(false);
+            }
+            else {
+                onAdd({
+                    PrimKey: "",
+                    Domain: domain?.toString() ?? "",
+                    Created: project?.Created,
+                    ProjectID: project.ProjectID,
+                    ProjectName: project.ProjectName,
+                    ProjectDomain: project.Domain,
+                    ElementID: "",
+                    DisplayName: "",
+                    GiaiUri: "",
+                });
             }
-            let loaded = (await Promise.all(record)).map((record) => onAdd(record));
-            await Promise.all(loaded);
-            setWorking(false);
         }
         catch (error) {
             setWorking(false);
             alert(error.message);
         }
     }
-    return (_jsxs("form", { id: id, onSubmit: handleSubmit, method: "post", children: [_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: getLocalizedString("Manually entering elements is a major source of errors. Only use this as a last resort. If the camera or scanner is not working, please contact the IT department.") }), _jsx(ProjectSelect, { onChange: (project) => (project ? setProject(project) : setProject(null)), value: project, id: "AddElement_Project" }), _jsx(TextField, { variant: "filled", fullWidth: true, autoComplete: "off", margin: "normal", name: "ElementID", id: "AddElement_ElementID", label: getLocalizedString("Element ID"), value: elementId, onChange: (evt) => setElementId(evt.target.value) }), _jsx(Button, { form: id, ref: buttonRef, color: "primary", variant: "contained", size: "large", type: "submit", disabled: !isElementsOnly.test(elementId) || working, loading: working, loadingPosition: "end", endIcon: _jsx(Add, {}), children: getLocalizedString("Add") })] }));
+    return (_jsxs("form", { id: id, onSubmit: handleSubmit, method: "post", children: [_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: getLocalizedString("Manually entering elements is a major source of errors. Only use this as a last resort. If the camera or scanner is not working, please contact the IT department.") }), _jsx("input", { type: "hidden", name: "Project", value: project ? JSON.stringify(project) : "" }), _jsx(ProjectSelect, { onChange: (project) => (project ? setProject(project) : setProject(null)), value: project, id: "AddElement_Project" }), _jsx(TextField, { variant: "filled", fullWidth: true, autoComplete: "off", margin: "normal", name: "ElementID", id: "AddElement_ElementID", label: getLocalizedString("Element ID"), value: elementId, onChange: (evt) => setElementId(evt.target.value) }), _jsx(Button, { form: id, ref: buttonRef, color: "primary", variant: "contained", size: "large", type: "submit", disabled: (!allowEmptyElement && !isElementsOnly.test(elementId)) || working, loading: working, loadingPosition: "end", endIcon: _jsx(Add, {}), children: getLocalizedString("Add") })] }));
 }

package/es/elements/ElementLookupDialog/index.d.ts

@@ -10,6 +10,7 @@ export type ElementLookupDialogSharedProps = {
     onClose: () => void;
     initialTab?: InitialTabProps | null;
     useSearch?: boolean;
+    allowEmptyElement?: boolean;
 };
 export type ElementLookupDialogSingleModeProps = ElementLookupDialogSharedProps & {
     mode: "single" | "search";

package/es/elements/ElementLookupDialog/index.js

@@ -72,11 +72,11 @@ export function ElementLookupDialog(props) {
     }
     return (_jsx(ResponsiveDialog, { open: open, onClose: onClose, slotProps: {
             paper: { sx: { overflow: "hidden" } },
-        }, children: _jsxs(Box, { display: "flex", flexDirection: "column", maxHeight: "100%", overflow: "hidden", flexGrow: 1, children: [_jsxs(Tabs, { value: tab, onChange: (_, newTab) => setTab(newTab), variant: "fullWidth", sx: { flexShrink: 0 }, children: [props.mode !== "search" && _jsx(Tab, { icon: _jsx(Edit, {}), label: getLocalizedString("Manual"), value: "manual" }), _jsx(Tab, { icon: _jsx(TapAndPlay, {}), label: getLocalizedString("Scanner"), value: "scanner" }), _jsx(Tab, { icon: _jsx(QrCodeScanner, {}), label: getLocalizedString("Camera"), value: "camera" })] }), tab === "camera" && (_jsx(Box, { flexBasis: "12rem", flexGrow: 1, flexShrink: 2, children: _jsx(BarcodeScanner, { onRead: (element) => handleElementAdd(element, "camera-barcode") }) })), tab === "manual" && (_jsx(Box, { p: 2, children: _jsx(AddElementManualForm, { onAdd: (element) => handleElementAdd(element, "manual") }) })), tab === "scanner" && (_jsx(Box, { flexBasis: "12rem", flexGrow: 1, flexShrink: 2, children: _jsx(AddElementHIDScanner, { onScan: (element) => handleElementAdd(element, element.startsWith(Giai.BARCODE_PREFIX) ? "hid-barcode" : "hid-rfid") }) })), _jsxs(Box, { flex: "3 1 14rem", overflow: "auto", children: [props.mode === "multi" && (_jsx(Alert, { icon: false, severity: "info", sx: { justifyContent: "center", py: 0, position: "sticky", top: 0, zIndex: 1 }, slotProps: {
+        }, children: _jsxs(Box, { display: "flex", flexDirection: "column", maxHeight: "100%", overflow: "hidden", flexGrow: 1, children: [_jsxs(Tabs, { value: tab, onChange: (_, newTab) => setTab(newTab), variant: "fullWidth", sx: { flexShrink: 0 }, children: [props.mode !== "search" && _jsx(Tab, { icon: _jsx(Edit, {}), label: getLocalizedString("Manual"), value: "manual" }), _jsx(Tab, { icon: _jsx(TapAndPlay, {}), label: getLocalizedString("Scanner"), value: "scanner" }), _jsx(Tab, { icon: _jsx(QrCodeScanner, {}), label: getLocalizedString("Camera"), value: "camera" })] }), tab === "camera" && (_jsx(Box, { flexBasis: "12rem", flexGrow: 1, flexShrink: 2, children: _jsx(BarcodeScanner, { onRead: (element) => handleElementAdd(element, "camera-barcode") }) })), tab === "manual" && (_jsx(Box, { p: 2, children: _jsx(AddElementManualForm, { onAdd: (element) => handleElementAdd(element, "manual"), allowEmptyElement: props.allowEmptyElement }) })), tab === "scanner" && (_jsx(Box, { flexBasis: "12rem", flexGrow: 1, flexShrink: 2, children: _jsx(AddElementHIDScanner, { onScan: (element) => handleElementAdd(element, element.startsWith(Giai.BARCODE_PREFIX) ? "hid-barcode" : "hid-rfid") }) })), _jsxs(Box, { flex: "3 1 14rem", overflow: "auto", children: [props.mode === "multi" && (_jsx(Alert, { icon: false, severity: "info", sx: { justifyContent: "center", py: 0, position: "sticky", top: 0, zIndex: 1 }, slotProps: {
                                 message: { sx: { py: 0.5 } },
                             }, children: localize `${elements.length} elements selected` })), _jsx(List, { disablePadding: true, children: elements.map(({ element }) => (_jsx(ListItem, { "data-elementid": element.ElementID, secondaryAction: _jsx(Button, { color: "error", variant: "outlined", onClick: () => {
                                         setElements((current) => props.mode === "multi" ? current.filter((e) => e.element.ElementID !== element.ElementID) : []);
-                                    }, children: _jsx(DeleteForeverOutlined, {}) }), children: _jsx(ListItemText, { primary: element.DisplayName, secondary: element.ElementID }) }, element.ElementID))) })] }), _jsxs(DialogActions, { sx: { flexShrink: 0 }, children: [_jsx(Button, { onClick: onClose, children: getLocalizedString("Cancel") }), _jsx(Button, { variant: "contained", loading: adding, onClick: async () => {
+                                    }, children: _jsx(DeleteForeverOutlined, {}) }), children: _jsx(ListItemText, { primary: element.DisplayName || element.ProjectName, secondary: element.ElementID || element.ProjectID }) }, element.ElementID))) })] }), _jsxs(DialogActions, { sx: { flexShrink: 0 }, children: [_jsx(Button, { onClick: onClose, children: getLocalizedString("Cancel") }), _jsx(Button, { variant: "contained", loading: adding, onClick: async () => {
                                 try {
                                     setAdding(true);
                                     if (props.mode === "multi") {

package/es/elements/index.d.ts

@@ -7,3 +7,4 @@ export * from "./ElementDamage/RegisterFix.js";
 export * from "./ElementDamage/SubmitButtons.js";
 export * from "./ElementLookup.js";
 export * from "./ElementLookupDialog/index.js";
+export * from "./ProjectSelect.js";

package/es/elements/index.js

@@ -7,3 +7,4 @@ export * from "./ElementDamage/RegisterFix.js";
 export * from "./ElementDamage/SubmitButtons.js";
 export * from "./ElementLookup.js";
 export * from "./ElementLookupDialog/index.js";
+export * from "./ProjectSelect.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/synergi-react",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "description": "Standalone React component for SynergiWeb and Partner Portal",
   "type": "module",
   "exports": {
@@ -38,7 +38,9 @@
     "filepond-plugin-image-transform": "^3.8.7",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
-    "@olenbetong/appframe-core": "2.11.10"
+    "@olenbetong/appframe-core": "2.11.10",
+    "@olenbetong/appframe-mui": "6.0.7",
+    "@olenbetong/appframe-react": "1.21.21"
   },
   "repository": {
     "type": "git",

package/src/elements/ElementDamage/DescriptionInput.tsx

@@ -12,17 +12,30 @@ export type DescriptionInputType = {
 type DescriptionInputProps = {
 	value?: DescriptionInputType | null;
 	defaultValue?: DescriptionInputType | null;
+	descriptionOptions?: string[];
+	storageNamespace?: string;
 	onCopyPrevDamage?: (value: DescriptionInputType) => void;
 	onChange?: (value: DescriptionInputType) => void;
 };
 
-export function DescriptionInput({ value, defaultValue, onCopyPrevDamage, onChange }: DescriptionInputProps) {
+export function DescriptionInput({
+	value,
+	defaultValue,
+	descriptionOptions = [
+		getLocalizedString("Tear in element"),
+		getLocalizedString("Damage around lifting anchor"),
+		getLocalizedString("Damage on underside"),
+	],
+	storageNamespace = "ElementDamage",
+	onCopyPrevDamage,
+	onChange,
+}: DescriptionInputProps) {
 	let initializedRef = useRef<boolean>(false);
 
 	let [input, setInput] = useState<DescriptionInputType | null>(defaultValue ?? null);
 	let inputValue = value === undefined ? input : value;
 
-	// biome-ignore lint: intentionally skipping "value" dependency as this should never run when "value" changes
+	// biome-ignore lint: intentionally skipping "value" dependency as this shouldn't run when "value" changes
 	useEffect(() => {
 		if (initializedRef.current) {
 			return;
@@ -35,9 +48,9 @@ export function DescriptionInput({ value, defaultValue, onCopyPrevDamage, onChan
 	}, [defaultValue]);
 
 	function handleCopyPrevDamage() {
-		let description = localStorage.getItem("ElementDamage_Description") ?? "";
-		let cause = localStorage.getItem("ElementDamage_Cause") ?? "";
-		let action = localStorage.getItem("ElementDamage_Action") ?? "";
+		let description = localStorage.getItem(`${storageNamespace}_Description`) ?? "";
+		let cause = localStorage.getItem(`${storageNamespace}_Cause`) ?? "";
+		let action = localStorage.getItem(`${storageNamespace}_Action`) ?? "";
 
 		onCopyPrevDamage?.({
 			Description: description,
@@ -78,11 +91,7 @@ export function DescriptionInput({ value, defaultValue, onCopyPrevDamage, onChan
 			<Autocomplete
 				value={inputValue?.Description ?? ""}
 				onChange={(_event, value) => handleOnChange({ ...inputValue, Description: value ?? "" })}
-				options={[
-					getLocalizedString("Tear in element"),
-					getLocalizedString("Damage around lifting anchor"),
-					getLocalizedString("Damage on underside"),
-				]}
+				options={descriptionOptions}
 				freeSolo
 				renderInput={(params) => (
 					<TextField name="Description" required {...(params as any)} label={getLocalizedString("Description")} />

package/src/elements/ElementDamage/DuplicateDamage/DesktopView.tsx

@@ -36,21 +36,26 @@ function SummaryItem({ col, label, children, em, align, padding }: SummaryItemPr
 
 type ElementDamagesItemProps = {
 	record: DamagesRecord;
+	linkToDamage: boolean;
 };
 
-export function ElementDamagesItem({ record }: ElementDamagesItemProps) {
+export function ElementDamagesItem({ record, linkToDamage }: ElementDamagesItemProps) {
 	return (
 		<>
 			<SummaryItem col={1.5}>
-				<Link
-					href="#"
-					onClick={(e) => {
-						e.preventDefault();
-						window.location.href = `${record.ID}`;
-					}}
-				>
-					{record.ID}
-				</Link>
+				{linkToDamage ? (
+					<Link
+						href="#"
+						onClick={(e) => {
+							e.preventDefault();
+							window.location.href = `${record.ID}`;
+						}}
+					>
+						{record.ID}
+					</Link>
+				) : (
+					<span>{record.ID}</span>
+				)}
 			</SummaryItem>
 			<SummaryItem col={2.5} align="right">
 				{record.Date.toISOString().split("T")[0]}

package/src/elements/ElementDamage/DuplicateDamage/DublicateElementDamageDialog.tsx

@@ -12,6 +12,7 @@ type DuplicateElementDamageDialogProps = {
 	record: DamagesRecord[];
 	onRegisterAnyway: () => void;
 	loading: boolean;
+	linkToDamage: boolean;
 };
 
 export function DuplicateElementDamageDialog({
@@ -20,6 +21,7 @@ export function DuplicateElementDamageDialog({
 	record,
 	onRegisterAnyway,
 	loading,
+	linkToDamage,
 }: DuplicateElementDamageDialogProps) {
 	let matches = useMediaQuery(theme.breakpoints.up("lg"));
 	let backgroundColor = "#e9ebee";
@@ -35,13 +37,13 @@ export function DuplicateElementDamageDialog({
 						<>
 							<ElementDamagesHeader />
 							{record.map((record) => (
-								<ElementDamagesItem key={record.PrimKey} record={record} />
+								<ElementDamagesItem key={record.PrimKey} record={record} linkToDamage={linkToDamage} />
 							))}
 						</>
 					) : (
 						<div className="flow" style={{ width: "100%" }}>
 							{record.map((record) => (
-								<DuplicatePhoneViewItem key={record.PrimKey} record={record} />
+								<DuplicatePhoneViewItem key={record.PrimKey} record={record} linkToDamage={linkToDamage} />
 							))}
 						</div>
 					)}

package/src/elements/ElementDamage/DuplicateDamage/PhoneView.tsx

@@ -4,14 +4,17 @@ import type { DamagesRecord } from "../../data";
 
 type DuplicatePhoneViewItemProps = {
 	record: DamagesRecord;
+	linkToDamage: boolean;
 };
 
-export function DuplicatePhoneViewItem({ record }: DuplicatePhoneViewItemProps) {
+export function DuplicatePhoneViewItem({ record, linkToDamage }: DuplicatePhoneViewItemProps) {
 	return (
 		<Card
 			variant="outlined"
 			onClick={() => {
-				window.location.href = `${record.ID}`;
+				if (linkToDamage) {
+					window.location.href = `${record.ID}`;
+				}
 			}}
 		>
 			<CardContent>

package/src/elements/ElementDamage/DuplicateDamage/index.tsx

@@ -27,6 +27,10 @@ type DuplicateElementDamageProps = {
 	 * Loading state for submit button
 	 */
 	loading?: boolean;
+	/**
+	 * Indicate if a link to the element damage form should be used
+	 */
+	linkToDamage?: boolean;
 	/**
 	 * Called when duplicate or duplicates are found
 	 * @param record Array with all of the duplicate damages
@@ -48,6 +52,7 @@ export const DuplicateElementDamage = forwardRef<DuplicateElementDamageHandle, D
 			onOpenChange,
 			disableCheck = false,
 			loading = false,
+			linkToDamage = true,
 			onRegisterAnyway,
 		}: DuplicateElementDamageProps,
 		ref,
@@ -95,10 +100,14 @@ export const DuplicateElementDamage = forwardRef<DuplicateElementDamageHandle, D
 		return (
 			<DuplicateElementDamageDialog
 				open={open}
-				onClose={() => handleOpenChange(false)}
+				onClose={() => {
+					setRecord([]);
+					handleOpenChange(false);
+				}}
 				record={record}
 				onRegisterAnyway={onRegisterAnyway ?? (() => {})}
 				loading={loading ?? false}
+				linkToDamage={linkToDamage}
 			/>
 		);
 	},

package/src/elements/ElementLookup.tsx

@@ -1,7 +1,7 @@
 import SearchIcon from "@mui/icons-material/Search";
 import { IconButton, TextField } from "@mui/material";
 import { getLocalizedString } from "@olenbetong/appframe-core";
-import { type RefObject, useEffect, useImperativeHandle, useState } from "react";
+import { type RefObject, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { type AddElement, ElementLookupDialog } from "./ElementLookupDialog";
 
 export type Element = {
@@ -21,20 +21,38 @@ export type ElementLookupProps = {
 	value?: Element | null;
 	defaultValue?: Element | null;
 	ref?: RefObject<ElementLookupHandle | null>;
+	elementIDRequired?: boolean;
 	openLookupDialogIcon?: boolean;
 	onChange?: (value: Element | null) => void;
+	onDialogChange?: (open: boolean) => void;
 };
 
-export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon, onChange }: ElementLookupProps) {
+export function ElementLookup({
+	value,
+	defaultValue,
+	ref,
+	elementIDRequired = false,
+	openLookupDialogIcon,
+	onChange,
+	onDialogChange,
+}: ElementLookupProps) {
+	let initializedRef = useRef<boolean>(false);
+
 	let [openElementLookupDialog, setOpenElementLookupDialog] = useState<boolean>(false);
 	let [element, setElement] = useState<Element | null>(defaultValue ?? null);
 	let elementValue = value === undefined ? element : value;
 
+	// biome-ignore lint: intentionally skipping "value" dependency as this shouldn't run when "value" changes
 	useEffect(() => {
+		if (initializedRef.current) {
+			return;
+		}
+
 		if (value === undefined && defaultValue) {
 			setElement(defaultValue);
+			initializedRef.current = true;
 		}
-	}, [defaultValue, value]);
+	}, [defaultValue]);
 
 	useImperativeHandle(ref, () => ({
 		openDialog: () => setOpenElementLookupDialog(true),
@@ -46,6 +64,11 @@ export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon,
 		setElement(addElement.element);
 	}
 
+	// biome-ignore lint: only run when openElementLookupDialog changes
+	useEffect(() => {
+		onDialogChange?.(openElementLookupDialog);
+	}, [openElementLookupDialog]);
+
 	return (
 		<>
 			<ElementLookupDialog
@@ -53,6 +76,7 @@ export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon,
 				mode="single"
 				onClose={() => setOpenElementLookupDialog(false)}
 				onAdd={handleAddElement}
+				allowEmptyElement={!elementIDRequired}
 			/>
 
 			<input type="hidden" name="ProjectID" value={elementValue?.ProjectID ?? ""} />
@@ -73,6 +97,7 @@ export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon,
 				value={elementValue ? elementValue.ElementID : ""}
 				label={getLocalizedString("Element ID")}
 				fullWidth
+				required={elementIDRequired}
 				autoComplete="off"
 				slotProps={{
 					htmlInput: { readOnly: true },
@@ -83,6 +108,7 @@ export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon,
 							</IconButton>
 						) : undefined,
 					},
+					inputLabel: { shrink: !!elementValue?.ElementID },
 				}}
 			/>
 		</>

package/src/elements/ElementLookupDialog/Manual/ManualForm.tsx

@@ -19,9 +19,15 @@ export type AddElementManualFormProps = {
 	onAdd: (element: string | ElementDetails) => Promise<void>;
 	mode?: "single" | "multi";
 	defaultProject?: ProjectRecordBase;
+	allowEmptyElement?: boolean;
 };
 
-export function AddElementManualForm({ onAdd, mode, defaultProject }: AddElementManualFormProps) {
+export function AddElementManualForm({
+	onAdd,
+	mode,
+	defaultProject,
+	allowEmptyElement = false,
+}: AddElementManualFormProps) {
 	let id = useId();
 	let buttonRef = useRef<HTMLButtonElement>(null);
 	let [working, setWorking] = useState(false);
@@ -35,30 +41,53 @@ export function AddElementManualForm({ onAdd, mode, defaultProject }: AddElement
 			let formData = new FormData(evt.target as HTMLFormElement);
 			let elements = formData.get("ElementID");
 			let domain = formData.get("Domain");
-			let projectId = formData.get("ProjectID");
+			let project: ProjectsRecord = JSON.parse(formData.get("Project") as string);
 
-			if (!projectId || !domain || !elements) {
-				let warning = getLocalizedString(
-					mode === "multi" ? "Project and elements are required" : "Project and element are required",
-				);
-				alert(warning);
-				return;
+			if (allowEmptyElement) {
+				if (!project.ProjectID) {
+					alert(getLocalizedString("Project is required"));
+					return;
+				}
+			} else {
+				if (!project.ProjectID || !domain || !elements) {
+					let warning = getLocalizedString(
+						mode === "multi" ? "Project and elements are required" : "Project and element are required",
+					);
+					alert(warning);
+					return;
+				}
 			}
 
-			setWorking(true);
-			let record = (elements as string)
-				.match(matchElements)
-				?.map((elementId) => elementId.replace(/\s+/g, ""))
-				.map((elementId) => getElement({ projectId: projectId as string, elementId: elementId }, { mode: "manual" }));
+			if (elements) {
+				setWorking(true);
+				let record = (elements as string)
+					.match(matchElements)
+					?.map((elementId) => elementId.replace(/\s+/g, ""))
+					.map((elementId) =>
+						getElement({ projectId: project.ProjectID as string, elementId: elementId }, { mode: "manual" }),
+					);
 
-			if (!record) {
-				alert(getLocalizedString("Invalid elements"));
-				return;
-			}
+				if (!record) {
+					alert(getLocalizedString("Invalid elements"));
+					return;
+				}
 
-			let loaded = (await Promise.all(record)).map((record) => onAdd(record));
-			await Promise.all(loaded);
-			setWorking(false);
+				let loaded = (await Promise.all(record)).map((record) => onAdd(record));
+				await Promise.all(loaded);
+				setWorking(false);
+			} else {
+				onAdd({
+					PrimKey: "",
+					Domain: domain?.toString() ?? "",
+					Created: project?.Created,
+					ProjectID: project.ProjectID,
+					ProjectName: project.ProjectName,
+					ProjectDomain: project.Domain,
+					ElementID: "",
+					DisplayName: "",
+					GiaiUri: "",
+				});
+			}
 		} catch (error) {
 			setWorking(false);
 			alert((error as Error).message);
@@ -73,6 +102,8 @@ export function AddElementManualForm({ onAdd, mode, defaultProject }: AddElement
 				)}
 			</Alert>
 
+			<input type="hidden" name="Project" value={project ? JSON.stringify(project) : ""} />
+
 			<ProjectSelect
 				onChange={(project) => (project ? setProject(project) : setProject(null))}
 				value={project}
@@ -98,7 +129,7 @@ export function AddElementManualForm({ onAdd, mode, defaultProject }: AddElement
 				variant="contained"
 				size="large"
 				type="submit"
-				disabled={!isElementsOnly.test(elementId) || working}
+				disabled={(!allowEmptyElement && !isElementsOnly.test(elementId)) || working}
 				loading={working}
 				loadingPosition="end"
 				endIcon={<Add />}

package/src/elements/ElementLookupDialog/index.tsx

@@ -28,6 +28,7 @@ export type ElementLookupDialogSharedProps = {
 	onClose: () => void;
 	initialTab?: InitialTabProps | null;
 	useSearch?: boolean;
+	allowEmptyElement?: boolean;
 };
 
 export type ElementLookupDialogSingleModeProps = ElementLookupDialogSharedProps & {
@@ -128,7 +129,10 @@ export function ElementLookupDialog(props: ElementLookupDialogProps) {
 				)}
 				{tab === "manual" && (
 					<Box p={2}>
-						<AddElementManualForm onAdd={(element) => handleElementAdd(element, "manual")} />
+						<AddElementManualForm
+							onAdd={(element) => handleElementAdd(element, "manual")}
+							allowEmptyElement={props.allowEmptyElement}
+						/>
 					</Box>
 				)}
 				{tab === "scanner" && (
@@ -171,7 +175,10 @@ export function ElementLookupDialog(props: ElementLookupDialogProps) {
 									</Button>
 								}
 							>
-								<ListItemText primary={element.DisplayName} secondary={element.ElementID} />
+								<ListItemText
+									primary={element.DisplayName || element.ProjectName}
+									secondary={element.ElementID || element.ProjectID}
+								/>
 							</ListItem>
 						))}
 					</List>

package/src/elements/index.ts

@@ -7,3 +7,4 @@ export * from "./ElementDamage/RegisterFix.js";
 export * from "./ElementDamage/SubmitButtons.js";
 export * from "./ElementLookup.js";
 export * from "./ElementLookupDialog/index.js";
+export * from "./ProjectSelect.js";