@powerhousedao/contributor-billing 0.0.13 → 0.0.14

package/dist/editors/invoice/lineItems.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable react/button-has-type */
 import { RWAButton } from "@powerhousedao/design-system";
-import { forwardRef, useState, useMemo, useRef } from "react";
+import { forwardRef, useState, useMemo, useRef, } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { Tag } from "lucide-react";
 import { NumberForm } from "./components/numberForm.js";
@@ -18,9 +18,9 @@ export function formatNumber(value) {
     const hasDecimals = value % 1 !== 0;
     // If no decimals or only trailing zeros after 2 decimal places, show 2 decimal places
     if (!hasDecimals || value.toFixed(5).endsWith("000")) {
-        return value.toLocaleString('en-US', {
+        return value.toLocaleString("en-US", {
             minimumFractionDigits: 2,
-            maximumFractionDigits: 2
+            maximumFractionDigits: 2,
         });
     }
     // Otherwise, show actual decimal places up to 5
@@ -28,9 +28,9 @@ export function formatNumber(value) {
     const decimalPart = stringValue.split(".")[1] || "";
     // Determine how many decimal places to show (up to 5)
     const decimalPlaces = Math.min(Math.max(2, decimalPart.length), 5);
-    return value.toLocaleString('en-US', {
+    return value.toLocaleString("en-US", {
         minimumFractionDigits: decimalPlaces,
-        maximumFractionDigits: decimalPlaces
+        maximumFractionDigits: decimalPlaces,
     });
 }
 const EditableLineItem = forwardRef(function EditableLineItem(props, ref) {
@@ -96,6 +96,7 @@ const EditableLineItem = forwardRef(function EditableLineItem(props, ref) {
             else if (field === "unitPriceTaxExcl") {
                 // For unit price, allow up to dynamic decimal places based on currency
                 const maxDecimals = getCurrencyPrecision(currency);
+                // Allow negative numbers with optional minus sign at start
                 const regex = new RegExp(`^-?\\d*\\.?\\d{0,${maxDecimals}}$`);
                 if (regex.test(value)) {
                     setEditedItem((prev) => ({ ...prev, [field]: value }));
@@ -141,9 +142,9 @@ const EditableLineItem = forwardRef(function EditableLineItem(props, ref) {
     }
     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", 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" })] }) })] }));
+                    }, 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"), pattern: "^-?\\d*\\.?\\d*$", 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, pattern: "^(100|[1-9]?[0-9])$", 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 }) {
+export function LineItemsTable({ lineItems, currency, onAddItem, onUpdateItem, onDeleteItem, onUpdateCurrency, dispatch, paymentAccounts, }) {
     const [editingId, setEditingId] = useState(null);
     const [isAddingNew, setIsAddingNew] = useState(false);
     const [showTagTable, setShowTagTable] = useState(false);
@@ -162,19 +163,27 @@ export function LineItemsTable({ lineItems, currency, onAddItem, onUpdateItem, o
         setIsAddingNew(false);
     }
     // Transform line items to TagAssignmentRow format for the tag table
-    const tagAssignmentRows = lineItems.map(item => ({
+    const tagAssignmentRows = lineItems.map((item) => ({
         id: item.id,
         item: item.description,
-        period: '', // Default value
-        expenseAccount: '', // Default value
+        period: "", // Default value
+        expenseAccount: "", // Default value
         total: `$${formatNumber(item.totalPriceTaxIncl)}`,
         lineItemTag: item.lineItemTag,
     }));
     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) => {
+    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 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] })] }) })] }) }));
+                                        } }, 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", { 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 })) : null] })] }) })] }) }));
 }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Manifest } from "document-model";
 export declare const manifest: Manifest;
-export declare const documentModels: import("document-model").DocumentModelModule<import("./document-models/invoice/index.js").InvoiceDocument>[];
-export declare const editors: (import("document-model").EditorModule<import("./document-models/invoice/index.js").InvoiceDocument> | import("@powerhousedao/reactor-browser").DriveEditorModule<import("document-drive").DocumentDriveDocument>)[];
+export declare const documentModels: (import("document-model").DocumentModelModule<import("./document-models/invoice/index.js").InvoiceDocument> | import("document-model").DocumentModelModule<import("./document-models/billing-statement/index.js").BillingStatementDocument>)[];
+export declare const editors: (import("document-model").EditorModule<import("./document-models/invoice/index.js").InvoiceDocument> | import("@powerhousedao/reactor-browser").DriveEditorModule<import("document-drive").DocumentDriveDocument> | import("document-model").EditorModule<import("./document-models/billing-statement/index.js").BillingStatementDocument>)[];
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK1C,eAAO,MAAM,QAAQ,EAAE,QAAuB,CAAC;AAC/C,eAAO,MAAM,cAAc,8GAAuC,CAAC;AACnE,eAAO,MAAM,OAAO,sNAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK1C,eAAO,MAAM,QAAQ,EAAE,QAAuB,CAAC;AAC/C,eAAO,MAAM,cAAc,gPAAuC,CAAC;AACnE,eAAO,MAAM,OAAO,+UAAgC,CAAC"}

