├── .gitignore
├── Dockerfile
├── README.md
├── docker-compose.yml
├── invoice
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── forms.py
    ├── migrations
    │   ├── 0001_initial.py
    │   ├── 0002_remove_lineitem_total_amount.py
    │   ├── 0003_auto_20200718_1256.py
    │   ├── 0004_auto_20200721_1509.py
    │   ├── 0005_auto_20200722_0613.py
    │   ├── 0006_invoice_status.py
    │   ├── 0007_invoice_total_amount.py
    │   └── __init__.py
    ├── models.py
    ├── templates
    │   └── invoice
    │   │   ├── base.html
    │   │   ├── invoice-create.html
    │   │   ├── invoice-list.html
    │   │   ├── pdf-template3.html
    │   │   ├── pdf_template (copy).html
    │   │   ├── pdf_template.html
    │   │   └── pdf_template2.html
    ├── tests.py
    ├── urls.py
    └── views.py
├── manage.py
├── mysite
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py
├── pixeebot.yaml
├── requirements.txt
└── static
    ├── css
        ├── SourceSansPro-Regular.ttf
        ├── bulma-calendar.min.css
        ├── invoice-template-1.css
        └── logo.png
    ├── img
        └── logo.png
    └── js
        ├── bulma-calendar.js
        └── bulma-calendar.min.js


/.gitignore:
--------------------------------------------------------------------------------
1 | db.sqlite3
2 | __pycache__
3 | *.pyc
4 | 
5 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM python:3
2 | ENV PYTHONUNBUFFERED=1
3 | WORKDIR /code
4 | COPY requirements.txt /code/
5 | RUN pip install -r requirements.txt
6 | COPY . /code/


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # django-invoices
 2 | Create invoices using django
 3 | 
 4 | ## Pre-requisites (linux)
 5 | * wkhtmltopdf 0.12.6 (with patched qt)
 6 | * sudo apt install wkhtmltopdf
 7 | * Using Docker `sudo docker-compose up`
 8 | 
 9 | ## Contribution
10 | For new features do raise an issue.
11 | 
12 | ## Usage
13 | 1) `python manage.py migrate`
14 | 2) `python manage.py runserver` 
15 | 3) `Go to http://localhost:8000`
16 | 
17 | ### Screenshots
18 | ![Screenshot from 2020-08-06 23-01-34](https://user-images.githubusercontent.com/30196830/89564641-ee8ad480-d83a-11ea-85b1-5d872b05a0ac.png)
19 | ![Screenshot from 2020-08-06 23-21-32](https://user-images.githubusercontent.com/30196830/89565367-162e6c80-d83c-11ea-8b5d-ed247e427dd2.png)
20 | ![Screenshot from 2020-08-06 23-23-06](https://user-images.githubusercontent.com/30196830/89565233-e7b09180-d83b-11ea-9cfd-48e537023ae6.png)
21 | 
22 | ### Promo Video 
23 | [Youtube](https://youtu.be/JtR0sOa4t_k)
24 | 


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: "3.9"
 2 |    
 3 | services:
 4 |   db:
 5 |     image: postgres
 6 |     volumes:
 7 |       - ./data/db:/var/lib/postgresql/data
 8 |     environment:
 9 |       - POSTGRES_DB=postgres
10 |       - POSTGRES_USER=postgres
11 |       - POSTGRES_PASSWORD=postgres
12 |   web:
13 |     build: .
14 |     container_name: invoice_service
15 |     command: bash -c "python manage.py migrate && python manage.py runserver 0.0.0.0:8000"
16 |     volumes:
17 |       - .:/code
18 |     ports:
19 |       - "8000:8000"
20 |     depends_on:
21 |       - db


--------------------------------------------------------------------------------
/invoice/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amaanabbasi/django-invoices/0e3b6f2ffa47646799b7adddbd6b7d46e5b78fef/invoice/__init__.py


--------------------------------------------------------------------------------
/invoice/admin.py:
--------------------------------------------------------------------------------
1 | from django.contrib import admin
2 | 
3 | from .models import Invoice, LineItem
4 | 
5 | admin.site.register(Invoice)
6 | admin.site.register(LineItem)
7 | # Register your models here.
8 | 


--------------------------------------------------------------------------------
/invoice/apps.py:
--------------------------------------------------------------------------------
1 | from django.apps import AppConfig
2 | 
3 | 
4 | class InvoiceConfig(AppConfig):
5 |     name = 'invoice'
6 | 


--------------------------------------------------------------------------------
/invoice/forms.py:
--------------------------------------------------------------------------------
 1 | from django import forms
 2 | from django.forms import formset_factory
 3 | from .models import Invoice
 4 | class InvoiceForm(forms.Form):
 5 |     
 6 |         # fields = ['customer', 'message']
 7 |     customer = forms.CharField(
 8 |         label='Cusomter',
 9 |         widget=forms.TextInput(attrs={
10 |             'class': 'form-control',
11 |             'placeholder': 'Customer/Company Name',
12 |             'rows':1
13 |         })
14 |     )
15 |     customer_email = forms.CharField(
16 |         label='Customer Email',
17 |         widget=forms.TextInput(attrs={
18 |             'class': 'form-control',
19 |             'placeholder': 'customer@company.com',
20 |             'rows':1
21 |         })
22 |     )
23 |     billing_address = forms.CharField(
24 |         label='Billing Address',
25 |         widget=forms.TextInput(attrs={
26 |             'class': 'form-control',
27 |             'placeholder': '',
28 |             'rows':1
29 |         })
30 |     )
31 |     message = forms.CharField(
32 |         label='Message/Note',
33 |         widget=forms.TextInput(attrs={
34 |             'class': 'form-control',
35 |             'placeholder': 'message',
36 |             'rows':1
37 |         })
38 |     )
39 | 
40 | class LineItemForm(forms.Form):
41 |     
42 |     service = forms.CharField(
43 |         label='Service/Product',
44 |         widget=forms.TextInput(attrs={
45 |             'class': 'form-control input',
46 |             'placeholder': 'Service Name'
47 |         })
48 |     )
49 |     description = forms.CharField(
50 |         label='Description',
51 |         widget=forms.TextInput(attrs={
52 |             'class': 'form-control input',
53 |             'placeholder': 'Enter Book Name here',
54 |             "rows":1
55 |         })
56 |     )
57 |     quantity = forms.IntegerField(
58 |         label='Qty',
59 |         widget=forms.TextInput(attrs={
60 |             'class': 'form-control input quantity',
61 |             'placeholder': 'Quantity'
62 |         }) #quantity should not be less than one
63 |     )
64 |     rate = forms.DecimalField(
65 |         label='Rate $',
66 |         widget=forms.TextInput(attrs={
67 |             'class': 'form-control input rate',
68 |             'placeholder': 'Rate'
69 |         })
70 |     )
71 |     # amount = forms.DecimalField(
72 |     #     disabled = True,
73 |     #     label='Amount $',
74 |     #     widget=forms.TextInput(attrs={
75 |     #         'class': 'form-control input',
76 |     #     })
77 |     # )
78 |     
79 | LineItemFormset = formset_factory(LineItemForm, extra=1)


--------------------------------------------------------------------------------
/invoice/migrations/0001_initial.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 2.2 on 2020-07-18 06:45
 2 | 
 3 | from django.db import migrations, models
 4 | import django.db.models.deletion
 5 | 
 6 | 
 7 | class Migration(migrations.Migration):
 8 | 
 9 |     initial = True
10 | 
11 |     dependencies = [
12 |     ]
13 | 
14 |     operations = [
15 |         migrations.CreateModel(
16 |             name='Invoice',
17 |             fields=[
18 |                 ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
19 |                 ('customer', models.CharField(max_length=100)),
20 |                 ('date', models.DateTimeField(auto_now_add=True)),
21 |                 ('due_date', models.DateTimeField()),
22 |                 ('message', models.TextField()),
23 |             ],
24 |         ),
25 |         migrations.CreateModel(
26 |             name='LineItem',
27 |             fields=[
28 |                 ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
29 |                 ('service', models.TextField()),
30 |                 ('description', models.TextField()),
31 |                 ('quantity', models.IntegerField()),
32 |                 ('rate', models.DecimalField(decimal_places=2, max_digits=6)),
33 |                 ('amount', models.DecimalField(decimal_places=2, max_digits=6)),
34 |                 ('total_amount', models.DecimalField(decimal_places=2, max_digits=6)),
35 |                 ('customer', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='invoice.Invoice')),
36 |             ],
37 |         ),
38 |     ]
39 | 


--------------------------------------------------------------------------------
/invoice/migrations/0002_remove_lineitem_total_amount.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 2.2 on 2020-07-18 06:59
 2 | 
 3 | from django.db import migrations
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('invoice', '0001_initial'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.RemoveField(
14 |             model_name='lineitem',
15 |             name='total_amount',
16 |         ),
17 |     ]
18 | 


--------------------------------------------------------------------------------
/invoice/migrations/0003_auto_20200718_1256.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 2.2 on 2020-07-18 12:56
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('invoice', '0002_remove_lineitem_total_amount'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.AlterField(
14 |             model_name='invoice',
15 |             name='date',
16 |             field=models.DateTimeField(),
17 |         ),
18 |         migrations.AlterField(
19 |             model_name='invoice',
20 |             name='due_date',
21 |             field=models.DateTimeField(blank=True, null=True),
22 |         ),
23 |         migrations.AlterField(
24 |             model_name='invoice',
25 |             name='message',
26 |             field=models.TextField(default='this is a default message.'),
27 |         ),
28 |     ]
29 | 


--------------------------------------------------------------------------------
/invoice/migrations/0004_auto_20200721_1509.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 2.2 on 2020-07-21 15:09
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('invoice', '0003_auto_20200718_1256'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.AlterField(
14 |             model_name='invoice',
15 |             name='date',
16 |             field=models.DateField(),
17 |         ),
18 |         migrations.AlterField(
19 |             model_name='invoice',
20 |             name='due_date',
21 |             field=models.DateField(blank=True, null=True),
22 |         ),
23 |     ]
24 | 


--------------------------------------------------------------------------------
/invoice/migrations/0005_auto_20200722_0613.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 2.2 on 2020-07-22 06:13
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('invoice', '0004_auto_20200721_1509'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.AddField(
14 |             model_name='invoice',
15 |             name='billing_address',
16 |             field=models.TextField(blank=True, null=True),
17 |         ),
18 |         migrations.AddField(
19 |             model_name='invoice',
20 |             name='customer_email',
21 |             field=models.EmailField(blank=True, max_length=254, null=True),
22 |         ),
23 |     ]
24 | 


--------------------------------------------------------------------------------
/invoice/migrations/0006_invoice_status.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 2.2 on 2020-07-22 17:33
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('invoice', '0005_auto_20200722_0613'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.AddField(
14 |             model_name='invoice',
15 |             name='status',
16 |             field=models.BooleanField(default=False),
17 |         ),
18 |     ]
19 | 


--------------------------------------------------------------------------------
/invoice/migrations/0007_invoice_total_amount.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 2.2 on 2020-07-26 07:02
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('invoice', '0006_invoice_status'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.AddField(
14 |             model_name='invoice',
15 |             name='total_amount',
16 |             field=models.DecimalField(blank=True, decimal_places=2, max_digits=6, null=True),
17 |         ),
18 |     ]
19 | 


--------------------------------------------------------------------------------
/invoice/migrations/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amaanabbasi/django-invoices/0e3b6f2ffa47646799b7adddbd6b7d46e5b78fef/invoice/migrations/__init__.py


--------------------------------------------------------------------------------
/invoice/models.py:
--------------------------------------------------------------------------------
 1 | from django.db import models
 2 | import datetime
 3 | # Create your models here.
 4 | class Invoice(models.Model):
 5 |     customer = models.CharField(max_length=100)
 6 |     customer_email = models.EmailField(null=True, blank=True)
 7 |     billing_address = models.TextField(null=True, blank=True)
 8 |     date = models.DateField()
 9 |     due_date = models.DateField(null=True, blank=True)
10 |     message = models.TextField(default= "this is a default message.")
11 |     total_amount = models.DecimalField(max_digits=9, decimal_places=2, blank=True, null=True)
12 |     status = models.BooleanField(default=False)
13 |     def __str__(self):
14 |         return str(self.customer)
15 |     
16 |     def get_status(self):
17 |         return self.status
18 | 
19 |     # def save(self, *args, **kwargs):
20 |         # if not self.id:             
21 |         #     self.due_date = datetime.datetime.now()+ datetime.timedelta(days=15)
22 |         # return super(Invoice, self).save(*args, **kwargs)
23 | 
24 | class LineItem(models.Model):
25 |     customer = models.ForeignKey(Invoice, on_delete=models.CASCADE)
26 |     service = models.TextField()
27 |     description = models.TextField()
28 |     quantity = models.IntegerField()
29 |     rate = models.DecimalField(max_digits=9, decimal_places=2)
30 |     amount = models.DecimalField(max_digits=9, decimal_places=2)
31 | 
32 |     def __str__(self):
33 |         return str(self.customer)
34 |    


--------------------------------------------------------------------------------
/invoice/templates/invoice/base.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>{% load static %}
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <!-- Required meta tags -->
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 8 |     <!-- Bootstrap CSS -->
 9 |      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
10 |      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
11 |      <link href="{% static 'css/bulma-calendar.min.css' %}" rel="stylesheet">
12 |      <link href="{% static 'js/bulma-calendar.min.js' %}" rel="stylesheet">
13 |      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
14 |      {% block custom_css %}{% endblock %}
15 |     <title>Django Library App</title>
16 | </head>
17 | <body>
18 |      
19 |     <div class="container">
20 |                 {% block content %}
21 |                 {% endblock %}
22 |             </div>
23 |     <footer class="footer">
24 |         <center><p class="has-text-weight-bold">Made with love  by Amaan Abbasi</p>
25 |         </center>
26 |         </footer>
27 | 
28 |     <!-- Optional JavaScript -->
29 |     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
30 |      {% block custom_js %}{% endblock %}
31 | </body>
32 | 


--------------------------------------------------------------------------------
/invoice/templates/invoice/invoice-create.html:
--------------------------------------------------------------------------------
  1 | {% extends "invoice/base.html" %}{% load bulma_tags %}
  2 | {% block content %}
  3 | <br>
  4 | <section class="hero is-fullheight">
  5 |     <div class="container">
  6 |         <div class="card white-ter">
  7 |             <div class="hero-body">
  8 |                 <form class="" method="POST" action="">{% csrf_token %}
  9 |                     <div class="columns is-centered">
 10 |                         <div class="column is-one-third">
 11 |                             {{form.customer|bulma}}
 12 |                         </div>
 13 | 
 14 |                         <div class="column is-one-third">
 15 |                             {{form.customer_email|bulma}}
 16 |                         </div>
 17 |                         <div class="column is-one-third">
 18 |                             {{form.message|bulma}}
 19 |                         </div>
 20 |                     </div>
 21 |                     <div class="columns is-centered">
 22 |                         <div class="column is-one-third">
 23 |                             {{form.billing_address|bulma}}
 24 |                         </div>
 25 |                         <div class="column is-one-third">
 26 |                             date: <input class="input" type="date" name="date">
 27 |                         </div>
 28 |                         <div class="column is-one-third">
 29 |                             due-date: <input class="input" type="date" name="due_date">
 30 |                         </div>
 31 |                     </div>
 32 | 
 33 | 
 34 |                     <table class="table is-fullwidth is-bordered is-hoverable is-striped">
 35 |                         <tbody>
 36 |                             <thead>
 37 |                                 <tr>
 38 |                                     <th>Product/Service</th>
 39 |                                     <th>Description</th>
 40 |                                     <th>QTY</th>
 41 |                                     <th>RATE</th>
 42 |                                     <th>AMOUNT$</th>
 43 |                                     <th>ADD</th>
 44 |                                 </tr>
 45 |                                 {{ formset.management_form }}
 46 |                                 {% for form in formset %}
 47 |                                 <tr>
 48 |                                     <td>{{form.service}}</td>
 49 |                                     <td>{{form.description}}</td>
 50 |                                     <td>{{form.quantity}}</td>
 51 |                                     <td>{{form.rate}}</td>
 52 |                                     <td class="amount"></td>
 53 |                                     <td>
 54 |                                         <div class="input-group-append">
 55 |                                             <button
 56 |                                                 class="button is-small btn btn-success add-form-row">+</button>&nbsp;
 57 |                                             <!-- <button class="button is-small btn btn-warning remove-form-row">-</button> -->
 58 |                                         </div>
 59 |                                     </td>
 60 |                                 </tr>
 61 |                                 {% endfor %}
 62 |                             </thead>
 63 |                         </tbody>
 64 | 
 65 |                     </table>
 66 |                     <div class="row spacer">
 67 |                         <div class="col-4 offset-2">
 68 |                             <button type="submit" class="button btn btn-block is-info is-half">Create</button>
 69 |                         </div>
 70 |                     </div>
 71 |                     <br>
 72 |                     <div class="columns">
 73 |                         <div class="column">
 74 |                             <h3 class="title is-4">Total($): <span id="total"></span></h3>
 75 |                         </div>
 76 |                     </div>
 77 |                 </form>
 78 |             </div>
 79 |         </div>
 80 |     </div>
 81 | </section>
 82 | 
 83 | 
 84 | 
 85 | {% endblock %}
 86 | 
 87 | {% block custom_js %}
 88 | <script type="text/javascript">
 89 |     $('table input').on("input", function () {
 90 |         var total = []
 91 |         var $tr = $(this).closest('tr');
 92 |         var textValue1 = $("input.rate", $tr).val();
 93 |         var textValue2 = $('input.quantity', $tr).val();
 94 |         amt = textValue1 * textValue2;
 95 |         // console.log(amt);
 96 |         $('.amount', $tr).html(amt);
 97 |         calc_total();
 98 |     });
 99 | 
100 |     function calc_total() {
101 |         var sum = 0;
102 |         $(".amount").each(function () {
103 |             sum += parseFloat($(this).text());
104 |         });
105 |         console.log(sum);
106 |         $('#total').text(sum);
107 |     }
108 | </script>
109 | 
110 | 
111 | <script type="text/javascript">
112 |     function updateElementIndex(el, prefix, ndx) {
113 |         var id_regex = new RegExp('(' + prefix + '-\\d+)');
114 |         var replacement = prefix + '-' + ndx;
115 |         if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
116 |         if (el.id) el.id = el.id.replace(id_regex, replacement);
117 |         if (el.name) el.name = el.name.replace(id_regex, replacement);
118 |     }
119 |     function cloneMore(selector, prefix) {
120 |         var newElement = $(selector).clone(true);
121 |         console.log(newElement);
122 |         var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
123 |         newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset])').each(function () {
124 |             var name = $(this).attr('name')
125 |             if (name) {
126 |                 name = name.replace('-' + (total - 1) + '-', '-' + total + '-');
127 |                 var id = 'id_' + name;
128 |                 $(this).attr({ 'name': name, 'id': id }).val('').removeAttr('checked');
129 |             }
130 |         });
131 |         newElement.find('label').each(function () {
132 |             var forValue = $(this).attr('for');
133 |             if (forValue) {
134 |                 forValue = forValue.replace('-' + (total - 1) + '-', '-' + total + '-');
135 |                 $(this).attr({ 'for': forValue });
136 |             }
137 |         });
138 |         total++;
139 |         $('#id_' + prefix + '-TOTAL_FORMS').val(total);
140 |         $(selector).after(newElement);
141 |         // $("div.form-row.button.is-primary").not(":last").hide();
142 |         // var conditionRow = $('.form-row:not(:last)');
143 |         // conditionRow.find('.button.is-primary')
144 |         // .hide();
145 |         // .removeClass('btn-success').addClass('btn-danger')
146 |         // .removeClass('add-form-row').addClass('remove-form-row')
147 |         // .html('-');
148 |         return false;
149 |     }
150 |     function deleteForm(prefix, btn) {
151 |         var total = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
152 |         if (total > 1) {
153 |             btn.closest('.form-row').remove();
154 |             var forms = $('.form-row');
155 |             $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
156 |             for (var i = 0, formCount = forms.length; i < formCount; i++) {
157 |                 $(forms.get(i)).find(':input').each(function () {
158 |                     updateElementIndex(this, prefix, i);
159 |                 });
160 |             }
161 |         }
162 |         return false;
163 |     }
164 |     $(document).on('click', '.add-form-row', function (e) {
165 |         e.preventDefault();
166 |         cloneMore('table tr:last', 'form');
167 |         return false;
168 |     });
169 |     $(document).on('click', '.remove-form-row', function (e) {
170 |         e.preventDefault();
171 |         deleteForm('form', $(this));
172 |         return false;
173 |     });
174 | 
175 | </script>
176 | {% endblock %}


