@appcorp/stellar-solutions-invoice-module 0.1.74 → 0.1.75

package/base-modules/invoice/customer-form-section.d.ts

@@ -5,8 +5,4 @@
  * Uses Shadcn UI components with RTL support and i18n.
  */
 import { FC } from "react";
-interface Props {
-    isRTL: boolean;
-}
-export declare const CustomerSection: FC<Props>;
-export {};
+export declare const CustomerSection: FC;

package/base-modules/invoice/customer-form-section.js

@@ -5,6 +5,17 @@
  * Form section for creating/editing customer information in invoices.
  * Uses Shadcn UI components with RTL support and i18n.
  */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -46,32 +57,37 @@ var util_functions_1 = require("@react-pakistan/util-functions");
 var enhanced_combobox_1 = require("@appcorp/shadcn/components/enhanced-combobox");
 var enhanced_input_1 = require("@appcorp/shadcn/components/enhanced-input");
 var context_1 = require("./context");
-var actions_1 = require("./actions");
 var CustomerSection = function () {
     var t = (0, next_intl_1.useTranslations)("invoice");
-    var _a = (0, context_1.useInvoiceStateContext)(), customer = _a.customer, errors = _a.errors, dispatch = _a.dispatch;
+    var _a = (0, context_1.useInvoiceModule)(), state = _a.state, dispatch = _a.dispatch;
+    var customer = state.customer, errors = state.errors;
     var handleCustomerChange = (0, react_1.useCallback)(function (key, value) {
+        var _a, _b;
         if (key === "phone") {
             var formattedResult = (0, util_functions_1.formatPhone)(value);
             var formattedPhone = (formattedResult === null || formattedResult === void 0 ? void 0 : formattedResult.international) || value;
             dispatch({
-                type: actions_1.INVOICE_ACTION_TYPES.SET_CUSTOMER_FORM,
-                payload: { key: key, value: formattedPhone },
+                type: context_1.INVOICE_ACTION_TYPES.SET_INPUT_FIELD,
+                payload: {
+                    key: "customer",
+                    value: __assign(__assign({}, customer), (_a = {}, _a[key] = formattedPhone, _a)),
+                },
             });
             return;
         }
         dispatch({
-            type: actions_1.INVOICE_ACTION_TYPES.SET_CUSTOMER_FORM,
-            payload: { key: key, value: value },
+            type: context_1.INVOICE_ACTION_TYPES.SET_INPUT_FIELD,
+            payload: { key: "customer", value: __assign(__assign({}, customer), (_b = {}, _b[key] = value, _b)) },
         });
         dispatch({
-            type: actions_1.INVOICE_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+            type: context_1.INVOICE_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
             payload: { disableSaveButton: false },
         });
         dispatch({
-            type: actions_1.INVOICE_ACTION_TYPES.RESET_ERRORS,
+            type: context_1.INVOICE_ACTION_TYPES.SET_ERRORS,
+            payload: { errors: {} },
         });
-    }, [dispatch]);
+    }, [dispatch, customer]);
     var handleInputChange = function (field, value) {
         handleCustomerChange(field, value);
     };

package/base-modules/invoice/form.d.ts

@@ -1,6 +1,2 @@
 import { FC } from "react";
-interface Props {
-    isRTL: boolean;
-}
-export declare const InvoiceForm: FC<Props>;
-export {};
+export declare const InvoiceForm: FC;

package/base-modules/invoice/form.js

@@ -12,16 +12,16 @@ var services_form_section_1 = require("./services-form-section");
 var company_form_section_1 = require("./company-form-section");
 var context_1 = require("./context");
 var customer_form_section_1 = require("./customer-form-section");
