Stay up to date with the latest insights and performance metrics on the eInvoicing Monitoring Dashboard. |
<script src="/digital-building-blocks/sites/download/attachments/879493335/checkHeader.js"></script>
<link rel="stylesheet" href="/digital-building-blocks/sites/download/attachments/879493337/style-monitoring-dashboards.css">
<section class="section" id="overview">
<div class="container">
<div class="cols justify-content-between">
<div class="col-3 left-col">
<ul class="nav-list">
<li class="nav-li">
<button class="nav-btn" ref="overview">Overview</button>
</li>
<li class="nav-li">
<button class="nav-btn" ref="implementation">Implementation of Business to Government eInvoicing obligation</button>
</li>
<li class="nav-li">
<button class="nav-btn" ref="maintenance-of-kb">Maintenance of code lists in the Digital eInvoicing knowledge base</button>
</li>
<li class="nav-li">
<button class="nav-btn" ref="maintenance-of-factsheets">Maintenance of the country factsheets</button>
</li>
<li class="nav-li">
<button class="nav-btn" ref="newsletter-subscriber">Newsletter subscriber</button>
</li>
<li class="nav-li">
<button class="nav-btn" ref="reuse">Reuse</button>
</li>
</ul>
</div>
<div class="col-9 right-col">
<div class="ref-section" ref="overview">
<div class="section-card ti-te accent-light-blue">
<h4 class="section-title">Overview</h4>
<div class="section-text">
<p>The <a href="/digital-building-blocks/sites/display/DIGITAL/eInvoicing">eInvoicing</a> Digital Building Block supports public and private entities established in the EU, as well as in European Economic Area (EEA) countries participating in the programme to comply with <a href="https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX%3A32017D1870" rel="noopener noreferrer" target="_blank">EN</a>, the European Standard on electronic invoicing adopted by the European Commission on 17 October 2017.</p>
<p>Electronic invoicing is the exchange of an electronic invoice document between a supplier and a buyer. An electronic invoice (eInvoice) is an invoice that has been issued, transmitted and received in a structured data format which allows for its automatic and electronic processing, as defined in <a href="http://eur-lex.europa.eu/legal-content/NL/TXT/?uri=CELEX%3A32014L0055" rel="noopener noreferrer" target="_blank">Directive 2014/55/EU</a>.</p>
<p>The digital eInvoicing Building block aims at promoting the uptake and accelerating the use of eInvoicing in respect of the European standard, amongs both public and private entities established in the EU, as well as in participating EEA countries.</p>
<p>It serves to support public administrations in complying with EU eInvoicing legislation and helps service and solution providers adapt their services accordingly. Emphasing B2G invoicing. However eInvoicing and the European standard can also be used to enable the Government-to-Government (G2G) and Business-to-Business (B2B) communication</p>
</div>
</div>
</div>
<div class="ref-section" ref="implementation">
<div>
<iframe title="eInvoicing Monitoring" width="900" height="1190" src="https://europa.eu/webtools/crs/iframe/?oriurl=https://app.powerbi.com/view?r=eyJrIjoiZjZjNWQ1YjAtMjMyMi00YTY0LThkOTMtYmM2MjM1MzIzODdlIiwidCI6ImIyNGM4YjA2LTUyMmMtNDZmZS05MDgwLTcwOTI2ZjhkZGRiMSIsImMiOjh9" frameborder="0" allowFullScreen="true"></iframe>
</div>
</div>
<div class="ref-section" ref="maintenance-of-kb">
<div>
<iframe title="eInvoicing Monitoring" width="900" height="960" src="https://europa.eu/webtools/crs/iframe/?oriurl=https://app.powerbi.com/view?r=eyJrIjoiNWRjNGE1OTAtM2JlZC00NWRiLWJiMDQtYWM0NDllYzBmODVkIiwidCI6ImIyNGM4YjA2LTUyMmMtNDZmZS05MDgwLTcwOTI2ZjhkZGRiMSIsImMiOjh9" frameborder="0" allowFullScreen="true"></iframe>
</div>
</div>
<div class="ref-section" ref="maintenance-of-factsheets">
<div>
<iframe title="eInvoicing Monitoring" width="900" height="1090" src="https://europa.eu/webtools/crs/iframe/?oriurl=https://app.powerbi.com/view?r=eyJrIjoiMThiYTYzNTYtZjIyZS00NzEyLWE2OTgtZTk4ZjgyM2NkZjhkIiwidCI6ImIyNGM4YjA2LTUyMmMtNDZmZS05MDgwLTcwOTI2ZjhkZGRiMSIsImMiOjh9" frameborder="0" allowFullScreen="true"></iframe>
</div>
</div>
<div class="ref-section" ref="newsletter-subscriber">
<div>
<iframe title="eInvoicing Monitoring" width="900" height="1020" src="https://europa.eu/webtools/crs/iframe/?oriurl=https://app.powerbi.com/view?r=eyJrIjoiN2YzNzM5NTYtOWIyZC00NDYxLTg3MjktZWJjOWVlN2Y1MDJiIiwidCI6ImIyNGM4YjA2LTUyMmMtNDZmZS05MDgwLTcwOTI2ZjhkZGRiMSIsImMiOjh9" frameborder="0" allowFullScreen="true"></iframe>
</div>
</div>
<div class="ref-section" ref="reuse">
<div>
<iframe title="eInvoicing Monitoring" width="900" height="1570" src="https://europa.eu/webtools/crs/iframe/?oriurl=https://app.powerbi.com/view?r=eyJrIjoiZmM1NDE1Y2ItZGFkOC00NDEyLTkyNWYtMGEzNzBlZGRlYzFlIiwidCI6ImIyNGM4YjA2LTUyMmMtNDZmZS05MDgwLTcwOTI2ZjhkZGRiMSIsImMiOjh9" frameborder="0" allowFullScreen="true"></iframe>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
#overview iframe{clip-path: inset(0px 0px 65px 0px);}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const url = new URL(window.location.href);
const referenceParam = url.searchParams.get('ref');
const navBtns = document.querySelectorAll('.nav-list .nav-btn');
const ctas = document.querySelectorAll(".c-card .btn.secondary");
// Function to activate elements based on ref
function activateElements(ref, shouldScroll = false) {
const navBtn = document.querySelector(`.nav-btn[ref="${ref}"]`);
const refSection = document.querySelector(`.ref-section[ref="${ref}"]`);
if (navBtn && refSection) {
document.querySelector('.nav-list .nav-btn.active')?.classList.remove('active');
document.querySelector('.ref-section.active')?.classList.remove('active');
navBtn.classList.add('active');
refSection.classList.add('active');
// Scroll to the top of the section if shouldScroll is true
if (shouldScroll) {
window.scrollTo({ top: refSection.offsetTop - 64, behavior: 'instant' });
}
}
}
// Check if referenceParam exists and is valid
if (referenceParam && document.querySelector(`.nav-btn[ref="${referenceParam}"]`)) {
// If a valid ref exists, activate the corresponding elements and scroll
activateElements(referenceParam, true);
} else {
// If no valid ref exists, ensure 'overview' is activated if necessary
if (!referenceParam) {
url.searchParams.set('ref', 'overview');
window.history.pushState({}, '', url);
activateElements('overview'); // Scroll to 'overview' if no ref is present
}
}
// Add click event listeners to navigation buttons
navBtns.forEach(btn => {
btn.addEventListener('click', () => {
const ref = btn.getAttribute('ref');
activateElements(ref, true);
// Update the URL parameter
url.searchParams.set('ref', ref);
window.history.pushState({}, '', url);
});
});
ctas.forEach(btn => {
btn.addEventListener('click', () => {
const ref = btn.getAttribute('ref');
activateElements(ref, true);
// Update the URL parameter
url.searchParams.set('ref', ref);
window.history.pushState({}, '', url);
});
});
});
</script> |