1 files changed, 99 insertions, 0 deletions
diff --git a/src/components/PrintPreviewHeader.vue b/src/components/PrintPreviewHeader.vue
new file mode 100644
index 0000000..33f82f2
--- /dev/null
+++ b/src/components/PrintPreviewHeader.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+  const props = defineProps(["invoice"])
+</script>
+
+<template>
+  <div class="print-preview-header">
+    <div class="logo-container"> 
+      <img src="../assets/placeholderlogo.png"/>
+    </div>
+
+    <div> 
+      <div class="firm-name">
+        <p>{{ props.invoice.IssuerFirmName }}</p>
+      </div>
+      <div class="firm-address">
+        {{ props.invoice.IssuerFirmAddress }}
+      </div>
+    </div>
+
+    <div class="header-col3"> 
+      <div class="firm-contact">
+        <div class="label">
+          <span><strong>Phone:</strong></span>
+          <span>{{ props.invoice.IssuerFirmPhone }}</span>
+        </div>
+        <div class="label">
+          <span><strong>Email:</strong></span>
+          <span>{{ props.invoice.IssuerFirmEmail }}</span>
+        </div>
+        <div class="label">
+          <span><strong>Website:</strong></span>
+          <span>{{ props.invoice.IssuerFirmWebsite }}</span>
+        </div>
+        <div class="label">
+          <span><strong>GSTIN:</strong></span>
+          <span>{{ props.invoice.IssuerFirmGstin }}</span>
+        </div>
+      </div>
+      <div class="qr-container"> 
+        <img src="../assets/placeholderqr.png"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.print-preview-header {
+  display: grid;
+  grid-template-columns: 1.7in 2.4in auto;
+  grid-column-gap: 1em;
+  width: 100%;
+  margin-bottom: 1em;
+}
+.logo-container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  max-width: 1.7in;
+}
+.logo-container img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.firm-name {
+  height: 2em;
+}
+.firm-name p {
+  line-height: 0.8em;
+  font-size: 1.6em;
+  font-weight: bold;
+}
+.firm-address {
+  font-size: 0.9em;
+  line-height: 1.2em;
+  white-space: pre-wrap;
+}
+.header-col3 {
+  display: grid;
+  grid-template-columns: auto 0.8in;
+}
+.firm-contact {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.9em;
+}
+.firm-contact .label {
+  display: grid;
+  grid-template-columns: 4.5em auto;
+}
+.qr-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  width: 100%;
+}
+.qr-container img {
+  max-width: 100%;
+}
+</style>