@powerhousedao/contributor-billing 0.0.97 → 0.0.99

package/dist/editors/invoice/components/lineItemCard.d.ts

@@ -0,0 +1,21 @@
+type LineItem = {
+    currency: string;
+    description: string;
+    id: string;
+    quantity: number;
+    taxPercent: number;
+    totalPriceTaxExcl: number;
+    totalPriceTaxIncl: number;
+    unitPriceTaxExcl: number;
+    unitPriceTaxIncl: number;
+    lineItemTag: any[];
+};
+type LineItemCardProps = {
+    item: LineItem;
+    onEdit: () => void;
+    onDelete: () => void;
+    currency: string;
+};
+export declare function LineItemCard({ item, onEdit, onDelete, currency, }: LineItemCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=lineItemCard.d.ts.map

package/dist/editors/invoice/components/lineItemCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineItemCard.d.ts","sourceRoot":"","sources":["../../../../editors/invoice/components/lineItemCard.tsx"],"names":[],"mappings":"AAIA,KAAK,QAAQ,GAAG;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,GAAG,EAAE,CAAC;CACpB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,iBAAiB,2CAkGnB"}

package/dist/editors/invoice/components/lineItemCard.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Edit, Trash2, MoreVertical } from "lucide-react";
+import { formatNumber } from "../lineItems.js";
+import { useState } from "react";
+export function LineItemCard({ item, onEdit, onDelete, currency, }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [showMenu, setShowMenu] = useState(false);
+    const tagCount = item.lineItemTag?.length || 0;
+    return (_jsxs("div", { className: "bg-white border border-gray-200 rounded-lg mb-3 overflow-hidden", children: [_jsxs("div", { className: "p-4 cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [_jsxs("div", { className: "flex items-start justify-between mb-2", children: [_jsx("div", { className: "flex-1", children: _jsx("h5", { className: "font-medium text-gray-900 text-sm", children: item.description || "Untitled Item" }) }), _jsx("button", { className: "p-1 hover:bg-gray-100 rounded", onClick: (e) => {
+                                    e.stopPropagation();
+                                    setShowMenu(!showMenu);
+                                }, children: _jsx(MoreVertical, { className: "w-5 h-5 text-gray-500" }) })] }), _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsxs("div", { className: "flex items-center gap-4 text-gray-600", children: [_jsxs("span", { children: ["Qty: ", item.quantity] }), _jsx("span", { children: "\u2022" }), _jsxs("span", { children: [currency, " ", formatNumber(item.unitPriceTaxExcl)] })] }), _jsxs("div", { className: "font-semibold text-gray-900", children: [currency, " ", formatNumber(item.totalPriceTaxIncl)] })] }), isExpanded && (_jsxs("div", { className: "mt-3 pt-3 border-t border-gray-100 space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600", children: "Tax %:" }), _jsxs("span", { className: "text-gray-900", children: [item.taxPercent, "%"] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600", children: "Total (excl. tax):" }), _jsxs("span", { className: "text-gray-900", children: [currency, " ", formatNumber(item.totalPriceTaxExcl)] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600", children: "Unit Price (incl. tax):" }), _jsxs("span", { className: "text-gray-900", children: [currency, " ", formatNumber(item.unitPriceTaxIncl)] })] })] }))] }), showMenu && (_jsxs("div", { className: "border-t border-gray-200 bg-gray-50", children: [_jsxs("button", { className: "w-full flex items-center gap-3 px-4 py-3 text-sm text-left hover:bg-gray-100 transition-colors", onClick: (e) => {
+                            e.stopPropagation();
+                            onEdit();
+                            setShowMenu(false);
+                        }, children: [_jsx(Edit, { className: "w-4 h-4 text-blue-600" }), _jsx("span", { children: "Edit Line Item" })] }), _jsxs("button", { className: "w-full flex items-center gap-3 px-4 py-3 text-sm text-left hover:bg-red-50 text-red-600 transition-colors", onClick: (e) => {
+                            e.stopPropagation();
+                            if (confirm("Delete this line item?")) {
+                                onDelete();
+                            }
+                            setShowMenu(false);
+                        }, children: [_jsx(Trash2, { className: "w-4 h-4" }), _jsx("span", { children: "Delete" })] })] }))] }));
+}

package/dist/editors/invoice/components/lineItemMobileModal.d.ts

@@ -0,0 +1,33 @@
+type LineItem = {
+    currency: string;
+    description: string;
+    id: string;
+    quantity: number;
+    taxPercent: number;
+    totalPriceTaxExcl: number;
+    totalPriceTaxIncl: number;
+    unitPriceTaxExcl: number;
+    unitPriceTaxIncl: number;
+    lineItemTag: any[];
+};
+type EditLineItemInput = {
+    id: string;
+    currency?: string;
+    description?: string;
+    quantity?: number;
+    taxPercent?: number;
+    totalPriceTaxExcl?: number;
+    totalPriceTaxIncl?: number;
+    unitPriceTaxExcl?: number;
+    unitPriceTaxIncl?: number;
+};
+type LineItemMobileModalProps = {
+    item?: Partial<LineItem>;
+    currency: string;
+    onSave: (item: EditLineItemInput) => void;
+    onCancel: () => void;
+    isNew?: boolean;
+};
+export declare function LineItemMobileModal({ item, currency, onSave, onCancel, isNew, }: LineItemMobileModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=lineItemMobileModal.d.ts.map

package/dist/editors/invoice/components/lineItemMobileModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineItemMobileModal.d.ts","sourceRoot":"","sources":["../../../../editors/invoice/components/lineItemMobileModal.tsx"],"names":[],"mappings":"AAMA,KAAK,QAAQ,GAAG;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,GAAG,EAAE,CAAC;CACpB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,KAAa,GACd,EAAE,wBAAwB,2CA6M1B"}

package/dist/editors/invoice/components/lineItemMobileModal.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useState, useMemo, useEffect } from "react";
+import { generateId } from "document-model";
+import { InputField } from "./inputField.js";
+import { NumberForm } from "./numberForm.js";
+export function LineItemMobileModal({ item, currency, onSave, onCancel, isNew = false, }) {
+    const [description, setDescription] = useState(item?.description ?? "");
+    const [quantity, setQuantity] = useState(item?.quantity ?? 1);
+    const [unitPriceTaxExcl, setUnitPriceTaxExcl] = useState(item?.unitPriceTaxExcl ?? 0);
+    const [taxPercent, setTaxPercent] = useState(item?.taxPercent ?? 0);
+    // Update state when item changes
+    useEffect(() => {
+        setDescription(item?.description ?? "");
+        setQuantity(item?.quantity ?? 1);
+        setUnitPriceTaxExcl(item?.unitPriceTaxExcl ?? 0);
+        setTaxPercent(item?.taxPercent ?? 0);
+    }, [item]);
+    // Calculate totals
+    const calculatedValues = useMemo(() => {
+        const qty = typeof quantity === "string" ? parseFloat(quantity) || 1 : quantity;
+        const unitPrice = typeof unitPriceTaxExcl === "string"
+            ? parseFloat(unitPriceTaxExcl) || 0
+            : unitPriceTaxExcl;
+        const tax = typeof taxPercent === "string" ? parseFloat(taxPercent) || 0 : taxPercent;
+        const taxRate = tax / 100;
+        const unitPriceTaxIncl = unitPrice * (1 + taxRate);
+        const totalPriceTaxExcl = qty * unitPrice;
+        const totalPriceTaxIncl = qty * unitPriceTaxIncl;
+        return {
+            quantity: qty,
+            unitPriceTaxExcl: unitPrice,
+            unitPriceTaxIncl,
+            taxPercent: tax,
+            totalPriceTaxExcl,
+            totalPriceTaxIncl,
+        };
+    }, [quantity, unitPriceTaxExcl, taxPercent]);
+    const handleSave = () => {
+        // For edit: use existing ID (if valid), For new or empty ID: generate ID
+        const needsNewId = isNew || !item?.id || item.id === '';
+        const lineItem = {
+            id: needsNewId ? generateId() : item.id,
+            currency,
+            description,
+            quantity: calculatedValues.quantity,
+            unitPriceTaxExcl: calculatedValues.unitPriceTaxExcl,
+            unitPriceTaxIncl: calculatedValues.unitPriceTaxIncl,
+            taxPercent: calculatedValues.taxPercent,
+            totalPriceTaxExcl: calculatedValues.totalPriceTaxExcl,
+            totalPriceTaxIncl: calculatedValues.totalPriceTaxIncl,
+        };
+        onSave(lineItem);
+    };
+    // Prevent body scroll when modal is open
+    useEffect(() => {
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = "unset";
+        };
+    }, []);
+    return (_jsxs("div", { className: "fixed inset-0 z-50 bg-white flex flex-col", children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 bg-white", children: [_jsx("button", { onClick: onCancel, className: "p-2 hover:bg-gray-100 rounded-full transition-colors", "aria-label": "Cancel", children: _jsx(X, { className: "w-5 h-5" }) }), _jsx("h2", { className: "text-lg font-semibold", children: isNew ? "Add Line Item" : "Edit Line Item" }), _jsx("button", { onClick: handleSave, className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors font-medium text-sm", children: "Save" })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Description *" }), _jsx(InputField, { value: description, handleInputChange: (e) => setDescription(e.target.value), onBlur: () => { }, placeholder: "Enter item description", className: "w-full" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Quantity *" }), _jsx(NumberForm, { number: quantity, handleInputChange: (e) => setQuantity(e.target.value), precision: 0, className: "w-full" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Unit Price *" }), _jsx(NumberForm, { number: unitPriceTaxExcl, handleInputChange: (e) => setUnitPriceTaxExcl(e.target.value), precision: 2, className: "w-full" })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Tax %" }), _jsx(NumberForm, { number: taxPercent, handleInputChange: (e) => setTaxPercent(e.target.value), precision: 2, className: "w-full" })] }), _jsxs("div", { className: "bg-gray-50 rounded-lg p-4 space-y-3", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-2", children: "Calculated Totals" }), _jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: "text-gray-600", children: "Total (excl. tax):" }), _jsxs("span", { className: "font-medium text-gray-900", children: [currency, " ", calculatedValues.totalPriceTaxExcl.toLocaleString("en-US", {
+                                                minimumFractionDigits: 2,
+                                                maximumFractionDigits: 2,
+                                            })] })] }), _jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: "text-gray-600", children: "Tax amount:" }), _jsxs("span", { className: "font-medium text-gray-900", children: [currency, " ", (calculatedValues.totalPriceTaxIncl -
+                                                calculatedValues.totalPriceTaxExcl).toLocaleString("en-US", {
+                                                minimumFractionDigits: 2,
+                                                maximumFractionDigits: 2,
+                                            })] })] }), _jsxs("div", { className: "flex justify-between text-sm pt-2 border-t border-gray-200", children: [_jsx("span", { className: "text-gray-900 font-semibold", children: "Total (incl. tax):" }), _jsxs("span", { className: "font-bold text-gray-900", children: [currency, " ", calculatedValues.totalPriceTaxIncl.toLocaleString("en-US", {
+                                                minimumFractionDigits: 2,
+                                                maximumFractionDigits: 2,
+                                            })] })] })] })] }), _jsxs("div", { className: "border-t border-gray-200 p-4 bg-white flex gap-3", children: [_jsx("button", { onClick: onCancel, className: "flex-1 px-4 py-3 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors font-medium text-gray-700", children: "Cancel" }), _jsx("button", { onClick: handleSave, className: "flex-1 px-4 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors font-medium", children: "Save Line Item" })] })] }));
+}

