@appcorp/stellar-solutions-invoice-module 0.1.56 → 0.1.59

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

@@ -1,2 +1,12 @@
-import React from 'react';
-export declare const CustomerSection: () => React.JSX.Element;
+/**
+ * Customer Form Section Component
+ *
+ * Form section for creating/editing customer information in invoices.
+ * Uses Shadcn UI components with RTL support and i18n.
+ */
+import { FC } from "react";
+interface Props {
+    isRTL: boolean;
+}
+export declare const CustomerSection: FC<Props>;
+export {};

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

@@ -1,17 +1,99 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+/**
+ * Customer Form Section Component
+ *
+ * Form section for creating/editing customer information in invoices.
+ * Uses Shadcn UI components with RTL support and i18n.
+ */
+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.CustomerSection = void 0;
-var react_1 = __importDefault(require("react"));
-var vista_vertical_divider_v4_1 = require("@appcorp/app-corp-vista/molecules/vista-vertical-divider-v4");
-var customer_form_elements_1 = require("./customer-form-elements");
+var react_1 = __importStar(require("react"));
+var next_intl_1 = require("next-intl");
+var util_functions_1 = require("@react-pakistan/util-functions");
+var combobox_1 = require("@appcorp/shadcn/components/combobox");
+var input_1 = require("@appcorp/shadcn/components/input");
 var context_1 = require("./context");
+var actions_1 = require("./actions");
 var CustomerSection = function () {
-    var dynamicCustomerFormElements = (0, context_1.useInvoiceStateContext)().dynamicCustomerFormElements;
+    var t = (0, next_intl_1.useTranslations)("invoicePage");
+    var _a = (0, context_1.useInvoiceStateContext)(), customer = _a.customer, errors = _a.errors, dispatch = _a.dispatch;
+    var handleCustomerChange = (0, react_1.useCallback)(function (key, value) {
+        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 },
+            });
+            return;
+        }
+        dispatch({
+            type: actions_1.INVOICE_ACTION_TYPES.SET_CUSTOMER_FORM,
+            payload: { key: key, value: value },
+        });
+        dispatch({
+            type: actions_1.INVOICE_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+            payload: { disableSaveButton: false },
+        });
+        dispatch({
+            type: actions_1.INVOICE_ACTION_TYPES.RESET_ERRORS,
+        });
+    }, [dispatch]);
+    var handleInputChange = function (field, value) {
+        handleCustomerChange(field, value);
+    };
+    var handleCountryChange = function (country) {
+        handleCustomerChange("country", country);
+    };
     return (react_1.default.createElement("div", { className: "flex flex-col gap-4" },
-        react_1.default.createElement(vista_vertical_divider_v4_1.VistaVerticalDividerV4, { label: "Customer" }),
-        (0, customer_form_elements_1.renderCustomerFormElements)(dynamicCustomerFormElements)));
+        react_1.default.createElement("h3", { className: "text-lg font-semibold border-b pb-2" }, t("customerSectionTitle")),
+        react_1.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4" },
+            react_1.default.createElement("div", { className: "space-y-2" },
+                react_1.default.createElement(input_1.Input, { id: "phone", type: "tel", label: t("formLabelPhone"), value: (customer === null || customer === void 0 ? void 0 : customer.phone) || "", onChange: function (e) { return handleCustomerChange("phone", e.target.value); }, placeholder: "+92 300 0000000", error: errors.phone, required: true })),
+            react_1.default.createElement("div", { className: "space-y-2" },
+                react_1.default.createElement(input_1.Input, { id: "firstName", type: "text", label: t("formLabelFirstName"), value: (customer === null || customer === void 0 ? void 0 : customer.firstName) || "", onChange: function (e) { return handleInputChange("firstName", e.target.value); }, placeholder: "John", error: errors.firstName, required: true })),
+            react_1.default.createElement("div", { className: "space-y-2" },
+                react_1.default.createElement(input_1.Input, { id: "lastName", type: "text", label: t("formLabelLastName"), value: (customer === null || customer === void 0 ? void 0 : customer.lastName) || "", onChange: function (e) { return handleInputChange("lastName", e.target.value); }, placeholder: "Doe", error: errors.lastName, required: true })),
+            react_1.default.createElement("div", { className: "space-y-2" },
+                react_1.default.createElement(input_1.Input, { id: "email", type: "email", label: t("formLabelEmail"), value: (customer === null || customer === void 0 ? void 0 : customer.email) || "", onChange: function (e) { return handleInputChange("email", e.target.value); }, placeholder: "name@company.com", error: errors.email })),
+            react_1.default.createElement("div", { className: "space-y-2" },
+                react_1.default.createElement(input_1.Input, { id: "address", type: "text", label: t("formLabelAddress"), value: (customer === null || customer === void 0 ? void 0 : customer.address) || "", onChange: function (e) { return handleInputChange("address", e.target.value); }, placeholder: "123 Street", error: errors.address })),
+            react_1.default.createElement("div", { className: "space-y-2" },
+                react_1.default.createElement(input_1.Input, { id: "city", type: "text", label: t("formLabelCity"), value: (customer === null || customer === void 0 ? void 0 : customer.city) || "", onChange: function (e) { return handleInputChange("city", e.target.value); }, placeholder: "New York", error: errors.city, required: true })),
+            react_1.default.createElement("div", { className: "space-y-2" },
+                react_1.default.createElement(combobox_1.CountryCombobox, { countries: util_functions_1.countriesTimeZones, id: "country", label: t("formLabelCountry"), value: (customer === null || customer === void 0 ? void 0 : customer.country) || "", onValueChange: handleCountryChange, placeholder: t("formPlaceholderCountry"), error: errors.country, required: true })))));
 };
 exports.CustomerSection = CustomerSection;

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