package/dist/powerhouse.manifest.json

@@ -16,7 +16,16 @@
         {
             "id": "powerhouse/invoice-editor",
             "name": "Invoice",
-            "documentTypes": ["powerhouse/invoice"]
+            "documentTypes": [
+                "powerhouse/invoice"
+            ]
+        },
+        {
+            "id": "powerhouse/billing-statement-editor",
+            "name": "Billing Statement",
+            "documentTypes": [
+                "powerhouse/billing-statement"
+            ]
         }
     ],
     "apps": [

package/dist/style.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -18,6 +18,7 @@
     --color-orange-700: oklch(55.3% 0.195 38.402);
     --color-orange-800: oklch(47% 0.157 37.304);
     --color-orange-900: oklch(40.8% 0.123 38.172);
+    --color-yellow-50: oklch(98.7% 0.026 102.212);
     --color-yellow-100: oklch(97.3% 0.071 103.193);
     --color-yellow-300: oklch(90.5% 0.182 98.111);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
@@ -31,6 +32,7 @@
     --color-green-900: oklch(39.3% 0.095 152.535);
     --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-100: oklch(93.2% 0.032 255.585);
+    --color-blue-200: oklch(88.2% 0.059 254.128);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
@@ -311,12 +313,18 @@
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -399,6 +407,18 @@
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
@@ -411,6 +431,9 @@
   .w-full {
     width: 100%;
   }
+  .min-w-\[900px\] {
+    min-width: 900px;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -444,6 +467,9 @@
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -534,6 +560,9 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -570,6 +599,9 @@
   .border-gray-400 {
     border-color: var(--color-gray-400);
   }
+  .border-gray-500 {
+    border-color: var(--color-gray-500);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -615,9 +647,15 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-yellow-50 {
+    background-color: var(--color-yellow-50);
+  }
   .bg-yellow-100 {
     background-color: var(--color-yellow-100);
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -630,6 +668,9 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -651,6 +692,9 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
@@ -783,7 +827,7 @@
     --tw-ring-color: var(--color-black);
   }
   .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -797,6 +841,13 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .hover\:bg-blue-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-200);
+      }
+    }
+  }
   .hover\:bg-blue-600 {
     &:hover {
       @media (hover: hover) {
@@ -922,6 +973,12 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
+  .md\:text-2xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
 }
 /*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@@ -6256,6 +6313,49 @@ input[type="number"] {
     }
   }
 }
+.editor-container {
+  width: 100%;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0.5rem;
+  box-sizing: border-box;
+  overflow-x: hidden;
+}
+.editor-container > * {
+  width: 100%;
+  max-width: 100%;
+}
+@media (max-width: 640px) {
+  .editor-container {
+    padding: 0.25rem;
+    transform: scale(0.95);
+    transform-origin: top left;
+  }
+}
+@media (min-width: 641px) and (max-width: 1023px) {
+  .editor-container {
+    padding: 0.5rem;
+    transform: scale(0.9);
+    transform-origin: top left;
+  }
+}
+@media (min-width: 1024px) {
+  .editor-container {
+    max-width: 1280px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 1rem;
+    transform: none;
+  }
+}
+@media (max-width: 768px) {
+  .editor-grid {
+    grid-template-columns: 1fr !important;
+  }
+  .editor-grid-item {
+    width: 100% !important;
+  }
+}
 @property --tw-border-spacing-x {
   syntax: "<length>";
   inherits: false;

package/dist/subgraphs/billing-statement/index.d.ts

@@ -0,0 +1,10 @@
+import { Subgraph } from "@powerhousedao/reactor-api";
+export declare class BillingStatementSubgraph extends Subgraph {
+    name: string;
+    typeDefs: import("graphql").DocumentNode;
+    resolvers: Record<string, any>;
+    additionalContextFields: {};
+    onSetup(): Promise<void>;
+    onDisconnect(): Promise<void>;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/subgraphs/billing-statement/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../subgraphs/billing-statement/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAKtD,qBAAa,wBAAyB,SAAQ,QAAQ;IACpD,IAAI,SAAuB;IAE3B,QAAQ,iCAAU;IAClB,SAAS,sBAAsB;IAC/B,uBAAuB,KAAM;IACvB,OAAO;IACP,YAAY;CACnB"}

package/dist/subgraphs/billing-statement/index.js

@@ -0,0 +1,11 @@
+import { Subgraph } from "@powerhousedao/reactor-api";
+import { schema } from "./schema.js";
+import { getResolvers } from "./resolvers.js";
+export class BillingStatementSubgraph extends Subgraph {
+    name = "billing-statement";
+    typeDefs = schema;
+    resolvers = getResolvers(this);
+    additionalContextFields = {};
+    async onSetup() { }
+    async onDisconnect() { }
+}

package/dist/subgraphs/billing-statement/resolvers.d.ts

@@ -0,0 +1,3 @@
+import { type Subgraph } from "@powerhousedao/reactor-api";
+export declare const getResolvers: (subgraph: Subgraph) => Record<string, any>;
+//# sourceMappingURL=resolvers.d.ts.map

package/dist/subgraphs/billing-statement/resolvers.d.ts.map

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

package/dist/subgraphs/billing-statement/resolvers.js

@@ -0,0 +1,110 @@
+import { addFile } from "document-drive";
+import { actions } from "../../document-models/billing-statement/index.js";
+import { generateId, hashKey } from "document-model";
+const DEFAULT_DRIVE_ID = "powerhouse";
+export const getResolvers = (subgraph) => {
+    const reactor = subgraph.reactor;
+    return {
+        Query: {
+            BillingStatement: async (_, args, ctx) => {
+                return {
+                    getDocument: async (args) => {
+                        const driveId = args.driveId || DEFAULT_DRIVE_ID;
+                        const docId = args.docId || "";
+                        const doc = await reactor.getDocument(driveId, docId);
+                        return {
+                            id: docId,
+                            driveId: driveId,
+                            ...doc,
+                            state: doc.state.global,
+                            stateJSON: doc.state.global,
+                            revision: doc.revision.global,
+                        };
+                    },
+                    getDocuments: async (args) => {
+                        const driveId = args.driveId || DEFAULT_DRIVE_ID;
+                        const docsIds = await reactor.getDocuments(driveId);
+                        const docs = await Promise.all(docsIds.map(async (docId) => {
+                            const doc = await reactor.getDocument(driveId, docId);
+                            return {
+                                id: docId,
+                                driveId: driveId,
+                                ...doc,
+                                state: doc.state.global,
+                                stateJSON: doc.state.global,
+                                revision: doc.revision.global,
+                            };
+                        }));
+                        return docs.filter((doc) => doc.documentType === "powerhouse/billing-statement");
+                    },
+                };
+            },
+        },
+        Mutation: {
+            BillingStatement_createDocument: async (_, args) => {
+                const driveId = args.driveId || DEFAULT_DRIVE_ID;
+                const docId = generateId();
+                await reactor.addDriveAction(driveId, addFile({
+                    id: docId,
+                    name: args.name,
+                    documentType: "powerhouse/billing-statement",
+                    synchronizationUnits: [
+                        {
+                            branch: "main",
+                            scope: "global",
+                            syncId: hashKey(),
+                        },
+                        {
+                            branch: "main",
+                            scope: "local",
+                            syncId: hashKey(),
+                        },
+                    ],
+                }));
+                return docId;
+            },
+            BillingStatement_editBillingStatement: 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.editBillingStatement({ ...args.input }));
+                return doc.revision.global + 1;
+            },
+            BillingStatement_editContributor: 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.editContributor({ ...args.input }));
+                return doc.revision.global + 1;
+            },
+            BillingStatement_editStatus: 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.editStatus({ ...args.input }));
+                return doc.revision.global + 1;
+            },
+            BillingStatement_addLineItem: 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.addLineItem({ ...args.input }));
+                return doc.revision.global + 1;
+            },
+            BillingStatement_editLineItem: 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.editLineItem({ ...args.input }));
+                return doc.revision.global + 1;
+            },
+            BillingStatement_editLineItemTag: 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.editLineItemTag({ ...args.input }));
+                return doc.revision.global + 1;
+            },
+        },
+    };
+};

package/dist/subgraphs/billing-statement/schema.d.ts

@@ -0,0 +1,3 @@
+import type { DocumentNode } from "graphql";
+export declare const schema: DocumentNode;
+//# sourceMappingURL=schema.d.ts.map

package/dist/subgraphs/billing-statement/schema.d.ts.map

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

package/dist/subgraphs/billing-statement/schema.js

@@ -0,0 +1,165 @@
+import { gql } from "graphql-tag";
+export const schema = gql `
+  """
+  Subgraph definition for BillingStatement (powerhouse/billing-statement)
+  """
+  type BillingStatementState {
+    contributor: PHID # Change to AID when available
+    dateIssued: DateTime!
+    dateDue: DateTime
+    lineItems: [BillingStatementLineItem!]!
+    status: BillingStatementStatus!
+    currency: String!
+    totalCash: Float!
+    totalPowt: Float!
+    notes: String
+  }
+
+  type BillingStatementLineItem {
+    id: OID!
+    description: String!
+    quantity: Float!
+    unit: BillingStatementUnit!
+    unitPricePwt: Float!
+    unitPriceCash: Float!
+    totalPricePwt: Float!
+    totalPriceCash: Float!
+    lineItemTag: [BillingStatementTag!]!
+  }
+
+  type BillingStatementTag {
+    dimension: String!
+    value: String!
+    label: String
+  }
+
+  enum BillingStatementStatus {
+    DRAFT
+    ISSUED
+    ACCEPTED
+    REJECTED
+    PAID
+  }
+
+  enum BillingStatementStatusInput {
+    DRAFT
+    ISSUED
+    ACCEPTED
+    REJECTED
+    PAID
+  }
+
+  enum BillingStatementUnit {
+    MINUTE
+    HOUR
+    DAY
+    UNIT
+  }
+
+  enum BillingStatementUnitInput {
+    MINUTE
+    HOUR
+    DAY
+    UNIT
+  }
+
+  """
+  Queries: BillingStatement
+  """
+  type BillingStatementQueries {
+    getDocument(driveId: String, docId: PHID): BillingStatement
+    getDocuments: [BillingStatement!]
+  }
+
+  type Query {
+    BillingStatement: BillingStatementQueries
+  }
+
+  """
+  Mutations: BillingStatement
+  """
+  type Mutation {
+    BillingStatement_createDocument(driveId: String, name: String): String
+
+    BillingStatement_editBillingStatement(
+      driveId: String
+      docId: PHID
+      input: BillingStatement_EditBillingStatementInput
+    ): Int
+    BillingStatement_editContributor(
+      driveId: String
+      docId: PHID
+      input: BillingStatement_EditContributorInput
+    ): Int
+    BillingStatement_editStatus(
+      driveId: String
+      docId: PHID
+      input: BillingStatement_EditStatusInput
+    ): Int
+    BillingStatement_addLineItem(
+      driveId: String
+      docId: PHID
+      input: BillingStatement_AddLineItemInput
+    ): Int
+    BillingStatement_editLineItem(
+      driveId: String
+      docId: PHID
+      input: BillingStatement_EditLineItemInput
+    ): Int
+    BillingStatement_editLineItemTag(
+      driveId: String
+      docId: PHID
+      input: BillingStatement_EditLineItemTagInput
+    ): Int
+  }
+
+  """
+  Module: General
+  """
+  input BillingStatement_EditBillingStatementInput {
+    dateIssued: DateTime
+    dateDue: DateTime
+    currency: String
+    notes: String
+  }
+  input BillingStatement_EditContributorInput {
+    contributor: PHID!
+  }
+  input BillingStatement_EditStatusInput {
+    status: BillingStatementStatusInput!
+  }
+
+  """
+  Module: LineItems
+  """
+  input BillingStatement_AddLineItemInput {
+    id: OID!
+    description: String!
+    quantity: Float!
+    unit: BillingStatementUnitInput!
+    unitPricePwt: Float!
+    unitPriceCash: Float!
+    totalPricePwt: Float!
+    totalPriceCash: Float!
+  }
+  input BillingStatement_EditLineItemInput {
+    id: OID!
+    description: String
+    quantity: Float
+    unit: BillingStatementUnitInput
+    unitPricePwt: Float
+    unitPriceCash: Float
+    totalPricePwt: Float
+    totalPriceCash: Float
+  }
+
+  """
+  Module: Tags
+  """
+  input BillingStatement_EditLineItemTagInput {
+    lineItemId: OID!
+    dimension: String!
+    value: String!
+    label: String
+  }
+`;