1 files changed, 59 insertions, 0 deletions
diff --git a/src/components/PrintPreviewItemsList.vue b/src/components/PrintPreviewItemsList.vue
new file mode 100644
index 0000000..72f0fc1
--- /dev/null
+++ b/src/components/PrintPreviewItemsList.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+  const props = defineProps(["items"])
+</script>
+
+<template>
+  <div class="items-list-wrapper">
+    <div class="items-list-header">
+      <div class="cell">#</div>
+      <div class="cell">Item Name</div>
+      <div class="cell">HSN</div>
+      <div class="cell">Qty</div>
+      <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">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">{{ 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>
+    </div>
+  </div>
+</template>
+
+<style>
+.items-list-wrapper {
+  margin-top: 1em;
+  border-top: 1px solid gray;
+  border-left: 1px solid gray;
+}
+.cell {
+  border-right: 1px solid gray;
+  border-bottom: 1px solid gray;
+}
+.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;
+}
+.items-list-header .cell {
+  font-weight: bold;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.item-list {
+  display: flex;
+  flex-direction: column;
+}
+</style>