--------------------------------------------------------------------------------
/invoice/templates/invoice/invoice-list.html:
--------------------------------------------------------------------------------
 1 | {% extends 'invoice/base.html' %}
 2 | {% block content %}
 3 | <div class="columns is-centered has-text-centered">
 4 |     <div class="column is-half">
 5 |         <div class="card has-background-white-ter">
 6 |             <h1 class="title is-3"></h1>
 7 |         </div>
 8 |     </div>
 9 | </div>
10 | <form action="{% url 'invoice:invoice-list' %}" method="post">{% csrf_token %}
11 |     <div class="card">
12 |         <header class="card-header">
13 |             <p class="card-header-title">
14 |                 All Orders / Change Order Status &nbsp;<button class="button is-rounded is-info">
15 |                     <a href="{% url 'invoice:invoice-create' %}" class="has-text-white">Create Invoice</a></button>
16 |             </p>
17 |         </header>
18 |         <div class="card-content">
19 |             <div class="content">
20 | 
21 |                 <table class="table is-fullwidth is-bordered is-hoverable is-striped">
22 |                     <tbody>
23 |                         <thead>
24 |                             <tr>
25 |                                 <th></th>
26 |                                 <th>INVOICE</th>
27 |                                 <th>CUSTOMER</th>
28 |                                 <th>DATE</th>
29 |                                 <th>DUE DATE</th>
30 |                                 <th>BALANCE</th>
31 |                                 <th>TOTAL</th>
32 |                                 <th>STATUS</th>
33 |                                 <th>View</th>
34 |                                 <th>DOWNLOAD</th>
35 | 
36 |                             </tr>
37 |                         </thead>
38 |                         {% for invoice in invoices %}
39 |                         <tr>
40 |                             <td><input class="checkbox" type="checkbox" value="{{invoice.id}}" name="invoice_id" size="1" />
41 |                             </td>
42 |                             <td width="1%">#{{invoice.id}}</td>
43 |                             <td width="9%">{{invoice.customer}}</td>
44 |                             <td> {{invoice.date}}</td>
45 |                             <td> {{invoice.due_date}} </td>
46 |                             <td width="1%"></td>
47 |                             <td>{{invoice.total_amount}}</td>
48 |                             <td class="level-right">
49 |                                 {% if invoice.get_status %}
50 |                                 <a class="button is-small is-success" href="#">Paid</a>
51 |                                 {% else %}
52 |                                 <a class="button is-small is-warning" href="#">Not Paid</a>
53 |                                 {% endif %}
54 |                             </td>
55 |                             <td width="1%"><a href="{% url 'invoice:invoice-detail' id=invoice.id %}">
56 |                                 <div class="button is-small is-info">View</div>
57 |                             </a></td>
58 |                             <td width="1%"><a href="{% url 'invoice:invoice-download' id=invoice.id %}">Download</a></td>
59 |                         </tr>
60 |                         {% endfor %}
61 | 
62 |                     </tbody>
63 |                 </table>
64 | 
65 |             </div>
66 |         </div>
67 |     </div><br /><br /><br />
68 |     <div class="card has-background-white-ter">
69 |         <header class="card-header">
70 |             <p class="card-header-title">
71 |                 Change Order Status
72 |             </p>
73 |         </header>
74 |         <div class="card-content">
75 |             <div class="select is-rounded">
76 |                 <select id="status" name="status">
77 |                     <option value="1">Paid</option>
78 |                     <option value="0">Not Paid</option>
79 |                 </select>
80 |             </div>
81 |             <input class="button  is-info is-rounded" type="submit" class="btn" value="Change Status" name="mybtn">
82 |         </div>
83 |     </div>
84 | </form>
85 | 
86 | {% endblock content %}


--------------------------------------------------------------------------------
/invoice/templates/invoice/pdf-template3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Example 2</title>
 6 |     <link rel="stylesheet" href="style.css" media="all" />
 7 |   </head>
 8 |   <body>
 9 |     <header class="clearfix">
10 |       <div id="logo">
11 |         <img src="logo.png">
12 |       </div>
13 |       <div id="company">
14 |         <h2 class="name">Company Name</h2>
15 |         <div>455 Foggy Heights, AZ 85004, US</div>
16 |         <div>(602) 519-0450</div>
17 |         <div><a href="mailto:company@example.com">company@example.com</a></div>
18 |       </div>
19 |       </div>
20 |     </header>
21 |     <main>
22 |       <div id="details" class="clearfix">
23 |         <div id="client">
24 |           <div class="to">INVOICE TO:</div>
25 |           <h2 class="name">John Doe</h2>
26 |           <div class="address">796 Silver Harbour, TX 79273, US</div>
27 |           <div class="email"><a href="mailto:john@example.com">john@example.com</a></div>
28 |         </div>
29 |         <div id="invoice">
30 |           <h1>INVOICE 3-2-1</h1>
31 |           <div class="date">Date of Invoice: 01/06/2014</div>
32 |           <div class="date">Due Date: 30/06/2014</div>
33 |         </div>
34 |       </div>
35 |       <table border="0" cellspacing="0" cellpadding="0">
36 |         <thead>
37 |           <tr>
38 |             <th class="no">#</th>
39 |             <th class="desc">DESCRIPTION</th>
40 |             <th class="unit">UNIT PRICE</th>
41 |             <th class="qty">QUANTITY</th>
42 |             <th class="total">TOTAL</th>
43 |           </tr>
44 |         </thead>
45 |         <tbody>
46 |           <tr>
47 |             <td class="no">01</td>
48 |             <td class="desc"><h3>Website Design</h3>Creating a recognizable design solution based on the company's existing visual identity</td>
49 |             <td class="unit">$40.00</td>
50 |             <td class="qty">30</td>
51 |             <td class="total">$1,200.00</td>
52 |           </tr>
53 |           <tr>
54 |             <td class="no">02</td>
55 |             <td class="desc"><h3>Website Development</h3>Developing a Content Management System-based Website</td>
56 |             <td class="unit">$40.00</td>
57 |             <td class="qty">80</td>
58 |             <td class="total">$3,200.00</td>
59 |           </tr>
60 |           <tr>
61 |             <td class="no">03</td>
62 |             <td class="desc"><h3>Search Engines Optimization</h3>Optimize the site for search engines (SEO)</td>
63 |             <td class="unit">$40.00</td>
64 |             <td class="qty">20</td>
65 |             <td class="total">$800.00</td>
66 |           </tr>
67 |         </tbody>
68 |         <tfoot>
69 |           <tr>
70 |             <td colspan="2"></td>
71 |             <td colspan="2">SUBTOTAL</td>
72 |             <td>$5,200.00</td>
73 |           </tr>
74 |           <tr>
75 |             <td colspan="2"></td>
76 |             <td colspan="2">TAX 25%</td>
77 |             <td>$1,300.00</td>
78 |           </tr>
79 |           <tr>
80 |             <td colspan="2"></td>
81 |             <td colspan="2">GRAND TOTAL</td>
82 |             <td>$6,500.00</td>
83 |           </tr>
84 |         </tfoot>
85 |       </table>
86 |       <div id="thanks">Thank you!</div>
87 |       <div id="notices">
88 |         <div>NOTICE:</div>
89 |         <div class="notice">A finance charge of 1.5% will be made on unpaid balances after 30 days.</div>
90 |       </div>
91 |     </main>
92 |     <footer>
93 |       Invoice was created on a computer and is valid without the signature and seal.
94 |     </footer>
95 |   </body>
96 | </html>


