Untitled Page

// ==UserScript==
// @name         EPFO NEW DROP DOWN YEAR
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Replace Error-NO Transations with financial-year selection
// @match        https://passbook.epfindia.gov.in/MemberPassBook/passbook*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function () {
    'use strict';

    const newDivHTML = `
        <div class="card pad-10 margin-top-ten" id="tm-financial-year-card">
            <div class="row row-pb-1">
                <div class="col-sm-6">
                    <div class="form-group row">
                        <label name="selectfy"
                               for="selectfy"
                               class="form-label texth sm-select col-md-4">
                            Select Financial Year
                        </label>

                        <div class="col-md-8" id="div-selectfy">
                            <select id="selectfy"
                                    class="form-select selectfy"
                                    aria-label="acc year">
                               
                               
                                <option value="2024">2024-2025</option>
                                <option value="2023">2023-2024</option>
                                <option value="2022">2022-2023</option>
                                <option value="2021">2021-2022</option>
                                
                                
                                
                                
                                
                               
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="form-group row">
                        <button id="btn-prev-data"
                                style="width:80px; margin-top:4px;"
                                class="btn btn-primary btn-sm ml-20 bg-color"
                                type="button">
                            <i class="fa fa-fast-backward"
                               aria-hidden="true"
                               style="font-size:18px"></i>
                        </button>

                        <button id="btn-next-data"
                                style="width:80px; margin-top:4px;"
                                class="btn btn-primary btn-sm ml-20 bg-color"
                                type="button">
                            <i class="fa fa-fast-forward"
                               aria-hidden="true"
                               style="font-size:18px"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;

    function replaceErrorDiv() {
        if (document.querySelector('#tm-financial-year-card')) {
            return;
        }

        const cardBodies = document.querySelectorAll('.card-body');

        for (const cardBody of cardBodies) {
            const text = cardBody.textContent
                .replace(/\s+/g, ' ')
                .trim()
                .toLowerCase();

            if (
                text === 'error-no transations' ||
                text === 'error-no transactions'
            ) {
                cardBody.outerHTML = newDivHTML;
                setupButtons();
                console.log('[EPFO] Error div replaced successfully.');
                break;
            }
        }
    }

    function setupButtons() {
        const select = document.querySelector('#selectfy');
        const previousButton = document.querySelector('#btn-prev-data');
        const nextButton = document.querySelector('#btn-next-data');

        if (!select || !previousButton || !nextButton) return;

        previousButton.addEventListener('click', function () {
            if (select.selectedIndex < select.options.length - 1) {
                select.selectedIndex++;
                select.dispatchEvent(
                    new Event('change', { bubbles: true })
                );
            }
        });

        nextButton.addEventListener('click', function () {
            if (select.selectedIndex > 0) {
                select.selectedIndex--;
                select.dispatchEvent(
                    new Event('change', { bubbles: true })
                );
            }
        });
    }

    replaceErrorDiv();

    // EPFO content may load later through AJAX.
    const observer = new MutationObserver(replaceErrorDiv);

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();