@olenbetong/synergi-react 2.1.2 → 2.3.0

package/es/elements/ElementLookupDialog/HIDScanner/useHIDScanner.js

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+export function useHIDScanner(onRead, enabled = false) {
+    useEffect(() => {
+        if (!enabled)
+            return;
+        let hexKeys = "ABCDEFabcdefxX0123456789";
+        let buffer = "";
+        let clearBufferTimeout;
+        function handleKeyDownEvent(event) {
+            if (hexKeys.includes(event.key)) {
+                clearTimeout(clearBufferTimeout);
+                buffer += event.key;
+                clearBufferTimeout = setTimeout(() => {
+                    buffer = "";
+                }, 500);
+            }
+            else if (event.key === "Enter") {
+                onRead(buffer);
+                buffer = "";
+            }
+        }
+        document.body.addEventListener("keydown", handleKeyDownEvent);
+        return () => {
+            document.body.removeEventListener("keydown", handleKeyDownEvent);
+        };
+    }, [onRead, enabled]);
+}

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

@@ -0,0 +1,12 @@
+import { type ElementDetails } from "../getElement";
+export type ProjectRecordBase = {
+    Domain: string;
+    ProjectID: string;
+    ProjectName?: string;
+};
+export type AddElementManualFormProps = {
+    onAdd: (element: string | ElementDetails) => Promise<void>;
+    mode?: "single" | "multi";
+    defaultProject?: ProjectRecordBase;
+};
+export declare function AddElementManualForm({ onAdd, mode, defaultProject }: AddElementManualFormProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Add from "@mui/icons-material/Add";
+import { Alert, Button, TextField } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useId, useRef, useState } from "react";
+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 }) {
+    let id = useId();
+    let buttonRef = useRef(null);
+    let [working, setWorking] = useState(false);
+    let [elementId, setElementId] = useState("");
+    let [project, setProject] = useState(defaultProject ?? null);
+    async function handleSubmit(evt) {
+        try {
+            evt.preventDefault();
+            evt.stopPropagation();
+            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;
+            }
+            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;
+            }
+            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") })] }));
+}

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

@@ -0,0 +1,23 @@
+export type AddElementSource = "manual" | "camera-barcode" | "loading-list" | "hid-barcode" | "hid-rfid";
+export type ElementDetails = {
+    Domain: string;
+    PrimKey: string;
+    Created: Date;
+    ProjectID: string;
+    ProjectName: string;
+    ProjectDomain: string;
+    ElementID: string;
+    DisplayName: string;
+    GiaiUri: string;
+};
+export type ElementFilter = {
+    projectId: string;
+    elementId: string;
+};
+export type GetElementContext = {
+    filter?: string | ElementFilter;
+    mode?: AddElementSource;
+    method?: "cache" | "database";
+    result?: null | ElementDetails;
+};
+export declare function getElement(id: string | ElementFilter, context: GetElementContext): Promise<ElementDetails>;

package/es/elements/ElementLookupDialog/getElement.js

@@ -0,0 +1,55 @@
+import { logActivity, startActivity } from "@olenbetong/appframe-core";
+import { DataProviderHandlerAPI } from "@olenbetong/appframe-data";
+import Giai from "./utils/Giai";
+const elementsDataHandler = new DataProviderHandlerAPI({
+    dataSourceId: "aviw_Fleet_DeliveryTickets_ElementsLookup",
+    fields: [
+        { name: "PrimKey", type: "string" },
+        { name: "Created", type: "datetime" },
+        { name: "Domain", type: "string" },
+        { name: "ProjectID", type: "string" },
+        { name: "ProjectName", type: "string" },
+        { name: "ProjectDomain", type: "string" },
+        { name: "ElementID", type: "string" },
+        { name: "DisplayName", type: "string" },
+        { name: "GiaiUri", type: "string" },
+    ],
+});
+const elementDetailsCache = new Map();
+export async function getElement(id, context) {
+    let details;
+    context.filter = id;
+    if (typeof id === "string" && elementDetailsCache.has(id)) {
+        details = elementDetailsCache.get(id);
+        context.method = "cache";
+        context.result = details;
+        logActivity("GetElement", context);
+    }
+    else {
+        context.method = "database";
+        let logActivity = startActivity("GetElement", context);
+        let whereClause;
+        if (typeof id === "string") {
+            let uri = Giai.fromString(id);
+            whereClause = `[GiaiUri] = '${uri.toEpcPureIdentityUri()}'`;
+        }
+        else {
+            whereClause = `[ProjectID] = '${id.projectId}' AND [ElementID] = '${id.elementId}'`;
+        }
+        let result = await elementsDataHandler.retrieve({
+            whereClause,
+        });
+        if (!result.length) {
+            context.result = null;
+            logActivity();
+            throw Error(`Element not found`);
+        }
+        details = result[0];
+        context.result = details;
+        logActivity();
+        if (typeof id === "string") {
+            elementDetailsCache.set(id, details);
+        }
+    }
+    return details;
+}

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