package/dist/editors/invoice/components/lineItemsEmptyState.d.ts

@@ -0,0 +1,6 @@
+type LineItemsEmptyStateProps = {
+    onAddItem: () => void;
+};
+export declare function LineItemsEmptyState({ onAddItem }: LineItemsEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=lineItemsEmptyState.d.ts.map

package/dist/editors/invoice/components/lineItemsEmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineItemsEmptyState.d.ts","sourceRoot":"","sources":["../../../../editors/invoice/components/lineItemsEmptyState.tsx"],"names":[],"mappings":"AAEA,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,EAAE,wBAAwB,2CAoB1E"}

package/dist/editors/invoice/components/lineItemsEmptyState.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileText } from "lucide-react";
+export function LineItemsEmptyState({ onAddItem }) {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-6 px-4 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300", children: [_jsx("div", { className: "w-10 h-10 mb-3 bg-gray-100 rounded-full flex items-center justify-center", children: _jsx(FileText, { className: "w-5 h-5 text-gray-400" }) }), _jsx("h3", { className: "text-base font-semibold text-gray-900 mb-1", children: "No line items yet" }), _jsx("p", { className: "text-sm text-gray-600 mb-4 text-center max-w-xs", children: "Add your first line item to start building your invoice" }), _jsx("button", { onClick: onAddItem, className: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors font-medium text-sm", children: "Add Your First Line Item" })] }));
+}

package/dist/editors/invoice/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/invoice/editor.tsx"],"names":[],"mappings":"AA6CA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,GAAG,kDAi7BxC"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/invoice/editor.tsx"],"names":[],"mappings":"AA6CA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,GAAG,kDA0mCxC"}

package/dist/editors/invoice/editor.js

