From 8bb8fa23f426644082640b7ad78ea2f00152b7a9 Mon Sep 17 00:00:00 2001
From: "akbarguci.pkl" <akbarguci.pkl@cifo.co.id>
Date: Wed, 20 May 2026 10:14:14 +0700
Subject: [PATCH] first commit

---
 src/pages/SettingsPage.tsx  | 392 ++++++++++++----
 src/pages/TransaksiBAST.tsx | 858 ++++++++++++++++++++++++++++++------
 src/routes/MasterData.tsx   | 134 ++++--
 3 files changed, 1141 insertions(+), 243 deletions(-)

diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
index c91aa00..5910b3c 100644
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -5,6 +5,9 @@ import {
   Moon,
   Sun,
   X,
+  User,
+  Mail,
+  Shield,
 } from "lucide-react";
 
 import {
@@ -12,6 +15,8 @@ import {
   useState,
 } from "react";
 
+import axios from "axios";
+
 export default function SettingsPage() {
 
   const [darkMode, setDarkMode] =
@@ -20,6 +25,17 @@ export default function SettingsPage() {
   const [showAbout, setShowAbout] =
     useState(false);
 
+  const [showProfile, setShowProfile] =
+    useState(false);
+
+  const [userData, setUserData] =
+    useState({
+      nama: "-",
+      username: "-",
+      role: "-",
+      gmail: "-",
+    });
+
   useEffect(() => {
 
     const savedTheme =
@@ -35,8 +51,58 @@ export default function SettingsPage() {
 
     }
 
+    ambilDataUser();
+
   }, []);
 
+  // =========================
+  // AMBIL DATA USER LOGIN
+  // =========================
+  const ambilDataUser = async () => {
+
+    try {
+
+      const userId =
+        localStorage.getItem("user_id");
+
+      if (!userId) return;
+
+      const response =
+        await axios.get(
+          `http://localhost:5000/api/user/${userId}`
+        );
+
+      const user =
+        response.data.data;
+
+      setUserData({
+        nama:
+          user.nama_lengkap || "-",
+
+        username:
+          user.username || "-",
+
+        role:
+          user.role || "-",
+
+        gmail:
+          user.email || "-",
+      });
+
+    } catch (error) {
+
+      console.error(
+        "Gagal ambil data user:",
+        error
+      );
+
+    }
+
+  };
+
+  // =========================
+  // DARK MODE
+  // =========================
   const toggleTheme = () => {
 
     if (darkMode) {
@@ -67,6 +133,9 @@ export default function SettingsPage() {
 
   };
 
+  // =========================
+  // MENU SETTINGS
+  // =========================
   const settingsMenu = [
     {
       title: "Ganti Password",
@@ -74,6 +143,15 @@ export default function SettingsPage() {
       icon: <Lock size={26} />,
     },
 
+    {
+      title: "Tentang Anda",
+      desc:
+        "Informasi akun pengguna",
+      icon: <User size={26} />,
+      action: () =>
+        setShowProfile(true),
+    },
+
     {
       title: "Tentang Aplikasi",
       desc:
@@ -193,55 +271,241 @@ export default function SettingsPage() {
 
       </div>
 
-      {/* LOGOUT */}
-      <div className="mt-10">
+{/* LOGOUT */}
+<div className="mt-10 flex justify-start">
 
-        <div
-          onClick={() => {
+  <button
+    onClick={() => {
 
-            localStorage.clear();
+      localStorage.clear();
 
-            window.location.href = "/";
+      window.location.href = "/";
 
-          }}
-          className="
-            bg-red-500
-            hover:bg-red-600
-            text-white
+    }}
+    className="
+      flex
+      items-center
+      gap-3
+      bg-red-500
+      hover:bg-red-600
+      text-white
+      px-5
+      py-3
+      rounded-2xl
+      shadow-md
+      transition-all
+      duration-300
+      hover:scale-105
+    "
+  >
+
+    <LogOut size={20} />
+
+    <span className="font-semibold">
+      Logout
+    </span>
+
+  </button>
+
+</div>
+
+      {/* ========================= */}
+      {/* MODAL PROFILE */}
+      {/* ========================= */}
+      {showProfile && (
+
+        <div className="
+          fixed
+          inset-0
+          bg-black/50
+          flex
+          items-center
+          justify-center
+          z-50
+        ">
+
+          <div className="
+            bg-white
+            dark:bg-gray-800
+            w-[90%]
+            md:w-[500px]
             rounded-3xl
-            p-6
-            shadow-lg
-            cursor-pointer
-            transition-all
-            duration-300
-            w-full
-            md:w-[320px]
-          "
-        >
+            p-8
+            shadow-2xl
+            relative
+          ">
 
-          <div className="flex items-center gap-4">
+            {/* CLOSE */}
+            <button
+              onClick={() =>
+                setShowProfile(false)
+              }
+              className="
+                absolute
+                top-5
+                right-5
+                text-gray-500
+                hover:text-red-500
+              "
+            >
+              <X size={24} />
+            </button>
+
+            {/* PROFILE */}
+            <div className="flex flex-col items-center">
+
+              <div
+                className="
+                  w-32
+                  h-32
+                  rounded-full
+                  bg-blue-600
+                  flex
+                  items-center
+                  justify-center
+                  shadow-xl
+                  border-4
+                  border-blue-300
+                "
+              >
+
+                <User
+                  size={60}
+                  className="text-white"
+                />
+
+              </div>
+
+              <h1 className="
+                text-3xl
+                font-bold
+                text-gray-800
+                dark:text-white
+                mt-4
+              ">
+                {userData.nama}
+              </h1>
+
+              <p className="
+                text-gray-500
+                dark:text-gray-300
+                mt-1
+              ">
+                @{userData.username}
+              </p>
 
-            <div className="
-              w-14
-              h-14
-              rounded-2xl
-              bg-white/20
-              flex
-              items-center
-              justify-center
-            ">
-              <LogOut size={26} />
             </div>
 
-            <div>
+            {/* INFO */}
+            <div className="mt-8 space-y-5">
 
-              <h2 className="text-2xl font-bold">
-                Logout
-              </h2>
+              {/* NAMA */}
+              <div className="
+                flex
+                items-center
+                gap-4
+                bg-gray-100
+                dark:bg-gray-700
+                p-4
+                rounded-2xl
+              ">
 
-              <p className="text-red-100 text-sm mt-1">
-                Keluar dari aplikasi
-              </p>
+                <User
+                  size={22}
+                  className="text-blue-600"
+                />
+
+                <div>
+                  <p className="
+                    text-sm
+                    text-gray-500
+                    dark:text-gray-300
+                  ">
+                    Nama
+                  </p>
+
+                  <h2 className="
+                    font-semibold
+                    text-gray-800
+                    dark:text-white
+                  ">
+                    {userData.nama}
+                  </h2>
+                </div>
+
+              </div>
+
+              {/* ROLE */}
+              <div className="
+                flex
+                items-center
+                gap-4
+                bg-gray-100
+                dark:bg-gray-700
+                p-4
+                rounded-2xl
+              ">
+
+                <Shield
+                  size={22}
+                  className="text-green-600"
+                />
+
+                <div>
+                  <p className="
+                    text-sm
+                    text-gray-500
+                    dark:text-gray-300
+                  ">
+                    Role
+                  </p>
+
+                  <h2 className="
+                    font-semibold
+                    text-gray-800
+                    dark:text-white
+                  ">
+                    {userData.role}
+                  </h2>
+                </div>
+
+              </div>
+
+              {/* EMAIL */}
+              <div className="
+                flex
+                items-center
+                gap-4
+                bg-gray-100
+                dark:bg-gray-700
+                p-4
+                rounded-2xl
+              ">
+
+                <Mail
+                  size={22}
+                  className="text-red-500"
+                />
+
+                <div>
+                  <p className="
+                    text-sm
+                    text-gray-500
+                    dark:text-gray-300
+                  ">
+                    Email
+                  </p>
+
+                  <h2 className="
+                    font-semibold
+                    text-gray-800
+                    dark:text-white
+                  ">
+                    {userData.gmail}
+                  </h2>
+                </div>
+
+              </div>
 
             </div>
 
@@ -249,9 +513,11 @@ export default function SettingsPage() {
 
         </div>
 
-      </div>
+      )}
 
+      {/* ========================= */}
       {/* MODAL ABOUT */}
+      {/* ========================= */}
       {showAbout && (
 
         <div className="
@@ -291,7 +557,6 @@ export default function SettingsPage() {
               <X size={24} />
             </button>
 
-            {/* TITLE */}
             <h1 className="
               text-3xl
               font-bold
@@ -301,7 +566,6 @@ export default function SettingsPage() {
               Tentang Aplikasi
             </h1>
 
-            {/* CONTENT */}
             <p className="
               text-gray-700
               dark:text-gray-300
@@ -311,45 +575,25 @@ export default function SettingsPage() {
               <span className="font-bold">
                 School Loan
               </span>{" "}
-              adalah aplikasi peminjaman dan
-              pengelolaan barang sekolah berbasis
-              web yang digunakan untuk membantu
-              proses transaksi BAST (Berita Acara
-              Serah Terima), pengelolaan data
-              barang, monitoring stok barang,
-              serta pembuatan laporan secara
-              cepat, akurat, dan efisien.
+              adalah aplikasi pengelolaan barang
+              dan transaksi BAST berbasis web.
 
               <br /><br />
 
-              Aplikasi ini dibuat untuk
-              mempermudah petugas sekolah dalam
-              mengelola data peminjaman barang
-              seperti laptop, buku, proyektor,
-              alat tulis, dan perlengkapan
-              lainnya secara modern dan
-              terintegrasi.
+              Dibuat menggunakan:
+              <br />
+
+              • React JS
+              <br />
+              • Express JS
+              <br />
+              • MySQL
+              <br />
+              • Tailwind CSS
 
               <br /><br />
 
-              <span className="font-semibold">
-                Versi:
-              </span>{" "}
-              1.0
-
-              <br />
-
-              <span className="font-semibold">
-                Developer:
-              </span>{" "}
-              Akbar
-
-              <br />
-
-              <span className="font-semibold">
-                Framework:
-              </span>{" "}
-              React JS, Express JS, MySQL
+              Versi 1.0
 
             </p>
 
diff --git a/src/pages/TransaksiBAST.tsx b/src/pages/TransaksiBAST.tsx
index f021a82..e7f9ca2 100644
--- a/src/pages/TransaksiBAST.tsx
+++ b/src/pages/TransaksiBAST.tsx
@@ -7,10 +7,13 @@ import {
   BadgeCheck,
   Download,
   MapPin,
-  Layers,
+ Layers,
+  Plus,
+  X,
 } from "lucide-react";
 
 import { useEffect, useState } from "react";
+
 import axios from "axios";
 
 import jsPDF from "jspdf";
@@ -22,101 +25,257 @@ import { FaHourglassEnd } from "react-icons/fa";
 export default function TransaksiBAST() {
 
   /* =======================================================
-     STATE DATA DATABASE (Diberikan default array kosong [])
+     STATE
      ======================================================= */
-  const [dataBAST, setDataBAST] = useState<any[]>([]);
-  const [loading, setLoading] = useState<boolean>(true);
+  const [dataBAST, setDataBAST] =
+    useState<any[]>([]);
+
+  const [loading, setLoading] =
+    useState<boolean>(true);
+
+  const [showModal, setShowModal] =
+    useState(false);
+
+  const [isSubmitting, setIsSubmitting] =
+    useState(false);
+
+  const [formData, setFormData] =
+    useState({
+      kode_barang: "",
+      nama_barang: "",
+      nama_kategori: "",
+      nama_lokasi: "",
+      nama_penyerah: "",
+      nama_penerima: "",
+    });
 
   /* =======================================================
-     GET DATA DARI API (Ekstraksi Jalur Data Aman)
+     FETCH DATA
      ======================================================= */
-  useEffect(() => {
+  const fetchBAST = () => {
+
     setLoading(true);
 
     axios
       .get("http://localhost:5000/api/bast")
+
       .then((res) => {
 
-        if (res.data && res.data.success && Array.isArray(res.data.data)) {
+        if (
+          res.data &&
+          res.data.success &&
+          Array.isArray(res.data.data)
+        ) {
+
           setDataBAST(res.data.data);
-        } else if (Array.isArray(res.data)) {
+
+        } else if (
+          Array.isArray(res.data)
+        ) {
+
           setDataBAST(res.data);
+
         } else {
+
           setDataBAST([]);
+
         }
+
       })
+
       .catch((err) => {
-        console.error("Gagal memuat data transaksi BAST:", err);
+
+        console.error(
+          "Gagal memuat data transaksi BAST:",
+          err
+        );
+
         setDataBAST([]);
+
       })
+
       .finally(() => {
+
         setLoading(false);
+
       });
+
+  };
+
+  useEffect(() => {
+
+    fetchBAST();
+
   }, []);
 
   /* =======================================================
-     PREVIEW PDF
+     HANDLE INPUT
      ======================================================= */
-  const downloadPDF = async (item: any) => {
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+
+    setFormData({
+      ...formData,
+      [e.target.name]:
+        e.target.value,
+    });
+
+  };
+
+  /* =======================================================
+     SUBMIT BAST
+     ======================================================= */
+  const handleSubmit = async (
+    e: React.FormEvent
+  ) => {
+
+    e.preventDefault();
+
+    setIsSubmitting(true);
+
+    try {
+
+      await axios.post(
+        "http://localhost:5000/api/bast",
+        formData
+      );
+
+      setShowModal(false);
+
+      setFormData({
+        kode_barang: "",
+        nama_barang: "",
+        nama_kategori: "",
+        nama_lokasi: "",
+        nama_penyerah: "",
+        nama_penerima: "",
+      });
+
+      fetchBAST();
+
+    } catch (error) {
+
+      console.error(
+        "Gagal membuat BAST:",
+        error
+      );
+
+      alert(
+        "Gagal membuat BAST"
+      );
+
+    } finally {
+
+      setIsSubmitting(false);
+
+    }
+
+  };
+
+  /* =======================================================
+     DOWNLOAD PDF
+     ======================================================= */
+  const downloadPDF = async (
+    item: any
+  ) => {
 
     const doc = new jsPDF();
 
-    /* =========================
-        QR CODE EXTRACTION
-       ========================= */
     let qrImage = "";
 
     try {
 
-      const qrRes = await axios.get(
-        `http://localhost:5000/api/qrcode/${item.bast_id}`
-      );
+      const qrRes =
+        await axios.get(
+          `http://localhost:5000/api/qrcode/${item.bast_id}`
+        );
 
-      qrImage = qrRes.data.qr;
+      qrImage =
+        qrRes.data.qr;
 
     } catch (err) {
 
       console.log(
-        "QR Code endpoint not found, menggunakan QR default jika tersedia."
+        "QR Code endpoint not found."
       );
+
     }
 
     if (qrImage) {
-      doc.addImage(qrImage, "PNG", 160, 15, 30, 30);
+
+      doc.addImage(
+        qrImage,
+        "PNG",
+        160,
+        15,
+        30,
+        30
+      );
+
     }
 
     /* =========================
-        KODE DOKUMEN BAST
+       HEADER
        ========================= */
-    doc.rect(140, 50, 50, 10);
+    doc.rect(
+      140,
+      50,
+      50,
+      10
+    );
 
     doc.setFontSize(10);
 
-    doc.text(`BAST-#${item.bast_id}`, 143, 57);
+    doc.text(
+      `BAST-#${item.bast_id}`,
+      143,
+      57
+    );
+
+    doc.setFont(
+      "helvetica",
+      "bold"
+    );
 
-    /* =========================
-        JUDUL DOKUMEN
-       ========================= */
-    doc.setFont("helvetica", "bold");
     doc.setFontSize(15);
 
-    doc.text("BERITA ACARA", 105, 80, {
-      align: "center",
-    });
+    doc.text(
+      "BERITA ACARA",
+      105,
+      80,
+      {
+        align: "center",
+      }
+    );
 
-    doc.text("SERAH TERIMA BARANG/ASSET", 105, 92, {
-      align: "center",
-    });
+    doc.text(
+      "SERAH TERIMA BARANG/ASSET",
+      105,
+      92,
+      {
+        align: "center",
+      }
+    );
 
     /* =========================
-        ISI SURAT KONTRAK BAST
+       ISI
        ========================= */
-    doc.setFont("helvetica", "normal");
+    doc.setFont(
+      "helvetica",
+      "normal"
+    );
+
     doc.setFontSize(11);
 
-    const waktuBuat = item.dibuat_pada
-      ? new Date(item.dibuat_pada).toLocaleDateString("id-ID")
-      : "-";
+    const waktuBuat =
+      item.dibuat_pada
+        ? new Date(
+            item.dibuat_pada
+          ).toLocaleDateString(
+            "id-ID"
+          )
+        : "-";
 
     doc.text(
       `Pada hari ini, tanggal ${waktuBuat},`,
@@ -130,7 +289,10 @@ export default function TransaksiBAST() {
       128
     );
 
-    doc.setFont("helvetica", "bold");
+    doc.setFont(
+      "helvetica",
+      "bold"
+    );
 
     doc.text(
       `[Penyerah] ${item.nama_penyerah || "-"}`,
@@ -144,7 +306,10 @@ export default function TransaksiBAST() {
       146
     );
 
-    doc.setFont("helvetica", "normal");
+    doc.setFont(
+      "helvetica",
+      "normal"
+    );
 
     doc.text(
       "Adapun rincian barang/aset CIFO yang diserahterimakan sebagai berikut:",
@@ -153,7 +318,7 @@ export default function TransaksiBAST() {
     );
 
     /* =========================
-        TABEL RINCIAN ASET
+       TABLE
        ========================= */
     autoTable(doc, {
       startY: 168,
@@ -172,13 +337,27 @@ export default function TransaksiBAST() {
       },
 
       headStyles: {
-        fillColor: [255, 255, 255],
-        textColor: [0, 0, 0],
+        fillColor: [
+          255,
+          255,
+          255,
+        ],
+
+        textColor: [
+          0,
+          0,
+          0,
+        ],
+
         fontStyle: "bold",
       },
 
       bodyStyles: {
-        textColor: [0, 0, 0],
+        textColor: [
+          0,
+          0,
+          0,
+        ],
       },
 
       head: [[
@@ -186,7 +365,7 @@ export default function TransaksiBAST() {
         "Kode Barang",
         "Nama Barang",
         "Kondisi Serah",
-        "Kondisi Terima"
+        "Kondisi Terima",
       ]],
 
       body: [[
@@ -194,15 +373,13 @@ export default function TransaksiBAST() {
         item.kode_barang || "-",
         item.nama_barang || "-",
         item.status_serah || "Menunggu",
-        item.status_terima || "Menunggu"
+        item.status_terima || "Menunggu",
       ]],
     });
 
     /* =========================
-        DOKUMEN PENUTUP
+       FOOTER
        ========================= */
-    doc.setFont("helvetica", "normal");
-
     doc.setFontSize(11);
 
     doc.text(
@@ -217,10 +394,10 @@ export default function TransaksiBAST() {
       232
     );
 
-    /* =========================
-        TANDA TANGAN
-       ========================= */
-    doc.setFont("helvetica", "bold");
+    doc.setFont(
+      "helvetica",
+      "bold"
+    );
 
     doc.text(
       "Yang Menyerahkan,",
@@ -234,7 +411,10 @@ export default function TransaksiBAST() {
       255
     );
 
-    doc.setFont("helvetica", "normal");
+    doc.setFont(
+      "helvetica",
+      "normal"
+    );
 
     doc.text(
       item.nama_penyerah || "-",
@@ -248,44 +428,111 @@ export default function TransaksiBAST() {
       285
     );
 
-    /* =========================
-        PREVIEW PDF DI TAB BARU
-       ========================= */
-    const pdfBlob = doc.output("blob");
+    const pdfBlob =
+      doc.output("blob");
 
-    const pdfUrl = URL.createObjectURL(pdfBlob);
+    const pdfUrl =
+      URL.createObjectURL(
+        pdfBlob
+      );
+
+    window.open(
+      pdfUrl,
+      "_blank"
+    );
 
-    window.open(pdfUrl, "_blank");
   };
 
   return (
-    <div className="p-8 min-h-screen bg-gray-100 dark:bg-gray-900 transition-all duration-300">
+
+    <div className="
+      p-8
+      min-h-screen
+      bg-gray-100
+      dark:bg-gray-900
+      transition-all
+      duration-300
+    ">
 
       {/* HEADER */}
-      <div className="flex justify-between items-center mb-8">
+      <div className="
+        flex
+        justify-between
+        items-center
+        mb-8
+      ">
 
         <div>
 
-          <h1 className="text-4xl font-bold dark:text-white">
+          <h1 className="
+            text-4xl
+            font-bold
+            dark:text-white
+          ">
             BAST
           </h1>
 
-          <p className="text-gray-500 dark:text-gray-300 mt-2">
+          <p className="
+            text-gray-500
+            dark:text-gray-300
+            mt-2
+          ">
             Data serah terima barang logistik resmi perusahaan & sekolah.
           </p>
 
         </div>
 
+        <button
+          onClick={() =>
+            setShowModal(true)
+          }
+          className="
+            flex
+            items-center
+            gap-2
+            bg-blue-600
+            hover:bg-blue-700
+            text-white
+            font-semibold
+            px-5
+            py-2.5
+            rounded-xl
+            shadow-md
+            transition-all
+          "
+        >
+
+          <Plus size={20} />
+
+          Buat BAST
+
+        </button>
+
       </div>
 
-      {/* RENDER DATA */}
+      {/* LOADING */}
       {loading ? (
 
-        <div className="p-12 text-center bg-white dark:bg-gray-800 rounded-3xl text-blue-600 font-medium shadow-md animate-pulse">
-          Sedang menyinkronkan data dokumen BAST dari server CIFO... <FaHourglassEnd />
+        <div className="
+          p-12
+          text-center
+          bg-white
+          dark:bg-gray-800
+          rounded-3xl
+          text-blue-600
+          font-medium
+          shadow-md
+          animate-pulse
+        ">
+
+          Sedang menyinkronkan data dokumen BAST dari server CIFO...
+
+          <FaHourglassEnd className="mx-auto mt-3" />
+
         </div>
 
-      ) : dataBAST && dataBAST.length > 0 ? (
+      ) : dataBAST &&
+        dataBAST.length > 0 ? (
 
         <div className="space-y-5">
 
@@ -293,72 +540,132 @@ export default function TransaksiBAST() {
 
             <div
               key={item.bast_id}
-              className="bg-white dark:bg-gray-800 rounded-3xl shadow-md p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all duration-300"
+              className="
+                bg-white
+                dark:bg-gray-800
+                rounded-3xl
+                shadow-md
+                p-6
+                border
+                border-gray-200
+                dark:border-gray-700
+                hover:shadow-lg
+                transition-all
+              "
             >
 
-              <div className="flex flex-col sm:flex-row justify-between items-start gap-4">
+              <div className="
+                flex
+                flex-col
+                sm:flex-row
+                justify-between
+                items-start
+                gap-4
+              ">
 
-                <div className="space-y-2.5 flex-1">
+                {/* KIRI */}
+                <div className="
+                  space-y-2.5
+                  flex-1
+                ">
 
-                  {/* ID */}
-                  <div className="flex items-center gap-2">
+                  <div className="
+                    flex
+                    items-center
+                    gap-2
+                  ">
 
                     <FileText
                       size={20}
-                      className="text-blue-600 shrink-0"
+                      className="
+                        text-blue-600
+                      "
                     />
 
-                    <h2 className="text-xl font-extrabold dark:text-white">
-                      Dokumen BAST #{item.bast_id}
+                    <h2 className="
+                      text-xl
+                      font-extrabold
+                      dark:text-white
+                    ">
+                      Dokumen BAST #
+                      {item.bast_id}
                     </h2>
 
                   </div>
 
-                  {/* BARANG */}
                   <div>
 
-                    <span className="text-xs font-mono font-bold px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded">
-                      {item.kode_barang || "KODE-BLANK"}
+                    <span className="
+                      text-xs
+                      font-mono
+                      font-bold
+                      px-2
+                      py-0.5
+                      bg-gray-100
+                      dark:bg-gray-700
+                      rounded
+                    ">
+
+                      {item.kode_barang ||
+                        "KODE-BLANK"}
+
                     </span>
 
-                    <p className="text-xl font-bold text-blue-600 dark:text-blue-400 mt-1">
+                    <p className="
+                      text-xl
+                      font-bold
+                      text-blue-600
+                      dark:text-blue-400
+                      mt-1
+                    ">
                       {item.nama_barang}
                     </p>
 
                   </div>
 
-                  {/* KATEGORI */}
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1.5 pt-1 text-sm text-gray-600 dark:text-gray-300">
+                  <div className="
+                    grid
+                    grid-cols-1
+                    md:grid-cols-2
+                    gap-3
+                    text-sm
+                  ">
 
-                    <div className="flex items-center gap-2">
+                    <div className="
+                      flex
+                      items-center
+                      gap-2
+                    ">
 
                       <Layers
                         size={16}
-                        className="text-gray-400"
                       />
 
                       <span>
                         Kategori:
-                        <strong className="text-gray-800 dark:text-gray-100">
+                        <strong>
                           {" "}
-                          {item.nama_kategori || "-"}
+                          {item.nama_kategori}
                         </strong>
                       </span>
 
                     </div>
 
-                    <div className="flex items-center gap-2">
+                    <div className="
+                      flex
+                      items-center
+                      gap-2
+                    ">
 
                       <MapPin
                         size={16}
-                        className="text-gray-400"
                       />
 
                       <span>
                         Lokasi:
-                        <strong className="text-gray-800 dark:text-gray-100">
+                        <strong>
                           {" "}
-                          {item.nama_lokasi || "-"}
+                          {item.nama_lokasi}
                         </strong>
                       </span>
 
@@ -366,38 +673,57 @@ export default function TransaksiBAST() {
 
                   </div>
 
-                  {/* USER */}
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1.5 pt-1 border-t border-gray-100 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-300">
+                  <div className="
+                    grid
+                    grid-cols-1
+                    md:grid-cols-2
+                    gap-3
+                    text-sm
+                    border-t
+                    pt-3
+                  ">
 
-                    <div className="flex items-center gap-2">
+                    <div className="
+                      flex
+                      items-center
+                      gap-2
+                    ">
 
                       <BadgeCheck
                         size={16}
-                        className="text-green-500"
+                        className="
+                          text-green-500
+                        "
                       />
 
                       <span>
                         Penyerah:
-                        <strong className="text-gray-800 dark:text-gray-100">
+                        <strong>
                           {" "}
-                          {item.nama_penyerah || "-"}
+                          {item.nama_penyerah}
                         </strong>
                       </span>
 
                     </div>
 
-                    <div className="flex items-center gap-2">
+                    <div className="
+                      flex
+                      items-center
+                      gap-2
+                    ">
 
                       <User
                         size={16}
-                        className="text-blue-500"
+                        className="
+                          text-blue-500
+                        "
                       />
 
                       <span>
                         Penerima:
-                        <strong className="text-gray-800 dark:text-gray-100">
+                        <strong>
                           {" "}
-                          {item.nama_penerima || "-"}
+                          {item.nama_penerima}
                         </strong>
                       </span>
 
@@ -405,15 +731,25 @@ export default function TransaksiBAST() {
 
                   </div>
 
-                  {/* TANGGAL */}
-                  <div className="flex items-center gap-2 text-xs text-gray-400 pt-1">
+                  <div className="
+                    flex
+                    items-center
+                    gap-2
+                    text-xs
+                    text-gray-400
+                  ">
 
                     <Clock3 size={14} />
 
                     <span>
-                      Dibuat Pada:{" "}
+                      Dibuat Pada:
+                      {" "}
                       {item.dibuat_pada
-                        ? new Date(item.dibuat_pada).toLocaleString("id-ID")
+                        ? new Date(
+                            item.dibuat_pada
+                          ).toLocaleString(
+                            "id-ID"
+                          )
                         : "-"}
                     </span>
 
@@ -422,43 +758,74 @@ export default function TransaksiBAST() {
                 </div>
 
                 {/* KANAN */}
-                <div className="flex sm:flex-col items-end justify-between sm:justify-start w-full sm:w-auto gap-3 self-stretch sm:self-start border-t sm:border-t-0 pt-4 sm:pt-0 border-gray-100 dark:border-gray-700">
+                <div className="
+                  flex
+                  flex-col
+                  gap-3
+                  items-end
+                ">
 
-                  <div className="flex flex-col gap-1 items-end">
+                  <div className="
+                    flex
+                    gap-2
+                  ">
 
-                    <span className="text-[10px] uppercase font-bold text-gray-400 tracking-wider">
-                      Status Dokumen
+                    <span className={`
+                      text-xs
+                      font-bold
+                      px-3
+                      py-1
+                      rounded-full
+                      ${
+                        item.status_serah ===
+                        "Approved"
+                          ? "bg-green-100 text-green-700"
+                          : "bg-yellow-100 text-yellow-700"
+                      }
+                    `}>
+                      Serah:
+                      {" "}
+                      {item.status_serah}
                     </span>
 
-                    <div className="flex gap-1.5">
-
-                      <span
-                        className={`text-xs font-bold px-3 py-1 rounded-full ${
-                          item.status_serah === "Approved"
-                            ? "bg-green-100 text-green-700"
-                            : "bg-yellow-100 text-yellow-700"
-                        }`}
-                      >
-                        Serah: {item.status_serah}
-                      </span>
-
-                      <span
-                        className={`text-xs font-bold px-3 py-1 rounded-full ${
-                          item.status_terima === "Approved"
-                            ? "bg-green-100 text-green-700"
-                            : "bg-yellow-100 text-yellow-700"
-                        }`}
-                      >
-                        Terima: {item.status_terima}
-                      </span>
-
-                    </div>
+                    <span className={`
+                      text-xs
+                      font-bold
+                      px-3
+                      py-1
+                      rounded-full
+                      ${
+                        item.status_terima ===
+                        "Approved"
+                          ? "bg-green-100 text-green-700"
+                          : "bg-yellow-100 text-yellow-700"
+                      }
+                    `}>
+                      Terima:
+                      {" "}
+                      {item.status_terima}
+                    </span>
 
                   </div>
 
                   <button
-                    onClick={() => downloadPDF(item)}
-                    className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold text-sm px-4 py-2.5 rounded-xl shadow-md hover:shadow-lg transition duration-200"
+                    onClick={() =>
+                      downloadPDF(item)
+                    }
+                    className="
+                      flex
+                      items-center
+                      gap-2
+                      bg-blue-600
+                      hover:bg-blue-700
+                      text-white
+                      font-semibold
+                      text-sm
+                      px-4
+                      py-2.5
+                      rounded-xl
+                      shadow-md
+                    "
                   >
 
                     <Download size={16} />
@@ -479,12 +846,233 @@ export default function TransaksiBAST() {
 
       ) : (
 
-        <div className="p-12 text-center bg-white dark:bg-gray-800 rounded-3xl border border-gray-200 dark:border-gray-700 text-gray-400 font-medium">
-          Belum ada riwayat dokumen transaksi BAST terdaftar, Bang! <FaBox />
+        <div className="
+          p-12
+          text-center
+          bg-white
+          dark:bg-gray-800
+          rounded-3xl
+          border
+          text-gray-400
+          font-medium
+        ">
+
+          Belum ada riwayat dokumen transaksi BAST terdaftar, Bang!
+
+          <FaBox className="mx-auto mt-3" />
+
+        </div>
+
+      )}
+
+      {/* MODAL */}
+      {showModal && (
+
+        <div className="
+          fixed
+          inset-0
+          z-50
+          flex
+          items-center
+          justify-center
+          p-4
+          bg-black/50
+        ">
+
+          <div className="
+            bg-white
+            dark:bg-gray-800
+            rounded-3xl
+            w-full
+            max-w-2xl
+            shadow-2xl
+          ">
+
+            {/* HEADER */}
+            <div className="
+              flex
+              justify-between
+              items-center
+              p-6
+              border-b
+            ">
+
+              <h2 className="
+                text-2xl
+                font-bold
+                dark:text-white
+              ">
+                Buat BAST Baru
+              </h2>
+
+              <button
+                onClick={() =>
+                  setShowModal(false)
+                }
+              >
+
+                <X size={24} />
+
+              </button>
+
+            </div>
+
+            {/* FORM */}
+            <form
+              onSubmit={handleSubmit}
+              className="p-6"
+            >
+
+              <div className="
+                grid
+                grid-cols-1
+                md:grid-cols-2
+                gap-5
+              ">
+
+                {[
+                  {
+                    label:
+                      "Kode Barang",
+                    name:
+                      "kode_barang",
+                  },
+
+                  {
+                    label:
+                      "Nama Barang",
+                    name:
+                      "nama_barang",
+                  },
+
+                  {
+                    label:
+                      "Kategori",
+                    name:
+                      "nama_kategori",
+                  },
+
+                  {
+                    label:
+                      "Lokasi",
+                    name:
+                      "nama_lokasi",
+                  },
+
+                  {
+                    label:
+                      "Nama Penyerah",
+                    name:
+                      "nama_penyerah",
+                  },
+
+                  {
+                    label:
+                      "Nama Penerima",
+                    name:
+                      "nama_penerima",
+                  },
+
+                ].map((field) => (
+
+                  <div
+                    key={field.name}
+                    className="
+                      space-y-1.5
+                    "
+                  >
+
+                    <label className="
+                      text-sm
+                      font-medium
+                    ">
+                      {field.label}
+                    </label>
+
+                    <input
+                      required
+                      name={field.name}
+                      value={
+                        formData[
+                          field.name as keyof typeof formData
+                        ]
+                      }
+                      onChange={
+                        handleInputChange
+                      }
+                      className="
+                        w-full
+                        px-4
+                        py-2.5
+                        rounded-xl
+                        border
+                        outline-none
+                        dark:bg-gray-700
+                      "
+                    />
+
+                  </div>
+
+                ))}
+
+              </div>
+
+              {/* BUTTON */}
+              <div className="
+                flex
+                justify-end
+                gap-3
+                pt-6
+              ">
+
+                <button
+                  type="button"
+                  onClick={() =>
+                    setShowModal(false)
+                  }
+                  className="
+                    px-5
+                    py-2.5
+                    rounded-xl
+                    bg-gray-200
+                    hover:bg-gray-300
+                  "
+                >
+                  Batal
+                </button>
+
+                <button
+                  type="submit"
+                  disabled={
+                    isSubmitting
+                  }
+                  className="
+                    px-5
+                    py-2.5
+                    rounded-xl
+                    bg-blue-600
+                    hover:bg-blue-700
+                    text-white
+                  "
+                >
+
+                  {isSubmitting
+                    ? "Menyimpan..."
+                    : "Simpan BAST"}
+
+                </button>
+
+              </div>
+
+            </form>
+
+          </div>
+
         </div>
 
       )}
 
     </div>
+
   );
 }
\ No newline at end of file
diff --git a/src/routes/MasterData.tsx b/src/routes/MasterData.tsx
index 41ce602..bf85b52 100644
--- a/src/routes/MasterData.tsx
+++ b/src/routes/MasterData.tsx
@@ -36,6 +36,9 @@ export default function MasterData() {
   const [showTambah, setShowTambah] =
     useState(false);
 
+  const [previewQR, setPreviewQR] =
+    useState<string | null>(null);
+
   const [barangList, setBarangList] =
     useState<BarangType[]>([]);
 
@@ -226,35 +229,6 @@ export default function MasterData() {
                         }
                         alt={barang.nama_barang}
                         className="w-full h-full object-cover"
-                        onError={(e) => {
-
-                          const target =
-                            e.target as HTMLImageElement;
-
-                          target.style.display =
-                            "none";
-
-                          const parent =
-                            target.parentElement;
-
-                          if (parent) {
-
-                            const fallback =
-                              document.createElement(
-                                "div"
-                              );
-
-                            fallback.className =
-                              "flex flex-col items-center justify-center text-gray-400";
-
-                            fallback.innerHTML =
-                              '<span class="text-4xl mb-1"><FaBox /></span><span class="text-xs font-medium">No Image</span>';
-
-                            parent.appendChild(
-                              fallback
-                            );
-                          }
-                        }}
                       />
 
                     ) : (
@@ -324,11 +298,33 @@ export default function MasterData() {
                   {/* QR */}
                   {barang.qr_image && (
 
-                    <img
-                      src={barang.qr_image}
-                      alt="QR"
-                      className="w-12 h-12 rounded-lg border p-0.5 bg-white shadow-sm"
-                    />
+                    <div className="shrink-0">
+
+                      <img
+                        src={barang.qr_image}
+                        alt="QR"
+                        onClick={() =>
+                          setPreviewQR(
+                            barang.qr_image
+                          )
+                        }
+                        className="
+                          w-16
+                          h-16
+                          rounded-xl
+                          border
+                          border-gray-200
+                          bg-white
+                          p-1
+                          shadow-sm
+                          cursor-pointer
+                          hover:scale-110
+                          transition-all
+                          duration-200
+                        "
+                      />
+
+                    </div>
 
                   )}
 
@@ -395,6 +391,76 @@ export default function MasterData() {
 
       )}
 
+      {/* MODAL PREVIEW QR */}
+      {previewQR && (
+
+        <div
+          className="
+            fixed
+            inset-0
+            z-50
+            bg-black/70
+            flex
+            items-center
+            justify-center
+            p-4
+          "
+          onClick={() =>
+            setPreviewQR(null)
+          }
+        >
+
+          <div
+            className="
+              bg-white
+              p-5
+              rounded-3xl
+              shadow-2xl
+              relative
+            "
+            onClick={(e) =>
+              e.stopPropagation()
+            }
+          >
+
+            {/* BUTTON CLOSE */}
+            <button
+              onClick={() =>
+                setPreviewQR(null)
+              }
+              className="
+                absolute
+                top-3
+                right-3
+                bg-red-500
+                hover:bg-red-600
+                text-white
+                w-8
+                h-8
+                rounded-full
+                font-bold
+              "
+            >
+              ×
+            </button>
+
+            {/* QR BESAR */}
+            <img
+              src={previewQR}
+              alt="Preview QR"
+              className="
+                w-80
+                h-80
+                object-contain
+              "
+            />
+
+          </div>
+
+        </div>
+
+      )}
+
     </div>
   );
 }
\ No newline at end of file