-var types_1 = require("./types");
-var InvoiceForm = function (_a) {
-    var isRTL = _a.isRTL;
-    var drawer = (0, context_1.useInvoiceStateContext)().drawer;
+var util_functions_1 = require("@react-pakistan/util-functions");
+var InvoiceForm = function () {
+    var state = (0, context_1.useInvoiceModule)().state;
+    var invoiceMode = state.invoiceMode;
     return (react_1.default.createElement("div", { className: "flex flex-col gap-8" },
-        drawer === types_1.INVOICE_DRAWER.INVOICE_CUSTOMER_FORM_DRAWER && (react_1.default.createElement(customer_form_section_1.CustomerSection, { isRTL: isRTL })),
-        drawer === types_1.INVOICE_DRAWER.INVOICE_COMPANY_FORM_DRAWER && (react_1.default.createElement(company_form_section_1.CompanySection, { isRTL: isRTL })),
-        react_1.default.createElement(services_form_section_1.ServicesSection, { isRTL: isRTL }),
-        react_1.default.createElement(products_form_section_1.ProductsSection, { isRTL: isRTL }),
-        react_1.default.createElement(add_service_product_section_1.AddServiceProductSection, { isRTL: isRTL }),
+        invoiceMode === util_functions_1.QUOTE_INVOICE_MODE.CUSTOMER && react_1.default.createElement(customer_form_section_1.CustomerSection, null),
+        invoiceMode === util_functions_1.QUOTE_INVOICE_MODE.COMPANY && react_1.default.createElement(company_form_section_1.CompanySection, null),
+        react_1.default.createElement(services_form_section_1.ServicesSection, null),
+        react_1.default.createElement(products_form_section_1.ProductsSection, null),
+        react_1.default.createElement(add_service_product_section_1.AddServiceProductSection, null),
         react_1.default.createElement(pricing_form_section_1.PricingSection, null)));
 };
 exports.InvoiceForm = InvoiceForm;

package/base-modules/invoice/page.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Generic Invoice Page Component
+ *
+ * Uses the generic component factory pattern with invoice-specific configuration.
+ * Demonstrates how to create a complete CRUD page using the reusable component factory.
+ */
+import { FC } from "react";
+export declare const InvoicePage: FC;

package/base-modules/invoice/page.js

@@ -0,0 +1,171 @@
+/**
+ * Generic Invoice Page Component
+ *
+ * Uses the generic component factory pattern with invoice-specific configuration.
+ * Demonstrates how to create a complete CRUD page using the reusable component factory.
+ */
+"use client";
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InvoicePage = void 0;
+var react_1 = __importStar(require("react"));
+var next_intl_1 = require("next-intl");
+var lucide_react_1 = require("lucide-react");
+var generic_component_factory_1 = require("@react-pakistan/util-functions/factory/generic-component-factory");
+var context_1 = require("./context");
+var form_1 = require("./form");
+var constants_1 = require("./constants");
+// ============================================================================
+// INVOICE MODULE CONFIGURATION
+// ============================================================================
+var invoiceConfig = {
+    moduleName: "invoice",
+    tableColumns: [
+        { label: "tableColumnHeaderId", width: "5%" },
+        { label: "tableColumnHeaderName", width: "10%" },
+        { label: "tableColumnHeaderIssueExpiryDate", width: "10%" },
+        { label: "tableColumnHeaderRef", width: "5%" },
+        { label: "tableColumnHeaderSubTotal", width: "5%" },
+        { label: "tableColumnHeaderTaxValue", width: "5%" },
+        { label: "tableColumnHeaderDiscountPrice", width: "5%" },
+        { label: "tableColumnHeaderTotalPrice", width: "5%" },
+        { label: "tableColumnHeaderCategory", width: "5%" },
+        { label: "tableColumnHeaderActions", width: "5%" },
+    ],
+    cancelLabel: "drawerButtonCancel",
+    drawerTitle: "drawerTitleInvoice",
+    filterContent: null,
+    formContent: react_1.default.createElement(form_1.InvoiceForm, null),
+    moreActionsContent: null,
+    saveLabel: "drawerButtonSave",
+    searchPlaceholder: "tableSearchPlaceholder",
+    tableDescription: "tableDescription",
+    tableTitle: "tableTitle",
+    viewContent: null,
+    size: "large",
+};
+// ============================================================================
+// ICON MAPPING
+// ============================================================================
+var ICON_MAP = {
+    delete: lucide_react_1.Trash2,
+    edit: lucide_react_1.Edit,
+    recordPayment: lucide_react_1.CreditCard,
+    view: lucide_react_1.Eye,
+};
+// ============================================================================
+// GENERIC INVOICE PAGE COMPONENT
+// ============================================================================
+var GenericInvoicePage = (0, generic_component_factory_1.createGenericModulePage)(invoiceConfig);
+var InvoicePageInner = function () {
+    var t = (0, next_intl_1.useTranslations)("invoice");
+    var context = (0, context_1.useInvoiceModule)();
+    // ============================================================================
+    // HEADER ACTIONS
+    // ============================================================================
+    var headerActions = (0, react_1.useMemo)(function () { return [
+        {
+            enabled: true,
+            handleOnClick: function () { return context.handleCreate("company"); },
+            icon: lucide_react_1.Building2,
+            label: t("actionsInvoiceCompany"),
+            order: 1,
+        },
+        {
+            enabled: true,
+            handleOnClick: function () { return context.handleCreate("customer"); },
+            icon: lucide_react_1.User,
+            label: t("actionsInvoiceCustomer"),
+            order: 2,
+        },
+    ]; }, [context, t]);
+    // ============================================================================
+    // ROW ACTIONS
+    // ============================================================================
+    var rowActions = (0, react_1.useMemo)(function () { return [
+        {
+            enabled: true,
+            handleOnClick: function (row) { return context.handleView(row); },
+            icon: ICON_MAP.view,
+            label: t("actionsButtonView"),
+            order: 1,
+        },
+        {
+            enabled: true,
+            handleOnClick: function (row) { return context.handleEdit(row); },
+            icon: ICON_MAP.edit,
+            label: t("actionsButtonEdit"),
+            order: 2,
+        },
+        {
+            enabled: true,
+            handleOnClick: function (row) { return context.handleRecordPayment(row); },
+            icon: ICON_MAP.recordPayment,
+            label: t("actionsButtonRecordPayment"),
+            order: 3,
+        },
+        {
+            enabled: true,
+            handleOnClick: function (row) { return context.handleDelete(row); },
+            icon: ICON_MAP.delete,
+            label: t("actionsButtonDelete"),
+            order: 4,
+        },
+    ]; }, [context, t]);
+    // ============================================================================
+    // ENHANCED CONTEXT WITH ACTIONS
+    // ============================================================================
+    var enhancedContext = (0, react_1.useMemo)(function () { return (__assign(__assign({}, context), { headerActions: headerActions, rowActions: rowActions, handleNextClick: function () {
+            return context.handlePageChange(context.state.currentPage + 1);
+        }, handlePreviousClick: function () {
+            return context.handlePageChange(context.state.currentPage - 1);
+        }, handlePageLimit: function (limit) { return context.handlePageLimitChange(limit); }, searchOnChange: function (query) { return context.handleSearch(query); }, closeDrawer: context.handleCloseDrawer })); }, [context, headerActions, rowActions]);
+    return (react_1.default.createElement(GenericInvoicePage, { config: invoiceConfig, context: enhancedContext, tableBodyCols: constants_1.tableBodyCols }));
+};
+var InvoicePage = function () { return (react_1.default.createElement(context_1.InvoiceProvider, null,
+    react_1.default.createElement(InvoicePageInner, null))); };
+exports.InvoicePage = InvoicePage;

package/base-modules/invoice/pricing-form-section.d.ts

@@ -5,8 +5,4 @@
  * Uses Shadcn UI components with RTL support and i18n.
  */
 import { FC } from "react";
-interface Props {
-    isRTL?: boolean;
-}
-export declare const PricingSection: FC<Props>;
-export {};
+export declare const PricingSection: FC;

package/base-modules/invoice/pricing-form-section.js

@@ -46,13 +46,16 @@ var enhanced_combobox_1 = require("@appcorp/shadcn/components/enhanced-combobox"
 var enhanced_input_1 = require("@appcorp/shadcn/components/enhanced-input");
 var label_1 = require("@appcorp/shadcn/components/ui/label");
 var button_1 = require("@appcorp/shadcn/components/ui/button");
-var context_1 = require("@appcorp/stellar-solutions-modules/global-modules/tax/context");
-var context_2 = require("./context");
-var types_1 = require("./types");
+var context_1 = require("./context");
+var util_functions_1 = require("@react-pakistan/util-functions");
+var cache_1 = require("@appcorp/stellar-solutions-modules/global-modules/tax/cache");
 var PricingSection = function () {
     var t = (0, next_intl_1.useTranslations)("invoice");
-    var _a = (0, context_1.useTaxStateContext)(), taxesFromTaxContext = _a.taxes, taxesLoading = _a.listLoading;
-    var _b = (0, context_2.useInvoiceStateContext)(), afterDiscount = _b.afterDiscount, discount = _b.discount, discountUnit = _b.discountUnit, errors = _b.errors, handleChange = _b.handleChange, handleTaxSearch = _b.handleTaxSearch, subTotal = _b.subTotal, tax = _b.tax, taxRate = _b.taxRate, total = _b.total;
+    // const { listLoading: taxesLoading, state: taxState } = useTaxModule();
+    var taxes = (0, cache_1.getCachedTaxesSync)();
+    var taxesFromTaxContext = taxes === null || taxes === void 0 ? void 0 : taxes.items;
+    var _a = (0, context_1.useInvoiceModule)(), state = _a.state, handleChange = _a.handleChange, handleTaxSearch = _a.handleTaxSearch;
+    var afterDiscount = state.afterDiscount, discount = state.discount, discountUnit = state.discountUnit, errors = state.errors, subTotal = state.subTotal, tax = state.tax, taxRate = state.taxRate, total = state.total;
     // Find the current tax based on taxRate value
     var currentTax = (0, react_1.useMemo)(function () {
         return taxesFromTaxContext === null || taxesFromTaxContext === void 0 ? void 0 : taxesFromTaxContext.find(function (t) { return String(t.taxRate) === String(taxRate); });
@@ -70,13 +73,13 @@ var PricingSection = function () {
                     react_1.default.createElement("p", { className: "text-sm text-muted-foreground" }, t("pricingFormDescriptionDiscountUnit")),
                     react_1.default.createElement("div", { className: "flex gap-2" },
                         react_1.default.createElement(button_1.Button, { onClick: function () {
-                                return handleChange("discountUnit", types_1.DISCOUNT_UNIT.FIXED_VALUE);
-                            }, size: "sm", type: "button", variant: discountUnit === types_1.DISCOUNT_UNIT.FIXED_VALUE
+                                return handleChange("discountUnit", util_functions_1.DISCOUNT_UNIT.FIXED_VALUE);
+                            }, size: "sm", type: "button", variant: discountUnit === util_functions_1.DISCOUNT_UNIT.FIXED_VALUE
                                 ? "default"
                                 : "outline" }, t("pricingFormDiscountFixedValue")),
                         react_1.default.createElement(button_1.Button, { onClick: function () {
-                                return handleChange("discountUnit", types_1.DISCOUNT_UNIT.PERCENTAGE_VALUE);
-                            }, size: "sm", type: "button", variant: discountUnit === types_1.DISCOUNT_UNIT.PERCENTAGE_VALUE
+                                return handleChange("discountUnit", util_functions_1.DISCOUNT_UNIT.PERCENTAGE_VALUE);
+                            }, size: "sm", type: "button", variant: discountUnit === util_functions_1.DISCOUNT_UNIT.PERCENTAGE_VALUE
                                 ? "default"
                                 : "outline" }, t("pricingFormDiscountPercentageValue")))),
                 react_1.default.createElement("div", { className: "space-y-2" },
@@ -84,7 +87,9 @@ var PricingSection = function () {
                 react_1.default.createElement("div", { className: "space-y-2" },
                     react_1.default.createElement(enhanced_input_1.EnhancedInput, { id: "afterDiscount", label: t("pricingFormLabelAfterDiscount"), onChange: function (e) { return handleChange("afterDiscount", e.target.value); }, placeholder: t("pricingFormPlaceholderAfterDiscount"), readOnly: true, type: "text", value: afterDiscount || "0", info: t("pricingFormInfoAfterDiscount") })),
                 react_1.default.createElement("div", { className: "space-y-2" },
-                    react_1.default.createElement(enhanced_combobox_1.EnhancedCombobox, { id: "taxRate", label: t("pricingFormLabelTax"), value: (currentTax === null || currentTax === void 0 ? void 0 : currentTax.taxRate) || "", onValueChange: function (v) { return handleChange("taxRate", v); }, onSearchChange: handleTaxSearch, loading: taxesLoading, options: (taxesFromTaxContext || [])
+                    react_1.default.createElement(enhanced_combobox_1.EnhancedCombobox, { id: "taxRate", label: t("pricingFormLabelTax"), value: (currentTax === null || currentTax === void 0 ? void 0 : currentTax.taxRate) != null ? String(currentTax.taxRate) : "", onValueChange: function (v) { return handleChange("taxRate", v); }, onSearchChange: handleTaxSearch, 
+                        // loading={taxesLoading}
+                        options: (taxesFromTaxContext || [])
                             .slice()
                             .sort(function (a, b) { return a.taxName.localeCompare(b.taxName); })
                             .map(function (tax) { return ({
@@ -94,6 +99,6 @@ var PricingSection = function () {
                 react_1.default.createElement("div", { className: "space-y-2" },
                     react_1.default.createElement(enhanced_input_1.EnhancedInput, { id: "afterTax", label: t("pricingFormLabelAfterTax"), placeholder: t("pricingFormPlaceholderAfterTax"), readOnly: true, type: "text", value: isNaN(Number(tax)) ? "0" : tax || "0", info: t("pricingFormInfoAfterTax") })),
                 react_1.default.createElement("div", { className: "space-y-2" },
-                    react_1.default.createElement(enhanced_input_1.EnhancedInput, { error: errors.total, id: "total", label: t("pricingFormLabelTotal"), onChange: function (e) { return handleChange("total", e.target.value); }, placeholder: t("pricingFormPlaceholderTotal"), readOnly: true, required: true, type: "text", value: isNaN(Number(total)) ? "0" : String(total || "0"), info: t("pricingFormInfoTotal") }))))));
+                    react_1.default.createElement(enhanced_input_1.EnhancedInput, { error: errors.total, id: "total", info: t("pricingFormInfoTotal"), label: t("pricingFormLabelTotal"), onChange: function (e) { return handleChange("total", e.target.value); }, placeholder: t("pricingFormPlaceholderTotal"), readOnly: true, required: true, type: "text", value: isNaN(Number(total)) ? "0" : String(total || "0") }))))));
 };
 exports.PricingSection = PricingSection;

package/base-modules/invoice/products-form-section.d.ts

@@ -5,8 +5,4 @@
  * Uses Shadcn UI components with RTL support and i18n.
  */
 import { FC } from "react";
-interface Props {
-    isRTL?: boolean;
-}
-export declare const ProductsSection: FC<Props>;
-export {};
+export declare const ProductsSection: FC;

package/base-modules/invoice/products-form-section.js

@@ -17,54 +17,63 @@ var button_1 = require("@appcorp/shadcn/components/ui/button");
 var enhanced_combobox_1 = require("@appcorp/shadcn/components/enhanced-combobox");
 var enhanced_input_1 = require("@appcorp/shadcn/components/enhanced-input");
 var context_1 = require("./context");
+var cache_1 = require("@appcorp/stellar-solutions-product-module/base-modules/product/cache");
 var ProductsSection = function () {
     var t = (0, next_intl_1.useTranslations)("invoice");
-    var _a = (0, context_1.useInvoiceStateContext)(), errors = _a.errors, getProducts = _a.getProducts, handleDeleteProductRow = _a.handleDeleteProductRow, handleItemChangeProducts = _a.handleItemChangeProducts, productsList = _a.productsList;
-    if (!productsList || productsList.length === 0) {
+    var products = (0, cache_1.getCachedProductsSync)();
+    var _a = (0, context_1.useInvoiceModule)(), state = _a.state, handleDeleteProductRow = _a.handleDeleteProductRow, handleItemChangeProducts = _a.handleItemChangeProducts;
+    var errors = state.errors, productList = state.productList;
+    if (!productList || productList.length === 0) {
         return null;
     }
-    var handleProductSearch = function (_searchQuery) {
+    var handleProductSearch = function () {
         // Product search is handled by getProducts filter in context
         // This is a placeholder to satisfy CompanyCombobox props
     };
     return (react_1.default.createElement("div", { className: "flex flex-col gap-4" },
         react_1.default.createElement("h3", { className: "text-lg font-semibold border-b pb-2" }, t("productFormSectionTitle")),
-        react_1.default.createElement("div", { className: "flex flex-col gap-4" }, productsList.map(function (row, index) { return (react_1.default.createElement("div", { key: index, className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[2fr_0.75fr_0.75fr_0.75fr_auto] gap-4 items-start p-4 border rounded-lg" },
-            react_1.default.createElement("div", { className: "space-y-2" },
-                react_1.default.createElement(enhanced_combobox_1.CompanyCombobox, { companies: getProducts || [], error: errors["productsList-".concat(index, "-id")], id: "product-id-".concat(index), label: t("productFormLabelProductName"), onSearchChange: handleProductSearch, onValueChange: function (selectedProductId) {
-                        return handleItemChangeProducts({
-                            index: index,
-                            key: "id",
-                            value: selectedProductId,
-                        });
-                    }, placeholder: t("productFormPlaceholderProductName"), required: true, value: productsList[index].id || "", info: t("productFormInfoProductName") })),
-            react_1.default.createElement("div", { className: "space-y-2" },
-                react_1.default.createElement(enhanced_input_1.EnhancedInput, { error: errors["productsList-".concat(index, "-quantity")], id: "product-quantity-".concat(index), label: t("productFormLabelQuantity"), onChange: function (e) {
-                        return handleItemChangeProducts({
-                            index: index,
-                            key: "quantity",
-                            value: e.target.value,
-                        });
-                    }, placeholder: t("productFormPlaceholderQuantity"), required: true, type: "number", value: String(productsList[index].quantity || ""), info: t("productFormInfoQuantity") })),
-            react_1.default.createElement("div", { className: "space-y-2" },
-                react_1.default.createElement(enhanced_input_1.EnhancedInput, { error: errors["productsList-".concat(index, "-price")], id: "product-price-".concat(index), label: t("productFormLabelPrice"), onChange: function (e) {
-                        return handleItemChangeProducts({
-                            index: index,
-                            key: "price",
-                            value: e.target.value,
-                        });
-                    }, placeholder: t("productFormPlaceholderPrice"), required: true, type: "number", value: productsList[index].price || "", info: t("productFormInfoPrice") })),
-            react_1.default.createElement("div", { className: "space-y-2" },
-                react_1.default.createElement(enhanced_input_1.EnhancedInput, { error: errors["productsList-".concat(index, "-rowTotal")], id: "product-rowTotal-".concat(index), label: t("productFormLabelServiceRowTotal"), onChange: function (e) {
-                        return handleItemChangeProducts({
-                            index: index,
-                            key: "rowTotal",
-                            value: e.target.value,
-                        });
-                    }, placeholder: t("productFormPlaceholderServiceRowTotal"), readOnly: true, required: true, type: "number", value: productsList[index].rowTotal || "", info: t("productFormInfoServiceRowTotal") })),
-            react_1.default.createElement("div", { className: "flex items-end h-full" },
-                react_1.default.createElement(button_1.Button, { onClick: function () { return handleDeleteProductRow(index); }, size: "icon", type: "button", variant: "ghost" },
-                    react_1.default.createElement(lucide_react_1.Trash2, { className: "h-4 w-4" }),
-                    react_1.default.createElement("span", { className: "sr-only" }, t("productFormButtonDeleteService")))))); }))));
+        react_1.default.createElement("div", { className: "flex flex-col gap-4" }, productList.map(function (row, index) {
+            var _a, _b, _c, _d, _e;
+            return (react_1.default.createElement("div", { key: index, className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[2fr_0.75fr_0.75fr_0.75fr_auto] gap-4 items-start p-4 border rounded-lg" },
+                react_1.default.createElement("div", { className: "space-y-2" },
+                    react_1.default.createElement(enhanced_combobox_1.EnhancedCombobox, { id: "product-id-".concat(index), label: t("productFormLabelProductName"), value: ((_a = productList[index]) === null || _a === void 0 ? void 0 : _a.id) || "", onValueChange: function (selectedProductId) {
+                            return handleItemChangeProducts({
+                                index: index,
+                                key: "id",
+                                value: selectedProductId,
+                            });
+                        }, onSearchChange: handleProductSearch, options: ((_b = products === null || products === void 0 ? void 0 : products.items) === null || _b === void 0 ? void 0 : _b.map(function (p) { return ({
+                            label: (p === null || p === void 0 ? void 0 : p.name) || (p === null || p === void 0 ? void 0 : p.id) || "",
+                            value: p === null || p === void 0 ? void 0 : p.id,
+                        }); })) || [], placeholder: t("productFormPlaceholderProductName"), info: t("productFormInfoProductName"), error: errors["products-".concat(index, "-id")], required: true })),
+                react_1.default.createElement("div", { className: "space-y-2" },
+                    react_1.default.createElement(enhanced_input_1.EnhancedInput, { error: errors["products-".concat(index, "-quantity")], id: "product-quantity-".concat(index), label: t("productFormLabelQuantity"), onChange: function (e) {
+                            return handleItemChangeProducts({
+                                index: index,
+                                key: "quantity",
+                                value: e.target.value,
+                            });
+                        }, placeholder: t("productFormPlaceholderQuantity"), required: true, type: "number", value: String(((_c = productList === null || productList === void 0 ? void 0 : productList[index]) === null || _c === void 0 ? void 0 : _c.quantity) || ""), info: t("productFormInfoQuantity") })),
+                react_1.default.createElement("div", { className: "space-y-2" },
+                    react_1.default.createElement(enhanced_input_1.EnhancedInput, { error: errors["products-".concat(index, "-price")], id: "product-price-".concat(index), label: t("productFormLabelPrice"), onChange: function (e) {
+                            return handleItemChangeProducts({
+                                index: index,
+                                key: "price",
+                                value: e.target.value,
+                            });
+                        }, placeholder: t("productFormPlaceholderPrice"), required: true, type: "number", value: ((_d = productList === null || productList === void 0 ? void 0 : productList[index]) === null || _d === void 0 ? void 0 : _d.price) || "", info: t("productFormInfoPrice") })),
+                react_1.default.createElement("div", { className: "space-y-2" },
+                    react_1.default.createElement(enhanced_input_1.EnhancedInput, { error: errors["products-".concat(index, "-rowTotal")], id: "product-rowTotal-".concat(index), label: t("productFormLabelServiceRowTotal"), onChange: function (e) {
+                            return handleItemChangeProducts({
+                                index: index,
+                                key: "rowTotal",
+                                value: e.target.value,
+                            });
+                        }, placeholder: t("productFormPlaceholderServiceRowTotal"), readOnly: true, required: true, type: "number", value: ((_e = productList[index]) === null || _e === void 0 ? void 0 : _e.rowTotal) || "", info: t("productFormInfoServiceRowTotal") })),
+                react_1.default.createElement("div", { className: "flex items-center h-full" },
+                    react_1.default.createElement(button_1.Button, { onClick: function () { return handleDeleteProductRow(index); }, size: "icon", type: "button", variant: "ghost" },
+                        react_1.default.createElement(lucide_react_1.Trash2, { className: "h-4 w-4" }),
+                        react_1.default.createElement("span", { className: "sr-only" }, t("productFormButtonDeleteService"))))));
+        }))));
 };
 exports.ProductsSection = ProductsSection;

package/base-modules/invoice/services-form-section.d.ts

@@ -5,8 +5,4 @@
  * Uses Shadcn UI components with RTL support and i18n.
  */
 import { FC } from "react";
-interface Props {
-    isRTL?: boolean;
-}
-export declare const ServicesSection: FC<Props>;
-export {};
+export declare const ServicesSection: FC;

package/base-modules/invoice/services-form-section.js

@@ -18,13 +18,14 @@ var enhanced_input_1 = require("@appcorp/shadcn/components/enhanced-input");
 var context_1 = require("./context");
 var ServicesSection = function () {
     var t = (0, next_intl_1.useTranslations)("invoice");
-    var _a = (0, context_1.useInvoiceStateContext)(), errors = _a.errors, handleDeleteServiceRow = _a.handleDeleteServiceRow, handleItemChangeServices = _a.handleItemChangeServices, servicesList = _a.servicesList;
-    if (!servicesList || servicesList.length === 0) {
+    var _a = (0, context_1.useInvoiceModule)(), state = _a.state, handleDeleteServiceRow = _a.handleDeleteServiceRow, handleItemChangeServices = _a.handleItemChangeServices;
+    var errors = state.errors, serviceList = state.serviceList;
+    if (!serviceList || serviceList.length === 0) {
         return null;
     }
     return (react_1.default.createElement("div", { className: "flex flex-col gap-4" },
         react_1.default.createElement("h3", { className: "text-lg font-semibold border-b pb-2" }, t("serviceFormSectionTitle")),
-        react_1.default.createElement("div", { className: "flex flex-col gap-4" }, servicesList.map(function (row, index) { return (react_1.default.createElement("div", { key: index, className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[1fr_1fr_0.75fr_0.75fr_0.75fr_auto] gap-4 items-end p-4 border rounded-lg" },
+        react_1.default.createElement("div", { className: "flex flex-col gap-4" }, serviceList.map(function (row, index) { return (react_1.default.createElement("div", { key: index, className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[1fr_1fr_0.75fr_0.75fr_0.75fr_auto] gap-4 items-end p-4 border rounded-lg" },
             react_1.default.createElement("div", { className: "space-y-2" },
                 react_1.default.createElement(enhanced_input_1.EnhancedInput, { error: errors["servicesList-".concat(index, "-name")], id: "service-name-".concat(index), label: t("serviceFormLabelServiceName"), onChange: function (e) {
                         return handleItemChangeServices({
@@ -32,7 +33,7 @@ var ServicesSection = function () {
                             key: "name",
                             value: e.target.value,
                         });
-                    }, placeholder: t("serviceFormPlaceholderServiceName"), required: true, type: "text", value: servicesList[index].name || "", info: t("serviceFormInfoServiceName") })),
+                    }, placeholder: t("serviceFormPlaceholderServiceName"), required: true, type: "text", value: serviceList[index].name || "", info: t("serviceFormInfoServiceName") })),
             react_1.default.createElement("div", { className: "space-y-2" },
                 react_1.default.createElement(enhanced_input_1.EnhancedInput, { error: errors["servicesList-".concat(index, "-description")], id: "service-description-".concat(index), label: t("serviceFormLabelServiceDescription"), onChange: function (e) {
                         return handleItemChangeServices({
@@ -40,7 +41,7 @@ var ServicesSection = function () {
                             key: "description",
                             value: e.target.value,
                         });
-                    }, placeholder: t("serviceFormPlaceholderServiceDescription"), type: "text", value: servicesList[index].description || "", info: t("serviceFormInfoServiceDescription") })),
+                    }, placeholder: t("serviceFormPlaceholderServiceDescription"), type: "text", value: serviceList[index].description || "", info: t("serviceFormInfoServiceDescription") })),
             react_1.default.createElement("div", { className: "space-y-2" },
                 react_1.default.createElement(enhanced_input_1.EnhancedInput, { error: errors["servicesList-".concat(index, "-quantity")], id: "service-quantity-".concat(index), label: t("serviceFormLabelServiceQuantity"), onChange: function (e) {
                         return handleItemChangeServices({
@@ -48,7 +49,7 @@ var ServicesSection = function () {
                             key: "quantity",
                             value: e.target.value,
                         });
-                    }, placeholder: t("serviceFormPlaceholderServiceQuantity"), required: true, type: "number", value: servicesList[index].quantity || "", info: t("serviceFormInfoServiceQuantity") })),
+                    }, placeholder: t("serviceFormPlaceholderServiceQuantity"), required: true, type: "number", value: serviceList[index].quantity || "", info: t("serviceFormInfoServiceQuantity") })),
             react_1.default.createElement("div", { className: "space-y-2" },
                 react_1.default.createElement(enhanced_input_1.EnhancedInput, { error: errors["servicesList-".concat(index, "-price")], id: "service-price-".concat(index), label: t("serviceFormLabelServicePrice"), onChange: function (e) {
                         return handleItemChangeServices({
@@ -56,7 +57,7 @@ var ServicesSection = function () {
                             key: "price",
                             value: e.target.value,
                         });
-                    }, placeholder: t("serviceFormPlaceholderServicePrice"), required: true, type: "number", value: servicesList[index].price || "", info: t("serviceFormInfoServicePrice") })),
+                    }, placeholder: t("serviceFormPlaceholderServicePrice"), required: true, type: "number", value: serviceList[index].price || "", info: t("serviceFormInfoServicePrice") })),
             react_1.default.createElement("div", { className: "space-y-2" },
                 react_1.default.createElement(enhanced_input_1.EnhancedInput, { error: errors["servicesList-".concat(index, "-rowTotal")], id: "service-rowTotal-".concat(index), label: t("serviceFormLabelServiceRowTotal"), onChange: function (e) {
                         return handleItemChangeServices({
@@ -64,8 +65,8 @@ var ServicesSection = function () {
                             key: "rowTotal",
                             value: e.target.value,
                         });
-                    }, placeholder: t("serviceFormPlaceholderServiceRowTotal"), readOnly: true, required: true, type: "number", value: servicesList[index].rowTotal || "", info: t("serviceFormInfoServiceRowTotal") })),
-            react_1.default.createElement("div", { className: "flex items-end h-full" },
+                    }, placeholder: t("serviceFormPlaceholderServiceRowTotal"), readOnly: true, required: true, type: "number", value: serviceList[index].rowTotal || "", info: t("serviceFormInfoServiceRowTotal") })),
+            react_1.default.createElement("div", { className: "flex items-center h-full" },
                 react_1.default.createElement(button_1.Button, { onClick: function () { return handleDeleteServiceRow(index); }, size: "icon", type: "button", variant: "ghost" },
                     react_1.default.createElement(lucide_react_1.Trash2, { className: "h-4 w-4" }),
                     react_1.default.createElement("span", { className: "sr-only" }, t("serviceFormButtonDeleteService")))))); }))));