@@ -0,0 +1,24 @@
+import { type AddElementSource, type ElementDetails } from "./getElement";
+export type AddElement = {
+    element: ElementDetails;
+    mode: AddElementSource;
+    scanTime?: number;
+};
+type InitialTabProps = "camera" | "scanner" | "manual";
+export type ElementLookupDialogSharedProps = {
+    open: boolean;
+    onClose: () => void;
+    initialTab?: InitialTabProps | null;
+    useSearch?: boolean;
+};
+export type ElementLookupDialogSingleModeProps = ElementLookupDialogSharedProps & {
+    mode: "single" | "search";
+    onAdd: (element: AddElement) => Promise<void>;
+};
+export type ElementLookupDialogMultiModeProps = ElementLookupDialogSharedProps & {
+    mode: "multi";
+    onAdd: (element: AddElement[]) => Promise<void>;
+};
+export type ElementLookupDialogProps = ElementLookupDialogSingleModeProps | ElementLookupDialogMultiModeProps;
+export declare function ElementLookupDialog(props: ElementLookupDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ElementLookupDialog/index.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Add from "@mui/icons-material/Add";
+import DeleteForeverOutlined from "@mui/icons-material/DeleteForeverOutlined";
+import Edit from "@mui/icons-material/Edit";
+import QrCodeScanner from "@mui/icons-material/QrCodeScanner";
+import TapAndPlay from "@mui/icons-material/TapAndPlay";
+import { Alert, Box, Button, DialogActions, List, ListItem, ListItemText, Tab, Tabs } from "@mui/material";
+import { getLocalizedString, localize } from "@olenbetong/appframe-core";
+import { ResponsiveDialog } from "@olenbetong/appframe-mui";
+import { useEffect, useState } from "react";
+import { flushSync } from "react-dom";
+import { BarcodeScanner } from "./BarcodeScanner";
+import { getElement } from "./getElement";
+import { AddElementHIDScanner } from "./HIDScanner";
+import { AddElementManualForm } from "./Manual/ManualForm";
+import { useBeeper } from "./utils/beep";
+import Giai from "./utils/Giai";
+export function ElementLookupDialog(props) {
+    let { open, onClose, initialTab } = props;
+    let [tab, setTab] = useState("camera");
+    let [elements, setElements] = useState([]);
+    let [adding, setAdding] = useState(false);
+    let beeper = useBeeper();
+    useEffect(() => {
+        if (open && initialTab) {
+            setTab(initialTab);
+        }
+    }, [open, initialTab]);
+    async function handleElementAdd(element, mode) {
+        try {
+            let record = typeof element === "string" ? await getElement(element.replace("\u001d", ""), { mode }) : element;
+            // Flush changes to DOM to be able to query newly added elements and animate their background
+            flushSync(() => {
+                setElements((current) => {
+                    let now = Date.now();
+                    let exists = current.some((e) => e.element.ElementID === record.ElementID);
+                    let updated;
+                    if (exists) {
+                        updated = current.map((e) => (e.element.ElementID === record.ElementID ? { ...e, scanTime: now } : e));
+                    }
+                    else {
+                        beeper();
+                        updated =
+                            props.mode === "multi"
+                                ? [{ element: record, mode, scanTime: now }, ...current]
+                                : [{ element: record, mode, scanTime: now }];
+                    }
+                    if (props.mode === "multi") {
+                        updated.sort((a, b) => (b.scanTime ?? 0) - (a.scanTime ?? 0));
+                    }
+                    return updated;
+                });
+            });
+            let addedDomElement = document.querySelector(`[data-elementid="${record.ElementID}"]`);
+            if (addedDomElement) {
+                addedDomElement.animate([
+                    { backgroundColor: "var(--brand-light)", offset: 0 },
+                    { backgroundColor: "var(--brand-light)", offset: 0.2 },
+                    { backgroundColor: "transparent" },
+                ], {
+                    duration: 1000,
+                    easing: "ease-out",
+                });
+            }
+        }
+        catch (error) {
+            alert(error.message);
+        }
+    }
+    if (tab === "manual" && props.mode === "search") {
+        tab = "camera";
+    }
+    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: {
+                                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 () => {
+                                try {
+                                    setAdding(true);
+                                    if (props.mode === "multi") {
+                                        await props.onAdd(elements);
+                                    }
+                                    else {
+                                        await props.onAdd(elements[0]);
+                                    }
+                                    setElements([]);
+                                    setAdding(false);
+                                    onClose();
+                                }
+                                catch (error) {
+                                    setAdding(false);
+                                    alert(error.message);
+                                }
+                            }, startIcon: _jsx(Add, {}), loadingPosition: "start", disabled: !elements.length, children: props.mode === "search" ? getLocalizedString("Search for element") : getLocalizedString("Add element") })] })] }) }));
+}