@@ -1,8 +1,13 @@
-import { FC } from 'react';
+/**
+ * Invoice Drawer Component
+ *
+ * A full-screen drawer component for creating/editing invoices with multi-section forms.
+ * Supports both company and customer invoices with dynamic form sections.
+ * Features RTL support and internationalization.
+ */
+import { FC } from "react";
 interface Props {
-    translationMap: {
-        [key: string]: string;
-    };
+    isRTL: boolean;
 }
 export declare const Drawer: FC<Props>;
 export {};

package/base-modules/invoice/drawer.js

@@ -1,19 +1,45 @@
 "use strict";
+/**
+ * Invoice Drawer Component
+ *
+ * A full-screen drawer component for creating/editing invoices with multi-section forms.
+ * Supports both company and customer invoices with dynamic form sections.
+ * Features RTL support and internationalization.
+ */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = void 0;
 var react_1 = __importDefault(require("react"));
-var vista_drawer_v1_1 = require("@appcorp/app-corp-vista/molecules/vista-drawer-v1/vista-drawer-v1");
-var vista_drawer_type_1 = require("@appcorp/app-corp-vista/type/vista-drawer-type");
-var vista_button_type_1 = require("@appcorp/app-corp-vista/type/vista-button-type");
+var lucide_react_1 = require("lucide-react");
+var next_intl_1 = require("next-intl");
+var button_1 = require("@appcorp/shadcn/components/button");
+var drawer_1 = require("@appcorp/shadcn/components/drawer");
 var context_1 = require("./context");
 var form_1 = require("./form");