@@ -30,6 +30,8 @@ function isFiatCurrency(currency) {
 export default function Editor(props) {
     const [doc, dispatch] = useDocumentById(props.documentId);
     const state = doc?.state.global;
+    // Mobile header menu state
+    const [mobileHeaderOpen, setMobileHeaderOpen] = useState(false);
     if (!state) {
         console.log("Document state not found from document id", props.documentId);
         return null;
@@ -363,23 +365,39 @@ export default function Editor(props) {
         reportPaymentIssue: "Confirm",
         // Add more labels as needed
     };
-    return (_jsxs("div", { className: "editor-container", children: [_jsx(ToastContainer, { position: "bottom-right", autoClose: 5000, hideProgressBar: false, newestOnTop: false, closeOnClick: false, rtl: false, pauseOnFocusLoss: true, draggable: true, pauseOnHover: true, theme: "light" }), _jsxs("div", { className: "flex items-center justify-between gap-4 mb-6", children: [_jsxs("div", { className: "flex items-center gap-4 flex-nowrap", children: [_jsx("h1", { className: "text-3xl font-bold whitespace-nowrap", children: "Invoice" }), _jsx(InputField, { placeholder: "Add invoice number", value: invoiceNoInput, handleInputChange: (e) => setInvoiceNoInput(e.target.value), onBlur: (e) => {
-                                    const newValue = e.target.value;
-                                    if (newValue !== state.invoiceNo) {
-                                        dispatch(actions.editInvoice({ invoiceNo: newValue }));
-                                    }
-                                }, input: invoiceNoInput, validation: invoiceValidation }), _jsxs("div", { className: "relative", ref: uploadDropdownRef, children: [_jsxs("button", { onClick: () => setUploadDropdownOpen(!uploadDropdownOpen), className: "inline-flex items-center h-10 px-4 rounded bg-blue-500 hover:bg-blue-600 text-white font-medium transition-colors whitespace-nowrap cursor-pointer", disabled: isPdfLoading, children: [isPdfLoading ? "Processing..." : "Upload File", _jsx("svg", { className: "w-4 h-4 ml-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })] }), uploadDropdownOpen && !isPdfLoading && (_jsx("div", { className: "absolute z-10 mt-1 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "py-1", role: "menu", "aria-orientation": "vertical", children: [_jsxs("label", { className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: ["Upload UBL", _jsx("input", { accept: ".xml", className: "hidden", onChange: (e) => {
-                                                                handleFileUpload(e);
-                                                                setUploadDropdownOpen(false);
-                                                            }, type: "file" })] }), _jsx(PDFUploader, { dispatch: dispatch, changeDropdownOpen: setUploadDropdownOpen })] }) }))] }), _jsxs("div", { className: "relative", ref: exportDropdownRef, children: [_jsxs("button", { onClick: () => setExportDropdownOpen(!exportDropdownOpen), className: "inline-flex items-center h-10 px-4 rounded bg-black hover:bg-gray-800 text-white font-medium transition-colors whitespace-nowrap cursor-pointer", children: ["Export File", _jsx("svg", { className: "w-4 h-4 ml-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })] }), exportDropdownOpen && (_jsx("div", { className: "absolute z-10 mt-1 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "py-1", role: "menu", "aria-orientation": "vertical", children: [_jsx("button", { onClick: () => {
-                                                        handleExportUBL();
-                                                        setExportDropdownOpen(false);
-                                                    }, className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: "Export UBL" }), _jsx("button", { onClick: () => {
-                                                        handleExportPDF();
-                                                        setExportDropdownOpen(false);
-                                                    }, className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: "Export PDF" })] }) }))] })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsx(CurrencyForm, { currency: state.currency, handleInputChange: (e) => {
-                                handleCurrencyChange(e.target.value);
-                            }, validation: currencyValidation }) }), _jsx(SelectField, { options: STATUS_OPTIONS, value: state.status, onChange: (value) => handleStatusChange(value) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "border border-gray-200 rounded-lg p-4", children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Issuer" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "mb-2", children: [_jsx("label", { className: "block mb-1 text-sm", children: "Issue Date:" }), _jsx(DatePicker, { name: "issueDate", className: String.raw `w-full p-0`, onChange: (e) => {
+    return (_jsxs("div", { className: "editor-container", children: [_jsx(ToastContainer, { position: "bottom-right", autoClose: 5000, hideProgressBar: false, newestOnTop: false, closeOnClick: false, rtl: false, pauseOnFocusLoss: true, draggable: true, pauseOnHover: true, theme: "light" }), _jsxs("div", { className: "mb-6", children: [_jsxs("div", { className: "hidden md:flex flex-row items-center justify-between gap-4", children: [_jsxs("div", { className: "flex flex-row items-center gap-4 flex-wrap", children: [_jsx("h1", { className: "text-3xl font-bold whitespace-nowrap", children: "Invoice" }), _jsx(InputField, { placeholder: "Add invoice number", value: invoiceNoInput, handleInputChange: (e) => setInvoiceNoInput(e.target.value), onBlur: (e) => {
+                                            const newValue = e.target.value;
+                                            if (newValue !== state.invoiceNo) {
+                                                dispatch(actions.editInvoice({ invoiceNo: newValue }));
+                                            }
+                                        }, input: invoiceNoInput, validation: invoiceValidation }), _jsxs("div", { className: "relative", ref: uploadDropdownRef, children: [_jsxs("button", { onClick: () => setUploadDropdownOpen(!uploadDropdownOpen), className: "inline-flex items-center h-10 px-4 rounded bg-blue-500 hover:bg-blue-600 text-white font-medium transition-colors whitespace-nowrap cursor-pointer", disabled: isPdfLoading, children: [isPdfLoading ? "Processing..." : "Upload File", _jsx("svg", { className: "w-4 h-4 ml-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })] }), uploadDropdownOpen && !isPdfLoading && (_jsx("div", { className: "absolute z-10 mt-1 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "py-1", role: "menu", "aria-orientation": "vertical", children: [_jsxs("label", { className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: ["Upload UBL", _jsx("input", { accept: ".xml", className: "hidden", onChange: (e) => {
+                                                                        handleFileUpload(e);
+                                                                        setUploadDropdownOpen(false);
+                                                                    }, type: "file" })] }), _jsx(PDFUploader, { dispatch: dispatch, changeDropdownOpen: setUploadDropdownOpen })] }) }))] }), _jsxs("div", { className: "relative", ref: exportDropdownRef, children: [_jsxs("button", { onClick: () => setExportDropdownOpen(!exportDropdownOpen), className: "inline-flex items-center h-10 px-4 rounded bg-black hover:bg-gray-800 text-white font-medium transition-colors whitespace-nowrap cursor-pointer", children: ["Export File", _jsx("svg", { className: "w-4 h-4 ml-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })] }), exportDropdownOpen && (_jsx("div", { className: "absolute z-10 mt-1 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "py-1", role: "menu", "aria-orientation": "vertical", children: [_jsx("button", { onClick: () => {
+                                                                handleExportUBL();
+                                                                setExportDropdownOpen(false);
+                                                            }, className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: "Export UBL" }), _jsx("button", { onClick: () => {
+                                                                handleExportPDF();
+                                                                setExportDropdownOpen(false);
+                                                            }, className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: "Export PDF" })] }) }))] })] }), _jsxs("div", { className: "flex flex-row items-center gap-4", children: [_jsx(CurrencyForm, { currency: state.currency, handleInputChange: (e) => {
+                                            handleCurrencyChange(e.target.value);
+                                        }, validation: currencyValidation }), _jsx(SelectField, { options: STATUS_OPTIONS, value: state.status, onChange: (value) => handleStatusChange(value) })] })] }), _jsxs("div", { className: "md:hidden", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Invoice" }), _jsx("button", { onClick: () => setMobileHeaderOpen(!mobileHeaderOpen), className: "inline-flex items-center justify-center w-10 h-10 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors cursor-pointer", "aria-label": "Toggle invoice settings", children: mobileHeaderOpen ? (_jsx("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })) : (_jsx("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" }) })) })] }), !mobileHeaderOpen && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 mb-2", children: [_jsx("span", { className: "font-medium", children: state.invoiceNo || "No invoice #" }), _jsx("span", { children: "\u2022" }), _jsx("span", { children: state.currency }), _jsx("span", { children: "\u2022" }), _jsx("span", { className: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800", children: state.status })] })), mobileHeaderOpen && (_jsxs("div", { className: "bg-white border border-gray-200 rounded-lg p-4 space-y-4 shadow-sm", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Invoice Number" }), _jsx(InputField, { placeholder: "Add invoice number", value: invoiceNoInput, handleInputChange: (e) => setInvoiceNoInput(e.target.value), onBlur: (e) => {
+                                                    const newValue = e.target.value;
+                                                    if (newValue !== state.invoiceNo) {
+                                                        dispatch(actions.editInvoice({ invoiceNo: newValue }));
+                                                    }
+                                                }, input: invoiceNoInput, validation: invoiceValidation })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Currency" }), _jsx(CurrencyForm, { currency: state.currency, handleInputChange: (e) => {
+                                                    handleCurrencyChange(e.target.value);
+                                                }, validation: currencyValidation })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Status" }), _jsx(SelectField, { options: STATUS_OPTIONS, value: state.status, onChange: (value) => handleStatusChange(value) })] }), _jsxs("div", { className: "space-y-2 pt-2 border-t border-gray-200", children: [_jsxs("div", { className: "relative", ref: uploadDropdownRef, children: [_jsxs("button", { onClick: () => setUploadDropdownOpen(!uploadDropdownOpen), className: "w-full inline-flex items-center justify-center h-10 px-4 rounded bg-blue-500 hover:bg-blue-600 text-white font-medium transition-colors cursor-pointer", disabled: isPdfLoading, children: [isPdfLoading ? "Processing..." : "Upload File", _jsx("svg", { className: "w-4 h-4 ml-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })] }), uploadDropdownOpen && !isPdfLoading && (_jsx("div", { className: "absolute z-10 mt-1 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "py-1", role: "menu", children: [_jsxs("label", { className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: ["Upload UBL", _jsx("input", { accept: ".xml", className: "hidden", onChange: (e) => {
+                                                                                handleFileUpload(e);
+                                                                                setUploadDropdownOpen(false);
+                                                                            }, type: "file" })] }), _jsx(PDFUploader, { dispatch: dispatch, changeDropdownOpen: setUploadDropdownOpen })] }) }))] }), _jsxs("div", { className: "relative", ref: exportDropdownRef, children: [_jsxs("button", { onClick: () => setExportDropdownOpen(!exportDropdownOpen), className: "w-full inline-flex items-center justify-center h-10 px-4 rounded bg-black hover:bg-gray-800 text-white font-medium transition-colors cursor-pointer", children: ["Export File", _jsx("svg", { className: "w-4 h-4 ml-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })] }), exportDropdownOpen && (_jsx("div", { className: "absolute z-10 mt-1 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "py-1", role: "menu", children: [_jsx("button", { onClick: () => {
+                                                                        handleExportUBL();
+                                                                        setExportDropdownOpen(false);
+                                                                    }, className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: "Export UBL" }), _jsx("button", { onClick: () => {
+                                                                        handleExportPDF();
+                                                                        setExportDropdownOpen(false);
+                                                                    }, className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: "Export PDF" })] }) }))] })] })] }))] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-0 lg:gap-4", children: [_jsxs("div", { className: "border-0 lg:border lg:border-gray-200 lg:rounded-lg p-0 lg:p-4", children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Issuer" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "mb-2", children: [_jsx("label", { className: "block mb-1 text-sm", children: "Issue Date:" }), _jsx(DatePicker, { name: "issueDate", className: String.raw `w-full p-0`, onChange: (e) => {
                                                     const newDate = e.target.value.split("T")[0];
                                                     dispatch(actions.editInvoice({
                                                         dateIssued: newDate,
@@ -389,7 +407,7 @@ export default function Editor(props) {
                                                     if (newValue !== state.dateDelivered) {
                                                         dispatch(actions.editInvoice({ dateDelivered: newValue }));
                                                     }
-                                                }, value: state.dateDelivered || "" })] })] }), _jsx(LegalEntityForm, { legalEntity: state.issuer, onChangeInfo: (input) => dispatch(actions.editIssuer(input)), onChangeBank: (input) => dispatch(actions.editIssuerBank(input)), onChangeWallet: (input) => dispatch(actions.editIssuerWallet(input)), basicInfoDisabled: false, bankDisabled: !fiatMode, walletDisabled: fiatMode, currency: state.currency, status: state.status, walletvalidation: walletValidation, mainCountryValidation: mainCountryValidation, bankCountryValidation: bankCountryValidation, ibanvalidation: ibanValidation, bicvalidation: bicValidation, banknamevalidation: bankNameValidation, streetaddressvalidation: streetAddressValidation, cityvalidation: cityValidation, postalcodevalidation: postalCodeValidation, payeremailvalidation: payerEmailValidation, routingNumbervalidation: routingNumberValidation })] }), _jsxs("div", { className: "border border-gray-200 rounded-lg p-4", children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Payer" }), _jsxs("div", { className: "mb-2 w-64", children: [_jsx("label", { className: "block mb-1 text-sm", children: "Due Date:" }), _jsx(DatePicker, { name: "dateDue", className: String.raw `w-full p-0`, onChange: (e) => dispatch(actions.editInvoice({
+                                                }, value: state.dateDelivered || "" })] })] }), _jsx(LegalEntityForm, { legalEntity: state.issuer, onChangeInfo: (input) => dispatch(actions.editIssuer(input)), onChangeBank: (input) => dispatch(actions.editIssuerBank(input)), onChangeWallet: (input) => dispatch(actions.editIssuerWallet(input)), basicInfoDisabled: false, bankDisabled: !fiatMode, walletDisabled: fiatMode, currency: state.currency, status: state.status, walletvalidation: walletValidation, mainCountryValidation: mainCountryValidation, bankCountryValidation: bankCountryValidation, ibanvalidation: ibanValidation, bicvalidation: bicValidation, banknamevalidation: bankNameValidation, streetaddressvalidation: streetAddressValidation, cityvalidation: cityValidation, postalcodevalidation: postalCodeValidation, payeremailvalidation: payerEmailValidation, routingNumbervalidation: routingNumberValidation })] }), _jsxs("div", { className: "border-0 lg:border lg:border-gray-200 lg:rounded-lg p-0 lg:p-4", children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Payer" }), _jsxs("div", { className: "mb-2 w-64", children: [_jsx("label", { className: "block mb-1 text-sm", children: "Due Date:" }), _jsx(DatePicker, { name: "dateDue", className: String.raw `w-full p-0`, onChange: (e) => dispatch(actions.editInvoice({
                                             dateDue: e.target.value.split("T")[0],
                                         })), value: state.dateDue })] }), _jsx(LegalEntityForm, { bankDisabled: true, legalEntity: state.payer, onChangeInfo: (input) => dispatch(actions.editPayer(input)), currency: state.currency, status: state.status, payeremailvalidation: payerEmailValidation })] })] }), _jsx("div", { className: "mb-8", children: _jsx(LineItemsTable, { currency: state.currency, lineItems: state.lineItems.map((item) => ({
                         ...item,
@@ -397,7 +415,7 @@ export default function Editor(props) {
                     })), onAddItem: (item) => dispatch(actions.addLineItem(item)), onDeleteItem: (input) => dispatch(actions.deleteLineItem(input)), onUpdateCurrency: (input) => {
                         setFiatMode(input.currency !== "USDS");
                         dispatch(actions.editInvoice(input));
-                    }, onUpdateItem: (item) => dispatch(actions.editLineItem(item)), onEditingItemChange: setEditingItemValues, dispatch: dispatch, paymentAccounts: state.invoiceTags || [] }) }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-2 gap-4", children: [_jsx("div", { className: "col-span-1", children: _jsx("div", { className: "", children: _jsx(Textarea, { label: "Notes", placeholder: "Add notes", autoExpand: false, rows: 4, multiline: true, value: notes, onBlur: (e) => {
+                    }, onUpdateItem: (item) => dispatch(actions.editLineItem(item)), onEditingItemChange: setEditingItemValues, dispatch: dispatch, paymentAccounts: state.invoiceTags || [] }) }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx("div", { className: "col-span-1", children: _jsx("div", { className: "", children: _jsx(Textarea, { label: "Notes", placeholder: "Add notes", autoExpand: false, rows: 4, multiline: true, value: notes, onBlur: (e) => {
                                     const newValue = e.target.value;
                                     if (newValue !== state.notes) {
                                         dispatch(actions.editInvoice({ notes: newValue }));

package/dist/editors/invoice/ingestPDF.js

@@ -6,7 +6,7 @@ import { uploadPdfChunked } from "./uploadPdfChunked.js";
 import { getCountryCodeFromName } from "./utils/utils.js";
 let GRAPHQL_URL = 'http://localhost:4001/graphql/invoice';
 if (!window.document.baseURI.includes('localhost')) {
-    GRAPHQL_URL = 'https://switchboard.powerhouse.xyz/graphql/invoice';
+    GRAPHQL_URL = 'https://switchboard-dev.powerhouse.xyz/graphql/invoice';
 }
 export async function loadPDFFile({ file, dispatch, }) {
     if (!file)

package/dist/editors/invoice/invoiceToGnosis.js

@@ -4,7 +4,7 @@ import { actions } from "../../document-models/invoice/index.js";
 import { generateId } from "document-model";
 let GRAPHQL_URL = "http://localhost:4001/graphql/invoice";
 if (!window.document.baseURI.includes('localhost')) {
-    GRAPHQL_URL = 'https://switchboard.powerhouse.xyz/graphql/invoice';
+    GRAPHQL_URL = 'https://switchboard-dev.powerhouse.xyz/graphql/invoice';
 }
 const InvoiceToGnosis = ({ docState, dispatch, }) => {
     const [isLoading, setIsLoading] = useState(false);

package/dist/editors/invoice/lineItemTags/lineItemTags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lineItemTags.d.ts","sourceRoot":"","sources":["../../../../editors/invoice/lineItemTags/lineItemTags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKjC,OAAO,EAAW,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAGhF,UAAU,gBAAgB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B;AAED,UAAU,sBAAsB;IAC9B,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACxB,eAAe,EAAE,UAAU,EAAE,CAAC;CAC/B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,OAAO,EACP,QAAQ,EACR,eAAe,GAChB,EAAE,sBAAsB,2CA2LxB"}
+{"version":3,"file":"lineItemTags.d.ts","sourceRoot":"","sources":["../../../../editors/invoice/lineItemTags/lineItemTags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAY,MAAM,OAAO,CAAC;AAK3C,OAAO,EAAW,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAKhF,UAAU,gBAAgB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B;AAED,UAAU,sBAAsB;IAC9B,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACxB,eAAe,EAAE,UAAU,EAAE,CAAC;CAC/B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,OAAO,EACP,QAAQ,EACR,eAAe,GAChB,EAAE,sBAAsB,2CA0PxB"}

package/dist/editors/invoice/lineItemTags/lineItemTags.js

@@ -1,11 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { X, Tag } from "lucide-react";
 import { Button } from "@powerhousedao/design-system";
 import { Select, DatePicker } from "@powerhousedao/document-engineering/ui";
 import { expenseAccountOptions, paymentAccountOptions } from "./tagMapping.js";
 import { actions } from "../../../document-models/invoice/index.js";
 import { InputField } from "../components/inputField.js";
+import { TagCard } from "./tagCard.js";
+import { TagMobileModal } from "./tagMobileModal.js";
 export function LineItemTagsTable({ lineItems, onClose, dispatch, paymentAccounts, }) {
+    const [mobileEditItem, setMobileEditItem] = useState(null);
+    const [showMobileModal, setShowMobileModal] = useState(false);
     const handleReset = () => {
         // Resetting all tags to empty values
         lineItems.forEach((item) => {
@@ -27,11 +32,19 @@ export function LineItemTagsTable({ lineItems, onClose, dispatch, paymentAccount
             }));
         });
     };
+    const handleMobileEdit = (item) => {
+        setMobileEditItem(item);
+        setShowMobileModal(true);
+    };
+    const handleCloseMobileModal = () => {
+        setShowMobileModal(false);
+        setMobileEditItem(null);
+    };
     // Get the last payment account value from the paymentAccounts to display in the payment account select
     const selectedPaymentAccountValue = paymentAccounts && paymentAccounts.length > 0
         ? (paymentAccounts[paymentAccounts.length - 1].value ?? "")
         : "";
-    return (_jsxs("div", { className: "w-full", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 p-6 bg-white z-10", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("h2", { className: "text-2xl font-semibold text-gray-900", children: "Assign Tags " }), _jsx(Tag, { style: { width: 28, height: 28, color: "white", fill: "#475264" } })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { color: "light", size: "medium", onClick: handleReset, children: ["Reset", " "] }), _jsx("button", { onClick: onClose, className: "rounded-full p-2 hover:bg-gray-100", children: _jsx(X, { size: 24, className: "text-gray-500" }) })] })] }), _jsx("div", { className: "overflow-x-auto rounded-lg border border-gray-200", children: _jsxs("table", { className: "w-full border-collapse bg-white", children: [_jsx("thead", { className: "bg-gray-50 z-10", children: _jsxs("tr", { children: [_jsx("th", { className: "border-b border-gray-200 p-3 text-left", children: "Item" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-left", children: "Period" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-left", children: "Xero Expense Account" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", children: "Total" })] }) }), _jsx("tbody", { children: lineItems.map((item) => (_jsxs("tr", { className: "hover:bg-gray-50", children: [_jsx("td", { className: "border-b border-gray-200 p-3", children: _jsx(InputField, { value: item.item, handleInputChange: (e) => { }, onBlur: (e) => {
+    return (_jsxs("div", { className: "w-full", children: [showMobileModal && mobileEditItem && (_jsx(TagMobileModal, { item: mobileEditItem, onClose: handleCloseMobileModal, dispatch: dispatch })), _jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 p-6 bg-white z-10", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("h2", { className: "text-2xl font-semibold text-gray-900", children: "Assign Tags " }), _jsx(Tag, { style: { width: 28, height: 28, color: "white", fill: "#475264" } })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { color: "light", size: "medium", onClick: handleReset, children: ["Reset", " "] }), _jsx("button", { onClick: onClose, className: "rounded-full p-2 hover:bg-gray-100", children: _jsx(X, { size: 24, className: "text-gray-500" }) })] })] }), _jsx("div", { className: "hidden md:block overflow-x-auto rounded-lg border border-gray-200", children: _jsxs("table", { className: "w-full border-collapse bg-white", children: [_jsx("thead", { className: "bg-gray-50 z-10", children: _jsxs("tr", { children: [_jsx("th", { className: "border-b border-gray-200 p-3 text-left", children: "Item" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-left", children: "Period" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-left", children: "Xero Expense Account" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", children: "Total" })] }) }), _jsx("tbody", { children: lineItems.map((item) => (_jsxs("tr", { className: "hover:bg-gray-50", children: [_jsx("td", { className: "border-b border-gray-200 p-3", children: _jsx(InputField, { value: item.item, handleInputChange: (e) => { }, onBlur: (e) => {
                                                 dispatch(actions.editLineItem({
                                                     id: item.id,
                                                     description: e.target.value,
@@ -58,7 +71,16 @@ export function LineItemTagsTable({ lineItems, onClose, dispatch, paymentAccount
                                                     value: value,
                                                     label: expenseAccountOptions.find((option) => option.value === value)?.label,
                                                 }));
-                                            } }) }), _jsx("td", { className: "border-b border-gray-200 p-3 text-right font-medium", children: item.total })] }, item.id))) })] }) }), _jsx("div", { className: "border-t border-gray-200 p-6", children: _jsxs("div", { className: "flex items-center justify-end gap-4", children: [_jsx("label", { className: "text-lg font-medium text-gray-900", children: "Payment Account" }), _jsx(Select, { options: paymentAccountOptions, value: paymentAccountOptions.find((option) => option.value === selectedPaymentAccountValue)?.value ?? "", placeholder: "Select Payment Account", searchable: true, onChange: (value) => {
+                                            } }) }), _jsx("td", { className: "border-b border-gray-200 p-3 text-right font-medium", children: item.total })] }, item.id))) })] }) }), _jsx("div", { className: "md:hidden p-4 space-y-3", children: lineItems.map((item) => (_jsx(TagCard, { item: item, onEdit: () => handleMobileEdit(item) }, item.id))) }), _jsx("div", { className: "hidden md:block border-t border-gray-200 p-6", children: _jsxs("div", { className: "flex items-center justify-end gap-4", children: [_jsx("label", { className: "text-lg font-medium text-gray-900", children: "Payment Account" }), _jsx(Select, { options: paymentAccountOptions, value: paymentAccountOptions.find((option) => option.value === selectedPaymentAccountValue)?.value ?? "", placeholder: "Select Payment Account", searchable: true, onChange: (value) => {
+                                const selectedLabel = paymentAccountOptions.find((option) => option.value === value)
+                                    ?.label || "";
+                                const cleanLabel = selectedLabel.replace(/\s+\w+$/, "").trim();
+                                dispatch(actions.setInvoiceTag({
+                                    dimension: "xero-payment-account",
+                                    value: value,
+                                    label: cleanLabel,
+                                }));
+                            }, style: { width: "230px" } })] }) }), _jsx("div", { className: "md:hidden p-4 border-t border-gray-200", children: _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Payment Account" }), _jsx(Select, { options: paymentAccountOptions, value: paymentAccountOptions.find((option) => option.value === selectedPaymentAccountValue)?.value ?? "", placeholder: "Select Payment Account", searchable: true, onChange: (value) => {
                                 const selectedLabel = paymentAccountOptions.find((option) => option.value === value)
                                     ?.label || "";
                                 const cleanLabel = selectedLabel.replace(/\s+\w+$/, "").trim();
@@ -67,5 +89,5 @@ export function LineItemTagsTable({ lineItems, onClose, dispatch, paymentAccount
                                     value: value,
                                     label: cleanLabel,
                                 }));
-                            }, style: { width: "230px" } })] }) })] }));
+                            } })] }) })] }));
 }

package/dist/editors/invoice/lineItemTags/tagCard.d.ts

@@ -0,0 +1,15 @@
+type TagAssignmentRow = {
+    id: string;
+    item: string;
+    period: string;
+    expenseAccount: string;
+    total: string;
+    lineItemTag: any[];
+};
+type TagCardProps = {
+    item: TagAssignmentRow;
+    onEdit: () => void;
+};
+export declare function TagCard({ item, onEdit }: TagCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tagCard.d.ts.map

package/dist/editors/invoice/lineItemTags/tagCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tagCard.d.ts","sourceRoot":"","sources":["../../../../editors/invoice/lineItemTags/tagCard.tsx"],"names":[],"mappings":"AAGA,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,GAAG,EAAE,CAAC;CACpB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,gBAAgB,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,YAAY,2CAoErD"}

package/dist/editors/invoice/lineItemTags/tagCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreVertical, Edit } from "lucide-react";
+import { useState } from "react";
+export function TagCard({ item, onEdit }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    // Get tag values
+    const periodTag = item.lineItemTag.find((tag) => tag.dimension === "accounting-period");
+    const expenseTag = item.lineItemTag.find((tag) => tag.dimension === "xero-expense-account");
+    return (_jsxs("div", { className: "bg-white border border-gray-200 rounded-lg mb-3 overflow-hidden", children: [_jsxs("div", { className: "p-4 cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [_jsxs("div", { className: "flex items-start justify-between mb-2", children: [_jsx("div", { className: "flex-1", children: _jsx("h5", { className: "font-medium text-gray-900 text-sm", children: item.item || "Untitled Item" }) }), _jsx("button", { className: "p-1 hover:bg-gray-100 rounded", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onEdit();
+                                }, children: _jsx(MoreVertical, { className: "w-5 h-5 text-gray-500" }) })] }), _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("div", { className: "text-gray-600", children: periodTag?.label || "No period set" }), _jsx("div", { className: "font-semibold text-gray-900", children: item.total })] }), isExpanded && (_jsx("div", { className: "mt-3 pt-3 border-t border-gray-100 space-y-2 text-sm", children: _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600", children: "Expense Account:" }), _jsx("span", { className: "text-gray-900 text-right max-w-[60%]", children: expenseTag?.label || "Not set" })] }) }))] }), _jsx("div", { className: "border-t border-gray-200 bg-gray-50", children: _jsxs("button", { className: "w-full flex items-center justify-center gap-3 px-4 py-3 text-sm hover:bg-gray-100 transition-colors", onClick: onEdit, children: [_jsx(Edit, { className: "w-4 h-4 text-blue-600" }), _jsx("span", { children: "Edit Tags" })] }) })] }));
+}

package/dist/editors/invoice/lineItemTags/tagMobileModal.d.ts

@@ -0,0 +1,18 @@
+import { Dispatch } from "react";
+import { InvoiceTag } from "../../../document-models/invoice/index.js";
+type TagAssignmentRow = {
+    id: string;
+    item: string;
+    period: string;
+    expenseAccount: string;
+    total: string;
+    lineItemTag: InvoiceTag[];
+};
+type TagMobileModalProps = {
+    item: TagAssignmentRow;
+    onClose: () => void;
+    dispatch: Dispatch<any>;
+};
+export declare function TagMobileModal({ item, onClose, dispatch, }: TagMobileModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tagMobileModal.d.ts.map

package/dist/editors/invoice/lineItemTags/tagMobileModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tagMobileModal.d.ts","sourceRoot":"","sources":["../../../../editors/invoice/lineItemTags/tagMobileModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOtD,OAAO,EAAW,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAEhF,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;CACzB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,OAAO,EACP,QAAQ,GACT,EAAE,mBAAmB,2CAkLrB"}

package/dist/editors/invoice/lineItemTags/tagMobileModal.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useState, useEffect } from "react";
+import { InputField } from "../components/inputField.js";
+import { Select, DatePicker } from "@powerhousedao/document-engineering/ui";
+import { expenseAccountOptions, } from "./tagMapping.js";
+import { actions } from "../../../document-models/invoice/index.js";
+export function TagMobileModal({ item, onClose, dispatch, }) {
+    const [description, setDescription] = useState(item.item);
+    // Get current tag values
+    const periodTag = item.lineItemTag.find((tag) => tag.dimension === "accounting-period");
+    const expenseTag = item.lineItemTag.find((tag) => tag.dimension === "xero-expense-account");
+    const [periodValue, setPeriodValue] = useState(periodTag?.label || "");
+    const [periodStoredValue, setPeriodStoredValue] = useState(periodTag?.value || "");
+    const [expenseValue, setExpenseValue] = useState(expenseTag?.value || "");
+    const [expenseLabel, setExpenseLabel] = useState(expenseTag?.label || "");
+    // Prevent body scroll when modal is open
+    useEffect(() => {
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = "unset";
+        };
+    }, []);
+    const handleSave = () => {
+        // Save description if changed
+        if (description !== item.item) {
+            dispatch(actions.editLineItem({
+                id: item.id,
+                description: description,
+            }));
+        }
+        // Save period if changed
+        if (periodStoredValue !== periodTag?.value) {
+            dispatch(actions.setLineItemTag({
+                lineItemId: item.id,
+                dimension: "accounting-period",
+                value: periodStoredValue,
+                label: periodValue,
+            }));
+        }
+        // Save expense account if changed
+        if (expenseValue !== expenseTag?.value) {
+            dispatch(actions.setLineItemTag({
+                lineItemId: item.id,
+                dimension: "xero-expense-account",
+                value: expenseValue,
+                label: expenseLabel,
+            }));
+        }
+        onClose();
+    };
+    return (_jsxs("div", { className: "fixed inset-0 z-50 bg-white flex flex-col", children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 bg-white", children: [_jsx("button", { onClick: onClose, className: "p-2 hover:bg-gray-100 rounded-full transition-colors", "aria-label": "Cancel", children: _jsx(X, { className: "w-5 h-5" }) }), _jsx("h2", { className: "text-lg font-semibold", children: "Edit Tags" }), _jsx("button", { onClick: handleSave, className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors font-medium text-sm", children: "Save" })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Item Description" }), _jsx(InputField, { value: description, handleInputChange: (e) => setDescription(e.target.value), onBlur: () => { }, placeholder: "Enter item description", className: "w-full" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Accounting Period" }), _jsx(DatePicker, { name: "period", dateFormat: "YYYY-MM", autoClose: true, placeholder: "Select Period", value: periodValue, onChange: (e) => {
+                                    const newValue = new Date(e.target.value)
+                                        .toLocaleDateString("en-US", {
+                                        year: "numeric",
+                                        month: "numeric",
+                                    })
+                                        .split("/")
+                                        .reverse()
+                                        .join("/");
+                                    const newLabel = new Date(e.target.value).toLocaleDateString("en-US", {
+                                        month: "long",
+                                        year: "numeric",
+                                    });
+                                    setPeriodValue(newLabel);
+                                    setPeriodStoredValue(newValue);
+                                } })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Xero Expense Account" }), _jsx(Select, { options: expenseAccountOptions, value: expenseValue, placeholder: "Select Expense Account", searchable: true, onChange: (value) => {
+                                    setExpenseValue(value);
+                                    setExpenseLabel(expenseAccountOptions.find((option) => option.value === value)?.label || "");
+                                } })] }), _jsx("div", { className: "bg-gray-50 rounded-lg p-4", children: _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm text-gray-600", children: "Total:" }), _jsx("span", { className: "text-lg font-bold text-gray-900", children: item.total })] }) })] }), _jsxs("div", { className: "border-t border-gray-200 p-4 bg-white flex gap-3", children: [_jsx("button", { onClick: onClose, className: "flex-1 px-4 py-3 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors font-medium text-gray-700", children: "Cancel" }), _jsx("button", { onClick: handleSave, className: "flex-1 px-4 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors font-medium", children: "Save Tags" })] })] }));
+}

package/dist/editors/invoice/lineItems.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lineItems.d.ts","sourceRoot":"","sources":["../../../editors/invoice/lineItems.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,UAAU,EAChB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAKL,KAAK,QAAQ,EAEd,MAAM,OAAO,CAAC;AAYf,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKlD;AAED,KAAK,QAAQ,GAAG;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B,CAAC;AAobF,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,SAAS,EAAE,QAAQ,EAAE,CAAC;IAC/B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,YAAY,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,gBAAgB,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAC7B,MAAM,EAAE;QACN,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,EAAE,MAAM,CAAC;QACjB,gBAAgB,EAAE,MAAM,CAAC;QACzB,gBAAgB,EAAE,MAAM,CAAC;KAC1B,GAAG,IAAI,KACL,IAAI,CAAC;IACV,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACjC,QAAQ,CAAC,eAAe,EAAE,UAAU,EAAE,CAAC;CACxC,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,EACR,eAAe,GAChB,EAAE,mBAAmB,2CAsSrB"}
+{"version":3,"file":"lineItems.d.ts","sourceRoot":"","sources":["../../../editors/invoice/lineItems.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,UAAU,EAChB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAKL,KAAK,QAAQ,EAEd,MAAM,OAAO,CAAC;AAef,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKlD;AAED,KAAK,QAAQ,GAAG;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B,CAAC;AAobF,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,SAAS,EAAE,QAAQ,EAAE,CAAC;IAC/B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,YAAY,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,gBAAgB,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAC7B,MAAM,EAAE;QACN,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,EAAE,MAAM,CAAC;QACjB,gBAAgB,EAAE,MAAM,CAAC;QACzB,gBAAgB,EAAE,MAAM,CAAC;KAC1B,GAAG,IAAI,KACL,IAAI,CAAC;IACV,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACjC,QAAQ,CAAC,eAAe,EAAE,UAAU,EAAE,CAAC;CACxC,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,EACR,eAAe,GAChB,EAAE,mBAAmB,2CA8ZrB"}

package/dist/editors/invoice/lineItems.js

@@ -6,6 +6,9 @@ import { Tag } from "lucide-react";
 import { NumberForm } from "./components/numberForm.js";
 import { InputField } from "./components/inputField.js";
 import { LineItemTagsTable } from "./lineItemTags/lineItemTags.js";
+import { LineItemCard } from "./components/lineItemCard.js";
+import { LineItemMobileModal } from "./components/lineItemMobileModal.js";
+import { LineItemsEmptyState } from "./components/lineItemsEmptyState.js";
 // Helper function to get precision based on currency
 function getCurrencyPrecision(currency) {
     return currency === "USDS" || currency === "DAI" ? 6 : 2;
@@ -286,6 +289,8 @@ export function LineItemsTable({ lineItems, currency, onAddItem, onUpdateItem, o
     const [editingId, setEditingId] = useState(null);
     const [isAddingNew, setIsAddingNew] = useState(false);
     const [showTagTable, setShowTagTable] = useState(false);
+    const [mobileEditItem, setMobileEditItem] = useState(null);
+    const [showMobileModal, setShowMobileModal] = useState(false);
     const containerRef = useRef(null);
     const tableContainerRef = useRef(null);
     const tableRef = useRef(null);
@@ -346,53 +351,84 @@ export function LineItemsTable({ lineItems, currency, onAddItem, onUpdateItem, o
     if (showTagTable) {
         return (_jsx(LineItemTagsTable, { lineItems: tagAssignmentRows, onClose: () => setShowTagTable(false), dispatch: dispatch, paymentAccounts: paymentAccounts }));
     }
-    return (_jsx("div", { ref: containerRef, className: "relative w-full", children: _jsxs("div", { className: "mt-4", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx("div", { className: "flex items-center gap-4", children: _jsx("h4", { className: "text-xl font-semibold text-gray-900", children: "Line Items" }) }), _jsx(RWAButton, { className: "mb-2", disabled: isAddingNew, onClick: handleAddClick, children: "Add Line Item" })] }), _jsx("div", { ref: tableContainerRef, className: "overflow-x-auto rounded-lg border border-gray-200", children: _jsxs("table", { ref: tableRef, className: "w-full table-fixed border-collapse bg-white", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: "30%" } }), _jsx("col", { style: { width: "10%" } }), _jsx("col", { style: { width: "12%" } }), _jsx("col", { style: { width: "8%" } }), _jsx("col", {}), _jsx("col", {}), _jsx("col", {})] }), _jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "border-b border-gray-200 p-3 text-left", children: "Description" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", children: "Quantity" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", children: "Unit Price (excl. tax)" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", children: "Tax %" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", children: "Total (excl. tax)" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", children: "Total (incl. tax)" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-center", children: _jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-sm", children: "Actions" }), _jsx(Tag, { onClick: () => setShowTagTable(true), style: {
-                                                            cursor: "pointer",
-                                                            width: 28,
-                                                            height: 28,
-                                                            color: "white",
-                                                            fill: "#475264",
-                                                        } })] }) })] }) }), _jsxs("tbody", { children: [lineItems.map((item) => editingId === item.id ? (_jsx(EditableLineItem, { currency: currency, item: item, onCancel: () => setEditingId(null), onSave: (updatedItem) => {
-                                            try {
-                                                onUpdateItem(updatedItem);
-                                                setEditingId(null);
-                                            }
-                                            catch (error) {
-                                                console.error(error);
-                                                if (error?.message?.includes("Invalid action input:")) {
-                                                    try {
-                                                        const zodError = JSON.parse(error.message.split("Invalid action input: ")[1]);
-                                                        if (Array.isArray(zodError) &&
-                                                            zodError.length > 0) {
-                                                            const firstError = zodError[0];
-                                                            const errorJSX = (_jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Failed to update line item" }), _jsxs("p", { children: [firstError.message, ": "] }), zodError.map((err, index) => (_jsx("ul", { children: _jsxs("li", { className: "text-red-500 font-semibold", children: ["- ", err.path.join(".")] }) }, index)))] }));
-                                                            toast(errorJSX, {
+    // Calculate totals for mobile footer
+    const totalPriceTaxExcl = lineItems.reduce((sum, item) => sum + item.totalPriceTaxExcl, 0);
+    const totalPriceTaxIncl = lineItems.reduce((sum, item) => sum + item.totalPriceTaxIncl, 0);
+    return (_jsxs("div", { ref: containerRef, className: "relative w-full", children: [showMobileModal && (_jsx(LineItemMobileModal, { item: mobileEditItem || {}, currency: currency, isNew: !mobileEditItem?.id || mobileEditItem.id === '', onSave: (item) => {
+                    try {
+                        // If editing an item with empty ID, delete it first, then add new one
+                        if (mobileEditItem?.id === '') {
+                            onDeleteItem({ id: '' });
+                            onAddItem(item);
+                        }
+                        else if (mobileEditItem?.id) {
+                            onUpdateItem(item);
+                        }
+                        else {
+                            onAddItem(item);
+                        }
+                        setShowMobileModal(false);
+                        setMobileEditItem(null);
+                    }
+                    catch (error) {
+                        toast(error.message || "Failed to save line item", { type: "error" });
+                    }
+                }, onCancel: () => {
+                    setShowMobileModal(false);
+                    setMobileEditItem(null);
+                } }, mobileEditItem?.id || 'new')), _jsxs("div", { className: "mt-4", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx("h4", { className: "text-xl font-semibold text-gray-900", children: "Line Items" }), _jsxs("div", { className: "hidden md:flex items-center gap-3", children: [_jsxs("button", { onClick: () => setShowTagTable(true), className: "flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors text-sm font-medium text-gray-700", title: "Manage Tags for All Line Items", children: [_jsx(Tag, { className: "w-4 h-4" }), _jsx("span", { className: "hidden md:inline", children: "Manage Tags" })] }), _jsx(RWAButton, { className: "hidden md:block", disabled: isAddingNew, onClick: handleAddClick, children: "Add Line Item" })] })] }), lineItems.length === 0 && !isAddingNew && (_jsx("div", { className: "md:hidden", children: _jsx(LineItemsEmptyState, { onAddItem: () => {
+                                setMobileEditItem({});
+                                setShowMobileModal(true);
+                            } }) })), lineItems.length === 0 && !isAddingNew && (_jsx("div", { className: "hidden md:block", children: _jsx(LineItemsEmptyState, { onAddItem: handleAddClick }) })), lineItems.length > 0 && (_jsxs("div", { className: "md:hidden space-y-3", children: [_jsxs("div", { className: "flex gap-2 mb-4", children: [_jsxs("button", { onClick: () => setShowTagTable(true), className: "flex items-center justify-center gap-2 px-4 py-3 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors font-medium text-gray-700", title: "Manage Tags for All Line Items", children: [_jsx(Tag, { className: "w-4 h-4" }), _jsx("span", { children: "Tags" })] }), _jsx("button", { onClick: () => {
+                                            setMobileEditItem({});
+                                            setShowMobileModal(true);
+                                        }, className: "flex-1 py-3 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors font-medium", children: "Add Line Item" })] }), lineItems.map((item) => (_jsx(LineItemCard, { item: item, currency: currency, onEdit: () => {
+                                    setMobileEditItem(item);
+                                    setShowMobileModal(true);
+                                }, onDelete: () => {
+                                    const input = { id: item.id };
+                                    onDeleteItem(input);
+                                } }, item.id)))] })), (lineItems.length > 0 || isAddingNew) && (_jsx("div", { ref: tableContainerRef, className: "hidden md:block overflow-x-auto rounded-lg border border-gray-200", children: _jsxs("table", { ref: tableRef, className: "w-full table-fixed border-collapse bg-white", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: "30%" } }), _jsx("col", { style: { width: "10%" } }), _jsx("col", { style: { width: "12%" } }), _jsx("col", { style: { width: "8%" } }), _jsx("col", {}), _jsx("col", {}), _jsx("col", {})] }), _jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "border-b border-gray-200 p-3 text-left", children: "Description" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", children: "Quantity" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", children: "Unit Price (excl. tax)" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", children: "Tax %" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", children: "Total (excl. tax)" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", children: "Total (incl. tax)" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-center", children: "Actions" })] }) }), _jsxs("tbody", { children: [lineItems.map((item) => editingId === item.id ? (_jsx(EditableLineItem, { currency: currency, item: item, onCancel: () => setEditingId(null), onSave: (updatedItem) => {
+                                                try {
+                                                    onUpdateItem(updatedItem);
+                                                    setEditingId(null);
+                                                }
+                                                catch (error) {
+                                                    console.error(error);
+                                                    if (error?.message?.includes("Invalid action input:")) {
+                                                        try {
+                                                            const zodError = JSON.parse(error.message.split("Invalid action input: ")[1]);
+                                                            if (Array.isArray(zodError) &&
+                                                                zodError.length > 0) {
+                                                                const firstError = zodError[0];
+                                                                const errorJSX = (_jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Failed to update line item" }), _jsxs("p", { children: [firstError.message, ": "] }), zodError.map((err, index) => (_jsx("ul", { children: _jsxs("li", { className: "text-red-500 font-semibold", children: ["- ", err.path.join(".")] }) }, index)))] }));
+                                                                toast(errorJSX, {
+                                                                    type: "error",
+                                                                });
+                                                                return;
+                                                            }
+                                                        }
+                                                        catch (parseError) {
+                                                            console.error("Failed to parse Zod error:", parseError);
+                                                            toast("Invalid input data", {
                                                                 type: "error",
                                                             });
                                                             return;
                                                         }
                                                     }
-                                                    catch (parseError) {
-                                                        console.error("Failed to parse Zod error:", parseError);
-                                                        toast("Invalid input data", {
+                                                    else if (error?.message) {
+                                                        toast(error.message, {
                                                             type: "error",
                                                         });
                                                         return;
                                                     }
-                                                }
-                                                else if (error?.message) {
-                                                    toast(error.message, {
+                                                    toast("Failed to update line item", {
                                                         type: "error",
                                                     });
-                                                    return;
                                                 }
-                                                toast("Failed to update line item", {
-                                                    type: "error",
-                                                });
-                                            }
-                                        }, onEditingItemChange: onEditingItemChange }, item.id)) : (_jsxs("tr", { className: "hover:bg-gray-50 table-row", children: [_jsx("td", { className: "border-b border-gray-200 p-3 table-cell", children: item.description }), _jsx("td", { className: "border-b border-gray-200 p-3 text-right table-cell", children: item.quantity % 1 === 0
-                                                    ? item.quantity.toString()
-                                                    : item.quantity.toFixed(2) }), _jsx("td", { className: "border-b border-gray-200 p-3 text-right table-cell", children: formatNumber(item.unitPriceTaxExcl) }), _jsxs("td", { className: "border-b border-gray-200 p-3 text-right table-cell", children: [typeof item.taxPercent === "number"
-                                                        ? Math.round(item.taxPercent)
-                                                        : 0, "%"] }), _jsx("td", { className: "border-b border-gray-200 p-3 text-right font-medium table-cell", children: formatNumber(item.totalPriceTaxExcl) }), _jsx("td", { className: "border-b border-gray-200 p-3 text-right font-medium table-cell", children: formatNumber(item.totalPriceTaxIncl) }), _jsx("td", { className: "border-b border-gray-200 p-3 table-cell", children: _jsxs("div", { className: "flex justify-center space-x-2", children: [_jsx("button", { className: "rounded bg-blue-500 px-3 py-1 text-white hover:bg-blue-200", onClick: () => setEditingId(item.id), children: "Edit" }), _jsx("button", { className: "rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700", onClick: () => onDeleteItem({ id: item.id }), children: "Delete" })] }) })] }, item.id))), isAddingNew ? (_jsx(EditableLineItem, { currency: currency, item: {}, onCancel: handleCancelNewItem, onSave: handleSaveNewItem, onEditingItemChange: onEditingItemChange })) : null] })] }) })] }) }));
+                                            }, onEditingItemChange: onEditingItemChange }, item.id)) : (_jsxs("tr", { className: "hover:bg-gray-50 table-row", children: [_jsx("td", { className: "border-b border-gray-200 p-3 table-cell", children: item.description }), _jsx("td", { className: "border-b border-gray-200 p-3 text-right table-cell", children: item.quantity % 1 === 0
+                                                        ? item.quantity.toString()
+                                                        : item.quantity.toFixed(2) }), _jsx("td", { className: "border-b border-gray-200 p-3 text-right table-cell", children: formatNumber(item.unitPriceTaxExcl) }), _jsxs("td", { className: "border-b border-gray-200 p-3 text-right table-cell", children: [typeof item.taxPercent === "number"
+                                                            ? Math.round(item.taxPercent)
+                                                            : 0, "%"] }), _jsx("td", { className: "border-b border-gray-200 p-3 text-right font-medium table-cell", children: formatNumber(item.totalPriceTaxExcl) }), _jsx("td", { className: "border-b border-gray-200 p-3 text-right font-medium table-cell", children: formatNumber(item.totalPriceTaxIncl) }), _jsx("td", { className: "border-b border-gray-200 p-3 table-cell", children: _jsxs("div", { className: "flex justify-center space-x-2", children: [_jsx("button", { className: "rounded bg-blue-500 px-3 py-1 text-white hover:bg-blue-200", onClick: () => setEditingId(item.id), children: "Edit" }), _jsx("button", { className: "rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700", onClick: () => onDeleteItem({ id: item.id }), children: "Delete" })] }) })] }, item.id))), isAddingNew ? (_jsx(EditableLineItem, { currency: currency, item: {}, onCancel: handleCancelNewItem, onSave: handleSaveNewItem, onEditingItemChange: onEditingItemChange })) : null] })] }) }))] }), lineItems.length > 0 && (_jsxs("div", { className: "md:hidden mt-4 bg-white border border-gray-200 rounded-lg p-4 space-y-2", children: [_jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: "text-gray-600", children: "Subtotal (excl. tax):" }), _jsxs("span", { className: "font-medium text-gray-900", children: [currency, " ", formatNumber(totalPriceTaxExcl)] })] }), _jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: "text-gray-600", children: "Total tax:" }), _jsxs("span", { className: "font-medium text-gray-900", children: [currency, " ", formatNumber(totalPriceTaxIncl - totalPriceTaxExcl)] })] }), _jsxs("div", { className: "flex justify-between text-base pt-2 border-t border-gray-200", children: [_jsx("span", { className: "font-semibold text-gray-900", children: "Total (incl. tax):" }), _jsxs("span", { className: "font-bold text-gray-900", children: [currency, " ", formatNumber(totalPriceTaxIncl)] })] })] }))] }));
 }