package/es/elements/ElementLookupDialog/utils/Giai.d.ts

@@ -0,0 +1,52 @@
+export type GiaiProps = {
+    assetReference: string | number | bigint;
+    companyPrefix: string | number | bigint;
+    filter?: string | number | undefined;
+};
+/**
+ * GIAI-96 encoder and decoder as defined by the GS1 EPC Tag data standard
+ */
+export default class Giai {
+    #private;
+    static PARTITION_TABLE: number[];
+    static EPC_HEADER: string;
+    static BARCODE_PREFIX: string;
+    static GROUP_SEPARATOR: string;
+    static URN_PREFIX: string;
+    static fromHex: (hexIdentifier: string) => Giai;
+    /**
+     *
+     * @param {string | null | undefined} barcodeString
+     * @returns
+     */
+    static fromBarcode: (barcodeString: string) => Giai;
+    /**
+     * Creates a GIAI instance from a purse identity URI (urn:epc:giai:[companyprefix].[assetreference])
+     * @param {string} uri EPC GIAI pure identity URI
+     */
+    static fromEpcPureIdentityUri(uri: string): Giai;
+    /**
+     * Attempt to create a GIAI instance from a string with unknown format. Could be either a URN, barcode value
+     * or EPC value.
+     * @param {string} value
+     * @returns
+     */
+    static fromString(value: string, ignoreError?: false): Giai;
+    static fromString(value: string, ignoreError: true): Giai | undefined;
+    /**
+     *
+     * @param {GiaiProps} options
+     */
+    constructor({ assetReference, companyPrefix }: GiaiProps);
+    get assetReference(): string | number | bigint;
+    get companyPrefix(): string | number | bigint;
+    toEpcPureIdentityUri(): string;
+    toGiaiBarcode(): string;
+    toEpcHex(): string;
+}
+export declare function hexToBitString(hexString: string): string;
+declare global {
+    interface Window {
+        Giai: typeof Giai | undefined;
+    }
+}

package/es/elements/ElementLookupDialog/utils/Giai.js