+var types_1 = require("./types");
 var Drawer = function (_a) {
-    var translationMap = _a.translationMap;
+    var isRTL = _a.isRTL;
+    var t = (0, next_intl_1.useTranslations)("invoicePage");
     var _b = (0, context_1.useInvoiceStateContext)(), closeDrawer = _b.closeDrawer, disableSaveButton = _b.disableSaveButton, drawer = _b.drawer, handleSubmit = _b.handleSubmit;
-    return (react_1.default.createElement(vista_drawer_v1_1.VistaDrawerV1, { cancelLabel: "Cancel", cancelRounded: vista_button_type_1.VISTA_BUTTON_ROUNDED.MD, cancelSize: vista_button_type_1.VISTA_BUTTON_SIZE.LG, handleCancelOnClick: closeDrawer, handleSaveOnClick: handleSubmit, handleSetIsOpen: closeDrawer, isOpen: !!drawer, saveDisabled: disableSaveButton, saveLabel: 'Save', saveRounded: vista_button_type_1.VISTA_BUTTON_ROUNDED.MD, saveSize: vista_button_type_1.VISTA_BUTTON_SIZE.LG, size: vista_drawer_type_1.VISTA_DRAWER_SIZE.XL, title: 'Invoice' },
-        react_1.default.createElement(form_1.InvoiceForm, { translationMap: translationMap })));
+    var isFormDrawer = drawer === types_1.INVOICE_DRAWER.INVOICE_COMPANY_FORM_DRAWER ||
+        drawer === types_1.INVOICE_DRAWER.INVOICE_CUSTOMER_FORM_DRAWER;
+    var drawerTitle = t("drawerTitleInvoice");
+    var drawerWidth = "data-[vaul-drawer-direction=right]:sm:max-w-5xl";
+    var drawerDirection = isRTL ? "left" : "right";
+    return (react_1.default.createElement(drawer_1.Drawer, { open: !!drawer, onOpenChange: function (open) { return !open && closeDrawer(); }, direction: drawerDirection },
+        react_1.default.createElement(drawer_1.DrawerContent, { className: "h-full ".concat(drawerWidth, " ").concat(isRTL ? "rtl" : "ltr"), dir: isRTL ? "rtl" : "ltr" },
+            react_1.default.createElement(drawer_1.DrawerHeader, { className: "flex-row items-center justify-between border-b pb-4 ".concat(isRTL ? "flex-row-reverse" : "") },
+                react_1.default.createElement(drawer_1.DrawerTitle, { className: "text-xl font-semibold flex items-center ".concat(isRTL ? "flex-row-reverse gap-2" : "gap-2") }, drawerTitle),
+                react_1.default.createElement(drawer_1.DrawerClose, { asChild: true },
+                    react_1.default.createElement(button_1.Button, { variant: "ghost", size: "icon", className: "h-8 w-8" },
+                        react_1.default.createElement(lucide_react_1.X, { className: "h-4 w-4" }),
+                        react_1.default.createElement("span", { className: "sr-only" }, t("drawerButtonClose"))))),
+            react_1.default.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-6 ".concat(isRTL ? "text-right" : "text-left") }, isFormDrawer && react_1.default.createElement(form_1.InvoiceForm, { isRTL: isRTL })),
+            react_1.default.createElement(drawer_1.DrawerFooter, { className: "border-t pt-4" },
+                react_1.default.createElement("div", { className: "flex gap-2 ".concat(isRTL ? "flex-row-reverse" : "") },
+                    react_1.default.createElement(button_1.Button, { variant: "outline", onClick: closeDrawer, className: "flex-1" }, t("drawerButtonCancel")),
+                    isFormDrawer && (react_1.default.createElement(button_1.Button, { onClick: handleSubmit, disabled: disableSaveButton, className: "flex-1" }, t("drawerButtonSave"))))))));
 };
 exports.Drawer = Drawer;

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

@@ -1,8 +1,6 @@
-import { FC } from 'react';
+import { FC } from "react";
 interface Props {
-    translationMap: {
-        [key: string]: string;
-    };
+    isRTL: boolean;
 }
 export declare const InvoiceForm: FC<Props>;
 export {};

package/base-modules/invoice/form.js

@@ -13,14 +13,15 @@ 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 () {
+var InvoiceForm = function (_a) {
+    var isRTL = _a.isRTL;
     var drawer = (0, context_1.useInvoiceStateContext)().drawer;
     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, null)),
-        drawer === types_1.INVOICE_DRAWER.INVOICE_COMPANY_FORM_DRAWER && (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),
+        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 }),
         react_1.default.createElement(pricing_form_section_1.PricingSection, null)));
 };
 exports.InvoiceForm = InvoiceForm;

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

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+import { FC } from "react";
 interface Props {
     params: Promise<{
-        locale: 'en' | 'ur';
+        locale: "en" | "ur";
     }>;
 }
 export declare const InvoicePage: FC<Props>;

package/base-modules/invoice/invoice.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 "use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -8,71 +8,62 @@ exports.InvoicePage = void 0;
 var react_1 = __importDefault(require("react"));
 var next_intl_1 = require("next-intl");
 var util_functions_1 = require("@react-pakistan/util-functions");