package/dist/editors/invoice/requestFinance.js

@@ -4,7 +4,7 @@ import { actions } from "../../document-models/invoice/index.js";
 import { generateId } from "document-model";
 let GRAPHQL_URL = "http://localhost:4001/graphql/invoice";
 if (!window.document.baseURI.includes('localhost')) {
-    GRAPHQL_URL = 'https://switchboard.powerhouse.xyz/graphql/invoice';
+    GRAPHQL_URL = 'https://switchboard-dev.powerhouse.xyz/graphql/invoice';
 }
 const RequestFinance = ({ docState, dispatch, }) => {
     const [isLoading, setIsLoading] = useState(false);

package/dist/editors/invoice/uploadPdfChunked.js

@@ -7,7 +7,7 @@
  */
 let GRAPHQL_URL = 'http://localhost:4001/graphql/invoice';
 if (!window.document.baseURI.includes('localhost')) {
-    GRAPHQL_URL = 'https://switchboard.powerhouse.xyz/graphql/invoice';
+    GRAPHQL_URL = 'https://switchboard-dev.powerhouse.xyz/graphql/invoice';
 }
 export async function uploadPdfChunked(pdfData, endpoint = GRAPHQL_URL, chunkSize = 500 * 1024, // 500KB chunks
 onProgress) {

package/dist/style.css

@@ -354,6 +354,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -372,6 +375,9 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -427,6 +433,12 @@
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -460,6 +472,12 @@
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -496,6 +514,9 @@
   .w-full {
     width: 100%;
   }
+  .max-w-\[60\%\] {
+    max-width: 60%;
+  }
   .max-w-\[200px\] {
     max-width: 200px;
   }
@@ -508,6 +529,9 @@
   .max-w-xl {
     max-width: var(--container-xl);
   }
+  .max-w-xs {
+    max-width: var(--container-xs);
+  }
   .min-w-\[142px\] {
     min-width: 142px;
   }
@@ -566,12 +590,18 @@
   .flex-col {
     flex-direction: column;
   }
-  .flex-nowrap {
-    flex-wrap: nowrap;
+  .flex-row {
+    flex-direction: row;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
   }
   .items-center {
     align-items: center;
   }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -581,6 +611,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -600,6 +633,13 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -640,6 +680,9 @@
   .overflow-x-auto {
     overflow-x: auto;
   }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -665,6 +708,14 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -677,12 +728,19 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
   }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .border-blue-100 {
     border-color: var(--color-blue-100);
   }
   .border-blue-500 {
     border-color: var(--color-blue-500);
   }
+  .border-gray-100 {
+    border-color: var(--color-gray-100);
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -770,6 +828,9 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -800,6 +861,9 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -809,9 +873,15 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
@@ -888,12 +958,18 @@
   .text-blue-600 {
     color: var(--color-blue-600);
   }
+  .text-blue-800 {
+    color: var(--color-blue-800);
+  }
   .text-blue-900 {
     color: var(--color-blue-900);
   }
   .text-gray-50 {
     color: var(--color-gray-50);
   }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
   .text-gray-500 {
     color: var(--color-gray-500);
   }
@@ -1089,6 +1165,13 @@
       }
     }
   }
