first commit
This commit is contained in:
parent
8bb8fa23f4
commit
6ba711feac
|
|
@ -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>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue