From e8f3995ceaca66b1213dbb75623725bdb21b25d6 Mon Sep 17 00:00:00 2001 From: "akbarguci.pkl" Date: Tue, 19 May 2026 08:41:03 +0700 Subject: [PATCH] first commit --- src/pages/TransaksiBAST.tsx | 319 +++++++++++++++++++++++++++++------- 1 file changed, 261 insertions(+), 58 deletions(-) diff --git a/src/pages/TransaksiBAST.tsx b/src/pages/TransaksiBAST.tsx index 447ac95..5d8f59b 100644 --- a/src/pages/TransaksiBAST.tsx +++ b/src/pages/TransaksiBAST.tsx @@ -29,10 +29,11 @@ export default function TransaksiBAST() { ======================================================= */ useEffect(() => { setLoading(true); + axios .get("http://localhost:5000/api/bast") .then((res) => { - // PENGAMAN KREDENSIAL: Memastikan data yang masuk ke state murni bertipe Array + if (res.data && res.data.success && Array.isArray(res.data.data)) { setDataBAST(res.data.data); } else if (Array.isArray(res.data)) { @@ -51,23 +52,30 @@ export default function TransaksiBAST() { }, []); /* ======================================================= - DOWNLOAD PDF (Sinkronisasi Properti Sesuai Database) + PREVIEW PDF ======================================================= */ const downloadPDF = async (item: any) => { + const doc = new jsPDF(); /* ========================= QR CODE EXTRACTION ========================= */ let qrImage = ""; + try { - // Menggunakan fallback jika qr_image sudah ada di dalam object barang + const qrRes = await axios.get( `http://localhost:5000/api/qrcode/${item.bast_id}` ); + qrImage = qrRes.data.qr; + } catch (err) { - console.log("QR Code endpoint not found, menggunakan QR default jika tersedia."); + + console.log( + "QR Code endpoint not found, menggunakan QR default jika tersedia." + ); } if (qrImage) { @@ -78,7 +86,9 @@ export default function TransaksiBAST() { KODE DOKUMEN BAST ========================= */ doc.rect(140, 50, 50, 10); + doc.setFontSize(10); + doc.text(`BAST-#${item.bast_id}`, 143, 57); /* ========================= @@ -86,34 +96,70 @@ export default function TransaksiBAST() { ========================= */ doc.setFont("helvetica", "bold"); doc.setFontSize(15); - doc.text("BERITA ACARA", 105, 80, { align: "center" }); - doc.text("SERAH TERIMA BARANG/ASSET", 105, 92, { align: "center" }); + + doc.text("BERITA ACARA", 105, 80, { + align: "center", + }); + + doc.text("SERAH TERIMA BARANG/ASSET", 105, 92, { + align: "center", + }); /* ========================= ISI SURAT KONTRAK BAST ========================= */ doc.setFont("helvetica", "normal"); doc.setFontSize(11); - - // Konversi tanggal sql ke format readable lokal jika ada - const waktuBuat = item.dibuat_pada ? new Date(item.dibuat_pada).toLocaleDateString("id-ID") : "-"; - doc.text(`Pada hari ini, tanggal ${waktuBuat},`, 20, 115); - doc.text(`telah dilakukan serah terima barang secara sah antara pihak:`, 20, 128); + const waktuBuat = item.dibuat_pada + ? new Date(item.dibuat_pada).toLocaleDateString("id-ID") + : "-"; + + doc.text( + `Pada hari ini, tanggal ${waktuBuat},`, + 20, + 115 + ); + + doc.text( + `telah dilakukan serah terima barang secara sah antara pihak:`, + 20, + 128 + ); doc.setFont("helvetica", "bold"); - doc.text(`[Penyerah] ${item.nama_penyerah || "-"}`, 25, 138); - doc.text(`[Penerima] ${item.nama_penerima || "-"}`, 25, 146); + + doc.text( + `[Penyerah] ${item.nama_penyerah || "-"}`, + 25, + 138 + ); + + doc.text( + `[Penerima] ${item.nama_penerima || "-"}`, + 25, + 146 + ); doc.setFont("helvetica", "normal"); - doc.text("Adapun rincian barang/aset CIFO yang diserahterimakan sebagai berikut:", 20, 160); + + doc.text( + "Adapun rincian barang/aset CIFO yang diserahterimakan sebagai berikut:", + 20, + 160 + ); /* ========================= - TABEL RINCIAN ASET UKK + TABEL RINCIAN ASET ========================= */ autoTable(doc, { startY: 168, - margin: { left: 20, right: 20 }, + + margin: { + left: 20, + right: 20, + }, + styles: { fontSize: 10, halign: "center", @@ -121,164 +167,321 @@ export default function TransaksiBAST() { lineWidth: 0.3, lineColor: [0, 0, 0], }, + headStyles: { fillColor: [255, 255, 255], textColor: [0, 0, 0], fontStyle: "bold", }, + bodyStyles: { textColor: [0, 0, 0], }, - head: [["No.", "Kode Barang", "Nama Barang", "Kondisi Serah", "Kondisi Terima"]], + + head: [[ + "No.", + "Kode Barang", + "Nama Barang", + "Kondisi Serah", + "Kondisi Terima" + ]], + body: [[ - "1", - item.kode_barang || "-", - item.nama_barang || "-", - item.status_serah || "Menunggu", + "1", + item.kode_barang || "-", + item.nama_barang || "-", + item.status_serah || "Menunggu", item.status_terima || "Menunggu" ]], }); /* ========================= - DOKUMEN KLAUSUL PENUTUP + DOKUMEN PENUTUP ========================= */ doc.setFont("helvetica", "normal"); + doc.setFontSize(11); - doc.text("Demikian Berita Acara Serah Terima ini dibuat dengan sebenar-benarnya dan", 20, 220); - doc.text("dipergunakan sebagaimana mestinya untuk keperluan inventarisasi sekolah.", 20, 232); + + doc.text( + "Demikian Berita Acara Serah Terima ini dibuat dengan sebenar-benarnya dan", + 20, + 220 + ); + + doc.text( + "dipergunakan sebagaimana mestinya untuk keperluan inventarisasi sekolah.", + 20, + 232 + ); /* ========================= - TANDA TANGAN (TTD) + TANDA TANGAN ========================= */ doc.setFont("helvetica", "bold"); - doc.text("Yang Menyerahkan,", 20, 255); - doc.text("Yang Menerima,", 125, 255); + + doc.text( + "Yang Menyerahkan,", + 20, + 255 + ); + + doc.text( + "Yang Menerima,", + 125, + 255 + ); doc.setFont("helvetica", "normal"); - doc.text(item.nama_penyerah || "-", 20, 285); - doc.text(item.nama_penerima || "-", 125, 285); + + doc.text( + item.nama_penyerah || "-", + 20, + 285 + ); + + doc.text( + item.nama_penerima || "-", + 125, + 285 + ); /* ========================= - SAVE EKSPOR FILE PDF + PREVIEW PDF DI TAB BARU ========================= */ - doc.save(`BAST_CIFO_${item.bast_id}.pdf`); + const pdfBlob = doc.output("blob"); + + const pdfUrl = URL.createObjectURL(pdfBlob); + + window.open(pdfUrl, "_blank"); }; return (
- {/* HEADER UTAMA */} + {/* HEADER */}
+
+

BAST

+

Data serah terima barang logistik resmi perusahaan & sekolah.

+
+
- {/* RENDER LAYOUT KONDISIONAL */} + {/* RENDER DATA */} {loading ? ( +
Sedang menyinkronkan data dokumen BAST dari server CIFO... ⏳
+ ) : dataBAST && dataBAST.length > 0 ? ( +
+ {dataBAST.map((item) => ( +
+
- +
- {/* ID BAST */} + + {/* ID */}
- + + +

Dokumen BAST #{item.bast_id}

+
- {/* INFO UTAMA BARANG */} + {/* BARANG */}
+ {item.kode_barang || "KODE-BLANK"} +

{item.nama_barang}

+
- {/* KATEGORI & LOKASI ATRIBUT */} + {/* KATEGORI */}
+
- - Kategori: {item.nama_kategori || "-"} + + + + + Kategori: + + {" "} + {item.nama_kategori || "-"} + + +
+
- - Lokasi: {item.nama_lokasi || "-"} + + + + + Lokasi: + + {" "} + {item.nama_lokasi || "-"} + + +
+
- {/* PETUGAS OTORISASI (PENYERAH & PENERIMA) */} + {/* USER */}
+
- - Penyerah: {item.nama_penyerah || "-"} + + + + + Penyerah: + + {" "} + {item.nama_penyerah || "-"} + + +
+
- - Penerima: {item.nama_penerima || "-"} + + + + + Penerima: + + {" "} + {item.nama_penerima || "-"} + + +
+
- {/* TRACKING REALTIME TIME STAMP */} + {/* TANGGAL */}
+ - Dibuat Pada: {item.dibuat_pada ? new Date(item.dibuat_pada).toLocaleString("id-ID") : "-"} + + + Dibuat Pada:{" "} + {item.dibuat_pada + ? new Date(item.dibuat_pada).toLocaleString("id-ID") + : "-"} + +
+
- {/* SISI KANAN CONTROL STATUS & CETAK PDF */} + {/* KANAN */}
+
- Status Dokumen + + + Status Dokumen + +
- + + Serah: {item.status_serah} - + + Terima: {item.status_terima} +
+
+
+
+ ))} +
+ ) : ( +
Belum ada riwayat dokumen transaksi BAST terdaftar, Bang! 📦
+ )} +
); } \ No newline at end of file