+  .hover\:bg-red-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-red-50);
+      }
+    }
+  }
   .hover\:bg-red-700 {
     &:hover {
       @media (hover: hover) {
@@ -1216,6 +1299,26 @@
       line-height: var(--tw-leading, var(--text-base--line-height));
     }
   }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
+  .md\:flex {
+    @media (width >= 48rem) {
+      display: flex;
+    }
+  }
+  .md\:hidden {
+    @media (width >= 48rem) {
+      display: none;
+    }
+  }
+  .md\:inline {
+    @media (width >= 48rem) {
+      display: inline;
+    }
+  }
   .md\:grid-cols-2 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1227,6 +1330,32 @@
       line-height: var(--tw-leading, var(--text-2xl--line-height));
     }
   }
+  .lg\:gap-4 {
+    @media (width >= 64rem) {
+      gap: calc(var(--spacing) * 4);
+    }
+  }
+  .lg\:rounded-lg {
+    @media (width >= 64rem) {
+      border-radius: var(--radius-lg);
+    }
+  }
+  .lg\:border {
+    @media (width >= 64rem) {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .lg\:border-gray-200 {
+    @media (width >= 64rem) {
+      border-color: var(--color-gray-200);
+    }
+  }
+  .lg\:p-4 {
+    @media (width >= 64rem) {
+      padding: calc(var(--spacing) * 4);
+    }
+  }
 }
 /*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@@ -19139,15 +19268,15 @@ input[type="number"] {
 }
 @media (max-width: 640px) {
   .editor-container {
-    padding: 0.25rem;
-    transform: scale(0.95);
+    padding: 0.125rem;
+    transform: none;
     transform-origin: top left;
   }
 }
 @media (min-width: 641px) and (max-width: 1023px) {
   .editor-container {
-    padding: 0.5rem;
-    transform: scale(0.9);
+    padding: 0.25rem;
+    transform: none;
     transform-origin: top left;
   }
 }
@@ -19160,6 +19289,42 @@ input[type="number"] {
     transform: none;
   }
 }
+@media (min-width: 768px) {
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+}
+@media (min-width: 768px) {
+  .md\:flex {
+    display: flex !important;
+  }
+  .md\:hidden {
+    display: none !important;
+  }
+  .md\:block {
+    display: block !important;
+  }
+  .md\:inline {
+    display: inline !important;
+  }
+}
+@media (min-width: 1024px) {
+  .lg\:gap-4 {
+    gap: 1rem !important;
+  }
+  .lg\:border {
+    border-width: 1px !important;
+  }
+  .lg\:border-gray-200 {
+    border-color: rgb(229, 231, 235) !important;
+  }
+  .lg\:rounded-lg {
+    border-radius: 0.5rem !important;
+  }
+  .lg\:p-4 {
+    padding: 1rem !important;
+  }
+}
 @property --tw-border-spacing-x {
   syntax: "<length>";
   inherits: false;

package/dist/tailwind.config.js

@@ -3,6 +3,7 @@ export default {
     content: [
         "./index.html",
         "./src/**/*.{js,ts,jsx,tsx}",
+        "./editors/**/*.{js,ts,jsx,tsx}",
     ],
     theme: {
         extend: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@powerhousedao/contributor-billing",
   "description": "Document models that help contributors of open organisations get paid anonymously for their work on a monthly basis.",
-  "version": "0.0.97",
+  "version": "0.0.99",
   "license": "AGPL-3.0-only",
   "type": "module",
   "files": [
@@ -57,9 +57,9 @@
   },
   "dependencies": {
     "@google-cloud/documentai": "^8.12.0",
-    "@powerhousedao/builder-tools": "^5.0.0-staging.21",
-    "@powerhousedao/common": "^5.0.0-staging.21",
-    "@powerhousedao/design-system": "^5.0.0-staging.21",
+    "@powerhousedao/builder-tools": "^5.0.0-staging.22",
+    "@powerhousedao/common": "^5.0.0-staging.22",
+    "@powerhousedao/design-system": "^5.0.0-staging.22",
     "@powerhousedao/document-engineering": "^1.38.0",
     "@react-pdf/renderer": "^4.3.0",
     "@safe-global/api-kit": "^3.0.1",
@@ -69,7 +69,7 @@
     "@types/cors": "^2.8.17",
     "axios": "^1.9.0",
     "cors": "^2.8.5",
-    "document-model": "^5.0.0-staging.21",
+    "document-model": "^5.0.0-staging.22",
     "dotenv": "^16.5.0",
     "error": "^10.4.0",
     "ethers": "^6.14.0",
@@ -84,20 +84,21 @@
   "devDependencies": {
     "@electric-sql/pglite": "^0.2.12",
     "@eslint/js": "^9.25.0",
+    "@playwright/test": "^1.56.0",
     "@powerhousedao/analytics-engine-core": "^0.5.0",
-    "@powerhousedao/codegen": "^5.0.0-staging.21",
-    "@powerhousedao/ph-cli": "^5.0.0-staging.21",
-    "@powerhousedao/reactor-api": "^5.0.0-staging.21",
-    "@powerhousedao/reactor-browser": "^5.0.0-staging.21",
-    "@powerhousedao/reactor-local": "^5.0.0-staging.21",
+    "@powerhousedao/codegen": "^5.0.0-staging.22",
+    "@powerhousedao/ph-cli": "^5.0.0-staging.22",
+    "@powerhousedao/reactor-api": "^5.0.0-staging.22",
+    "@powerhousedao/reactor-browser": "^5.0.0-staging.22",
+    "@powerhousedao/reactor-local": "^5.0.0-staging.22",
     "@powerhousedao/scalars": "^1.33.1-staging.5",
-    "@powerhousedao/switchboard": "^5.0.0-staging.21",
+    "@powerhousedao/switchboard": "^5.0.0-staging.22",
     "@tailwindcss/cli": "^4.1.4",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^22.14.1",
     "@types/react": "^18.3.20",
     "@vitejs/plugin-react": "^4.4.1",
-    "document-drive": "^5.0.0-staging.21",
+    "document-drive": "^5.0.0-staging.22",
     "eslint": "^9.25.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",