WebBuild/wwwroot/apps/hrms/payroll/controls/incometaxcalculation.js

var Bizgaze;
(function (Bizgaze) {
    let Apps;
    (function (Apps) {
        let Hrms;
        (function (Hrms) {
            let Payroll;
            (function (Payroll) {
                class IncomeTaxCalculation extends Unibase.Platform.Core.BaseComponent {
                    init(containerid) {
                        var instance = this;
                        let html = `<div class="income-tax-widget" id="incomeTaxWidget_${containerid}">
                            <div class="card">
                                <div class="card-header"><div class="card-title biz-highlight-bg-color text-truncate mb-0 font-weight-600">Income Tax Calculation</div></div>
                                <div class="card-body">
                                    <form id="input-section" onsubmit="return false">

                                  <div class="row pa-10">
                                    <div class="col-md-9 col-sm-9 col-xs-12 list-item-main-title">
                                      Yearly Income from Salary
                                    </div>
                                    <div class="col-md-3 col-sm-3 input-field text-right">
                                      <input class="form-control" type="number" id="grossPay">
                                    </div>
                                  </div>

                                  <div class="row pa-10">
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                      Age
                                    </div>
                                    <div class="col-md-3 col-sm-3 input-field text-right">
                                      <select name="scope" id="age" class="age-field form-control">
                                        <option value="lessThan60">Less than 60</option>
                                        <option value="between60To80">60 - 80</option>
                                        <option value="above80">Above 80</option>
                                      </select>
                                    </div>
                                  </div>

                                  <div class="add-income-details-toggle pa-15 mb-20">
                                    <a href="javascript:;" id="toggleOtherIncomeSectionBtn"><span style="font-size: 20px;">+</span> Income from Other Sources</a> <small>(Interest on FD and Let-out Property)</small>
                                  </div>
                                  <div class="other-earnings-table hidden">
                          <hr style="margin: 10px 0;">

                          <div class="row pa-10">
                            <div class="col-md-9 col-sm-9 col-xs-12">
                              Interest from Savings Bank Accounts / FD Accounts
                            </div>
                            <div class="col-md-3 col-sm-3 input-field text-right">
                              <input class="form-control" type="number" id="interestFromSavings">
                            </div>
                          </div>

                          <div class="row pa-10">
                            <div class="col-md-9 col-sm-9 col-xs-12">
                              Rental Income Received <small>(Let-out Property)</small>
                            </div>
                            <div class="col-md-3 col-sm-3 input-field text-right">
                              <input class="form-control" type="number" id="rentalIncome">
                            </div>
                          </div>

                          <div class="row pa-10">
                            <div class="col-md-9 col-sm-9 col-xs-12">
                              Municipal Tax Paid <small>(Let-out Property)</small>
                            </div>
                            <div class="col-md-3 col-sm-3 input-field text-right">
                              <input class="form-control" type="number" id="municipalTax">
                            </div>
                          </div>

                          <div class="row pa-10">
                            <div class="col-md-9 col-sm-9 col-xs-12">
                              Interest paid on Housing Loan <small>(Let-out Property)</small>
                            </div>
                            <div class="col-md-3 col-sm-3 input-field text-right">
                              <input class="form-control" type="number" id="ipoHousingLoanInterest">
                            </div>
                          </div>

                          <div class="row pa-10">
                            <div class="col-md-9 col-sm-9 col-xs-12">
                              Other Income, if any
                            </div>
                            <div class="col-md-3 col-sm-3 input-field text-right">
                              <input class="form-control" type="number" id="otherIncome">
                            </div>
                          </div>
                        </div>

                        <div class="section-header pa-10 list-item-main-title">
                          Exemption Details
                          <span class="tooltip-entity ml-10" data-tooltip="true" title="Exemptions cannot be availed in the new tax regime. The exemption details collected here will be used to calculate tax under the old regime and compared with the tax calculated under new regime.">
                           <i class="fa fa-info-circle" aria-hidden="true"></i>
                          </span>
                        </div>
                        <hr>
                        <div class="row pa-10 pt-25">
                          <div class="col-md-9 col-sm-9 col-xs-12">
                            HRA and Other Exemptions
                          </div>
                          <div class="col-md-3 col-sm-3 input-field text-right">
                            <input class="form-control" type="number" id="_otherExemptions">
                          </div>
                        </div>

                        <div class="row pa-10">
                          <div class="col-md-9 col-sm-9 col-xs-12">
                            Interest paid on Housing Loan
                          </div>
                          <div class="col-md-3 col-sm-3 input-field text-right">
                            <input class="form-control" type="number" id="_interestOnHousingLoan">
                          </div>
                        </div>

                        <div class="row pa-10">
                          <div class="col-md-9 col-sm-9 col-xs-12">
                            80C <small>(PF, PPF, Insurance Premium)</small>
                          </div>
                          <div class="col-md-3 col-sm-3 input-field text-right">
                            <input class="form-control _cinvestments" type="number">
                          </div>
                        </div>

                        <div class="row pa-10">
                          <div class="col-md-9 col-sm-9 col-xs-12">
                            80CCD <small>(Employee's contribution to NPS)</small>
                          </div>
                          <div class="col-md-3 col-sm-3 input-field text-right">
                            <input class="form-control _ccdinvestments" type="number">
                          </div>
                        </div>

                        <div class="row pa-10">
                          <div class="col-md-9 col-sm-9 col-xs-12">
                            80CCD(1B) <small>(Additional Contribution to NPS)</small>
                          </div>
                          <div class="col-md-3 col-sm-3 input-field text-right">
                            <input class="form-control _ccd1binvestments" type="number">
                          </div>
                        </div>

                        <div class="row pa-10">
                          <div class="col-md-9 col-sm-9 col-xs-12">
                            80D <small>(Medical Insurance Premium)</small>
                          </div>
                          <div class="col-md-3 col-sm-3 input-field text-right">
                            <input class="form-control _dinvestments" type="number">
                          </div>
                        </div>

                        <div class="row pa-10">
                          <div class="col-md-9 col-sm-9 col-xs-12">
                            80E <small>(Interest paid on Education Loan)</small>
                          </div>
                          <div class="col-md-3 col-sm-3 input-field text-right">
                            <input class="form-control _einvestments" type="number">
                          </div>
                        </div>

                        <div class="row pa-10">
                          <div class="col-md-9 col-sm-9 col-xs-12">
                            80EEA <small>(Interest paid on Home Loan for Affordable Housing)</small>
                          </div>
                          <div class="col-md-3 col-sm-3 input-field text-right">
                            <input class="form-control _eeainvestments" type="number">
                          </div>
                        </div>

                        <div class="row pa-10">
                          <div class="col-md-9 col-sm-9 col-xs-12">
                            80EEB <small>(Interest paid on Loan for Purchase of Electrical Vehicle)</small>
                          </div>
                          <div class="col-md-3 col-sm-3 input-field text-right">
                            <input class="form-control _eebinvestments" type="number">
                          </div>
                        </div>

                        <div class="row pa-10">
                          <div class="col-md-9 col-sm-9 col-xs-12">
                            80G <small>(Donations to Charity)</small>
                          </div>
                          <div class="col-md-3 col-sm-3 input-field text-right">
                            <input class="form-control _ginvestments" type="number">
                          </div>
                        </div>

                                  <hr>
                                  <button type="submit" class="btn-primary btn-sm submit-btn btn_calculateincometax" onclick="Bizgaze.Apps.Hrms.Payroll.IncomeTaxCalculation.Instance().IncomeTaxCalculate();">Calculate Income Tax</button>
                                </form>
                                </div>
                            </div>
                        </div>`;
                        html += `<div class="incometaxdetails p-5 bg-white"></div>`;
                        $(`#${containerid}`).html(html);
                        const containerEl = $(`#incomeTaxWidget_${containerid}`);
                        $(".incometaxdetails").addClass("hidden");
                        $(".income-tax-widget").removeClass("hidden");
                        containerEl.find('#toggleOtherIncomeSectionBtn').click(function () {
                            containerEl.find('.add-income-details-toggle').addClass('hidden');
                            containerEl.find('.other-earnings-table').removeClass('hidden');
                        });
                    }
                    IncomeTaxCalculate() {
                        var instance = this;
                        var postData = {
                            OtherExemptions: Number($("#_otherExemptions").val()),
                            Age: $("#age").val().toString(),
                            GrossPay: Number($("#grossPay").val()),
                            InterestOnHousingLoan: Number($("#_interestOnHousingLoan").val()),
                            InterestFromSavings: Number($("#interestFromSavings").val()),
                            RentalIncome: Number($("#rentalIncome").val()),
                            MunicipalTax: Number($("#municipalTax").val()),
                            IpoHousingLoanInterest: Number($("#ipoHousingLoanInterest").val()),
                            OtherIncome: Number($("#otherIncome").val()),
                            CInvestments: Number($("._cinvestments").val()),
                            CCDInvestments: Number($("._ccdinvestments").val()),
                            CCD1Binvestments: Number($("._ccd1binvestments").val()),
                            DInvestments: Number($("._dinvestments").val()),
                            EInvestments: Number($("._einvestments").val()),
                            EEAInvestments: Number($("._eeainvestments").val()),
                            EEBInvestments: Number($("._eebinvestments").val()),
                            GInvestments: Number($("._ginvestments").val())
                        };
                        instance.fileCacheHelper.loadJsFiles(["apps/hrms/payroll/managers/payrollmanager.js", "apps/hrms/payroll/controls/incometaxcalculation.js"], function () {
                            Bizgaze.Apps.Hrms.Payroll.Managers.PayRollManager.Instance().incomeTaxCalculation(postData).then(function (response) {
                                var result = response.result;
                                if (result != null) {
                                    debugger;
                                    var html = `<div class="p-5 bg-white"><table class="w-100 table table-bordered">
                                        <thead>
                                          <tr>
                                            <th class="text-uppercase font-weight-600 ">Components</th>
                                            <th class="text-right text-uppercase font-weight-600">Old Tax Regime</th>
                                            <th class="text-right text-uppercase font-weight-600">New Tax Regime</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          <tr>
                                            <td >Total Gross Income</td>
                                            <td class="text-right ">₹ ${result[0].GrossPay}</td>
                                            <td class="text-right ">₹ ${result[0].GrossPay}</td>
                                          </tr>
                                          <tr>
                                            <td>Total Eligible Deductions</td>
                                            <td class="text-right ">₹${result[0].EligibleDeductions}</td>
                                            <td class="text-right ">₹${result[0].EligibleDeductions}</td>
                                          </tr>
                                          <tr>
                                            <td>Taxable Income</td>
                                            <td class="text-right ">₹ ${result[0].OldTaxableIncome}</td>
                                            <td class="text-right ">₹ ${result[0].NewTaxableIncome}</td>
                                          </tr>
                                          <tr>
                                            <td>Tax on Total Income</td>
                                            <td class="text-right ">₹${result[0].OldTaxTotalIncome}</td>
                                            <td class="text-right ">₹${result[0].NewTaxTotalIncome}</td>
                                          </tr>
                                          <tr>
                                            <td>Surcharge</td>
                                            <td class="text-right ">₹0.00</td>
                                            <td class="text-right ">₹0.00</td>
                                          </tr>
                                          <tr>
                                            <td>Health and Education Cess</td>
                                            <td class="text-right ">₹${result[0].CessOnOldTaxAmount}</td>
                                            <td class="text-right ">₹${result[0].CessOnNewTaxAmount}</td>
                                          </tr>
                                        </tbody>
                                        <tfoot>
                                          <tr>
                                            <th>Total Tax to be Paid</th>
                                            <th class="text-right ">₹${result[0].OldTaxRegime_Amount}</th>
                                            <th class="text-right ">₹${result[0].NewTaxRegime_Amount}</th>
                                          </tr>
                                        </tfoot>
                                      </table><div class="d-flex"><a class="btn btn-outline-danger btn_editdate">Edit Data</a><a class="btn btn_startover">Start Over</a></div></div>`;
                                    $(".incometaxdetails").removeClass("hidden");
                                    $(".income-tax-widget").addClass("hidden");
                                    $(".incometaxdetails").html(html);
                                    $(".btn_editdate").click(function () {
                                        $(".incometaxdetails").addClass("hidden");
                                        $(".income-tax-widget").removeClass("hidden");
                                    });
                                    $(".btn_startover").click(function () {
                                        $(".incometaxdetails").addClass("hidden");
                                        $(".income-tax-widget").removeClass("hidden");
                                        $("#_otherExemptions").val("");
                                        $("#grossPay").val("");
                                        $("#_interestOnHousingLoan").val("");
                                        $("#rentalIncome").val("");
                                        $("#municipalTax").val("");
                                        $("#ipoHousingLoanInterest").val("");
                                        $("#otherIncome").val("");
                                        $("._cinvestments").val("");
                                        $("._ccdinvestments").val("");
                                        $("._dinvestments").val("");
                                        $("._einvestments").val("");
                                        $("._eeainvestments").val("");
                                        $("._eebinvestments").val("");
                                        $("._ginvestments").val("");
                                    });
                                }
                            });
                        });
                    }
                    static Instance() {
                        if (this.instance === undefined) {
                            this.instance = new IncomeTaxCalculation();
                        }
                        return this.instance;
                    }
                }
                Payroll.IncomeTaxCalculation = IncomeTaxCalculation;
            })(Payroll = Hrms.Payroll || (Hrms.Payroll = {}));
        })(Hrms = Apps.Hrms || (Apps.Hrms = {}));
    })(Apps = Bizgaze.Apps || (Bizgaze.Apps = {}));
})(Bizgaze || (Bizgaze = {}));