@powerhousedao/contributor-billing 0.0.10 → 0.0.12

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

@@ -1,47 +1,71 @@
 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 } from "@powerhousedao/document-engineering/ui";
-import { expenseAccountOptions } from "./tagMapping.js";
+import { Select, DatePicker } from "@powerhousedao/document-engineering/ui";
+import { expenseAccountOptions, paymentAccountOptions } from "./tagMapping.js";
 import { actions } from "../../../document-models/invoice/index.js";
-export function LineItemTagsTable({ lineItems, onSave, onClose, dispatch, paymentAccounts, }) {
-    const [taggedItems, setTaggedItems] = useState(lineItems);
-    const [paymentAccount, setPaymentAccount] = useState("Powerhouse USD");
-    const periodOptions = [
-        "Jan 2025",
-        "Feb 2025",
-        "Mar 2025",
-        "Apr 2025",
-        "May 2025",
-        "Jun 2025",
-    ];
-    const handleSave = () => {
-        onSave(taggedItems, paymentAccount);
-        onClose();
+import { InputField } from "../components/inputField.js";
+export function LineItemTagsTable({ lineItems, onClose, dispatch, paymentAccounts, }) {
+    const handleReset = () => {
+        // Resetting all tags to empty values
+        lineItems.forEach((item) => {
+            item.lineItemTag.forEach((tag) => {
+                dispatch(actions.setLineItemTag({
+                    lineItemId: item.id,
+                    dimension: tag.dimension,
+                    value: "",
+                    label: "",
+                }));
+            });
+        });
+        // Reset the payment account to empty value
+        paymentAccounts.forEach((tag) => {
+            dispatch(actions.setInvoiceTag({
+                dimension: tag.dimension,
+                value: "",
+                label: "",
+            }));
+        });
     };
-    const handleBackdropClick = (e) => {
-        if (e.target === e.currentTarget) {
-            onClose();
-        }
-    };
-    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", 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: taggedItems.map((item) => (_jsxs("tr", { className: "hover:bg-gray-50", children: [_jsx("td", { className: "border-b border-gray-200 p-3", children: _jsx("input", { type: "text", value: item.item, onChange: (e) => setTaggedItems((prev) => prev.map((row) => row.id === item.id
-                                                ? { ...row, item: e.target.value }
-                                                : row)), className: "w-full rounded border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none" }) }), _jsx("td", { className: "border-b border-gray-200 p-3", children: _jsxs("select", { value: item.period, onChange: (e) => setTaggedItems((prev) => prev.map((row) => row.id === item.id
-                                                ? { ...row, period: e.target.value }
-                                                : row)), className: "w-full rounded border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none", children: [_jsx("option", { value: "", children: "Select Period" }), periodOptions.map((period) => (_jsx("option", { value: period, children: period }, period)))] }) }), _jsx("td", { className: "border-b border-gray-200 p-3", children: _jsx(Select, { options: expenseAccountOptions, value: item.lineItemTag.find((tag) => tag.dimension === "xero-expense-account")?.value || "", placeholder: "Select Expense Account", searchable: true, onChange: (value) => {
+    // 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) => {
+                                                dispatch(actions.editLineItem({
+                                                    id: item.id,
+                                                    description: e.target.value,
+                                                }));
+                                            }, className: "w-full" }) }), _jsx("td", { className: "border-b border-gray-200 p-3", style: { width: "100px" }, children: _jsx(DatePicker, { name: "period", dateFormat: "YYYY-MM-DD", autoClose: true, placeholder: "Select Period", value: item.lineItemTag.find((tag) => tag.dimension === "accounting-period")?.label || "", onChange: (e) => dispatch(actions.setLineItemTag({
+                                                lineItemId: item.id,
+                                                dimension: "accounting-period",
+                                                value: new Date(e.target.value)
+                                                    .toLocaleDateString("en-US", {
+                                                    year: "numeric",
+                                                    month: "numeric",
+                                                })
+                                                    .split("/")
+                                                    .reverse()
+                                                    .join("/"),
+                                                label: new Date(e.target.value).toLocaleDateString("en-US", {
+                                                    month: "long",
+                                                    year: "numeric",
+                                                }),
+                                            })) }) }), _jsx("td", { className: "border-b border-gray-200 p-3", children: _jsx(Select, { options: expenseAccountOptions, value: item.lineItemTag.find((tag) => tag.dimension === "xero-expense-account")?.value || "", placeholder: "Select Expense Account", searchable: true, onChange: (value) => {
                                                 dispatch(actions.setLineItemTag({
                                                     lineItemId: item.id,
                                                     dimension: "xero-expense-account",
                                                     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: [
-                                { label: "Powerhouse USD", value: "Powerhouse USD" },
-                                { label: "Powerhouse EUR", value: "Powerhouse EUR" },
-                            ], value: paymentAccounts && paymentAccounts.length > 0
-                                ? paymentAccounts[0]
-                                : "", placeholder: "Select Payment Account", searchable: true, onChange: (value) => {
-                                dispatch(actions.addPaymentAccount({ paymentAccount: value }));
-                            } })] }) }), _jsx("div", { className: "border-t border-gray-200 p-6", children: _jsx("div", { className: "flex justify-end", children: _jsx("button", { onClick: handleSave, className: "rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700", children: "Save Tags" }) }) })] }));
+                                            } }) }), _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) => {
+                                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" } })] }) })] }));
 }

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

