mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-04 07:31:38 +00:00
164 lines
7.7 KiB
HTML
164 lines
7.7 KiB
HTML
<div
|
|
class="absolute inset-0 min-w-0 text-center overflow-auto print:overflow-visible"
|
|
cdkScrollable>
|
|
|
|
<!-- Main -->
|
|
<div class="inline-block p-6 sm:p-10 text-left print:p-0">
|
|
|
|
<!-- Invoice -->
|
|
<div class="w-240 p-16 rounded-2xl shadow bg-card print:w-auto print:rounded-none print:shadow-none print:bg-transparent">
|
|
|
|
<div class="flex items-start justify-between">
|
|
<div class="grid grid-cols-2 gap-x-4 gap-y-1">
|
|
<div class="text-4xl tracking-tight text-secondary">INVOICE</div>
|
|
<div class="text-4xl">#9-0004</div>
|
|
<div class="font-medium tracking-tight text-secondary">INVOICE DATE</div>
|
|
<div class="font-medium">Jul 19, 2022</div>
|
|
<div class="font-medium tracking-tight text-secondary">DUE DATE</div>
|
|
<div class="font-medium">Aug 19, 2022</div>
|
|
<div class="font-medium tracking-tight text-secondary">TOTAL DUE</div>
|
|
<div class="font-medium">$235,000.00</div>
|
|
</div>
|
|
<div class="grid auto-cols-max grid-flow-col gap-x-8 -mr-16 py-6 px-8 rounded-l-2xl bg-accent dark">
|
|
<div class="place-self-center w-24">
|
|
<img
|
|
class="w-24"
|
|
src="assets/images/logo/logo.svg">
|
|
</div>
|
|
<div class="pl-10 border-l text-md">
|
|
<div class="font-medium">Fuse Inc.</div>
|
|
<div>2810 Country Club Road</div>
|
|
<div>Cranford, NJ 07016</div>
|
|
<div>+66 123 455 87</div>
|
|
<div>hello@fuseinc.com</div>
|
|
<div>www.fuseinc.com</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-md">
|
|
<div class="text-xl font-medium">Brian Hughes</div>
|
|
<div>9301 Wood Street Philadelphia, PA 19111</div>
|
|
<div>hughes.brian@company.com</div>
|
|
<div>+55 552 455 87</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-12 gap-x-1 mt-12">
|
|
<!-- Columns -->
|
|
<div class="col-span-8 font-medium text-md text-secondary">SERVICE</div>
|
|
<div class="font-medium text-md text-right text-secondary">RATE</div>
|
|
<div class="font-medium text-md text-right text-secondary">QTY</div>
|
|
<div class="col-span-2 font-medium text-md text-right text-secondary">TOTAL</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="col-span-12 my-4 border-b"></div>
|
|
|
|
<!-- Item -->
|
|
<div class="col-span-8 text-lg font-medium">Prototype & Design</div>
|
|
<div class="self-center text-right">$75.00</div>
|
|
<div class="self-center text-right">240</div>
|
|
<div class="col-span-2 self-center text-right">$18,000.00</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="col-span-12 my-4 border-b"></div>
|
|
|
|
<!-- Item -->
|
|
<div class="col-span-8 text-lg font-medium">Development</div>
|
|
<div class="self-center text-right">$60.50</div>
|
|
<div class="self-center text-right">350</div>
|
|
<div class="col-span-2 self-center text-right">$21,175.00</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="col-span-12 my-4 border-b"></div>
|
|
|
|
<!-- Item -->
|
|
<div class="col-span-8 text-lg font-medium">Testing</div>
|
|
<div class="self-center text-right">$25.00</div>
|
|
<div class="self-center text-right">50</div>
|
|
<div class="col-span-2 self-center text-right">$1,250.00</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="col-span-12 my-4 border-b"></div>
|
|
|
|
<!-- Item -->
|
|
<div class="col-span-8 text-lg font-medium">Documentation & Training</div>
|
|
<div class="self-center text-right">$26.50</div>
|
|
<div class="self-center text-right">260</div>
|
|
<div class="col-span-2 self-center text-right">$6,890.00</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="col-span-12 my-4 border-b"></div>
|
|
|
|
<!-- Item -->
|
|
<div class="col-span-8 text-lg font-medium">Critical bug fixes for a year</div>
|
|
<div class="self-center text-right">$25,000</div>
|
|
<div class="self-center text-right">2</div>
|
|
<div class="col-span-2 self-center text-right">$50,000.00</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="col-span-12 my-4 border-b"></div>
|
|
|
|
<!-- Item -->
|
|
<div class="col-span-8 text-lg font-medium">Extended security updates for a year</div>
|
|
<div class="self-center text-right">$15.000</div>
|
|
<div class="self-center text-right">2</div>
|
|
<div class="col-span-2 self-center text-right">$30,000.00</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="col-span-12 my-4 border-b"></div>
|
|
|
|
<!-- Item -->
|
|
<div class="col-span-8 text-lg font-medium">Extended updates for a year</div>
|
|
<div class="self-center text-right">$50.000</div>
|
|
<div class="self-center text-right">2</div>
|
|
<div class="col-span-2 self-center text-right">$100,000.00</div>
|
|
|
|
<!-- Spacer -->
|
|
<div class="col-span-12 mt-16"></div>
|
|
|
|
<!-- Subtotal -->
|
|
<div class="col-span-10 self-center font-medium tracking-tight text-secondary">SUBTOTAL</div>
|
|
<div class="col-span-2 text-right text-lg">$227,315.00</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="col-span-12 my-3 border-b"></div>
|
|
|
|
<!-- Tax -->
|
|
<div class="col-span-10 self-center font-medium tracking-tight text-secondary">TAX</div>
|
|
<div class="col-span-2 text-right text-lg">$11,365.75</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="col-span-12 my-3 border-b"></div>
|
|
|
|
<!-- Discount -->
|
|
<div class="col-span-10 self-center font-medium tracking-tight text-secondary">DISCOUNT</div>
|
|
<div class="col-span-2 text-right text-lg">$3,680.75</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="col-span-12 my-3 border-b"></div>
|
|
|
|
<!-- Total -->
|
|
<div class="col-span-10 self-center text-2xl font-medium tracking-tight text-secondary">TOTAL</div>
|
|
<div class="col-span-2 text-right text-2xl font-medium">$235,000.00</div>
|
|
</div>
|
|
|
|
<div class="mt-16">
|
|
<div class="font-medium">Please pay within 15 days. Thank you for your business.</div>
|
|
<div class="flex items-start mt-4">
|
|
<img
|
|
class="flex-0 w-10 mt-2"
|
|
src="assets/images/logo/logo.svg">
|
|
<div class="ml-6 text-sm text-secondary">
|
|
In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque scelerisque lacus sed feugiat fermentum.
|
|
Cras aliquet facilisis pellentesque. Nunc hendrerit quam at leo commodo, a suscipit tellus dapibus. Etiam at felis volutpat est mollis lacinia.
|
|
Mauris placerat sem sit amet velit mollis, in porttitor ex finibus. Proin eu nibh id libero tincidunt lacinia et eget.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|