<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SIB invoicing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- Style -->
<link rel="stylesheet" href="/css/main.css">
<!-- Scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.7/webcomponents-loader.js"></script>
<!-- Web components-->
<script type="module" src="https://unpkg.com/@startinblox/core@0.6"></script>
<script type="module" src="https://unpkg.com/@startinblox/router"></script>
<script type="module" src="https://unpkg.com/@startinblox/generator"></script>
<style>
:root{
--sib-invoicing-primary: #6259e5;
--sib-invoicing-secondary: #ffb700;
}
</style>
</head>
<body>
<main id="sib-invoicing">
<!-- widgets ==================================== -->
<sib-widget name="widget-money">
<template>
<div>${value?value:0} €</div>
</template>
</sib-widget>
<sib-widget name="widget-tva-rate">
<template>
<div>TVA ${value} %</div>
</template>
</sib-widget>
<sib-widget name="widget-invoice-number">
<template>
<div>N°${value}</div>
</template>
</sib-widget>
<sib-widget name="widget-batches">
<template>
<sib-display
class="batches-list"
data-src="${id}"
data-fields="batch-header, batch-body, batch-footer"
set-ht-total="ht-label, htAmount"
set-batch-header="title, amount"
set-batch-body="tasks"
set-batch-footer="ht-total"
value-amount="Montants"
value-ht-label="Total HT"
widget-tasks="widget-tasks"
widget-htAmount="widget-money"
></sib-display>
</template>
</sib-widget>
<sib-widget name="widget-tasks">
<template>
<sib-display
class="tasks-list"
data-src="${id}"
data-fields="price-line"
set-price-line="title, htAmount"
widget-htAmount="widget-money"
></sib-display>
</template>
</sib-widget>
<sib-widget name="widget-form-batches">
<template>
<sib-form
data-holder
naked
data-fields="batch-header, batch-body"
set-batch-header="title, amount"
set-batch-body="tasks"
widget-tasks="widget-form-tasks"
widget-title="sib-form-placeholder-text"
widget-amount="sib-display-div"
label-title="Nom du lot"
value-amount="Montants"
multiple-tasks>
</sib-form>
</template>
</sib-widget>
<sib-widget name="widget-form-tasks">
<template>
<sib-form
class="tasks-list"
data-holder
naked
data-fields="price-line"
set-price-line="title, htAmount"
widget-htAmount="sib-form-placeholder-text"
widget-title="sib-form-placeholder-text"
label-title="Tâche"
label-htAmount="Montant"
>
</sib-form>
</template>
</sib-widget>
<sib-widget name="widget-render-title">
<template>
<div><strong>Facture N°${value}</strong></div>
</template>
</sib-widget>
<sib-widget name="widget-render-date">
<template>
<div><strong>Date :</strong> ${value}</div>
</template>
</sib-widget>
<sib-widget name="widget-render-metadata">
<template>
<div>
<div class="invoice-render__fees">
<p>Règlement à réception de la facture</p>
<p>Intérêts de retard : 6% / an</p>
<p>Une indemnité forfaitaire de 40€ sera exigée en sus de la pénalité de retard dès le premier jour de retard.</p>
</div>
<div class="invoice-render__rib">
<div><strong>Règlement par virement :</strong></div>
<table>
<tr>
<td>BIC</td>
<td>CMCIFR2A</td>
</tr>
<tr>
<td>IBAN</td>
<td>FR76 1027 8060 8200 0205 5370 166</td>
</tr>
</table>
</div>
</div>
</template>
</sib-widget>
<sib-widget name="widget-embed-drive">
<template>
<embed src="${value}" width="560px" height="800px"/>
</template>
</sib-widget>
<!-- /widgets ==================================== -->
<!-- customer ==================================== -->
<section id="clients-invoices" class="invoices-list invoices-list--clients">
<header>
<h2>Factures pour le client</h2>
<sib-router default-route="invoice-list">
<sib-route name="invoice-list"></sib-route>
<sib-route name="add-invoice" class="button">Créer une nouvelle facture</sib-route>
<sib-route name="show-invoice" id-prefix="http://127.0.0.1:8000/customer-invoices/"></sib-route>
<sib-route name="edit-invoice" id-prefix="http://127.0.0.1:8000/customer-invoices/"></sib-route>
<sib-route name="download-invoice" id-prefix="http://127.0.0.1:8000/customer-invoices/"></sib-route>
</sib-router>
</header>
<dialog id="add-invoice" class="invoice-form">
<h2>Créer une nouvelle facture</h2>
<sib-form
data-src="http://127.0.0.1:8000/customer-invoices/"
data-fields="first-line, second-line, batches, last-line"
set-first-line="title, identifier"
set-second-line="state, invoicingDate"
set-last-line="tvaRate, additionalText"
label-title="Nom de la facture"
label-identifier="Identifiant"
label-state="Statut"
label-invoicingDate="Date"
label-tvaRate="TVA"
label-additionalText="Mention Libre"
widget-batches="widget-form-batches"
widget-invoicingDate="sib-form-date"
widget-tvaRate="sib-form-number"
multiple-batches
next="invoice-list"
></sib-form>
</dialog>
<dialog id="edit-invoice" class="invoice-form">
<h2>Modifier la facture</h2>
<sib-form
bind-resources
data-fields="first-line, second-line, batches, last-line"
set-first-line="title, identifier"
set-second-line="state, invoicingDate"
set-last-line="tvaRate, additionalText"
label-title="Nom de la facture"
label-identifier="Identifiant"
label-state="Statut"
label-invoicingDate="Date"
label-tvaRate="TVA"
label-additionalText="Mention Libre"
widget-batches="widget-form-batches"
widget-invoicingDate="sib-form-date"
widget-tvaRate="sib-form-number"
multiple-batches
next="invoice-list"
></sib-form>
</dialog>
<sib-display id="invoice-list"
class="invoices-list__item"
data-src="http://127.0.0.1:8000/customer-invoices/"
data-fields="invoice-title, invoice-hidden"
set-invoice-title="invoice-main, invoice-aside"
set-invoice-main="invoice-header, invoice-footer"
set-invoice-header="title, identifier"
set-invoice-footer="invoicingDate, htAmount"
set-invoice-aside="state"
set-invoice-hidden="actions, batches, invoice-totals"
set-actions="edit, show, download, duplicate"
set-invoice-totals="totals-header, ht-total, tva-total, ttc-total"
set-ht-total="ht-label, htAmount"
set-tva-total="tvaRate, tvaAmount"
set-ttc-total="ttc-label, ttcAmount"
value-totals-header="TOTAL DE LA FACTURE"
value-ht-label="Total HT"
value-ttc-label="Total TTC"
widget-batches="widget-batches"
widget-htAmount="widget-money"
widget-tvaAmount="widget-money"
widget-ttcAmount="widget-money"
widget-tvaRate="widget-tva-rate"
widget-identifier="widget-invoice-number"
label-edit="Éditer"
label-show="Aperçu client"
label-download="Télécharger"
label-duplicate="Dupliquer"
action-edit="edit-invoice"
action-show="show-invoice"
action-download="download-invoice"
action-duplicate="duplicate-invoice"
></sib-display>
<dialog id="download-invoice">
<h2>Téléchargement...</h2>
<p>Disponible bientôt !</p>
<!-- <sib-pdf-generator source="#print" buttonText="Télécharger la facture"></sib-pdf-generator> -->
</dialog>
<!-- render -->
<dialog class="invoice-dialog" id="show-invoice">
<div id="print"></div>
<sib-template-renderer bind-resources target="#print">
<template>
<div class="invoice-render">
<img src="/images/happy-dev-logo.png" width="200" />
<sib-display
class="display-invoice"
data-src="${resource['@id']}"
data-fields="invoice-head, batches, invoice-payment, invoice-footer"
set-invoice-head="invoice-header-left, invoice-header-right"
set-invoice-header-left="identifier, invoicingDate"
set-invoice-header-right="customer-infos"
set-customer-infos="customer.name, customer.address"
set-invoice-payment="metadata, invoice-totals"
set-invoice-totals="ht-total, tva-total, ttc-total, tva-notice"
set-ht-total="ht-label, htAmount"
set-tva-total="tvaRate, tvaAmount"
set-ttc-total="ttc-label, ttcAmount"
value-ht-label="Total HT"
value-ttc-label="Total TTC"
value-tva-notice="TVA récupérable à l'encaissement"
widget-identifier="widget-render-title"
widget-invoicingDate="widget-render-date"
widget-metadata="widget-render-metadata"
widget-batches="widget-batches"
widget-htAmount="widget-money"
widget-tvaAmount="widget-money"
widget-ttcAmount="widget-money"
widget-tvaRate="widget-tva-rate"
></sib-display>
<div class="invoice-render__footer">
<div class="invoice-render__hd-address">
<p><strong>Happy Dev</strong></p>
<p>75 rue du Javelot</p>
<p>75013 Paris</p>
<p>contact@happy-dev.fr</p>
</div>
<div class="invoice-render__hd-legal">
<p><strong>SIRET : </strong>81314060500011</p>
<p><strong>N° de TVA intracommunautaire : </strong>FR 61 813140605</p>
<p>SAS à capital variable enregistrée au RCS de Paris</p>
</div>
</div>
</div>
</template>
</sib-template-renderer>
</dialog>
<!-- /render -->
</section>
<!-- /customer ==================================== -->
<!-- freelance ==================================== -->
<section id="freelances-invoices" class="invoices-list invoices-list--freelances">
<header>
<h2>Factures des indépendants</h2>
<sib-router default-route="freelance-invoice-list">
<sib-route name="freelance-invoice-list"></sib-route>
<sib-route name="edit-freelance-invoice"></sib-route>
<sib-route name="add-freelance-invoice" class="button">Importer une facture</sib-route>
</sib-router>
</header>
<dialog id="add-freelance-invoice" class="invoice-form">
<h2>Importer une facture</h2>
<sib-form
data-src="http://127.0.0.1:8000/freelance-invoices/"
data-fields="first-line, second-line, uploadUrl"
set-first-line="freelanceFullname, identifier"
set-second-line="invoicingDate, htAmount"
label-freelanceFullname="Nom du prestataire"
label-identifier="Numéro de la prestation"
label-invoicingDate="Date de facturation"
label-uploadUrl="Lien de la facture"
label-htAmount="Montant HT"
widget-invoicingDate="sib-form-date"
widget-htAmount="sib-form-number"
next="freelance-invoice-list"
></sib-form>
</dialog>
<dialog id="edit-freelance-invoice" class="invoice-form">
<h2>Modifier une facture</h2>
<sib-form
bind-resources
data-fields="first-line, second-line, uploadUrl"
set-first-line="freelanceFullname, identifier"
set-second-line="invoicingDate, htAmount"
label-freelanceFullname="Nom du prestataire"
label-identifier="Numéro de la prestation"
label-invoicingDate="Date de facturation"
label-uploadUrl="Lien de la facture"
label-htAmount="Montant HT"
widget-invoicingDate="sib-form-date"
widget-htAmount="sib-form-number"
next="freelance-invoice-list"
></sib-form>
</dialog>
<sib-display
id="freelance-invoice-list"
data-src="http://127.0.0.1:8000/freelance-invoices/"
data-fields="invoice-title, invoice-hidden"
set-invoice-title="invoice-main, invoice-aside"
set-invoice-main="invoice-header, invoice-footer"
set-invoice-aside="state"
set-invoice-header="freelanceFullname, identifier"
set-invoice-footer="invoicingDate, htAmount"
set-invoice-hidden="actions, uploadUrl"
set-actions="edit, duplicate"
label-edit="Éditer"
label-duplicate="Dupliquer"
action-edit="edit-freelance-invoice"
action-duplicate="duplicate-invoice"
widget-htAmount="widget-money"
widget-uploadUrl="widget-embed-drive"
></sib-display>
</section>
<!-- /freelance ==================================== -->
</main>
<script>
let root = document.querySelector('#sib-invoicing')
root.addEventListener('click', (e) => {
if(e.target && e.target.closest('[name="invoice-title"]')){
let invoice = e.target.closest('[name="invoice-title"]');
invoice.closest('sib-display').classList.toggle('invoice-visible')
}
})
</script>
</body>
</html>