akbarguci.pkl
/
bast_frontend
Template
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

This commit is contained in:
akbarguci.pkl 2026-05-20 10:29:00 +07:00
parent 8bb8fa23f4
commit 6ba711feac
1 changed files with 242 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

410
src/pages/TransaksiBAST.tsx
View File

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