--------------------------------------------------------------------------------
/invoice/templates/invoice/pdf_template (copy).html:
--------------------------------------------------------------------------------
 1 | <head>
 2 | <style>
 3 |     @page {
 4 |         size: a4 portrait;
 5 |         @frame header_frame {           /* Static Frame */
 6 |             -pdf-frame-content: header_content;
 7 |             left: 50pt; width: 512pt; top: 50pt; height: 40pt;
 8 |         }
 9 |         @frame content_frame {          /* Content Frame */
10 |             left: 50pt; width: 512pt; top: 90pt; height: 632pt;
11 |         }
12 |         @frame footer_frame {           /* Another static Frame */
13 |             -pdf-frame-content: footer_content;
14 |             left: 50pt; width: 512pt; top: 772pt; height: 20pt;
15 |         }
16 |     }
17 | </style>
18 | </head>
19 | 
20 | <body>
21 |     <!-- Content for Static Frame 'header_frame' -->
22 |     <div id="header_content">
23 |     	<h3>Dennnis Ivanov Company</h3>
24 |     </div>
25 | 
26 |     <!-- Content for Static Frame 'footer_frame' -->
27 |     <div id="footer_content">(c) - page <pdf:pagenumber>
28 |         of <pdf:pagecount>
29 |     </div>
30 | 
31 |     <!-- HTML Content -->
32 |     <table>
33 |     		<tr>
34 |     			<td>{{address}}</td>
35 |     			<td>{{phone}}</td>
36 |     		</tr>
37 |     		<tr>
38 |     			<td>{{city}} {{state}},</td>
39 |     			<td>{{email}}</td>
40 |     		</tr>
41 |     		<tr>
42 |     			<td>{{zipcode}}</td>
43 |     			<td>{{website}}</td>
44 |     		</tr>
45 |     </table>
46 | 
47 |     <hr>
48 | 
49 |     <table>
50 |     	<tr>
51 |  
52 |     		<th>Product</th>
53 |     		<th>Price</th>
54 |     		<th>Quantity</th>
55 |     		<th>Total</th>
56 |     	</tr>
57 |     	<tr>
58 |  
59 |     		<td>Hosting Plan</td>
60 |     		<td>$7.99</td>
61 |     		<td>2</td>
62 |     		<td>$15.98</td>
63 |     	</tr>
64 |     	<tr>
65 |  
66 |     		<td>consultation </td>
67 |     		<td>$225</td>
68 |     		<td>1</td>
69 |     		<td>$225</td>
70 |     	</tr>
71 |     	<tr>
72 |  
73 |     		<td>Service Hours</td>
74 |     		<td>$189</td>
75 |     		<td>45.7</td>
76 |     		<td>$8637.30</td>
77 |     	</tr>
78 |     </table>
79 | 
80 |     <hr>
81 | 
82 |     <p><strong>Total: $8878.28</strong></p>
83 | </body>
84 | </html>


--------------------------------------------------------------------------------
/invoice/templates/invoice/pdf_template.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>{% load static%}
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Example 2</title>
 6 |     <link rel="stylesheet" href="{%static 'css/invoice-template-1.css' %}" media="all" />
 7 |   </head>
 8 |   <body>
 9 |     <header class="clearfix">
10 |       <div id="logo">
11 |         <img src="{% static 'img/logo.png'%}" style="width: 134px; height:116px"> 
12 |       </div>
13 |       <div id="company">
14 |         <h1 class="name">{{company.name}}</h1>
15 |         <div>{{company.address}}</div>
16 |         <div>{{company.phone}}</div>
17 |         <div><a href="mailto:{{company.email}}">{{company.email}}</a></div>
18 |       </div>
19 |       </div>
20 |     </header>
21 |     <main>
22 |       <div id="details" class="clearfix">
23 |         <div id="client">
24 |           <div class="to">INVOICE TO:</div>
25 |           <h2 class="name">{{customer}}</h2>
26 |           <div class="address">{{billing_address}}</div>
27 |           <div class="email"><a href="mailto:{{customer_email}}">{{customer_email}}</a></div>
28 |         </div>
29 |         <div id="invoice">
30 |           <h1>#{{invoice_id}}</h1>
31 |           <div class="date">Date of Invoice: {{date}}</div>
32 |           <div class="date">Due Date: {{due_date}}</div>
33 |         </div>
34 |       </div>
35 |       <table border="0" cellspacing="0" cellpadding="0">
36 |         <thead>
37 |           <tr>
38 |             <th class="no">#</th>
39 |             <th class="desc">DESCRIPTION</th>
40 |             <th class="unit">RATE</th>
41 |             <th class="qty">QUANTITY</th>
42 |             <th class="total">TOTAL</th>
43 |           </tr>
44 |         </thead>
45 |         <tbody>
46 | 			{% for item in lineitem %}
47 |           <tr>
48 |             <td class="no">{{forloop.counter}}</td>
49 |             <td class="desc">{{item.description}}</td>
50 |             <td class="unit">${{item.rate}}</td>
51 |             <td class="qty">{{item.quantity}}</td>
52 |             <td class="total">${{item.amount}}</td>
53 | 		  </tr>
54 | 		  {% endfor %}
55 |         </tbody>
56 |         <tfoot>
57 |           <tr>
58 |             <td colspan="2"></td>
59 |             <td colspan="2">SUBTOTAL</td>
60 |             <td>${{invoice_total}}</td>
61 |           </tr>
62 |           <tr>
63 |             <td colspan="2"></td>
64 |             <td colspan="2">TAX 0%</td>
65 |             <td>${{invoice_total}}</td>
66 |           </tr>
67 |           <tr>
68 |             <td colspan="2"></td>
69 |             <td colspan="2">GRAND TOTAL</td>
70 |             <td>${{invoice_total}}</td>
71 |           </tr>
72 |         </tfoot>
73 |       </table>
74 |       <div id="thanks">Thank you!</div>
75 |       <div id="notices">
76 |         <div>NOTICE:</div>
77 |         <div class="notice">A finance charge of 1.5% will be made on unpaid balances after 30 days.</div>
78 |       </div>
79 |     </main>
80 |     <footer>
81 |       Invoice was created on a computer and is valid without the signature and seal.
82 |     </footer>
83 |   </body>
84 | </html>


--------------------------------------------------------------------------------
/invoice/templates/invoice/pdf_template2.html:
--------------------------------------------------------------------------------
  1 | {% extends 'base.html' %}
  2 | 
  3 | <body>
  4 |    <div class="container invoice">
  5 |     <div class="invoice-header">
  6 |       <div class="row">
  7 |         <div class="col-xs-8">
  8 |           <h1>Invoice <small>With Credit</small></h1>
  9 |           <h4 class="text-muted">NO: 554775/R1 | Date: 01/01/2015</h4>
 10 |         </div>
 11 |         <div class="col-xs-4">
 12 |           <div class="media">
 13 |             <div class="media-left">
 14 |               <img class="media-object logo" src="https://dummyimage.com/70x70/000/fff&text=ACME" />
 15 |             </div>
 16 |             <ul class="media-body list-unstyled">
 17 |               <li><strong>Acme Corporation</strong></li>
 18 |               <li>Software Development</li>
 19 |               <li>Field 3, Moon</li>
 20 |               <li>info@acme.com</li>
 21 |             </ul>
 22 |           </div>
 23 |         </div>
 24 |       </div>
 25 |     </div>
 26 |     <div class="invoice-body">
 27 |       <div class="row">
 28 |         <div class="col-xs-5">
 29 |           <div class="panel panel-default">
 30 |             <div class="panel-heading">
 31 |               <h3 class="panel-title">Company Details</h3>
 32 |             </div>
 33 |             <div class="panel-body">
 34 |               <dl class="dl-horizontal">
 35 |                 <dt>Name</dt>
 36 |                 <dd><strong>Acme Corporation</strong></dd>
 37 |                 <dt>Industry</dt>
 38 |                 <dd>Software Development</dd>
 39 |                 <dt>Address</dt>
 40 |                 <dd>Field 3, Moon</dd>
 41 |                 <dt>Phone</dt>
 42 |                 <dd>123.4456.4567</dd>
 43 |                 <dt>Email</dt>
 44 |                 <dd>mainl@acme.com</dd>
 45 |                 <dt>Tax NO</dt>
 46 |                 <dd class="mono">123456789</dd>
 47 |                 <dt>Tax Office</dt>
 48 |                 <dd>A' Moon</dd>
 49 |             </div>
 50 |           </div>
 51 |         </div>
 52 |         <div class="col-xs-7">
 53 |           <div class="panel panel-default">
 54 |             <div class="panel-heading">
 55 |               <h3 class="panel-title">Customer Details</h3>
 56 |             </div>
 57 |             <div class="panel-body">
 58 |               <dl class="dl-horizontal">
 59 |                 <dt>Name</dt>
 60 |                 <dd>Microsoft Corporation</dd>
 61 |                 <dt>Industry</dt>
 62 |                 <dd>Software Development</dd>
 63 |                 <dt>Address</dt>
 64 |                 <dd>One Microsoft Way Redmond, WA 98052-7329, USA</dd>
 65 |                 <dt>Phone</dt>
 66 |                 <dd>(425) 882-8080</dd>
 67 |                 <dt>Email</dt>
 68 |                 <dd>contact@microsoft.com</dd>
 69 |                 <dt>Tax NO</dt>
 70 |                 <dd class="mono">123456789</dd>
 71 |                 <dt>&nbsp;</dt>
 72 |                 <dd>&nbsp;</dd>
 73 |             </div>
 74 |           </div>
 75 |         </div>
 76 |       </div>
 77 |       <div class="panel panel-default">
 78 |         <div class="panel-heading">
 79 |           <h3 class="panel-title">Services / Products</h3>
 80 |         </div>
 81 |         <table class="table table-bordered table-condensed">
 82 |           <thead>
 83 |             <tr>
 84 |               <th>Item / Details</th>
 85 |               <th class="text-center colfix">Unit Cost</th>
 86 |               <th class="text-center colfix">Sum Cost</th>
 87 |               <th class="text-center colfix">Discount</th>
 88 |               <th class="text-center colfix">Tax</th>
 89 |               <th class="text-center colfix">Total</th>
 90 |             </tr>
 91 |           </thead>
 92 |           <tbody>
 93 |             <tr>
 94 |               <td>
 95 |                 Lorem Ipsum Dolor
 96 |                 <br>
 97 |                 <small class="text-muted">The best lorem in town, try it now or leave forever</small>
 98 |               </td>
 99 |               <td class="text-right">
