Thumb

POS-21: Inventory & POS Invoice template setup using Bootstrap

Part-1: Point of Sale(POS) Inventory Super Shop Management System using ASP.NET MVC Part-2: Point of Sale(POS) Setup template to your project | Super Shop Management System|ASP.NET MVC Part-3: Point of Sale(POS) Database & table analysis | Super Shop Management System|ASP.NET MVC Part-4: Point of Sale(POS) Database Create in SQL Server | Super Shop Management System|ASP.NET MVC Part-5: Point of Sale(POS) Login using AJAX ASP.NET MVC | JQUERY Part-6: Point of Sale(POS) Login and Authorization with Session variables in ASP.NET | JQUERY | AJAX Part-7: Point of Sale(POS) Convert Password to MD5 Hash string in ASP.NET | Encrypt password in ASP.NET MVC C# Part-8: Point of Sale(POS) Role based authentication and authorization in ASP.NET MVC|Redirect to not found page if not authorized|C# Part-9: Point of Sale(POS) Create user & Account management UI UX in ASP.NET MVC Part-10: Point of Sale(POS) User Creation & user registration using ASP.NET MVC | Jquery | Ajax Part-11: Point of Sale(POS) Get user list using ASP.NET MVC | Jquery | Ajax Part-12: Point of Sale(POS) Update user using ASP.NET MVC | Jquery | Ajax Part-13: Inventory and POS Login logout session using ASP.NET | Supershop management system Part-14: Inventory Category CRUD Create,Retrieve,Update,View | POS Category CRUD using ASP.NET JQuery AJAX Part-15: Inventory and POS batch tracking and control table create in SQL Server 2012 Part-16: Inventory Product CRUD List | Point of sale Products Crud using asp.net MVC Part-17: Inventory and POS Batch CRUD using asp.net MVC JQUERY AJAX | CSharp Part-18: Inventory management and stock control using asp.net mvc | Jquery AngularJs Part-19: Inventory & POS Stock edit and validation using asp.net AngularJS POS 20: Inventory & POS AngularJS error fix POS-21: Inventory & POS Invoice template setup using Bootstrap POS-22: Invoice Adding input fields & adding rows Dynamically using Javascript | ASP.NET MVC | AngularJs POS-23: Inventory Onclick get selected data & Calculate line total using Javascript ASP.NET MVC JQUERY POS-24: Inventory Invoice Configuration and Calculation using JavaScript AngularJS ASP.NET MVC POS-25: Inventory sale from invoice using ASP.NET MVC | Jquery AngularJS POS-26: Get data using ASP.NET MVC AngularJS JQUERY POS-27: Invoice sales page edit using ASP.NET MVC JQUERY AngularJS POS-28: Invoice vat calculation discount calculation using Javascript ASP.NET MVC | Invoice crud asp.net POS-29: Invoice calculate subtotal add row remove row using AngularJS ASP.NET MVC

7/3/2021 2:35:08 PM

Download Project

 

Post your any code related problem to www.abctutorial.com

Follow the previous video and articles to complete the POS tutorials

Step-1:

Use this below code to make the invoice template in Invoice.cshtml

<div class="container">
  <div class="card">
<div class="card-header">
Invoice
<strong>01/01/01/2018</strong> 
  <span class="float-right"> <strong>Status:</strong> Pending</span>

</div>
<div class="card-body">
<div class="row mb-4">
<div class="col-sm-6">
<h6 class="mb-3">From:</h6>
<div>
<strong>Webz Poland</strong>
</div>
<div>Madalinskiego 8</div>
<div>71-101 Szczecin, Poland</div>
<div>Email: info@webz.com.pl</div>
<div>Phone: +48 444 666 3333</div>
</div>

<div class="col-sm-6">
<h6 class="mb-3">To:</h6>
<div>
<strong>Bob Mart</strong>
</div>
<div>Attn: Daniel Marek</div>
<div>43-190 Mikolow, Poland</div>
<div>Email: marek@daniel.com</div>
<div>Phone: +48 123 456 789</div>
</div>



</div>

<div class="table-responsive-sm">
<table class="table table-striped">
<thead>
<tr>
<th class="center">#</th>
<th>Item</th>
<th>Description</th>

<th class="right">Unit Cost</th>
  <th class="center">Qty</th>
<th class="right">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center">1</td>
<td class="left strong">Origin License</td>
<td class="left">Extended License</td>

<td class="right">$999,00</td>
  <td class="center">1</td>
<td class="right">$999,00</td>
</tr>
<tr>
<td class="center">2</td>
<td class="left">Custom Services</td>
<td class="left">Instalation and Customization (cost per hour)</td>

<td class="right">$150,00</td>
  <td class="center">20</td>
<td class="right">$3.000,00</td>
</tr>
<tr>
<td class="center">3</td>
<td class="left">Hosting</td>
<td class="left">1 year subcription</td>

<td class="right">$499,00</td>
  <td class="center">1</td>
<td class="right">$499,00</td>
</tr>
<tr>
<td class="center">4</td>
<td class="left">Platinum Support</td>
<td class="left">1 year subcription 24/7</td>

<td class="right">$3.999,00</td>
  <td class="center">1</td>
<td class="right">$3.999,00</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-lg-4 col-sm-5">

</div>

<div class="col-lg-4 col-sm-5 ml-auto">
<table class="table table-clear">
<tbody>
<tr>
<td class="left">
<strong>Subtotal</strong>
</td>
<td class="right">$8.497,00</td>
</tr>
<tr>
<td class="left">
<strong>Discount (20%)</strong>
</td>
<td class="right">$1,699,40</td>
</tr>
<tr>
<td class="left">
 <strong>VAT (10%)</strong>
</td>
<td class="right">$679,76</td>
</tr>
<tr>
<td class="left">
<strong>Total</strong>
</td>
<td class="right">
<strong>$7.477,36</strong>
</td>
</tr>
</tbody>
</table>

</div>

</div>

</div>
</div>
</div>

Step-2:

Run this code and see the output

About Teacher