@@ -1,3 +1,4 @@
 import { SelectOption } from "@powerhousedao/document-engineering/ui";
 export declare const expenseAccountOptions: SelectOption[];
+export declare const paymentAccountOptions: SelectOption[];
 //# sourceMappingURL=tagMapping.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tagMapping.d.ts","sourceRoot":"","sources":["../../../../editors/invoice/lineItemTags/tagMapping.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAEtE,eAAO,MAAM,qBAAqB,EAAE,YAAY,EA6D/C,CAAC"}
+{"version":3,"file":"tagMapping.d.ts","sourceRoot":"","sources":["../../../../editors/invoice/lineItemTags/tagMapping.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAEtE,eAAO,MAAM,qBAAqB,EAAE,YAAY,EA6D/C,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,YAAY,EAc/C,CAAC"}

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

@@ -60,3 +60,18 @@ export const expenseAccountOptions = [
     { label: "Retained Earnings", value: "960" },
     { label: "Owner A Share Capital", value: "970" }
 ];
+export const paymentAccountOptions = [
+    { label: "Clearing Account USD", value: "USD" },
+    { label: "Clearing Account EUR", value: "EUR" },
+    { label: "Clearing Account DKK", value: "DKK" },
+    { label: "Clearing Account GBP", value: "GBP" },
+    { label: "Clearing Account JPY", value: "JPY" },
+    { label: "Clearing Account CNY", value: "CNY" },
+    { label: "Clearing Account CHF", value: "CHF" },
+    { label: "Wallet USDS", value: "USDS" },
+    { label: "Wallet DAI", value: "DAI" },
+    { label: "Wallet EURe", value: "EURe" },
+    { label: "Wallet SKY", value: "SKY" },
+    { label: "Wallet MKR", value: "MKR" },
+    { label: "Wallet USDC", value: "USDC" },
+];

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

@@ -1,4 +1,4 @@
-import { EditInvoiceInput, DeleteLineItemInput, InvoiceLineItemTag } from "../../document-models/invoice/index.js";
+import { EditInvoiceInput, DeleteLineItemInput, InvoiceTag } from "../../document-models/invoice/index.js";
 import { Dispatch } from "react";
 export declare function formatNumber(value: number): string;
 type LineItem = {
@@ -11,7 +11,7 @@ type LineItem = {
     totalPriceTaxIncl: number;
     unitPriceTaxExcl: number;
     unitPriceTaxIncl: number;
-    lineItemTag: InvoiceLineItemTag[];
+    lineItemTag: InvoiceTag[];
 };
 type LineItemsTableProps = {
     readonly lineItems: LineItem[];
@@ -21,7 +21,7 @@ type LineItemsTableProps = {
     readonly onDeleteItem: (input: DeleteLineItemInput) => void;
     readonly onUpdateCurrency: (input: EditInvoiceInput) => void;
     readonly dispatch: Dispatch<any>;
-    readonly paymentAccounts: string[];
+    readonly paymentAccounts: InvoiceTag[];
 };
 export declare function LineItemsTable({ lineItems, currency, onAddItem, onUpdateItem, onDeleteItem, onUpdateCurrency, dispatch, paymentAccounts }: LineItemsTableProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"lineItems.d.ts","sourceRoot":"","sources":["../../../editors/invoice/lineItems.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AACnH,OAAO,EAA0D,QAAQ,EAAE,MAAM,OAAO,CAAC;AAqBzF,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAsBlD;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,kBAAkB,EAAE,CAAC;CACnC,CAAC;AAoNF,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,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACjC,QAAQ,CAAC,eAAe,EAAE,MAAM,EAAE,CAAC;CACpC,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,QAAQ,EACR,eAAe,EAChB,EAAE,mBAAmB,2CAuKrB"}
+{"version":3,"file":"lineItems.d.ts","sourceRoot":"","sources":["../../../editors/invoice/lineItems.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAC3G,OAAO,EAA0D,QAAQ,EAAE,MAAM,OAAO,CAAC;AAqBzF,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAsBlD;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;AAuNF,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,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,QAAQ,EACR,eAAe,EAChB,EAAE,mBAAmB,2CA+IrB"}

package/dist/editors/invoice/lineItems.js

@@ -139,9 +139,9 @@ const EditableLineItem = forwardRef(function EditableLineItem(props, ref) {
         };
         onSave(completeItem);
     }
-    return (_jsxs("tr", { ref: ref, className: "hover:bg-gray-50", children: [_jsx("td", { className: "border border-gray-200 p-3", style: { width: '38%' }, children: _jsx(InputField, { onBlur: () => { }, handleInputChange: (e) => {
+    return (_jsxs("tr", { ref: ref, className: "hover:bg-gray-50 table-row", children: [_jsx("td", { className: "border border-gray-200 p-3 table-cell", children: _jsx(InputField, { onBlur: () => { }, handleInputChange: (e) => {
                         setEditedItem((prev) => ({ ...prev, description: e.target.value }));
-                    }, value: editedItem.description ?? "", placeholder: "Description" }) }), _jsx("td", { className: "border border-gray-200 p-3", style: { width: '8%' }, children: _jsx(NumberForm, { number: editedItem.quantity ?? "", precision: 0, handleInputChange: handleInputChange("quantity"), placeholder: "Quantity" }) }), _jsx("td", { className: "border border-gray-200 p-3", style: { width: '16%' }, children: _jsx(NumberForm, { number: editedItem.unitPriceTaxExcl ?? "", precision: getCurrencyPrecision(currency), handleInputChange: handleInputChange("unitPriceTaxExcl"), placeholder: "Unit Price (excl. tax)" }) }), _jsx("td", { className: "border border-gray-200 p-3", style: { width: '8%' }, children: _jsx(NumberForm, { number: editedItem.taxPercent ?? "", precision: 0, min: 0, max: 100, handleInputChange: handleInputChange("taxPercent"), placeholder: "Tax %" }) }), _jsx("td", { className: "border border-gray-200 p-3 text-right font-medium", style: { width: '14%' }, children: formatNumber(calculatedValues.totalPriceTaxExcl) }), _jsx("td", { className: "border border-gray-200 p-3 text-right font-medium", style: { width: '14%' }, children: formatNumber(calculatedValues.totalPriceTaxIncl) }), _jsx("td", { className: "border border-gray-200 p-3", children: _jsxs("div", { className: "flex space-x-2", children: [_jsx("button", { style: { backgroundColor: "blue" }, className: "rounded bg-blue-600 px-3 py-1 text-white hover:bg-blue-700", onClick: handleSave, children: "Save" }), _jsx("button", { className: "rounded bg-gray-500 px-3 py-1 text-white hover:bg-gray-600", onClick: onCancel, children: "Cancel" })] }) })] }));
+                    }, value: editedItem.description ?? "", placeholder: "Description", className: "" }) }), _jsx("td", { className: "border border-gray-200 p-3 table-cell", children: _jsx(NumberForm, { number: editedItem.quantity ?? "", precision: 0, handleInputChange: handleInputChange("quantity"), placeholder: "Quantity", className: "" }) }), _jsx("td", { className: "border border-gray-200 p-3 table-cell", children: _jsx(NumberForm, { number: editedItem.unitPriceTaxExcl ?? "", precision: getCurrencyPrecision(currency), handleInputChange: handleInputChange("unitPriceTaxExcl"), placeholder: "Unit Price (excl. tax)", className: "" }) }), _jsx("td", { className: "border border-gray-200 p-3 table-cell", children: _jsx(NumberForm, { number: editedItem.taxPercent ?? "", precision: 0, min: 0, max: 100, handleInputChange: handleInputChange("taxPercent"), placeholder: "Tax %", className: "" }) }), _jsx("td", { className: "border border-gray-200 p-3 text-right font-medium table-cell", children: formatNumber(calculatedValues.totalPriceTaxExcl) }), _jsx("td", { className: "border border-gray-200 p-3 text-right font-medium table-cell", children: formatNumber(calculatedValues.totalPriceTaxIncl) }), _jsx("td", { className: "border border-gray-200 p-3 table-cell", children: _jsxs("div", { className: "flex space-x-2", children: [_jsx("button", { className: "rounded bg-blue-500 px-3 py-1 text-white hover:bg-blue-700", onClick: handleSave, children: "Save" }), _jsx("button", { className: "rounded bg-gray-500 px-3 py-1 text-white hover:bg-gray-600", onClick: onCancel, children: "Cancel" })] }) })] }));
 });
 export function LineItemsTable({ lineItems, currency, onAddItem, onUpdateItem, onDeleteItem, onUpdateCurrency, dispatch, paymentAccounts }) {
     const [editingId, setEditingId] = useState(null);
@@ -165,22 +165,16 @@ export function LineItemsTable({ lineItems, currency, onAddItem, onUpdateItem, o
     const tagAssignmentRows = lineItems.map(item => ({
         id: item.id,
         item: item.description,
-        period: 'Jan 2025', // Default value
+        period: '', // Default value
         expenseAccount: '', // Default value
         total: `$${formatNumber(item.totalPriceTaxIncl)}`,
         lineItemTag: item.lineItemTag,
     }));
-    const handleTagsSave = (updatedTaggedItems, paymentAccount) => {
-        // Handle the saved tags here if needed
-        setShowTagTable(false);
-    };
     if (showTagTable) {
-        return (_jsx(LineItemTagsTable, { lineItems: tagAssignmentRows, onSave: handleTagsSave, onClose: () => setShowTagTable(false), dispatch: dispatch, paymentAccounts: paymentAccounts }));
+        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: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "border-b border-gray-200 p-3 text-left", style: { width: '38%' }, children: "Description" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", style: { width: '8%' }, children: "Quantity" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", style: { width: '16%' }, children: "Unit Price (excl. tax)" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", style: { width: '8%' }, children: "Tax %" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", style: { width: '14%' }, children: "Total (excl. tax)" }), _jsx("th", { className: "border-b border-gray-200 p-3 text-right", style: { width: '14%' }, 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) => {
+    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) => {
                                             onUpdateItem(updatedItem);
                                             setEditingId(null);
-                                        } }, item.id)) : (_jsxs("tr", { className: "hover:bg-gray-50", children: [_jsx("td", { className: "border-b border-gray-200 p-3", children: item.description }), _jsx("td", { className: "border-b border-gray-200 p-3 text-right", children: item.quantity }), _jsx("td", { className: "border-b border-gray-200 p-3 text-right", children: formatNumber(item.unitPriceTaxExcl) }), _jsxs("td", { className: "border-b border-gray-200 p-3 text-right", children: [typeof item.taxPercent === "number"
-                                                        ? Math.round(item.taxPercent)
-                                                        : 0, "%"] }), _jsx("td", { className: "border-b border-gray-200 p-3 text-right font-medium", children: formatNumber(item.totalPriceTaxExcl) }), _jsx("td", { className: "border-b border-gray-200 p-3 text-right font-medium", children: formatNumber(item.totalPriceTaxIncl) }), _jsx("td", { className: "border-b border-gray-200 p-3", children: _jsxs("div", { className: "flex justify-center space-x-2", children: [_jsx("button", { style: { backgroundColor: "lightblue" }, className: "rounded bg-blue-600 px-3 py-1 text-white hover:bg-blue-700", 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 })) : null] })] }) })] }) }));
+                                        } }, 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 }), _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", { style: { backgroundColor: "lightblue" }, className: "rounded bg-blue-600 px-3 py-1 text-white hover:bg-blue-700", 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 })) : null] })] }) })] }) }));
 }

