<button data-download="true" name="pb-pdf" data-year="2021" class="btn btn-primary btn-sm ml-20 bg-color download-btn" type="button">Download as PDF [2021]</button>
</div>
</div>
<div class="table table-responsive">
<table id="table-pb-2021" class="table table-pb">
<thead>
<tr class="theader va-middle1 tdp5-1">
<td class="tdp5" colspan="6">Particulars</td>
<td class="tdp5 text-end">Employee Share</td>
<td class="tdp5 text-end">Employer Share</td>
<td class="tdp5 text-end">Pension Share</td>
</tr>
</thead>
<tbody>
<tr class="bold">
<td class="tdp5" colspan="6">
<span class="badge bg-success pad-5">OB Int. Updated upto 01/04/2021</span>
</td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
</tr>
<tr class="theader va-middle1 tdp5-1">
<td class="tdp5 text-end">Wage Month</td>
<td class="tdp5">Transaction<br>Date</td>
<td class="tdp5 text-end">Transaction<br>Type</td>
<td class="tdp5">Particulars</td>
<td class="tdp5 text-end">EPF Wages</td>
<td class="tdp5 text-end">EPS Wages</td>
<td class="tdp5 text-end">Employee Share<br>( 12% )</td>
<td class="tdp5 text-end">Employer Share<br>( 3.67% )</td>
<td class="tdp5 text-end">Pension Share<br>( 8.33% )</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Jul-2021</td>
<td class="tdp5">13-08-2021</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 082021</td>
<td class="text-end tdp5">5,500 </td>
<td class="text-end tdp5">0</td>
<td class="text-end tdp5">660</td>
<td class="text-end tdp5">660</td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Aug-2021</td>
<td class="tdp5">15-09-2021</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 092021</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">0</td>
<td class="text-end tdp5">1,800 </td>
<td class="text-end tdp5">1,800 </td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Sep-2021</td>
<td class="tdp5">14-10-2021</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 102021</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">0</td>
<td class="text-end tdp5">1,800 </td>
<td class="text-end tdp5">1,800 </td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Oct-2021</td>
<td class="tdp5">11-11-2021</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 112021</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">0</td>
<td class="text-end tdp5">1,800 </td>
<td class="text-end tdp5">1,800 </td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Nov-2021</td>
<td class="tdp5">09-12-2021</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 122021</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">0</td>
<td class="text-end tdp5">1,800 </td>
<td class="text-end tdp5">1,800 </td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Dec-2021</td>
<td class="tdp5">14-01-2022</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 012022</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">0</td>
<td class="text-end tdp5">1,800 </td>
<td class="text-end tdp5">1,800 </td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Jan-2022</td>
<td class="tdp5">07-02-2022</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 022022</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">0</td>
<td class="text-end tdp5">1,800 </td>
<td class="text-end tdp5">1,800 </td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Feb-2022</td>
<td class="tdp5">13-03-2022</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 032022</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">0</td>
<td class="text-end tdp5">1,800 </td>
<td class="text-end tdp5">1,800 </td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="cont bold va-middle1">
<td class="tdp5 text-end" colspan="6">Total Contributions for the year [ 2021 ]</td>
<td class="text-end tdp5"><span class="border-text">₹13,260 </span></td>
<td class="text-end tdp5"><span class="border-text">₹13,260 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
</tr>
<tr class="cont bold va-middle1">
<td class="tdp5 text-end" colspan="6">Total Transfer-Ins/VDRs for the year [ 2021 ]</td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
</tr>
<tr class="cont bold wth va-middle1">
<td class="tdp5 text-end" colspan="6"><span class="badge bg-danger font-size-14">Total Withdrawals for the year [ 2021 ]</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
</tr>
<tr class="bold">
<td class="tdp5" colspan="6">Int.Updated upto 31/03/2022</td>
<td class="text-end tdp5"><span class="border-text">₹289 </span></td>
<td class="text-end tdp5"><span class="border-text">₹289 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
</tr>
<tr class="bold">
<td class="tdp5" colspan="6"><span class="badge bg-info font-size-14">Closing Balance as on 31/03/2022</span></td>
<td class="text-end tdp5"><span class="border-text">₹13,549 </span></td>
<td class="text-end tdp5"><span class="border-text">₹13,549 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="9" class="tdp5 text-center">
<span class="border-text font-size-14 pad-10">
Disclaimer - Information shown above is based on available data on central server. This information may not be used for legal purposes.
</span>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
`,
'2020': `
<div id="v-tab-2020" class="v-tab-content active">
<div class="pad-10">
<div class="row">
<div class="col-md-6">
Passbook for Member Id : [ <b class="color-primary bhashini-skip-translation">[PYPNY37729550000010531] [2020-21] </b> ]
</div>
<div class="col-md-6 text-end">
<button data-download="true" name="pb-pdf" data-year="2020" class="btn btn-primary btn-sm ml-20 bg-color download-btn" type="button">Download as PDF [2020]</button>
</div>
</div>
<div class="table table-responsive">
<table id="table-pb-2020" class="table table-pb">
<thead>
<tr class="theader va-middle1 tdp5-1">
<td class="tdp5" colspan="6">Particulars</td>
<td class="tdp5 text-end">Employee Share</td>
<td class="tdp5 text-end">Employer Share</td>
<td class="tdp5 text-end">Pension Share</td>
</tr>
</thead>
<tbody>
<tr class="bold">
<td class="tdp5" colspan="6">
<span class="badge bg-success pad-5">OB Int. Updated upto 01/04/2020</span>
</td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
</tr>
<tr class="theader va-middle1 tdp5-1">
<td class="tdp5 text-end">Wage Month</td>
<td class="tdp5">Transaction<br>Date</td>
<td class="tdp5 text-end">Transaction<br>Type</td>
<td class="tdp5">Particulars</td>
<td class="tdp5 text-end">EPF Wages</td>
<td class="tdp5 text-end">EPS Wages</td>
<td class="tdp5 text-end">Employee Share<br>( 12% )</td>
<td class="tdp5 text-end">Employer Share<br>( 3.67% )</td>
<td class="tdp5 text-end">Pension Share<br>( 8.33% )</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Oct-2020</td>
<td class="tdp5">11-11-2020</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 112020</td>
<td class="text-end tdp5">18,930</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">908</td>
<td class="text-end tdp5">236</td>
<td class="text-end tdp5">672</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Nov-2020</td>
<td class="tdp5">09-12-2020</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 122020</td>
<td class="text-end tdp5">31,549</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">1,601</td>
<td class="text-end tdp5">351</td>
<td class="text-end tdp5">1,250</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Dec-2020</td>
<td class="tdp5">14-01-2021</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 012021</td>
<td class="text-end tdp5">31,549</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">1,601</td>
<td class="text-end tdp5">351</td>
<td class="text-end tdp5">1,250</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Jan-2020</td>
<td class="tdp5">07-02-2021</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 022021</td>
<td class="text-end tdp5">31,549</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">1,601</td>
<td class="text-end tdp5">351</td>
<td class="text-end tdp5">1,250</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Feb-2021</td>
<td class="tdp5">13-03-2021</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 032021</td>
<td class="text-end tdp5">31,549</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">1,601</td>
<td class="text-end tdp5">351</td>
<td class="text-end tdp5">1,250</td>
</tr>
<tr class="cont bold va-middle1">
<td class="tdp5 text-end" colspan="6">Total Contributions for the year [ 2020 ]</td>
<td class="text-end tdp5"><span class="border-text">₹7,312 </span></td>
<td class="text-end tdp5"><span class="border-text">₹1,640 </span></td>
<td class="text-end tdp5"><span class="border-text">₹5,672 </span></td>
</tr>
<tr class="cont bold va-middle1">
<td class="tdp5 text-end" colspan="6">Total Transfer-Ins/VDRs for the year [ 2020 ]</td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
</tr>
<tr class="cont bold wth va-middle1">
<td class="tdp5 text-end" colspan="6"><span class="badge bg-danger font-size-14">Total Withdrawals for the year [ 2020 ]</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
</tr>
<tr class="bold">
<td class="tdp5" colspan="6">Int.Updated upto 31/03/2021</td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
</tr>
<tr class="bold">
<td class="tdp5" colspan="6"><span class="badge bg-info font-size-14">Closing Balance as on 31/03/2021</span></td>
<td class="text-end tdp5"><span class="border-text">₹7,312 </span></td>
<td class="text-end tdp5"><span class="border-text">₹1,640 </span></td>
<td class="text-end tdp5"><span class="border-text">₹5,672 </span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="9" class="tdp5 text-center">
<span class="border-text font-size-14 pad-10">
Disclaimer - Information shown above is based on available data on central server. This information may not be used for legal purposes.
</span>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
`,
'2019': `
<div id="v-tab-2019" class="v-tab-content active">
<div class="pad-10">
<div class="row">
<div class="col-md-6">
Passbook for Member Id : [ <b class="color-primary bhashini-skip-translation">[TNMAS38092680000010044] [2019-20] </b> ]
</div>
<div class="col-md-6 text-end">
<button data-download="true" name="pb-pdf" data-year="2019" class="btn btn-primary btn-sm ml-20 bg-color download-btn" type="button">Download as PDF [2019]</button>
</div>
</div>
<div class="table table-responsive">
<table id="table-pb-2019" class="table table-pb">
<thead>
<tr class="theader va-middle1 tdp5-1">
<td class="tdp5" colspan="6">Particulars</td>
<td class="tdp5 text-end">Employee Share</td>
<td class="tdp5 text-end">Employer Share</td>
<td class="tdp5 text-end">Pension Share</td>
</tr>
</thead>
<tbody>
<tr class="bold">
<td class="tdp5" colspan="6">
<span class="badge bg-success pad-5">OB Int. Updated upto 01/04/2019</span>
</td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
</tr>
<tr class="theader va-middle1 tdp5-1">
<td class="tdp5 text-end">Wage Month</td>
<td class="tdp5">Transaction<br>Date</td>
<td class="tdp5 text-end">Transaction<br>Type</td>
<td class="tdp5">Particulars</td>
<td class="tdp5 text-end">EPF Wages</td>
<td class="tdp5 text-end">EPS Wages</td>
<td class="tdp5 text-end">Employee Share<br>( 12% )</td>
<td class="tdp5 text-end">Employer Share<br>( 3.67% )</td>
<td class="tdp5 text-end">Pension Share<br>( 8.33% )</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Jul-2019</td>
<td class="tdp5">13-08-2019</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 082019</td>
<td class="text-end tdp5">27,778</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">1,200</td>
<td class="text-end tdp5">312</td>
<td class="text-end tdp5">888</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Aug-2019</td>
<td class="tdp5">10-09-2019</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 092019</td>
<td class="text-end tdp5">41,668</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">550</td>
<td class="text-end tdp5">1,250</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Sep-2019</td>
<td class="tdp5">13-10-2019</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 102019</td>
<td class="text-end tdp5">41,668</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">550</td>
<td class="text-end tdp5">1,250</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Oct-2019</td>
<td class="tdp5">11-11-2019</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 112019</td>
<td class="text-end tdp5">41,668</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">550</td>
<td class="text-end tdp5">1,250</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Nov-2019</td>
<td class="tdp5">14-01-2020</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 122019</td>
<td class="text-end tdp5">41,668</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">550</td>
<td class="text-end tdp5">1,250</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Dec-2019</td>
<td class="tdp5">14-01-2020</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 012020</td>
<td class="text-end tdp5">41,668</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">550</td>
<td class="text-end tdp5">1,250</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Jan-2020</td>
<td class="tdp5">07-02-2020</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 022020</td>
<td class="text-end tdp5">41,668</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">550</td>
<td class="text-end tdp5">1,250</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Feb-2020</td>
<td class="tdp5">13-03-2020</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 032020</td>
<td class="text-end tdp5">41,668</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">550</td>
<td class="text-end tdp5">1,250</td>
</tr>
<tr class="cont bold va-middle1">
<td class="tdp5 text-end" colspan="6">Total Contributions for the year [ 2019 ]</td>
<td class="text-end tdp5"><span class="border-text">₹13,800 </span></td>
<td class="text-end tdp5"><span class="border-text">₹4,162 </span></td>
<td class="text-end tdp5"><span class="border-text">₹9,638 </span></td>
</tr>
<tr class="cont bold va-middle1">
<td class="tdp5 text-end" colspan="6">Total Transfer-Ins/VDRs for the year [ 2019 ]</td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
</tr>
<tr class="cont bold wth va-middle1">
<td class="tdp5 text-end" colspan="6"><span class="badge bg-danger font-size-14">Total Withdrawals for the year [ 2019 ]</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
</tr>
<tr class="bold">
<td class="tdp5" colspan="6">Int.Updated upto 31/03/2020</td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
</tr>
<tr class="bold">
<td class="tdp5" colspan="6"><span class="badge bg-info font-size-14">Closing Balance as on 31/03/2020</span></td>
<td class="text-end tdp5"><span class="border-text">₹13,800 </span></td>
<td class="text-end tdp5"><span class="border-text">₹4,162 </span></td>
<td class="text-end tdp5"><span class="border-text">₹9,638 </span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="9" class="tdp5 text-center">
<span class="border-text font-size-14 pad-10">
Disclaimer - Information shown above is based on available data on central server. This information may not be used for legal purposes.
</span>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
`,
'2018': `
<div id="v-tab-2018" class="v-tab-content active">
<div class="pad-10">
<div class="row">
<div class="col-md-6">
Passbook for Member Id : [ <b class="color-primary bhashini-skip-translation">[PYKRP33881100000010027] [2018-19] </b> ]
</div>
<div class="col-md-6 text-end">
<button data-download="true" name="pb-pdf" data-year="2018" class="btn btn-primary btn-sm ml-20 bg-color download-btn" type="button">Download as PDF [2018]</button>
</div>
</div>
<div class="table table-responsive">
<table id="table-pb-2018" class="table table-pb">
<thead>
<tr class="theader va-middle1 tdp5-1">
<td class="tdp5" colspan="6">Particulars</td>
<td class="tdp5 text-end">Employee Share</td>
<td class="tdp5 text-end">Employer Share</td>
<td class="tdp5 text-end">Pension Share</td>
</tr>
</thead>
<tbody>
<tr class="bold">
<td class="tdp5" colspan="6">
<span class="badge bg-success pad-5">OB Int. Updated upto 01/04/2018</span>
</td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
</tr>
<tr class="theader va-middle1 tdp5-1">
<td class="tdp5 text-end">Wage Month</td>
<td class="tdp5">Transaction<br>Date</td>
<td class="tdp5 text-end">Transaction<br>Type</td>
<td class="tdp5">Particulars</td>
<td class="tdp5 text-end">EPF Wages</td>
<td class="tdp5 text-end">EPS Wages</td>
<td class="tdp5 text-end">Employee Share<br>( 12% )</td>
<td class="tdp5 text-end">Employer Share<br>( 3.67% )</td>
<td class="tdp5 text-end">Pension Share<br>( 8.33% )</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Aug-2018</td>
<td class="tdp5">10-09-2018</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 092018</td>
<td class="text-end tdp5">11,000</td>
<td class="text-end tdp5"></td>
<td class="text-end tdp5">1,320</td>
<td class="text-end tdp5">1,320</td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Sep-2018</td>
<td class="tdp5">13-10-2018</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 102018</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5"></td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Oct-2018</td>
<td class="tdp5">11-11-2018</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 112018</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5"></td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Nov-2018</td>
<td class="tdp5">09-12-2018</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 122018</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5"></td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Dec-2018</td>
<td class="tdp5">14-01-2019</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 012019</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5"></td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Jan-2019</td>
<td class="tdp5">07-02-2019</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 022019</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5"></td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="va-middle1 color-black">
<td class="tdp5 text-end">Feb-2019</td>
<td class="tdp5">13-03-2019</td>
<td class="tdp5 text-end"><span class="badge bg-success opacity-09">+</span></td>
<td class="tdp5">Cont. For Due-Month 032019</td>
<td class="text-end tdp5">15,000</td>
<td class="text-end tdp5"></td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">1,800</td>
<td class="text-end tdp5">0</td>
</tr>
<tr class="cont bold va-middle1">
<td class="tdp5 text-end" colspan="6">Total Contributions for the year [ 2018 ]</td>
<td class="text-end tdp5"><span class="border-text">₹12,120 </span></td>
<td class="text-end tdp5"><span class="border-text">₹12,120 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
</tr>
<tr class="cont bold va-middle1">
<td class="tdp5 text-end" colspan="6">Total Transfer-Ins/VDRs for the year [ 2018 ]</td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
</tr>
<tr class="cont bold wth va-middle1">
<td class="tdp5 text-end" colspan="6"><span class="badge bg-danger font-size-14">Total Withdrawals for the year [ 2018 ]</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
</tr>
<tr class="bold">
<td class="tdp5" colspan="6">Int.Updated upto 31/03/2019</td>
<td class="text-end tdp5"><span class="border-text">₹237 </span></td>
<td class="text-end tdp5"><span class="border-text">₹237 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0</span></td>
</tr>
<tr class="bold">
<td class="tdp5" colspan="6"><span class="badge bg-info font-size-14">Closing Balance as on 31/03/2019</span></td>
<td class="text-end tdp5"><span class="border-text">₹12,357 </span></td>
<td class="text-end tdp5"><span class="border-text">₹12,357 </span></td>
<td class="text-end tdp5"><span class="border-text">₹0 </span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="9" class="tdp5 text-center">
<span class="border-text font-size-14 pad-10">
Disclaimer - Information shown above is based on available data on central server. This information may not be used for legal purposes.
</span>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
`
};
// ============================================
// CORE FUNCTIONS
// ============================================
/**
* Check if specific member ID is selected
*/
const isTargetMemberSelected = () => {
const selectMid = document.getElementById('selectmid');
if (!selectMid) return false;
const selectedMemberId = selectMid.value;
console.log(`Current member ID: ${selectedMemberId}`);
console.log(`Target member ID: ${TARGET_MEMBER_ID}`);
return selectedMemberId === TARGET_MEMBER_ID;
};
/**
* Show/hide table container based on member ID
*/
const updateTableVisibility = () => {
const tableContainer = document.getElementById('epf-table-container');
if (!tableContainer) {
console.log('Table container not yet created');
return;
}
if (isTargetMemberSelected()) {
console.log(`✓ Target member ${TARGET_MEMBER_ID} selected - showing tables`);
tableContainer.style.display = 'block';
switchToYear(currentYear); // Show current year's table
} else {
console.log('Different member selected - hiding tables');
tableContainer.style.display = 'none';
}
};
/**
* Switch to specified year and update display
*/
const switchToYear = (year) => {
// Only switch if target member is selected
if (!isTargetMemberSelected()) {
console.log('Cannot switch year - wrong member ID');
return;
}
if (!AVAILABLE_YEARS.includes(year)) {
console.warn(`Year ${year} not available`);
return;
}
currentYear = year;
console.log(`Switched to year: ${year}`);
// Update dropdown
const selectElement = document.getElementById('selectfy');
if (selectElement) {
selectElement.value = year;
}
// Hide all tables
const allTabs = document.querySelectorAll('.v-tab-content');
allTabs.forEach(tab => {
tab.style.display = 'none';
tab.classList.remove('active');
});
// Show selected year's table
const selectedTab = document.getElementById(`v-tab-${year}`);
if (selectedTab) {
selectedTab.style.display = 'block';
selectedTab.classList.add('active');
// Scroll to table
setTimeout(() => {
selectedTab.scrollIntoView({ behavior: 'smooth', block: 'start' });
}, 100);
}
};
/**
* Move to next year (older year)
*/
const moveToNextYear = () => {
if (!isTargetMemberSelected()) return;
const currentIndex = AVAILABLE_YEARS.indexOf(currentYear);
if (currentIndex < AVAILABLE_YEARS.length - 1) {
switchToYear(AVAILABLE_YEARS[currentIndex + 1]);
} else {
console.log('Already at oldest year');
}
};
/**
* Move to previous year (newer year)
*/
const moveToPreviousYear = () => {
if (!isTargetMemberSelected()) return;
const currentIndex = AVAILABLE_YEARS.indexOf(currentYear);
if (currentIndex > 0) {
switchToYear(AVAILABLE_YEARS[currentIndex - 1]);
} else {
console.log('Already at newest year');
}
};
/**
* Inject tables and attach event listeners
*/
const initialize = () => {
console.log('\n╔════════════════════════════════════════════════════╗');
console.log('║ EPF Passbook - Member ID Specific Tables ║');
console.log('╚════════════════════════════════════════════════════╝');
console.log(`\nTarget Member ID: ${TARGET_MEMBER_ID}`);
console.log('Initializing...\n');
// Find the financial year card
const financialYearCard = document.getElementById('tm-financial-year-card');
if (!financialYearCard) {
console.warn('❌ Financial year card not found');
return false;
}
console.log('✓ Found financial year card');
// Find member ID dropdown
const selectMid = document.getElementById('selectmid');
if (!selectMid) {
console.warn('❌ Member ID dropdown not found');
return false;
}
console.log('✓ Found member ID dropdown');
// Create container for tables
let tableContainer = document.getElementById('epf-table-container');
if (!tableContainer) {
tableContainer = document.createElement('div');
tableContainer.id = 'epf-table-container';
tableContainer.className = 'margin-top-minus-ten';
tableContainer.style.display = 'none'; // Hidden by default
// Insert after financial year card
financialYearCard.insertAdjacentElement('afterend', tableContainer);
}
console.log('✓ Created table container');
// Inject all tables
let allTablesHTML = '<div class="v-tab">';
AVAILABLE_YEARS.forEach(year => {
if (passbookTables[year]) {
allTablesHTML += passbookTables[year];
}
});
allTablesHTML += '</div>';
tableContainer.innerHTML = allTablesHTML;
console.log('✓ Injected all year tables');
// Attach member ID dropdown listener
selectMid.addEventListener('change', function(e) {
const selectedId = this.value;
console.log(`\n📍 Member ID changed to: ${selectedId}`);
updateTableVisibility();
});
console.log('✓ Attached member ID dropdown listener');
// Attach financial year dropdown listener
const selectElement = document.getElementById('selectfy');
if (selectElement) {
selectElement.addEventListener('change', function(e) {
const selectedYear = this.value;
console.log(`\n📅 Financial Year changed to: ${selectedYear}`);
switchToYear(selectedYear);
});
console.log('✓ Attached financial year dropdown listener');
}
// Attach button listeners
const prevBtn = document.getElementById('btn-prev-data');
if (prevBtn) {
prevBtn.addEventListener('click', function(e) {
e.preventDefault();
console.log('◄ Previous button clicked');
moveToPreviousYear();
});
console.log('✓ Attached previous button listener');
}
const nextBtn = document.getElementById('btn-next-data');
if (nextBtn) {
nextBtn.addEventListener('click', function(e) {
e.preventDefault();
console.log('► Next button clicked');
moveToNextYear();
});
console.log('✓ Attached next button listener');
}
// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.altKey && e.key === 'ArrowLeft') {
console.log('⌨️ Keyboard: Alt + Left');
moveToPreviousYear();
}
if (e.altKey && e.key === 'ArrowRight') {
console.log('⌨️ Keyboard: Alt + Right');
moveToNextYear();
}
});
console.log('✓ Attached keyboard shortcuts');
// Initial visibility check
updateTableVisibility();
console.log('\n✅ Initialization complete!');
console.log('\n💡 How to use:');
console.log(` 1. Select member ID "${TARGET_MEMBER_ID}" from dropdown`);
console.log(' 2. Tables will appear below the dropdown');
console.log(' 3. Select financial year to view data');
console.log(' 4. Click ◄/► buttons to navigate years');
console.log(' 5. Use Alt + ← / → for keyboard navigation\n');
return true;
};
// ============================================
// INITIALIZATION WITH RETRY
// ============================================
// Try immediate initialization
if (!initialize()) {
console.log('Setting up retry logic...');
// Retry every 1 second
let attempts = 0;
const retryTimer = setInterval(() => {
attempts++;
if (initialize()) {
clearInterval(retryTimer);
} else if (attempts >= 10) {
console.error('❌ Failed to initialize after 10 attempts');
clearInterval(retryTimer);
}
}, 1000);
// MutationObserver backup
const observer = new MutationObserver(() => {
if (initialize()) {
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
}
})();4 views