aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/PrintPreview.vue16
-rw-r--r--src/components/PrintPreviewFooter.vue68
-rw-r--r--src/components/PrintPreviewHeader.vue1
-rw-r--r--src/components/PrintPreviewItemsList.vue51
-rw-r--r--src/components/invoice_header.vue109
-rw-r--r--src/components/invoice_items_table.vue13
-rw-r--r--src/components/sidebar.vue4
7 files changed, 129 insertions, 133 deletions
diff --git a/src/components/PrintPreview.vue b/src/components/PrintPreview.vue
index ecbda88..1e98eb7 100644
--- a/src/components/PrintPreview.vue
+++ b/src/components/PrintPreview.vue
@@ -1,13 +1,12 @@
<script setup lang="ts">
+ import { ref, toRaw, onMounted } from "vue"
+
import PrintPreviewHeader from './PrintPreviewHeader.vue'
import PrintPreviewRecipientDetails from './PrintPreviewRecipientDetails.vue'
import PrintPreviewItemsList from './PrintPreviewItemsList.vue'
+ import PrintPreviewFooter from './PrintPreviewFooter.vue'
- const props = defineProps(["invoice"])
-
- setTimeout(() => {
- console.log(props.invoice)
- }, 1000)
+ const props = defineProps(["invoice", "total"])
</script>
<template>
@@ -18,6 +17,8 @@
:invoice="props.invoice"/>
<PrintPreviewItemsList
:items="props.invoice.Items"/>
+ <PrintPreviewFooter
+ :total="props.total"/>
</div>
</template>
@@ -28,4 +29,9 @@
.print-preview p {
margin: 0;
}
+.print-preview {
+ display: grid;
+ grid-template-rows: 1fr 2fr auto 1.5fr;
+ row-gap: 1em;
+}
</style>
diff --git a/src/components/PrintPreviewFooter.vue b/src/components/PrintPreviewFooter.vue
new file mode 100644
index 0000000..4594a92
--- /dev/null
+++ b/src/components/PrintPreviewFooter.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+ import { toRaw, onMounted } from "vue"
+ import { InvoiceTotal } from "./../classes/invoice.ts"
+
+ const props = defineProps(["total"])
+</script>
+
+<template>
+ <div class="print-preview-footer">
+ <div class="footer--col1">
+ <div class="total-words-label"></div>
+ <div class="total-words"></div>
+ </div>
+ <div class="footer--col2">
+ <div class="total-summary">
+ <span class="total-summary-row">
+ <span><strong>Total Before Tax</strong></span>
+ <span>{{props.total.TotalWithoutGST}}</span>
+ </span>
+
+ <span class="total-summary-row">
+ <span><strong>Total Tax Amount</strong></span>
+ <span>{{props.total.TotalGSTValue}}</span>
+ </span>
+
+ <span class="total-summary-row">
+ <span><strong>Total Amount</strong></span>
+ <span>{{props.total.TotalWithGST}}</span>
+ </span>
+ </div>
+ <div class="firm-signature-wrapper">
+ <img src="../assets/placeholdersignature.png"/>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style>
+.print-preview-footer {
+ border: 1px solid gray;
+ display: grid;
+ grid-template-columns: 4fr 3fr;
+ width: 100%;
+}
+.footer--col1 {
+ border-right: 1pt solid gray;
+ display: grid;
+ grid-template-rows: 2fr 8fr;
+}
+.firm-signature-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ max-width: 1.7in;
+}
+.firm-signature-wrapper img {
+ max-width: 100%;
+ max-height: 100%;
+}
+.total-summary {
+ display: grid;
+ grid-template-columns: 1fr;
+}
+.total-summary-row {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+}
+</style>
diff --git a/src/components/PrintPreviewHeader.vue b/src/components/PrintPreviewHeader.vue
index 33f82f2..4492eb5 100644
--- a/src/components/PrintPreviewHeader.vue
+++ b/src/components/PrintPreviewHeader.vue
@@ -49,7 +49,6 @@
grid-template-columns: 1.7in 2.4in auto;
grid-column-gap: 1em;
width: 100%;
- margin-bottom: 1em;
}
.logo-container {
display: flex;
diff --git a/src/components/PrintPreviewItemsList.vue b/src/components/PrintPreviewItemsList.vue
index 72f0fc1..2e81e9a 100644
--- a/src/components/PrintPreviewItemsList.vue
+++ b/src/components/PrintPreviewItemsList.vue
@@ -12,20 +12,32 @@
<div class="cell">Unit Price</div>
<div class="cell">Discount</div>
<div class="cell">Taxable Value</div>
- <div class="cell">GST</div>
+ <div class="cell nested-col-header">
+ <div>GST</div>
+ <div class="nested-col">
+ <div class="nested-cell">%</div>
+ <div class="nested-cell">cgst</div>
+ <div class="nested-cell nested-cell-last">sgst</div>
+ </div>
+ </div>
<div class="cell">Total</div>
</div>
<div class="item-list">
<div v-for="(item, index) in props.items" :key="item['id']" class="item-list-row">
- <div class="cell">{{ index + 1 }}</div>
- <div class="cell">{{ item.Name }}</div>
+ <div class="cell text-center">{{ index + 1 }}</div>
+ <div class="cell">{{ item.Brand }} {{ item.Name }}</div>
<div class="cell">{{ item.HSN }}</div>
- <div class="cell">1</div>
- <div class="cell">100</div>
- <div class="cell">0</div>
- <div class="cell">10</div>
- <div class="cell">18</div>
- <div class="cell">1000</div>
+ <div class="cell">{{ item.Quantity }}</div>
+ <div class="cell">{{ item.UnitPrice }}</div>
+ <div class="cell">null</div>
+ <div class="cell">{{ item.AmountWithoutGST }}</div>
+ <div class="cell nested-col">
+ <!-- TODO: check if cgst+sgst or igst needs to be calculated -->
+ <div class="nested-cell">{{ item.GSTPercentage }}%</div>
+ <div class="nested-cell">{{ item.TotalGSTValue.distribute(2)[0] }}</div>
+ <div class="nested-cell nested-cell-last">{{ item.TotalGSTValue.distribute(2)[1] }}</div>
+ </div>
+ <div class="cell">{{ item.TotalAmount }}</div>
</div>
</div>
</div>
@@ -33,7 +45,6 @@
<style>
.items-list-wrapper {
- margin-top: 1em;
border-top: 1px solid gray;
border-left: 1px solid gray;
}
@@ -43,7 +54,13 @@
}
.items-list-header, .item-list-row {
display: grid;
- grid-template-columns: 0.3in 2in 0.5in 0.5in 0.5in 0.6in 0.77in 1.5in 0.6in;
+ grid-template-columns: 0.3fr 3fr 0.8fr 0.8fr 1fr 1fr 1.1fr 2fr 0.8fr;
+}
+.nested-cell {
+ border-right: 1px solid gray;
+}
+.nested-cell-last {
+ border-right: none;
}
.items-list-header .cell {
font-weight: bold;
@@ -56,4 +73,16 @@
display: flex;
flex-direction: column;
}
+.items-list-header .nested-col-header {
+ display: grid;
+ grid-template-rows: 1fr 1fr;
+ grid-template-columns: 1fr;
+}
+.items-list-header .nested-col {
+ border-top: 1px solid gray;
+}
+.nested-col {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+}
</style>
diff --git a/src/components/invoice_header.vue b/src/components/invoice_header.vue
index fe35980..846c811 100644
--- a/src/components/invoice_header.vue
+++ b/src/components/invoice_header.vue
@@ -3,112 +3,9 @@ const props = defineProps(["invoice"])
</script>
<template>
- <div class="row g-3">
- <div class="col-md-2"><!-- spacer --></div>
-
- <!-- customer details -->
- <div class="col-md-3">
- <table class="table">
- <tr>
- <td>Invoice Number</td>
- <td>{{ props.invoice.InvoiceNumber }}</td>
- </tr>
-
- <tr>
- <td>Invoice Date</td>
- <td>{{ props.invoice.InvoiceDate }}</td>
- </tr>
-
- <tr>
- <td>Customer</td>
- <td>{{ props.invoice.CustomerName }}</td>
- </tr>
-
- <tr>
- <td>GSTIN</td>
- <td>{{ props.invoice.CustomerGstin }}</td>
- </tr>
-
- <tr>
- <td>Contact Name</td>
- <td>{{ props.invoice.CustomerContactName }}</td>
- </tr>
-
- <tr>
- <td>Phone</td>
- <td>{{ props.invoice.CustomerPhone }}</td>
- </tr>
-
- <tr>
- <td>Email</td>
- <td>{{ props.invoice.CustomerEmail }}</td>
- </tr>
-
- <tr>
- <td>Website</td>
- <td>{{ props.invoice.CustomerWebsite }}</td>
- </tr>
- </table>
- </div>
-
- <!-- billing address -->
- <div class="col-md-3">
- <table class="table">
- <tr>
- <td>Billing Address</td>
- <td>{{ props.invoice.BillingAddress.AddressText }}</td>
- </tr>
-
- <tr>
- <td>City</td>
- <td>{{ props.invoice.BillingAddress.City }}</td>
- </tr>
-
- <tr>
- <td>State</td>
- <td>{{ props.invoice.BillingAddress.State }}</td>
- </tr>
-
- <tr>
- <td>Postal Code</td>
- <td>{{ props.invoice.BillingAddress.PostalCode }}</td>
- </tr>
-
- <tr>
- <td>Country</td>
- <td>{{ props.invoice.BillingAddress.Country }}</td>
- </tr>
- </table>
- </div>
-
- <!-- shipping address -->
- <div class="col-md-3">
- <table class="table">
- <tr>
- <td>Shipping Address</td>
- <td>{{ props.invoice.ShippingAddress.AddressText }}</td>
- </tr>
-
- <tr>
- <td>City</td>
- <td>{{ props.invoice.ShippingAddress.City }}</td>
- </tr>
-
- <tr>
- <td>State</td>
- <td>{{ props.invoice.ShippingAddress.State }}</td>
- </tr>
-
- <tr>
- <td>Postal Code</td>
- <td>{{ props.invoice.ShippingAddress.PostalCode }}</td>
- </tr>
-
- <tr>
- <td>Country</td>
- <td>{{ props.invoice.ShippingAddress.Country }}</td>
- </tr>
- </table>
+ <div>
+ <div class="row">
+ <div class="col"></div>
</div>
</div>
</template>
diff --git a/src/components/invoice_items_table.vue b/src/components/invoice_items_table.vue
index ad1bf94..8b6c71d 100644
--- a/src/components/invoice_items_table.vue
+++ b/src/components/invoice_items_table.vue
@@ -27,20 +27,19 @@ const handleDelete = async (id) => {
</div>
</div>
- <table v-else :class="`invoice-items-table table table-striped table-hover ${props.preview ? 'table-light' : ''}`">
+ <table v-else :class="`invoice-items-table table table-striped table-hover`">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Item Name</th>
- <th v-if="!props.preview" scope="col">Brand</th>
+ <th scope="col">Brand</th>
<th scope="col">HSN</th>
<th scope="col">Unit Price</th>
- <th v-if="props.preview" scope="col">Taxable Value</th>
<th scope="col">GST</th>
<th scope="col">Quantity</th>
<th scope="col">Amount</th>
- <th v-if="!props.preview" scope="col" class="table-action-column">
+ <th scope="col" class="table-action-column">
<div class="wrapper">
<button class="btn btn-dark" v-on:click="emit('refresh')">
<i class="bi bi-arrow-clockwise"></i>
@@ -56,14 +55,12 @@ const handleDelete = async (id) => {
<td class="item-name-cell multi-row">
<span>{{ item.Name }}</span>
<span class="text-muted">
- <span v-if="props.preview">{{ item.BrandName }}</span>
{{ item.Description }}
</span>
</td>
- <td v-if="!props.preview">{{ item.BrandName }}</td>
+ <td>{{ item.BrandName }}</td>
<td>{{ item.HSN }}</td>
<td>{{ item.UnitPrice }}</td>
- <td v-if="props.preview">{{ item.AmountWithoutGST }}</td>
<td>
{{ item.GSTValue }} <span class="sup text-muted">{{ item.GSTPercentage }}%</span>
</td>
@@ -72,7 +69,7 @@ const handleDelete = async (id) => {
</td>
<td>{{ item.TotalAmount }}</td>
- <td v-if="!props.preview" class="table-action-column">
+ <td class="table-action-column">
<div class="wrapper">
<button class="btn" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-caret-down-fill"></i>
diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index 46f4f0c..ade83b7 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -16,7 +16,7 @@ watch(
<template>
<div id="sidebar" class="d-flex flex-column flex-shrink-0 bg-dark border-secondary border-end">
<RouterLink class="d-flex justify-content-center align-items-center p-3 link-dark text-decoration-none navbar-brand text-white" to="/">
- <img src="https://vidhukant.com/images/vidhukant.webp" alt="profile photo" width="32" height="32" class="rounded-circle">
+ <!--img src="" alt="profile photo" width="32" height="32" class="rounded-circle"-->
</RouterLink>
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
@@ -88,7 +88,7 @@ watch(
<div class="dropdown border-top border-secondary">
<a href="#" class="d-flex align-items-center justify-content-center p-3 link-light text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false">
- <img src="https://vidhukant.com/images/vidhukant.webp" alt="profile photo" width="24" height="24" class="rounded-circle">
+ <!--img src="" alt="profile photo" width="24" height="24" class="rounded-circle"-->
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser3">
<li><a class="text-white dropdown-item" href="#">Placeholder</a></li>
generated by cgit v1.2.3 (git 2.25.1) at 2024-09-19 21:35:47 +0000