100 |                 <span class="mono">$1,000.00</span>
101 |                 <br>
102 |                 <small class="text-muted">Before Tax</small>
103 |               </td>
104 |               <td class="text-right">
105 |                 <span class="mono">$18,000.00</span>
106 |                 <br>
107 |                 <small class="text-muted">18 Units</small>
108 |               </td>
109 |               <td class="text-right">
110 |                 <span class="mono">- $1,800.00</span>
111 |                 <br>
112 |                 <small class="text-muted">Special -10%</small>
113 |               </td>
114 |               <td class="text-right">
115 |                 <span class="mono">+ $3,240.00</span>
116 |                 <br>
117 |                 <small class="text-muted">VAT 20%</small>
118 |               </td>
119 |               <td class="text-right">
120 |                 <strong class="mono">$19,440.00</strong>
121 |                 <br>
122 |                 <small class="text-muted mono">$16,200.00</small>
123 |               </td>
124 |             </tr>
125 |   
126 |             <tr>
127 |               <td>
128 |                 Sit Amet Dolo
129 |                 <br>
130 |                 <small class="text-muted">Now you may sit</small>
131 |               </td>
132 |               <td class="text-right">
133 |                 <span class="mono">$120.00</span>
134 |                 <br>
135 |                 <small class="text-muted">Before Tax</small>
136 |               </td>
137 |               <td class="text-right">
138 |                 <span class="mono">$240.00</span>
139 |                 <br>
140 |                 <small class="text-muted">2 Units</small>
141 |               </td>
142 |               <td class="text-right">
143 |                 <span class="mono">- $0.00</span>
144 |                 <br>
145 |                 <small class="text-muted">-</small>
146 |               </td>
147 |               <td class="text-right">
148 |                 <span class="mono">+ $72.00</span>
149 |                 <br>
150 |                 <small class="text-muted">VAT:20% S:10%</small>
151 |               </td>
152 |               <td class="text-right">
153 |                 <strong class="mono">$312.00</strong>
154 |                 <br>
155 |                 <small class="text-muted mono">$240.00</small>
156 |               </td>
157 |             </tr>
158 |           </tbody>
159 |         </table>
160 |       </div>
161 |       <div class="panel panel-default">
162 |         <table class="table table-bordered table-condensed">
163 |           <thead>
164 |             <tr>
165 |               <td class="text-center col-xs-1">Sub Total</td>
166 |               <td class="text-center col-xs-1">Discount</td>
167 |               <td class="text-center col-xs-1">Total</td>
168 |               <td class="text-center col-xs-1">Tax</td>
169 |               <td class="text-center col-xs-1">Final</td>
170 |             </tr>
171 |           </thead>
172 |           <tbody>
173 |             <tr>
174 |               <th class="text-center rowtotal mono">$18,240.00</th>
175 |               <th class="text-center rowtotal mono">-$1,800.00</th>
176 |               <th class="text-center rowtotal mono">$16,440.00</th>
177 |               <th class="text-center rowtotal mono">$3,312.00</th>
178 |               <th class="text-center rowtotal mono">$19,752.00</th>
179 |             </tr>
180 |           </tbody>
181 |         </table>
182 |       </div>
183 |       <div class="row">
184 |         <div class="col-xs-7">
185 |           <div class="panel panel-default">
186 |             <div class="panel-body">
187 |               <i>Comments / Notes</i>
188 |               <hr style="margin:3px 0 5px" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit repudiandae numquam sit facere blanditiis, quasi distinctio ipsam? Libero odit ex expedita, facere sunt, possimus consectetur dolore, nobis iure amet vero.
189 |             </div>
190 |           </div>
191 |         </div>
192 |         <div class="col-xs-5">
193 |           <div class="panel panel-default">
194 |             <div class="panel-heading">
195 |               <h3 class="panel-title">Payment Method</h3>
196 |             </div>
197 |             <div class="panel-body">
198 |               <p>For your convenience, you may deposite the final ammount at one of our banks</p>
199 |               <ul class="list-unstyled">
200 |                 <li>Alpha Bank - <span class="mono">MO123456789456123</span></li>
201 |                 <li>Beta Bank - <span class="mono">MO123456789456123</span></li>
202 |                 <li>Gamma Bank - <span class="mono">MO123456789456123</span></li>
203 |               </ul>
204 |             </div>
205 |           </div>
206 |         </div>
207 |       </div>
208 |   
209 |     </div>
210 |     <div class="invoice-footer">
211 |       Thank you for choosing our services.
212 |       <br/> We hope to see you again soon
213 |       <br/>
214 |       <strong>~ACME~</strong>
215 |     </div>
216 |   </div>
217 |     
218 | </body>
219 | 


--------------------------------------------------------------------------------
/invoice/tests.py:
--------------------------------------------------------------------------------
 1 | from django.test import TestCase
 2 | from .forms import InvoiceForm, LineItemFormset
 3 | from django.urls import reverse
 4 | 
 5 |   
 6 | # Create your tests here.
 7 | class CreateInvoiceViewTest(TestCase):
 8 |     def test_full_form(self):
 9 |         data =  {
10 |             'customer':'Xyz Company',
11 |             'customer_email':'customer@company.com',
12 |             'billing_address':'C-7, mg road 25',
13 |             'date':'2020-07-21',
14 |             'due_date':'2020-08-10',
15 |             'message':'some default message',
16 |             'form-TOTAL_FORMS': '2',
17 |             'form-INITIAL_FORMS': '0',
18 |             'form-MIN_NUM_FORMS': '0',
19 |             'form-MAX_NUM_FORMS': '1000',
20 |             'form-0-service': 'Security Guards',
21 |             'form-0-description': '1400 2100 Security Guards',
22 |             'form-0-quantity': '1',
23 |             'form-0-rate': '16.85',
24 |             'form-1-service': 'Security Guards 1',
25 |             'form-1-description': '1400 2100 Security Guards 1',
26 |             'form-1-quantity': '1',
27 |             'form-1-rate': '18.85',
28 |         }
29 |         response = self.client.post(reverse('invoice:invoice-create'),data=data)
30 |         self.assertEqual(response.status_code, 302)
31 | 
32 | 
33 | class InvoiceListViewTest(TestCase):
34 |     def test_post_method(self):
35 |         data = {
36 |             'invoice_id': ['2','3'],
37 |             'status': '1',
38 |         }
39 | 
40 |         response = self.client.post(reverse('invoice:invoice-list'), data=data)
41 |         self.assertEqual(response.status_code, 302)                    


--------------------------------------------------------------------------------
/invoice/urls.py:
--------------------------------------------------------------------------------
 1 | from django.contrib import admin
 2 | from django.urls import path
 3 | from .views import InvoiceListView, createInvoice, generate_PDF, view_PDF
 4 | 
 5 | app_name = 'invoice'
 6 | urlpatterns = [
 7 |     path('', InvoiceListView.as_view(), name="invoice-list"),
 8 |     path('create/', createInvoice, name="invoice-create"),
 9 |     path('invoice-detail/<id>', view_PDF, name='invoice-detail'),
10 |     path('invoice-download/<id>', generate_PDF, name='invoice-download')
11 | ]
12 | 


--------------------------------------------------------------------------------
/invoice/views.py:
--------------------------------------------------------------------------------
  1 | from django.shortcuts import render, redirect, get_object_or_404, reverse
  2 | from django.template.loader import get_template
  3 | from django.http import HttpResponse
  4 | from django.views import View
  5 | from .models import LineItem, Invoice
  6 | from .forms import LineItemFormset, InvoiceForm
  7 | 
  8 | import pdfkit
  9 | 
 10 | class InvoiceListView(View):
 11 |     def get(self, *args, **kwargs):
 12 |         invoices = Invoice.objects.all()
 13 |         context = {
 14 |             "invoices":invoices,
 15 |         }
 16 | 
 17 |         return render(self.request, 'invoice/invoice-list.html', context)
 18 |     
 19 |     def post(self, request):        
 20 |         # import pdb;pdb.set_trace()
 21 |         invoice_ids = request.POST.getlist("invoice_id")
 22 |         invoice_ids = list(map(int, invoice_ids))
 23 | 
 24 |         update_status_for_invoices = int(request.POST['status'])
 25 |         invoices = Invoice.objects.filter(id__in=invoice_ids)
 26 |         # import pdb;pdb.set_trace()
 27 |         if update_status_for_invoices == 0:
 28 |             invoices.update(status=False)
 29 |         else:
 30 |             invoices.update(status=True)
 31 | 
 32 |         return redirect('invoice:invoice-list')
 33 | 
 34 | def createInvoice(request):
 35 |     """
 36 |     Invoice Generator page it will have Functionality to create new invoices, 
 37 |     this will be protected view, only admin has the authority to read and make
 38 |     changes here.
 39 |     """
 40 | 
 41 |     heading_message = 'Formset Demo'
 42 |     if request.method == 'GET':
 43 |         formset = LineItemFormset(request.GET or None)
 44 |         form = InvoiceForm(request.GET or None)
 45 |     elif request.method == 'POST':
 46 |         formset = LineItemFormset(request.POST)
 47 |         form = InvoiceForm(request.POST)
 48 |         
 49 |         if form.is_valid():
 50 |             invoice = Invoice.objects.create(customer=form.data["customer"],
 51 |                     customer_email=form.data["customer_email"],
 52 |                     billing_address = form.data["billing_address"],
 53 |                     date=form.data["date"],
 54 |                     due_date=form.data["due_date"], 
 55 |                     message=form.data["message"],
 56 |                     )
 57 |             # invoice.save()
 58 |             
 59 |         if formset.is_valid():
 60 |             # import pdb;pdb.set_trace()
 61 |             # extract name and other data from each form and save
 62 |             total = 0
 63 |             for form in formset:
 64 |                 service = form.cleaned_data.get('service')
 65 |                 description = form.cleaned_data.get('description')
 66 |                 quantity = form.cleaned_data.get('quantity')
 67 |                 rate = form.cleaned_data.get('rate')
 68 |                 if service and description and quantity and rate:
 69 |                     amount = float(rate)*float(quantity)
 70 |                     total += amount
 71 |                     LineItem(customer=invoice,
 72 |                             service=service,
 73 |                             description=description,
 74 |                             quantity=quantity,
 75 |                             rate=rate,
 76 |                             amount=amount).save()
 77 |             invoice.total_amount = total
 78 |             invoice.save()
 79 |             try:
 80 |                 generate_PDF(request, id=invoice.id)
 81 |             except Exception as e:
 82 |                 print(f"********{e}********")
 83 |             return redirect('/')
 84 |     context = {
 85 |         "title" : "Invoice Generator",
 86 |         "formset": formset,
 87 |         "form": form,
 88 |     }
 89 |     return render(request, 'invoice/invoice-create.html', context)
 90 | 
 91 | 
 92 | def view_PDF(request, id=None):
 93 |     invoice = get_object_or_404(Invoice, id=id)
 94 |     lineitem = invoice.lineitem_set.all()
 95 | 
 96 |     context = {
 97 |         "company": {
 98 |             "name": "Ibrahim Services",
 99 |             "address" :"67542 Jeru, Chatsworth, CA 92145, US",
100 |             "phone": "(818) XXX XXXX",
101 |             "email": "contact@ibrahimservice.com",
102 |         },
103 |         "invoice_id": invoice.id,
104 |         "invoice_total": invoice.total_amount,
105 |         "customer": invoice.customer,
106 |         "customer_email": invoice.customer_email,
107 |         "date": invoice.date,
108 |         "due_date": invoice.due_date,
109 |         "billing_address": invoice.billing_address,
110 |         "message": invoice.message,
111 |         "lineitem": lineitem,
112 | 
113 |     }
114 |     return render(request, 'invoice/pdf_template.html', context)
115 | 
116 | def generate_PDF(request, id):
117 |     # Use False instead of output path to save pdf to a variable
118 |     pdf = pdfkit.from_url(request.build_absolute_uri(reverse('invoice:invoice-detail', args=[id])), False)
119 |     response = HttpResponse(pdf,content_type='application/pdf')
120 |     response['Content-Disposition'] = 'attachment; filename="invoice.pdf"'
121 | 
122 |     return response
123 | 
124 | 
125 | def change_status(request):
126 |     return redirect('invoice:invoice-list')
127 | 
128 | def view_404(request,  *args, **kwargs):
129 | 
130 |     return redirect('invoice:invoice-list')


--------------------------------------------------------------------------------
/manage.py:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env python
 2 | """Django's command-line utility for administrative tasks."""
 3 | import os
 4 | import sys
 5 | 
 6 | 
 7 | def main():
 8 |     os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'mysite.settings')
 9 |     try:
10 |         from django.core.management import execute_from_command_line
11 |     except ImportError as exc:
12 |         raise ImportError(
13 |             "Couldn't import Django. Are you sure it's installed and "
14 |             "available on your PYTHONPATH environment variable? Did you "
15 |             "forget to activate a virtual environment?"
16 |         ) from exc
17 |     execute_from_command_line(sys.argv)
18 | 
19 | 
20 | if __name__ == '__main__':
21 |     main()
22 | 


--------------------------------------------------------------------------------
/mysite/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amaanabbasi/django-invoices/0e3b6f2ffa47646799b7adddbd6b7d46e5b78fef/mysite/__init__.py


