tango-app-ui-manage-billing 3.3.21 → 3.3.23

package/fesm2022/tango-app-ui-manage-billing.mjs

@@ -416,7 +416,7 @@ let CreditNoteComponent$1 = class CreditNoteComponent {
             invoicetype: ['', Validators.required],
             amount: ['', Validators.required],
             revisedAmount: ['', Validators.required],
-            discount: ['', [Validators.required, Validators.max(10)]],
+            discount: ['', [Validators.required]],
         });
         this.creditnoteform.get('revisedAmount')?.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((e) => {
             if (e) {
@@ -425,7 +425,7 @@ let CreditNoteComponent$1 = class CreditNoteComponent {
                 if (this.amount) {
                     this.discount = ((this.amount - e) / this.amount * 100).toFixed(2);
                     this.revisedAmount = e;
-                    if (this.discount > 10 || isNaN(e) || this.discount < 0 || e < 0) {
+                    if (isNaN(e) || this.discount < 0 || e < 0) {
                         this.moreThanTenPercent = true;
                     }
                     else {
@@ -453,7 +453,7 @@ let CreditNoteComponent$1 = class CreditNoteComponent {
                 this.revisedAmount = this.amount * (1 - e / 100);
                 this.revisedAmount = parseInt(this.revisedAmount.toFixed());
                 this.discount = e;
-                if (this.discount > 10 || isNaN(e) || e < 0 || this.revisedAmount < 0) {
+                if (isNaN(e) || e < 0 || this.revisedAmount < 0) {
                     this.moreThanTenPercent = true;
                 }
                 else {
@@ -537,11 +537,11 @@ let CreditNoteComponent$1 = class CreditNoteComponent {
         this.invoicetypedropDown = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreditNoteComponent, deps: [{ token: i1$1.NgbActiveModal }, { token: BillingService }, { token: i0.ChangeDetectorRef }, { token: i5.FormBuilder }, { token: i2$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CreditNoteComponent, selector: "lib-credit-note", inputs: { clientId: "clientId", transactionvalue: "transactionvalue" }, outputs: { passEntry: "passEntry" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"modal-content\">\r\n    <div class=\"p-5 px-6\">\r\n        <!-- <div><img src=\"./assets/tango/custompopup-Icons/plus-icon.svg\" alt=\"\"></div> -->\r\n        <div class=\"heading mt-4 ms-1\">Add Credit Note</div>\r\n        <div class=\"contenttext mt-4\">\r\n            You have the flexibility to select a month in which the brand can make credit payments.\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"modal-body mb-8\">\r\n        <!--begin::Form-->\r\n        <form [formGroup]=\"creditnoteform\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n\r\n            <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n                <div class=\"form-group py-2\">\r\n                    <label for=\"invoicetype\" class=\"headingtext mb-2\">Invoice ID</label>\r\n                    <div class=\"position-relative\">\r\n                        <div class=\"form-select dropselect\" id=\"invoicetype\"\r\n                            (click)=\"invoicetypeDropdown($event)\"\r\n                            aria-label=\"Default select example\">{{invoiceIssue}}</div>\r\n                        <div *ngIf=\"invoicetypedropDown\"\r\n                            class=\"card py-2 w-100 invoiceidselect position-absolute end-0 z-1 invoiceDropDown\">\r\n                            <ul *ngFor=\"let item of invoiceitem\"\r\n                                class=\"list-unstyled mb-2\">\r\n                                <li [ngClass]=\"this.invoiceIssue === item?.invoice ? 'active' : ''\"\r\n                                    class=\"producttext px-5 items cursor-pointer py-4\"\r\n                                    (click)=\"invoiceItem(item)\">\r\n                                    {{item?.invoice}}\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div for=\"amount\" class=\"form-group py-2\">\r\n                    <label class=\" headingtext mb-2 \">Total Amount</label>\r\n                    <div class=\"input-group\">\r\n                        <span class=\"dollar-sign\">{{ currencySymbol() }}</span>\r\n                        <input formControlName=\"amount\"  type=\"text\" readonly class=\"ng-pristine ng-invalid ng-touched amount\"\r\n                        style=\"text-transform: capitalize;\"></div>\r\n\r\n                </div>\r\n                <div for=\"revisedAmount\" class=\"form-group mt-2\">\r\n                    <div class=\"py-2\">\r\n                        <label class=\" headingtext mb-2\"> Revised Amount</label>\r\n                        <div class=\"input-group dropselect\">\r\n                            <span class=\"dollar-sign\">{{ currencySymbol() }}</span><input type=\"text\" (keypress)=\"omit_special_char($event)\"  formControlName=\"revisedAmount\"  [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\"\r\n                            style=\"text-transform: capitalize;\">\r\n                            <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_7513_36689)\">\r\n                                <path d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </g>\r\n                                <defs>\r\n                                <clipPath id=\"clip0_7513_36689\">\r\n                                <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n                                </clipPath>\r\n                                </defs>\r\n                                </svg></span></div>\r\n                    </div>\r\n                    <span *ngIf=\"!moreThanTenPercent\"  class=\"headingtext contenttext\">More than 10% can\u2019t be revised from total amount</span>\r\n                    <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">More than 10% can\u2019t be revised from total amount</span>\r\n                </div>\r\n                <div for=\"discount\" class=\"form-group mt-2\">\r\n                <div class=\"py-2\">\r\n                    <label class=\" headingtext mb-2\"> Discount</label>\r\n                    <div class=\"input-group\">  <input type=\"text\" (keypress)=\"omit_special_char($event)\"  formControlName=\"discount\" class=\"amount\" [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\" >\r\n                        <span class=\"icon\" *ngIf=\"!moreThanTenPercent\" >\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#98A2B3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span>\r\n                    <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg></span>\r\n                         \r\n                        </div>\r\n                </div>\r\n                <span *ngIf=\"!moreThanTenPercent\"  class=\"headingtext contenttext\">In percentage</span>\r\n                <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">In percentage</span>\r\n            </div>\r\n        </div>\r\n            <div class=\"d-flex mt-5\">\r\n                <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n                <button [disabled]=\"moreThanTenPercent\" type=\"button\" (click)=\"successcredit()\" tabindex=\"0\" \r\n                    class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n                        class=\"submit\">Apply </span></button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}input{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.cancel{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-900, #101828)!important;font-family:Inter;font-size:16px!important;font-weight:400!important;line-height:24px;height:45px!important}.totalamount{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-weight:400;line-height:24px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400!important;line-height:24px}.input-group input[type=text]{padding-left:30px}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:14px!important;font-weight:400;line-height:20px}.input-group{position:relative}.input-group>.icon{position:absolute;top:43%;right:16px;transform:translateY(-50%);color:silver}.input-group>input{padding-left:calc(1em + 18px)}.spritesheet{display:none}.icon{display:inline-block;width:16px!important;height:16px!important}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}.invoiceDropDown{min-height:auto!important;max-height:170px!important;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CreditNoteComponent, selector: "lib-credit-note", inputs: { clientId: "clientId", transactionvalue: "transactionvalue" }, outputs: { passEntry: "passEntry" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"modal-content\">\r\n    <div class=\"p-5 px-6\">\r\n        <!-- <div><img src=\"./assets/tango/custompopup-Icons/plus-icon.svg\" alt=\"\"></div> -->\r\n        <div class=\"heading mt-4 ms-1\">Add Credit Note</div>\r\n        <div class=\"contenttext mt-4\">\r\n            You have the flexibility to select a month in which the brand can make credit payments.\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"modal-body mb-8\">\r\n        <!--begin::Form-->\r\n        <form [formGroup]=\"creditnoteform\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n\r\n            <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n                <div class=\"form-group py-2\">\r\n                    <label for=\"invoicetype\" class=\"headingtext mb-2\">Invoice ID</label>\r\n                    <div class=\"position-relative\">\r\n                        <div class=\"form-select dropselect\" id=\"invoicetype\"\r\n                            (click)=\"invoicetypeDropdown($event)\"\r\n                            aria-label=\"Default select example\">{{invoiceIssue}}</div>\r\n                        <div *ngIf=\"invoicetypedropDown\"\r\n                            class=\"card py-2 w-100 invoiceidselect position-absolute end-0 z-1 invoiceDropDown\">\r\n                            <ul *ngFor=\"let item of invoiceitem\"\r\n                                class=\"list-unstyled mb-2\">\r\n                                <li [ngClass]=\"this.invoiceIssue === item?.invoice ? 'active' : ''\"\r\n                                    class=\"producttext px-5 items cursor-pointer py-4\"\r\n                                    (click)=\"invoiceItem(item)\">\r\n                                    {{item?.invoice}}\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div for=\"amount\" class=\"form-group py-2\">\r\n                    <label class=\" headingtext mb-2 \">Total Amount</label>\r\n                    <div class=\"input-group\">\r\n                        <span class=\"dollar-sign\">{{ currencySymbol() }}</span>\r\n                        <input formControlName=\"amount\"  type=\"text\" readonly class=\"ng-pristine ng-invalid ng-touched amount\"\r\n                        style=\"text-transform: capitalize;\"></div>\r\n\r\n                </div>\r\n                <div for=\"revisedAmount\" class=\"form-group mt-2\">\r\n                    <div class=\"py-2\">\r\n                        <label class=\" headingtext mb-2\"> Revised Amount</label>\r\n                        <div class=\"input-group dropselect\">\r\n                            <span class=\"dollar-sign\">{{ currencySymbol() }}</span><input type=\"text\" (keypress)=\"omit_special_char($event)\"  formControlName=\"revisedAmount\"  [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\"\r\n                            style=\"text-transform: capitalize;\">\r\n                            <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_7513_36689)\">\r\n                                <path d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </g>\r\n                                <defs>\r\n                                <clipPath id=\"clip0_7513_36689\">\r\n                                <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n                                </clipPath>\r\n                                </defs>\r\n                                </svg></span></div>\r\n                    </div>\r\n                    <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">Enter a valid revised amount</span>\r\n                </div>\r\n                <div for=\"discount\" class=\"form-group mt-2\">\r\n                <div class=\"py-2\">\r\n                    <label class=\" headingtext mb-2\"> Discount</label>\r\n                    <div class=\"input-group\">  <input type=\"text\" (keypress)=\"omit_special_char($event)\"  formControlName=\"discount\" class=\"amount\" [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\" >\r\n                        <span class=\"icon\" *ngIf=\"!moreThanTenPercent\" >\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#98A2B3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span>\r\n                    <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg></span>\r\n                         \r\n                        </div>\r\n                </div>\r\n                <span *ngIf=\"!moreThanTenPercent\"  class=\"headingtext contenttext\">In percentage</span>\r\n                <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">In percentage</span>\r\n            </div>\r\n        </div>\r\n            <div class=\"d-flex mt-5\">\r\n                <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n                <button [disabled]=\"moreThanTenPercent\" type=\"button\" (click)=\"successcredit()\" tabindex=\"0\" \r\n                    class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n                        class=\"submit\">Apply </span></button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}input{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.cancel{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-900, #101828)!important;font-family:Inter;font-size:16px!important;font-weight:400!important;line-height:24px;height:45px!important}.totalamount{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-weight:400;line-height:24px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400!important;line-height:24px}.input-group input[type=text]{padding-left:30px}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:14px!important;font-weight:400;line-height:20px}.input-group{position:relative}.input-group>.icon{position:absolute;top:43%;right:16px;transform:translateY(-50%);color:silver}.input-group>input{padding-left:calc(1em + 18px)}.spritesheet{display:none}.icon{display:inline-block;width:16px!important;height:16px!important}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}.invoiceDropDown{min-height:auto!important;max-height:170px!important;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreditNoteComponent$1, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-credit-note', template: "<div class=\"modal-content\">\r\n    <div class=\"p-5 px-6\">\r\n        <!-- <div><img src=\"./assets/tango/custompopup-Icons/plus-icon.svg\" alt=\"\"></div> -->\r\n        <div class=\"heading mt-4 ms-1\">Add Credit Note</div>\r\n        <div class=\"contenttext mt-4\">\r\n            You have the flexibility to select a month in which the brand can make credit payments.\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"modal-body mb-8\">\r\n        <!--begin::Form-->\r\n        <form [formGroup]=\"creditnoteform\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n\r\n            <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n                <div class=\"form-group py-2\">\r\n                    <label for=\"invoicetype\" class=\"headingtext mb-2\">Invoice ID</label>\r\n                    <div class=\"position-relative\">\r\n                        <div class=\"form-select dropselect\" id=\"invoicetype\"\r\n                            (click)=\"invoicetypeDropdown($event)\"\r\n                            aria-label=\"Default select example\">{{invoiceIssue}}</div>\r\n                        <div *ngIf=\"invoicetypedropDown\"\r\n                            class=\"card py-2 w-100 invoiceidselect position-absolute end-0 z-1 invoiceDropDown\">\r\n                            <ul *ngFor=\"let item of invoiceitem\"\r\n                                class=\"list-unstyled mb-2\">\r\n                                <li [ngClass]=\"this.invoiceIssue === item?.invoice ? 'active' : ''\"\r\n                                    class=\"producttext px-5 items cursor-pointer py-4\"\r\n                                    (click)=\"invoiceItem(item)\">\r\n                                    {{item?.invoice}}\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div for=\"amount\" class=\"form-group py-2\">\r\n                    <label class=\" headingtext mb-2 \">Total Amount</label>\r\n                    <div class=\"input-group\">\r\n                        <span class=\"dollar-sign\">{{ currencySymbol() }}</span>\r\n                        <input formControlName=\"amount\"  type=\"text\" readonly class=\"ng-pristine ng-invalid ng-touched amount\"\r\n                        style=\"text-transform: capitalize;\"></div>\r\n\r\n                </div>\r\n                <div for=\"revisedAmount\" class=\"form-group mt-2\">\r\n                    <div class=\"py-2\">\r\n                        <label class=\" headingtext mb-2\"> Revised Amount</label>\r\n                        <div class=\"input-group dropselect\">\r\n                            <span class=\"dollar-sign\">{{ currencySymbol() }}</span><input type=\"text\" (keypress)=\"omit_special_char($event)\"  formControlName=\"revisedAmount\"  [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\"\r\n                            style=\"text-transform: capitalize;\">\r\n                            <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_7513_36689)\">\r\n                                <path d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </g>\r\n                                <defs>\r\n                                <clipPath id=\"clip0_7513_36689\">\r\n                                <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n                                </clipPath>\r\n                                </defs>\r\n                                </svg></span></div>\r\n                    </div>\r\n                    <span *ngIf=\"!moreThanTenPercent\"  class=\"headingtext contenttext\">More than 10% can\u2019t be revised from total amount</span>\r\n                    <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">More than 10% can\u2019t be revised from total amount</span>\r\n                </div>\r\n                <div for=\"discount\" class=\"form-group mt-2\">\r\n                <div class=\"py-2\">\r\n                    <label class=\" headingtext mb-2\"> Discount</label>\r\n                    <div class=\"input-group\">  <input type=\"text\" (keypress)=\"omit_special_char($event)\"  formControlName=\"discount\" class=\"amount\" [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\" >\r\n                        <span class=\"icon\" *ngIf=\"!moreThanTenPercent\" >\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#98A2B3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span>\r\n                    <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg></span>\r\n                         \r\n                        </div>\r\n                </div>\r\n                <span *ngIf=\"!moreThanTenPercent\"  class=\"headingtext contenttext\">In percentage</span>\r\n                <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">In percentage</span>\r\n            </div>\r\n        </div>\r\n            <div class=\"d-flex mt-5\">\r\n                <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n                <button [disabled]=\"moreThanTenPercent\" type=\"button\" (click)=\"successcredit()\" tabindex=\"0\" \r\n                    class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n                        class=\"submit\">Apply </span></button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}input{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.cancel{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-900, #101828)!important;font-family:Inter;font-size:16px!important;font-weight:400!important;line-height:24px;height:45px!important}.totalamount{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-weight:400;line-height:24px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400!important;line-height:24px}.input-group input[type=text]{padding-left:30px}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:14px!important;font-weight:400;line-height:20px}.input-group{position:relative}.input-group>.icon{position:absolute;top:43%;right:16px;transform:translateY(-50%);color:silver}.input-group>input{padding-left:calc(1em + 18px)}.spritesheet{display:none}.icon{display:inline-block;width:16px!important;height:16px!important}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}.invoiceDropDown{min-height:auto!important;max-height:170px!important;overflow:auto}\n"] }]
+            args: [{ selector: 'lib-credit-note', template: "<div class=\"modal-content\">\r\n    <div class=\"p-5 px-6\">\r\n        <!-- <div><img src=\"./assets/tango/custompopup-Icons/plus-icon.svg\" alt=\"\"></div> -->\r\n        <div class=\"heading mt-4 ms-1\">Add Credit Note</div>\r\n        <div class=\"contenttext mt-4\">\r\n            You have the flexibility to select a month in which the brand can make credit payments.\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"modal-body mb-8\">\r\n        <!--begin::Form-->\r\n        <form [formGroup]=\"creditnoteform\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n\r\n            <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n                <div class=\"form-group py-2\">\r\n                    <label for=\"invoicetype\" class=\"headingtext mb-2\">Invoice ID</label>\r\n                    <div class=\"position-relative\">\r\n                        <div class=\"form-select dropselect\" id=\"invoicetype\"\r\n                            (click)=\"invoicetypeDropdown($event)\"\r\n                            aria-label=\"Default select example\">{{invoiceIssue}}</div>\r\n                        <div *ngIf=\"invoicetypedropDown\"\r\n                            class=\"card py-2 w-100 invoiceidselect position-absolute end-0 z-1 invoiceDropDown\">\r\n                            <ul *ngFor=\"let item of invoiceitem\"\r\n                                class=\"list-unstyled mb-2\">\r\n                                <li [ngClass]=\"this.invoiceIssue === item?.invoice ? 'active' : ''\"\r\n                                    class=\"producttext px-5 items cursor-pointer py-4\"\r\n                                    (click)=\"invoiceItem(item)\">\r\n                                    {{item?.invoice}}\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div for=\"amount\" class=\"form-group py-2\">\r\n                    <label class=\" headingtext mb-2 \">Total Amount</label>\r\n                    <div class=\"input-group\">\r\n                        <span class=\"dollar-sign\">{{ currencySymbol() }}</span>\r\n                        <input formControlName=\"amount\"  type=\"text\" readonly class=\"ng-pristine ng-invalid ng-touched amount\"\r\n                        style=\"text-transform: capitalize;\"></div>\r\n\r\n                </div>\r\n                <div for=\"revisedAmount\" class=\"form-group mt-2\">\r\n                    <div class=\"py-2\">\r\n                        <label class=\" headingtext mb-2\"> Revised Amount</label>\r\n                        <div class=\"input-group dropselect\">\r\n                            <span class=\"dollar-sign\">{{ currencySymbol() }}</span><input type=\"text\" (keypress)=\"omit_special_char($event)\"  formControlName=\"revisedAmount\"  [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\"\r\n                            style=\"text-transform: capitalize;\">\r\n                            <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_7513_36689)\">\r\n                                <path d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </g>\r\n                                <defs>\r\n                                <clipPath id=\"clip0_7513_36689\">\r\n                                <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n                                </clipPath>\r\n                                </defs>\r\n                                </svg></span></div>\r\n                    </div>\r\n                    <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">Enter a valid revised amount</span>\r\n                </div>\r\n                <div for=\"discount\" class=\"form-group mt-2\">\r\n                <div class=\"py-2\">\r\n                    <label class=\" headingtext mb-2\"> Discount</label>\r\n                    <div class=\"input-group\">  <input type=\"text\" (keypress)=\"omit_special_char($event)\"  formControlName=\"discount\" class=\"amount\" [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\" >\r\n                        <span class=\"icon\" *ngIf=\"!moreThanTenPercent\" >\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#98A2B3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span>\r\n                    <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg></span>\r\n                         \r\n                        </div>\r\n                </div>\r\n                <span *ngIf=\"!moreThanTenPercent\"  class=\"headingtext contenttext\">In percentage</span>\r\n                <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">In percentage</span>\r\n            </div>\r\n        </div>\r\n            <div class=\"d-flex mt-5\">\r\n                <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n                <button [disabled]=\"moreThanTenPercent\" type=\"button\" (click)=\"successcredit()\" tabindex=\"0\" \r\n                    class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n                        class=\"submit\">Apply </span></button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}input{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.cancel{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-900, #101828)!important;font-family:Inter;font-size:16px!important;font-weight:400!important;line-height:24px;height:45px!important}.totalamount{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-weight:400;line-height:24px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400!important;line-height:24px}.input-group input[type=text]{padding-left:30px}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:14px!important;font-weight:400;line-height:20px}.input-group{position:relative}.input-group>.icon{position:absolute;top:43%;right:16px;transform:translateY(-50%);color:silver}.input-group>input{padding-left:calc(1em + 18px)}.spritesheet{display:none}.icon{display:inline-block;width:16px!important;height:16px!important}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}.invoiceDropDown{min-height:auto!important;max-height:170px!important;overflow:auto}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgbActiveModal }, { type: BillingService }, { type: i0.ChangeDetectorRef }, { type: i5.FormBuilder }, { type: i2$1.ToastService }], propDecorators: { clientId: [{
                 type: Input
             }], transactionvalue: [{
@@ -598,14 +598,14 @@ class OneTimeFeeComponent {
             invoicetype: ['', Validators.required],
             amount: ['', Validators.required],
             revisedAmount: ['', Validators.required],
-            discount: ['', [Validators.required, Validators.max(10)]],
+            discount: ['', [Validators.required]],
         });
         this.onetimefeeform.get('revisedAmount')?.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((e) => {
             if (e) {
                 this.amount = this.onetimefeeform.get('amount')?.value;
                 this.discount = ((this.amount - e) / this.amount * 100).toFixed(2);
                 this.revisedAmount = e;
-                if (this.discount > 10 || isNaN(e) || this.discount < 0 || e < 0) {
+                if (isNaN(e) || this.discount < 0 || e < 0) {
                     this.moreThanTenPercent = false;
                 }
                 else {
@@ -629,7 +629,7 @@ class OneTimeFeeComponent {
                 this.revisedAmount = this.amount * (1 - e / 100);
                 this.revisedAmount = parseInt(this.revisedAmount.toFixed());
                 this.discount = e;
-                if (this.discount > 10 || isNaN(e) || e < 0 || this.revisedAmount < 0) {
+                if (isNaN(e) || e < 0 || this.revisedAmount < 0) {
                     this.moreThanTenPercent = false;
                 }
                 else {
@@ -1360,14 +1360,14 @@ class EditInvoiceComponent {
         this.creditNoteForm = this.fb.group({
             amount: [''],
             revisedAmount: ['', Validators.required],
-            discount: ['', [Validators.required, Validators.max(10)]],
+            discount: ['', [Validators.required]],
         });
         this.creditNoteForm.get('revisedAmount')?.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((e) => {
             if (e) {
                 const amount = this.creditNoteForm.get('amount')?.value;
                 if (amount) {
                     const discount = ((amount - e) / amount * 100).toFixed(2);
-                    this.creditMoreThanTenPercent = parseFloat(discount) > 10 || isNaN(e) || parseFloat(discount) < 0 || e < 0;
+                    this.creditMoreThanTenPercent = isNaN(e) || parseFloat(discount) < 0 || e < 0;
                     this.creditNoteForm.get('discount')?.setValue(discount, { emitEvent: false });
                 }
             }
@@ -1380,7 +1380,7 @@ class EditInvoiceComponent {
             if (e) {
                 const amount = this.creditNoteForm.get('amount')?.value;
                 const revised = parseInt((amount * (1 - e / 100)).toFixed());
-                this.creditMoreThanTenPercent = parseFloat(e) > 10 || isNaN(e) || e < 0 || revised < 0;
+                this.creditMoreThanTenPercent = isNaN(e) || e < 0 || revised < 0;
                 this.creditNoteForm.get('revisedAmount')?.setValue(revised, { emitEvent: false });
             }
             else {
@@ -1470,11 +1470,11 @@ class EditInvoiceComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditInvoiceComponent, deps: [{ token: i1$1.NgbActiveModal }, { token: i5.FormBuilder }, { token: BillingService }, { token: i0.ChangeDetectorRef }, { token: i2$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EditInvoiceComponent, selector: "lib-edit-invoice", inputs: { invoiceData: "invoiceData", mode: "mode", clientId: "clientId", billingGroups: "billingGroups" }, ngImport: i0, template: "<div class=\"modal-content\">\n    <div class=\"p-5 px-6 pb-0\">\n        <div class=\"d-flex justify-content-between align-items-center\">\n            <div class=\"heading mt-2\">{{ mode === 'edit' ? 'Invoice' : (mode === 'estimate' ? 'Generate Estimate' : (mode === 'editEstimate' ? 'Edit Estimate' : 'Create Invoice')) }}\n                <span *ngIf=\"mode === 'edit'\" class=\"invoice-number\">{{ invoiceData?.invoice }}</span>\n                <span *ngIf=\"mode === 'editEstimate'\" class=\"invoice-number\">{{ invoiceData?.estimate }}</span>\n            </div>\n            <button type=\"button\" class=\"btn-close\" (click)=\"activeModal.dismiss()\"></button>\n        </div>\n\n        <!-- Tabs (only in edit mode) -->\n        <div class=\"tab-bar mt-3\" *ngIf=\"mode === 'edit'\">\n            <button class=\"tab-btn\" [ngClass]=\"activeTab === 'edit' ? 'tab-active' : ''\"\n                (click)=\"setTab('edit')\">Edit Invoice</button>\n            <button class=\"tab-btn\" [ngClass]=\"activeTab === 'creditNote' ? 'tab-active' : ''\"\n                (click)=\"setTab('creditNote')\">Credit Note</button>\n            <button class=\"tab-btn\" [ngClass]=\"activeTab === 'oneTimeFee' ? 'tab-active' : ''\"\n                (click)=\"setTab('oneTimeFee')\">One Time Fee</button>\n        </div>\n    </div>\n\n    <!-- ======================== EDIT INVOICE TAB ======================== -->\n    <div class=\"modal-body mb-4\" *ngIf=\"activeTab === 'edit' || mode !== 'edit'\">\n        <form [formGroup]=\"invoiceForm\" class=\"form\" (ngSubmit)=\"onSubmit()\">\n\n            <!-- Company Details Section -->\n            <div class=\"section-title mb-3\">Company Details</div>\n\n            <div class=\"row\">\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Company Name <span class=\"text-danger\">*</span></label>\n                    <input type=\"text\" formControlName=\"companyName\" class=\"form-control\"\n                        [class.is-invalid]=\"controlInvalid('companyName')\"\n                        [readonly]=\"mode === 'edit'\">\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('companyName')\">Company Name is required</div>\n                </div>\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">GST Number</label>\n                    <input type=\"text\" formControlName=\"GSTNumber\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n            </div>\n\n            <div class=\"row\">\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Company Address</label>\n                    <input type=\"text\" formControlName=\"companyAddress\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Place of Supply</label>\n                    <input type=\"text\" formControlName=\"PlaceOfSupply\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n            </div>\n\n            <!-- Billing Group -->\n            <div class=\"row\" *ngIf=\"billingGroups.length > 0\">\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Billing Group <span *ngIf=\"mode !== 'edit'\" class=\"text-danger\">*</span></label>\n                    <select *ngIf=\"mode !== 'edit'\" class=\"form-select\" formControlName=\"groupId\"\n                        [class.is-invalid]=\"controlInvalid('groupId')\"\n                        (change)=\"onGroupChange($event)\">\n                        <option value=\"\">Select billing group</option>\n                        <option *ngFor=\"let g of billingGroups\" [value]=\"g._id\">{{ g.groupName }}</option>\n                    </select>\n                    <input *ngIf=\"mode === 'edit'\" type=\"text\" [value]=\"invoiceForm.get('groupName')?.value || 'Default Group'\" class=\"form-control\" readonly>\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('groupId')\">Billing Group is required</div>\n                </div>\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Group Name</label>\n                    <input type=\"text\" formControlName=\"groupName\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n            </div>\n\n            <!-- Invoice Details Section -->\n            <div class=\"section-title mb-3 mt-2\">Invoice Details</div>\n\n            <div class=\"row\">\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Billing Date <span class=\"text-danger\">*</span></label>\n                    <input type=\"date\" formControlName=\"billingDate\" class=\"form-control\"\n                        [class.is-invalid]=\"controlInvalid('billingDate')\">\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('billingDate')\">Billing Date is required</div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Due Date <span class=\"text-danger\">*</span></label>\n                    <input type=\"date\" formControlName=\"dueDate\" class=\"form-control\"\n                        [class.is-invalid]=\"controlInvalid('dueDate')\">\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('dueDate')\">Due Date is required</div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Currency <span class=\"text-danger\">*</span></label>\n                    <select class=\"form-select\" formControlName=\"currency\"\n                        [class.is-invalid]=\"controlInvalid('currency')\">\n                        <option *ngFor=\"let c of currencyOptions\" [value]=\"c\">\n                            {{ currencyLabels[c] }}\n                        </option>\n                    </select>\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('currency')\">Currency is required</div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">No. of Stores</label>\n                    <input type=\"number\" formControlName=\"stores\" class=\"form-control\" readonly>\n                </div>\n                <!-- Purchase Order mapping (optional). Mapping deducts this\n                     invoice's amount from the selected PO's remaining balance. -->\n                <div class=\"col-md-3 form-group mb-3\" *ngIf=\"mode !== 'estimate' && mode !== 'editEstimate'\">\n                    <label class=\"headingtext mb-1\">Purchase Order</label>\n                    <select class=\"form-select\" formControlName=\"purchaseOrderNumber\">\n                        <option value=\"\">None</option>\n                        <option *ngFor=\"let po of purchaseOrders\" [value]=\"po.purchaseOrderNumber\">\n                            {{ po.purchaseOrderNumber }} ({{ getCurrencySymbol() }}{{ po.remainingAmount | number:'1.0-0':'en-IN' }} left)\n                        </option>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Advance Invoice (create only): bill several future months upfront.\n                 Each month becomes its own line item server-side. -->\n            <div class=\"row\" *ngIf=\"mode === 'create'\">\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1 d-block\">Advance Invoice</label>\n                    <div class=\"form-check form-switch mt-1\">\n                        <input class=\"form-check-input\" type=\"checkbox\" id=\"advanceInvoiceCreate\"\n                            formControlName=\"advanceInvoice\">\n                        <label class=\"form-check-label\" for=\"advanceInvoiceCreate\">Bill future months upfront</label>\n                    </div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\" *ngIf=\"invoiceForm.get('advanceInvoice')?.value\">\n                    <label class=\"headingtext mb-1\">Advance frequency</label>\n                    <select class=\"form-select\" formControlName=\"advancePeriod\">\n                        <option *ngFor=\"let opt of advancePeriodOptions\" [value]=\"opt.value\">{{ opt.label }}</option>\n                    </select>\n                </div>\n            </div>\n\n\n            <!-- Products Section -->\n            <div class=\"section-title mb-3 mt-2\">\n                <div class=\"d-flex justify-content-between align-items-center\">\n                    <span>Products</span>\n                    <div class=\"d-flex gap-2\">\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"addProduct()\">\n                            + Add Product\n                        </button>\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click)=\"addCustomProduct()\">\n                            + Add Custom Product\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div formArrayName=\"products\">\n                <div *ngFor=\"let product of products.controls; let i = index\" [formGroupName]=\"i\"\n                    class=\"product-row mb-3 p-3\">\n                    <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                        <span class=\"product-label\">Product {{ i + 1 }}</span>\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" (click)=\"removeProduct(i)\"\n                            *ngIf=\"products.length > 1\">\n                            Remove\n                        </button>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-4 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Product Name <span class=\"text-danger\">*</span></label>\n                            <!-- Base-pricing dropdown (with a \"+ Custom product\" choice) when\n                                 products exist and this row isn't custom; otherwise a free-text\n                                 name input for a custom product. -->\n                            <select *ngIf=\"availableProducts.length > 0 && !product.get('isCustom')?.value\" formControlName=\"productName\"\n                                class=\"form-select\"\n                                [class.is-invalid]=\"arrayControlInvalid('products', i, 'productName')\"\n                                (change)=\"onProductChange(i)\">\n                                <option value=\"\">Select product</option>\n                                <option *ngFor=\"let p of availableProducts\" [value]=\"p.productName\">\n                                    {{ formatProductName(p.productName) }}\n                                </option>\n                                <option value=\"__custom__\">+ Custom product</option>\n                            </select>\n                            <input *ngIf=\"availableProducts.length === 0 || product.get('isCustom')?.value\" type=\"text\" formControlName=\"productName\"\n                                class=\"form-control\"\n                                [class.is-invalid]=\"arrayControlInvalid('products', i, 'productName')\"\n                                placeholder=\"e.g. Custom Service\">\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('products', i, 'productName')\">Product Name is required</div>\n                        </div>\n                        <div class=\"col-md-4 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Description</label>\n                            <input type=\"text\" formControlName=\"description\" class=\"form-control\"\n                                placeholder=\"e.g. Customer Footfall Analytics\">\n                        </div>\n                        <div class=\"col-md-4 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Month</label>\n                            <input type=\"text\" formControlName=\"month\" class=\"form-control\"\n                                placeholder=\"e.g. Mar 2026\">\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">HSN/SAC</label>\n                            <input type=\"text\" formControlName=\"HsnNumber\" class=\"form-control\">\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Quantity</label>\n                            <input type=\"number\" formControlName=\"storeCount\" class=\"form-control\"\n                                (input)=\"recalculate()\">\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Rate/Price <span class=\"text-danger\">*</span></label>\n                            <input type=\"number\" formControlName=\"price\" class=\"form-control\"\n                                [class.is-invalid]=\"arrayControlInvalid('products', i, 'price')\"\n                                (input)=\"recalculate()\">\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('products', i, 'price')\">Rate/Price is required</div>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Amount</label>\n                            <input type=\"number\" formControlName=\"amount\" class=\"form-control\" readonly>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Period</label>\n                            <select class=\"form-select\" formControlName=\"period\">\n                                <option value=\"monthly\">Monthly</option>\n                                <option value=\"quarterly\">Quarterly</option>\n                                <option value=\"halfyearly\">Half-yearly</option>\n                                <option value=\"yearly\">Yearly</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Tax Section -->\n            <div class=\"section-title mb-3 mt-2\">\n                <div class=\"d-flex justify-content-between align-items-center\">\n                    <span>Tax</span>\n                    <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"addTax()\">\n                        + Add Tax\n                    </button>\n                </div>\n            </div>\n\n            <div formArrayName=\"tax\">\n                <div *ngFor=\"let t of taxArray.controls; let j = index\" [formGroupName]=\"j\"\n                    class=\"tax-row mb-3 p-3\">\n                    <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                        <span class=\"product-label\">Tax {{ j + 1 }}</span>\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" (click)=\"removeTax(j)\"\n                            *ngIf=\"taxArray.length > 1\">\n                            Remove\n                        </button>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Tax Type <span class=\"text-danger\">*</span></label>\n                            <select class=\"form-select\" formControlName=\"type\"\n                                [class.is-invalid]=\"arrayControlInvalid('tax', j, 'type')\">\n                                <option *ngFor=\"let tt of taxTypes\" [value]=\"tt\">{{ tt }}</option>\n                            </select>\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('tax', j, 'type')\">Tax Type is required</div>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Tax % <span class=\"text-danger\">*</span></label>\n                            <input type=\"number\" formControlName=\"value\" class=\"form-control\"\n                                [class.is-invalid]=\"arrayControlInvalid('tax', j, 'value')\"\n                                (input)=\"recalculate()\">\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('tax', j, 'value')\">Tax % is required</div>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Tax Amount</label>\n                            <input type=\"text\" formControlName=\"taxAmount\" class=\"form-control\" readonly>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Currency Symbol</label>\n                            <input type=\"text\" formControlName=\"currency\" class=\"form-control\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Summary -->\n            <div class=\"summary-section p-3 mt-3\">\n                <div class=\"d-flex justify-content-between mb-2\">\n                    <span class=\"summary-label\">Subtotal</span>\n                    <span class=\"summary-value\">{{ getCurrencySymbol() }} {{ getSubtotal() | number:'1.2-2':'en-IN' }}</span>\n                </div>\n                <div class=\"d-flex justify-content-between mb-2\">\n                    <span class=\"summary-label\">Total Tax</span>\n                    <span class=\"summary-value\">{{ getCurrencySymbol() }} {{ getTotalTax() | number:'1.2-2':'en-IN' }}</span>\n                </div>\n                <div class=\"d-flex justify-content-between summary-total\">\n                    <span class=\"summary-label-bold\">Total Amount</span>\n                    <span class=\"summary-value-bold\">{{ getCurrencySymbol() }} {{ getTotalAmount() | number:'1.2-2':'en-IN'\n                        }}</span>\n                </div>\n            </div>\n\n            <!-- Actions -->\n            <div class=\"d-flex mt-4\">\n                <button type=\"button\" (click)=\"activeModal.dismiss()\"\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\n                <button type=\"submit\" [disabled]=\"saving\"\n                    class=\"btn btn-primary px-4 w-50\" style=\"white-space: nowrap;\">\n                    <span *ngIf=\"!saving\" class=\"submit\">{{ mode === 'edit' ? 'Update Invoice' : (mode === 'estimate' ? 'Generate Estimate' : (mode === 'editEstimate' ? 'Update Estimate' : 'Create Invoice'))\n                        }}</span>\n                    <span *ngIf=\"saving\" class=\"submit\">Saving...</span>\n                </button>\n            </div>\n        </form>\n    </div>\n\n    <!-- ======================== CREDIT NOTE TAB ======================== -->\n    <div class=\"modal-body mb-4\" *ngIf=\"activeTab === 'creditNote' && mode === 'edit'\">\n        <form [formGroup]=\"creditNoteForm\" class=\"form\">\n            <div class=\"contenttext mb-3\">\n                Apply a credit note / discount to this invoice. Maximum 10% discount allowed.\n            </div>\n\n            <div class=\"d-flex flex-column\">\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Invoice ID</label>\n                    <input type=\"text\" class=\"form-control\" [value]=\"invoiceData?.invoice\" readonly>\n                </div>\n\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Total Amount</label>\n                    <div class=\"input-group\">\n                        <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                        <input formControlName=\"amount\" type=\"text\" readonly class=\"form-control amount-input\">\n                    </div>\n                </div>\n\n                <div class=\"form-group mt-2\">\n                    <div class=\"py-2\">\n                        <label class=\"headingtext mb-2\">Revised Amount</label>\n                        <div class=\"input-group\">\n                            <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                            <input type=\"text\" formControlName=\"revisedAmount\"\n                                (keypress)=\"omitSpecialChar($event)\"\n                                class=\"form-control amount-input\"\n                                [ngClass]=\"creditMoreThanTenPercent ? 'errorinput' : ''\">\n                            <span class=\"input-icon\" *ngIf=\"creditMoreThanTenPercent\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                                    fill=\"none\">\n                                    <g clip-path=\"url(#clip_cn_err)\">\n                                        <path\n                                            d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\n                                            stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                                            stroke-linejoin=\"round\" />\n                                    </g>\n                                    <defs>\n                                        <clipPath id=\"clip_cn_err\">\n                                            <rect width=\"16\" height=\"16\" fill=\"white\" />\n                                        </clipPath>\n                                    </defs>\n                                </svg>\n                            </span>\n                        </div>\n                    </div>\n                    <span [ngClass]=\"creditMoreThanTenPercent ? 'text-danger' : 'contenttext'\" class=\"small\">\n                        More than 10% can't be revised from total amount\n                    </span>\n                </div>\n\n                <div class=\"form-group mt-2\">\n                    <div class=\"py-2\">\n                        <label class=\"headingtext mb-2\">Discount</label>\n                        <div class=\"input-group\">\n                            <input type=\"text\" formControlName=\"discount\"\n                                (keypress)=\"omitSpecialChar($event)\"\n                                class=\"form-control\"\n                                [ngClass]=\"creditMoreThanTenPercent ? 'errorinput' : ''\">\n                            <span class=\"input-icon\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                                    fill=\"none\">\n                                    <path\n                                        d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\"\n                                        [attr.stroke]=\"creditMoreThanTenPercent ? '#F04438' : '#98A2B3'\"\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </span>\n                        </div>\n                    </div>\n                    <span [ngClass]=\"creditMoreThanTenPercent ? 'text-danger' : 'contenttext'\" class=\"small\">\n                        In percentage\n                    </span>\n                </div>\n            </div>\n\n            <div class=\"d-flex mt-5\">\n                <button type=\"button\" (click)=\"activeModal.dismiss()\"\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\n                <button [disabled]=\"creditMoreThanTenPercent || saving\" type=\"button\" (click)=\"applyCreditNote()\"\n                    class=\"btn btn-primary px-4 w-50\" style=\"white-space: nowrap;\">\n                    <span *ngIf=\"!saving\">Apply Credit Note</span>\n                    <span *ngIf=\"saving\">Applying...</span>\n                </button>\n            </div>\n        </form>\n    </div>\n\n    <!-- ======================== ONE TIME FEE TAB ======================== -->\n    <div class=\"modal-body mb-4\" *ngIf=\"activeTab === 'oneTimeFee' && mode === 'edit'\">\n        <form [formGroup]=\"oneTimeFeeForm\" class=\"form\">\n            <div class=\"contenttext mb-3\">\n                Add a one-time fee (e.g. installation) to this invoice.\n            </div>\n\n            <div class=\"d-flex flex-column\">\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Invoice ID</label>\n                    <input type=\"text\" class=\"form-control\" [value]=\"invoiceData?.invoice\" readonly>\n                </div>\n\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Current Invoice Amount</label>\n                    <div class=\"input-group\">\n                        <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                        <input formControlName=\"amount\" type=\"text\" readonly class=\"form-control amount-input\">\n                    </div>\n                </div>\n\n                <div class=\"form-group mt-2\">\n                    <div class=\"py-2\">\n                        <label class=\"headingtext mb-2\">One Time Fee (Installation)</label>\n                        <div class=\"input-group\">\n                            <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                            <input type=\"text\" formControlName=\"oneTimeFee\"\n                                (keypress)=\"omitSpecialChar($event)\"\n                                class=\"form-control amount-input\"\n                                placeholder=\"Enter fee amount\">\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"d-flex flex-stack mt-3 fee-summary p-3\">\n                    <div class=\"summary-label\">Selected Invoice Amount + One Time Fee</div>\n                    <div class=\"d-flex align-items-center\">\n                        <span class=\"summary-value-bold\">{{ getInvoiceCurrencySymbol() }}{{\n                            oneTimeFeeTotal | number:'1.2-2':'en-IN' }}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"d-flex mt-5\">\n                <button type=\"button\" (click)=\"activeModal.dismiss()\"\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\n                <button [disabled]=\"saving || !oneTimeFeeForm.get('oneTimeFee')?.value\" type=\"button\"\n                    (click)=\"applyOneTimeFee()\"\n                    class=\"btn btn-primary px-4 w-50\" style=\"white-space: nowrap;\">\n                    <span *ngIf=\"!saving\">Apply Fee</span>\n                    <span *ngIf=\"saving\">Applying...</span>\n                </button>\n            </div>\n        </form>\n    </div>\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.invoice-number{color:var(--Primary-700, #009BF3);font-weight:500;margin-left:4px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.headingtext{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.tab-bar{display:flex;gap:4px;border-bottom:1px solid var(--Gray-200, #EAECF0);padding-bottom:0}.tab-btn{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px;padding:8px 16px;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}.tab-btn:hover{color:var(--Gray-700, #344054)}.tab-btn.tab-active{color:var(--Primary-700, #009BF3);border-bottom:2px solid var(--Primary-700, #009BF3);font-weight:600}.section-title{color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:600;line-height:24px;padding-bottom:8px;border-bottom:1px solid var(--Gray-200, #EAECF0)}.product-row,.tax-row{background:var(--Gray-50, #F9FAFB);border:1px solid var(--Gray-200, #EAECF0);border-radius:8px}.product-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:600}input,.form-control{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:14px;width:100%;padding:8px 12px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}input[readonly]{background:var(--Gray-50, #F9FAFB);color:var(--Gray-500, #667085)}.form-select{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:14px;padding:8px 12px;font-family:Inter;font-weight:400;height:auto}.cancel{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.summary-section,.fee-summary{background:var(--Gray-50, #F9FAFB);border:1px solid var(--Gray-200, #EAECF0);border-radius:8px}.summary-label{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500}.summary-value{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500}.summary-total{padding-top:8px;border-top:1px solid var(--Gray-200, #EAECF0)}.summary-label-bold,.summary-value-bold{color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:600}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:12px!important;font-weight:400}.modal-body{max-height:70vh;overflow-y:auto}.input-group{position:relative}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400;line-height:24px;z-index:1}.input-group .amount-input{padding-left:30px}.input-group .input-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);display:inline-flex;align-items:center}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.input-group>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.form-control.is-invalid,.form-select.is-invalid{border:1px solid var(--Error-300, #FDA29B)!important;background:#fef3f2}.form-control.is-invalid:focus,.form-control.is-invalid:active,.form-control.is-invalid:focus-visible,.form-select.is-invalid:focus,.form-select.is-invalid:active,.form-select.is-invalid:focus-visible{border:1px solid var(--Error-300, #FDA29B)!important;box-shadow:0 0 0 4px #f044381f!important;background:#fef3f2}.invalid-msg{color:#b42318;font-family:Inter;font-size:12px;font-weight:500;line-height:18px;margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EditInvoiceComponent, selector: "lib-edit-invoice", inputs: { invoiceData: "invoiceData", mode: "mode", clientId: "clientId", billingGroups: "billingGroups" }, ngImport: i0, template: "<div class=\"modal-content\">\n    <div class=\"p-5 px-6 pb-0\">\n        <div class=\"d-flex justify-content-between align-items-center\">\n            <div class=\"heading mt-2\">{{ mode === 'edit' ? 'Invoice' : (mode === 'estimate' ? 'Generate Estimate' : (mode === 'editEstimate' ? 'Edit Estimate' : 'Create Invoice')) }}\n                <span *ngIf=\"mode === 'edit'\" class=\"invoice-number\">{{ invoiceData?.invoice }}</span>\n                <span *ngIf=\"mode === 'editEstimate'\" class=\"invoice-number\">{{ invoiceData?.estimate }}</span>\n            </div>\n            <button type=\"button\" class=\"btn-close\" (click)=\"activeModal.dismiss()\"></button>\n        </div>\n\n        <!-- Tabs (only in edit mode) -->\n        <div class=\"tab-bar mt-3\" *ngIf=\"mode === 'edit'\">\n            <button class=\"tab-btn\" [ngClass]=\"activeTab === 'edit' ? 'tab-active' : ''\"\n                (click)=\"setTab('edit')\">Edit Invoice</button>\n            <button class=\"tab-btn\" [ngClass]=\"activeTab === 'creditNote' ? 'tab-active' : ''\"\n                (click)=\"setTab('creditNote')\">Credit Note</button>\n            <button class=\"tab-btn\" [ngClass]=\"activeTab === 'oneTimeFee' ? 'tab-active' : ''\"\n                (click)=\"setTab('oneTimeFee')\">One Time Fee</button>\n        </div>\n    </div>\n\n    <!-- ======================== EDIT INVOICE TAB ======================== -->\n    <div class=\"modal-body mb-4\" *ngIf=\"activeTab === 'edit' || mode !== 'edit'\">\n        <form [formGroup]=\"invoiceForm\" class=\"form\" (ngSubmit)=\"onSubmit()\">\n\n            <!-- Company Details Section -->\n            <div class=\"section-title mb-3\">Company Details</div>\n\n            <div class=\"row\">\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Company Name <span class=\"text-danger\">*</span></label>\n                    <input type=\"text\" formControlName=\"companyName\" class=\"form-control\"\n                        [class.is-invalid]=\"controlInvalid('companyName')\"\n                        [readonly]=\"mode === 'edit'\">\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('companyName')\">Company Name is required</div>\n                </div>\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">GST Number</label>\n                    <input type=\"text\" formControlName=\"GSTNumber\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n            </div>\n\n            <div class=\"row\">\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Company Address</label>\n                    <input type=\"text\" formControlName=\"companyAddress\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Place of Supply</label>\n                    <input type=\"text\" formControlName=\"PlaceOfSupply\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n            </div>\n\n            <!-- Billing Group -->\n            <div class=\"row\" *ngIf=\"billingGroups.length > 0\">\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Billing Group <span *ngIf=\"mode !== 'edit'\" class=\"text-danger\">*</span></label>\n                    <select *ngIf=\"mode !== 'edit'\" class=\"form-select\" formControlName=\"groupId\"\n                        [class.is-invalid]=\"controlInvalid('groupId')\"\n                        (change)=\"onGroupChange($event)\">\n                        <option value=\"\">Select billing group</option>\n                        <option *ngFor=\"let g of billingGroups\" [value]=\"g._id\">{{ g.groupName }}</option>\n                    </select>\n                    <input *ngIf=\"mode === 'edit'\" type=\"text\" [value]=\"invoiceForm.get('groupName')?.value || 'Default Group'\" class=\"form-control\" readonly>\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('groupId')\">Billing Group is required</div>\n                </div>\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Group Name</label>\n                    <input type=\"text\" formControlName=\"groupName\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n            </div>\n\n            <!-- Invoice Details Section -->\n            <div class=\"section-title mb-3 mt-2\">Invoice Details</div>\n\n            <div class=\"row\">\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Billing Date <span class=\"text-danger\">*</span></label>\n                    <input type=\"date\" formControlName=\"billingDate\" class=\"form-control\"\n                        [class.is-invalid]=\"controlInvalid('billingDate')\">\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('billingDate')\">Billing Date is required</div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Due Date <span class=\"text-danger\">*</span></label>\n                    <input type=\"date\" formControlName=\"dueDate\" class=\"form-control\"\n                        [class.is-invalid]=\"controlInvalid('dueDate')\">\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('dueDate')\">Due Date is required</div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Currency <span class=\"text-danger\">*</span></label>\n                    <select class=\"form-select\" formControlName=\"currency\"\n                        [class.is-invalid]=\"controlInvalid('currency')\">\n                        <option *ngFor=\"let c of currencyOptions\" [value]=\"c\">\n                            {{ currencyLabels[c] }}\n                        </option>\n                    </select>\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('currency')\">Currency is required</div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">No. of Stores</label>\n                    <input type=\"number\" formControlName=\"stores\" class=\"form-control\" readonly>\n                </div>\n                <!-- Purchase Order mapping (optional). Mapping deducts this\n                     invoice's amount from the selected PO's remaining balance. -->\n                <div class=\"col-md-3 form-group mb-3\" *ngIf=\"mode !== 'estimate' && mode !== 'editEstimate'\">\n                    <label class=\"headingtext mb-1\">Purchase Order</label>\n                    <select class=\"form-select\" formControlName=\"purchaseOrderNumber\">\n                        <option value=\"\">None</option>\n                        <option *ngFor=\"let po of purchaseOrders\" [value]=\"po.purchaseOrderNumber\">\n                            {{ po.purchaseOrderNumber }} ({{ getCurrencySymbol() }}{{ po.remainingAmount | number:'1.0-0':'en-IN' }} left)\n                        </option>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Advance Invoice (create only): bill several future months upfront.\n                 Each month becomes its own line item server-side. -->\n            <div class=\"row\" *ngIf=\"mode === 'create'\">\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1 d-block\">Advance Invoice</label>\n                    <div class=\"form-check form-switch mt-1\">\n                        <input class=\"form-check-input\" type=\"checkbox\" id=\"advanceInvoiceCreate\"\n                            formControlName=\"advanceInvoice\">\n                        <label class=\"form-check-label\" for=\"advanceInvoiceCreate\">Bill future months upfront</label>\n                    </div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\" *ngIf=\"invoiceForm.get('advanceInvoice')?.value\">\n                    <label class=\"headingtext mb-1\">Advance frequency</label>\n                    <select class=\"form-select\" formControlName=\"advancePeriod\">\n                        <option *ngFor=\"let opt of advancePeriodOptions\" [value]=\"opt.value\">{{ opt.label }}</option>\n                    </select>\n                </div>\n            </div>\n\n\n            <!-- Products Section -->\n            <div class=\"section-title mb-3 mt-2\">\n                <div class=\"d-flex justify-content-between align-items-center\">\n                    <span>Products</span>\n                    <div class=\"d-flex gap-2\">\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"addProduct()\">\n                            + Add Product\n                        </button>\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click)=\"addCustomProduct()\">\n                            + Add Custom Product\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div formArrayName=\"products\">\n                <div *ngFor=\"let product of products.controls; let i = index\" [formGroupName]=\"i\"\n                    class=\"product-row mb-3 p-3\">\n                    <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                        <span class=\"product-label\">Product {{ i + 1 }}</span>\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" (click)=\"removeProduct(i)\"\n                            *ngIf=\"products.length > 1\">\n                            Remove\n                        </button>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-4 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Product Name <span class=\"text-danger\">*</span></label>\n                            <!-- Base-pricing dropdown (with a \"+ Custom product\" choice) when\n                                 products exist and this row isn't custom; otherwise a free-text\n                                 name input for a custom product. -->\n                            <select *ngIf=\"availableProducts.length > 0 && !product.get('isCustom')?.value\" formControlName=\"productName\"\n                                class=\"form-select\"\n                                [class.is-invalid]=\"arrayControlInvalid('products', i, 'productName')\"\n                                (change)=\"onProductChange(i)\">\n                                <option value=\"\">Select product</option>\n                                <option *ngFor=\"let p of availableProducts\" [value]=\"p.productName\">\n                                    {{ formatProductName(p.productName) }}\n                                </option>\n                                <option value=\"__custom__\">+ Custom product</option>\n                            </select>\n                            <input *ngIf=\"availableProducts.length === 0 || product.get('isCustom')?.value\" type=\"text\" formControlName=\"productName\"\n                                class=\"form-control\"\n                                [class.is-invalid]=\"arrayControlInvalid('products', i, 'productName')\"\n                                placeholder=\"e.g. Custom Service\">\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('products', i, 'productName')\">Product Name is required</div>\n                        </div>\n                        <div class=\"col-md-4 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Description</label>\n                            <input type=\"text\" formControlName=\"description\" class=\"form-control\"\n                                placeholder=\"e.g. Customer Footfall Analytics\">\n                        </div>\n                        <div class=\"col-md-4 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Month</label>\n                            <input type=\"text\" formControlName=\"month\" class=\"form-control\"\n                                placeholder=\"e.g. Mar 2026\">\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">HSN/SAC</label>\n                            <input type=\"text\" formControlName=\"HsnNumber\" class=\"form-control\">\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Quantity</label>\n                            <input type=\"number\" formControlName=\"storeCount\" class=\"form-control\"\n                                (input)=\"recalculate()\">\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Rate/Price <span class=\"text-danger\">*</span></label>\n                            <input type=\"number\" formControlName=\"price\" class=\"form-control\"\n                                [class.is-invalid]=\"arrayControlInvalid('products', i, 'price')\"\n                                (input)=\"recalculate()\">\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('products', i, 'price')\">Rate/Price is required</div>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Amount</label>\n                            <input type=\"number\" formControlName=\"amount\" class=\"form-control\" readonly>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Period</label>\n                            <select class=\"form-select\" formControlName=\"period\">\n                                <option value=\"monthly\">Monthly</option>\n                                <option value=\"quarterly\">Quarterly</option>\n                                <option value=\"halfyearly\">Half-yearly</option>\n                                <option value=\"yearly\">Yearly</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Tax Section -->\n            <div class=\"section-title mb-3 mt-2\">\n                <div class=\"d-flex justify-content-between align-items-center\">\n                    <span>Tax</span>\n                    <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"addTax()\">\n                        + Add Tax\n                    </button>\n                </div>\n            </div>\n\n            <div formArrayName=\"tax\">\n                <div *ngFor=\"let t of taxArray.controls; let j = index\" [formGroupName]=\"j\"\n                    class=\"tax-row mb-3 p-3\">\n                    <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                        <span class=\"product-label\">Tax {{ j + 1 }}</span>\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" (click)=\"removeTax(j)\"\n                            *ngIf=\"taxArray.length > 1\">\n                            Remove\n                        </button>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Tax Type <span class=\"text-danger\">*</span></label>\n                            <select class=\"form-select\" formControlName=\"type\"\n                                [class.is-invalid]=\"arrayControlInvalid('tax', j, 'type')\">\n                                <option *ngFor=\"let tt of taxTypes\" [value]=\"tt\">{{ tt }}</option>\n                            </select>\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('tax', j, 'type')\">Tax Type is required</div>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Tax % <span class=\"text-danger\">*</span></label>\n                            <input type=\"number\" formControlName=\"value\" class=\"form-control\"\n                                [class.is-invalid]=\"arrayControlInvalid('tax', j, 'value')\"\n                                (input)=\"recalculate()\">\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('tax', j, 'value')\">Tax % is required</div>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Tax Amount</label>\n                            <input type=\"text\" formControlName=\"taxAmount\" class=\"form-control\" readonly>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Currency Symbol</label>\n                            <input type=\"text\" formControlName=\"currency\" class=\"form-control\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Summary -->\n            <div class=\"summary-section p-3 mt-3\">\n                <div class=\"d-flex justify-content-between mb-2\">\n                    <span class=\"summary-label\">Subtotal</span>\n                    <span class=\"summary-value\">{{ getCurrencySymbol() }} {{ getSubtotal() | number:'1.2-2':'en-IN' }}</span>\n                </div>\n                <div class=\"d-flex justify-content-between mb-2\">\n                    <span class=\"summary-label\">Total Tax</span>\n                    <span class=\"summary-value\">{{ getCurrencySymbol() }} {{ getTotalTax() | number:'1.2-2':'en-IN' }}</span>\n                </div>\n                <div class=\"d-flex justify-content-between summary-total\">\n                    <span class=\"summary-label-bold\">Total Amount</span>\n                    <span class=\"summary-value-bold\">{{ getCurrencySymbol() }} {{ getTotalAmount() | number:'1.2-2':'en-IN'\n                        }}</span>\n                </div>\n            </div>\n\n            <!-- Actions -->\n            <div class=\"d-flex mt-4\">\n                <button type=\"button\" (click)=\"activeModal.dismiss()\"\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\n                <button type=\"submit\" [disabled]=\"saving\"\n                    class=\"btn btn-primary px-4 w-50\" style=\"white-space: nowrap;\">\n                    <span *ngIf=\"!saving\" class=\"submit\">{{ mode === 'edit' ? 'Update Invoice' : (mode === 'estimate' ? 'Generate Estimate' : (mode === 'editEstimate' ? 'Update Estimate' : 'Create Invoice'))\n                        }}</span>\n                    <span *ngIf=\"saving\" class=\"submit\">Saving...</span>\n                </button>\n            </div>\n        </form>\n    </div>\n\n    <!-- ======================== CREDIT NOTE TAB ======================== -->\n    <div class=\"modal-body mb-4\" *ngIf=\"activeTab === 'creditNote' && mode === 'edit'\">\n        <form [formGroup]=\"creditNoteForm\" class=\"form\">\n            <div class=\"contenttext mb-3\">\n                Apply a credit note / discount to this invoice.\n            </div>\n\n            <div class=\"d-flex flex-column\">\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Invoice ID</label>\n                    <input type=\"text\" class=\"form-control\" [value]=\"invoiceData?.invoice\" readonly>\n                </div>\n\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Total Amount</label>\n                    <div class=\"input-group\">\n                        <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                        <input formControlName=\"amount\" type=\"text\" readonly class=\"form-control amount-input\">\n                    </div>\n                </div>\n\n                <div class=\"form-group mt-2\">\n                    <div class=\"py-2\">\n                        <label class=\"headingtext mb-2\">Revised Amount</label>\n                        <div class=\"input-group\">\n                            <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                            <input type=\"text\" formControlName=\"revisedAmount\"\n                                (keypress)=\"omitSpecialChar($event)\"\n                                class=\"form-control amount-input\"\n                                [ngClass]=\"creditMoreThanTenPercent ? 'errorinput' : ''\">\n                            <span class=\"input-icon\" *ngIf=\"creditMoreThanTenPercent\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                                    fill=\"none\">\n                                    <g clip-path=\"url(#clip_cn_err)\">\n                                        <path\n                                            d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\n                                            stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                                            stroke-linejoin=\"round\" />\n                                    </g>\n                                    <defs>\n                                        <clipPath id=\"clip_cn_err\">\n                                            <rect width=\"16\" height=\"16\" fill=\"white\" />\n                                        </clipPath>\n                                    </defs>\n                                </svg>\n                            </span>\n                        </div>\n                    </div>\n                    <span [ngClass]=\"creditMoreThanTenPercent ? 'text-danger' : 'contenttext'\" class=\"small\">\n                        Enter a valid revised amount\n                    </span>\n                </div>\n\n                <div class=\"form-group mt-2\">\n                    <div class=\"py-2\">\n                        <label class=\"headingtext mb-2\">Discount</label>\n                        <div class=\"input-group\">\n                            <input type=\"text\" formControlName=\"discount\"\n                                (keypress)=\"omitSpecialChar($event)\"\n                                class=\"form-control\"\n                                [ngClass]=\"creditMoreThanTenPercent ? 'errorinput' : ''\">\n                            <span class=\"input-icon\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                                    fill=\"none\">\n                                    <path\n                                        d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\"\n                                        [attr.stroke]=\"creditMoreThanTenPercent ? '#F04438' : '#98A2B3'\"\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </span>\n                        </div>\n                    </div>\n                    <span [ngClass]=\"creditMoreThanTenPercent ? 'text-danger' : 'contenttext'\" class=\"small\">\n                        In percentage\n                    </span>\n                </div>\n            </div>\n\n            <div class=\"d-flex mt-5\">\n                <button type=\"button\" (click)=\"activeModal.dismiss()\"\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\n                <button [disabled]=\"creditMoreThanTenPercent || saving\" type=\"button\" (click)=\"applyCreditNote()\"\n                    class=\"btn btn-primary px-4 w-50\" style=\"white-space: nowrap;\">\n                    <span *ngIf=\"!saving\">Apply Credit Note</span>\n                    <span *ngIf=\"saving\">Applying...</span>\n                </button>\n            </div>\n        </form>\n    </div>\n\n    <!-- ======================== ONE TIME FEE TAB ======================== -->\n    <div class=\"modal-body mb-4\" *ngIf=\"activeTab === 'oneTimeFee' && mode === 'edit'\">\n        <form [formGroup]=\"oneTimeFeeForm\" class=\"form\">\n            <div class=\"contenttext mb-3\">\n                Add a one-time fee (e.g. installation) to this invoice.\n            </div>\n\n            <div class=\"d-flex flex-column\">\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Invoice ID</label>\n                    <input type=\"text\" class=\"form-control\" [value]=\"invoiceData?.invoice\" readonly>\n                </div>\n\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Current Invoice Amount</label>\n                    <div class=\"input-group\">\n                        <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                        <input formControlName=\"amount\" type=\"text\" readonly class=\"form-control amount-input\">\n                    </div>\n                </div>\n\n                <div class=\"form-group mt-2\">\n                    <div class=\"py-2\">\n                        <label class=\"headingtext mb-2\">One Time Fee (Installation)</label>\n                        <div class=\"input-group\">\n                            <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                            <input type=\"text\" formControlName=\"oneTimeFee\"\n                                (keypress)=\"omitSpecialChar($event)\"\n                                class=\"form-control amount-input\"\n                                placeholder=\"Enter fee amount\">\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"d-flex flex-stack mt-3 fee-summary p-3\">\n                    <div class=\"summary-label\">Selected Invoice Amount + One Time Fee</div>\n                    <div class=\"d-flex align-items-center\">\n                        <span class=\"summary-value-bold\">{{ getInvoiceCurrencySymbol() }}{{\n                            oneTimeFeeTotal | number:'1.2-2':'en-IN' }}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"d-flex mt-5\">\n                <button type=\"button\" (click)=\"activeModal.dismiss()\"\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\n                <button [disabled]=\"saving || !oneTimeFeeForm.get('oneTimeFee')?.value\" type=\"button\"\n                    (click)=\"applyOneTimeFee()\"\n                    class=\"btn btn-primary px-4 w-50\" style=\"white-space: nowrap;\">\n                    <span *ngIf=\"!saving\">Apply Fee</span>\n                    <span *ngIf=\"saving\">Applying...</span>\n                </button>\n            </div>\n        </form>\n    </div>\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.invoice-number{color:var(--Primary-700, #009BF3);font-weight:500;margin-left:4px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.headingtext{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.tab-bar{display:flex;gap:4px;border-bottom:1px solid var(--Gray-200, #EAECF0);padding-bottom:0}.tab-btn{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px;padding:8px 16px;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}.tab-btn:hover{color:var(--Gray-700, #344054)}.tab-btn.tab-active{color:var(--Primary-700, #009BF3);border-bottom:2px solid var(--Primary-700, #009BF3);font-weight:600}.section-title{color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:600;line-height:24px;padding-bottom:8px;border-bottom:1px solid var(--Gray-200, #EAECF0)}.product-row,.tax-row{background:var(--Gray-50, #F9FAFB);border:1px solid var(--Gray-200, #EAECF0);border-radius:8px}.product-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:600}input,.form-control{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:14px;width:100%;padding:8px 12px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}input[readonly]{background:var(--Gray-50, #F9FAFB);color:var(--Gray-500, #667085)}.form-select{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:14px;padding:8px 12px;font-family:Inter;font-weight:400;height:auto}.cancel{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.summary-section,.fee-summary{background:var(--Gray-50, #F9FAFB);border:1px solid var(--Gray-200, #EAECF0);border-radius:8px}.summary-label{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500}.summary-value{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500}.summary-total{padding-top:8px;border-top:1px solid var(--Gray-200, #EAECF0)}.summary-label-bold,.summary-value-bold{color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:600}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:12px!important;font-weight:400}.modal-body{max-height:70vh;overflow-y:auto}.input-group{position:relative}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400;line-height:24px;z-index:1}.input-group .amount-input{padding-left:30px}.input-group .input-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);display:inline-flex;align-items:center}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.input-group>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.form-control.is-invalid,.form-select.is-invalid{border:1px solid var(--Error-300, #FDA29B)!important;background:#fef3f2}.form-control.is-invalid:focus,.form-control.is-invalid:active,.form-control.is-invalid:focus-visible,.form-select.is-invalid:focus,.form-select.is-invalid:active,.form-select.is-invalid:focus-visible{border:1px solid var(--Error-300, #FDA29B)!important;box-shadow:0 0 0 4px #f044381f!important;background:#fef3f2}.invalid-msg{color:#b42318;font-family:Inter;font-size:12px;font-weight:500;line-height:18px;margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditInvoiceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-edit-invoice', template: "<div class=\"modal-content\">\n    <div class=\"p-5 px-6 pb-0\">\n        <div class=\"d-flex justify-content-between align-items-center\">\n            <div class=\"heading mt-2\">{{ mode === 'edit' ? 'Invoice' : (mode === 'estimate' ? 'Generate Estimate' : (mode === 'editEstimate' ? 'Edit Estimate' : 'Create Invoice')) }}\n                <span *ngIf=\"mode === 'edit'\" class=\"invoice-number\">{{ invoiceData?.invoice }}</span>\n                <span *ngIf=\"mode === 'editEstimate'\" class=\"invoice-number\">{{ invoiceData?.estimate }}</span>\n            </div>\n            <button type=\"button\" class=\"btn-close\" (click)=\"activeModal.dismiss()\"></button>\n        </div>\n\n        <!-- Tabs (only in edit mode) -->\n        <div class=\"tab-bar mt-3\" *ngIf=\"mode === 'edit'\">\n            <button class=\"tab-btn\" [ngClass]=\"activeTab === 'edit' ? 'tab-active' : ''\"\n                (click)=\"setTab('edit')\">Edit Invoice</button>\n            <button class=\"tab-btn\" [ngClass]=\"activeTab === 'creditNote' ? 'tab-active' : ''\"\n                (click)=\"setTab('creditNote')\">Credit Note</button>\n            <button class=\"tab-btn\" [ngClass]=\"activeTab === 'oneTimeFee' ? 'tab-active' : ''\"\n                (click)=\"setTab('oneTimeFee')\">One Time Fee</button>\n        </div>\n    </div>\n\n    <!-- ======================== EDIT INVOICE TAB ======================== -->\n    <div class=\"modal-body mb-4\" *ngIf=\"activeTab === 'edit' || mode !== 'edit'\">\n        <form [formGroup]=\"invoiceForm\" class=\"form\" (ngSubmit)=\"onSubmit()\">\n\n            <!-- Company Details Section -->\n            <div class=\"section-title mb-3\">Company Details</div>\n\n            <div class=\"row\">\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Company Name <span class=\"text-danger\">*</span></label>\n                    <input type=\"text\" formControlName=\"companyName\" class=\"form-control\"\n                        [class.is-invalid]=\"controlInvalid('companyName')\"\n                        [readonly]=\"mode === 'edit'\">\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('companyName')\">Company Name is required</div>\n                </div>\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">GST Number</label>\n                    <input type=\"text\" formControlName=\"GSTNumber\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n            </div>\n\n            <div class=\"row\">\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Company Address</label>\n                    <input type=\"text\" formControlName=\"companyAddress\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Place of Supply</label>\n                    <input type=\"text\" formControlName=\"PlaceOfSupply\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n            </div>\n\n            <!-- Billing Group -->\n            <div class=\"row\" *ngIf=\"billingGroups.length > 0\">\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Billing Group <span *ngIf=\"mode !== 'edit'\" class=\"text-danger\">*</span></label>\n                    <select *ngIf=\"mode !== 'edit'\" class=\"form-select\" formControlName=\"groupId\"\n                        [class.is-invalid]=\"controlInvalid('groupId')\"\n                        (change)=\"onGroupChange($event)\">\n                        <option value=\"\">Select billing group</option>\n                        <option *ngFor=\"let g of billingGroups\" [value]=\"g._id\">{{ g.groupName }}</option>\n                    </select>\n                    <input *ngIf=\"mode === 'edit'\" type=\"text\" [value]=\"invoiceForm.get('groupName')?.value || 'Default Group'\" class=\"form-control\" readonly>\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('groupId')\">Billing Group is required</div>\n                </div>\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Group Name</label>\n                    <input type=\"text\" formControlName=\"groupName\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n            </div>\n\n            <!-- Invoice Details Section -->\n            <div class=\"section-title mb-3 mt-2\">Invoice Details</div>\n\n            <div class=\"row\">\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Billing Date <span class=\"text-danger\">*</span></label>\n                    <input type=\"date\" formControlName=\"billingDate\" class=\"form-control\"\n                        [class.is-invalid]=\"controlInvalid('billingDate')\">\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('billingDate')\">Billing Date is required</div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Due Date <span class=\"text-danger\">*</span></label>\n                    <input type=\"date\" formControlName=\"dueDate\" class=\"form-control\"\n                        [class.is-invalid]=\"controlInvalid('dueDate')\">\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('dueDate')\">Due Date is required</div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Currency <span class=\"text-danger\">*</span></label>\n                    <select class=\"form-select\" formControlName=\"currency\"\n                        [class.is-invalid]=\"controlInvalid('currency')\">\n                        <option *ngFor=\"let c of currencyOptions\" [value]=\"c\">\n                            {{ currencyLabels[c] }}\n                        </option>\n                    </select>\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('currency')\">Currency is required</div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">No. of Stores</label>\n                    <input type=\"number\" formControlName=\"stores\" class=\"form-control\" readonly>\n                </div>\n                <!-- Purchase Order mapping (optional). Mapping deducts this\n                     invoice's amount from the selected PO's remaining balance. -->\n                <div class=\"col-md-3 form-group mb-3\" *ngIf=\"mode !== 'estimate' && mode !== 'editEstimate'\">\n                    <label class=\"headingtext mb-1\">Purchase Order</label>\n                    <select class=\"form-select\" formControlName=\"purchaseOrderNumber\">\n                        <option value=\"\">None</option>\n                        <option *ngFor=\"let po of purchaseOrders\" [value]=\"po.purchaseOrderNumber\">\n                            {{ po.purchaseOrderNumber }} ({{ getCurrencySymbol() }}{{ po.remainingAmount | number:'1.0-0':'en-IN' }} left)\n                        </option>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Advance Invoice (create only): bill several future months upfront.\n                 Each month becomes its own line item server-side. -->\n            <div class=\"row\" *ngIf=\"mode === 'create'\">\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1 d-block\">Advance Invoice</label>\n                    <div class=\"form-check form-switch mt-1\">\n                        <input class=\"form-check-input\" type=\"checkbox\" id=\"advanceInvoiceCreate\"\n                            formControlName=\"advanceInvoice\">\n                        <label class=\"form-check-label\" for=\"advanceInvoiceCreate\">Bill future months upfront</label>\n                    </div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\" *ngIf=\"invoiceForm.get('advanceInvoice')?.value\">\n                    <label class=\"headingtext mb-1\">Advance frequency</label>\n                    <select class=\"form-select\" formControlName=\"advancePeriod\">\n                        <option *ngFor=\"let opt of advancePeriodOptions\" [value]=\"opt.value\">{{ opt.label }}</option>\n                    </select>\n                </div>\n            </div>\n\n\n            <!-- Products Section -->\n            <div class=\"section-title mb-3 mt-2\">\n                <div class=\"d-flex justify-content-between align-items-center\">\n                    <span>Products</span>\n                    <div class=\"d-flex gap-2\">\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"addProduct()\">\n                            + Add Product\n                        </button>\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click)=\"addCustomProduct()\">\n                            + Add Custom Product\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div formArrayName=\"products\">\n                <div *ngFor=\"let product of products.controls; let i = index\" [formGroupName]=\"i\"\n                    class=\"product-row mb-3 p-3\">\n                    <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                        <span class=\"product-label\">Product {{ i + 1 }}</span>\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" (click)=\"removeProduct(i)\"\n                            *ngIf=\"products.length > 1\">\n                            Remove\n                        </button>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-4 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Product Name <span class=\"text-danger\">*</span></label>\n                            <!-- Base-pricing dropdown (with a \"+ Custom product\" choice) when\n                                 products exist and this row isn't custom; otherwise a free-text\n                                 name input for a custom product. -->\n                            <select *ngIf=\"availableProducts.length > 0 && !product.get('isCustom')?.value\" formControlName=\"productName\"\n                                class=\"form-select\"\n                                [class.is-invalid]=\"arrayControlInvalid('products', i, 'productName')\"\n                                (change)=\"onProductChange(i)\">\n                                <option value=\"\">Select product</option>\n                                <option *ngFor=\"let p of availableProducts\" [value]=\"p.productName\">\n                                    {{ formatProductName(p.productName) }}\n                                </option>\n                                <option value=\"__custom__\">+ Custom product</option>\n                            </select>\n                            <input *ngIf=\"availableProducts.length === 0 || product.get('isCustom')?.value\" type=\"text\" formControlName=\"productName\"\n                                class=\"form-control\"\n                                [class.is-invalid]=\"arrayControlInvalid('products', i, 'productName')\"\n                                placeholder=\"e.g. Custom Service\">\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('products', i, 'productName')\">Product Name is required</div>\n                        </div>\n                        <div class=\"col-md-4 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Description</label>\n                            <input type=\"text\" formControlName=\"description\" class=\"form-control\"\n                                placeholder=\"e.g. Customer Footfall Analytics\">\n                        </div>\n                        <div class=\"col-md-4 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Month</label>\n                            <input type=\"text\" formControlName=\"month\" class=\"form-control\"\n                                placeholder=\"e.g. Mar 2026\">\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">HSN/SAC</label>\n                            <input type=\"text\" formControlName=\"HsnNumber\" class=\"form-control\">\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Quantity</label>\n                            <input type=\"number\" formControlName=\"storeCount\" class=\"form-control\"\n                                (input)=\"recalculate()\">\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Rate/Price <span class=\"text-danger\">*</span></label>\n                            <input type=\"number\" formControlName=\"price\" class=\"form-control\"\n                                [class.is-invalid]=\"arrayControlInvalid('products', i, 'price')\"\n                                (input)=\"recalculate()\">\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('products', i, 'price')\">Rate/Price is required</div>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Amount</label>\n                            <input type=\"number\" formControlName=\"amount\" class=\"form-control\" readonly>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Period</label>\n                            <select class=\"form-select\" formControlName=\"period\">\n                                <option value=\"monthly\">Monthly</option>\n                                <option value=\"quarterly\">Quarterly</option>\n                                <option value=\"halfyearly\">Half-yearly</option>\n                                <option value=\"yearly\">Yearly</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Tax Section -->\n            <div class=\"section-title mb-3 mt-2\">\n                <div class=\"d-flex justify-content-between align-items-center\">\n                    <span>Tax</span>\n                    <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"addTax()\">\n                        + Add Tax\n                    </button>\n                </div>\n            </div>\n\n            <div formArrayName=\"tax\">\n                <div *ngFor=\"let t of taxArray.controls; let j = index\" [formGroupName]=\"j\"\n                    class=\"tax-row mb-3 p-3\">\n                    <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                        <span class=\"product-label\">Tax {{ j + 1 }}</span>\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" (click)=\"removeTax(j)\"\n                            *ngIf=\"taxArray.length > 1\">\n                            Remove\n                        </button>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Tax Type <span class=\"text-danger\">*</span></label>\n                            <select class=\"form-select\" formControlName=\"type\"\n                                [class.is-invalid]=\"arrayControlInvalid('tax', j, 'type')\">\n                                <option *ngFor=\"let tt of taxTypes\" [value]=\"tt\">{{ tt }}</option>\n                            </select>\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('tax', j, 'type')\">Tax Type is required</div>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Tax % <span class=\"text-danger\">*</span></label>\n                            <input type=\"number\" formControlName=\"value\" class=\"form-control\"\n                                [class.is-invalid]=\"arrayControlInvalid('tax', j, 'value')\"\n                                (input)=\"recalculate()\">\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('tax', j, 'value')\">Tax % is required</div>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Tax Amount</label>\n                            <input type=\"text\" formControlName=\"taxAmount\" class=\"form-control\" readonly>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Currency Symbol</label>\n                            <input type=\"text\" formControlName=\"currency\" class=\"form-control\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Summary -->\n            <div class=\"summary-section p-3 mt-3\">\n                <div class=\"d-flex justify-content-between mb-2\">\n                    <span class=\"summary-label\">Subtotal</span>\n                    <span class=\"summary-value\">{{ getCurrencySymbol() }} {{ getSubtotal() | number:'1.2-2':'en-IN' }}</span>\n                </div>\n                <div class=\"d-flex justify-content-between mb-2\">\n                    <span class=\"summary-label\">Total Tax</span>\n                    <span class=\"summary-value\">{{ getCurrencySymbol() }} {{ getTotalTax() | number:'1.2-2':'en-IN' }}</span>\n                </div>\n                <div class=\"d-flex justify-content-between summary-total\">\n                    <span class=\"summary-label-bold\">Total Amount</span>\n                    <span class=\"summary-value-bold\">{{ getCurrencySymbol() }} {{ getTotalAmount() | number:'1.2-2':'en-IN'\n                        }}</span>\n                </div>\n            </div>\n\n            <!-- Actions -->\n            <div class=\"d-flex mt-4\">\n                <button type=\"button\" (click)=\"activeModal.dismiss()\"\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\n                <button type=\"submit\" [disabled]=\"saving\"\n                    class=\"btn btn-primary px-4 w-50\" style=\"white-space: nowrap;\">\n                    <span *ngIf=\"!saving\" class=\"submit\">{{ mode === 'edit' ? 'Update Invoice' : (mode === 'estimate' ? 'Generate Estimate' : (mode === 'editEstimate' ? 'Update Estimate' : 'Create Invoice'))\n                        }}</span>\n                    <span *ngIf=\"saving\" class=\"submit\">Saving...</span>\n                </button>\n            </div>\n        </form>\n    </div>\n\n    <!-- ======================== CREDIT NOTE TAB ======================== -->\n    <div class=\"modal-body mb-4\" *ngIf=\"activeTab === 'creditNote' && mode === 'edit'\">\n        <form [formGroup]=\"creditNoteForm\" class=\"form\">\n            <div class=\"contenttext mb-3\">\n                Apply a credit note / discount to this invoice. Maximum 10% discount allowed.\n            </div>\n\n            <div class=\"d-flex flex-column\">\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Invoice ID</label>\n                    <input type=\"text\" class=\"form-control\" [value]=\"invoiceData?.invoice\" readonly>\n                </div>\n\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Total Amount</label>\n                    <div class=\"input-group\">\n                        <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                        <input formControlName=\"amount\" type=\"text\" readonly class=\"form-control amount-input\">\n                    </div>\n                </div>\n\n                <div class=\"form-group mt-2\">\n                    <div class=\"py-2\">\n                        <label class=\"headingtext mb-2\">Revised Amount</label>\n                        <div class=\"input-group\">\n                            <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                            <input type=\"text\" formControlName=\"revisedAmount\"\n                                (keypress)=\"omitSpecialChar($event)\"\n                                class=\"form-control amount-input\"\n                                [ngClass]=\"creditMoreThanTenPercent ? 'errorinput' : ''\">\n                            <span class=\"input-icon\" *ngIf=\"creditMoreThanTenPercent\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                                    fill=\"none\">\n                                    <g clip-path=\"url(#clip_cn_err)\">\n                                        <path\n                                            d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\n                                            stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                                            stroke-linejoin=\"round\" />\n                                    </g>\n                                    <defs>\n                                        <clipPath id=\"clip_cn_err\">\n                                            <rect width=\"16\" height=\"16\" fill=\"white\" />\n                                        </clipPath>\n                                    </defs>\n                                </svg>\n                            </span>\n                        </div>\n                    </div>\n                    <span [ngClass]=\"creditMoreThanTenPercent ? 'text-danger' : 'contenttext'\" class=\"small\">\n                        More than 10% can't be revised from total amount\n                    </span>\n                </div>\n\n                <div class=\"form-group mt-2\">\n                    <div class=\"py-2\">\n                        <label class=\"headingtext mb-2\">Discount</label>\n                        <div class=\"input-group\">\n                            <input type=\"text\" formControlName=\"discount\"\n                                (keypress)=\"omitSpecialChar($event)\"\n                                class=\"form-control\"\n                                [ngClass]=\"creditMoreThanTenPercent ? 'errorinput' : ''\">\n                            <span class=\"input-icon\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                                    fill=\"none\">\n                                    <path\n                                        d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\"\n                                        [attr.stroke]=\"creditMoreThanTenPercent ? '#F04438' : '#98A2B3'\"\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </span>\n                        </div>\n                    </div>\n                    <span [ngClass]=\"creditMoreThanTenPercent ? 'text-danger' : 'contenttext'\" class=\"small\">\n                        In percentage\n                    </span>\n                </div>\n            </div>\n\n            <div class=\"d-flex mt-5\">\n                <button type=\"button\" (click)=\"activeModal.dismiss()\"\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\n                <button [disabled]=\"creditMoreThanTenPercent || saving\" type=\"button\" (click)=\"applyCreditNote()\"\n                    class=\"btn btn-primary px-4 w-50\" style=\"white-space: nowrap;\">\n                    <span *ngIf=\"!saving\">Apply Credit Note</span>\n                    <span *ngIf=\"saving\">Applying...</span>\n                </button>\n            </div>\n        </form>\n    </div>\n\n    <!-- ======================== ONE TIME FEE TAB ======================== -->\n    <div class=\"modal-body mb-4\" *ngIf=\"activeTab === 'oneTimeFee' && mode === 'edit'\">\n        <form [formGroup]=\"oneTimeFeeForm\" class=\"form\">\n            <div class=\"contenttext mb-3\">\n                Add a one-time fee (e.g. installation) to this invoice.\n            </div>\n\n            <div class=\"d-flex flex-column\">\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Invoice ID</label>\n                    <input type=\"text\" class=\"form-control\" [value]=\"invoiceData?.invoice\" readonly>\n                </div>\n\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Current Invoice Amount</label>\n                    <div class=\"input-group\">\n                        <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                        <input formControlName=\"amount\" type=\"text\" readonly class=\"form-control amount-input\">\n                    </div>\n                </div>\n\n                <div class=\"form-group mt-2\">\n                    <div class=\"py-2\">\n                        <label class=\"headingtext mb-2\">One Time Fee (Installation)</label>\n                        <div class=\"input-group\">\n                            <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                            <input type=\"text\" formControlName=\"oneTimeFee\"\n                                (keypress)=\"omitSpecialChar($event)\"\n                                class=\"form-control amount-input\"\n                                placeholder=\"Enter fee amount\">\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"d-flex flex-stack mt-3 fee-summary p-3\">\n                    <div class=\"summary-label\">Selected Invoice Amount + One Time Fee</div>\n                    <div class=\"d-flex align-items-center\">\n                        <span class=\"summary-value-bold\">{{ getInvoiceCurrencySymbol() }}{{\n                            oneTimeFeeTotal | number:'1.2-2':'en-IN' }}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"d-flex mt-5\">\n                <button type=\"button\" (click)=\"activeModal.dismiss()\"\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\n                <button [disabled]=\"saving || !oneTimeFeeForm.get('oneTimeFee')?.value\" type=\"button\"\n                    (click)=\"applyOneTimeFee()\"\n                    class=\"btn btn-primary px-4 w-50\" style=\"white-space: nowrap;\">\n                    <span *ngIf=\"!saving\">Apply Fee</span>\n                    <span *ngIf=\"saving\">Applying...</span>\n                </button>\n            </div>\n        </form>\n    </div>\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.invoice-number{color:var(--Primary-700, #009BF3);font-weight:500;margin-left:4px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.headingtext{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.tab-bar{display:flex;gap:4px;border-bottom:1px solid var(--Gray-200, #EAECF0);padding-bottom:0}.tab-btn{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px;padding:8px 16px;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}.tab-btn:hover{color:var(--Gray-700, #344054)}.tab-btn.tab-active{color:var(--Primary-700, #009BF3);border-bottom:2px solid var(--Primary-700, #009BF3);font-weight:600}.section-title{color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:600;line-height:24px;padding-bottom:8px;border-bottom:1px solid var(--Gray-200, #EAECF0)}.product-row,.tax-row{background:var(--Gray-50, #F9FAFB);border:1px solid var(--Gray-200, #EAECF0);border-radius:8px}.product-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:600}input,.form-control{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:14px;width:100%;padding:8px 12px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}input[readonly]{background:var(--Gray-50, #F9FAFB);color:var(--Gray-500, #667085)}.form-select{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:14px;padding:8px 12px;font-family:Inter;font-weight:400;height:auto}.cancel{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.summary-section,.fee-summary{background:var(--Gray-50, #F9FAFB);border:1px solid var(--Gray-200, #EAECF0);border-radius:8px}.summary-label{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500}.summary-value{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500}.summary-total{padding-top:8px;border-top:1px solid var(--Gray-200, #EAECF0)}.summary-label-bold,.summary-value-bold{color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:600}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:12px!important;font-weight:400}.modal-body{max-height:70vh;overflow-y:auto}.input-group{position:relative}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400;line-height:24px;z-index:1}.input-group .amount-input{padding-left:30px}.input-group .input-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);display:inline-flex;align-items:center}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.input-group>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.form-control.is-invalid,.form-select.is-invalid{border:1px solid var(--Error-300, #FDA29B)!important;background:#fef3f2}.form-control.is-invalid:focus,.form-control.is-invalid:active,.form-control.is-invalid:focus-visible,.form-select.is-invalid:focus,.form-select.is-invalid:active,.form-select.is-invalid:focus-visible{border:1px solid var(--Error-300, #FDA29B)!important;box-shadow:0 0 0 4px #f044381f!important;background:#fef3f2}.invalid-msg{color:#b42318;font-family:Inter;font-size:12px;font-weight:500;line-height:18px;margin-top:4px}\n"] }]
+            args: [{ selector: 'lib-edit-invoice', template: "<div class=\"modal-content\">\n    <div class=\"p-5 px-6 pb-0\">\n        <div class=\"d-flex justify-content-between align-items-center\">\n            <div class=\"heading mt-2\">{{ mode === 'edit' ? 'Invoice' : (mode === 'estimate' ? 'Generate Estimate' : (mode === 'editEstimate' ? 'Edit Estimate' : 'Create Invoice')) }}\n                <span *ngIf=\"mode === 'edit'\" class=\"invoice-number\">{{ invoiceData?.invoice }}</span>\n                <span *ngIf=\"mode === 'editEstimate'\" class=\"invoice-number\">{{ invoiceData?.estimate }}</span>\n            </div>\n            <button type=\"button\" class=\"btn-close\" (click)=\"activeModal.dismiss()\"></button>\n        </div>\n\n        <!-- Tabs (only in edit mode) -->\n        <div class=\"tab-bar mt-3\" *ngIf=\"mode === 'edit'\">\n            <button class=\"tab-btn\" [ngClass]=\"activeTab === 'edit' ? 'tab-active' : ''\"\n                (click)=\"setTab('edit')\">Edit Invoice</button>\n            <button class=\"tab-btn\" [ngClass]=\"activeTab === 'creditNote' ? 'tab-active' : ''\"\n                (click)=\"setTab('creditNote')\">Credit Note</button>\n            <button class=\"tab-btn\" [ngClass]=\"activeTab === 'oneTimeFee' ? 'tab-active' : ''\"\n                (click)=\"setTab('oneTimeFee')\">One Time Fee</button>\n        </div>\n    </div>\n\n    <!-- ======================== EDIT INVOICE TAB ======================== -->\n    <div class=\"modal-body mb-4\" *ngIf=\"activeTab === 'edit' || mode !== 'edit'\">\n        <form [formGroup]=\"invoiceForm\" class=\"form\" (ngSubmit)=\"onSubmit()\">\n\n            <!-- Company Details Section -->\n            <div class=\"section-title mb-3\">Company Details</div>\n\n            <div class=\"row\">\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Company Name <span class=\"text-danger\">*</span></label>\n                    <input type=\"text\" formControlName=\"companyName\" class=\"form-control\"\n                        [class.is-invalid]=\"controlInvalid('companyName')\"\n                        [readonly]=\"mode === 'edit'\">\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('companyName')\">Company Name is required</div>\n                </div>\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">GST Number</label>\n                    <input type=\"text\" formControlName=\"GSTNumber\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n            </div>\n\n            <div class=\"row\">\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Company Address</label>\n                    <input type=\"text\" formControlName=\"companyAddress\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Place of Supply</label>\n                    <input type=\"text\" formControlName=\"PlaceOfSupply\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n            </div>\n\n            <!-- Billing Group -->\n            <div class=\"row\" *ngIf=\"billingGroups.length > 0\">\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Billing Group <span *ngIf=\"mode !== 'edit'\" class=\"text-danger\">*</span></label>\n                    <select *ngIf=\"mode !== 'edit'\" class=\"form-select\" formControlName=\"groupId\"\n                        [class.is-invalid]=\"controlInvalid('groupId')\"\n                        (change)=\"onGroupChange($event)\">\n                        <option value=\"\">Select billing group</option>\n                        <option *ngFor=\"let g of billingGroups\" [value]=\"g._id\">{{ g.groupName }}</option>\n                    </select>\n                    <input *ngIf=\"mode === 'edit'\" type=\"text\" [value]=\"invoiceForm.get('groupName')?.value || 'Default Group'\" class=\"form-control\" readonly>\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('groupId')\">Billing Group is required</div>\n                </div>\n                <div class=\"col-md-6 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Group Name</label>\n                    <input type=\"text\" formControlName=\"groupName\" class=\"form-control\" [readonly]=\"mode === 'edit'\">\n                </div>\n            </div>\n\n            <!-- Invoice Details Section -->\n            <div class=\"section-title mb-3 mt-2\">Invoice Details</div>\n\n            <div class=\"row\">\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Billing Date <span class=\"text-danger\">*</span></label>\n                    <input type=\"date\" formControlName=\"billingDate\" class=\"form-control\"\n                        [class.is-invalid]=\"controlInvalid('billingDate')\">\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('billingDate')\">Billing Date is required</div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Due Date <span class=\"text-danger\">*</span></label>\n                    <input type=\"date\" formControlName=\"dueDate\" class=\"form-control\"\n                        [class.is-invalid]=\"controlInvalid('dueDate')\">\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('dueDate')\">Due Date is required</div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">Currency <span class=\"text-danger\">*</span></label>\n                    <select class=\"form-select\" formControlName=\"currency\"\n                        [class.is-invalid]=\"controlInvalid('currency')\">\n                        <option *ngFor=\"let c of currencyOptions\" [value]=\"c\">\n                            {{ currencyLabels[c] }}\n                        </option>\n                    </select>\n                    <div class=\"invalid-msg\" *ngIf=\"controlInvalid('currency')\">Currency is required</div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1\">No. of Stores</label>\n                    <input type=\"number\" formControlName=\"stores\" class=\"form-control\" readonly>\n                </div>\n                <!-- Purchase Order mapping (optional). Mapping deducts this\n                     invoice's amount from the selected PO's remaining balance. -->\n                <div class=\"col-md-3 form-group mb-3\" *ngIf=\"mode !== 'estimate' && mode !== 'editEstimate'\">\n                    <label class=\"headingtext mb-1\">Purchase Order</label>\n                    <select class=\"form-select\" formControlName=\"purchaseOrderNumber\">\n                        <option value=\"\">None</option>\n                        <option *ngFor=\"let po of purchaseOrders\" [value]=\"po.purchaseOrderNumber\">\n                            {{ po.purchaseOrderNumber }} ({{ getCurrencySymbol() }}{{ po.remainingAmount | number:'1.0-0':'en-IN' }} left)\n                        </option>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Advance Invoice (create only): bill several future months upfront.\n                 Each month becomes its own line item server-side. -->\n            <div class=\"row\" *ngIf=\"mode === 'create'\">\n                <div class=\"col-md-3 form-group mb-3\">\n                    <label class=\"headingtext mb-1 d-block\">Advance Invoice</label>\n                    <div class=\"form-check form-switch mt-1\">\n                        <input class=\"form-check-input\" type=\"checkbox\" id=\"advanceInvoiceCreate\"\n                            formControlName=\"advanceInvoice\">\n                        <label class=\"form-check-label\" for=\"advanceInvoiceCreate\">Bill future months upfront</label>\n                    </div>\n                </div>\n                <div class=\"col-md-3 form-group mb-3\" *ngIf=\"invoiceForm.get('advanceInvoice')?.value\">\n                    <label class=\"headingtext mb-1\">Advance frequency</label>\n                    <select class=\"form-select\" formControlName=\"advancePeriod\">\n                        <option *ngFor=\"let opt of advancePeriodOptions\" [value]=\"opt.value\">{{ opt.label }}</option>\n                    </select>\n                </div>\n            </div>\n\n\n            <!-- Products Section -->\n            <div class=\"section-title mb-3 mt-2\">\n                <div class=\"d-flex justify-content-between align-items-center\">\n                    <span>Products</span>\n                    <div class=\"d-flex gap-2\">\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"addProduct()\">\n                            + Add Product\n                        </button>\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click)=\"addCustomProduct()\">\n                            + Add Custom Product\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div formArrayName=\"products\">\n                <div *ngFor=\"let product of products.controls; let i = index\" [formGroupName]=\"i\"\n                    class=\"product-row mb-3 p-3\">\n                    <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                        <span class=\"product-label\">Product {{ i + 1 }}</span>\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" (click)=\"removeProduct(i)\"\n                            *ngIf=\"products.length > 1\">\n                            Remove\n                        </button>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-4 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Product Name <span class=\"text-danger\">*</span></label>\n                            <!-- Base-pricing dropdown (with a \"+ Custom product\" choice) when\n                                 products exist and this row isn't custom; otherwise a free-text\n                                 name input for a custom product. -->\n                            <select *ngIf=\"availableProducts.length > 0 && !product.get('isCustom')?.value\" formControlName=\"productName\"\n                                class=\"form-select\"\n                                [class.is-invalid]=\"arrayControlInvalid('products', i, 'productName')\"\n                                (change)=\"onProductChange(i)\">\n                                <option value=\"\">Select product</option>\n                                <option *ngFor=\"let p of availableProducts\" [value]=\"p.productName\">\n                                    {{ formatProductName(p.productName) }}\n                                </option>\n                                <option value=\"__custom__\">+ Custom product</option>\n                            </select>\n                            <input *ngIf=\"availableProducts.length === 0 || product.get('isCustom')?.value\" type=\"text\" formControlName=\"productName\"\n                                class=\"form-control\"\n                                [class.is-invalid]=\"arrayControlInvalid('products', i, 'productName')\"\n                                placeholder=\"e.g. Custom Service\">\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('products', i, 'productName')\">Product Name is required</div>\n                        </div>\n                        <div class=\"col-md-4 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Description</label>\n                            <input type=\"text\" formControlName=\"description\" class=\"form-control\"\n                                placeholder=\"e.g. Customer Footfall Analytics\">\n                        </div>\n                        <div class=\"col-md-4 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Month</label>\n                            <input type=\"text\" formControlName=\"month\" class=\"form-control\"\n                                placeholder=\"e.g. Mar 2026\">\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">HSN/SAC</label>\n                            <input type=\"text\" formControlName=\"HsnNumber\" class=\"form-control\">\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Quantity</label>\n                            <input type=\"number\" formControlName=\"storeCount\" class=\"form-control\"\n                                (input)=\"recalculate()\">\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Rate/Price <span class=\"text-danger\">*</span></label>\n                            <input type=\"number\" formControlName=\"price\" class=\"form-control\"\n                                [class.is-invalid]=\"arrayControlInvalid('products', i, 'price')\"\n                                (input)=\"recalculate()\">\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('products', i, 'price')\">Rate/Price is required</div>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Amount</label>\n                            <input type=\"number\" formControlName=\"amount\" class=\"form-control\" readonly>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Period</label>\n                            <select class=\"form-select\" formControlName=\"period\">\n                                <option value=\"monthly\">Monthly</option>\n                                <option value=\"quarterly\">Quarterly</option>\n                                <option value=\"halfyearly\">Half-yearly</option>\n                                <option value=\"yearly\">Yearly</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Tax Section -->\n            <div class=\"section-title mb-3 mt-2\">\n                <div class=\"d-flex justify-content-between align-items-center\">\n                    <span>Tax</span>\n                    <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"addTax()\">\n                        + Add Tax\n                    </button>\n                </div>\n            </div>\n\n            <div formArrayName=\"tax\">\n                <div *ngFor=\"let t of taxArray.controls; let j = index\" [formGroupName]=\"j\"\n                    class=\"tax-row mb-3 p-3\">\n                    <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                        <span class=\"product-label\">Tax {{ j + 1 }}</span>\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" (click)=\"removeTax(j)\"\n                            *ngIf=\"taxArray.length > 1\">\n                            Remove\n                        </button>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Tax Type <span class=\"text-danger\">*</span></label>\n                            <select class=\"form-select\" formControlName=\"type\"\n                                [class.is-invalid]=\"arrayControlInvalid('tax', j, 'type')\">\n                                <option *ngFor=\"let tt of taxTypes\" [value]=\"tt\">{{ tt }}</option>\n                            </select>\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('tax', j, 'type')\">Tax Type is required</div>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Tax % <span class=\"text-danger\">*</span></label>\n                            <input type=\"number\" formControlName=\"value\" class=\"form-control\"\n                                [class.is-invalid]=\"arrayControlInvalid('tax', j, 'value')\"\n                                (input)=\"recalculate()\">\n                            <div class=\"invalid-msg\" *ngIf=\"arrayControlInvalid('tax', j, 'value')\">Tax % is required</div>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Tax Amount</label>\n                            <input type=\"text\" formControlName=\"taxAmount\" class=\"form-control\" readonly>\n                        </div>\n                        <div class=\"col-md-3 form-group mb-2\">\n                            <label class=\"headingtext mb-1\">Currency Symbol</label>\n                            <input type=\"text\" formControlName=\"currency\" class=\"form-control\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Summary -->\n            <div class=\"summary-section p-3 mt-3\">\n                <div class=\"d-flex justify-content-between mb-2\">\n                    <span class=\"summary-label\">Subtotal</span>\n                    <span class=\"summary-value\">{{ getCurrencySymbol() }} {{ getSubtotal() | number:'1.2-2':'en-IN' }}</span>\n                </div>\n                <div class=\"d-flex justify-content-between mb-2\">\n                    <span class=\"summary-label\">Total Tax</span>\n                    <span class=\"summary-value\">{{ getCurrencySymbol() }} {{ getTotalTax() | number:'1.2-2':'en-IN' }}</span>\n                </div>\n                <div class=\"d-flex justify-content-between summary-total\">\n                    <span class=\"summary-label-bold\">Total Amount</span>\n                    <span class=\"summary-value-bold\">{{ getCurrencySymbol() }} {{ getTotalAmount() | number:'1.2-2':'en-IN'\n                        }}</span>\n                </div>\n            </div>\n\n            <!-- Actions -->\n            <div class=\"d-flex mt-4\">\n                <button type=\"button\" (click)=\"activeModal.dismiss()\"\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\n                <button type=\"submit\" [disabled]=\"saving\"\n                    class=\"btn btn-primary px-4 w-50\" style=\"white-space: nowrap;\">\n                    <span *ngIf=\"!saving\" class=\"submit\">{{ mode === 'edit' ? 'Update Invoice' : (mode === 'estimate' ? 'Generate Estimate' : (mode === 'editEstimate' ? 'Update Estimate' : 'Create Invoice'))\n                        }}</span>\n                    <span *ngIf=\"saving\" class=\"submit\">Saving...</span>\n                </button>\n            </div>\n        </form>\n    </div>\n\n    <!-- ======================== CREDIT NOTE TAB ======================== -->\n    <div class=\"modal-body mb-4\" *ngIf=\"activeTab === 'creditNote' && mode === 'edit'\">\n        <form [formGroup]=\"creditNoteForm\" class=\"form\">\n            <div class=\"contenttext mb-3\">\n                Apply a credit note / discount to this invoice.\n            </div>\n\n            <div class=\"d-flex flex-column\">\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Invoice ID</label>\n                    <input type=\"text\" class=\"form-control\" [value]=\"invoiceData?.invoice\" readonly>\n                </div>\n\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Total Amount</label>\n                    <div class=\"input-group\">\n                        <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                        <input formControlName=\"amount\" type=\"text\" readonly class=\"form-control amount-input\">\n                    </div>\n                </div>\n\n                <div class=\"form-group mt-2\">\n                    <div class=\"py-2\">\n                        <label class=\"headingtext mb-2\">Revised Amount</label>\n                        <div class=\"input-group\">\n                            <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                            <input type=\"text\" formControlName=\"revisedAmount\"\n                                (keypress)=\"omitSpecialChar($event)\"\n                                class=\"form-control amount-input\"\n                                [ngClass]=\"creditMoreThanTenPercent ? 'errorinput' : ''\">\n                            <span class=\"input-icon\" *ngIf=\"creditMoreThanTenPercent\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                                    fill=\"none\">\n                                    <g clip-path=\"url(#clip_cn_err)\">\n                                        <path\n                                            d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\"\n                                            stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                                            stroke-linejoin=\"round\" />\n                                    </g>\n                                    <defs>\n                                        <clipPath id=\"clip_cn_err\">\n                                            <rect width=\"16\" height=\"16\" fill=\"white\" />\n                                        </clipPath>\n                                    </defs>\n                                </svg>\n                            </span>\n                        </div>\n                    </div>\n                    <span [ngClass]=\"creditMoreThanTenPercent ? 'text-danger' : 'contenttext'\" class=\"small\">\n                        Enter a valid revised amount\n                    </span>\n                </div>\n\n                <div class=\"form-group mt-2\">\n                    <div class=\"py-2\">\n                        <label class=\"headingtext mb-2\">Discount</label>\n                        <div class=\"input-group\">\n                            <input type=\"text\" formControlName=\"discount\"\n                                (keypress)=\"omitSpecialChar($event)\"\n                                class=\"form-control\"\n                                [ngClass]=\"creditMoreThanTenPercent ? 'errorinput' : ''\">\n                            <span class=\"input-icon\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                                    fill=\"none\">\n                                    <path\n                                        d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\"\n                                        [attr.stroke]=\"creditMoreThanTenPercent ? '#F04438' : '#98A2B3'\"\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </span>\n                        </div>\n                    </div>\n                    <span [ngClass]=\"creditMoreThanTenPercent ? 'text-danger' : 'contenttext'\" class=\"small\">\n                        In percentage\n                    </span>\n                </div>\n            </div>\n\n            <div class=\"d-flex mt-5\">\n                <button type=\"button\" (click)=\"activeModal.dismiss()\"\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\n                <button [disabled]=\"creditMoreThanTenPercent || saving\" type=\"button\" (click)=\"applyCreditNote()\"\n                    class=\"btn btn-primary px-4 w-50\" style=\"white-space: nowrap;\">\n                    <span *ngIf=\"!saving\">Apply Credit Note</span>\n                    <span *ngIf=\"saving\">Applying...</span>\n                </button>\n            </div>\n        </form>\n    </div>\n\n    <!-- ======================== ONE TIME FEE TAB ======================== -->\n    <div class=\"modal-body mb-4\" *ngIf=\"activeTab === 'oneTimeFee' && mode === 'edit'\">\n        <form [formGroup]=\"oneTimeFeeForm\" class=\"form\">\n            <div class=\"contenttext mb-3\">\n                Add a one-time fee (e.g. installation) to this invoice.\n            </div>\n\n            <div class=\"d-flex flex-column\">\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Invoice ID</label>\n                    <input type=\"text\" class=\"form-control\" [value]=\"invoiceData?.invoice\" readonly>\n                </div>\n\n                <div class=\"form-group py-2\">\n                    <label class=\"headingtext mb-2\">Current Invoice Amount</label>\n                    <div class=\"input-group\">\n                        <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                        <input formControlName=\"amount\" type=\"text\" readonly class=\"form-control amount-input\">\n                    </div>\n                </div>\n\n                <div class=\"form-group mt-2\">\n                    <div class=\"py-2\">\n                        <label class=\"headingtext mb-2\">One Time Fee (Installation)</label>\n                        <div class=\"input-group\">\n                            <span class=\"dollar-sign\">{{ getInvoiceCurrencySymbol() }}</span>\n                            <input type=\"text\" formControlName=\"oneTimeFee\"\n                                (keypress)=\"omitSpecialChar($event)\"\n                                class=\"form-control amount-input\"\n                                placeholder=\"Enter fee amount\">\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"d-flex flex-stack mt-3 fee-summary p-3\">\n                    <div class=\"summary-label\">Selected Invoice Amount + One Time Fee</div>\n                    <div class=\"d-flex align-items-center\">\n                        <span class=\"summary-value-bold\">{{ getInvoiceCurrencySymbol() }}{{\n                            oneTimeFeeTotal | number:'1.2-2':'en-IN' }}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"d-flex mt-5\">\n                <button type=\"button\" (click)=\"activeModal.dismiss()\"\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\n                <button [disabled]=\"saving || !oneTimeFeeForm.get('oneTimeFee')?.value\" type=\"button\"\n                    (click)=\"applyOneTimeFee()\"\n                    class=\"btn btn-primary px-4 w-50\" style=\"white-space: nowrap;\">\n                    <span *ngIf=\"!saving\">Apply Fee</span>\n                    <span *ngIf=\"saving\">Applying...</span>\n                </button>\n            </div>\n        </form>\n    </div>\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.invoice-number{color:var(--Primary-700, #009BF3);font-weight:500;margin-left:4px}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.headingtext{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.tab-bar{display:flex;gap:4px;border-bottom:1px solid var(--Gray-200, #EAECF0);padding-bottom:0}.tab-btn{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px;padding:8px 16px;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}.tab-btn:hover{color:var(--Gray-700, #344054)}.tab-btn.tab-active{color:var(--Primary-700, #009BF3);border-bottom:2px solid var(--Primary-700, #009BF3);font-weight:600}.section-title{color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:600;line-height:24px;padding-bottom:8px;border-bottom:1px solid var(--Gray-200, #EAECF0)}.product-row,.tax-row{background:var(--Gray-50, #F9FAFB);border:1px solid var(--Gray-200, #EAECF0);border-radius:8px}.product-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:600}input,.form-control{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:14px;width:100%;padding:8px 12px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}input[readonly]{background:var(--Gray-50, #F9FAFB);color:var(--Gray-500, #667085)}.form-select{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:14px;padding:8px 12px;font-family:Inter;font-weight:400;height:auto}.cancel{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.summary-section,.fee-summary{background:var(--Gray-50, #F9FAFB);border:1px solid var(--Gray-200, #EAECF0);border-radius:8px}.summary-label{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500}.summary-value{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500}.summary-total{padding-top:8px;border-top:1px solid var(--Gray-200, #EAECF0)}.summary-label-bold,.summary-value-bold{color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:600}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:12px!important;font-weight:400}.modal-body{max-height:70vh;overflow-y:auto}.input-group{position:relative}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400;line-height:24px;z-index:1}.input-group .amount-input{padding-left:30px}.input-group .input-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);display:inline-flex;align-items:center}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.input-group>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.form-control.is-invalid,.form-select.is-invalid{border:1px solid var(--Error-300, #FDA29B)!important;background:#fef3f2}.form-control.is-invalid:focus,.form-control.is-invalid:active,.form-control.is-invalid:focus-visible,.form-select.is-invalid:focus,.form-select.is-invalid:active,.form-select.is-invalid:focus-visible{border:1px solid var(--Error-300, #FDA29B)!important;box-shadow:0 0 0 4px #f044381f!important;background:#fef3f2}.invalid-msg{color:#b42318;font-family:Inter;font-size:12px;font-weight:500;line-height:18px;margin-top:4px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgbActiveModal }, { type: i5.FormBuilder }, { type: BillingService }, { type: i0.ChangeDetectorRef }, { type: i2$1.ToastService }], propDecorators: { invoiceData: [{
                 type: Input
             }], mode: [{
@@ -1714,12 +1714,21 @@ class InvoicePreviewComponent {
         return `${words} ${amountInWords(total)} Only`;
     }
     formatINR(value) {
+        const code = this.invoiceData?.currency;
+        const isInr = code === 'inr';
         const n = Number(value);
         if (!isFinite(n))
-            return '0.00';
-        const code = this.invoiceData?.currency;
+            return isInr ? '0' : '0.00';
         const locale = this.currencyLocales[code || ''] || 'en-US';
-        return n.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+        // INR is shown as a whole number (rounded); every other currency keeps
+        // exactly 2 decimal places.
+        const fractionDigits = isInr ? 0 : 2;
+        return n.toLocaleString(locale, { minimumFractionDigits: fractionDigits, maximumFractionDigits: fractionDigits });
+    }
+    // A tax line (IGST/CGST/SGST) is only shown when it actually has a non-zero
+    // amount — zero / missing tax rows are hidden in the preview (and PDF).
+    hasTax(t) {
+        return isFinite(Number(t?.taxAmount)) && Number(t?.taxAmount) > 0;
     }
     // Mirrors the backend transform: `tangoTraffic` -> `Tango Traffic`.
     formatProductName(name) {
@@ -1732,11 +1741,11 @@ class InvoicePreviewComponent {
         return index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InvoicePreviewComponent, deps: [{ token: i1$1.NgbActiveModal }, { token: BillingService }, { token: i2$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InvoicePreviewComponent, selector: "lib-invoice-preview", inputs: { invoiceData: "invoiceData" }, ngImport: i0, template: "<div class=\"invoice-preview-modal\">\n  <div class=\"modal-header\">\n    <ul class=\"nav nav-tabs preview-tabs\" role=\"tablist\">\n      <li class=\"nav-item\">\n        <button class=\"nav-link\" [class.active]=\"activeTab === 'invoice'\"\n                (click)=\"selectTab('invoice')\" type=\"button\">Invoice</button>\n      </li>\n      <li class=\"nav-item\">\n        <button class=\"nav-link\" [class.active]=\"activeTab === 'annexure'\"\n                (click)=\"selectTab('annexure')\" type=\"button\">Annexure</button>\n      </li>\n    </ul>\n    <button type=\"button\" class=\"btn-close\" (click)=\"activeModal.dismiss()\" aria-label=\"Close\"></button>\n  </div>\n\n  <div class=\"modal-body p-0\">\n    <!-- INVOICE TAB -->\n    <div *ngIf=\"activeTab === 'invoice'\" class=\"invoice-page\">\n      <!-- Header row -->\n      <div class=\"row align-items-start\">\n        <div class=\"col-7\">\n          <div class=\"brand\">\n            <img src=\"./assets/tango/Images/tangoeye-logo.svg\" alt=\"TangoEye\" class=\"brand-logo\" onerror=\"this.style.display='none'\">\n          </div>\n          <div class=\"company-block mt-3\">\n            <div class=\"company-name\">TANGO IT SOLUTIONS INDIA PRIVATE LTD</div>\n            <div>2nd Floor, Apeejay Business Centre, No.12/39,</div>\n            <div>Haddows Road, Nungambakkam</div>\n            <div>Chennai Tamil Nadu 600006, India</div>\n            <div class=\"mt-1\"><strong>GSTIN 33AAGCT3124R1Z2</strong></div>\n            <div class=\"mt-1\">MSME / Udyam type : Micro</div>\n            <div>MSME / Udyam No. : UDYAM-TN-03-0212399</div>\n          </div>\n        </div>\n        <div class=\"col-5 text-end\">\n          <div class=\"tax-invoice-label\">TAX INVOICE</div>\n          <div class=\"invoice-number\"># {{ invoiceData?.invoice }}</div>\n        </div>\n      </div>\n\n      <!-- Bill-to + totals row -->\n      <div class=\"row mt-4\">\n        <div class=\"col-7\">\n          <div class=\"bill-to-label\">BILL TO :</div>\n          <div class=\"client-name mt-1\">{{ (invoiceData?.clientName || invoiceData?.companyName) | uppercase }}</div>\n          <div class=\"mt-1\" *ngIf=\"invoiceData?.billingAddressLineOne || invoiceData?.companyAddress\">\n            {{ invoiceData?.billingAddressLineOne || invoiceData?.companyAddress }}\n          </div>\n          <div *ngIf=\"invoiceData?.billingAddressLineTwo\">{{ invoiceData?.billingAddressLineTwo }}</div>\n          <div *ngIf=\"invoiceData?.billingCity || invoiceData?.billingPinCode || invoiceData?.billingState\">\n            {{ invoiceData?.billingCity }}<span *ngIf=\"invoiceData?.billingPinCode\">, {{ invoiceData?.billingPinCode }}</span><span *ngIf=\"invoiceData?.billingState\">, {{ invoiceData?.billingState }}</span><span *ngIf=\"invoiceData?.billingCountry\">, {{ invoiceData?.billingCountry }}</span>\n          </div>\n          <div class=\"mt-2\" *ngIf=\"invoiceData?.GSTNumber\"><strong>GSTIN {{ invoiceData?.GSTNumber }}</strong></div>\n          <div *ngIf=\"invoiceData?.PlaceOfSupply\">Place Of Supply: {{ invoiceData?.PlaceOfSupply }}</div>\n        </div>\n        <div class=\"col-5 text-end\">\n          <div class=\"invoice-total-label\">Invoice Total <span class=\"invoice-total-amount\">{{ currencySymbol() }} {{ formatINR(invoiceData?.totalAmount) }}</span></div>\n          <table class=\"meta-table ms-auto mt-3\">\n            <tr><td class=\"meta-label\">Invoice date :</td><td class=\"meta-value\">{{ invoiceData?.billingDate | date:'dd/MM/yyyy' }}</td></tr>\n            <tr><td class=\"meta-label\">Terms :</td><td class=\"meta-value\">Term {{ paymentTermDays }}</td></tr>\n            <tr><td class=\"meta-label\">Due Date :</td><td class=\"meta-value\">{{ invoiceData?.dueDate | date:'dd/MM/yyyy' }}</td></tr>\n            <tr *ngIf=\"invoiceData?.purchaseOrderNumber || invoiceData?.PoNum || invoiceData?.poNumber\"><td class=\"meta-label\">P.O.# :</td><td class=\"meta-value\">{{ invoiceData?.purchaseOrderNumber || invoiceData?.PoNum || invoiceData?.poNumber }}</td></tr>\n          </table>\n        </div>\n      </div>\n\n      <!-- Line items -->\n      <table class=\"items-table mt-4\">\n        <thead>\n          <tr>\n            <th class=\"col-index\">#</th>\n            <th class=\"col-product\">Product &amp; Description</th>\n            <th class=\"col-month\">Month</th>\n            <th class=\"col-hsn\">HSN/SAC</th>\n            <th class=\"col-count text-center\">Quantity</th>\n            <th class=\"col-rate text-end\">Rate</th>\n            <th class=\"col-amount text-end\">Amount</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let item of invoiceData?.products; let i = index; trackBy: trackByIndex\">\n            <td>{{ i + 1 }}</td>\n            <td>\n              <div class=\"product-name\">{{ formatProductName(item?.productName) }}</div>\n              <div class=\"product-desc\">{{ item?.description }}</div>\n            </td>\n            <!-- Month is the product's billing month stored on the line item\n                 (advance invoices bill a future month while billingDate is the\n                 creation date). Fall back to billingDate for legacy rows. -->\n            <td class=\"nowrap\">{{ item?.month || (invoiceData?.billingDate | date:'MMM yyyy') }}</td>\n            <td>{{ item?.hsn || item?.hsnCode || '998314' }}</td>\n            <td class=\"text-center\"><strong>{{ item?.storeCount || invoiceData?.stores?.length || '' }}</strong></td>\n            <td class=\"text-end nowrap\">{{ currencySymbol() }} {{ formatINR(item?.price) }}</td>\n            <td class=\"text-end nowrap\">{{ currencySymbol() }} {{ formatINR(item?.amount) }}</td>\n          </tr>\n        </tbody>\n      </table>\n\n      <!-- Totals -->\n      <div class=\"row mt-3\">\n        <div class=\"col-7\"></div>\n        <div class=\"col-5\">\n          <table class=\"totals-table ms-auto\">\n            <tr><td class=\"totals-label\">Sub Total</td><td class=\"totals-value\">{{ currencySymbol() }} {{ formatINR(invoiceData?.amount) }}</td></tr>\n            <tr *ngFor=\"let t of invoiceData?.tax\">\n              <td class=\"totals-label\">{{ t?.type || t?.taxName || t?.name }} ({{ t?.value ?? t?.taxPercentage ?? t?.percentage }}%)</td>\n              <td class=\"totals-value nowrap\">{{ currencySymbol() }} {{ formatINR(t?.taxAmount) }}</td>\n            </tr>\n            <tr class=\"totals-total-row\">\n              <td class=\"totals-label\">Total Amount</td>\n              <td class=\"totals-value\">{{ currencySymbol() }} {{ formatINR(invoiceData?.totalAmount) }}</td>\n            </tr>\n            <tr class=\"totals-words-row\">\n              <td class=\"totals-label\">Total In Words</td>\n              <td class=\"totals-value words\">{{ totalInWords }}</td>\n            </tr>\n          </table>\n        </div>\n      </div>\n\n      <!-- Payment details -->\n      <div class=\"thanks mt-4\">Thanks for your business!</div>\n      <table class=\"payment-table mt-2\">\n        <tr><td class=\"payment-label\">Beneficiary Name</td><td class=\"payment-value\"><strong>{{ bankDetails?.beneficiaryName }}</strong></td></tr>\n        <tr><td class=\"payment-label\">Account Number</td><td class=\"payment-value\"><strong>{{ bankDetails?.accountNumber }}</strong></td></tr>\n        <tr><td class=\"payment-label\">IFSC Code</td><td class=\"payment-value\"><strong>{{ bankDetails?.ifsc }}</strong></td></tr>\n        <tr><td class=\"payment-label\">Payment Type</td><td class=\"payment-value\"><strong>{{ bankDetails?.paymentType }}</strong></td></tr>\n        <tr><td class=\"payment-label\">SWIFT Code</td><td class=\"payment-value\"><strong>{{ bankDetails?.swift }}</strong></td></tr>\n        <tr><td class=\"payment-label\">Branch</td><td class=\"payment-value\"><strong>{{ bankDetails?.branch }}</strong></td></tr>\n      </table>\n\n      <div class=\"system-note mt-4\">This is a system generated invoice. No signature required</div>\n    </div>\n\n    <!-- ANNEXURE TAB -->\n    <div *ngIf=\"activeTab === 'annexure'\" class=\"annexure-page\">\n      <div *ngIf=\"annexureLoading\" class=\"loading-state\">\n        <div class=\"spinner-border text-primary\" role=\"status\"><span class=\"visually-hidden\">Loading...</span></div>\n      </div>\n      <div *ngIf=\"!annexureLoading && annexureError\" class=\"error-state\">\n        <p>Failed to load annexure.</p>\n        <button class=\"btn btn-sm btn-outline-primary\" (click)=\"retryAnnexure()\">Retry</button>\n      </div>\n      <div *ngIf=\"!annexureLoading && !annexureError && annexureData !== null && annexureData.length === 0\" class=\"empty-state\">\n        No annexure data for this invoice.\n      </div>\n      <div *ngIf=\"!annexureLoading && !annexureError && annexureData && annexureData.length > 0\"\n           class=\"annexure-toolbar\">\n        <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"downloadAnnexureXlsx()\">\n          Export as XLSX\n        </button>\n      </div>\n      <table *ngIf=\"!annexureLoading && !annexureError && annexureData && annexureData.length > 0\" class=\"annexure-table\">\n        <thead>\n          <tr>\n            <th>Store Name</th>\n            <th>Products</th>\n            <th>Store ID</th>\n            <th>Deployment Date</th>\n            <th>Period</th>\n            <th>Pricing Method</th>\n            <th class=\"text-center\">Billing Days</th>\n            <th class=\"text-center\">Qty</th>\n            <th class=\"text-end\">Unit Price</th>\n            <th class=\"text-end\">Price Per Month</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of annexureData; trackBy: trackByIndex\">\n            <td>{{ row?.storeName }}</td>\n            <td>{{ row?.productName }}</td>\n            <td>{{ row?.storeId }}</td>\n            <td>{{ row?.edgefirstFileDate }}</td>\n            <td>{{ row?.period === 'prorate' ? 'Pro-rate' : 'Full month' }}</td>\n            <td>{{ row?.unitBasis || 'Per Store' }}</td>\n            <td class=\"text-center\"><strong>{{ row?.workingdays }}</strong></td>\n            <td class=\"text-center\">{{ row?.units ?? 1 }}</td>\n            <td class=\"text-end\">\n              {{ row?.currencyType }} {{ formatINR(row?.standardPrice) }}\n              <div class=\"unit-basis\">{{ row?.unitBasis || 'Per Store' }}</div>\n            </td>\n            <td class=\"text-end\"><strong>{{ row?.currencyType }} {{ formatINR(row?.runningCost) }}</strong></td>\n          </tr>\n        </tbody>\n        <tfoot *ngIf=\"annexureTotal != null\">\n          <tr>\n            <td colspan=\"9\" class=\"text-end\"><strong>Total</strong></td>\n            <td class=\"text-end\"><strong>{{ annexureData[0]?.currencyType }} {{ formatINR(annexureTotal) }}</strong></td>\n          </tr>\n        </tfoot>\n      </table>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-link\" (click)=\"activeModal.dismiss()\">Close</button>\n    <button class=\"btn btn-outline-primary\" (click)=\"downloadPdf()\" [disabled]=\"downloading\">\n      <span *ngIf=\"!downloading\">Download PDF</span>\n      <span *ngIf=\"downloading\">Downloading...</span>\n    </button>\n  </div>\n</div>", styles: [".invoice-preview-modal{font-family:inherit;font-size:13px;color:#344054;display:flex;flex-direction:column;max-height:calc(100vh - 3.5rem)}.invoice-preview-modal .modal-header{flex:0 0 auto;padding:0 1rem;border-bottom:1px solid #EAECF0;display:flex;align-items:stretch;justify-content:space-between}.invoice-preview-modal .modal-header .preview-tabs{border-bottom:none}.invoice-preview-modal .modal-header .preview-tabs .nav-link{border:none;border-radius:0;color:#667085;padding:12px 16px;background:transparent}.invoice-preview-modal .modal-header .preview-tabs .nav-link.active{color:#00a3ff;border-bottom:2px solid #00A3FF;background:transparent}.invoice-preview-modal .modal-header .btn-close{align-self:center}.invoice-preview-modal .modal-body{background:#fff;flex:1 1 auto;overflow-y:auto;min-height:0}.invoice-preview-modal .invoice-page,.invoice-preview-modal .annexure-page{padding:32px 40px}.invoice-preview-modal .tax-invoice-label{font-size:22px;font-weight:600;color:#00a3ff}.invoice-preview-modal .invoice-number{font-size:18px;font-weight:600;color:#00a3ff}.invoice-preview-modal .company-name{font-weight:700;color:#101828}.invoice-preview-modal .bill-to-label{font-weight:600;color:#667085}.invoice-preview-modal .client-name{font-weight:700;color:#101828;font-size:15px}.invoice-preview-modal .invoice-total-label{font-weight:600;font-size:15px}.invoice-preview-modal .invoice-total-label .invoice-total-amount{color:#101828;font-weight:700;margin-left:8px}.invoice-preview-modal .meta-table td{padding:2px 8px}.invoice-preview-modal .meta-table .meta-label{color:#667085;text-align:right}.invoice-preview-modal .meta-table .meta-value{color:#101828;font-weight:600}.invoice-preview-modal .items-table{width:100%;border-collapse:collapse}.invoice-preview-modal .items-table th{background:#f2f4f7;padding:12px;font-weight:600;color:#344054;text-align:left}.invoice-preview-modal .items-table td{padding:14px 12px;border-bottom:1px solid #EAECF0;vertical-align:top}.invoice-preview-modal .items-table .product-name{font-weight:600;color:#101828}.invoice-preview-modal .items-table .product-desc{color:#667085;font-size:12px}.invoice-preview-modal .items-table .col-index{width:40px}.invoice-preview-modal .items-table .col-month,.invoice-preview-modal .items-table .col-hsn,.invoice-preview-modal .items-table .col-count{width:100px}.invoice-preview-modal .items-table .col-rate{width:110px}.invoice-preview-modal .items-table .col-amount{width:140px}.invoice-preview-modal .items-table .nowrap{white-space:nowrap}.invoice-preview-modal .totals-table{width:100%}.invoice-preview-modal .totals-table td{padding:6px 12px}.invoice-preview-modal .totals-table .totals-label{color:#667085;text-align:right}.invoice-preview-modal .totals-table .totals-value{color:#101828;font-weight:600;text-align:right}.invoice-preview-modal .totals-table .totals-total-row td{padding-top:12px}.invoice-preview-modal .totals-table .totals-total-row .totals-value{font-size:15px;font-weight:700}.invoice-preview-modal .totals-table .totals-words-row .words{font-weight:600;max-width:280px;white-space:normal;word-wrap:break-word}.invoice-preview-modal .totals-table .nowrap{white-space:nowrap}.invoice-preview-modal .thanks{font-weight:600;color:#101828}.invoice-preview-modal .payment-table{border-collapse:collapse}.invoice-preview-modal .payment-table td{padding:6px 12px}.invoice-preview-modal .payment-table .payment-label{color:#667085}.invoice-preview-modal .system-note{color:#667085;font-size:12px;font-weight:600}.invoice-preview-modal .annexure-table{width:100%;border-collapse:collapse}.invoice-preview-modal .annexure-table th{background:#f2f4f7;padding:12px;font-weight:600;color:#344054;text-align:left}.invoice-preview-modal .annexure-table td{padding:14px 12px;border-bottom:1px solid #EAECF0}.invoice-preview-modal .annexure-table .unit-basis{font-size:11px;color:#98a2b3;margin-top:2px}.invoice-preview-modal .annexure-table tfoot td{background:#f9fafb;border-top:2px solid #EAECF0;font-size:15px}.invoice-preview-modal .loading-state,.invoice-preview-modal .empty-state,.invoice-preview-modal .error-state{padding:40px;text-align:center;color:#667085}.invoice-preview-modal .modal-footer{flex:0 0 auto}.invoice-preview-modal .annexure-toolbar{display:flex;justify-content:flex-end;padding:8px 0 12px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InvoicePreviewComponent, selector: "lib-invoice-preview", inputs: { invoiceData: "invoiceData" }, ngImport: i0, template: "<div class=\"invoice-preview-modal\">\n  <div class=\"modal-header\">\n    <ul class=\"nav nav-tabs preview-tabs\" role=\"tablist\">\n      <li class=\"nav-item\">\n        <button class=\"nav-link\" [class.active]=\"activeTab === 'invoice'\"\n                (click)=\"selectTab('invoice')\" type=\"button\">Invoice</button>\n      </li>\n      <li class=\"nav-item\">\n        <button class=\"nav-link\" [class.active]=\"activeTab === 'annexure'\"\n                (click)=\"selectTab('annexure')\" type=\"button\">Annexure</button>\n      </li>\n    </ul>\n    <button type=\"button\" class=\"btn-close\" (click)=\"activeModal.dismiss()\" aria-label=\"Close\"></button>\n  </div>\n\n  <div class=\"modal-body p-0\">\n    <!-- INVOICE TAB -->\n    <div *ngIf=\"activeTab === 'invoice'\" class=\"invoice-page\">\n      <!-- Header row -->\n      <div class=\"row align-items-start\">\n        <div class=\"col-7\">\n          <div class=\"brand\">\n            <img src=\"./assets/tango/Images/tangoeye-logo.svg\" alt=\"TangoEye\" class=\"brand-logo\" onerror=\"this.style.display='none'\">\n          </div>\n          <div class=\"company-block mt-3\">\n            <div class=\"company-name\">TANGO IT SOLUTIONS INDIA PRIVATE LTD</div>\n            <div>2nd Floor, Apeejay Business Centre, No.12/39,</div>\n            <div>Haddows Road, Nungambakkam</div>\n            <div>Chennai Tamil Nadu 600006, India</div>\n            <div class=\"mt-1\"><strong>GSTIN 33AAGCT3124R1Z2</strong></div>\n            <div class=\"mt-1\">MSME / Udyam type : Micro</div>\n            <div>MSME / Udyam No. : UDYAM-TN-03-0212399</div>\n          </div>\n        </div>\n        <div class=\"col-5 text-end\">\n          <div class=\"tax-invoice-label\">TAX INVOICE</div>\n          <div class=\"invoice-number\"># {{ invoiceData?.invoice }}</div>\n        </div>\n      </div>\n\n      <!-- Bill-to + totals row -->\n      <div class=\"row mt-4\">\n        <div class=\"col-7\">\n          <div class=\"bill-to-label\">BILL TO :</div>\n          <div class=\"client-name mt-1\">{{ (invoiceData?.clientName || invoiceData?.companyName) | uppercase }}</div>\n          <div class=\"mt-1\" *ngIf=\"invoiceData?.billingAddressLineOne || invoiceData?.companyAddress\">\n            {{ invoiceData?.billingAddressLineOne || invoiceData?.companyAddress }}\n          </div>\n          <div *ngIf=\"invoiceData?.billingAddressLineTwo\">{{ invoiceData?.billingAddressLineTwo }}</div>\n          <div *ngIf=\"invoiceData?.billingCity || invoiceData?.billingPinCode || invoiceData?.billingState\">\n            {{ invoiceData?.billingCity }}<span *ngIf=\"invoiceData?.billingPinCode\">, {{ invoiceData?.billingPinCode }}</span><span *ngIf=\"invoiceData?.billingState\">, {{ invoiceData?.billingState }}</span><span *ngIf=\"invoiceData?.billingCountry\">, {{ invoiceData?.billingCountry }}</span>\n          </div>\n          <div class=\"mt-2\" *ngIf=\"invoiceData?.GSTNumber\"><strong>GSTIN {{ invoiceData?.GSTNumber }}</strong></div>\n          <div *ngIf=\"invoiceData?.PlaceOfSupply\">Place Of Supply: {{ invoiceData?.PlaceOfSupply }}</div>\n        </div>\n        <div class=\"col-5 text-end\">\n          <div class=\"invoice-total-label\">Invoice Total <span class=\"invoice-total-amount\">{{ currencySymbol() }} {{ formatINR(invoiceData?.totalAmount) }}</span></div>\n          <table class=\"meta-table ms-auto mt-3\">\n            <tr><td class=\"meta-label\">Invoice date :</td><td class=\"meta-value\">{{ invoiceData?.billingDate | date:'dd/MM/yyyy' }}</td></tr>\n            <tr><td class=\"meta-label\">Terms :</td><td class=\"meta-value\">Term {{ paymentTermDays }}</td></tr>\n            <tr><td class=\"meta-label\">Due Date :</td><td class=\"meta-value\">{{ invoiceData?.dueDate | date:'dd/MM/yyyy' }}</td></tr>\n            <tr *ngIf=\"invoiceData?.purchaseOrderNumber || invoiceData?.PoNum || invoiceData?.poNumber\"><td class=\"meta-label\">P.O.# :</td><td class=\"meta-value\">{{ invoiceData?.purchaseOrderNumber || invoiceData?.PoNum || invoiceData?.poNumber }}</td></tr>\n          </table>\n        </div>\n      </div>\n\n      <!-- Line items -->\n      <table class=\"items-table mt-4\">\n        <thead>\n          <tr>\n            <th class=\"col-index\">#</th>\n            <th class=\"col-product\">Product &amp; Description</th>\n            <th class=\"col-month\">Month</th>\n            <th class=\"col-hsn\">HSN/SAC</th>\n            <th class=\"col-count text-center\">Quantity</th>\n            <th class=\"col-rate text-end\">Rate</th>\n            <th class=\"col-amount text-end\">Amount</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let item of invoiceData?.products; let i = index; trackBy: trackByIndex\">\n            <td>{{ i + 1 }}</td>\n            <td>\n              <div class=\"product-name\">{{ formatProductName(item?.productName) }}</div>\n              <div class=\"product-desc\">{{ item?.description }}</div>\n            </td>\n            <!-- Month is the product's billing month stored on the line item\n                 (advance invoices bill a future month while billingDate is the\n                 creation date). Fall back to billingDate for legacy rows. -->\n            <td class=\"nowrap\">{{ item?.month || (invoiceData?.billingDate | date:'MMM yyyy') }}</td>\n            <td>{{ item?.hsn || item?.hsnCode || '998314' }}</td>\n            <td class=\"text-center\"><strong>{{ item?.storeCount || invoiceData?.stores?.length || '' }}</strong></td>\n            <td class=\"text-end nowrap\">{{ currencySymbol() }} {{ formatINR(item?.price) }}</td>\n            <td class=\"text-end nowrap\">{{ currencySymbol() }} {{ formatINR(item?.amount) }}</td>\n          </tr>\n        </tbody>\n      </table>\n\n      <!-- Totals -->\n      <div class=\"row mt-3\">\n        <div class=\"col-7\"></div>\n        <div class=\"col-5\">\n          <table class=\"totals-table ms-auto\">\n            <tr><td class=\"totals-label\">Sub Total</td><td class=\"totals-value\">{{ currencySymbol() }} {{ formatINR(invoiceData?.amount) }}</td></tr>\n            <tr *ngIf=\"invoiceData?.discountAmount\">\n              <td class=\"totals-label\">Discount</td>\n              <td class=\"totals-value\">{{ currencySymbol() }} {{ formatINR(invoiceData?.discountAmount) }}</td>\n            </tr>\n            <ng-container *ngFor=\"let t of invoiceData?.tax\">\n              <tr *ngIf=\"hasTax(t)\">\n                <td class=\"totals-label\">{{ t?.type || t?.taxName || t?.name }} ({{ t?.value ?? t?.taxPercentage ?? t?.percentage }}%)</td>\n                <td class=\"totals-value nowrap\">{{ currencySymbol() }} {{ formatINR(t?.taxAmount) }}</td>\n              </tr>\n            </ng-container>\n            <tr class=\"totals-total-row\">\n              <td class=\"totals-label\">Total Amount</td>\n              <td class=\"totals-value\">{{ currencySymbol() }} {{ formatINR(invoiceData?.totalAmount) }}</td>\n            </tr>\n            <tr class=\"totals-words-row\">\n              <td class=\"totals-label\">Total In Words</td>\n              <td class=\"totals-value words\">{{ totalInWords }}</td>\n            </tr>\n          </table>\n        </div>\n      </div>\n\n      <!-- Payment details -->\n      <div class=\"thanks mt-4\">Thanks for your business!</div>\n      <table class=\"payment-table mt-2\">\n        <tr><td class=\"payment-label\">Beneficiary Name</td><td class=\"payment-value\"><strong>{{ bankDetails?.beneficiaryName }}</strong></td></tr>\n        <tr><td class=\"payment-label\">Account Number</td><td class=\"payment-value\"><strong>{{ bankDetails?.accountNumber }}</strong></td></tr>\n        <tr><td class=\"payment-label\">IFSC Code</td><td class=\"payment-value\"><strong>{{ bankDetails?.ifsc }}</strong></td></tr>\n        <tr><td class=\"payment-label\">Payment Type</td><td class=\"payment-value\"><strong>{{ bankDetails?.paymentType }}</strong></td></tr>\n        <tr><td class=\"payment-label\">SWIFT Code</td><td class=\"payment-value\"><strong>{{ bankDetails?.swift }}</strong></td></tr>\n        <tr><td class=\"payment-label\">Branch</td><td class=\"payment-value\"><strong>{{ bankDetails?.branch }}</strong></td></tr>\n      </table>\n\n      <div class=\"system-note mt-4\">This is a system generated invoice. No signature required</div>\n    </div>\n\n    <!-- ANNEXURE TAB -->\n    <div *ngIf=\"activeTab === 'annexure'\" class=\"annexure-page\">\n      <div *ngIf=\"annexureLoading\" class=\"loading-state\">\n        <div class=\"spinner-border text-primary\" role=\"status\"><span class=\"visually-hidden\">Loading...</span></div>\n      </div>\n      <div *ngIf=\"!annexureLoading && annexureError\" class=\"error-state\">\n        <p>Failed to load annexure.</p>\n        <button class=\"btn btn-sm btn-outline-primary\" (click)=\"retryAnnexure()\">Retry</button>\n      </div>\n      <div *ngIf=\"!annexureLoading && !annexureError && annexureData !== null && annexureData.length === 0\" class=\"empty-state\">\n        No annexure data for this invoice.\n      </div>\n      <div *ngIf=\"!annexureLoading && !annexureError && annexureData && annexureData.length > 0\"\n           class=\"annexure-toolbar\">\n        <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"downloadAnnexureXlsx()\">\n          Export as XLSX\n        </button>\n      </div>\n      <table *ngIf=\"!annexureLoading && !annexureError && annexureData && annexureData.length > 0\" class=\"annexure-table\">\n        <thead>\n          <tr>\n            <th>Store Name</th>\n            <th>Products</th>\n            <th>Store ID</th>\n            <th>Deployment Date</th>\n            <th>Period</th>\n            <th>Pricing Method</th>\n            <th class=\"text-center\">Billing Days</th>\n            <th class=\"text-center\">Qty</th>\n            <th class=\"text-end\">Unit Price</th>\n            <th class=\"text-end\">Price Per Month</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of annexureData; trackBy: trackByIndex\">\n            <td>{{ row?.storeName }}</td>\n            <td>{{ row?.productName }}</td>\n            <td>{{ row?.storeId }}</td>\n            <td>{{ row?.edgefirstFileDate }}</td>\n            <td>{{ row?.period === 'prorate' ? 'Pro-rate' : 'Full month' }}</td>\n            <td>{{ row?.unitBasis || 'Per Store' }}</td>\n            <td class=\"text-center\"><strong>{{ row?.workingdays }}</strong></td>\n            <td class=\"text-center\">{{ row?.units ?? 1 }}</td>\n            <td class=\"text-end\">\n              {{ row?.currencyType }} {{ formatINR(row?.standardPrice) }}\n              <div class=\"unit-basis\">{{ row?.unitBasis || 'Per Store' }}</div>\n            </td>\n            <td class=\"text-end\"><strong>{{ row?.currencyType }} {{ formatINR(row?.runningCost) }}</strong></td>\n          </tr>\n        </tbody>\n        <tfoot *ngIf=\"annexureTotal != null\">\n          <tr>\n            <td colspan=\"9\" class=\"text-end\"><strong>Total</strong></td>\n            <td class=\"text-end\"><strong>{{ annexureData[0]?.currencyType }} {{ formatINR(annexureTotal) }}</strong></td>\n          </tr>\n        </tfoot>\n      </table>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-link\" (click)=\"activeModal.dismiss()\">Close</button>\n    <button class=\"btn btn-outline-primary\" (click)=\"downloadPdf()\" [disabled]=\"downloading\">\n      <span *ngIf=\"!downloading\">Download PDF</span>\n      <span *ngIf=\"downloading\">Downloading...</span>\n    </button>\n  </div>\n</div>", styles: [".invoice-preview-modal{font-family:inherit;font-size:13px;color:#344054;display:flex;flex-direction:column;max-height:calc(100vh - 3.5rem)}.invoice-preview-modal .modal-header{flex:0 0 auto;padding:0 1rem;border-bottom:1px solid #EAECF0;display:flex;align-items:stretch;justify-content:space-between}.invoice-preview-modal .modal-header .preview-tabs{border-bottom:none}.invoice-preview-modal .modal-header .preview-tabs .nav-link{border:none;border-radius:0;color:#667085;padding:12px 16px;background:transparent}.invoice-preview-modal .modal-header .preview-tabs .nav-link.active{color:#00a3ff;border-bottom:2px solid #00A3FF;background:transparent}.invoice-preview-modal .modal-header .btn-close{align-self:center}.invoice-preview-modal .modal-body{background:#fff;flex:1 1 auto;overflow-y:auto;min-height:0}.invoice-preview-modal .invoice-page,.invoice-preview-modal .annexure-page{padding:32px 40px}.invoice-preview-modal .tax-invoice-label{font-size:22px;font-weight:600;color:#00a3ff}.invoice-preview-modal .invoice-number{font-size:18px;font-weight:600;color:#00a3ff}.invoice-preview-modal .company-name{font-weight:700;color:#101828}.invoice-preview-modal .bill-to-label{font-weight:600;color:#667085}.invoice-preview-modal .client-name{font-weight:700;color:#101828;font-size:15px}.invoice-preview-modal .invoice-total-label{font-weight:600;font-size:15px}.invoice-preview-modal .invoice-total-label .invoice-total-amount{color:#101828;font-weight:700;margin-left:8px}.invoice-preview-modal .meta-table td{padding:2px 8px}.invoice-preview-modal .meta-table .meta-label{color:#667085;text-align:right}.invoice-preview-modal .meta-table .meta-value{color:#101828;font-weight:600}.invoice-preview-modal .items-table{width:100%;border-collapse:collapse}.invoice-preview-modal .items-table th{background:#f2f4f7;padding:12px;font-weight:600;color:#344054;text-align:left}.invoice-preview-modal .items-table td{padding:14px 12px;border-bottom:1px solid #EAECF0;vertical-align:top}.invoice-preview-modal .items-table .product-name{font-weight:600;color:#101828}.invoice-preview-modal .items-table .product-desc{color:#667085;font-size:12px}.invoice-preview-modal .items-table .col-index{width:40px}.invoice-preview-modal .items-table .col-month,.invoice-preview-modal .items-table .col-hsn,.invoice-preview-modal .items-table .col-count{width:100px}.invoice-preview-modal .items-table .col-rate{width:110px}.invoice-preview-modal .items-table .col-amount{width:140px}.invoice-preview-modal .items-table .nowrap{white-space:nowrap}.invoice-preview-modal .totals-table{width:100%}.invoice-preview-modal .totals-table td{padding:6px 12px}.invoice-preview-modal .totals-table .totals-label{color:#667085;text-align:right}.invoice-preview-modal .totals-table .totals-value{color:#101828;font-weight:600;text-align:right}.invoice-preview-modal .totals-table .totals-total-row td{padding-top:12px}.invoice-preview-modal .totals-table .totals-total-row .totals-value{font-size:15px;font-weight:700}.invoice-preview-modal .totals-table .totals-words-row .words{font-weight:600;max-width:280px;white-space:normal;word-wrap:break-word}.invoice-preview-modal .totals-table .nowrap{white-space:nowrap}.invoice-preview-modal .thanks{font-weight:600;color:#101828}.invoice-preview-modal .payment-table{border-collapse:collapse}.invoice-preview-modal .payment-table td{padding:6px 12px}.invoice-preview-modal .payment-table .payment-label{color:#667085}.invoice-preview-modal .system-note{color:#667085;font-size:12px;font-weight:600}.invoice-preview-modal .annexure-table{width:100%;border-collapse:collapse}.invoice-preview-modal .annexure-table th{background:#f2f4f7;padding:12px;font-weight:600;color:#344054;text-align:left}.invoice-preview-modal .annexure-table td{padding:14px 12px;border-bottom:1px solid #EAECF0}.invoice-preview-modal .annexure-table .unit-basis{font-size:11px;color:#98a2b3;margin-top:2px}.invoice-preview-modal .annexure-table tfoot td{background:#f9fafb;border-top:2px solid #EAECF0;font-size:15px}.invoice-preview-modal .loading-state,.invoice-preview-modal .empty-state,.invoice-preview-modal .error-state{padding:40px;text-align:center;color:#667085}.invoice-preview-modal .modal-footer{flex:0 0 auto}.invoice-preview-modal .annexure-toolbar{display:flex;justify-content:flex-end;padding:8px 0 12px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InvoicePreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-invoice-preview', template: "<div class=\"invoice-preview-modal\">\n  <div class=\"modal-header\">\n    <ul class=\"nav nav-tabs preview-tabs\" role=\"tablist\">\n      <li class=\"nav-item\">\n        <button class=\"nav-link\" [class.active]=\"activeTab === 'invoice'\"\n                (click)=\"selectTab('invoice')\" type=\"button\">Invoice</button>\n      </li>\n      <li class=\"nav-item\">\n        <button class=\"nav-link\" [class.active]=\"activeTab === 'annexure'\"\n                (click)=\"selectTab('annexure')\" type=\"button\">Annexure</button>\n      </li>\n    </ul>\n    <button type=\"button\" class=\"btn-close\" (click)=\"activeModal.dismiss()\" aria-label=\"Close\"></button>\n  </div>\n\n  <div class=\"modal-body p-0\">\n    <!-- INVOICE TAB -->\n    <div *ngIf=\"activeTab === 'invoice'\" class=\"invoice-page\">\n      <!-- Header row -->\n      <div class=\"row align-items-start\">\n        <div class=\"col-7\">\n          <div class=\"brand\">\n            <img src=\"./assets/tango/Images/tangoeye-logo.svg\" alt=\"TangoEye\" class=\"brand-logo\" onerror=\"this.style.display='none'\">\n          </div>\n          <div class=\"company-block mt-3\">\n            <div class=\"company-name\">TANGO IT SOLUTIONS INDIA PRIVATE LTD</div>\n            <div>2nd Floor, Apeejay Business Centre, No.12/39,</div>\n            <div>Haddows Road, Nungambakkam</div>\n            <div>Chennai Tamil Nadu 600006, India</div>\n            <div class=\"mt-1\"><strong>GSTIN 33AAGCT3124R1Z2</strong></div>\n            <div class=\"mt-1\">MSME / Udyam type : Micro</div>\n            <div>MSME / Udyam No. : UDYAM-TN-03-0212399</div>\n          </div>\n        </div>\n        <div class=\"col-5 text-end\">\n          <div class=\"tax-invoice-label\">TAX INVOICE</div>\n          <div class=\"invoice-number\"># {{ invoiceData?.invoice }}</div>\n        </div>\n      </div>\n\n      <!-- Bill-to + totals row -->\n      <div class=\"row mt-4\">\n        <div class=\"col-7\">\n          <div class=\"bill-to-label\">BILL TO :</div>\n          <div class=\"client-name mt-1\">{{ (invoiceData?.clientName || invoiceData?.companyName) | uppercase }}</div>\n          <div class=\"mt-1\" *ngIf=\"invoiceData?.billingAddressLineOne || invoiceData?.companyAddress\">\n            {{ invoiceData?.billingAddressLineOne || invoiceData?.companyAddress }}\n          </div>\n          <div *ngIf=\"invoiceData?.billingAddressLineTwo\">{{ invoiceData?.billingAddressLineTwo }}</div>\n          <div *ngIf=\"invoiceData?.billingCity || invoiceData?.billingPinCode || invoiceData?.billingState\">\n            {{ invoiceData?.billingCity }}<span *ngIf=\"invoiceData?.billingPinCode\">, {{ invoiceData?.billingPinCode }}</span><span *ngIf=\"invoiceData?.billingState\">, {{ invoiceData?.billingState }}</span><span *ngIf=\"invoiceData?.billingCountry\">, {{ invoiceData?.billingCountry }}</span>\n          </div>\n          <div class=\"mt-2\" *ngIf=\"invoiceData?.GSTNumber\"><strong>GSTIN {{ invoiceData?.GSTNumber }}</strong></div>\n          <div *ngIf=\"invoiceData?.PlaceOfSupply\">Place Of Supply: {{ invoiceData?.PlaceOfSupply }}</div>\n        </div>\n        <div class=\"col-5 text-end\">\n          <div class=\"invoice-total-label\">Invoice Total <span class=\"invoice-total-amount\">{{ currencySymbol() }} {{ formatINR(invoiceData?.totalAmount) }}</span></div>\n          <table class=\"meta-table ms-auto mt-3\">\n            <tr><td class=\"meta-label\">Invoice date :</td><td class=\"meta-value\">{{ invoiceData?.billingDate | date:'dd/MM/yyyy' }}</td></tr>\n            <tr><td class=\"meta-label\">Terms :</td><td class=\"meta-value\">Term {{ paymentTermDays }}</td></tr>\n            <tr><td class=\"meta-label\">Due Date :</td><td class=\"meta-value\">{{ invoiceData?.dueDate | date:'dd/MM/yyyy' }}</td></tr>\n            <tr *ngIf=\"invoiceData?.purchaseOrderNumber || invoiceData?.PoNum || invoiceData?.poNumber\"><td class=\"meta-label\">P.O.# :</td><td class=\"meta-value\">{{ invoiceData?.purchaseOrderNumber || invoiceData?.PoNum || invoiceData?.poNumber }}</td></tr>\n          </table>\n        </div>\n      </div>\n\n      <!-- Line items -->\n      <table class=\"items-table mt-4\">\n        <thead>\n          <tr>\n            <th class=\"col-index\">#</th>\n            <th class=\"col-product\">Product &amp; Description</th>\n            <th class=\"col-month\">Month</th>\n            <th class=\"col-hsn\">HSN/SAC</th>\n            <th class=\"col-count text-center\">Quantity</th>\n            <th class=\"col-rate text-end\">Rate</th>\n            <th class=\"col-amount text-end\">Amount</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let item of invoiceData?.products; let i = index; trackBy: trackByIndex\">\n            <td>{{ i + 1 }}</td>\n            <td>\n              <div class=\"product-name\">{{ formatProductName(item?.productName) }}</div>\n              <div class=\"product-desc\">{{ item?.description }}</div>\n            </td>\n            <!-- Month is the product's billing month stored on the line item\n                 (advance invoices bill a future month while billingDate is the\n                 creation date). Fall back to billingDate for legacy rows. -->\n            <td class=\"nowrap\">{{ item?.month || (invoiceData?.billingDate | date:'MMM yyyy') }}</td>\n            <td>{{ item?.hsn || item?.hsnCode || '998314' }}</td>\n            <td class=\"text-center\"><strong>{{ item?.storeCount || invoiceData?.stores?.length || '' }}</strong></td>\n            <td class=\"text-end nowrap\">{{ currencySymbol() }} {{ formatINR(item?.price) }}</td>\n            <td class=\"text-end nowrap\">{{ currencySymbol() }} {{ formatINR(item?.amount) }}</td>\n          </tr>\n        </tbody>\n      </table>\n\n      <!-- Totals -->\n      <div class=\"row mt-3\">\n        <div class=\"col-7\"></div>\n        <div class=\"col-5\">\n          <table class=\"totals-table ms-auto\">\n            <tr><td class=\"totals-label\">Sub Total</td><td class=\"totals-value\">{{ currencySymbol() }} {{ formatINR(invoiceData?.amount) }}</td></tr>\n            <tr *ngFor=\"let t of invoiceData?.tax\">\n              <td class=\"totals-label\">{{ t?.type || t?.taxName || t?.name }} ({{ t?.value ?? t?.taxPercentage ?? t?.percentage }}%)</td>\n              <td class=\"totals-value nowrap\">{{ currencySymbol() }} {{ formatINR(t?.taxAmount) }}</td>\n            </tr>\n            <tr class=\"totals-total-row\">\n              <td class=\"totals-label\">Total Amount</td>\n              <td class=\"totals-value\">{{ currencySymbol() }} {{ formatINR(invoiceData?.totalAmount) }}</td>\n            </tr>\n            <tr class=\"totals-words-row\">\n              <td class=\"totals-label\">Total In Words</td>\n              <td class=\"totals-value words\">{{ totalInWords }}</td>\n            </tr>\n          </table>\n        </div>\n      </div>\n\n      <!-- Payment details -->\n      <div class=\"thanks mt-4\">Thanks for your business!</div>\n      <table class=\"payment-table mt-2\">\n        <tr><td class=\"payment-label\">Beneficiary Name</td><td class=\"payment-value\"><strong>{{ bankDetails?.beneficiaryName }}</strong></td></tr>\n        <tr><td class=\"payment-label\">Account Number</td><td class=\"payment-value\"><strong>{{ bankDetails?.accountNumber }}</strong></td></tr>\n        <tr><td class=\"payment-label\">IFSC Code</td><td class=\"payment-value\"><strong>{{ bankDetails?.ifsc }}</strong></td></tr>\n        <tr><td class=\"payment-label\">Payment Type</td><td class=\"payment-value\"><strong>{{ bankDetails?.paymentType }}</strong></td></tr>\n        <tr><td class=\"payment-label\">SWIFT Code</td><td class=\"payment-value\"><strong>{{ bankDetails?.swift }}</strong></td></tr>\n        <tr><td class=\"payment-label\">Branch</td><td class=\"payment-value\"><strong>{{ bankDetails?.branch }}</strong></td></tr>\n      </table>\n\n      <div class=\"system-note mt-4\">This is a system generated invoice. No signature required</div>\n    </div>\n\n    <!-- ANNEXURE TAB -->\n    <div *ngIf=\"activeTab === 'annexure'\" class=\"annexure-page\">\n      <div *ngIf=\"annexureLoading\" class=\"loading-state\">\n        <div class=\"spinner-border text-primary\" role=\"status\"><span class=\"visually-hidden\">Loading...</span></div>\n      </div>\n      <div *ngIf=\"!annexureLoading && annexureError\" class=\"error-state\">\n        <p>Failed to load annexure.</p>\n        <button class=\"btn btn-sm btn-outline-primary\" (click)=\"retryAnnexure()\">Retry</button>\n      </div>\n      <div *ngIf=\"!annexureLoading && !annexureError && annexureData !== null && annexureData.length === 0\" class=\"empty-state\">\n        No annexure data for this invoice.\n      </div>\n      <div *ngIf=\"!annexureLoading && !annexureError && annexureData && annexureData.length > 0\"\n           class=\"annexure-toolbar\">\n        <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"downloadAnnexureXlsx()\">\n          Export as XLSX\n        </button>\n      </div>\n      <table *ngIf=\"!annexureLoading && !annexureError && annexureData && annexureData.length > 0\" class=\"annexure-table\">\n        <thead>\n          <tr>\n            <th>Store Name</th>\n            <th>Products</th>\n            <th>Store ID</th>\n            <th>Deployment Date</th>\n            <th>Period</th>\n            <th>Pricing Method</th>\n            <th class=\"text-center\">Billing Days</th>\n            <th class=\"text-center\">Qty</th>\n            <th class=\"text-end\">Unit Price</th>\n            <th class=\"text-end\">Price Per Month</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of annexureData; trackBy: trackByIndex\">\n            <td>{{ row?.storeName }}</td>\n            <td>{{ row?.productName }}</td>\n            <td>{{ row?.storeId }}</td>\n            <td>{{ row?.edgefirstFileDate }}</td>\n            <td>{{ row?.period === 'prorate' ? 'Pro-rate' : 'Full month' }}</td>\n            <td>{{ row?.unitBasis || 'Per Store' }}</td>\n            <td class=\"text-center\"><strong>{{ row?.workingdays }}</strong></td>\n            <td class=\"text-center\">{{ row?.units ?? 1 }}</td>\n            <td class=\"text-end\">\n              {{ row?.currencyType }} {{ formatINR(row?.standardPrice) }}\n              <div class=\"unit-basis\">{{ row?.unitBasis || 'Per Store' }}</div>\n            </td>\n            <td class=\"text-end\"><strong>{{ row?.currencyType }} {{ formatINR(row?.runningCost) }}</strong></td>\n          </tr>\n        </tbody>\n        <tfoot *ngIf=\"annexureTotal != null\">\n          <tr>\n            <td colspan=\"9\" class=\"text-end\"><strong>Total</strong></td>\n            <td class=\"text-end\"><strong>{{ annexureData[0]?.currencyType }} {{ formatINR(annexureTotal) }}</strong></td>\n          </tr>\n        </tfoot>\n      </table>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-link\" (click)=\"activeModal.dismiss()\">Close</button>\n    <button class=\"btn btn-outline-primary\" (click)=\"downloadPdf()\" [disabled]=\"downloading\">\n      <span *ngIf=\"!downloading\">Download PDF</span>\n      <span *ngIf=\"downloading\">Downloading...</span>\n    </button>\n  </div>\n</div>", styles: [".invoice-preview-modal{font-family:inherit;font-size:13px;color:#344054;display:flex;flex-direction:column;max-height:calc(100vh - 3.5rem)}.invoice-preview-modal .modal-header{flex:0 0 auto;padding:0 1rem;border-bottom:1px solid #EAECF0;display:flex;align-items:stretch;justify-content:space-between}.invoice-preview-modal .modal-header .preview-tabs{border-bottom:none}.invoice-preview-modal .modal-header .preview-tabs .nav-link{border:none;border-radius:0;color:#667085;padding:12px 16px;background:transparent}.invoice-preview-modal .modal-header .preview-tabs .nav-link.active{color:#00a3ff;border-bottom:2px solid #00A3FF;background:transparent}.invoice-preview-modal .modal-header .btn-close{align-self:center}.invoice-preview-modal .modal-body{background:#fff;flex:1 1 auto;overflow-y:auto;min-height:0}.invoice-preview-modal .invoice-page,.invoice-preview-modal .annexure-page{padding:32px 40px}.invoice-preview-modal .tax-invoice-label{font-size:22px;font-weight:600;color:#00a3ff}.invoice-preview-modal .invoice-number{font-size:18px;font-weight:600;color:#00a3ff}.invoice-preview-modal .company-name{font-weight:700;color:#101828}.invoice-preview-modal .bill-to-label{font-weight:600;color:#667085}.invoice-preview-modal .client-name{font-weight:700;color:#101828;font-size:15px}.invoice-preview-modal .invoice-total-label{font-weight:600;font-size:15px}.invoice-preview-modal .invoice-total-label .invoice-total-amount{color:#101828;font-weight:700;margin-left:8px}.invoice-preview-modal .meta-table td{padding:2px 8px}.invoice-preview-modal .meta-table .meta-label{color:#667085;text-align:right}.invoice-preview-modal .meta-table .meta-value{color:#101828;font-weight:600}.invoice-preview-modal .items-table{width:100%;border-collapse:collapse}.invoice-preview-modal .items-table th{background:#f2f4f7;padding:12px;font-weight:600;color:#344054;text-align:left}.invoice-preview-modal .items-table td{padding:14px 12px;border-bottom:1px solid #EAECF0;vertical-align:top}.invoice-preview-modal .items-table .product-name{font-weight:600;color:#101828}.invoice-preview-modal .items-table .product-desc{color:#667085;font-size:12px}.invoice-preview-modal .items-table .col-index{width:40px}.invoice-preview-modal .items-table .col-month,.invoice-preview-modal .items-table .col-hsn,.invoice-preview-modal .items-table .col-count{width:100px}.invoice-preview-modal .items-table .col-rate{width:110px}.invoice-preview-modal .items-table .col-amount{width:140px}.invoice-preview-modal .items-table .nowrap{white-space:nowrap}.invoice-preview-modal .totals-table{width:100%}.invoice-preview-modal .totals-table td{padding:6px 12px}.invoice-preview-modal .totals-table .totals-label{color:#667085;text-align:right}.invoice-preview-modal .totals-table .totals-value{color:#101828;font-weight:600;text-align:right}.invoice-preview-modal .totals-table .totals-total-row td{padding-top:12px}.invoice-preview-modal .totals-table .totals-total-row .totals-value{font-size:15px;font-weight:700}.invoice-preview-modal .totals-table .totals-words-row .words{font-weight:600;max-width:280px;white-space:normal;word-wrap:break-word}.invoice-preview-modal .totals-table .nowrap{white-space:nowrap}.invoice-preview-modal .thanks{font-weight:600;color:#101828}.invoice-preview-modal .payment-table{border-collapse:collapse}.invoice-preview-modal .payment-table td{padding:6px 12px}.invoice-preview-modal .payment-table .payment-label{color:#667085}.invoice-preview-modal .system-note{color:#667085;font-size:12px;font-weight:600}.invoice-preview-modal .annexure-table{width:100%;border-collapse:collapse}.invoice-preview-modal .annexure-table th{background:#f2f4f7;padding:12px;font-weight:600;color:#344054;text-align:left}.invoice-preview-modal .annexure-table td{padding:14px 12px;border-bottom:1px solid #EAECF0}.invoice-preview-modal .annexure-table .unit-basis{font-size:11px;color:#98a2b3;margin-top:2px}.invoice-preview-modal .annexure-table tfoot td{background:#f9fafb;border-top:2px solid #EAECF0;font-size:15px}.invoice-preview-modal .loading-state,.invoice-preview-modal .empty-state,.invoice-preview-modal .error-state{padding:40px;text-align:center;color:#667085}.invoice-preview-modal .modal-footer{flex:0 0 auto}.invoice-preview-modal .annexure-toolbar{display:flex;justify-content:flex-end;padding:8px 0 12px}\n"] }]
+            args: [{ selector: 'lib-invoice-preview', template: "<div class=\"invoice-preview-modal\">\n  <div class=\"modal-header\">\n    <ul class=\"nav nav-tabs preview-tabs\" role=\"tablist\">\n      <li class=\"nav-item\">\n        <button class=\"nav-link\" [class.active]=\"activeTab === 'invoice'\"\n                (click)=\"selectTab('invoice')\" type=\"button\">Invoice</button>\n      </li>\n      <li class=\"nav-item\">\n        <button class=\"nav-link\" [class.active]=\"activeTab === 'annexure'\"\n                (click)=\"selectTab('annexure')\" type=\"button\">Annexure</button>\n      </li>\n    </ul>\n    <button type=\"button\" class=\"btn-close\" (click)=\"activeModal.dismiss()\" aria-label=\"Close\"></button>\n  </div>\n\n  <div class=\"modal-body p-0\">\n    <!-- INVOICE TAB -->\n    <div *ngIf=\"activeTab === 'invoice'\" class=\"invoice-page\">\n      <!-- Header row -->\n      <div class=\"row align-items-start\">\n        <div class=\"col-7\">\n          <div class=\"brand\">\n            <img src=\"./assets/tango/Images/tangoeye-logo.svg\" alt=\"TangoEye\" class=\"brand-logo\" onerror=\"this.style.display='none'\">\n          </div>\n          <div class=\"company-block mt-3\">\n            <div class=\"company-name\">TANGO IT SOLUTIONS INDIA PRIVATE LTD</div>\n            <div>2nd Floor, Apeejay Business Centre, No.12/39,</div>\n            <div>Haddows Road, Nungambakkam</div>\n            <div>Chennai Tamil Nadu 600006, India</div>\n            <div class=\"mt-1\"><strong>GSTIN 33AAGCT3124R1Z2</strong></div>\n            <div class=\"mt-1\">MSME / Udyam type : Micro</div>\n            <div>MSME / Udyam No. : UDYAM-TN-03-0212399</div>\n          </div>\n        </div>\n        <div class=\"col-5 text-end\">\n          <div class=\"tax-invoice-label\">TAX INVOICE</div>\n          <div class=\"invoice-number\"># {{ invoiceData?.invoice }}</div>\n        </div>\n      </div>\n\n      <!-- Bill-to + totals row -->\n      <div class=\"row mt-4\">\n        <div class=\"col-7\">\n          <div class=\"bill-to-label\">BILL TO :</div>\n          <div class=\"client-name mt-1\">{{ (invoiceData?.clientName || invoiceData?.companyName) | uppercase }}</div>\n          <div class=\"mt-1\" *ngIf=\"invoiceData?.billingAddressLineOne || invoiceData?.companyAddress\">\n            {{ invoiceData?.billingAddressLineOne || invoiceData?.companyAddress }}\n          </div>\n          <div *ngIf=\"invoiceData?.billingAddressLineTwo\">{{ invoiceData?.billingAddressLineTwo }}</div>\n          <div *ngIf=\"invoiceData?.billingCity || invoiceData?.billingPinCode || invoiceData?.billingState\">\n            {{ invoiceData?.billingCity }}<span *ngIf=\"invoiceData?.billingPinCode\">, {{ invoiceData?.billingPinCode }}</span><span *ngIf=\"invoiceData?.billingState\">, {{ invoiceData?.billingState }}</span><span *ngIf=\"invoiceData?.billingCountry\">, {{ invoiceData?.billingCountry }}</span>\n          </div>\n          <div class=\"mt-2\" *ngIf=\"invoiceData?.GSTNumber\"><strong>GSTIN {{ invoiceData?.GSTNumber }}</strong></div>\n          <div *ngIf=\"invoiceData?.PlaceOfSupply\">Place Of Supply: {{ invoiceData?.PlaceOfSupply }}</div>\n        </div>\n        <div class=\"col-5 text-end\">\n          <div class=\"invoice-total-label\">Invoice Total <span class=\"invoice-total-amount\">{{ currencySymbol() }} {{ formatINR(invoiceData?.totalAmount) }}</span></div>\n          <table class=\"meta-table ms-auto mt-3\">\n            <tr><td class=\"meta-label\">Invoice date :</td><td class=\"meta-value\">{{ invoiceData?.billingDate | date:'dd/MM/yyyy' }}</td></tr>\n            <tr><td class=\"meta-label\">Terms :</td><td class=\"meta-value\">Term {{ paymentTermDays }}</td></tr>\n            <tr><td class=\"meta-label\">Due Date :</td><td class=\"meta-value\">{{ invoiceData?.dueDate | date:'dd/MM/yyyy' }}</td></tr>\n            <tr *ngIf=\"invoiceData?.purchaseOrderNumber || invoiceData?.PoNum || invoiceData?.poNumber\"><td class=\"meta-label\">P.O.# :</td><td class=\"meta-value\">{{ invoiceData?.purchaseOrderNumber || invoiceData?.PoNum || invoiceData?.poNumber }}</td></tr>\n          </table>\n        </div>\n      </div>\n\n      <!-- Line items -->\n      <table class=\"items-table mt-4\">\n        <thead>\n          <tr>\n            <th class=\"col-index\">#</th>\n            <th class=\"col-product\">Product &amp; Description</th>\n            <th class=\"col-month\">Month</th>\n            <th class=\"col-hsn\">HSN/SAC</th>\n            <th class=\"col-count text-center\">Quantity</th>\n            <th class=\"col-rate text-end\">Rate</th>\n            <th class=\"col-amount text-end\">Amount</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let item of invoiceData?.products; let i = index; trackBy: trackByIndex\">\n            <td>{{ i + 1 }}</td>\n            <td>\n              <div class=\"product-name\">{{ formatProductName(item?.productName) }}</div>\n              <div class=\"product-desc\">{{ item?.description }}</div>\n            </td>\n            <!-- Month is the product's billing month stored on the line item\n                 (advance invoices bill a future month while billingDate is the\n                 creation date). Fall back to billingDate for legacy rows. -->\n            <td class=\"nowrap\">{{ item?.month || (invoiceData?.billingDate | date:'MMM yyyy') }}</td>\n            <td>{{ item?.hsn || item?.hsnCode || '998314' }}</td>\n            <td class=\"text-center\"><strong>{{ item?.storeCount || invoiceData?.stores?.length || '' }}</strong></td>\n            <td class=\"text-end nowrap\">{{ currencySymbol() }} {{ formatINR(item?.price) }}</td>\n            <td class=\"text-end nowrap\">{{ currencySymbol() }} {{ formatINR(item?.amount) }}</td>\n          </tr>\n        </tbody>\n      </table>\n\n      <!-- Totals -->\n      <div class=\"row mt-3\">\n        <div class=\"col-7\"></div>\n        <div class=\"col-5\">\n          <table class=\"totals-table ms-auto\">\n            <tr><td class=\"totals-label\">Sub Total</td><td class=\"totals-value\">{{ currencySymbol() }} {{ formatINR(invoiceData?.amount) }}</td></tr>\n            <tr *ngIf=\"invoiceData?.discountAmount\">\n              <td class=\"totals-label\">Discount</td>\n              <td class=\"totals-value\">{{ currencySymbol() }} {{ formatINR(invoiceData?.discountAmount) }}</td>\n            </tr>\n            <ng-container *ngFor=\"let t of invoiceData?.tax\">\n              <tr *ngIf=\"hasTax(t)\">\n                <td class=\"totals-label\">{{ t?.type || t?.taxName || t?.name }} ({{ t?.value ?? t?.taxPercentage ?? t?.percentage }}%)</td>\n                <td class=\"totals-value nowrap\">{{ currencySymbol() }} {{ formatINR(t?.taxAmount) }}</td>\n              </tr>\n            </ng-container>\n            <tr class=\"totals-total-row\">\n              <td class=\"totals-label\">Total Amount</td>\n              <td class=\"totals-value\">{{ currencySymbol() }} {{ formatINR(invoiceData?.totalAmount) }}</td>\n            </tr>\n            <tr class=\"totals-words-row\">\n              <td class=\"totals-label\">Total In Words</td>\n              <td class=\"totals-value words\">{{ totalInWords }}</td>\n            </tr>\n          </table>\n        </div>\n      </div>\n\n      <!-- Payment details -->\n      <div class=\"thanks mt-4\">Thanks for your business!</div>\n      <table class=\"payment-table mt-2\">\n        <tr><td class=\"payment-label\">Beneficiary Name</td><td class=\"payment-value\"><strong>{{ bankDetails?.beneficiaryName }}</strong></td></tr>\n        <tr><td class=\"payment-label\">Account Number</td><td class=\"payment-value\"><strong>{{ bankDetails?.accountNumber }}</strong></td></tr>\n        <tr><td class=\"payment-label\">IFSC Code</td><td class=\"payment-value\"><strong>{{ bankDetails?.ifsc }}</strong></td></tr>\n        <tr><td class=\"payment-label\">Payment Type</td><td class=\"payment-value\"><strong>{{ bankDetails?.paymentType }}</strong></td></tr>\n        <tr><td class=\"payment-label\">SWIFT Code</td><td class=\"payment-value\"><strong>{{ bankDetails?.swift }}</strong></td></tr>\n        <tr><td class=\"payment-label\">Branch</td><td class=\"payment-value\"><strong>{{ bankDetails?.branch }}</strong></td></tr>\n      </table>\n\n      <div class=\"system-note mt-4\">This is a system generated invoice. No signature required</div>\n    </div>\n\n    <!-- ANNEXURE TAB -->\n    <div *ngIf=\"activeTab === 'annexure'\" class=\"annexure-page\">\n      <div *ngIf=\"annexureLoading\" class=\"loading-state\">\n        <div class=\"spinner-border text-primary\" role=\"status\"><span class=\"visually-hidden\">Loading...</span></div>\n      </div>\n      <div *ngIf=\"!annexureLoading && annexureError\" class=\"error-state\">\n        <p>Failed to load annexure.</p>\n        <button class=\"btn btn-sm btn-outline-primary\" (click)=\"retryAnnexure()\">Retry</button>\n      </div>\n      <div *ngIf=\"!annexureLoading && !annexureError && annexureData !== null && annexureData.length === 0\" class=\"empty-state\">\n        No annexure data for this invoice.\n      </div>\n      <div *ngIf=\"!annexureLoading && !annexureError && annexureData && annexureData.length > 0\"\n           class=\"annexure-toolbar\">\n        <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"downloadAnnexureXlsx()\">\n          Export as XLSX\n        </button>\n      </div>\n      <table *ngIf=\"!annexureLoading && !annexureError && annexureData && annexureData.length > 0\" class=\"annexure-table\">\n        <thead>\n          <tr>\n            <th>Store Name</th>\n            <th>Products</th>\n            <th>Store ID</th>\n            <th>Deployment Date</th>\n            <th>Period</th>\n            <th>Pricing Method</th>\n            <th class=\"text-center\">Billing Days</th>\n            <th class=\"text-center\">Qty</th>\n            <th class=\"text-end\">Unit Price</th>\n            <th class=\"text-end\">Price Per Month</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of annexureData; trackBy: trackByIndex\">\n            <td>{{ row?.storeName }}</td>\n            <td>{{ row?.productName }}</td>\n            <td>{{ row?.storeId }}</td>\n            <td>{{ row?.edgefirstFileDate }}</td>\n            <td>{{ row?.period === 'prorate' ? 'Pro-rate' : 'Full month' }}</td>\n            <td>{{ row?.unitBasis || 'Per Store' }}</td>\n            <td class=\"text-center\"><strong>{{ row?.workingdays }}</strong></td>\n            <td class=\"text-center\">{{ row?.units ?? 1 }}</td>\n            <td class=\"text-end\">\n              {{ row?.currencyType }} {{ formatINR(row?.standardPrice) }}\n              <div class=\"unit-basis\">{{ row?.unitBasis || 'Per Store' }}</div>\n            </td>\n            <td class=\"text-end\"><strong>{{ row?.currencyType }} {{ formatINR(row?.runningCost) }}</strong></td>\n          </tr>\n        </tbody>\n        <tfoot *ngIf=\"annexureTotal != null\">\n          <tr>\n            <td colspan=\"9\" class=\"text-end\"><strong>Total</strong></td>\n            <td class=\"text-end\"><strong>{{ annexureData[0]?.currencyType }} {{ formatINR(annexureTotal) }}</strong></td>\n          </tr>\n        </tfoot>\n      </table>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-link\" (click)=\"activeModal.dismiss()\">Close</button>\n    <button class=\"btn btn-outline-primary\" (click)=\"downloadPdf()\" [disabled]=\"downloading\">\n      <span *ngIf=\"!downloading\">Download PDF</span>\n      <span *ngIf=\"downloading\">Downloading...</span>\n    </button>\n  </div>\n</div>", styles: [".invoice-preview-modal{font-family:inherit;font-size:13px;color:#344054;display:flex;flex-direction:column;max-height:calc(100vh - 3.5rem)}.invoice-preview-modal .modal-header{flex:0 0 auto;padding:0 1rem;border-bottom:1px solid #EAECF0;display:flex;align-items:stretch;justify-content:space-between}.invoice-preview-modal .modal-header .preview-tabs{border-bottom:none}.invoice-preview-modal .modal-header .preview-tabs .nav-link{border:none;border-radius:0;color:#667085;padding:12px 16px;background:transparent}.invoice-preview-modal .modal-header .preview-tabs .nav-link.active{color:#00a3ff;border-bottom:2px solid #00A3FF;background:transparent}.invoice-preview-modal .modal-header .btn-close{align-self:center}.invoice-preview-modal .modal-body{background:#fff;flex:1 1 auto;overflow-y:auto;min-height:0}.invoice-preview-modal .invoice-page,.invoice-preview-modal .annexure-page{padding:32px 40px}.invoice-preview-modal .tax-invoice-label{font-size:22px;font-weight:600;color:#00a3ff}.invoice-preview-modal .invoice-number{font-size:18px;font-weight:600;color:#00a3ff}.invoice-preview-modal .company-name{font-weight:700;color:#101828}.invoice-preview-modal .bill-to-label{font-weight:600;color:#667085}.invoice-preview-modal .client-name{font-weight:700;color:#101828;font-size:15px}.invoice-preview-modal .invoice-total-label{font-weight:600;font-size:15px}.invoice-preview-modal .invoice-total-label .invoice-total-amount{color:#101828;font-weight:700;margin-left:8px}.invoice-preview-modal .meta-table td{padding:2px 8px}.invoice-preview-modal .meta-table .meta-label{color:#667085;text-align:right}.invoice-preview-modal .meta-table .meta-value{color:#101828;font-weight:600}.invoice-preview-modal .items-table{width:100%;border-collapse:collapse}.invoice-preview-modal .items-table th{background:#f2f4f7;padding:12px;font-weight:600;color:#344054;text-align:left}.invoice-preview-modal .items-table td{padding:14px 12px;border-bottom:1px solid #EAECF0;vertical-align:top}.invoice-preview-modal .items-table .product-name{font-weight:600;color:#101828}.invoice-preview-modal .items-table .product-desc{color:#667085;font-size:12px}.invoice-preview-modal .items-table .col-index{width:40px}.invoice-preview-modal .items-table .col-month,.invoice-preview-modal .items-table .col-hsn,.invoice-preview-modal .items-table .col-count{width:100px}.invoice-preview-modal .items-table .col-rate{width:110px}.invoice-preview-modal .items-table .col-amount{width:140px}.invoice-preview-modal .items-table .nowrap{white-space:nowrap}.invoice-preview-modal .totals-table{width:100%}.invoice-preview-modal .totals-table td{padding:6px 12px}.invoice-preview-modal .totals-table .totals-label{color:#667085;text-align:right}.invoice-preview-modal .totals-table .totals-value{color:#101828;font-weight:600;text-align:right}.invoice-preview-modal .totals-table .totals-total-row td{padding-top:12px}.invoice-preview-modal .totals-table .totals-total-row .totals-value{font-size:15px;font-weight:700}.invoice-preview-modal .totals-table .totals-words-row .words{font-weight:600;max-width:280px;white-space:normal;word-wrap:break-word}.invoice-preview-modal .totals-table .nowrap{white-space:nowrap}.invoice-preview-modal .thanks{font-weight:600;color:#101828}.invoice-preview-modal .payment-table{border-collapse:collapse}.invoice-preview-modal .payment-table td{padding:6px 12px}.invoice-preview-modal .payment-table .payment-label{color:#667085}.invoice-preview-modal .system-note{color:#667085;font-size:12px;font-weight:600}.invoice-preview-modal .annexure-table{width:100%;border-collapse:collapse}.invoice-preview-modal .annexure-table th{background:#f2f4f7;padding:12px;font-weight:600;color:#344054;text-align:left}.invoice-preview-modal .annexure-table td{padding:14px 12px;border-bottom:1px solid #EAECF0}.invoice-preview-modal .annexure-table .unit-basis{font-size:11px;color:#98a2b3;margin-top:2px}.invoice-preview-modal .annexure-table tfoot td{background:#f9fafb;border-top:2px solid #EAECF0;font-size:15px}.invoice-preview-modal .loading-state,.invoice-preview-modal .empty-state,.invoice-preview-modal .error-state{padding:40px;text-align:center;color:#667085}.invoice-preview-modal .modal-footer{flex:0 0 auto}.invoice-preview-modal .annexure-toolbar{display:flex;justify-content:flex-end;padding:8px 0 12px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgbActiveModal }, { type: BillingService }, { type: i2$1.ToastService }], propDecorators: { invoiceData: [{
                 type: Input
             }] } });
@@ -6898,14 +6907,14 @@ class CreditNoteComponent {
             invoicetype: ['', Validators.required],
             totalAmount: ['', Validators.required],
             revisedAmount: ['', Validators.required],
-            discount: ['', [Validators.required, Validators.max(10)]],
+            discount: ['', [Validators.required]],
         });
         this.creditnoteform.get('revisedAmount')?.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((e) => {
             if (e) {
                 this.totalAmount = this.creditnoteform.get('totalAmount')?.value;
                 this.discount = ((this.totalAmount - e) / this.totalAmount * 100).toFixed(2);
                 this.revisedAmount = e;
-                if (this.discount > 10 || isNaN(e) || this.discount < 0 || e < 0) {
+                if (isNaN(e) || this.discount < 0 || e < 0) {
                     this.moreThanTenPercent = true;
                 }
                 else {
@@ -6929,7 +6938,7 @@ class CreditNoteComponent {
                 this.revisedAmount = this.totalAmount * (1 - e / 100);
                 this.revisedAmount = parseInt(this.revisedAmount.toFixed());
                 this.discount = e;
-                if (this.discount > 10 || isNaN(e) || e < 0 || this.revisedAmount < 0) {
+                if (isNaN(e) || e < 0 || this.revisedAmount < 0) {
                     this.moreThanTenPercent = true;
                 }
                 else {
@@ -7006,11 +7015,11 @@ class CreditNoteComponent {
         this.invoicetypedropDown = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreditNoteComponent, deps: [{ token: i1$1.NgbActiveModal }, { token: PaymentSubscriptionService }, { token: i0.ChangeDetectorRef }, { token: i5.FormBuilder }, { token: i2$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CreditNoteComponent, selector: "lib-ps-credit-note", inputs: { clientId: "clientId", transactionvalue: "transactionvalue" }, outputs: { passEntry: "passEntry" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"modal-content\">\r\n    <div class=\"p-5 px-6\">\r\n        <div><img src=\"./assets/tango/custompopup-Icons/plus-icon.svg\" alt=\"\"></div>\r\n        <div class=\"heading mt-4 ms-1\">Add Credit Note</div>\r\n        <div class=\"contenttext mt-4\">\r\n            You have the flexibility to select a month in which the brand can make credit payments.\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"modal-body mb-8\">\r\n        <!--begin::Form-->\r\n        <form [formGroup]=\"creditnoteform\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n\r\n            <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n                <div class=\"form-group py-2\">\r\n                    <label for=\"invoicetype\" class=\"headingtext mb-2\">Invoice ID</label>\r\n                    <div class=\"position-relative\">\r\n                        <div class=\"form-select dropselect\" id=\"invoicetype\"\r\n                            (click)=\"invoicetypeDropdown($event)\"\r\n                            aria-label=\"Default select example\">{{invoiceIssue}}</div>\r\n                        <div *ngIf=\"invoicetypedropDown\"\r\n                            class=\"card py-2 w-100 invoiceidselect position-absolute end-0 z-1 invoiceDropDown\">\r\n                            <ul *ngFor=\"let item of invoiceitem\"\r\n                                class=\"list-unstyled mb-2\">\r\n                                <li [ngClass]=\"this.invoiceIssue === item?.invoice ? 'active' : ''\"\r\n                                    class=\"producttext px-5 items cursor-pointer py-4\"\r\n                                    (click)=\"invoiceItem(item)\">\r\n                                    {{item?.invoice}}\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div for=\"totalAmount\" class=\"form-group py-2\">\r\n                    <label class=\" headingtext mb-2 \">Total Amount</label>\r\n                    <div class=\"input-group\">\r\n                        <span class=\"dollar-sign totalamount\">\u20B9</span><input formControlName=\"totalAmount\" type=\"text\" readonly class=\"ng-pristine ng-invalid ng-touched totalamount\"\r\n                        style=\"text-transform: capitalize;\"></div>\r\n\r\n                </div>\r\n                <div for=\"revisedAmount\" class=\"form-group mt-2\">\r\n                    <div class=\"py-2\">\r\n                        <label class=\" headingtext mb-2\"> Revised Amount</label>\r\n                        <div class=\"input-group dropselect\">\r\n                            <span class=\"dollar-sign\">\u20B9</span><input type=\"text\" formControlName=\"revisedAmount\"  [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\"\r\n                            style=\"text-transform: capitalize;\">\r\n                            <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_7513_36689)\">\r\n                                <path d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </g>\r\n                                <defs>\r\n                                <clipPath id=\"clip0_7513_36689\">\r\n                                <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n                                </clipPath>\r\n                                </defs>\r\n                                </svg></span></div>\r\n                    </div>\r\n                    <span *ngIf=\"!moreThanTenPercent\"  class=\"headingtext contenttext\">More than 10% can\u2019t be revised from total amount</span>\r\n                    <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">More than 10% can\u2019t be revised from total amount</span>\r\n                </div>\r\n                <div for=\"discount\" class=\"form-group mt-2\">\r\n                <div class=\"py-2\">\r\n                    <label class=\" headingtext mb-2\"> Discount</label>\r\n                    <div class=\"input-group\">  <input type=\"text\" formControlName=\"discount\" class=\"totalamount\" [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\" >\r\n                        <span class=\"icon\" *ngIf=\"!moreThanTenPercent\" >\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#98A2B3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span>\r\n                    <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg></span>\r\n                        </div>\r\n                </div>\r\n                <span *ngIf=\"!moreThanTenPercent\"  class=\"headingtext contenttext\">In percentage</span>\r\n                <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">In percentage</span>\r\n            </div>\r\n        </div>\r\n            <div class=\"d-flex mt-5\">\r\n                <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n                <button [disabled]=\"moreThanTenPercent\" type=\"button\" (click)=\"successcredit()\" tabindex=\"0\" \r\n                    class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n                        class=\"submit\">Apply </span></button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}input{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.cancel{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-900, #101828)!important;font-family:Inter;font-size:16px!important;font-weight:400!important;line-height:24px;height:45px!important}.totalamount{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-weight:400;line-height:24px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400!important;line-height:24px}.input-group input[type=text]{padding-left:30px}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:14px!important;font-weight:400;line-height:20px}.input-group{position:relative}.input-group>.icon{position:absolute;top:43%;right:16px;transform:translateY(-50%);color:silver}.input-group>input{padding-left:calc(1em + 18px)}.spritesheet{display:none}.icon{display:inline-block;width:16px!important;height:16px!important}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}.invoiceDropDown{min-height:auto!important;max-height:170px!important;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CreditNoteComponent, selector: "lib-ps-credit-note", inputs: { clientId: "clientId", transactionvalue: "transactionvalue" }, outputs: { passEntry: "passEntry" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"modal-content\">\r\n    <div class=\"p-5 px-6\">\r\n        <div><img src=\"./assets/tango/custompopup-Icons/plus-icon.svg\" alt=\"\"></div>\r\n        <div class=\"heading mt-4 ms-1\">Add Credit Note</div>\r\n        <div class=\"contenttext mt-4\">\r\n            You have the flexibility to select a month in which the brand can make credit payments.\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"modal-body mb-8\">\r\n        <!--begin::Form-->\r\n        <form [formGroup]=\"creditnoteform\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n\r\n            <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n                <div class=\"form-group py-2\">\r\n                    <label for=\"invoicetype\" class=\"headingtext mb-2\">Invoice ID</label>\r\n                    <div class=\"position-relative\">\r\n                        <div class=\"form-select dropselect\" id=\"invoicetype\"\r\n                            (click)=\"invoicetypeDropdown($event)\"\r\n                            aria-label=\"Default select example\">{{invoiceIssue}}</div>\r\n                        <div *ngIf=\"invoicetypedropDown\"\r\n                            class=\"card py-2 w-100 invoiceidselect position-absolute end-0 z-1 invoiceDropDown\">\r\n                            <ul *ngFor=\"let item of invoiceitem\"\r\n                                class=\"list-unstyled mb-2\">\r\n                                <li [ngClass]=\"this.invoiceIssue === item?.invoice ? 'active' : ''\"\r\n                                    class=\"producttext px-5 items cursor-pointer py-4\"\r\n                                    (click)=\"invoiceItem(item)\">\r\n                                    {{item?.invoice}}\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div for=\"totalAmount\" class=\"form-group py-2\">\r\n                    <label class=\" headingtext mb-2 \">Total Amount</label>\r\n                    <div class=\"input-group\">\r\n                        <span class=\"dollar-sign totalamount\">\u20B9</span><input formControlName=\"totalAmount\" type=\"text\" readonly class=\"ng-pristine ng-invalid ng-touched totalamount\"\r\n                        style=\"text-transform: capitalize;\"></div>\r\n\r\n                </div>\r\n                <div for=\"revisedAmount\" class=\"form-group mt-2\">\r\n                    <div class=\"py-2\">\r\n                        <label class=\" headingtext mb-2\"> Revised Amount</label>\r\n                        <div class=\"input-group dropselect\">\r\n                            <span class=\"dollar-sign\">\u20B9</span><input type=\"text\" formControlName=\"revisedAmount\"  [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\"\r\n                            style=\"text-transform: capitalize;\">\r\n                            <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_7513_36689)\">\r\n                                <path d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </g>\r\n                                <defs>\r\n                                <clipPath id=\"clip0_7513_36689\">\r\n                                <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n                                </clipPath>\r\n                                </defs>\r\n                                </svg></span></div>\r\n                    </div>\r\n                    <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">Enter a valid revised amount</span>\r\n                </div>\r\n                <div for=\"discount\" class=\"form-group mt-2\">\r\n                <div class=\"py-2\">\r\n                    <label class=\" headingtext mb-2\"> Discount</label>\r\n                    <div class=\"input-group\">  <input type=\"text\" formControlName=\"discount\" class=\"totalamount\" [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\" >\r\n                        <span class=\"icon\" *ngIf=\"!moreThanTenPercent\" >\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#98A2B3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span>\r\n                    <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg></span>\r\n                        </div>\r\n                </div>\r\n                <span *ngIf=\"!moreThanTenPercent\"  class=\"headingtext contenttext\">In percentage</span>\r\n                <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">In percentage</span>\r\n            </div>\r\n        </div>\r\n            <div class=\"d-flex mt-5\">\r\n                <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n                <button [disabled]=\"moreThanTenPercent\" type=\"button\" (click)=\"successcredit()\" tabindex=\"0\" \r\n                    class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n                        class=\"submit\">Apply </span></button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}input{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.cancel{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-900, #101828)!important;font-family:Inter;font-size:16px!important;font-weight:400!important;line-height:24px;height:45px!important}.totalamount{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-weight:400;line-height:24px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400!important;line-height:24px}.input-group input[type=text]{padding-left:30px}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:14px!important;font-weight:400;line-height:20px}.input-group{position:relative}.input-group>.icon{position:absolute;top:43%;right:16px;transform:translateY(-50%);color:silver}.input-group>input{padding-left:calc(1em + 18px)}.spritesheet{display:none}.icon{display:inline-block;width:16px!important;height:16px!important}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}.invoiceDropDown{min-height:auto!important;max-height:170px!important;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreditNoteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-ps-credit-note', template: "<div class=\"modal-content\">\r\n    <div class=\"p-5 px-6\">\r\n        <div><img src=\"./assets/tango/custompopup-Icons/plus-icon.svg\" alt=\"\"></div>\r\n        <div class=\"heading mt-4 ms-1\">Add Credit Note</div>\r\n        <div class=\"contenttext mt-4\">\r\n            You have the flexibility to select a month in which the brand can make credit payments.\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"modal-body mb-8\">\r\n        <!--begin::Form-->\r\n        <form [formGroup]=\"creditnoteform\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n\r\n            <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n                <div class=\"form-group py-2\">\r\n                    <label for=\"invoicetype\" class=\"headingtext mb-2\">Invoice ID</label>\r\n                    <div class=\"position-relative\">\r\n                        <div class=\"form-select dropselect\" id=\"invoicetype\"\r\n                            (click)=\"invoicetypeDropdown($event)\"\r\n                            aria-label=\"Default select example\">{{invoiceIssue}}</div>\r\n                        <div *ngIf=\"invoicetypedropDown\"\r\n                            class=\"card py-2 w-100 invoiceidselect position-absolute end-0 z-1 invoiceDropDown\">\r\n                            <ul *ngFor=\"let item of invoiceitem\"\r\n                                class=\"list-unstyled mb-2\">\r\n                                <li [ngClass]=\"this.invoiceIssue === item?.invoice ? 'active' : ''\"\r\n                                    class=\"producttext px-5 items cursor-pointer py-4\"\r\n                                    (click)=\"invoiceItem(item)\">\r\n                                    {{item?.invoice}}\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div for=\"totalAmount\" class=\"form-group py-2\">\r\n                    <label class=\" headingtext mb-2 \">Total Amount</label>\r\n                    <div class=\"input-group\">\r\n                        <span class=\"dollar-sign totalamount\">\u20B9</span><input formControlName=\"totalAmount\" type=\"text\" readonly class=\"ng-pristine ng-invalid ng-touched totalamount\"\r\n                        style=\"text-transform: capitalize;\"></div>\r\n\r\n                </div>\r\n                <div for=\"revisedAmount\" class=\"form-group mt-2\">\r\n                    <div class=\"py-2\">\r\n                        <label class=\" headingtext mb-2\"> Revised Amount</label>\r\n                        <div class=\"input-group dropselect\">\r\n                            <span class=\"dollar-sign\">\u20B9</span><input type=\"text\" formControlName=\"revisedAmount\"  [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\"\r\n                            style=\"text-transform: capitalize;\">\r\n                            <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_7513_36689)\">\r\n                                <path d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </g>\r\n                                <defs>\r\n                                <clipPath id=\"clip0_7513_36689\">\r\n                                <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n                                </clipPath>\r\n                                </defs>\r\n                                </svg></span></div>\r\n                    </div>\r\n                    <span *ngIf=\"!moreThanTenPercent\"  class=\"headingtext contenttext\">More than 10% can\u2019t be revised from total amount</span>\r\n                    <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">More than 10% can\u2019t be revised from total amount</span>\r\n                </div>\r\n                <div for=\"discount\" class=\"form-group mt-2\">\r\n                <div class=\"py-2\">\r\n                    <label class=\" headingtext mb-2\"> Discount</label>\r\n                    <div class=\"input-group\">  <input type=\"text\" formControlName=\"discount\" class=\"totalamount\" [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\" >\r\n                        <span class=\"icon\" *ngIf=\"!moreThanTenPercent\" >\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#98A2B3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span>\r\n                    <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg></span>\r\n                        </div>\r\n                </div>\r\n                <span *ngIf=\"!moreThanTenPercent\"  class=\"headingtext contenttext\">In percentage</span>\r\n                <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">In percentage</span>\r\n            </div>\r\n        </div>\r\n            <div class=\"d-flex mt-5\">\r\n                <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n                <button [disabled]=\"moreThanTenPercent\" type=\"button\" (click)=\"successcredit()\" tabindex=\"0\" \r\n                    class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n                        class=\"submit\">Apply </span></button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}input{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.cancel{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-900, #101828)!important;font-family:Inter;font-size:16px!important;font-weight:400!important;line-height:24px;height:45px!important}.totalamount{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-weight:400;line-height:24px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400!important;line-height:24px}.input-group input[type=text]{padding-left:30px}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:14px!important;font-weight:400;line-height:20px}.input-group{position:relative}.input-group>.icon{position:absolute;top:43%;right:16px;transform:translateY(-50%);color:silver}.input-group>input{padding-left:calc(1em + 18px)}.spritesheet{display:none}.icon{display:inline-block;width:16px!important;height:16px!important}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}.invoiceDropDown{min-height:auto!important;max-height:170px!important;overflow:auto}\n"] }]
+            args: [{ selector: 'lib-ps-credit-note', template: "<div class=\"modal-content\">\r\n    <div class=\"p-5 px-6\">\r\n        <div><img src=\"./assets/tango/custompopup-Icons/plus-icon.svg\" alt=\"\"></div>\r\n        <div class=\"heading mt-4 ms-1\">Add Credit Note</div>\r\n        <div class=\"contenttext mt-4\">\r\n            You have the flexibility to select a month in which the brand can make credit payments.\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"modal-body mb-8\">\r\n        <!--begin::Form-->\r\n        <form [formGroup]=\"creditnoteform\" class=\"form fv-plugins-bootstrap5 fv-plugins-framework\" action=\"#\">\r\n\r\n            <div class=\"d-flex flex-column fv-row fv-plugins-icon-container\">\r\n                <div class=\"form-group py-2\">\r\n                    <label for=\"invoicetype\" class=\"headingtext mb-2\">Invoice ID</label>\r\n                    <div class=\"position-relative\">\r\n                        <div class=\"form-select dropselect\" id=\"invoicetype\"\r\n                            (click)=\"invoicetypeDropdown($event)\"\r\n                            aria-label=\"Default select example\">{{invoiceIssue}}</div>\r\n                        <div *ngIf=\"invoicetypedropDown\"\r\n                            class=\"card py-2 w-100 invoiceidselect position-absolute end-0 z-1 invoiceDropDown\">\r\n                            <ul *ngFor=\"let item of invoiceitem\"\r\n                                class=\"list-unstyled mb-2\">\r\n                                <li [ngClass]=\"this.invoiceIssue === item?.invoice ? 'active' : ''\"\r\n                                    class=\"producttext px-5 items cursor-pointer py-4\"\r\n                                    (click)=\"invoiceItem(item)\">\r\n                                    {{item?.invoice}}\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div for=\"totalAmount\" class=\"form-group py-2\">\r\n                    <label class=\" headingtext mb-2 \">Total Amount</label>\r\n                    <div class=\"input-group\">\r\n                        <span class=\"dollar-sign totalamount\">\u20B9</span><input formControlName=\"totalAmount\" type=\"text\" readonly class=\"ng-pristine ng-invalid ng-touched totalamount\"\r\n                        style=\"text-transform: capitalize;\"></div>\r\n\r\n                </div>\r\n                <div for=\"revisedAmount\" class=\"form-group mt-2\">\r\n                    <div class=\"py-2\">\r\n                        <label class=\" headingtext mb-2\"> Revised Amount</label>\r\n                        <div class=\"input-group dropselect\">\r\n                            <span class=\"dollar-sign\">\u20B9</span><input type=\"text\" formControlName=\"revisedAmount\"  [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\"\r\n                            style=\"text-transform: capitalize;\">\r\n                            <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_7513_36689)\">\r\n                                <path d=\"M7.99967 5.33301V7.99967M7.99967 10.6663H8.00634M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </g>\r\n                                <defs>\r\n                                <clipPath id=\"clip0_7513_36689\">\r\n                                <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n                                </clipPath>\r\n                                </defs>\r\n                                </svg></span></div>\r\n                    </div>\r\n                    <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">Enter a valid revised amount</span>\r\n                </div>\r\n                <div for=\"discount\" class=\"form-group mt-2\">\r\n                <div class=\"py-2\">\r\n                    <label class=\" headingtext mb-2\"> Discount</label>\r\n                    <div class=\"input-group\">  <input type=\"text\" formControlName=\"discount\" class=\"totalamount\" [ngClass]=\"moreThanTenPercent ? 'errorinput' : ''\" >\r\n                        <span class=\"icon\" *ngIf=\"!moreThanTenPercent\" >\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#98A2B3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span>\r\n                    <span class=\"icon\" *ngIf=\"moreThanTenPercent\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path d=\"M12.667 3.33366L3.33366 12.667M6.00033 4.33366C6.00033 5.25413 5.25413 6.00033 4.33366 6.00033C3.41318 6.00033 2.66699 5.25413 2.66699 4.33366C2.66699 3.41318 3.41318 2.66699 4.33366 2.66699C5.25413 2.66699 6.00033 3.41318 6.00033 4.33366ZM13.3337 11.667C13.3337 12.5875 12.5875 13.3337 11.667 13.3337C10.7465 13.3337 10.0003 12.5875 10.0003 11.667C10.0003 10.7465 10.7465 10.0003 11.667 10.0003C12.5875 10.0003 13.3337 10.7465 13.3337 11.667Z\" stroke=\"#F04438\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg></span>\r\n                        </div>\r\n                </div>\r\n                <span *ngIf=\"!moreThanTenPercent\"  class=\"headingtext contenttext\">In percentage</span>\r\n                <span *ngIf=\"moreThanTenPercent\" class=\"text-danger contenttext\">In percentage</span>\r\n            </div>\r\n        </div>\r\n            <div class=\"d-flex mt-5\">\r\n                <button type=\"submit\" (click)=\"activeModal.dismiss()\"\r\n                    class=\"btn-outline btn cancel me-4 w-50\">Cancel</button>\r\n                <button [disabled]=\"moreThanTenPercent\" type=\"button\" (click)=\"successcredit()\" tabindex=\"0\" \r\n                    class=\"btn btn-primary px-4 ng-star-inserted w-50\" style=\"white-space: nowrap;\"><span\r\n                        class=\"submit\">Apply </span></button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</div>", styles: [".heading{color:var(--Gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}input{color:#101828;border:1px solid #D0D5DD!important;box-shadow:0 1px 2px #1018280d;border-radius:8px;font-size:16px;width:100%;padding:10px 14px;font-family:Inter;font-weight:400;line-height:24px}input:active,input:focus,input:focus-visible{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d;outline:none!important;background:var(--Gray-50, #F9FAFB)}.cancel{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px;text-transform:capitalize;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.contenttext{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropselect{color:var(--Gray-900, #101828)!important;font-family:Inter;font-size:16px!important;font-weight:400!important;line-height:24px;height:45px!important}.totalamount{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:16px!important;font-weight:400;line-height:24px}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.errorinput{border-radius:8px;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.errorinput:focus{border:1px solid var(--Error-300, #FDA29B)!important}.input-group .dollar-sign{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--Gray-900, #101828);font-family:Inter;font-size:16px;font-weight:400!important;line-height:24px}.input-group input[type=text]{padding-left:30px}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-radius:8px!important}.text-danger{color:var(--Error-500, #F04438)!important;font-family:Inter;font-size:14px!important;font-weight:400;line-height:20px}.input-group{position:relative}.input-group>.icon{position:absolute;top:43%;right:16px;transform:translateY(-50%);color:silver}.input-group>input{padding-left:calc(1em + 18px)}.spritesheet{display:none}.icon{display:inline-block;width:16px!important;height:16px!important}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius:8px!important}.invoiceDropDown{min-height:auto!important;max-height:170px!important;overflow:auto}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgbActiveModal }, { type: PaymentSubscriptionService }, { type: i0.ChangeDetectorRef }, { type: i5.FormBuilder }, { type: i2$1.ToastService }], propDecorators: { clientId: [{
                 type: Input
             }], transactionvalue: [{
@@ -9410,6 +9419,14 @@ class PlansSubscriptionComponent {
                 this.priceNoData = false;
                 this.priceValueDetails = res.data;
                 this.originalPriceValue = JSON.parse(JSON.stringify(this.priceValueDetails));
+                // Group-wise: adopt the group's own price type so the correct
+                // standard/step table renders (each group can differ).
+                if (isGroup && res.data.priceType && res.data.priceType !== this.priceType) {
+                    this.priceType = res.data.priceType;
+                    if (this.clientinfo?.currentPlanInfo) {
+                        this.clientinfo.currentPlanInfo.priceType = res.data.priceType;
+                    }
+                }
                 this.changeDetector.detectChanges();
             }
             else if (isGroup) {
@@ -10250,7 +10267,7 @@ class BrandInvoicesComponent {
     pageSize = 10;
     currentPage = 1;
     itemsPerPage = 10;
-    paginationSizes = [10, 20, 30, 50, 100];
+    paginationSizes = [10, 20, 30, 100, 250, 500];
     sortColumName = 'billingDate';
     sortBy = -1;
     activeFilter = 'All';
@@ -12733,7 +12750,7 @@ class InvoiceCreditsComponent {
     invoiceItemsPerPage = 10;
     invoiceCurrentPage = 1;
     invoiceTotalItems = 0;
-    invoicePaginationSizes = [10, 20, 30];
+    invoicePaginationSizes = [10, 20, 30, 100, 250, 500];
     invoicePageSize = 10;
     invoiceSearchControl = new FormControl();
     invoiceSearchTerm;
@@ -12743,7 +12760,7 @@ class InvoiceCreditsComponent {
     transactionItemsPerPage = 10;
     transactionCurrentPage = 1;
     transactionTotalItems = 0;
-    transactionPaginationSizes = [10, 20, 30];
+    transactionPaginationSizes = [10, 20, 30, 100, 250, 500];
     transactionPageSize = 10;
     transactionSearchControl = new FormControl();
     transactionSearchTerm;