-var context_1 = require("./context");
-var vista_table_v1_1 = require("@appcorp/app-corp-vista/organisms/vista-table-v1/vista-table-v1");
+var use_rtl_1 = require("@appcorp/stellar-solutions-modules/hooks/use-rtl");
+var enhanced_table_1 = require("@appcorp/shadcn/components/enhanced-table");
+var sonner_1 = require("@appcorp/shadcn/components/sonner");
 var constants_1 = require("./constants");
+var context_1 = require("./context");
 var drawer_1 = require("./drawer");
-var generate_toast_1 = require("@appcorp/app-corp-vista/utils/generate-toast");
 var InvoicePage = function () {
-    var _a = (0, context_1.useInvoiceStateContext)(), count = _a.count, currentPage = _a.currentPage, pageLimit = _a.pageLimit, handleNextClick = _a.handleNextClick, handlePreviousClick = _a.handlePreviousClick, headerActions = _a.headerActions, handlePageLimit = _a.handlePageLimit, searchQuery = _a.searchQuery, searchOnChange = _a.searchOnChange, rowActions = _a.rowActions, invoices = _a.invoices, listLoading = _a.listLoading;
-    var t = (0, next_intl_1.useTranslations)('invoicePage');
-    var translationMap = {
-        formLabelName: 'formLabelName',
-        formLabelBuyPrice: 'formLabelBuyPrice',
-        formLabelDescription: 'formLabelDescription',
-        formLabelQuantity: 'formLabelQuantity',
-        formLabelSalePrice: 'formLabelSalePrice',
-        formLabelRef: 'formLabelRef',
-        formLabelCurrency: 'formLabelCurrency',
-        formLabelImage: 'formLabelImage',
-        formLabelProductCategory: 'formLabelProductCategory',
-    };
+    var _a = (0, context_1.useInvoiceStateContext)(), count = _a.count, currentPage = _a.currentPage, handleNextClick = _a.handleNextClick, handlePageLimit = _a.handlePageLimit, handlePreviousClick = _a.handlePreviousClick, headerActions = _a.headerActions, invoices = _a.invoices, listLoading = _a.listLoading, pageLimit = _a.pageLimit, rowActions = _a.rowActions, searchOnChange = _a.searchOnChange, searchQuery = _a.searchQuery;
+    var isRTL = (0, use_rtl_1.useRTL)();
+    var t = (0, next_intl_1.useTranslations)("invoicePage");
     var tableHeadItems = [
         {
-            label: t('tableColumnHeaderId'),
-            width: '5%',
+            label: t("tableColumnHeaderId"),
+            width: "5%",
         },
         {
-            label: t('tableColumnHeaderName'),
-            width: '10%',
+            label: t("tableColumnHeaderName"),
+            width: "10%",
         },
         {
-            label: t('tableColumnHeaderIssueExpiryDate'),
-            width: '10%',
+            label: t("tableColumnHeaderIssueExpiryDate"),
+            width: "10%",
         },
         {
-            label: t('tableColumnHeaderRef'),
-            width: '5%',
+            label: t("tableColumnHeaderRef"),
+            width: "5%",
         },
         {
-            label: t('tableColumnHeaderSubTotal'),
-            width: '5%',
+            label: t("tableColumnHeaderSubTotal"),
+            width: "5%",
         },
         {
-            label: t('tableColumnHeaderTaxValue'),
-            width: '5%',
+            label: t("tableColumnHeaderTaxValue"),
+            width: "5%",
         },
         {
-            label: t('tableColumnHeaderDiscountPrice'),
-            width: '5%',
+            label: t("tableColumnHeaderDiscountPrice"),
+            width: "5%",
         },
         {
-            label: t('tableColumnHeaderTotalPrice'),
-            width: '5%',
+            label: t("tableColumnHeaderTotalPrice"),
+            width: "5%",
         },
         {
-            label: t('tableColumnHeaderCategory'),
-            width: '5%',
+            label: t("tableColumnHeaderCategory"),
+            width: "5%",
         },
         {
-            label: t('tableColumnHeaderActions'),
-            width: '5%',
+            label: t("tableColumnHeaderActions"),
+            width: "5%",
         },
     ];
-    var totalPagePerRecord = (0, util_functions_1.calculatePages)(count, pageLimit);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(vista_table_v1_1.VistaTableV1, { currentPage: currentPage, handleNextOnClick: handleNextClick, handleOnSelect: handlePageLimit, handlePreviousOnClick: handlePreviousClick, handleSearchInput: searchOnChange, headerActions: headerActions, isNextDisabled: (0, util_functions_1.isNextButtonDisabled)(currentPage, totalPagePerRecord), isPreviousDisabled: (0, util_functions_1.isPreviousButtonDisabled)(currentPage), listOptions: (0, util_functions_1.getAvailablePageLimits)(count), loading: listLoading, nodeSelectKey: "pageLimit", pageLimit: pageLimit, rowActions: rowActions, searchDisabled: false, searchEnabled: true, searchId: "invoice-search", searchPlaceholder: "Enter ID or Name...", searchValue: searchQuery, selectKey1: "option", selectedItem: { option: String(pageLimit) }, tableBodyCols: constants_1.tableBodyCols, tableBodyRows: invoices, tableDescription: t('subTitle'), tableHeadItems: tableHeadItems, tableHeading: t('title'), totalPages: totalPagePerRecord }),
-        react_1.default.createElement(drawer_1.Drawer, { translationMap: translationMap }),
-        react_1.default.createElement(generate_toast_1.VistaToaster, null)));
+    var totalPages = (0, util_functions_1.calculatePages)(count, pageLimit);
+    return (react_1.default.createElement("div", { className: "space-y-4 ".concat(isRTL ? "rtl" : "ltr"), dir: isRTL ? "rtl" : "ltr" },
+        react_1.default.createElement(enhanced_table_1.EnhancedTable, { currentPage: Number(currentPage), handleNextOnClick: handleNextClick, handleOnSelect: handlePageLimit, handlePreviousOnClick: handlePreviousClick, handleSearchInput: searchOnChange, headerActions: headerActions, isNextDisabled: (0, util_functions_1.isNextButtonDisabled)(currentPage, totalPages), isPreviousDisabled: (0, util_functions_1.isPreviousButtonDisabled)(currentPage), listOptions: (0, util_functions_1.getAvailablePageLimits)(count), loading: listLoading, nodeSelectKey: "pageLimit", pageLimit: pageLimit, rowActions: rowActions, searchDisabled: false, searchEnabled: true, searchId: "invoice-search", searchPlaceholder: "Enter ID or Name...", searchValue: searchQuery, tableBodyCols: constants_1.tableBodyCols, tableBodyRows: invoices, tableDescription: t("subTitle"), tableHeadItems: tableHeadItems, tableHeading: t("title"), totalPages: totalPages }),
+        react_1.default.createElement(drawer_1.Drawer, { isRTL: isRTL }),
+        react_1.default.createElement(sonner_1.Toaster, null)));
 };
 exports.InvoicePage = InvoicePage;

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