--------------------------------------------------------------------------------
/mysite/settings.py:
--------------------------------------------------------------------------------
  1 | """
  2 | Django settings for mysite project.
  3 | 
  4 | Generated by 'django-admin startproject' using Django 2.2.
  5 | 
  6 | For more information on this file, see
  7 | https://docs.djangoproject.com/en/2.2/topics/settings/
  8 | 
  9 | For the full list of settings and their values, see
 10 | https://docs.djangoproject.com/en/2.2/ref/settings/
 11 | """
 12 | 
 13 | import os
 14 | 
 15 | # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 16 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 17 | 
 18 | 
 19 | # Quick-start development settings - unsuitable for production
 20 | # See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
 21 | 
 22 | # SECURITY WARNING: keep the secret key used in production secret!
 23 | SECRET_KEY = 'o6=iy(t5gbr*^w4^gktgh10u10r+yup+k9n1bfphp^$(u@*qmp'
 24 | 
 25 | # SECURITY WARNING: don't run with debug turned on in production!
 26 | DEBUG = False
 27 | 
 28 | ALLOWED_HOSTS = ["*"]
 29 | 
 30 | 
 31 | # Application definition
 32 | 
 33 | INSTALLED_APPS = [
 34 |     'django.contrib.admin',
 35 |     'django.contrib.auth',
 36 |     'django.contrib.contenttypes',
 37 |     'django.contrib.sessions',
 38 |     'django.contrib.messages',
 39 |     'django.contrib.staticfiles',
 40 | 
 41 |     'invoice',
 42 | 
 43 |     'bulma',
 44 | ]
 45 | 
 46 | MIDDLEWARE = [
 47 |     'django.middleware.security.SecurityMiddleware',
 48 |     'django.contrib.sessions.middleware.SessionMiddleware',
 49 |     'django.middleware.common.CommonMiddleware',
 50 |     'django.middleware.csrf.CsrfViewMiddleware',
 51 |     'django.contrib.auth.middleware.AuthenticationMiddleware',
 52 |     'django.contrib.messages.middleware.MessageMiddleware',
 53 |     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 54 | ]
 55 | 
 56 | ROOT_URLCONF = 'mysite.urls'
 57 | 
 58 | TEMPLATES = [
 59 |     {
 60 |         'BACKEND': 'django.template.backends.django.DjangoTemplates',
 61 |         'DIRS': [os.path.join(BASE_DIR, 'templates')],
 62 |         'APP_DIRS': True,
 63 |         'OPTIONS': {
 64 |             'context_processors': [
 65 |                 'django.template.context_processors.debug',
 66 |                 'django.template.context_processors.request',
 67 |                 'django.contrib.auth.context_processors.auth',
 68 |                 'django.contrib.messages.context_processors.messages',
 69 |             ],
 70 |         },
 71 |     },
 72 | ]
 73 | 
 74 | WSGI_APPLICATION = 'mysite.wsgi.application'
 75 | 
 76 | 
 77 | # Database
 78 | # https://docs.djangoproject.com/en/2.2/ref/settings/#databases
 79 | 
 80 | DATABASES = {
 81 |     'default': {
 82 |         'ENGINE': 'django.db.backends.sqlite3',
 83 |         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
 84 |     }
 85 | }
 86 | 
 87 | 
 88 | # Password validation
 89 | # https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
 90 | 
 91 | AUTH_PASSWORD_VALIDATORS = [
 92 |     {
 93 |         'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
 94 |     },
 95 |     {
 96 |         'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
 97 |     },
 98 |     {
 99 |         'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
100 |     },
101 |     {
102 |         'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
103 |     },
104 | ]
105 | 
106 | 
107 | # Internationalization
108 | # https://docs.djangoproject.com/en/2.2/topics/i18n/
109 | 
110 | LANGUAGE_CODE = 'en-us'
111 | 
112 | TIME_ZONE = 'UTC'
113 | 
114 | USE_I18N = True
115 | 
116 | USE_L10N = True
117 | 
118 | USE_TZ = True
119 | 
120 | 
121 | # Static files (CSS, JavaScript, Images)
122 | # https://docs.djangoproject.com/en/2.2/howto/static-files/
123 | 
124 | STATIC_URL = '/static/'
125 | STATICFILES_DIRS = [
126 |     os.path.join(BASE_DIR, "static"),
127 |     '/var/www/static/',
128 | ]
129 | MEDIA_URL = '/media/'
130 | MEDIA_ROOT=os.path.join(BASE_DIR, 'media_cdn')
131 | 


--------------------------------------------------------------------------------
/mysite/urls.py:
--------------------------------------------------------------------------------
 1 | """mysite URL Configuration
 2 | 
 3 | The `urlpatterns` list routes URLs to views. For more information please see:
 4 |     https://docs.djangoproject.com/en/2.2/topics/http/urls/
 5 | Examples:
 6 | Function views
 7 |     1. Add an import:  from my_app import views
 8 |     2. Add a URL to urlpatterns:  path('', views.home, name='home')
 9 | Class-based views
10 |     1. Add an import:  from other_app.views import Home
11 |     2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
12 | Including another URLconf
13 |     1. Import the include() function: from django.urls import include, path
14 |     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
15 | """
16 | from django.contrib import admin
17 | from django.urls import path, include 
18 | 
19 | urlpatterns = [
20 |     path('admin/', admin.site.urls),
21 |     path('', include("invoice.urls")),
22 | ]
23 | 


--------------------------------------------------------------------------------
/mysite/wsgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | WSGI config for mysite project.
 3 | 
 4 | It exposes the WSGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/2.2/howto/deployment/wsgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.wsgi import get_wsgi_application
13 | 
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'mysite.settings')
15 | 
16 | application = get_wsgi_application()
17 | 


--------------------------------------------------------------------------------
/pixeebot.yaml:
--------------------------------------------------------------------------------
1 | ai:
2 |   allow_llm_access: true
3 | 
4 | assignees: [mary, luis]
5 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | Django==2.2
2 | pdfkit==0.6.1
3 | django-bulma==0.8.0
4 | 
5 | 


--------------------------------------------------------------------------------
/static/css/SourceSansPro-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amaanabbasi/django-invoices/0e3b6f2ffa47646799b7adddbd6b7d46e5b78fef/static/css/SourceSansPro-Regular.ttf


