feat: add example in pdf and html

fix: styles dir with twig
This commit is contained in:
Matthieu Bessat 2022-02-22 13:59:24 +01:00
commit d045d04cc9
6 changed files with 222 additions and 2 deletions

View file

@ -6,6 +6,8 @@ Written in PHP.
May be adapted in the futur to allow for more use cases. May be adapted in the futur to allow for more use cases.
Currently support only the french language but you can write your own template that support your language.
Long term goal is to include this code into a bigger project that manage all the life of a freelancer Long term goal is to include this code into a bigger project that manage all the life of a freelancer
## Requirements ## Requirements

218
bill.example.html Normal file
View file

@ -0,0 +1,218 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Facture</title>
<style>
body {
background: white;
}
.container {
margin: 0 auto;
width: 80%;
}
.category {
border: 1px solid black;
margin-bottom: 1em;
}
.row {
padding: 3px 5px;
border-top: 1px dashed rgba(0, 0, 0, 0.8);
}
.row {
display: flex;
justify-content: space-between;
}
.category .row:first-of-type {
border-top: 0;
}
.category-name {
font-weight: bold;
}
.sub-total {
display: flex;
justify-content: flex-end;
}
.sub-total > div {
display: flex;
justify-content: space-between;
width: 200px;
}
.header {
display: flex;
justify-content: space-between;
}
.summary {
display: flex;
justify-content: flex-end;
}
.summary-content {
background: rgba(149, 165, 166, 0.3);
padding: 0;
border: 1px solid black;
}
.summary-content .row td {
padding: 5px;
}
.summary-content .row:first-of-type {
border-top: 0;
}
.summary-content tr td:first-of-type {
padding-right: 20px;
}
.summary-content tr td:nth-of-type(2) {
text-align: right;
}
.header-column {
list-style-type: none;
padding-left: 0em;
}
.footer {
margin-top: 60px;
font-size: 0.8em;
}
.banking {
display: flex;
}
.banking div {
margin-right: 4em;
}
</style>
</head>
<body>
<div class="container">
<h2>Facture n°2022-02-1</h2>
<div class="header">
<ul class="header-column provider">
<li>Au nom et pour le compte de :</li>
<li><b>John Doe</b></li>
<li>first address line</li>
<li>89767 City name</li>
<li><a href="telto:+2395499541">+23 95 49 95 41</a></li>
<li><a href="mailto:johndoe@example.org">johndoe@example.org</a></li>
<li>SIRET : XXXXXXX
<li>TVA intracom : FRXXXXX</li>
<li>Code NAF : 6201Z</li>
</ul>
<ul class="header-column customer">
<li>Adressé à :</li>
<li><b>My super customer</b></li>
<li>blabla bla</li>
<li>92404 Wow City</li>
<li>SIRET : XXXX
<li>TVA intracom : FRXXX</li>
<li>Contact : Alice</li>
</ul>
</div>
<p>
Le mardi 1 mars 2022, <br>
</p>
<p>
<b>Objet : Web development of a super cool app</b>
</p>
<br>
<div class="category">
<div class="row category-name">
<div class="col">
Tâche
</div>
<div class="col">
Durée (en jours)
</div>
</div>
<div class="row category-name">
The magnificient blog of your super website
</div>
<div class="row task">
<div class="col task-name">Manage articles</div>
<div class="col task-duration">1,5</div>
</div>
<div class="row task">
<div class="col task-name">RSS feed</div>
<div class="col task-duration">0,5</div>
</div>
<div class="row task">
<div class="col task-name">Beautiful reader</div>
<div class="col task-duration">0,5</div>
</div>
<div class="row task">
<div class="col task-name">External connexion</div>
<div class="col task-duration">0,9</div>
</div>
<div class="row sub-total">
<div>
<div>Sous-total</div>
<div class="sub-total-amount">3,4</div>
</div>
</div>
</div>
<div class="category">
<div class="row category-name">
<div class="col">
Tâche
</div>
<div class="col">
Durée (en jours)
</div>
</div>
<div class="row category-name">
Deployment to production
</div>
<div class="row task">
<div class="col task-name">Install a web server</div>
<div class="col task-duration">0,3</div>
</div>
<div class="row task">
<div class="col task-name">Deployment of the app</div>
<div class="col task-duration">0,5</div>
</div>
<div class="row sub-total">
<div>
<div>Sous-total</div>
<div class="sub-total-amount">0,8</div>
</div>
</div>
</div>
<div class="summary">
<table class="summary-content">
<tr class="row">
<td>Total en jours</td>
<td>4,2 j</td>
</tr>
<tr class="row">
<td>Taux journalier en euros</td>
<td>300 €</td>
</tr>
<tr class="row">
<td>TVA (0 %)</td>
<td>0 €</td>
</tr>
<tr class="row">
<td>Total TTC</td>
<td>1260 €</td>
</tr>
<tr class="row">
<td>Solde</td>
<td><b>1260 €</b></td>
</tr>
</table>
</div>
<div class="footer">
<div>Coordonnées bancaires :</div>
<div class="banking">
<div>IBAN : FR76 1142 5009 0004 2337 9133 213</div> <div>BIC/SWIFT : CEPAFRPP</div>
</div>
</div>
</div>
</body>
</html>

BIN
bill.example.pdf Normal file

Binary file not shown.

View file

@ -7,7 +7,7 @@ use Twig\Extra\Intl\IntlExtension;
require 'vendor/autoload.php'; require 'vendor/autoload.php';
$data = Yaml::parseFile('./bill.yaml'); $data = Yaml::parseFile('./bill.example.yaml');
$totalDays = 0; $totalDays = 0;
foreach ($data['categories'] as $i => $category) { foreach ($data['categories'] as $i => $category) {

View file

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Facture</title> <title>Facture</title>
<style> <style>
{% include('../styles/main.css') %} {% include('./styles/main.css') %}
</style> </style>
</head> </head>
<body> <body>