added basic (and incomplete) print preview template

1 files changed, 146 insertions, 0 deletions

diff --git a/src/components/PrintPreviewRecipientDetails.vue b/src/components/PrintPreviewRecipientDetails.vue
new file mode 100644
index 0000000..6f1f5b7
--- /dev/null
+++ b/src/components/PrintPreviewRecipientDetails.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+  const props = defineProps(["invoice"])
+</script>
+
+<template>
+  <div class="print-preview-recipient-info">
+    <div class="recipient-info--row1">
+      <div class="recipient-info--col1">
+      </div>
+      <div class="recipient-info--col2">
+        <span class="invoice-label">
+          <span><strong>INVOICE</strong></span>
+          <span>Original for Recipient</span>
+        </span>
+      </div>
+    </div>
+    <div class="recipient-info--row2">
+      <div class="recipient-info--col1 recipient-contact">
+        <div class="label">
+          <span><strong>Bill To</strong></span>
+          <span>{{ props.invoice.CustomerName }}</span>
+        </div>
+        <div class="label">
+          <span><strong>Address</strong></span>
+          <span>
+            {{ props.invoice.BillingAddress.AddressText }}<br>
+            {{ props.invoice.BillingAddress.City }}
+            ({{ props.invoice.BillingAddress.PostalCode }}), 
+            {{ props.invoice.BillingAddress.State }},
+            {{ props.invoice.BillingAddress.Country }}
+          </span>
+        </div>
+        <div class="label">
+          <span><strong>Contact</strong></span>
+          <span>{{ props.invoice.CustomerContactName }}</span>
+        </div>
+        <div class="label">
+          <span><strong>Phone</strong></span>
+          <span>{{ props.invoice.CustomerPhone }}</span>
+        </div>
+        <div class="label">
+          <span><strong>Email</strong></span>
+          <span>{{ props.invoice.CustomerEmail }}</span>
+        </div>
+        <div class="label">
+          <span><strong>Website</strong></span>
+          <span>{{ props.invoice.CustomerWebsite }}</span>
+        </div>
+        <div class="label">
+          <span><strong>GSTIN</strong></span>
+          <span>{{ props.invoice.CustomerGstin }}</span>
+        </div>
+      </div>
+      <div class="recipient-info--col2">
+        <div class="invoice-meta">
+          <div class="label">
+            <span><strong>Invoice Number: </strong></span>
+            <span>{{ props.invoice.InvoiceNumber }}</span>
+          </div>
+          <div class="label">
+            <span><strong>Invoice Date: </strong></span>
+            <span>{{ new Date(props.invoice.InvoiceDate).toLocaleDateString() }}</span>
+          </div>
+        </div>
+        <div class="shipping-address">
+          <div class="label">
+            <span><strong>Shipping Address</strong></span>
+            <span>
+              {{ props.invoice.ShippingAddress.AddressText }}<br>
+              {{ props.invoice.ShippingAddress.City }}
+              ({{ props.invoice.ShippingAddress.PostalCode }}), 
+              {{ props.invoice.ShippingAddress.State }},
+              {{ props.invoice.ShippingAddress.Country }}
+            </span>
+            
+            <span><strong>City</strong></span>
+            <span>{{ props.invoice.ShippingAddress.City }}</span>
+
+            <span><strong>State</strong></span>
+            <span>{{ props.invoice.ShippingAddress.State }}</span>
+
+            <span><strong>ZIP Code</strong></span>
+            <span>{{ props.invoice.ShippingAddress.PostalCode }}</span>
+
+            <span><strong>Country</strong></span>
+            <span>{{ props.invoice.ShippingAddress.Country }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.print-preview-recipient-info {
+  border: 1px solid gray;
+  display: grid;
+  grid-template-rows: 2em auto;
+  width: 100%;
+}
+.recipient-info--row1,
+.recipient-info--row2 {
+  display: grid;
+  grid-template-columns: 3fr 4fr;
+}
+.recipient-info--row1 {
+  border-bottom: 1px solid gray;
+}
+.recipient-info--col1 {
+  border-right: 1px solid gray;
+}
+.recipient-info--col1 {
+  padding: 0.1em 0.3em;
+}
+.invoice-label {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.3em;
+}
+.recipient-contact {
+  display: flex;
+  flex-direction: column;
+}
+.recipient-contact .label {
+  display: grid;
+  grid-template-columns: 5em auto;
+}
+.invoice-meta {
+  width: 100%;
+  border-bottom: 1px solid gray;
+  padding: 0.3em 0.3em;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.invoice-meta .label, .shipping-address .label {
+  display: grid;
+  grid-template-columns: 9em auto;
+}
+.shipping-address {
+  width: 100%;
+  padding: 0.1em 0.3em;
+}
+</style>