--------------------------------------------------------------------------------
/static/css/bulma-calendar.min.css:
--------------------------------------------------------------------------------
1 | @-webkit-keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes decrement-prev{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes decrement-prev{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes decrement-next{from{opacity:0;-webkit-transform:translateY(-50px);transform:translateY(-50px)}}@keyframes decrement-next{from{opacity:0;-webkit-transform:translateY(-50px);transform:translateY(-50px)}}@-webkit-keyframes increment-prev{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes increment-prev{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes increment-next{from{opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px)}}@keyframes increment-next{from{opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px)}}.datetimepicker{transition:width .8s cubic-bezier(1,-.55,.2,1.37),opacity .2s ease,visibility .2s ease,margin .2s ease;display:none;background:#fff;border-radius:2px;max-width:320px;z-index:1;box-shadow:0 2px 3px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1)}.datetimepicker.is-active{display:block}.datetimepicker .datetimepicker-header{display:flex;flex-direction:column;flex:1;text-align:left;position:relative;padding:.5rem 1rem;font-size:1rem;box-shadow:0 .2rem .2rem -.2rem rgba(10,10,10,.1)}.datetimepicker .datetimepicker-header.is-date-only{flex-direction:row}.datetimepicker .datetimepicker-header.is-date-only .datetimepicker-selection-end .datetimepicker-selection-wrapper{justify-content:flex-end!important}.datetimepicker .datetimepicker-header .datetimepicker-selection-details{flex:1}.datetimepicker .datetimepicker-header .datetimepicker-selection-from,.datetimepicker .datetimepicker-header .datetimepicker-selection-to{font-size:.65rem;color:#b5b5b5;text-transform:uppercase;padding:0}.datetimepicker .datetimepicker-header .datetimepicker-selection-end,.datetimepicker .datetimepicker-header .datetimepicker-selection-start{padding:0;display:flex;flex:1;flex-direction:row}.datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-wrapper,.datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-wrapper{flex-direction:row;display:flex;min-height:2.5rem;flex:1 1 2rem}.datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-day,.datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-day{flex:0;text-transform:capitalize;font-size:2rem;line-height:2.5rem;margin-right:.5rem;color:#00d1b2;font-weight:100}.datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-date,.datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-date{font-size:.85rem;line-height:.85rem;justify-content:center;display:flex;flex-direction:column;font-weight:300}.datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-month,.datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-month{color:#4a4a4a;text-transform:capitalize}.datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-weekday,.datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-weekday{font-size:.75em;color:#b6b4b6;text-transform:capitalize;text-align:left}.datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-hour,.datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-hour{font-size:1.5rem;font-weight:100;flex:1;justify-content:center;align-items:center;text-align:center}.datetimepicker .datetimepicker-header .datetimepicker-selection-end.editable,.datetimepicker .datetimepicker-header .datetimepicker-selection-start.editable{border:1px solid #dcdcdc}.datetimepicker .datetimepicker-header .datetimepicker-selection-end.editable .datetimepicker-selection-input-hours,.datetimepicker .datetimepicker-header .datetimepicker-selection-start.editable .datetimepicker-selection-input-hours{width:31px;font-size:1.5rem;font-weight:100;color:#4a4a4a;border:0;text-align:right}.datetimepicker .datetimepicker-header .datetimepicker-selection-end.editable .datetimepicker-selection-input-minutes,.datetimepicker .datetimepicker-header .datetimepicker-selection-start.editable .datetimepicker-selection-input-minutes{width:31px;font-size:1.5rem;font-weight:100;color:#4a4a4a;border:0;margin-left:-5px}.datetimepicker .datetimepicker-header .datetimepicker-selection-end,.datetimepicker .datetimepicker-header .datetimepicker-selection-start{align-items:center}.datetimepicker .datetimepicker-header .datetimepicker-selection-end.is-centered .datetimepicker-selection-wrapper,.datetimepicker .datetimepicker-header .datetimepicker-selection-start.is-centered .datetimepicker-selection-wrapper{justify-content:center;align-items:center}.datetimepicker .datetimepicker-header .datetimepicker-selection-time{flex:1;display:flex}.datetimepicker .datetimepicker-header .datetimepicker-selection-time .datetimepicker-selection-time-icon{display:flex;justify-content:center;align-items:center;padding:0 1rem;color:#b5b5b5}.datetimepicker .datepicker-nav{background:#00d1b2;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:.5em;flex-direction:row}.datetimepicker .datepicker-nav .datepicker-nav-month-year{flex-direction:row;display:flex}.datetimepicker .datepicker-nav .datepicker-nav-month,.datetimepicker .datepicker-nav .datepicker-nav-year{text-decoration:none;font-size:1rem;color:#fff}.datetimepicker .datepicker-nav .datepicker-nav-month:hover,.datetimepicker .datepicker-nav .datepicker-nav-year:hover{cursor:pointer}.datetimepicker .datepicker-nav .datepicker-nav-month{text-transform:capitalize}.datetimepicker .datepicker-nav .datepicker-nav-year{font-weight:700}.datetimepicker .datepicker-nav .datepicker-nav-next,.datetimepicker .datepicker-nav .datepicker-nav-previous{flex-basis:auto;flex-grow:0;flex-shrink:0;text-decoration:none;color:#fff}.datetimepicker .datepicker-nav .datepicker-nav-next:hover,.datetimepicker .datepicker-nav .datepicker-nav-previous:hover{background-color:transparent}.datetimepicker .datepicker-nav .datepicker-nav-next:hover svg,.datetimepicker .datepicker-nav .datepicker-nav-previous:hover svg{stroke-width:1em}.datetimepicker .datepicker-nav .datepicker-nav-next svg,.datetimepicker .datepicker-nav .datepicker-nav-previous svg{stroke:currentColor;width:11.25px;height:.75rem}.datetimepicker .datepicker-body{overflow:hidden}.datetimepicker .datepicker-body .datepicker-dates{display:none}.datetimepicker .datepicker-body .datepicker-dates.is-active{display:flex;flex-direction:column}.datetimepicker .datepicker-body .datepicker-months,.datetimepicker .datepicker-body .datepicker-years{display:none}.datetimepicker .datepicker-body .datepicker-months.is-active,.datetimepicker .datepicker-body .datepicker-years.is-active{display:flex;flex-direction:row}.datetimepicker .datepicker-body .datepicker-weekdays{display:flex;flex-wrap:wrap;justify-content:space-around;padding:.3rem 0;background:0 0;color:#fff;font-size:.75rem}.datetimepicker .datepicker-body .datepicker-weekdays .datepicker-date{background:0 0!important;color:#b5b5b5;padding:.3rem}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;padding:0;color:#7a7a7a}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date{background:#f5f5f5;display:flex;justify-content:center;flex:14.28571%;margin:.1rem 0;align-items:center}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item{margin:0 auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:none;border-radius:25091983px;color:#4a4a4a;cursor:pointer;height:2.2rem;outline:0;padding:0;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:2.2rem;-webkit-animation:bounce-button-in .45s 0s cubic-bezier(.175,.885,.32,1.275) forwards;animation:bounce-button-in .45s 0s cubic-bezier(.175,.885,.32,1.275) forwards}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{background:0 0;border:.1rem dotted #00d1b2;color:#00d1b2}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:focus{background:#fff;border-color:#fff;color:rgba(0,0,0,.7);text-decoration:none}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#00d1b2;border-color:#00d1b2;border-radius:25091983px;color:#fff}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active.is-today{border-color:#fff!important;color:#fff!important}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-highlighted{border:.1rem solid #00d1b2}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{background:#fff;border:.1rem solid #00d1b2;color:rgba(0,0,0,.7);text-decoration:none}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.is-current-month{background:0 0}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.is-disabled,.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date[disabled]{background-color:#f5f5f5;background-image:url(data:image/gif;base64,R0lGODlhBQAFAOMAAP/14////93uHt3uHt3uHt3uHv///////////wAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAAALAAAAAAFAAUAAAQL0ACAzpG0YnonNxEAOw==)!important}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.is-disabled .calendar-event,.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.is-disabled .date-item,.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date[disabled] .calendar-event,.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date[disabled] .date-item{cursor:default;opacity:.25;pointer-events:none}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{position:relative;background:#00d1b2;z-index:1}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#fff;border:.1rem solid #00d1b2;color:#00d1b2;box-shadow:0 .2rem .2rem rgba(10,10,10,.1)}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start{border-top-left-radius:25091983px;border-bottom-left-radius:25091983px}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end{border-top-right-radius:25091983px;border-bottom-right-radius:25091983px}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#00d1b2;color:#fff}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#fff!important;color:#fff!important}.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range-start.datepicker-range-end .date-item.is-today{color:#00d1b2!important}.datetimepicker .datepicker-body .datepicker-months,.datetimepicker .datepicker-body .datepicker-years{display:none;flex-direction:row;flex-wrap:wrap;padding:.5rem;max-height:17rem;overflow-y:auto}.datetimepicker .datepicker-body .datepicker-months.is-active,.datetimepicker .datepicker-body .datepicker-years.is-active{display:flex}.datetimepicker .datepicker-body .datepicker-months .datepicker-month,.datetimepicker .datepicker-body .datepicker-months .datepicker-year,.datetimepicker .datepicker-body .datepicker-years .datepicker-month,.datetimepicker .datepicker-body .datepicker-years .datepicker-year{padding:.5rem;margin:.5rem;font-size:.75rem;text-align:center;flex:1 25%;text-transform:capitalize;border-radius:25091983px;border:.1rem solid transparent}.datetimepicker .datepicker-body .datepicker-months .datepicker-month.is-active,.datetimepicker .datepicker-body .datepicker-months .datepicker-year.is-active,.datetimepicker .datepicker-body .datepicker-years .datepicker-month.is-active,.datetimepicker .datepicker-body .datepicker-years .datepicker-year.is-active{background:#00d1b2;border-color:#00d1b2;color:#fff}.datetimepicker .datepicker-body .datepicker-months .datepicker-month:hover,.datetimepicker .datepicker-body .datepicker-months .datepicker-year:hover,.datetimepicker .datepicker-body .datepicker-years .datepicker-month:hover,.datetimepicker .datepicker-body .datepicker-years .datepicker-year:hover{cursor:pointer;background:#fff;border:.1rem solid #00d1b2;color:rgba(0,0,0,.7)}.datetimepicker .datetimepicker-footer{display:flex;flex:1;justify-content:space-evenly;margin:0}.datetimepicker .datetimepicker-footer>*{text-decoration:none!important}.datetimepicker.is-datetimepicker-default .datetimepicker-container{display:flex;flex-direction:column}.datetimepicker.is-datetimepicker-default .datetimepicker-container:after,.datetimepicker.is-datetimepicker-default .datetimepicker-container:before{bottom:100%;left:15%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.datetimepicker.is-datetimepicker-default .datetimepicker-container:after{border-color:rgba(255,255,255,0);border-bottom-color:#fff;border-width:.75rem;margin-left:-.75rem}.datetimepicker.is-datetimepicker-default .datetimepicker-container:before{border-color:rgba(74,74,74,0);border-bottom-color:#4a4a4a;border-width:.75rem;margin-left:-.75rem}.datetimepicker.is-datetimepicker-default .datetimepicker-container.has-header-bottom{flex-direction:column-reverse}.datetimepicker.is-large{max-width:100%}.datetimepicker.is-large .datepicker-body .datepicker-date{border-bottom:.1rem solid #f5f5f5;border-right:.1rem solid #f5f5f5;display:flex;flex-direction:column;height:11rem;padding:0}.datetimepicker.is-large .datepicker-body .datepicker-date:nth-child(7n){border-right:0}.datetimepicker.is-large .datepicker-body .datepicker-date:nth-last-child(-n+7){border-bottom:0}.datetimepicker.is-large .date-item{align-self:flex-end;height:2.2rem;margin-right:.5rem;margin-top:.5rem}.datetimepicker.is-large .datepicker-range::before,.datetimepicker.is-large .datepicker-range:before{top:1.9rem}.datetimepicker.is-large .datepicker-range.datepicker-range-start::before{left:auto;width:1.9rem}.datetimepicker.is-large .datepicker-range.datepicker-range-end::before{right:1.9rem}.datetimepicker.is-large .datepicker-events{flex-grow:1;line-height:1;overflow-y:auto;padding:.5rem}.datetimepicker.is-large .datepicker-event{background-color:#7a7a7a;border-radius:2px;color:#fff;display:block;font-size:1rem;margin:.2rem auto;overflow:hidden;padding:.3rem .4rem;text-align:left;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.datetimepicker.is-large .datepicker-event.is-white{background-color:#fff;color:#0a0a0a}.datetimepicker.is-large .datepicker-event.is-black{background-color:#0a0a0a;color:#fff}.datetimepicker.is-large .datepicker-event.is-light{background-color:#f5f5f5;color:#363636}.datetimepicker.is-large .datepicker-event.is-dark{background-color:#363636;color:#f5f5f5}.datetimepicker.is-large .datepicker-event.is-primary{background-color:#00d1b2;color:#fff}.datetimepicker.is-large .datepicker-event.is-link{background-color:#3273dc;color:#fff}.datetimepicker.is-large .datepicker-event.is-info{background-color:#209cee;color:#fff}.datetimepicker.is-large .datepicker-event.is-success{background-color:#23d160;color:#fff}.datetimepicker.is-large .datepicker-event.is-warning{background-color:#ffdd57;color:rgba(0,0,0,.7)}.datetimepicker.is-large .datepicker-event.is-danger{background-color:#ff3860;color:#fff}.datetimepicker .timepicker{display:flex;flex-direction:row;justify-content:center;margin:auto}.datetimepicker .timepicker .timepicker-end,.datetimepicker .timepicker .timepicker-start{display:flex;flex-direction:row;flex:1 50%;justify-content:center;position:relative}.datetimepicker .timepicker .timepicker-end .timepicker-hours,.datetimepicker .timepicker .timepicker-end .timepicker-minutes,.datetimepicker .timepicker .timepicker-start .timepicker-hours,.datetimepicker .timepicker .timepicker-start .timepicker-minutes{display:flex;flex-direction:column;align-items:center}.datetimepicker .timepicker .timepicker-end .timepicker-hours .timepicker-input,.datetimepicker .timepicker .timepicker-end .timepicker-minutes .timepicker-input,.datetimepicker .timepicker .timepicker-start .timepicker-hours .timepicker-input,.datetimepicker .timepicker .timepicker-start .timepicker-minutes .timepicker-input{position:relative;color:#00d1b2;text-align:center;overflow:hidden;font-size:2rem;font-weight:400}.datetimepicker .timepicker .timepicker-end .timepicker-hours .timepicker-input.is-input .timepicker-input-number,.datetimepicker .timepicker .timepicker-end .timepicker-minutes .timepicker-input.is-input .timepicker-input-number,.datetimepicker .timepicker .timepicker-start .timepicker-hours .timepicker-input.is-input .timepicker-input-number,.datetimepicker .timepicker .timepicker-start .timepicker-minutes .timepicker-input.is-input .timepicker-input-number{visability:hidden;opacity:0;transition:opacity .1s ease-in}.datetimepicker .timepicker .timepicker-end .timepicker-hours .timepicker-input.is-input input,.datetimepicker .timepicker .timepicker-end .timepicker-minutes .timepicker-input.is-input input,.datetimepicker .timepicker .timepicker-start .timepicker-hours .timepicker-input.is-input input,.datetimepicker .timepicker .timepicker-start .timepicker-minutes .timepicker-input.is-input input{visability:visible;opacity:1;transition:opacity .1s ease-in}.datetimepicker .timepicker .timepicker-end .timepicker-hours .timepicker-input input,.datetimepicker .timepicker .timepicker-end .timepicker-minutes .timepicker-input input,.datetimepicker .timepicker .timepicker-start .timepicker-hours .timepicker-input input,.datetimepicker .timepicker .timepicker-start .timepicker-minutes .timepicker-input input{width:4rem;margin:0;padding:0;position:relative;z-index:2;box-shadow:none;outline:0;border:none;opacity:0;transition:opacity .1s ease-in}.datetimepicker .timepicker .timepicker-end .timepicker-input-number,.datetimepicker .timepicker .timepicker-start .timepicker-input-number{position:absolute;z-index:1;top:0;left:0;right:0;bottom:0;visability:visible;opacity:1;transition:opacity 1s ease-in;font-weight:300}.datetimepicker .timepicker .timepicker-end .timepicker-input-number.is-increment-hide,.datetimepicker .timepicker .timepicker-start .timepicker-input-number.is-increment-hide{opacity:0;-webkit-transform:translateY(-50px);transform:translateY(-50px);-webkit-animation:increment-prev .1s ease-in;animation:increment-prev .1s ease-in}.datetimepicker .timepicker .timepicker-end .timepicker-input-number.is-increment-visible,.datetimepicker .timepicker .timepicker-start .timepicker-input-number.is-increment-visible{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation:increment-next .1s ease-out;animation:increment-next .1s ease-out}.datetimepicker .timepicker .timepicker-end .timepicker-input-number.is-decrement-hide,.datetimepicker .timepicker .timepicker-start .timepicker-input-number.is-decrement-hide{opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px);-webkit-animation:decrement-prev .1s ease-in;animation:decrement-prev .1s ease-in}.datetimepicker .timepicker .timepicker-end .timepicker-input-number.is-decrement-visible,.datetimepicker .timepicker .timepicker-start .timepicker-input-number.is-decrement-visible{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation:decrement-next .1s ease-out;animation:decrement-next .1s ease-out}.datetimepicker .timepicker .timepicker-end{margin-left:1rem;padding-left:1rem}.datetimepicker .timepicker .timepicker-end::before,.datetimepicker .timepicker .timepicker-end:before{content:'';position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:50%;width:.1rem;background-color:#f5f5f5}.datetimepicker .timepicker .timepicker-next,.datetimepicker .timepicker .timepicker-previous{font-size:1rem;line-height:1rem;display:block;color:#adbcda;text-align:center;margin:1rem 0 0;font-size:1rem;padding:.5rem;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datetimepicker .timepicker .timepicker-next:hover,.datetimepicker .timepicker .timepicker-previous:hover{cursor:pointer;background-color:#f5f5f5}.datetimepicker .timepicker .timepicker-previous{margin:0 0 1rem}.datetimepicker .timepicker .timepicker-time-divider{display:flex;justify-content:center;align-items:center;font-size:1.5rem;color:#00d1b2}.datetimepicker .timepicker.is-white .timepicker-input,.datetimepicker .timepicker.is-white .timepicker-input-number,.datetimepicker .timepicker.is-white .timepicker-time-divider{color:#fff!important}.datetimepicker .timepicker.is-black .timepicker-input,.datetimepicker .timepicker.is-black .timepicker-input-number,.datetimepicker .timepicker.is-black .timepicker-time-divider{color:#0a0a0a!important}.datetimepicker .timepicker.is-light .timepicker-input,.datetimepicker .timepicker.is-light .timepicker-input-number,.datetimepicker .timepicker.is-light .timepicker-time-divider{color:#f5f5f5!important}.datetimepicker .timepicker.is-dark .timepicker-input,.datetimepicker .timepicker.is-dark .timepicker-input-number,.datetimepicker .timepicker.is-dark .timepicker-time-divider{color:#363636!important}.datetimepicker .timepicker.is-primary .timepicker-input,.datetimepicker .timepicker.is-primary .timepicker-input-number,.datetimepicker .timepicker.is-primary .timepicker-time-divider{color:#00d1b2!important}.datetimepicker .timepicker.is-link .timepicker-input,.datetimepicker .timepicker.is-link .timepicker-input-number,.datetimepicker .timepicker.is-link .timepicker-time-divider{color:#3273dc!important}.datetimepicker .timepicker.is-info .timepicker-input,.datetimepicker .timepicker.is-info .timepicker-input-number,.datetimepicker .timepicker.is-info .timepicker-time-divider{color:#209cee!important}.datetimepicker .timepicker.is-success .timepicker-input,.datetimepicker .timepicker.is-success .timepicker-input-number,.datetimepicker .timepicker.is-success .timepicker-time-divider{color:#23d160!important}.datetimepicker .timepicker.is-warning .timepicker-input,.datetimepicker .timepicker.is-warning .timepicker-input-number,.datetimepicker .timepicker.is-warning .timepicker-time-divider{color:#ffdd57!important}.datetimepicker .timepicker.is-danger .timepicker-input,.datetimepicker .timepicker.is-danger .timepicker-input-number,.datetimepicker .timepicker.is-danger .timepicker-time-divider{color:#ff3860!important}.datetimepicker .timepicker.is-black-bis .timepicker-input,.datetimepicker .timepicker.is-black-bis .timepicker-input-number,.datetimepicker .timepicker.is-black-bis .timepicker-time-divider{color:#121212!important}.datetimepicker .timepicker.is-black-ter .timepicker-input,.datetimepicker .timepicker.is-black-ter .timepicker-input-number,.datetimepicker .timepicker.is-black-ter .timepicker-time-divider{color:#242424!important}.datetimepicker .timepicker.is-grey-darker .timepicker-input,.datetimepicker .timepicker.is-grey-darker .timepicker-input-number,.datetimepicker .timepicker.is-grey-darker .timepicker-time-divider{color:#363636!important}.datetimepicker .timepicker.is-grey-dark .timepicker-input,.datetimepicker .timepicker.is-grey-dark .timepicker-input-number,.datetimepicker .timepicker.is-grey-dark .timepicker-time-divider{color:#4a4a4a!important}.datetimepicker .timepicker.is-grey .timepicker-input,.datetimepicker .timepicker.is-grey .timepicker-input-number,.datetimepicker .timepicker.is-grey .timepicker-time-divider{color:#7a7a7a!important}.datetimepicker .timepicker.is-grey-light .timepicker-input,.datetimepicker .timepicker.is-grey-light .timepicker-input-number,.datetimepicker .timepicker.is-grey-light .timepicker-time-divider{color:#b5b5b5!important}.datetimepicker .timepicker.is-grey-lighter .timepicker-input,.datetimepicker .timepicker.is-grey-lighter .timepicker-input-number,.datetimepicker .timepicker.is-grey-lighter .timepicker-time-divider{color:#dbdbdb!important}.datetimepicker .timepicker.is-white-ter .timepicker-input,.datetimepicker .timepicker.is-white-ter .timepicker-input-number,.datetimepicker .timepicker.is-white-ter .timepicker-time-divider{color:#f5f5f5!important}.datetimepicker .timepicker.is-white-bis .timepicker-input,.datetimepicker .timepicker.is-white-bis .timepicker-input-number,.datetimepicker .timepicker.is-white-bis .timepicker-time-divider{color:#fafafa!important}.datetimepicker.is-white .datetimepicker-header .datetimepicker-selection-day{color:#fff}.datetimepicker.is-white .datepicker-nav{background:#fff;color:#0a0a0a}.datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#fff;border-color:#fff}.datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#fff;color:#fff}.datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#fff}.datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#fff}.datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#fff}.datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#fff;color:#0a0a0a}.datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#0a0a0a!important;color:#0a0a0a!important}.datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-white .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#0a0a0a;border-color:#fff;color:#fff}.datetimepicker.is-black .datetimepicker-header .datetimepicker-selection-day{color:#0a0a0a}.datetimepicker.is-black .datepicker-nav{background:#0a0a0a;color:#fff}.datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#0a0a0a;border-color:#0a0a0a}.datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#0a0a0a;color:#0a0a0a}.datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#0a0a0a}.datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#0a0a0a}.datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#0a0a0a}.datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#0a0a0a;color:#fff}.datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#fff!important;color:#fff!important}.datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-black .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#fff;border-color:#0a0a0a;color:#0a0a0a}.datetimepicker.is-light .datetimepicker-header .datetimepicker-selection-day{color:#f5f5f5}.datetimepicker.is-light .datepicker-nav{background:#f5f5f5;color:#363636}.datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#f5f5f5;border-color:#f5f5f5}.datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#f5f5f5;color:#f5f5f5}.datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#f5f5f5}.datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#f5f5f5}.datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#f5f5f5}.datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#f5f5f5;color:#363636}.datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#363636!important;color:#363636!important}.datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#363636;border-color:#f5f5f5;color:#f5f5f5}.datetimepicker.is-dark .datetimepicker-header .datetimepicker-selection-day{color:#363636}.datetimepicker.is-dark .datepicker-nav{background:#363636;color:#f5f5f5}.datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#363636;border-color:#363636}.datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#363636;color:#363636}.datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#363636}.datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#363636}.datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#363636}.datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#363636;color:#f5f5f5}.datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#f5f5f5!important;color:#f5f5f5!important}.datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#f5f5f5;border-color:#363636;color:#363636}.datetimepicker.is-primary .datetimepicker-header .datetimepicker-selection-day{color:#00d1b2}.datetimepicker.is-primary .datepicker-nav{background:#00d1b2;color:#fff}.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#00d1b2;border-color:#00d1b2}.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#00d1b2;color:#00d1b2}.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#00d1b2}.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#00d1b2}.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#00d1b2}.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#00d1b2;color:#fff}.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#fff!important;color:#fff!important}.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#fff;border-color:#00d1b2;color:#00d1b2}.datetimepicker.is-link .datetimepicker-header .datetimepicker-selection-day{color:#3273dc}.datetimepicker.is-link .datepicker-nav{background:#3273dc;color:#fff}.datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#3273dc;border-color:#3273dc}.datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#3273dc;color:#3273dc}.datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#3273dc}.datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#3273dc}.datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#3273dc}.datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#3273dc;color:#fff}.datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#fff!important;color:#fff!important}.datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#fff;border-color:#3273dc;color:#3273dc}.datetimepicker.is-info .datetimepicker-header .datetimepicker-selection-day{color:#209cee}.datetimepicker.is-info .datepicker-nav{background:#209cee;color:#fff}.datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#209cee;border-color:#209cee}.datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#209cee;color:#209cee}.datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#209cee}.datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#209cee}.datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#209cee}.datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#209cee;color:#fff}.datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#fff!important;color:#fff!important}.datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-info .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#fff;border-color:#209cee;color:#209cee}.datetimepicker.is-success .datetimepicker-header .datetimepicker-selection-day{color:#23d160}.datetimepicker.is-success .datepicker-nav{background:#23d160;color:#fff}.datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#23d160;border-color:#23d160}.datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#23d160;color:#23d160}.datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#23d160}.datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#23d160}.datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#23d160}.datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#23d160;color:#fff}.datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#fff!important;color:#fff!important}.datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-success .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#fff;border-color:#23d160;color:#23d160}.datetimepicker.is-warning .datetimepicker-header .datetimepicker-selection-day{color:#ffdd57}.datetimepicker.is-warning .datepicker-nav{background:#ffdd57;color:rgba(0,0,0,.7)}.datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#ffdd57;border-color:#ffdd57}.datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#ffdd57;color:#ffdd57}.datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#ffdd57}.datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#ffdd57}.datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#ffdd57}.datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#ffdd57;color:rgba(0,0,0,.7)}.datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:rgba(0,0,0,.7)!important;color:rgba(0,0,0,.7)!important}.datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-warning .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:rgba(0,0,0,.7);border-color:#ffdd57;color:#ffdd57}.datetimepicker.is-danger .datetimepicker-header .datetimepicker-selection-day{color:#ff3860}.datetimepicker.is-danger .datepicker-nav{background:#ff3860;color:#fff}.datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#ff3860;border-color:#ff3860}.datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#ff3860;color:#ff3860}.datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#ff3860}.datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#ff3860}.datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#ff3860}.datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#ff3860;color:#fff}.datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#fff!important;color:#fff!important}.datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-danger .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#fff;border-color:#ff3860;color:#ff3860}.datetimepicker.is-black-bis .datetimepicker-header .datetimepicker-selection-day{color:#121212}.datetimepicker.is-black-bis .datepicker-nav{background:#121212;color:#fff}.datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#121212;border-color:#121212}.datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#121212;color:#121212}.datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#121212}.datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#121212}.datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#121212}.datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#121212;color:#fff}.datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#fff!important;color:#fff!important}.datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-black-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#fff;border-color:#121212;color:#121212}.datetimepicker.is-black-ter .datetimepicker-header .datetimepicker-selection-day{color:#242424}.datetimepicker.is-black-ter .datepicker-nav{background:#242424;color:#fff}.datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#242424;border-color:#242424}.datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#242424;color:#242424}.datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#242424}.datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#242424}.datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#242424}.datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#242424;color:#fff}.datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#fff!important;color:#fff!important}.datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-black-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#fff;border-color:#242424;color:#242424}.datetimepicker.is-grey-darker .datetimepicker-header .datetimepicker-selection-day{color:#363636}.datetimepicker.is-grey-darker .datepicker-nav{background:#363636;color:#fff}.datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#363636;border-color:#363636}.datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#363636;color:#363636}.datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#363636}.datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#363636}.datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#363636}.datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#363636;color:#fff}.datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#fff!important;color:#fff!important}.datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-grey-darker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#fff;border-color:#363636;color:#363636}.datetimepicker.is-grey-dark .datetimepicker-header .datetimepicker-selection-day{color:#4a4a4a}.datetimepicker.is-grey-dark .datepicker-nav{background:#4a4a4a;color:#fff}.datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#4a4a4a;border-color:#4a4a4a}.datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#4a4a4a;color:#4a4a4a}.datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#4a4a4a}.datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#4a4a4a}.datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#4a4a4a}.datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#4a4a4a;color:#fff}.datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#fff!important;color:#fff!important}.datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-grey-dark .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#fff;border-color:#4a4a4a;color:#4a4a4a}.datetimepicker.is-grey .datetimepicker-header .datetimepicker-selection-day{color:#7a7a7a}.datetimepicker.is-grey .datepicker-nav{background:#7a7a7a;color:#fff}.datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#7a7a7a;border-color:#7a7a7a}.datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#7a7a7a;color:#7a7a7a}.datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#7a7a7a}.datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#7a7a7a}.datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#7a7a7a}.datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#7a7a7a;color:#fff}.datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#fff!important;color:#fff!important}.datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-grey .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#fff;border-color:#7a7a7a;color:#7a7a7a}.datetimepicker.is-grey-light .datetimepicker-header .datetimepicker-selection-day{color:#b5b5b5}.datetimepicker.is-grey-light .datepicker-nav{background:#b5b5b5;color:#fff}.datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#b5b5b5;border-color:#b5b5b5}.datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#b5b5b5;color:#b5b5b5}.datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#b5b5b5}.datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#b5b5b5}.datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#b5b5b5}.datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#b5b5b5;color:#fff}.datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:#fff!important;color:#fff!important}.datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-grey-light .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:#fff;border-color:#b5b5b5;color:#b5b5b5}.datetimepicker.is-grey-lighter .datetimepicker-header .datetimepicker-selection-day{color:#dbdbdb}.datetimepicker.is-grey-lighter .datepicker-nav{background:#dbdbdb;color:rgba(0,0,0,.7)}.datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#dbdbdb;border-color:#dbdbdb}.datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#dbdbdb;color:#dbdbdb}.datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#dbdbdb}.datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#dbdbdb}.datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#dbdbdb}.datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#dbdbdb;color:rgba(0,0,0,.7)}.datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:rgba(0,0,0,.7)!important;color:rgba(0,0,0,.7)!important}.datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-grey-lighter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:rgba(0,0,0,.7);border-color:#dbdbdb;color:#dbdbdb}.datetimepicker.is-white-ter .datetimepicker-header .datetimepicker-selection-day{color:#f5f5f5}.datetimepicker.is-white-ter .datepicker-nav{background:#f5f5f5;color:rgba(0,0,0,.7)}.datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#f5f5f5;border-color:#f5f5f5}.datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#f5f5f5;color:#f5f5f5}.datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#f5f5f5}.datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#f5f5f5}.datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#f5f5f5}.datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#f5f5f5;color:rgba(0,0,0,.7)}.datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:rgba(0,0,0,.7)!important;color:rgba(0,0,0,.7)!important}.datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-white-ter .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:rgba(0,0,0,.7);border-color:#f5f5f5;color:#f5f5f5}.datetimepicker.is-white-bis .datetimepicker-header .datetimepicker-selection-day{color:#fafafa}.datetimepicker.is-white-bis .datepicker-nav{background:#fafafa;color:rgba(0,0,0,.7)}.datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active{background:#fafafa;border-color:#fafafa}.datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today{border-color:#fafafa;color:#fafafa}.datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover{border-color:#fafafa}.datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range{background:#fafafa}.datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before,.datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before{background:#fafafa}.datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item{background-color:#fafafa;color:rgba(0,0,0,.7)}.datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today{border-color:rgba(0,0,0,.7)!important;color:rgba(0,0,0,.7)!important}.datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item,.datetimepicker.is-white-bis .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item{background:rgba(0,0,0,.7);border-color:#fafafa;color:#fafafa}.datetimepicker-dummy{position:relative;display:flex;width:100%;height:2.5rem}.datetimepicker-dummy::before,.datetimepicker-dummy:before{content:'';-webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjAgNjAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9ImN1cnJlbnRjb2xvciIgZD0iTTU3LDRoLTdWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xaC03Yy0wLjU1MywwLTEsMC40NDctMSwxdjNIMTlWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xaC03Yy0wLjU1MywwLTEsMC40NDctMSwxdjNIM0MyLjQ0Nyw0LDIsNC40NDcsMiw1djExdjQzYzAsMC41NTMsMC40NDcsMSwxLDFoNTRjMC41NTMsMCwxLTAuNDQ3LDEtMVYxNlY1QzU4LDQuNDQ3LDU3LjU1Myw0LDU3LDR6IE00MywyaDV2M3YzaC01VjVWMnogTTEyLDJoNXYzdjNoLTVWNVYyeiBNNCw2aDZ2M2MwLDAuNTUzLDAuNDQ3LDEsMSwxaDdjMC41NTMsMCwxLTAuNDQ3LDEtMVY2aDIydjNjMCwwLjU1MywwLjQ0NywxLDEsMWg3YzAuNTUzLDAsMS0wLjQ0NywxLTFWNmg2djlINFY2ek00LDU4VjE3aDUydjQxSDR6Ii8+PHBhdGggZmlsbD0iY3VycmVudGNvbG9yIiBkPSJNMzgsMjNoLTdoLTJoLTdoLTJoLTl2OXYydjd2MnY5aDloMmg3aDJoN2gyaDl2LTl2LTJ2LTd2LTJ2LTloLTlIMzh6TTMxLDI1aDd2N2gtN1YyNXpNMzgsNDFoLTd2LTdoN1Y0MXpNMjIsMzRoN3Y3aC03VjM0ek0yMiwyNWg3djdoLTdWMjV6TTEzLDI1aDd2N2gtN1YyNXpNMTMsMzRoN3Y3aC03VjM0ek0yMCw1MGgtN3YtN2g3VjUwek0yOSw1MGgtN3YtN2g3VjUweiBNMzgsNTBoLTd2LTdoN1Y1MHogTTQ3LDUwaC03di03aDdWNTB6IE00Nyw0MWgtN3YtN2g3VjQxek00NywyNXY3aC03di03SDQ3eiIvPjwvZz48L3N2Zz4=);mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjAgNjAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9ImN1cnJlbnRjb2xvciIgZD0iTTU3LDRoLTdWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xaC03Yy0wLjU1MywwLTEsMC40NDctMSwxdjNIMTlWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xaC03Yy0wLjU1MywwLTEsMC40NDctMSwxdjNIM0MyLjQ0Nyw0LDIsNC40NDcsMiw1djExdjQzYzAsMC41NTMsMC40NDcsMSwxLDFoNTRjMC41NTMsMCwxLTAuNDQ3LDEtMVYxNlY1QzU4LDQuNDQ3LDU3LjU1Myw0LDU3LDR6IE00MywyaDV2M3YzaC01VjVWMnogTTEyLDJoNXYzdjNoLTVWNVYyeiBNNCw2aDZ2M2MwLDAuNTUzLDAuNDQ3LDEsMSwxaDdjMC41NTMsMCwxLTAuNDQ3LDEtMVY2aDIydjNjMCwwLjU1MywwLjQ0NywxLDEsMWg3YzAuNTUzLDAsMS0wLjQ0NywxLTFWNmg2djlINFY2ek00LDU4VjE3aDUydjQxSDR6Ii8+PHBhdGggZmlsbD0iY3VycmVudGNvbG9yIiBkPSJNMzgsMjNoLTdoLTJoLTdoLTJoLTl2OXYydjd2MnY5aDloMmg3aDJoN2gyaDl2LTl2LTJ2LTd2LTJ2LTloLTlIMzh6TTMxLDI1aDd2N2gtN1YyNXpNMzgsNDFoLTd2LTdoN1Y0MXpNMjIsMzRoN3Y3aC03VjM0ek0yMiwyNWg3djdoLTdWMjV6TTEzLDI1aDd2N2gtN1YyNXpNMTMsMzRoN3Y3aC03VjM0ek0yMCw1MGgtN3YtN2g3VjUwek0yOSw1MGgtN3YtN2g3VjUweiBNMzgsNTBoLTd2LTdoN1Y1MHogTTQ3LDUwaC03di03aDdWNTB6IE00Nyw0MWgtN3YtN2g3VjQxek00NywyNXY3aC03di03SDQ3eiIvPjwvZz48L3N2Zz4=);position:absolute;top:.65rem;left:.75rem;width:1.25rem;height:1.25rem;background-color:#00d1b2}.datetimepicker-dummy .datetimepicker-clear-button{background:0 0;border:0;color:#00d1b2;cursor:pointer;font-weight:400;outline:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);font-size:1.5rem;height:1.75rem;margin:.4rem .2rem 0 0;padding:0;position:absolute;right:0;top:0;width:1.75rem}.datetimepicker-dummy .datetimepicker-dummy-wrapper{border:1px solid #b5b5b5;cursor:pointer;display:flex;flex:1 100%;flex-wrap:nowrap;height:100%;max-width:100%}.datetimepicker-dummy .datetimepicker-dummy-wrapper .datetimepicker-dummy-input{color:#4a4a4a;font-size:1rem;text-align:left;text-indent:1rem;flex:1;height:100%;max-width:50%}.datetimepicker-dummy .datetimepicker-dummy-wrapper .datetimepicker-dummy-input:first-child{text-indent:2.5rem}.datetimepicker-dummy .datetimepicker-dummy-wrapper .datetimepicker-dummy-input.is-datetimepicker-range{background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgOCAxOCI+CiAgICA8cGF0aCBmaWxsPSIjOTU5OUFBIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0uMTE5LjcxOGw3LjE1OCA3LjQwNy0uMDMzLS41NTEtNi43MzcgOC44ODlhLjQyNS40MjUgMCAwIDAgLjA4LjU5My40Mi40MiAwIDAgMCAuNTktLjA4bDYuNzM3LTguODg5YS40MjUuNDI1IDAgMCAwLS4wMzMtLjU1MUwuNzIzLjEyOEEuNDIuNDIgMCAwIDAgLjEyOC4xMmEuNDI1LjQyNSAwIDAgMC0uMDA5LjU5OHoiLz4KPC9zdmc+Cg==) no-repeat 100%/8px}.datetimepicker-dummy .datetimepicker-dummy-wrapper input{background:0 0;outline:0;word-spacing:.5rem;border:0}.datetimepicker-dummy.is-white::before,.datetimepicker-dummy.is-white:before{background-color:#fff}.datetimepicker-dummy.is-white .datetimepicker-clear-button{color:#fff}.datetimepicker-dummy.is-black::before,.datetimepicker-dummy.is-black:before{background-color:#0a0a0a}.datetimepicker-dummy.is-black .datetimepicker-clear-button{color:#0a0a0a}.datetimepicker-dummy.is-light::before,.datetimepicker-dummy.is-light:before{background-color:#f5f5f5}.datetimepicker-dummy.is-light .datetimepicker-clear-button{color:#f5f5f5}.datetimepicker-dummy.is-dark::before,.datetimepicker-dummy.is-dark:before{background-color:#363636}.datetimepicker-dummy.is-dark .datetimepicker-clear-button{color:#363636}.datetimepicker-dummy.is-primary::before,.datetimepicker-dummy.is-primary:before{background-color:#00d1b2}.datetimepicker-dummy.is-primary .datetimepicker-clear-button{color:#00d1b2}.datetimepicker-dummy.is-link::before,.datetimepicker-dummy.is-link:before{background-color:#3273dc}.datetimepicker-dummy.is-link .datetimepicker-clear-button{color:#3273dc}.datetimepicker-dummy.is-info::before,.datetimepicker-dummy.is-info:before{background-color:#209cee}.datetimepicker-dummy.is-info .datetimepicker-clear-button{color:#209cee}.datetimepicker-dummy.is-success::before,.datetimepicker-dummy.is-success:before{background-color:#23d160}.datetimepicker-dummy.is-success .datetimepicker-clear-button{color:#23d160}.datetimepicker-dummy.is-warning::before,.datetimepicker-dummy.is-warning:before{background-color:#ffdd57}.datetimepicker-dummy.is-warning .datetimepicker-clear-button{color:#ffdd57}.datetimepicker-dummy.is-danger::before,.datetimepicker-dummy.is-danger:before{background-color:#ff3860}.datetimepicker-dummy.is-danger .datetimepicker-clear-button{color:#ff3860}.datetimepicker-dummy.is-black-bis::before,.datetimepicker-dummy.is-black-bis:before{background-color:#121212}.datetimepicker-dummy.is-black-bis .datetimepicker-clear-button{color:#121212}.datetimepicker-dummy.is-black-ter::before,.datetimepicker-dummy.is-black-ter:before{background-color:#242424}.datetimepicker-dummy.is-black-ter .datetimepicker-clear-button{color:#242424}.datetimepicker-dummy.is-grey-darker::before,.datetimepicker-dummy.is-grey-darker:before{background-color:#363636}.datetimepicker-dummy.is-grey-darker .datetimepicker-clear-button{color:#363636}.datetimepicker-dummy.is-grey-dark::before,.datetimepicker-dummy.is-grey-dark:before{background-color:#4a4a4a}.datetimepicker-dummy.is-grey-dark .datetimepicker-clear-button{color:#4a4a4a}.datetimepicker-dummy.is-grey::before,.datetimepicker-dummy.is-grey:before{background-color:#7a7a7a}.datetimepicker-dummy.is-grey .datetimepicker-clear-button{color:#7a7a7a}.datetimepicker-dummy.is-grey-light::before,.datetimepicker-dummy.is-grey-light:before{background-color:#b5b5b5}.datetimepicker-dummy.is-grey-light .datetimepicker-clear-button{color:#b5b5b5}.datetimepicker-dummy.is-grey-lighter::before,.datetimepicker-dummy.is-grey-lighter:before{background-color:#dbdbdb}.datetimepicker-dummy.is-grey-lighter .datetimepicker-clear-button{color:#dbdbdb}.datetimepicker-dummy.is-white-ter::before,.datetimepicker-dummy.is-white-ter:before{background-color:#f5f5f5}.datetimepicker-dummy.is-white-ter .datetimepicker-clear-button{color:#f5f5f5}.datetimepicker-dummy.is-white-bis::before,.datetimepicker-dummy.is-white-bis:before{background-color:#fafafa}.datetimepicker-dummy.is-white-bis .datetimepicker-clear-button{color:#fafafa}.modal .datetimepicker{display:block;max-height:95vh;width:22rem;max-width:95vw;overflow-y:auto}


--------------------------------------------------------------------------------
/static/css/invoice-template-1.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |   font-family: SourceSansPro;
  3 |   src: url(SourceSansPro-Regular.ttf);
  4 | }
  5 | 
  6 | .clearfix:after {
  7 |   content: "";
  8 |   display: table;
  9 |   clear: both;
 10 | }
 11 | 
 12 | a {
 13 |   color: #0087C3;
 14 |   text-decoration: none;
 15 | }
 16 | 
 17 | body {
 18 |   position: relative;
 19 |   width: 21cm;  
 20 |   height: 29.7cm; 
 21 |   margin: 0 auto; 
 22 |   color: #555555;
 23 |   background: #FFFFFF; 
 24 |   font-family: Arial, sans-serif; 
 25 |   font-size: 14px; 
 26 |   font-family: SourceSansPro;
 27 | }
 28 | 
 29 | header {
 30 |   padding: 10px 0;
 31 |   margin-bottom: 20px;
 32 |   border-bottom: 1px solid #AAAAAA;
 33 | }
 34 | 
 35 | #logo {
 36 |   float: left;
 37 |   margin-top: 8px;
 38 | }
 39 | 
 40 | #logo img {
 41 |   height: 70px;
 42 | }
 43 | 
 44 | #company {
 45 |   float: right;
 46 |   text-align: right;
 47 | }
 48 | 
 49 | 
 50 | #details {
 51 |   margin-bottom: 50px;
 52 | }
 53 | 
 54 | #client {
 55 |   padding-left: 6px;
 56 |   border-left: 6px solid #0087C3;
 57 |   float: left;
 58 | }
 59 | 
 60 | #client .to {
 61 |   color: #777777;
 62 | }
 63 | 
 64 | h2.name {
 65 |   font-size: 1.4em;
 66 |   font-weight: normal;
 67 |   margin: 0;
 68 | }
 69 | 
 70 | #invoice {
 71 |   float: right;
 72 |   text-align: right;
 73 | }
 74 | 
 75 | #invoice h1 {
 76 |   color: #0087C3;
 77 |   font-size: 2.4em;
 78 |   line-height: 1em;
 79 |   font-weight: normal;
 80 |   margin: 0  0 10px 0;
 81 | }
 82 | 
 83 | #invoice .date {
 84 |   font-size: 1.1em;
 85 |   color: #777777;
 86 | }
 87 | 
 88 | table {
 89 |   width: 100%;
 90 |   border-collapse: collapse;
 91 |   border-spacing: 0;
 92 |   margin-bottom: 20px;
 93 | }
 94 | 
 95 | table th,
 96 | table td {
 97 |   padding: 20px;
 98 |   background: #EEEEEE;
 99 |   text-align: center;
100 |   border-bottom: 1px solid #FFFFFF;
101 | }
102 | 
103 | table th {
104 |   white-space: nowrap;        
105 |   font-weight: normal;
106 | }
107 | 
108 | table td {
109 |   text-align: right;
110 | }
111 | 
112 | table td h3{
113 |   color: #57B223;
114 |   font-size: 1.2em;
115 |   font-weight: normal;
116 |   margin: 0 0 0.2em 0;
117 | }
118 | 
119 | table .no {
120 |   color: #FFFFFF;
121 |   font-size: 1.6em;
122 |   background: #57B223;
123 | }
124 | 
125 | table .desc {
126 |   text-align: left;
127 | }
128 | 
129 | table .unit {
130 |   background: #DDDDDD;
131 | }
132 | 
133 | table .qty {
134 | }
135 | 
136 | table .total {
137 |   background: #57B223;
138 |   color: #FFFFFF;
139 | }
140 | 
141 | table td.unit,
142 | table td.qty,
143 | table td.total {
144 |   font-size: 1.2em;
145 | }
146 | 
147 | table tbody tr:last-child td {
148 |   border: none;
149 | }
150 | 
151 | table tfoot td {
152 |   padding: 10px 20px;
153 |   background: #FFFFFF;
154 |   border-bottom: none;
155 |   font-size: 1.2em;
156 |   white-space: nowrap; 
157 |   border-top: 1px solid #AAAAAA; 
158 | }
159 | 
160 | table tfoot tr:first-child td {
161 |   border-top: none; 
162 | }
163 | 
164 | table tfoot tr:last-child td {
165 |   color: #57B223;
166 |   font-size: 1.4em;
167 |   border-top: 1px solid #57B223; 
168 | 
169 | }
170 | 
171 | table tfoot tr td:first-child {
172 |   border: none;
173 | }
174 | 
175 | #thanks{
176 |   font-size: 2em;
177 |   margin-bottom: 50px;
178 | }
179 | 
180 | #notices{
181 |   padding-left: 6px;
182 |   border-left: 6px solid #0087C3;  
183 | }
184 | 
185 | #notices .notice {
186 |   font-size: 1.2em;
187 | }
188 | 
189 | footer {
190 |   color: #777777;
191 |   width: 100%;
192 |   height: 30px;
193 |   position: absolute;
194 |   bottom: 0;
195 |   border-top: 1px solid #AAAAAA;
196 |   padding: 8px 0;
197 |   text-align: center;
198 | }
199 | 
200 | 


--------------------------------------------------------------------------------
/static/css/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amaanabbasi/django-invoices/0e3b6f2ffa47646799b7adddbd6b7d46e5b78fef/static/css/logo.png


--------------------------------------------------------------------------------
/static/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amaanabbasi/django-invoices/0e3b6f2ffa47646799b7adddbd6b7d46e5b78fef/static/img/logo.png


--------------------------------------------------------------------------------