vlite3 1.2.1 → 1.2.2

package/components/Invoice/InvoiceVariant4.vue.js

@@ -1,62 +1,62 @@
-import { defineComponent as I, computed as x, openBlock as o, createElementBlock as s, normalizeStyle as w, createElementVNode as a, normalizeClass as n, toDisplayString as t, createBlock as D, createCommentVNode as c, createVNode as r, unref as u, createTextVNode as m, Fragment as f, renderList as z } from "vue";
-import p from "../Price/Price.vue.js";
+import { defineComponent as _, computed as v, openBlock as o, createElementBlock as a, normalizeStyle as w, createElementVNode as s, normalizeClass as l, toDisplayString as t, createBlock as z, createCommentVNode as c, createVNode as u, unref as m, createTextVNode as r, Fragment as x, renderList as D } from "vue";
+import f from "../Price/Price.vue.js";
 import g from "../DateTime/DateTime.vue.js";
 import T from "../Barcode/Barcode.vue.js";
 import N from "../QRCode/QRCode.vue.js";
 import k from "../Avatar.vue.js";
 import V from "../StatusChip/StatusChip.vue.js";
 import B from "./InvoiceTotals.vue.js";
-const $ = { class: "flex flex-col sm:flex-row justify-between items-start gap-4" }, C = { class: "flex flex-col gap-3" }, L = { class: "flex items-center gap-2.5 mt-1.5 flex-wrap" }, S = { class: "flex flex-wrap gap-5" }, j = { key: 0 }, q = { key: 1 }, E = { class: "flex flex-col items-start sm:items-end gap-2 shrink-0" }, F = { class: "grid grid-cols-1 md:grid-cols-2 gap-5 mb-6" }, O = { key: 0 }, P = { key: 1 }, K = { key: 2 }, Q = { key: 3 }, U = { class: "flex flex-col gap-0.5" }, A = { key: 0 }, G = { key: 1 }, H = {
+const S = { class: "flex flex-col sm:flex-row justify-between items-start gap-4" }, $ = { class: "flex flex-col gap-3" }, M = { class: "flex items-center gap-2.5 mt-1.5 flex-wrap" }, C = { class: "flex flex-wrap gap-5" }, L = { key: 0 }, j = { key: 1 }, q = { key: 2 }, E = { key: 3 }, P = { class: "flex flex-col items-start sm:items-end gap-2 shrink-0" }, F = { key: 0 }, O = { key: 1 }, K = { key: 2 }, Q = { key: 3 }, U = { class: "flex flex-col gap-0.5" }, A = { key: 0 }, G = { key: 1 }, H = {
   key: 2,
   class: "text-gray-700 font-medium"
-}, J = { key: 4 }, M = { key: 1 }, R = { key: 1 }, W = { key: 2 }, X = { key: 3 }, Y = { class: "flex flex-col gap-0.5" }, Z = { key: 0 }, ee = { key: 1 }, te = {
+}, J = { key: 4 }, R = { key: 1 }, W = { key: 1 }, X = { key: 2 }, Y = { key: 3 }, Z = { class: "flex flex-col gap-0.5" }, ee = { key: 0 }, te = { key: 1 }, oe = {
   key: 4,
   class: "text-xs font-semibold"
-}, oe = {
+}, ae = { key: 2 }, se = { key: 1 }, ce = { key: 2 }, ne = { key: 3 }, le = { class: "flex flex-col gap-0.5" }, ie = { key: 0 }, de = { key: 1 }, ue = {
   scope: "col",
   class: "invoice-th font-bold"
-}, ae = {
+}, re = {
   scope: "col",
   class: "invoice-th invoice-text-right font-bold"
-}, se = {
+}, me = {
   key: 0,
   scope: "col",
   class: "invoice-th invoice-text-right font-bold"
-}, ce = {
+}, pe = {
   scope: "col",
   class: "invoice-th invoice-text-right font-bold"
-}, le = {
+}, ve = {
   key: 1,
   scope: "col",
   class: "invoice-th invoice-text-right font-bold"
-}, ne = {
+}, xe = {
   scope: "col",
   class: "invoice-th invoice-text-right font-bold text-gray-900"
-}, ie = { class: "invoice-tbody" }, de = { class: "invoice-td" }, re = { class: "flex items-center gap-3" }, ue = { class: "min-w-0 flex-1" }, me = ["title"], ve = ["title"], xe = {
+}, fe = { class: "invoice-tbody" }, he = { class: "invoice-td" }, ye = { class: "flex items-center gap-3" }, be = { class: "min-w-0 flex-1" }, ge = ["title"], ke = ["title"], Ie = {
   key: 1,
   class: "block text-xs text-muted-foreground line-clamp-2 max-w-md whitespace-normal mt-0.5 leading-relaxed"
-}, fe = { class: "invoice-td invoice-text-right tabular-nums text-muted-foreground font-semibold text-sm" }, pe = {
+}, _e = { class: "invoice-td invoice-text-right tabular-nums text-muted-foreground font-semibold text-sm" }, we = {
   key: 0,
   class: "invoice-td invoice-text-right tabular-nums text-muted-foreground text-sm"
-}, he = { class: "invoice-td invoice-text-right tabular-nums text-muted-foreground font-medium" }, be = {
+}, ze = { class: "invoice-td invoice-text-right tabular-nums text-muted-foreground font-medium" }, De = {
   key: 1,
   class: "invoice-td invoice-text-right tabular-nums text-success font-bold"
-}, ye = {
+}, Te = {
   key: 0,
   class: "flex flex-col items-end"
-}, ge = {
+}, Ne = {
   key: 0,
   class: "text-sm uppercase tracking-wider font-extrabold opacity-80 mt-0.5"
-}, ke = {
+}, Ve = {
   key: 1,
   class: "text-muted-foreground font-normal"
-}, _e = { class: "invoice-td invoice-text-right tabular-nums font-bold text-foreground" }, Ie = { class: "flex flex-row flex-wrap gap-2 items-center" }, we = {
+}, Be = { class: "invoice-td invoice-text-right tabular-nums font-bold text-foreground" }, Se = { class: "flex flex-row flex-wrap gap-2 items-center" }, $e = {
   key: 0,
   class: "shrink-0 inline-block"
-}, De = {
+}, Me = {
   key: 1,
   class: "shrink-0 inline-block overflow-hidden"
-}, ze = { key: 0 }, Te = { class: "w-full md:w-[42%] min-w-[260px]" }, Ne = { key: 0 }, Ve = { key: 1 }, Oe = /* @__PURE__ */ I({
+}, Ce = { key: 0 }, Le = { class: "w-full md:w-[42%] min-w-[260px]" }, je = { key: 0 }, qe = { key: 1 }, He = /* @__PURE__ */ _({
   __name: "InvoiceVariant4",
   props: {
     data: {},
@@ -64,13 +64,13 @@ const $ = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
     displayBarcodeValue: { type: Boolean, default: !1 },
     labels: {}
   },
-  setup(l) {
-    const h = l, e = x(() => h.data), d = x(() => h.labels || {}), b = x(() => e.value.items.some((v) => !!v.size)), y = x(() => e.value.items.some((v) => v.discount !== void 0));
-    return (v, Be) => (o(), s("div", {
+  setup(n) {
+    const h = n, e = v(() => h.data), d = v(() => h.labels || {}), y = v(() => e.value.items.some((p) => !!p.size)), b = v(() => e.value.items.some((p) => p.discount !== void 0));
+    return (p, Ee) => (o(), a("div", {
       class: "v-invoice-v4 bg-background border border-border text-foreground overflow-hidden rounded-xl font-sans print:shadow-none print:border-none",
       style: w({
-        "--invoice-cell-px": l.compact ? "0.75rem" : "1rem",
-        "--invoice-cell-py": l.compact ? "0.5rem" : "0.75rem",
+        "--invoice-cell-px": n.compact ? "0.75rem" : "1rem",
+        "--invoice-cell-py": n.compact ? "0.5rem" : "0.75rem",
         "--invoice-thead-bg": "var(--color-muted)",
         "--invoice-thead-border": "1px solid var(--color-border)",
         "--invoice-thead-color": "var(--color-muted-foreground)",
@@ -79,20 +79,20 @@ const $ = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
         "--invoice-td-valign": "middle"
       })
     }, [
-      a("div", {
-        class: n(["bg-gray-900 text-white", l.compact ? "px-5 py-4" : "px-6 py-5 sm:px-8"])
+      s("div", {
+        class: l(["bg-gray-900 text-white", n.compact ? "px-5 py-4" : "px-6 py-5 sm:px-8"])
       }, [
-        a("div", $, [
-          a("div", C, [
-            a("div", null, [
-              a("h1", {
-                class: n(["font-black tracking-tighter uppercase leading-none text-white", l.compact ? "text-3xl" : "text-4xl"])
+        s("div", S, [
+          s("div", $, [
+            s("div", null, [
+              s("h1", {
+                class: l(["font-black tracking-tighter uppercase leading-none text-white", n.compact ? "text-3xl" : "text-4xl"])
               }, t(e.value.brandTitle || d.value.invoice || "INVOICE"), 3),
-              a("div", L, [
-                a("span", {
-                  class: n(["font-semibold opacity-80", l.compact ? "text-sm" : "text-base"])
+              s("div", M, [
+                s("span", {
+                  class: l(["font-semibold opacity-80", n.compact ? "text-sm" : "text-base"])
                 }, " #" + t(e.value.invoiceNumber), 3),
-                e.value.status ? (o(), D(V, {
+                e.value.status ? (o(), z(V, {
                   key: 0,
                   status: e.value.status,
                   "hide-icon": "",
@@ -100,177 +100,221 @@ const $ = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
                 }, null, 8, ["status"])) : c("", !0)
               ])
             ]),
-            a("div", S, [
-              e.value.issuedDate ? (o(), s("div", j, [
-                a("p", {
-                  class: n(["font-semibold uppercase tracking-widest opacity-60", l.compact ? "text-[9px] mb-0.5" : "text-[10px] mb-1"])
+            s("div", C, [
+              e.value.issuedDate ? (o(), a("div", L, [
+                s("p", {
+                  class: l(["font-semibold uppercase tracking-widest opacity-60", n.compact ? "text-[9px] mb-0.5" : "text-[10px] mb-1"])
                 }, t(d.value.issued || "Issue Date"), 3),
-                r(u(g), {
+                u(m(g), {
                   value: e.value.issuedDate,
                   type: "date",
-                  class: n(["font-extrabold", l.compact ? "text-sm" : "text-base"])
+                  class: l(["font-extrabold", n.compact ? "text-sm" : "text-base"])
                 }, null, 8, ["value", "class"])
               ])) : c("", !0),
-              e.value.dueDate ? (o(), s("div", q, [
-                a("p", {
-                  class: n(["font-semibold uppercase tracking-widest opacity-60", l.compact ? "text-[9px] mb-0.5" : "text-[10px] mb-1"])
+              e.value.dueDate ? (o(), a("div", j, [
+                s("p", {
+                  class: l(["font-semibold uppercase tracking-widest opacity-60", n.compact ? "text-[9px] mb-0.5" : "text-[10px] mb-1"])
                 }, t(d.value.due || "Due Date"), 3),
-                r(u(g), {
+                u(m(g), {
                   value: e.value.dueDate,
                   type: "date",
-                  class: n(["font-extrabold", l.compact ? "text-sm" : "text-base"])
+                  class: l(["font-extrabold", n.compact ? "text-sm" : "text-base"])
                 }, null, 8, ["value", "class"])
+              ])) : c("", !0),
+              e.value.paymentMethod ? (o(), a("div", q, [
+                s("p", {
+                  class: l(["font-semibold uppercase tracking-widest opacity-60", n.compact ? "text-[9px] mb-0.5" : "text-[10px] mb-1"])
+                }, t(d.value.paymentMethod || "Payment"), 3),
+                s("p", {
+                  class: l(["font-extrabold", n.compact ? "text-sm" : "text-base"])
+                }, t(e.value.paymentMethod), 3)
+              ])) : c("", !0),
+              e.value.shippingMethod ? (o(), a("div", E, [
+                s("p", {
+                  class: l(["font-semibold uppercase tracking-widest opacity-60", n.compact ? "text-[9px] mb-0.5" : "text-[10px] mb-1"])
+                }, t(d.value.shippingMethod || "Shipping"), 3),
+                s("p", {
+                  class: l(["font-extrabold", n.compact ? "text-sm" : "text-base"])
+                }, t(e.value.shippingMethod), 3)
               ])) : c("", !0)
             ])
           ]),
-          a("div", E, [
-            e.value.brandLogo ? (o(), s("div", {
+          s("div", P, [
+            e.value.brandLogo ? (o(), a("div", {
               key: 0,
-              class: n(["bg-white/10 rounded-lg p-2 border border-white/20", l.compact ? "h-11" : "h-14"])
+              class: l(["bg-white/10 rounded-lg p-2 border border-white/20", n.compact ? "h-11" : "h-14"])
             }, [
-              r(k, {
+              u(k, {
                 src: e.value.brandLogo,
                 alt: e.value.brandName,
                 class: "h-full w-auto object-contain",
                 rounded: "sm"
               }, null, 8, ["src", "alt"])
             ], 2)) : c("", !0),
-            e.value.brandName ? (o(), s("h2", {
+            e.value.brandName ? (o(), a("h2", {
               key: 1,
-              class: n(["font-extrabold tracking-tight opacity-90 text-white", l.compact ? "text-base" : "text-lg"])
+              class: l(["font-extrabold tracking-tight opacity-90 text-white", n.compact ? "text-base" : "text-lg"])
             }, t(e.value.brandName), 3)) : c("", !0)
           ])
         ])
       ], 2),
-      a("div", {
-        class: n(l.compact ? "p-5" : "px-7 py-4.5")
+      s("div", {
+        class: l(n.compact ? "p-5" : "px-7 py-4.5")
       }, [
-        a("div", F, [
-          e.value.companyInfo ? (o(), s("div", O, [
-            a("p", {
-              class: n(["font-bold text-gray-700 uppercase tracking-widest border-b border-gray-300 pb-1 inline-block mb-2", l.compact ? "text-[10px]" : "text-[11px]"])
+        s("div", {
+          class: l(["grid grid-cols-1 sm:grid-cols-2 gap-5 mb-6", e.value.shippingInfo ? "md:grid-cols-3" : "md:grid-cols-2"])
+        }, [
+          e.value.companyInfo ? (o(), a("div", F, [
+            s("p", {
+              class: l(["font-bold text-gray-700 uppercase tracking-widest border-b border-gray-300 pb-1 inline-block mb-2", n.compact ? "text-[10px]" : "text-[11px]"])
             }, t(d.value.from || "From"), 3),
-            a("div", {
-              class: n(["text-muted-foreground leading-relaxed", l.compact ? "text-xs space-y-0.5" : "text-sm space-y-1"])
+            s("div", {
+              class: l(["text-muted-foreground leading-relaxed", n.compact ? "text-xs space-y-0.5" : "text-sm space-y-1"])
             }, [
-              e.value.companyInfo.name ? (o(), s("p", {
+              e.value.companyInfo.name ? (o(), a("p", {
                 key: 0,
-                class: n(["font-extrabold text-foreground", l.compact ? "text-sm mb-0.5" : "text-base mb-1"])
+                class: l(["font-extrabold text-foreground", n.compact ? "text-sm mb-0.5" : "text-base mb-1"])
               }, t(e.value.companyInfo.name), 3)) : c("", !0),
-              e.value.companyInfo.address ? (o(), s("p", P, t(e.value.companyInfo.address), 1)) : c("", !0),
-              e.value.companyInfo.city || e.value.companyInfo.state ? (o(), s("p", K, [
-                m(t(e.value.companyInfo.city), 1),
-                e.value.companyInfo.city && e.value.companyInfo.state ? (o(), s(f, { key: 0 }, [
-                  m(", ")
+              e.value.companyInfo.address ? (o(), a("p", O, t(e.value.companyInfo.address), 1)) : c("", !0),
+              e.value.companyInfo.city || e.value.companyInfo.state ? (o(), a("p", K, [
+                r(t(e.value.companyInfo.city), 1),
+                e.value.companyInfo.city && e.value.companyInfo.state ? (o(), a(x, { key: 0 }, [
+                  r(", ")
                 ], 64)) : c("", !0),
-                m(t(e.value.companyInfo.state) + " " + t(e.value.companyInfo.zip), 1)
+                r(t(e.value.companyInfo.state) + " " + t(e.value.companyInfo.zip), 1)
               ])) : c("", !0),
-              e.value.companyInfo.country ? (o(), s("p", Q, t(e.value.companyInfo.country), 1)) : c("", !0),
-              a("div", U, [
-                e.value.companyInfo.email ? (o(), s("p", A, t(e.value.companyInfo.email), 1)) : c("", !0),
-                e.value.companyInfo.phone ? (o(), s("p", G, t(e.value.companyInfo.phone), 1)) : c("", !0),
-                e.value.companyInfo.website ? (o(), s("p", H, t(e.value.companyInfo.website), 1)) : c("", !0)
+              e.value.companyInfo.country ? (o(), a("p", Q, t(e.value.companyInfo.country), 1)) : c("", !0),
+              s("div", U, [
+                e.value.companyInfo.email ? (o(), a("p", A, t(e.value.companyInfo.email), 1)) : c("", !0),
+                e.value.companyInfo.phone ? (o(), a("p", G, t(e.value.companyInfo.phone), 1)) : c("", !0),
+                e.value.companyInfo.website ? (o(), a("p", H, t(e.value.companyInfo.website), 1)) : c("", !0)
               ]),
-              e.value.companyInfo.taxId ? (o(), s("p", J, t(d.value.taxId || "Tax ID") + ": " + t(e.value.companyInfo.taxId), 1)) : c("", !0)
+              e.value.companyInfo.taxId ? (o(), a("p", J, t(d.value.taxId || "Tax ID") + ": " + t(e.value.companyInfo.taxId), 1)) : c("", !0)
             ], 2)
           ])) : c("", !0),
-          e.value.customerInfo ? (o(), s("div", M, [
-            a("p", {
-              class: n(["font-bold text-gray-700 uppercase tracking-widest border-b border-gray-300 pb-1 inline-block mb-2", l.compact ? "text-[10px]" : "text-[11px]"])
+          e.value.customerInfo ? (o(), a("div", R, [
+            s("p", {
+              class: l(["font-bold text-gray-700 uppercase tracking-widest border-b border-gray-300 pb-1 inline-block mb-2", n.compact ? "text-[10px]" : "text-[11px]"])
             }, t(d.value.billedTo || "Billed To"), 3),
-            a("div", {
-              class: n(["text-muted-foreground leading-relaxed", l.compact ? "text-xs space-y-0.5" : "text-sm space-y-1"])
+            s("div", {
+              class: l(["text-muted-foreground leading-relaxed", n.compact ? "text-xs space-y-0.5" : "text-sm space-y-1"])
             }, [
-              e.value.customerInfo.name ? (o(), s("p", {
+              e.value.customerInfo.name ? (o(), a("p", {
                 key: 0,
-                class: n(["font-extrabold text-foreground", l.compact ? "text-sm mb-0.5" : "text-base mb-1"])
+                class: l(["font-extrabold text-foreground", n.compact ? "text-sm mb-0.5" : "text-base mb-1"])
               }, t(e.value.customerInfo.name), 3)) : c("", !0),
-              e.value.customerInfo.address ? (o(), s("p", R, t(e.value.customerInfo.address), 1)) : c("", !0),
-              e.value.customerInfo.city || e.value.customerInfo.state ? (o(), s("p", W, [
-                m(t(e.value.customerInfo.city), 1),
-                e.value.customerInfo.city && e.value.customerInfo.state ? (o(), s(f, { key: 0 }, [
-                  m(", ")
+              e.value.customerInfo.address ? (o(), a("p", W, t(e.value.customerInfo.address), 1)) : c("", !0),
+              e.value.customerInfo.city || e.value.customerInfo.state ? (o(), a("p", X, [
+                r(t(e.value.customerInfo.city), 1),
+                e.value.customerInfo.city && e.value.customerInfo.state ? (o(), a(x, { key: 0 }, [
+                  r(", ")
                 ], 64)) : c("", !0),
-                m(t(e.value.customerInfo.state) + " " + t(e.value.customerInfo.zip), 1)
+                r(t(e.value.customerInfo.state) + " " + t(e.value.customerInfo.zip), 1)
               ])) : c("", !0),
-              e.value.customerInfo.country ? (o(), s("p", X, t(e.value.customerInfo.country), 1)) : c("", !0),
-              a("div", Y, [
-                e.value.customerInfo.email ? (o(), s("p", Z, t(e.value.customerInfo.email), 1)) : c("", !0),
-                e.value.customerInfo.phone ? (o(), s("p", ee, t(e.value.customerInfo.phone), 1)) : c("", !0)
+              e.value.customerInfo.country ? (o(), a("p", Y, t(e.value.customerInfo.country), 1)) : c("", !0),
+              s("div", Z, [
+                e.value.customerInfo.email ? (o(), a("p", ee, t(e.value.customerInfo.email), 1)) : c("", !0),
+                e.value.customerInfo.phone ? (o(), a("p", te, t(e.value.customerInfo.phone), 1)) : c("", !0)
               ]),
-              e.value.customerInfo.taxId ? (o(), s("p", te, t(d.value.taxId || "Tax ID") + ": " + t(e.value.customerInfo.taxId), 1)) : c("", !0)
+              e.value.customerInfo.taxId ? (o(), a("p", oe, t(d.value.taxId || "Tax ID") + ": " + t(e.value.customerInfo.taxId), 1)) : c("", !0)
+            ], 2)
+          ])) : c("", !0),
+          e.value.shippingInfo ? (o(), a("div", ae, [
+            s("p", {
+              class: l(["font-bold text-gray-700 uppercase tracking-widest border-b border-gray-300 pb-1 inline-block mb-2", n.compact ? "text-[10px]" : "text-[11px]"])
+            }, t(d.value.shipTo || "Ship To"), 3),
+            s("div", {
+              class: l(["text-muted-foreground leading-relaxed", n.compact ? "text-xs space-y-0.5" : "text-sm space-y-1"])
+            }, [
+              e.value.shippingInfo.name ? (o(), a("p", {
+                key: 0,
+                class: l(["font-extrabold text-foreground", n.compact ? "text-sm mb-0.5" : "text-base mb-1"])
+              }, t(e.value.shippingInfo.name), 3)) : c("", !0),
+              e.value.shippingInfo.address ? (o(), a("p", se, t(e.value.shippingInfo.address), 1)) : c("", !0),
+              e.value.shippingInfo.city || e.value.shippingInfo.state ? (o(), a("p", ce, [
+                r(t(e.value.shippingInfo.city), 1),
+                e.value.shippingInfo.city && e.value.shippingInfo.state ? (o(), a(x, { key: 0 }, [
+                  r(", ")
+                ], 64)) : c("", !0),
+                r(t(e.value.shippingInfo.state) + " " + t(e.value.shippingInfo.zip), 1)
+              ])) : c("", !0),
+              e.value.shippingInfo.country ? (o(), a("p", ne, t(e.value.shippingInfo.country), 1)) : c("", !0),
+              s("div", le, [
+                e.value.shippingInfo.email ? (o(), a("p", ie, t(e.value.shippingInfo.email), 1)) : c("", !0),
+                e.value.shippingInfo.phone ? (o(), a("p", de, t(e.value.shippingInfo.phone), 1)) : c("", !0)
+              ])
             ], 2)
           ])) : c("", !0)
-        ]),
-        a("div", {
-          class: n(["border border-border rounded-lg overflow-x-auto", l.compact ? "mb-5" : "mb-6"])
+        ], 2),
+        s("div", {
+          class: l(["border border-border rounded-lg overflow-x-auto", n.compact ? "mb-5" : "mb-6"])
         }, [
-          a("table", {
-            class: n(["invoice-table", l.compact ? "text-xs" : "text-sm"])
+          s("table", {
+            class: l(["invoice-table", n.compact ? "text-xs" : "text-sm"])
           }, [
-            a("thead", {
-              class: n(["invoice-thead uppercase", l.compact ? "text-[9px]" : "text-[10px]"])
+            s("thead", {
+              class: l(["invoice-thead uppercase", n.compact ? "text-[9px]" : "text-[10px]"])
             }, [
-              a("tr", null, [
-                a("th", oe, t(d.value.item || "Product"), 1),
-                a("th", ae, t(d.value.qty || "Qty"), 1),
-                b.value ? (o(), s("th", se, t(d.value.size || "Size"), 1)) : c("", !0),
-                a("th", ce, t(d.value.price || "Price"), 1),
-                y.value ? (o(), s("th", le, t(d.value.discount || "Discount"), 1)) : c("", !0),
-                a("th", ne, t(d.value.total || "Total"), 1)
+              s("tr", null, [
+                s("th", ue, t(d.value.item || "Product"), 1),
+                s("th", re, t(d.value.qty || "Qty"), 1),
+                y.value ? (o(), a("th", me, t(d.value.size || "Size"), 1)) : c("", !0),
+                s("th", pe, t(d.value.price || "Price"), 1),
+                b.value ? (o(), a("th", ve, t(d.value.discount || "Discount"), 1)) : c("", !0),
+                s("th", xe, t(d.value.total || "Total"), 1)
               ])
             ], 2),
-            a("tbody", ie, [
-              (o(!0), s(f, null, z(e.value.items, (i, _) => (o(), s("tr", {
-                key: i.id || _,
+            s("tbody", fe, [
+              (o(!0), a(x, null, D(e.value.items, (i, I) => (o(), a("tr", {
+                key: i.id || I,
                 class: "invoice-tr group"
               }, [
-                a("td", de, [
-                  a("div", re, [
-                    i.thumbnail ? (o(), s("div", {
+                s("td", he, [
+                  s("div", ye, [
+                    i.thumbnail ? (o(), a("div", {
                       key: 0,
-                      class: n(["shrink-0 overflow-hidden border border-border", l.compact ? "w-9 h-9 rounded-md" : "w-10 h-10 rounded-lg"])
+                      class: l(["shrink-0 overflow-hidden border border-border", n.compact ? "w-9 h-9 rounded-md" : "w-10 h-10 rounded-lg"])
                     }, [
-                      r(k, {
+                      u(k, {
                         src: i.thumbnail,
                         alt: i.name,
                         class: "w-full h-full",
                         rounded: "sm"
                       }, null, 8, ["src", "alt"])
                     ], 2)) : c("", !0),
-                    a("div", ue, [
-                      a("span", {
+                    s("div", be, [
+                      s("span", {
                         class: "block truncate font-semibold text-foreground text-sm",
                         title: i.name
-                      }, t(i.name), 9, me),
-                      i.sku ? (o(), s("div", {
+                      }, t(i.name), 9, ge),
+                      i.sku ? (o(), a("div", {
                         key: 0,
                         class: "text-xs uppercase tracking-widest text-muted-foreground font-medium truncate mt-0.5",
                         title: i.sku
-                      }, t(d.value.sku || "SKU") + ": " + t(i.sku), 9, ve)) : c("", !0),
-                      i.description && !l.compact ? (o(), s("span", xe, t(i.description), 1)) : c("", !0)
+                      }, t(d.value.sku || "SKU") + ": " + t(i.sku), 9, ke)) : c("", !0),
+                      i.description && !n.compact ? (o(), a("span", Ie, t(i.description), 1)) : c("", !0)
                     ])
                   ])
                 ]),
-                a("td", fe, t(i.quantity), 1),
-                b.value ? (o(), s("td", pe, t(i.size || "-"), 1)) : c("", !0),
-                a("td", he, [
-                  r(u(p), {
+                s("td", _e, t(i.quantity), 1),
+                y.value ? (o(), a("td", we, t(i.size || "-"), 1)) : c("", !0),
+                s("td", ze, [
+                  u(m(f), {
                     value: i.price,
                     class: "text-sm"
                   }, null, 8, ["value"])
                 ]),
-                y.value ? (o(), s("td", be, [
-                  i.discount !== void 0 ? (o(), s("div", ye, [
-                    r(u(p), {
+                b.value ? (o(), a("td", De, [
+                  i.discount !== void 0 ? (o(), a("div", Te, [
+                    u(m(f), {
                       value: -i.discount,
                       class: "text-sm"
                     }, null, 8, ["value"]),
-                    i.discountLabel ? (o(), s("span", ge, t(i.discountLabel), 1)) : c("", !0)
-                  ])) : (o(), s("span", ke, "-"))
+                    i.discountLabel ? (o(), a("span", Ne, t(i.discountLabel), 1)) : c("", !0)
+                  ])) : (o(), a("span", Ve, "-"))
                 ])) : c("", !0),
-                a("td", _e, [
-                  r(u(p), {
+                s("td", Be, [
+                  u(m(f), {
                     value: i.total,
                     class: "text-sm"
                   }, null, 8, ["value"])
@@ -279,55 +323,55 @@ const $ = { class: "flex flex-col sm:flex-row justify-between items-start gap-4"
             ])
           ], 2)
         ], 2),
-        a("div", {
-          class: n(["flex flex-col-reverse md:flex-row justify-between items-start", l.compact ? "gap-5" : "gap-6"])
+        s("div", {
+          class: l(["flex flex-col-reverse md:flex-row justify-between items-start", n.compact ? "gap-5" : "gap-6"])
         }, [
-          a("div", {
-            class: n(["w-full md:w-1/2 flex flex-col", l.compact ? "gap-3" : "gap-4"])
+          s("div", {
+            class: l(["w-full md:w-1/2 flex flex-col", n.compact ? "gap-3" : "gap-4"])
           }, [
-            a("div", Ie, [
-              e.value.qrcode ? (o(), s("div", we, [
-                r(u(N), {
+            s("div", Se, [
+              e.value.qrcode ? (o(), a("div", $e, [
+                u(m(N), {
                   value: e.value.qrcode,
-                  size: l.compact ? 56 : 72
+                  size: n.compact ? 56 : 72
                 }, null, 8, ["value", "size"])
               ])) : c("", !0),
-              e.value.barcode ? (o(), s("div", De, [
-                r(u(T), {
+              e.value.barcode ? (o(), a("div", Me, [
+                u(m(T), {
                   value: e.value.barcode,
                   format: "CODE128",
-                  height: l.compact ? 28 : 40,
-                  width: l.compact ? 1.3 : 1.5,
-                  "display-value": l.displayBarcodeValue
+                  height: n.compact ? 28 : 40,
+                  width: n.compact ? 1.3 : 1.5,
+                  "display-value": n.displayBarcodeValue
                 }, null, 8, ["value", "height", "width", "display-value"])
               ])) : c("", !0)
             ]),
-            e.value.notes ? (o(), s("div", ze, [
-              a("h4", {
-                class: n(["font-bold text-muted-foreground uppercase tracking-widest mb-1.5", l.compact ? "text-[9px]" : "text-[10px]"])
+            e.value.notes ? (o(), a("div", Ce, [
+              s("h4", {
+                class: l(["font-bold text-muted-foreground uppercase tracking-widest mb-1.5", n.compact ? "text-[9px]" : "text-[10px]"])
               }, t(d.value.notes || "Notes & Terms"), 3),
-              a("div", {
-                class: n(["text-muted-foreground leading-relaxed whitespace-pre-wrap p-3 bg-muted/30 rounded-lg border border-border", l.compact ? "text-xs max-w-xs" : "text-xs max-w-sm"])
+              s("div", {
+                class: l(["text-muted-foreground leading-relaxed whitespace-pre-wrap p-3 bg-muted/30 rounded-lg border border-border", n.compact ? "text-xs max-w-xs" : "text-xs max-w-sm"])
               }, t(e.value.notes), 3)
             ])) : c("", !0)
           ], 2),
-          a("div", Te, [
-            r(B, {
+          s("div", Le, [
+            u(B, {
               totals: e.value.totals,
-              compact: l.compact,
+              compact: n.compact,
               variant: "Variant4"
             }, null, 8, ["totals", "compact"])
           ])
         ], 2)
       ], 2),
-      a("div", {
-        class: n(["bg-gray-900 text-white flex justify-center font-bold uppercase tracking-widest", l.compact ? "py-2 px-4 text-[9px]" : "py-2.5 px-6 text-[10px]"])
+      s("div", {
+        class: l(["bg-gray-900 text-white flex justify-center font-bold uppercase tracking-widest", n.compact ? "py-2 px-4 text-[9px]" : "py-2.5 px-6 text-[10px]"])
       }, [
-        e.value.footerText ? (o(), s("span", Ne, t(e.value.footerText), 1)) : (o(), s("span", Ve, "Thank you for your business"))
+        e.value.footerText ? (o(), a("span", je, t(e.value.footerText), 1)) : (o(), a("span", qe, "Thank you for your business"))
       ], 2)
     ], 4));
   }
 });
 export {
-  Oe as default
+  He as default
 };

package/components/Invoice/types.d.ts

@@ -67,8 +67,14 @@ export interface InvoiceData {
     issuedDate?: string | Date;
     /** Due date of the invoice */
     dueDate?: string | Date;
-    /** Customer details */
+    /** Customer details (Bill To) */
     customerInfo?: InvoiceCustomerInfo;
+    /** Shipping details (Ship To) */
+    shippingInfo?: InvoiceCustomerInfo;
+    /** Payment method used or expected */
+    paymentMethod?: string;
+    /** Shipping method used or expected */
+    shippingMethod?: string;
     /** Array of line items */
     items: InvoiceLineItem[];
     /** Array of totals to display at the bottom */
@@ -89,6 +95,7 @@ export interface InvoiceLabels {
     due?: string;
     from?: string;
     billedTo?: string;
+    shipTo?: string;
     status?: string;
     item?: string;
     price?: string;
@@ -99,6 +106,8 @@ export interface InvoiceLabels {
     notes?: string;
     sku?: string;
     taxId?: string;
+    paymentMethod?: string;
+    shippingMethod?: string;
 }
 export interface InvoiceProps {
     data: InvoiceData;