@@ -1,2 +1,12 @@
-import React from 'react';
-export declare const PricingSection: () => React.JSX.Element;
+/**
+ * Pricing Form Section Component
+ *
+ * Totals calculation section for invoice pricing including tax and discount.
+ * Uses Shadcn UI components with RTL support and i18n.
+ */
+import { FC } from "react";
+interface Props {
+    isRTL?: boolean;
+}
+export declare const PricingSection: FC<Props>;
+export {};

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

@@ -1,20 +1,76 @@
 "use strict";
+/**
+ * Pricing Form Section Component
+ *
+ * Totals calculation section for invoice pricing including tax and discount.
+ * Uses Shadcn UI components with RTL support and i18n.
+ */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PricingSection = void 0;
 var react_1 = __importDefault(require("react"));
-var vista_vertical_divider_v4_1 = require("@appcorp/app-corp-vista/molecules/vista-vertical-divider-v4");
+var next_intl_1 = require("next-intl");
+var combobox_1 = require("@appcorp/shadcn/components/combobox");
+var input_1 = require("@appcorp/shadcn/components/input");
+var label_1 = require("@appcorp/shadcn/components/label");
+var button_1 = require("@appcorp/shadcn/components/button");
 var context_1 = require("./context");
-var pricing_form_elements_1 = require("./pricing-form-elements");
+var types_1 = require("./types");
 var PricingSection = function () {
-    var dynamicPricingFormElements = (0, context_1.useInvoiceStateContext)().dynamicPricingFormElements;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(vista_vertical_divider_v4_1.VistaVerticalDividerV4, { label: "Totals" }),
-        react_1.default.createElement("div", { className: "grid grid-cols-3 justify-end" },
-            react_1.default.createElement("div", null),
-            react_1.default.createElement("div", null),
-            (0, pricing_form_elements_1.renderPricingFormElements)(dynamicPricingFormElements))));
+    var t = (0, next_intl_1.useTranslations)("invoicePage");
+    var _a = (0, context_1.useInvoiceStateContext)(), afterDiscount = _a.afterDiscount, discount = _a.discount, discountUnit = _a.discountUnit, errors = _a.errors, handleChange = _a.handleChange, subTotal = _a.subTotal, tax = _a.tax, taxes = _a.taxes, total = _a.total;
+    var handleTaxChange = function (selectedTaxId) {
+        var selectedTax = taxes === null || taxes === void 0 ? void 0 : taxes.find(function (t) { return t.id === selectedTaxId; });
+        if (selectedTax) {
+            handleChange("taxRate", selectedTax.taxRate);
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var handleTaxSearch = function (_searchQuery) {
+        // Tax search functionality placeholder
+    };
+    var handleDiscountUnitChange = function (unit) {
+        handleChange("discountUnit", unit);
+    };
+    // Map taxes to have consistent structure for CompanyCombobox
+    var taxOptions = (taxes || []).map(function (tax) { return ({
+        id: tax.id,
+        name: "".concat(tax.taxName, " (").concat(tax.taxRate, "%)"),
+    }); });
+    var currentTax = taxes === null || taxes === void 0 ? void 0 : taxes.find(function (t) { return String(t.taxRate) === String(tax); });
+    return (react_1.default.createElement("div", { className: "flex flex-col gap-6" },
+        react_1.default.createElement("h3", { className: "text-lg font-semibold border-b pb-2" }, t("pricingSectionTitle")),
+        react_1.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" },
+            react_1.default.createElement("div", { className: "hidden lg:block" }),
+            react_1.default.createElement("div", { className: "hidden lg:block" }),
+            react_1.default.createElement("div", { className: "flex flex-col gap-4" },
+                react_1.default.createElement("div", { className: "space-y-2" },
+                    react_1.default.createElement(input_1.Input, { error: errors.subTotal, id: "subTotal", label: t("formLabelSubTotal"), onChange: function (e) { return handleChange("subTotal", e.target.value); }, placeholder: "0.00", readOnly: true, type: "text", value: subTotal || "0" })),
+                react_1.default.createElement("div", { className: "space-y-3" },
+                    react_1.default.createElement(label_1.Label, null, t("formLabelDiscountUnit")),
+                    react_1.default.createElement("p", { className: "text-sm text-muted-foreground" }, t("discountUnitDescription")),
+                    react_1.default.createElement("div", { className: "flex gap-2" },
+                        react_1.default.createElement(button_1.Button, { onClick: function () {
+                                return handleDiscountUnitChange(types_1.DISCOUNT_UNIT.FIXED_VALUE);
+                            }, size: "sm", type: "button", variant: discountUnit === types_1.DISCOUNT_UNIT.FIXED_VALUE
+                                ? "default"
+                                : "outline" }, t("discountUnitFixedValue")),
+                        react_1.default.createElement(button_1.Button, { onClick: function () {
+                                return handleDiscountUnitChange(types_1.DISCOUNT_UNIT.PERCENTAGE_VALUE);
+                            }, size: "sm", type: "button", variant: discountUnit === types_1.DISCOUNT_UNIT.PERCENTAGE_VALUE
+                                ? "default"
+                                : "outline" }, t("discountUnitPercentageValue")))),
+                react_1.default.createElement("div", { className: "space-y-2" },
+                    react_1.default.createElement(input_1.Input, { error: errors.discount, id: "discount", label: t("formLabelDiscount"), onChange: function (e) { return handleChange("discount", e.target.value); }, placeholder: "0.00", type: "number", value: discount || "0" })),
+                react_1.default.createElement("div", { className: "space-y-2" },
+                    react_1.default.createElement(input_1.Input, { id: "afterDiscount", label: t("formLabelAfterDiscount"), onChange: function (e) { return handleChange("afterDiscount", e.target.value); }, placeholder: "0.00", readOnly: true, type: "text", value: afterDiscount || "0" })),
+                react_1.default.createElement("div", { className: "space-y-2" },
+                    react_1.default.createElement(combobox_1.CompanyCombobox, { companies: taxOptions, id: "taxRate", label: t("formLabelTax"), onSearchChange: handleTaxSearch, onValueChange: handleTaxChange, placeholder: t("formPlaceholderTax"), value: (currentTax === null || currentTax === void 0 ? void 0 : currentTax.id) || "" })),
+                react_1.default.createElement("div", { className: "space-y-2" },
+                    react_1.default.createElement(input_1.Input, { id: "afterTax", label: t("formLabelAfterTax"), placeholder: "0.00", readOnly: true, type: "text", value: isNaN(Number(tax)) ? "0" : tax || "0" })),
+                react_1.default.createElement("div", { className: "space-y-2" },
+                    react_1.default.createElement(input_1.Input, { error: errors.total, id: "total", label: t("formLabelTotal"), onChange: function (e) { return handleChange("total", e.target.value); }, placeholder: "0.00", 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

@@ -1,2 +1,12 @@
-import React from 'react';
-export declare const ProductsSection: () => React.JSX.Element;
+/**
+ * Products Form Section Component
+ *
+ * Dynamic list of product rows for invoice creation/editing.
+ * Uses Shadcn UI components with RTL support and i18n.
+ */
+import { FC } from "react";
+interface Props {
+    isRTL?: boolean;
+}
+export declare const ProductsSection: FC<Props>;
+export {};

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

@@ -1,46 +1,71 @@
 "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);
-};
+/**
+ * Products Form Section Component
+ *
+ * Dynamic list of product rows for invoice creation/editing.
+ * Uses Shadcn UI components with RTL support and i18n.
+ */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductsSection = void 0;
 var react_1 = __importDefault(require("react"));
-var vista_vertical_divider_v4_1 = require("@appcorp/app-corp-vista/molecules/vista-vertical-divider-v4");
+var next_intl_1 = require("next-intl");
+var lucide_react_1 = require("lucide-react");
+var button_1 = require("@appcorp/shadcn/components/button");
+var combobox_1 = require("@appcorp/shadcn/components/combobox");
+var input_1 = require("@appcorp/shadcn/components/input");
 var context_1 = require("./context");
-var vista_text_input_v1_1 = require("@appcorp/app-corp-vista/molecules/vista-text-input-v1");
-var vista_button_v1_1 = require("@appcorp/app-corp-vista/molecules/vista-button-v1/vista-button-v1");
-var solid_1 = require("@heroicons/react/24/solid");
-var vista_button_type_1 = require("@appcorp/app-corp-vista/type/vista-button-type");
-var vista_combobox_v1_1 = require("@appcorp/app-corp-vista/molecules/vista-combobox-v1/vista-combobox-v1");
 var ProductsSection = function () {
-    var _a = (0, context_1.useInvoiceStateContext)(), errors = _a.errors, getProducts = _a.getProducts, handleChange = _a.handleChange, handleDeleteServiceRow = _a.handleDeleteServiceRow, handleItemChangeProducts = _a.handleItemChangeProducts, productsList = _a.productsList;
+    var t = (0, next_intl_1.useTranslations)("invoicePage");
+    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) {
+        return null;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var handleProductSearch = function (_searchQuery) {
+        // 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(vista_vertical_divider_v4_1.VistaVerticalDividerV4, { label: "Products" }),
-        productsList.length > 0 && (productsList === null || productsList === void 0 ? void 0 : productsList.map(function (row, index) { return (react_1.default.createElement("div", { key: index, className: 'grid grid-cols-[17.5%_17.5%_17.5%_17.5%_17.5%_auto] items-start justify-between gap-4' },
-            react_1.default.createElement("div", { className: 'col-span-2' },
-                react_1.default.createElement(vista_combobox_v1_1.VistaComboboxV1, { handleOnChange: function (k, v) {
-                        var val = __assign({}, v);
-                        handleItemChangeProducts({
+        react_1.default.createElement("h3", { className: "text-lg font-semibold border-b pb-2" }, t("productsSectionTitle")),
+        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(combobox_1.CompanyCombobox, { companies: getProducts || [], error: errors["productsList-".concat(index, "-id")], id: "product-id-".concat(index), label: t("formLabelProduct"), onSearchChange: handleProductSearch, onValueChange: function (selectedProductId) {
+                        return handleItemChangeProducts({
+                            index: index,
+                            key: "id",
+                            value: selectedProductId,
+                        });
+                    }, placeholder: t("formPlaceholderProduct"), required: true, value: productsList[index].id || "" })),
+            react_1.default.createElement("div", { className: "space-y-2" },
+                react_1.default.createElement(input_1.Input, { error: errors["productsList-".concat(index, "-quantity")], id: "product-quantity-".concat(index), label: t("formLabelQuantity"), onChange: function (e) {
+                        return handleItemChangeProducts({
+                            index: index,
+                            key: "quantity",
+                            value: e.target.value,
+                        });
+                    }, placeholder: "1", required: true, type: "number", value: String(productsList[index].quantity || "") })),
+            react_1.default.createElement("div", { className: "space-y-2" },
+                react_1.default.createElement(input_1.Input, { error: errors["productsList-".concat(index, "-price")], id: "product-price-".concat(index), label: t("formLabelPrice"), onChange: function (e) {
+                        return handleItemChangeProducts({
+                            index: index,
+                            key: "price",
+                            value: e.target.value,
+                        });
+                    }, placeholder: "0.00", required: true, type: "number", value: productsList[index].price || "" })),
+            react_1.default.createElement("div", { className: "space-y-2" },
+                react_1.default.createElement(input_1.Input, { error: errors["productsList-".concat(index, "-rowTotal")], id: "product-rowTotal-".concat(index), label: t("formLabelRowTotal"), onChange: function (e) {
+                        return handleItemChangeProducts({
                             index: index,
-                            key: k,
-                            value: val.id,
+                            key: "rowTotal",
+                            value: e.target.value,
                         });
-                    }, handleOnBlur: handleChange, handleInputOnChange: handleChange, label: "Product", listItems: getProducts, nodeQueryKey: 'productQuery', nodeSelectKey: 'id', query: '', selectKey1: 'name', selectedItem: { id: productsList[index].id }, error: errors["productsList-".concat(index, "-id")] })),
-            react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnChange: function (k, v) { return handleItemChangeProducts({ index: index, key: k, value: v }); }, id: 'quantity', label: 'Quantity', placeholder: '1', value: String(productsList[index].quantity), type: 'number', error: errors["productsList-".concat(index, "-quantity")] }),
-            react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnChange: function (k, v) { return handleItemChangeProducts({ index: index, key: k, value: v }); }, id: 'price', label: 'Price', placeholder: '0.00', value: productsList[index].price, type: 'number', error: errors["productsList-".concat(index, "-price")] }),
-            react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnChange: function (k, v) { return handleItemChangeProducts({ index: index, key: k, value: v }); }, id: 'rowTotal', label: 'Row Total', placeholder: '0.00', value: productsList[index].rowTotal, type: 'number', readOnly: true, error: errors["productsList-".concat(index, "-rowTotal")] }),
-            react_1.default.createElement("div", { className: 'h-full flex flex-col justify-center' },
-                react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { className: 'flex justify-center items-end', handleOnClick: function () { return handleDeleteServiceRow(index); }, icon: react_1.default.createElement(solid_1.TrashIcon, { className: "size-6" }), variant: vista_button_type_1.VISTA_BUTTON_VARIANT.ICON })))); }))));
+                    }, placeholder: "0.00", readOnly: true, required: true, type: "number", value: productsList[index].rowTotal || "" })),
+            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("buttonDeleteProduct")))))); }))));
 };
 exports.ProductsSection = ProductsSection;

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

@@ -1,4 +1,4 @@
-import { InvoiceActions } from './actions';
-import { InvoiceState } from './types';
+import { InvoiceActions } from "./actions";
+import { InvoiceState } from "./types";
 export declare const initialInvoiceState: InvoiceState;
 export declare function invoiceReducer(state: InvoiceState, action: InvoiceActions): InvoiceState;