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

---
 src/pages/TransaksiBAST.tsx | 430 ++++++++++++++++++++----------------
 1 file changed, 242 insertions(+), 188 deletions(-)

diff --git a/src/pages/TransaksiBAST.tsx b/src/pages/TransaksiBAST.tsx
index e7f9ca2..3d127a3 100644
--- a/src/pages/TransaksiBAST.tsx
+++ b/src/pages/TransaksiBAST.tsx
@@ -2,14 +2,14 @@
 
 import {
   FileText,
-  Clock3,
   User,
   BadgeCheck,
   Download,
   MapPin,
- Layers,
+  Layers,
   Plus,
   X,
+  Clock3,
 } from "lucide-react";
 
 import { useEffect, useState } from "react";
@@ -39,14 +39,19 @@ export default function TransaksiBAST() {
   const [isSubmitting, setIsSubmitting] =
     useState(false);
 
+  /* DROPDOWN */
+  const [barangList, setBarangList] =
+    useState<any[]>([]);
+
+  const [userList, setUserList] =
+    useState<any[]>([]);
+
+  /* FORM */
   const [formData, setFormData] =
     useState({
-      kode_barang: "",
-      nama_barang: "",
-      nama_kategori: "",
-      nama_lokasi: "",
-      nama_penyerah: "",
-      nama_penerima: "",
+      barang_id: "",
+      user_serah_id: "",
+      user_terima_id: "",
     });
 
   /* =======================================================
@@ -106,13 +111,62 @@ export default function TransaksiBAST() {
 
     fetchBAST();
 
+    /* AMBIL DATA BARANG */
+    axios
+      .get("http://localhost:5000/api/barang")
+
+      .then((res) => {
+
+        setBarangList(
+          res.data?.data ||
+          res.data ||
+          []
+        );
+
+      })
+
+      .catch((err) => {
+
+        console.error(
+          "Gagal mengambil barang:",
+          err
+        );
+
+      });
+
+    /* AMBIL DATA USER */
+    axios
+      .get("http://localhost:5000/api/users")
+
+      .then((res) => {
+
+        setUserList(
+          res.data?.data ||
+          res.data ||
+          []
+        );
+
+      })
+
+      .catch((err) => {
+
+        console.error(
+          "Gagal mengambil user:",
+          err
+        );
+
+      });
+
   }, []);
 
   /* =======================================================
      HANDLE INPUT
      ======================================================= */
   const handleInputChange = (
-    e: React.ChangeEvent<HTMLInputElement>
+    e: React.ChangeEvent<
+      HTMLInputElement |
+      HTMLSelectElement
+    >
   ) => {
 
     setFormData({
@@ -124,7 +178,7 @@ export default function TransaksiBAST() {
   };
 
   /* =======================================================
-     SUBMIT BAST
+     SUBMIT
      ======================================================= */
   const handleSubmit = async (
     e: React.FormEvent
@@ -144,12 +198,9 @@ export default function TransaksiBAST() {
       setShowModal(false);
 
       setFormData({
-        kode_barang: "",
-        nama_barang: "",
-        nama_kategori: "",
-        nama_lokasi: "",
-        nama_penyerah: "",
-        nama_penerima: "",
+        barang_id: "",
+        user_serah_id: "",
+        user_terima_id: "",
       });
 
       fetchBAST();
@@ -174,7 +225,7 @@ export default function TransaksiBAST() {
   };
 
   /* =======================================================
-     DOWNLOAD PDF
+     PDF
      ======================================================= */
   const downloadPDF = async (
     item: any
@@ -197,7 +248,7 @@ export default function TransaksiBAST() {
     } catch (err) {
 
       console.log(
-        "QR Code endpoint not found."
+        "QR tidak ditemukan"
       );
 
     }
@@ -215,9 +266,7 @@ export default function TransaksiBAST() {
 
     }
 
-    /* =========================
-       HEADER
-       ========================= */
+    /* HEADER */
     doc.rect(
       140,
       50,
@@ -258,9 +307,7 @@ export default function TransaksiBAST() {
       }
     );
 
-    /* =========================
-       ISI
-       ========================= */
+    /* ISI */
     doc.setFont(
       "helvetica",
       "normal"
@@ -317,9 +364,7 @@ export default function TransaksiBAST() {
       160
     );
 
-    /* =========================
-       TABLE
-       ========================= */
+    /* TABLE */
     autoTable(doc, {
       startY: 168,
 
@@ -337,27 +382,13 @@ 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: [[
@@ -377,9 +408,7 @@ export default function TransaksiBAST() {
       ]],
     });
 
-    /* =========================
-       FOOTER
-       ========================= */
+    /* FOOTER */
     doc.setFontSize(11);
 
     doc.text(
@@ -450,8 +479,6 @@ export default function TransaksiBAST() {
       min-h-screen
       bg-gray-100
       dark:bg-gray-900
-      transition-all
-      duration-300
     ">
 
       {/* HEADER */}
@@ -497,8 +524,6 @@ export default function TransaksiBAST() {
             px-5
             py-2.5
             rounded-xl
-            shadow-md
-            transition-all
           "
         >
 
@@ -517,7 +542,6 @@ export default function TransaksiBAST() {
           p-12
           text-center
           bg-white
-          dark:bg-gray-800
           rounded-3xl
           text-blue-600
           font-medium
@@ -525,14 +549,13 @@ export default function TransaksiBAST() {
           animate-pulse
         ">
 
-          Sedang menyinkronkan data dokumen BAST dari server CIFO...
+          Sedang menyinkronkan data dokumen BAST...
 
           <FaHourglassEnd className="mx-auto mt-3" />
 
         </div>
 
-      ) : dataBAST &&
-        dataBAST.length > 0 ? (
+      ) : dataBAST.length > 0 ? (
 
         <div className="space-y-5">
 
@@ -547,10 +570,6 @@ export default function TransaksiBAST() {
                 shadow-md
                 p-6
                 border
-                border-gray-200
-                dark:border-gray-700
-                hover:shadow-lg
-                transition-all
               "
             >
 
@@ -559,15 +578,11 @@ export default function TransaksiBAST() {
                 flex-col
                 sm:flex-row
                 justify-between
-                items-start
-                gap-4
+                gap-5
               ">
 
                 {/* KIRI */}
-                <div className="
-                  space-y-2.5
-                  flex-1
-                ">
+                <div className="flex-1 space-y-3">
 
                   <div className="
                     flex
@@ -577,14 +592,12 @@ export default function TransaksiBAST() {
 
                     <FileText
                       size={20}
-                      className="
-                        text-blue-600
-                      "
+                      className="text-blue-600"
                     />
 
                     <h2 className="
                       text-xl
-                      font-extrabold
+                      font-bold
                       dark:text-white
                     ">
                       Dokumen BAST #
@@ -600,14 +613,12 @@ export default function TransaksiBAST() {
                       font-mono
                       font-bold
                       px-2
-                      py-0.5
-                      bg-gray-100
-                      dark:bg-gray-700
+                      py-1
                       rounded
+                      bg-gray-100
                     ">
 
-                      {item.kode_barang ||
-                        "KODE-BLANK"}
+                      {item.kode_barang}
 
                     </span>
 
@@ -615,8 +626,7 @@ export default function TransaksiBAST() {
                       text-xl
                       font-bold
                       text-blue-600
-                      dark:text-blue-400
-                      mt-1
+                      mt-2
                     ">
                       {item.nama_barang}
                     </p>
@@ -625,7 +635,6 @@ export default function TransaksiBAST() {
 
                   <div className="
                     grid
-                    grid-cols-1
                     md:grid-cols-2
                     gap-3
                     text-sm
@@ -637,15 +646,13 @@ export default function TransaksiBAST() {
                       gap-2
                     ">
 
-                      <Layers
-                        size={16}
-                      />
+                      <Layers size={16} />
 
                       <span>
                         Kategori:
                         <strong>
                           {" "}
-                          {item.nama_kategori}
+                          {item.nama_kategori || "-"}
                         </strong>
                       </span>
 
@@ -657,15 +664,13 @@ export default function TransaksiBAST() {
                       gap-2
                     ">
 
-                      <MapPin
-                        size={16}
-                      />
+                      <MapPin size={16} />
 
                       <span>
                         Lokasi:
                         <strong>
                           {" "}
-                          {item.nama_lokasi}
+                          {item.nama_lokasi || "-"}
                         </strong>
                       </span>
 
@@ -675,7 +680,6 @@ export default function TransaksiBAST() {
 
                   <div className="
                     grid
-                    grid-cols-1
                     md:grid-cols-2
                     gap-3
                     text-sm
@@ -691,16 +695,14 @@ export default function TransaksiBAST() {
 
                       <BadgeCheck
                         size={16}
-                        className="
-                          text-green-500
-                        "
+                        className="text-green-500"
                       />
 
                       <span>
                         Penyerah:
                         <strong>
                           {" "}
-                          {item.nama_penyerah}
+                          {item.nama_penyerah || "-"}
                         </strong>
                       </span>
 
@@ -714,16 +716,14 @@ export default function TransaksiBAST() {
 
                       <User
                         size={16}
-                        className="
-                          text-blue-500
-                        "
+                        className="text-blue-500"
                       />
 
                       <span>
                         Penerima:
                         <strong>
                           {" "}
-                          {item.nama_penerima}
+                          {item.nama_penerima || "-"}
                         </strong>
                       </span>
 
@@ -761,8 +761,8 @@ export default function TransaksiBAST() {
                 <div className="
                   flex
                   flex-col
-                  gap-3
                   items-end
+                  gap-3
                 ">
 
                   <div className="
@@ -777,15 +777,16 @@ export default function TransaksiBAST() {
                       py-1
                       rounded-full
                       ${
-                        item.status_serah ===
-                        "Approved"
+                        item.status_serah === "Approved"
                           ? "bg-green-100 text-green-700"
                           : "bg-yellow-100 text-yellow-700"
                       }
                     `}>
+
                       Serah:
                       {" "}
                       {item.status_serah}
+
                     </span>
 
                     <span className={`
@@ -795,15 +796,16 @@ export default function TransaksiBAST() {
                       py-1
                       rounded-full
                       ${
-                        item.status_terima ===
-                        "Approved"
+                        item.status_terima === "Approved"
                           ? "bg-green-100 text-green-700"
                           : "bg-yellow-100 text-yellow-700"
                       }
                     `}>
+
                       Terima:
                       {" "}
                       {item.status_terima}
+
                     </span>
 
                   </div>
@@ -819,12 +821,9 @@ export default function TransaksiBAST() {
                       bg-blue-600
                       hover:bg-blue-700
                       text-white
-                      font-semibold
-                      text-sm
                       px-4
                       py-2.5
                       rounded-xl
-                      shadow-md
                     "
                   >
 
@@ -850,14 +849,12 @@ export default function TransaksiBAST() {
           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!
+          Belum ada transaksi BAST
 
           <FaBox className="mx-auto mt-3" />
 
@@ -875,16 +872,16 @@ export default function TransaksiBAST() {
           flex
           items-center
           justify-center
-          p-4
           bg-black/50
+          p-4
         ">
 
           <div className="
             bg-white
             dark:bg-gray-800
-            rounded-3xl
             w-full
             max-w-2xl
+            rounded-3xl
             shadow-2xl
           ">
 
@@ -925,95 +922,154 @@ export default function TransaksiBAST() {
 
               <div className="
                 grid
-                grid-cols-1
-                md:grid-cols-2
                 gap-5
               ">
 
-                {[
-                  {
-                    label:
-                      "Kode Barang",
-                    name:
-                      "kode_barang",
-                  },
+                {/* BARANG */}
+                <div>
 
-                  {
-                    label:
-                      "Nama Barang",
-                    name:
-                      "nama_barang",
-                  },
+                  <label className="
+                    text-sm
+                    font-medium
+                  ">
+                    Pilih Barang
+                  </label>
 
-                  {
-                    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}
+                  <select
+                    required
+                    name="barang_id"
+                    value={formData.barang_id}
+                    onChange={handleInputChange}
                     className="
-                      space-y-1.5
+                      w-full
+                      mt-2
+                      px-4
+                      py-3
+                      rounded-xl
+                      border
                     "
                   >
 
-                    <label className="
-                      text-sm
-                      font-medium
-                    ">
-                      {field.label}
-                    </label>
+                    <option value="">
+                      -- Pilih Barang --
+                    </option>
 
-                    <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
-                      "
-                    />
+                    {barangList.map((barang) => (
 
-                  </div>
+                      <option
+                        key={barang.barang_id}
+                        value={barang.barang_id}
+                      >
 
-                ))}
+                        {barang.kode_barang}
+                        {" - "}
+                        {barang.nama_barang}
+
+                      </option>
+
+                    ))}
+
+                  </select>
+
+                </div>
+
+                {/* PENYERAH */}
+                <div>
+
+                  <label className="
+                    text-sm
+                    font-medium
+                  ">
+                    User Penyerah
+                  </label>
+
+                  <select
+                    required
+                    name="user_serah_id"
+                    value={formData.user_serah_id}
+                    onChange={handleInputChange}
+                    className="
+                      w-full
+                      mt-2
+                      px-4
+                      py-3
+                      rounded-xl
+                      border
+                    "
+                  >
+
+                    <option value="">
+                      -- Pilih Penyerah --
+                    </option>
+
+                    {userList.map((user) => (
+
+                      <option
+                        key={user.user_id}
+                        value={user.user_id}
+                      >
+
+                        {user.nama_lengkap}
+                        {" ("}
+                        {user.role}
+                        {")"}
+
+                      </option>
+
+                    ))}
+
+                  </select>
+
+                </div>
+
+                {/* PENERIMA */}
+                <div>
+
+                  <label className="
+                    text-sm
+                    font-medium
+                  ">
+                    User Penerima
+                  </label>
+
+                  <select
+                    required
+                    name="user_terima_id"
+                    value={formData.user_terima_id}
+                    onChange={handleInputChange}
+                    className="
+                      w-full
+                      mt-2
+                      px-4
+                      py-3
+                      rounded-xl
+                      border
+                    "
+                  >
+
+                    <option value="">
+                      -- Pilih Penerima --
+                    </option>
+
+                    {userList.map((user) => (
+
+                      <option
+                        key={user.user_id}
+                        value={user.user_id}
+                      >
+
+                        {user.nama_lengkap}
+                        {" ("}
+                        {user.role}
+                        {")"}
+
+                      </option>
+
+                    ))}
+
+                  </select>
+
+                </div>
 
               </div>
 
@@ -1035,7 +1091,6 @@ export default function TransaksiBAST() {
                     py-2.5
                     rounded-xl
                     bg-gray-200
-                    hover:bg-gray-300
                   "
                 >
                   Batal
@@ -1043,9 +1098,7 @@ export default function TransaksiBAST() {
 
                 <button
                   type="submit"
-                  disabled={
-                    isSubmitting
-                  }
+                  disabled={isSubmitting}
                   className="
                     px-5
                     py-2.5
@@ -1075,4 +1128,5 @@ export default function TransaksiBAST() {
     </div>
 
   );
+
 }
\ No newline at end of file