package/dist/style.css

@@ -63,7 +63,6 @@
     --container-xs: 20rem;
     --container-md: 28rem;
     --container-4xl: 56rem;
-    --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -282,6 +281,9 @@
   .z-50 {
     z-index: 50;
   }
+  .col-span-1 {
+    grid-column: span 1 / span 1;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -300,9 +302,6 @@
       max-width: 96rem;
     }
   }
-  .mx-auto {
-    margin-inline: auto;
-  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -354,6 +353,9 @@
   .hidden {
     display: none;
   }
+  .inline {
+    display: inline;
+  }
   .inline-block {
     display: inline-block;
   }
@@ -363,6 +365,12 @@
   .table {
     display: table;
   }
+  .table-cell {
+    display: table-cell;
+  }
+  .table-row {
+    display: table-row;
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -376,6 +384,9 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
   .h-full {
     height: 100%;
   }
@@ -400,9 +411,6 @@
   .w-full {
     width: 100%;
   }
-  .max-w-7xl {
-    max-width: var(--container-7xl);
-  }
   .flex-1 {
     flex: 1;
   }
@@ -424,11 +432,14 @@
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .cursor-pointer {
     cursor: pointer;
   }
-  .grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
+  .resize {
+    resize: both;
   }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -460,12 +471,6 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
-  .gap-6 {
-    gap: calc(var(--spacing) * 6);
-  }
-  .gap-8 {
-    gap: calc(var(--spacing) * 8);
-  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -649,9 +654,15 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
+  .pb-5 {
+    padding-bottom: calc(var(--spacing) * 5);
+  }
   .text-center {
     text-align: center;
   }
@@ -909,11 +920,6 @@
       padding: calc(var(--spacing) * 0);
     }
   }
-  .md\:col-start-2 {
-    @media (width >= 48rem) {
-      grid-column-start: 2;
-    }
-  }
   .md\:grid-cols-2 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -6040,26 +6046,6 @@ input[type="number"] {
   inherits: false;
   initial-value: 1;
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-divide-y-reverse {
   syntax: "*";
   inherits: false;
@@ -6298,6 +6284,26 @@ input[type="number"] {
   inherits: false;
   initial-value: 0;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -6420,6 +6426,11 @@ input[type="number"] {
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
@@ -6446,11 +6457,6 @@ input[type="number"] {
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
       --tw-divide-y-reverse: 0;
       --tw-leading: initial;
       --tw-tracking: initial;

package/dist/subgraphs/invoice/resolvers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolvers.d.ts","sourceRoot":"","sources":["../../../subgraphs/invoice/resolvers.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,eAAO,MAAM,YAAY,GAAI,UAAU,QAAQ,KAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAyUnE,CAAC"}
+{"version":3,"file":"resolvers.d.ts","sourceRoot":"","sources":["../../../subgraphs/invoice/resolvers.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,eAAO,MAAM,YAAY,GAAI,UAAU,QAAQ,KAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CA8SnE,CAAC"}

package/dist/subgraphs/invoice/resolvers.js

@@ -99,27 +99,6 @@ export const getResolvers = (subgraph) => {
                 await reactor.addAction(driveId, docId, actions.deleteRef({ ...args.input }));
                 return doc.revision.global + 1;
             },
-            Invoice_addPaymentAccount: async (_, args) => {
-                const driveId = args.driveId || DEFAULT_DRIVE_ID;
-                const docId = args.docId || "";
-                const doc = await reactor.getDocument(driveId, docId);
-                await reactor.addAction(driveId, docId, actions.addPaymentAccount({ ...args.input }));
-                return doc.revision.global + 1;
-            },
-            Invoice_editPaymentAccount: async (_, args) => {
-                const driveId = args.driveId || DEFAULT_DRIVE_ID;
-                const docId = args.docId || "";
-                const doc = await reactor.getDocument(driveId, docId);
-                await reactor.addAction(driveId, docId, actions.editPaymentAccount({ ...args.input }));
-                return doc.revision.global + 1;
-            },
-            Invoice_deletePaymentAccount: async (_, args) => {
-                const driveId = args.driveId || DEFAULT_DRIVE_ID;
-                const docId = args.docId || "";
-                const doc = await reactor.getDocument(driveId, docId);
-                await reactor.addAction(driveId, docId, actions.deletePaymentAccount({ ...args.input }));
-                return doc.revision.global + 1;
-            },
             Invoice_editIssuer: async (_, args) => {
                 const driveId = args.driveId || DEFAULT_DRIVE_ID;
                 const docId = args.docId || "";
@@ -190,9 +169,16 @@ export const getResolvers = (subgraph) => {
                 await reactor.addAction(driveId, docId, actions.setLineItemTag({ ...args.input }));
                 return doc.revision.global + 1;
             },
-            Invoice_uploadInvoicePdfChunk,
-            Invoice_createRequestFinancePayment,
+            Invoice_setInvoiceTag: async (_, args) => {
+                const driveId = args.driveId || DEFAULT_DRIVE_ID;
+                const docId = args.docId || "";
+                const doc = await reactor.getDocument(driveId, docId);
+                await reactor.addAction(driveId, docId, actions.setInvoiceTag({ ...args.input }));
+                return doc.revision.global + 1;
+            },
             Invoice_processGnosisPayment,
+            Invoice_createRequestFinancePayment,
+            Invoice_uploadInvoicePdfChunk,
         },
     };
 };

package/dist/subgraphs/invoice/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../subgraphs/invoice/schema.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,MAAM,EAAE,YA2dpB,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../subgraphs/invoice/schema.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,MAAM,EAAE,YA8cpB,CAAC"}

package/dist/subgraphs/invoice/schema.js

@@ -16,7 +16,8 @@ export const schema = gql `
     lineItems: [InvoiceLineItem!]!
     totalPriceTaxExcl: Float!
     totalPriceTaxIncl: Float!
-    paymentAccounts: [String!]
+    invoiceTags: [InvoiceTag!]! # e.g. {'xero-payment-account', '090', 'PowerhouseUSD'}
+    notes: String
   }
 
   type Ref {
@@ -102,13 +103,13 @@ export const schema = gql `
     unitPriceTaxIncl: Float!
     totalPriceTaxExcl: Float!
     totalPriceTaxIncl: Float!
-    lineItemTag: [InvoiceLineItemTag!]
+    lineItemTag: [InvoiceTag!]
   }
 
-  type InvoiceLineItemTag {
-    dimension: String!
-    value: String!
-    label: String
+  type InvoiceTag {
+    dimension: String! # "xero-expense-account", "xero-payment-account", "accounting-period", ...
+    value: String! # "627", ..., "090", ..., "2025/05", "2025/Q1", ...
+    label: String # "Marketing", ..., "Business Bank", ..., "May 2025"
   }
 
   union LegalEntityId = LegalEntityTaxId | LegalEntityCorporateRegistrationId
@@ -191,21 +192,6 @@ export const schema = gql `
       docId: PHID
       input: Invoice_DeleteRefInput
     ): Int
-    Invoice_addPaymentAccount(
-      driveId: String
-      docId: PHID
-      input: Invoice_AddPaymentAccountInput
-    ): Int
-    Invoice_editPaymentAccount(
-      driveId: String
-      docId: PHID
-      input: Invoice_EditPaymentAccountInput
-    ): Int
-    Invoice_deletePaymentAccount(
-      driveId: String
-      docId: PHID
-      input: Invoice_DeletePaymentAccountInput
-    ): Int
     Invoice_editIssuer(
       driveId: String
       docId: PHID
@@ -256,6 +242,11 @@ export const schema = gql `
       docId: PHID
       input: Invoice_SetLineItemTagInput
     ): Int
+    Invoice_setInvoiceTag(
+      driveId: String
+      docId: PHID
+      input: Invoice_SetInvoiceTagInput
+    ): Int
     Invoice_uploadInvoicePdfChunk(
       chunk: String!
       chunkIndex: Int!
@@ -311,6 +302,7 @@ export const schema = gql `
     dateDue: String
     dateDelivered: String
     currency: String
+    notes: String
   }
   input Invoice_EditStatusInput {
     status: Status!
@@ -326,16 +318,6 @@ export const schema = gql `
   input Invoice_DeleteRefInput {
     id: OID!
   }
-  input Invoice_AddPaymentAccountInput {
-    paymentAccount: String!
-  }
-  input Invoice_EditPaymentAccountInput {
-    existingPaymentAccount: String!
-    newPaymentAccount: String!
-  }
-  input Invoice_DeletePaymentAccountInput {
-    paymentAccount: String!
-  }
 
   """
   Module: Parties
@@ -474,4 +456,9 @@ export const schema = gql `
     value: String!
     label: String
   }
+  input Invoice_SetInvoiceTagInput {
+    dimension: String!
+    value: String!
+    label: String
+  }
 `;

package/dist/tailwind.config.js

@@ -3,7 +3,6 @@ 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.10",
+  "version": "0.0.12",
   "license": "AGPL-3.0-only",
   "type": "module",
   "files": [