+
+
+
-
-
-
-
-
+
+
+
+
+
- tokomas_Jakartacitayam
+tokomas_Jakartacitayam
+08158851178
+{{ transaksi.kode_transaksi || 'N/A' }}
+
-
-
-
-
-
-
-
-
-
-
+ - tokomas_Jakartacitayam -
-- tokomas_Jakartacitayam -
-- 08158851178 -
-{{ transaksi.kode_transaksi || 'N/A' }}
-
+ ![Logo]()
+
-
- ![Logo]()
-
-
-
-
- Tanggal :
- {{ formatDate(transaksi.created_at) }}
- -Nama :
- {{ transaksi.nama_pembeli || '-' }}
- -Alamat :
- {{ transaksi.alamat || '-' }}
- -No.Hp :
- {{ transaksi.no_hp || '-' }}
-
-
-
-
- ![Logo_bca]()
- ![Logo_bri]()
- ![Logo_bni]()
-
-
- ![Logo_mastercard]()
- ![Logo_visa]()
- ![Logo_mandiri]()
-
- | Jml | -Item | -Posisi | -Berat | -Kadar | -Harga | -
|---|---|---|---|---|---|
| - 1 - | -
- |
-
- - {{ item.posisi_asal || 'Brankas' }} - | -- {{ formatNumber(item.produk.berat) }}g - | -- {{ item.produk.kadar }}k - | -- - Rp{{ formatNumber(item.harga_deal) }} - - | -
-
-
-
-
-
- PERHATIAN
--
-
- Berat barang telah ditimbang dan disaksikan oleh pembeli. -
- Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak lain harga. -
- Barang yang sudah dibeli berarti sudah diperiksa dan disetujui. -
- Surat ini harap dibawa pada saat menjual kembali. -
-
Hormat Kami
-
-
+
+ {{ transaksi.nama_sales || '-' }}
+
+
Tanggal :
{{ formatDate(transaksi.created_at) }}
+ Nama :
{{ transaksi.nama_pembeli || '-' }}
+ Alamat :
{{ transaksi.alamat || '-' }}
+ No.Hp :
{{ transaksi.no_hp || '-' }}
+
-
+ ![]()
![]()
![]()
+
+
+ ![]()
![]()
![]()
+
+
- Struk #${transaksi.value.kode_transaksi || 'N/A'}
+
+
+
+
-
+
+
+
+
-
+
diff --git a/resources/js/composables/usePrintStruk.js b/resources/js/composables/usePrintStruk.js
new file mode 100644
index 0000000..f6ead89
--- /dev/null
+++ b/resources/js/composables/usePrintStruk.js
@@ -0,0 +1,181 @@
+// resources/js/composables/usePrintStruk.js
+import { computed, nextTick } from "vue";
+
+export function usePrintStruk(
+ transaksi,
+ itemsWithMinimal,
+ formatDate,
+ formatNumber
+) {
+ const handlePrint = async () => {
+ const printWindow = window.open("", "_blank", "width=900,height=600");
+
+ // Filter item yang valid
+ const items = itemsWithMinimal.value.filter((i) => i.harga_deal > 0);
+ const imageUrls = items
+ .map((i) => i.produk?.foto?.[0]?.url)
+ .filter(Boolean);
+
+ // 1. Kompresi & encode semua gambar ke base64 (40x40, JPEG 80%)
+ const compressedImages = await Promise.all(
+ imageUrls.map((url) => compressImageToBase64(url, 40, 40, 0.8))
+ );
+
+ // Ganti URL dengan base64 (fallback ke placeholder jika gagal)
+ const imageMap = {};
+ imageUrls.forEach((url, i) => {
+ imageMap[url] =
+ compressedImages[i] ||
+ "https://via.placeholder.com/40x40?text=No+Img";
+ });
+
+ const item = itemsWithMinimal.value[0]
+ const imgSrc = imageMap[item.produk?.foto?.[0]?.url] || 'https://via.placeholder.com/100x100?text=No+Img'
+
+const printContent = `
+
+
+
+
+ | Jml | +Item | +Posisi | +Berat | +Kadar | +Harga | +
|---|---|---|---|---|---|
| 1 | +
+ |
+ {{ item.posisi_asal || 'Brankas' }} | +{{ item.produk?.berat ? formatNumber(item.produk.berat) + 'g' : '' }} | +{{ item.produk?.kadar ? item.produk.kadar + 'k' : '' }} | +Rp{{ item.harga_deal ? formatNumber(item.harga_deal) : '' }} | +
-
-
-
Ongkos bikin
-diluar harga jual
+ +
+
-
+
+
+ PERHATIAN
+-
+
- Berat barang telah ditimbang dan disaksikan oleh pembeli. +
- Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak lain harga. +
- Barang yang sudah dibeli berarti sudah diperiksa dan disetujui. +
- Surat ini harap dibawa pada saat menjual kembali. +
+
+
+ Hormat Kami
+{{ transaksi.nama_sales || '-' }}
+
+
-
+
+
-
+
+ Ongkos bikin
+diluar harga jual
+
+ Rp
+ {{ (transaksi.ongkos_bikin || 0).toLocaleString() }},-
+
-
-
- Rp
-- {{ (transaksi.ongkos_bikin || 0).toLocaleString() }},- -
+
+
Total Harga
+
+ Rp
+ {{ (transaksi.total_harga || 0).toLocaleString() }},-
+
-
-
-
- Total Harga
-
-
+ Rp
-- {{ (transaksi.total_harga || 0).toLocaleString() }},- -
-
+
+
-
-
-
- Terima kasih sudah berbelanja dengan kami -
++ Terima kasih sudah berbelanja dengan kami +
+
+
+
+
+
+
+`;
+
+ printWindow.document.write(printContent);
+ printWindow.document.close();
+
+ printWindow.onload = () => {
+ setTimeout(() => {
+ printWindow.focus();
+ printWindow.print();
+ printWindow.close();
+ }, 300);
+ };
+ };
+
+ return { handlePrint };
+}
+
+// === Helper: Kompresi Gambar ke Base64 ===
+async function compressImageToBase64(url, width, height, quality = 0.8) {
+ return new Promise((resolve) => {
+ const img = new Image();
+ img.crossOrigin = "anonymous";
+
+ img.onload = () => {
+ const canvas = document.createElement("canvas");
+ canvas.width = width;
+ canvas.height = height;
+ const ctx = canvas.getContext("2d");
+
+ ctx.drawImage(img, 0, 0, width, height);
+
+ const base64 = canvas.toDataURL("image/jpeg", quality);
+ resolve(base64);
+ };
+
+ img.onerror = () => resolve(null);
+ img.src = url + (url.includes("?") ? "&" : "?") + "t=" + Date.now();
+ });
+}
+
+function escapeHtml(text) {
+ if (!text) return "";
+ const div = document.createElement("div");
+ div.textContent = text;
+ return div.innerHTML;
+}
diff --git a/resources/js/pages/Home.vue b/resources/js/pages/Home.vue
index 0100f54..093f679 100644
--- a/resources/js/pages/Home.vue
+++ b/resources/js/pages/Home.vue
@@ -1,27 +1,61 @@
- ${escapeHtml(transaksi.value.kode_transaksi || 'N/A')}
+
+
+
+
+
+
+ ${formatDate(transaksi.value.created_at)}
+ ${escapeHtml(transaksi.value.nama_pembeli || '-')}
+ ${escapeHtml(transaksi.value.alamat || '-')}
+ ${escapeHtml(transaksi.value.no_hp || '-')}
+
+ 
+
+
+
+ 1
+
+ ${escapeHtml(item.produk?.nama || '')}
+
+
+ ${escapeHtml(item.posisi_asal || 'Brankas')}
+ ${item.produk?.berat ? formatNumber(item.produk.berat)+'g' : ''}
+ ${item.produk?.kadar ? item.produk.kadar+'k' : ''}
+ Rp${formatNumber(item.harga_deal)}
+
+
+
+
+
+ ${escapeHtml(transaksi.value.nama_sales || '-')}
+
+
+
+ ${(transaksi.value.ongkos_bikin||0).toLocaleString()},-
+ ${(transaksi.value.total_harga||0).toLocaleString()},-
+
-
-
Contoh penggunaan halaman
- - --
Contoh grid
-
-
+
- Item: {{ value }}
-
-
+
\ No newline at end of file
+// === Dummy Data ===
+const dummyTransaksi = {
+ kode_transaksi: 'TRX20250001',
+ created_at: '2025-10-28T10:30:00',
+ nama_pembeli: 'Budi Santoso',
+ alamat: 'Jl. Merdeka',
+ no_hp: '08123456789',
+ nama_sales: 'Rina',
+ ongkos_bikin: 100000,
+ total_harga: 2600000,
+ itemTransaksi: [
+ {
+ id: 1,
+ harga_deal: 2500000,
+ posisi_asal: 'Etalase Depan',
+ produk: {
+ nama: 'Gelang rantai 5 buah clover merah',
+ berat: 5.2,
+ kadar: 18,
+ foto: [
+ { url: 'http://localhost:8000/storage/foto/hVmf9TF2AfnsNUELXtW3F7q30QVCb0S9L1zWnicY.jpg'}
+ ]
+ }
+ },
+ // {
+ // id: 2,
+ // harga_deal: 100000,
+ // posisi_asal: 'Brankas',
+ // produk: {
+ // nama: 'Gelang serut daun shimmer mp (mas putih)',
+ // berat: 1.0,
+ // kadar: 24,
+ // foto: [
+ // { url: 'http://localhost:8000/storage/foto/dF0UWskzLYnuOH8ch8DEjz7ZeBWa8wXbyhtYRjRy.jpg'}
+ // ]
+ // }
+ // }
+ ]
+}
+
+// === Modal State ===
+const isOpen = ref(false)
+
+
-
+