@@ -0,0 +1,158 @@
+import { getLocalizedString } from "@olenbetong/appframe-core";
+/**
+ * GIAI-96 encoder and decoder as defined by the GS1 EPC Tag data standard
+ */
+export default class Giai {
+    /// Bit lengths for company prefix given partition equal to index.
+    ///
+    /// Partition   Company prefix          Individual asset reference
+    ///             Bits    Digits          Bits        Digits
+    ///   0          40       12             42           13
+    ///   1          37       11             45           14
+    ///   2          34       10             48           15
+    ///   3          30        9             52           16
+    ///   4          27        8             55           17
+    ///   5          24        7             58           18
+    ///   6          20        6             62           19
+    static PARTITION_TABLE = [40, 37, 34, 30, 27, 24, 20];
+    // EPC header for GIAI-96 coding scheme
+    static EPC_HEADER = "00110100";
+    // Prefix for GS1 key used in barcodes;
+    static BARCODE_PREFIX = "8004";
+    // Group separator used to separate company prefix and asset reference (FNC1 in GS1-128 barcodes)
+    static GROUP_SEPARATOR = String.fromCodePoint(0x001d);
+    static URN_PREFIX = "urn:epc:id:giai:";
+    static fromHex = (hexIdentifier) => {
+        const bitIdentifier = hexToBitString(hexIdentifier);
+        if (bitIdentifier.substring(0, 8) !== Giai.EPC_HEADER) {
+            throw new Error("EPC value is not a valid GIAI value.");
+        }
+        const partition = Number.parseInt(bitIdentifier.substr(11, 3), 2);
+        const companyPrefixLength = Giai.PARTITION_TABLE[partition];
+        const filter = Number.parseInt(bitIdentifier.substring(8, 11), 2);
+        const companyPrefix = BigInt(`0b${bitIdentifier.substring(14, 14 + companyPrefixLength)}`);
+        const assetReference = BigInt(`0b${bitIdentifier.substring(14 + companyPrefixLength)}`);
+        return new Giai({ assetReference, companyPrefix, filter });
+    };
+    /**
+     *
+     * @param {string | null | undefined} barcodeString
+     * @returns
+     */
+    static fromBarcode = (barcodeString) => {
+        const prefixLength = Giai.BARCODE_PREFIX.length;
+        if (barcodeString[0] === Giai.GROUP_SEPARATOR) {
+            barcodeString = barcodeString.substr(1);
+        }
+        if (barcodeString.substr(0, prefixLength) !== Giai.BARCODE_PREFIX) {
+            throw new Error(`Barcode is not a valid GIAI barcode. (${Giai.BARCODE_PREFIX} prefix expected)`);
+        }
+        let giaiString = barcodeString.substring(prefixLength);
+        const gsIndex = giaiString.indexOf(Giai.GROUP_SEPARATOR);
+        if (gsIndex >= 0) {
+            return new Giai({
+                assetReference: giaiString.substring(gsIndex + 1),
+                companyPrefix: giaiString.substring(0, gsIndex),
+            });
+        }
+        // If no separator is found, assume a company prefix length of 7
+        return new Giai({
+            assetReference: giaiString.substring(7),
+            companyPrefix: giaiString.substring(0, 7),
+        });
+    };
+    /**
+     * Creates a GIAI instance from a purse identity URI (urn:epc:giai:[companyprefix].[assetreference])
+     * @param {string} uri EPC GIAI pure identity URI
+     */
+    static fromEpcPureIdentityUri(uri) {
+        if (!uri.startsWith(Giai.URN_PREFIX)) {
+            throw Error("URI is not a valid GIAI URI");
+        }
+        let [companyPrefix, assetReference] = uri.substring(Giai.URN_PREFIX.length).split(".");
+        return new Giai({
+            assetReference,
+            companyPrefix,
+        });
+    }
+    static fromString(value, ignoreError = false) {
+        try {
+            if (value.startsWith("0x")) {
+                value = value.replace("0x", "");
+                return Giai.fromHex(value.substring(0, 24));
+                // return Giai.fromHex(value.substring(6, value.length - 4));
+            }
+            else if (value.startsWith(Giai.URN_PREFIX)) {
+                return Giai.fromEpcPureIdentityUri(value);
+            }
+            else if (value.startsWith(Giai.BARCODE_PREFIX)) {
+                return Giai.fromBarcode(value);
+            }
+            else if (value.length === 24) {
+                return Giai.fromHex(value);
+            }
+        }
+        catch (ex) {
+            if (!ignoreError) {
+                throw ex;
+            }
+        }
+        if (!ignoreError) {
+            throw Error(getLocalizedString("Can't create GIAI from string. Failed to match value  '{value}' with known input formats.").replace("{value}", value));
+        }
+        return undefined;
+    }
+    /**
+     * @type {string | number | bigint}
+     */
+    #assetReference;
+    /**
+     * @type {string | number | bigint}
+     */
+    #companyPrefix;
+    /**
+     *
+     * @param {GiaiProps} options
+     */
+    constructor({ assetReference, companyPrefix }) {
+        this.#assetReference = assetReference;
+        this.#companyPrefix = companyPrefix;
+    }
+    get assetReference() {
+        return this.#assetReference;
+    }
+    get companyPrefix() {
+        return this.#companyPrefix;
+    }
+    // Returns the EPC pure identity uri for this identifier - as used by EPCIS.
+    toEpcPureIdentityUri() {
+        return `${Giai.URN_PREFIX}${this.companyPrefix}.${this.assetReference}`;
+    }
+    toGiaiBarcode() {
+        return Giai.BARCODE_PREFIX + this.companyPrefix + Giai.GROUP_SEPARATOR + this.assetReference;
+    }
+    toEpcHex() {
+        let bitIdentifier = Giai.EPC_HEADER;
+        bitIdentifier += "000"; // Filter
+        bitIdentifier += (5).toString(2).padStart(3, "0"); // Partition
+        let companyPrefix = ["bigint", "number"].includes(typeof this.#companyPrefix)
+            ? this.#companyPrefix
+            : BigInt(this.#companyPrefix);
+        let assetReference = ["bigint", "number"].includes(typeof this.#assetReference)
+            ? this.#assetReference
+            : BigInt(this.#assetReference);
+        bitIdentifier += companyPrefix.toString(2).padStart(24, "0");
+        bitIdentifier += assetReference.toString(2).padStart(58, "0");
+        return BigInt(`0b${bitIdentifier}`).toString(16).toUpperCase();
+    }
+}
+export function hexToBitString(hexString) {
+    let bitString = "";
+    for (let i = 0; i < hexString.length; i += 2) {
+        const byteString = hexString.substr(i, 2);
+        const byteBits = Number.parseInt(byteString, 16).toString(2);
+        bitString += byteBits.padStart(8, "0");
+    }
+    return bitString;
+}
+window.Giai = Giai;

package/es/elements/ElementLookupDialog/utils/beep.d.ts

@@ -0,0 +1,10 @@
+export type Beeper = (callback?: () => void) => void;
+declare global {
+    interface Window {
+        webkitAudioContext: {
+            new (): AudioContext;
+        };
+    }
+}
+export declare function createBeeper(duration?: number, type?: OscillatorType): Beeper;
+export declare function useBeeper(duration?: number, type?: OscillatorType): Beeper;

package/es/elements/ElementLookupDialog/utils/beep.js

@@ -0,0 +1,20 @@
+import { useState } from "react";
+export function createBeeper(duration = 200, type = "sine") {
+    const ctxClass = window.AudioContext || window.webkitAudioContext;
+    const ctx = new ctxClass();
+    return (finishedCallback) => {
+        duration = +duration;
+        const osc = ctx.createOscillator();
+        osc.type = type;
+        osc.connect(ctx.destination);
+        osc.start();
+        setTimeout(() => {
+            osc.stop();
+            finishedCallback?.();
+        }, duration);
+    };
+}
+export function useBeeper(duration = 200, type = "sine") {
+    const [beeper] = useState(() => createBeeper(duration, type));
+    return beeper;
+}

package/es/elements/ProjectSelect.d.ts

@@ -0,0 +1,23 @@
+import { type SxProps, type Theme } from "@mui/material";
+import { type ProjectsRecord } from "./data/dsProjects";
+type ProjectSelectProps = {
+    className?: string;
+    disabled?: boolean;
+    id?: string;
+    names?: {
+        domain?: string;
+        projectId?: string;
+        name?: string;
+    };
+    nullable?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    onChange?: (project: Partial<ProjectsRecord> | null) => void;
+    defaultValue?: Partial<ProjectsRecord> | null;
+    value?: Partial<ProjectsRecord> | null;
+    label?: string;
+    sx?: SxProps<Theme> | undefined;
+    report?: boolean;
+};
+export declare function ProjectSelect({ className, disabled, id, names, onChange, readOnly, required, defaultValue, value, label, sx, report, }: ProjectSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ProjectSelect.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, ListItem, ListItemText, TextField } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useDataWithFilter, useDebounce } from "@olenbetong/appframe-react";
+import { useMemo, useRef, useState } from "react";
+import { dsProjects } from "./data/dsProjects";
+import { dsReportProjects } from "./data/dsReportProjects";
+export function ProjectSelect({ className, disabled, id, names, onChange, readOnly, required, defaultValue, value, label, sx, report, }) {
+    let [selected, setSelected] = useState(defaultValue ?? null);
+    let [query, setQuery] = useState("");
+    let search = useDebounce(query);
+    let projects = useDataWithFilter(report ? dsReportProjects : dsProjects, search ? `[SearchColumn] LIKE '%${search}%'` : "");
+    let highlightRef = useRef(null);
+    function handleSelect(value) {
+        highlightRef.current = null;
+        if (!disabled && !readOnly) {
+            if (onChange) {
+                onChange(value);
+            }
+            else {
+                setSelected(value);
+            }
+        }
+    }
+    let current = value === undefined ? selected : value;
+    const duplicatedNames = useMemo(() => {
+        const nameCount = new Map();
+        projects.forEach((opt) => {
+            nameCount.set(opt.ProjectName, (nameCount.get(opt.ProjectName) || 0) + 1);
+        });
+        return new Set([...nameCount.entries()].filter(([, count]) => count > 1).map(([name]) => name));
+    }, [projects]);
+    return (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: sx, autoHighlight: true, autoSelect: true, clearOnEscape: true, className: className, options: projects, disabled: disabled, getOptionLabel: (option) => option?.ProjectID !== undefined ? `${option.ProjectID}: ${option.ProjectName}` : "", isOptionEqualToValue: (option, value) => option.Domain === value.Domain && option.ProjectID === value.ProjectID, onChange: (_, value) => handleSelect(value), onClose: () => setQuery(""), value: value !== undefined ? value : selected, renderInput: (params) => (_jsx(TextField, { ...params, label: label ? label : getLocalizedString("Project ID"), id: id ?? "ProjectLookup", fullWidth: true, slotProps: {
+                        htmlInput: {
+                            readOnly,
+                            ...params.inputProps,
+                        },
+                    }, autoComplete: "off", variant: "filled", required: required, onChange: (evt) => setQuery(evt.target.value), value: query })), renderOption: (props, option) => {
+                    let isDuplicated = option.ProjectName && duplicatedNames.has(option.ProjectName);
+                    return (_jsx(ListItem, { ...props, children: _jsx(ListItemText, { primary: isDuplicated ? `${option.ProjectName} (${option.Domain})` : option.ProjectName, secondary: option.ProjectID }) }));
+                } }), _jsx("input", { name: names?.domain ?? "Domain", type: "hidden", value: current?.Domain ?? "" }), _jsx("input", { name: names?.name ?? "ProjectName", type: "hidden", value: current?.ProjectName ?? "" }), _jsx("input", { name: names?.projectId ?? "ProjectID", type: "hidden", value: current?.ProjectID ?? "" })] }));
+}

package/es/elements/data/dsAttachments.d.ts

@@ -0,0 +1,15 @@
+export type AttachmentsRecord = {
+    PrimKey: string;
+    Domain: string;
+    FileName: string | null;
+    FileSize: number | null;
+    FileRef: string | null;
+    ProjectID: string | null;
+    ElementID: string | null;
+    Title: string | null;
+    ElementRef: string | null;
+    Damage: boolean;
+    DamageID: number | null;
+    ElementNumber: string | null;
+};
+export declare const dsAttachments: import("@olenbetong/appframe-data").DataObject<AttachmentsRecord>;