\r\n \r\n \r\n
Periksa pengajuan pendaftaran Anggota
Silakan masukan detail dibawah ini untuk melakukan pengecekan progres pendaftaran
Berikut Adalah Nomor Anggota Anda :
Cek Pendaftaran
Silakan masukan detail dibawah ini untuk melakukan pengecekan status pendaftaran anda
Affco
Privacy Policy
\r\n \r\n </p>\r\n </form></div> : \r\n \r\n <form className=\"form-signin\" action=\"/otp\">\r\n <p className=\"mb-2 bodytext2 color-black500 text-justify\">Berikut Adalah Nomor Anggota Anda : </p>\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n {result_no} - {result_name}\r\n\r\n <a href=\"https://apps.koperasi-astra.com/signin\" type=\"button\" id=\"buttonCheck\">\r\n Kembali Ke Halaman Login\r\n </a>\r\n </label>\r\n </form> }\r\n </>\r\n );\r\n}\r\n\r\nexport default PrivacyPolicy;","import React, { useState, useEffect } from \"react\";\r\nimport { Link, useNavigate, useLocation } from \"react-router-dom\";\r\nimport Swal from 'sweetalert2'\r\nimport Spinner from '../components/Spinner';\r\n\r\nconst ResetPassword = () => {\r\n const navigate = useNavigate();\r\n const [onProgress, setProgress] = useState(false);\r\n const [password, setPassword] = useState('');\r\n const [confirmPassword, setConfirmPassword] = useState('');\r\n\r\n const {state} = useLocation();\r\n // const {email: emailState} = state;\r\n\r\n\tconst setContentProgess = (status) => {\r\n\t\tsetProgress(status);\r\n\t\tdocument.getElementById('buttonReset').disabled = status\r\n\t}\r\n\r\n const handleResetPassword = async () => {\r\n if(password !== '' || confirmPassword !== ''){\r\n if(password === confirmPassword){\r\n // count down timer\r\n setContentProgess(true)\r\n setTimeout(async () => {\r\n setContentProgess(false)\r\n Swal.fire({\r\n title: 'Berhasil',\r\n text: 'Kata sandi berhasil diubah!',\r\n icon: 'success',\r\n confirmButtonText: 'Masuk',\r\n }).then((result) => {\r\n navigate('/signin');\r\n })\r\n }, 3000);\r\n }else{\r\n Swal.fire({\r\n title: 'Perhatian',\r\n text: 'Kata sandi tidak sama!',\r\n icon: 'error',\r\n confirmButtonText: 'Mengerti',\r\n })\r\n }\r\n }else{\r\n Swal.fire({\r\n\t\t\t\ttitle: 'Perhatian',\r\n\t\t\t\ttext: 'Sila masukkan kata sandi baru anda!',\r\n\t\t\t\ticon: 'error',\r\n\t\t\t\tconfirmButtonText: 'Mengerti',\r\n\t\t\t})\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n document.title = 'Atur Ulang Kata Sandi';\r\n if(state.email === null){\r\n navigate('/forgot_password');\r\n }\r\n }, []);\r\n\r\n return (\r\n <>\r\n <nav className=\"navbar navbar-expand-md fixed-top background-transparent\">\r\n <Link className=\"navbar-brand\" to=\"/signin\" title=\"Sign In\">\r\n <i className=\"fi fi-sr-angle-left color-black600 bodytext1\"></i>\r\n </Link>\r\n </nav>\r\n \r\n <form className=\"form-signin\">\r\n <p className=\"mb-2 headline5 color-black700 font-weight-bold text-justify\">Reset Kata Sandi</p>\r\n <p className=\"mb-2 bodytext2 color-black500 text-justify\">Silakan masukkan kata sandi baru untuk akun Anda.</p>\r\n \r\n <div className=\"input-group-custom mb-3\">\r\n <i className=\"fi fi-rr-lock bodytext1 color-black400\"></i>\r\n <input onChange={ e=> setPassword(e.target.value)} type=\"password\" name=\"password\" className=\"form-input bodytext2\" placeholder=\"Kata Sandi\" required/>\r\n </div>\r\n <div className=\"input-group-custom mb-3\">\r\n <i className=\"fi fi-rr-lock bodytext1 color-black400\"></i>\r\n <input onChange={ e=> setConfirmPassword(e.target.value)} type=\"password\" name=\"password_confirm\" className=\"form-input bodytext2\" placeholder=\"Konfirmasi Kata Sandi\" required/>\r\n </div>\r\n\r\n <button onClick={handleResetPassword} className=\"btn btn-lg btn-block button-primary bodytext2\" type=\"button\" id=\"buttonReset\">\r\n {onProgress ? <Spinner/> : 'Reset Kata Sandi'}\r\n </button>\r\n </form>\r\n </>\r\n );\r\n}\r\nexport default ResetPassword;","import React, { useState, useEffect, useRef } from 'react';\r\nimport { useNavigate, useLocation } from 'react-router-dom';\r\nimport Swal from 'sweetalert2';\r\nimport '../assets/styles/OtpComponent.css';\r\n\r\nconst API_BASE = 'https://lendtick-user-prod.koperasi-astra.com';\r\nconst URL_OTP_VALIDATE = `${API_BASE}/otp/validate`;\r\nconst URL_RESEND_OTP = `${API_BASE}/notif/send-otp`;\r\n\r\nconst OtpComponent = () => {\r\n const navigate = useNavigate();\r\n const location = useLocation();\r\n const [isSubmit, setIsSubmit] = useState(false);\r\n const [isValid, setIsValid] = useState(false);\r\n const [isFailed, setIsFailed] = useState(false);\r\n const [isSuccessResend, setIsSuccessResend] = useState(false);\r\n const [otpNumber, setOtpNumber] = useState(null);\r\n const [countdown, setCountdown] = useState(300);\r\n const [timeLimit, setTimeLimit] = useState(false);\r\n const [message, setMessage] = useState(null);\r\n const [inputOtp, setInputOtp] = useState(['', '', '', '']);\r\n const inputRefs = useRef([]);\r\n const [userData, setUserData] = useState(null);\r\n\r\n useEffect(() => {\r\n document.title = \"Isi Kode OTP\";\r\n if (location.state && location.state.phone_number && location.state.id_user) {\r\n setUserData({\r\n phone_number: location.state.phone_number,\r\n id_user: location.state.id_user\r\n });\r\n counterTime();\r\n } else {\r\n Swal.fire({\r\n title: 'Error',\r\n text: 'Data tidak lengkap. Silakan kembali ke halaman registrasi.',\r\n icon: 'error',\r\n confirmButtonText: 'OK'\r\n }).then(() => {\r\n navigate('/register');\r\n });\r\n }\r\n }, [location, navigate]);\r\n\r\n const counterTime = () => {\r\n const interval = setInterval(() => {\r\n setCountdown((prevCountdown) => {\r\n if (prevCountdown <= 0) {\r\n clearInterval(interval);\r\n setTimeLimit(true);\r\n return 0;\r\n }\r\n return prevCountdown - 1;\r\n });\r\n }, 1000);\r\n };\r\n\r\n const resetTime = () => {\r\n setCountdown(300);\r\n setTimeLimit(false);\r\n counterTime();\r\n };\r\n\r\n const formatTime = (seconds) => {\r\n const minutes = Math.floor(seconds / 60);\r\n const remainingSeconds = seconds % 60;\r\n return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;\r\n };\r\n\r\n const onSubmit = () => {\r\n if (!userData) {\r\n Swal.fire({\r\n title: 'Error',\r\n text: 'Data pengguna tidak tersedia. Silakan kembali ke halaman registrasi.',\r\n icon: 'error',\r\n confirmButtonText: 'OK'\r\n }).then(() => {\r\n navigate('/register');\r\n });\r\n return;\r\n }\r\n\r\n setIsSubmit(true);\r\n setIsFailed(false);\r\n setIsSuccessResend(false);\r\n setTimeLimit(false);\r\n\r\n const data = {\r\n user_id: userData.id_user,\r\n phone_number: userData.phone_number,\r\n otp_number: otpNumber\r\n };\r\n\r\n fetch(URL_OTP_VALIDATE, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n },\r\n body: JSON.stringify(data),\r\n })\r\n .then(response => response.json())\r\n .then(res => {\r\n if (res.status) {\r\n setIsSubmit(false);\r\n navigate('/register-success');\r\n } else {\r\n setIsFailed(true);\r\n setIsSubmit(false);\r\n setMessage(res.message);\r\n }\r\n })\r\n .catch(err => {\r\n Swal.fire({\r\n title: 'Error',\r\n text: 'Pastikan koneksi tersambung, silakan coba lagi',\r\n icon: 'error',\r\n confirmButtonText: 'OK'\r\n });\r\n })\r\n .finally(() => {\r\n setIsSubmit(false);\r\n });\r\n };\r\n\r\n const resendOTP = () => {\r\n if (!userData) {\r\n Swal.fire({\r\n title: 'Error',\r\n text: 'Data pengguna tidak tersedia. Silakan kembali ke halaman registrasi.',\r\n icon: 'error',\r\n confirmButtonText: 'OK'\r\n }).then(() => {\r\n navigate('/register');\r\n });\r\n return;\r\n }\r\n\r\n setIsSubmit(false);\r\n setIsFailed(false);\r\n setIsSuccessResend(false);\r\n setTimeLimit(false);\r\n\r\n const data = {\r\n phone_number: userData.phone_number,\r\n campaign: 'registrasi',\r\n user_id: userData.id_user\r\n };\r\n\r\n fetch(URL_RESEND_OTP, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n },\r\n body: JSON.stringify(data),\r\n })\r\n .then(response => response.json())\r\n .then(res => {\r\n setIsSuccessResend(true);\r\n resetTime();\r\n })\r\n .catch(err => {\r\n Swal.fire({\r\n title: 'Error',\r\n text: 'Gagal mengirim ulang OTP. Silakan coba lagi.',\r\n icon: 'error',\r\n confirmButtonText: 'OK'\r\n });\r\n });\r\n };\r\n\r\n const handleInputChange = (index, value) => {\r\n const newInputOtp = [...inputOtp];\r\n newInputOtp[index] = value;\r\n setInputOtp(newInputOtp);\r\n\r\n if (value && index < inputOtp.length - 1) {\r\n const nextInput = inputRefs.current[index + 1];\r\n if (nextInput) {\r\n nextInput.focus();\r\n }\r\n }\r\n\r\n if (newInputOtp.join('').length === 4) {\r\n setOtpNumber(newInputOtp.join(''));\r\n setIsValid(true);\r\n } else {\r\n setIsValid(false);\r\n }\r\n };\r\n\r\n const handleKeyDown = (index, event) => {\r\n if (event.key === 'Backspace' && !inputOtp[index] && index > 0) {\r\n const prevInput = inputRefs.current[index - 1];\r\n if (prevInput) {\r\n prevInput.focus();\r\n }\r\n }\r\n };\r\n\r\n if (!userData) {\r\n return <div>Loading...</div>;\r\n }\r\n\r\n return (\r\n <div className=\"otp-container\">\r\n <div className=\"otp-header\">\r\n <h2>Isi Kode OTP</h2>\r\n </div>\r\n <div className=\"otp-content\">\r\n <p className=\"countdown-text\">\r\n Kode berakhir dalam <span className=\"countdown\">{formatTime(countdown)}</span>\r\n </p>\r\n <div className=\"otp-input-container\">\r\n {inputOtp.map((digit, index) => (\r\n <input\r\n key={index}\r\n ref={(el) => inputRefs.current[index] = el}\r\n className=\"otp-input\"\r\n type=\"text\"\r\n inputMode=\"numeric\"\r\n maxLength={1}\r\n value={digit}\r\n onChange={(e) => handleInputChange(index, e.target.value)}\r\n onKeyDown={(e) => handleKeyDown(index, e)}\r\n />\r\n ))}\r\n </div>\r\n {timeLimit && (\r\n <button className=\"resend-button\" onClick={resendOTP}>\r\n Kirim ulang\r\n </button>\r\n )}\r\n {isSuccessResend && <div className=\"alert success\">Kode OTP telah dikirim ulang</div>}\r\n {isFailed && <div className=\"alert danger\">{message}</div>}\r\n {timeLimit && <div className=\"alert warning\">Waktu Anda telah habis silahkan untuk klik kirim ulang diatas</div>}\r\n <p className=\"otp-warning\">\r\n Jangan beritahukan kode OTP kepada orang lain\r\n </p>\r\n <button\r\n className=\"submit-button\"\r\n onClick={onSubmit}\r\n disabled={!isValid || isSubmit}\r\n >\r\n {isSubmit ? 'Submitting...' : 'Submit'}\r\n </button>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default OtpComponent;","import React, {useState, useEffect} from \"react\";\r\nimport {\r\n Link,\r\n useNavigate\r\n } from \"react-router-dom\";\r\nimport { checkAccount, getAccount, safeString, setAccount } from \"../helper/session\";\r\nimport Swal from \"sweetalert2\";\r\nimport Footer from \"../components/Footer\";\r\nimport axios, { updateprofile } from \"../helper/axios\";\r\nimport Spinner from \"../components/Spinner\";\r\nimport Select from 'react-select';\r\nimport default_photo from '../assets/images/user-default.png';\r\nimport { Player } from '@lottiefiles/react-lottie-player';\r\n\r\nconst UpdateProfile = () => {\r\n const [user, setUser] = useState([]);\r\n const [onProgress, setProgress] = useState(false);\r\n const navigate = useNavigate();\r\n\r\n const [name, setName] = useState(user.name);\r\n const [phone_number, setPhone] = useState(user.phone_number);\r\n const [email, setEmail] = useState(user.email);\r\n const [birth_place, setDomicile] = useState(user.birth_place);\r\n const [birth_date, setNpwp] = useState(user.birth_date);\r\n const [loading, setLoading] = useState(true);\r\n\r\n useEffect(() => {\r\n getAccount();\r\n }, [])\r\n\r\n const handleImage = (evt) => {\r\n var tgt = evt.target || window.event.srcElement,\r\n files = tgt.files;\r\n \r\n if (FileReader && files && files.length) {\r\n var fr = new FileReader();\r\n fr.onload = function () {\r\n document.getElementById('image-profile').src = fr.result;\r\n }\r\n fr.readAsDataURL(files[0]);\r\n }else{\r\n document.getElementById('image-profile').src = '../assets/images/user-default.png';\r\n }\r\n }\r\n\r\n const getAccount = () => {\r\n setLoading(true) \r\n\r\n const config = {\r\n headers: { Authorization: localStorage.getItem('token') }\r\n };\r\n\r\n axios.get('https://lendtick-user-prod.koperasi-astra.com/profile/get',config) \r\n .then(response => {\r\n setLoading(false);\r\n let user = response.data.data; \r\n setUser(user);\r\n // console.log('user',user);\r\n }).catch(error => {\r\n setUser([]);\r\n });\r\n }\r\n\r\n const setContentProgess = (status) => {\r\n\t\tsetProgress(status);\r\n\t\tdocument.getElementById('buttonSave').disabled = status\r\n\t}\r\n\r\n const onUpdate = () => {\r\n const config = {\r\n headers: { Authorization: localStorage.getItem('token') }\r\n };\r\n\r\n const inputPhone = phone_number == undefined ? user.no_hp1 : phone_number ;\r\n const inputEmail = email == undefined ? user.email : email;\r\n const inputName = name == undefined ? user.name : name;\r\n const inputBirthPlace = birth_date == undefined ? user.birth_date : birth_date;\r\n const inputBirthDate = birth_place == undefined ? user.birth_place : birth_place;\r\n\r\n axios.put('https://api-microsite.koperasi-astra.com/api/updateprofile',config)\r\n .then(response=> {\r\n setContentProgess(false);\r\n let result = response.data;\r\n if(result.message == 'success'){\r\n // setAccount(result.data);\r\n //// console.log(result.data);\r\n Swal.fire({\r\n icon: 'success',\r\n title: 'Berhasil',\r\n text: 'Data berhasil disimpan sebagai Draft',\r\n }).then(res => {\r\n if(res.value){\r\n navigate('/profile/edit_document', { replace: true });\r\n }\r\n })\r\n }else{\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Gagal',\r\n text: result.message,\r\n })\r\n }\r\n })\r\n .catch(error=>{\r\n setContentProgess(false);\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Terjadi Kesalahan',\r\n text: 'Terjadi kesalahan - Hubungi Admin',\r\n })\r\n })\r\n }\r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-start align-items-center flex-row py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <Link to=\"/home/profile\" className=\"navbar-brand\" title=\"back\">\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <p className=\"mb-0 bodytext1 semibold color-black500 px-2 py-2\">Edit Profil</p>\r\n </div>\r\n </nav>\r\n\r\n <div className=\"align-items-start pt-0 flex-column mt-5\">\r\n <main role=\"main\" className=\"container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 mt-5\">\r\n {loading == true ? <Player\r\n src='https://assets6.lottiefiles.com/packages/lf20_YZb2Qu.json'\r\n className=\"player\"\r\n loop\r\n autoplay\r\n /> :\r\n <form encType=\"multipart/form-data\" className=\"container-form px-3 py-3 bg-white d-flex flex-column mb-3\">\r\n <label className=\"container-image-profile mx-auto\" htmlFor=\"choose-image\">\r\n <img src={user.personal_photo !== null && user.personal_photo !== '' ? user.personal_photo : default_photo} alt=\"profile\" className=\"image-profile\" id=\"image-profile\"/>\r\n <input type=\"file\" name=\"picture\" id=\"choose-image\" accept=\"image/png, image/gif, image/jpeg\" onChangeCapture={e => handleImage(e)} hidden/>\r\n <i className=\"fi fi-rr-camera change-picture\"></i>\r\n </label>\r\n\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Nama Lengkap\r\n </label>\r\n <input type=\"text\" name=\"name\" id=\"dataName\" defaultValue={user.name} onChange={e => setName(e.target.value)} style={{backgroundColor: \"silver\",color: \"black\"}} className=\"form-input form-data-booking bodytext2 mb-3\" placeholder=\"Nama Lengkap\" disabled/>\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Tanggal Lahir\r\n </label>\r\n <input type=\"text\" name=\"name\" id=\"dataBirthPlace\" defaultValue={user.birth_date} onChange={e => setName(e.target.value)} style={{backgroundColor: \"silver\",color: \"black\"}} className=\"form-input form-data-booking bodytext2 mb-3\" placeholder=\"Tanggal Lahir\" disabled/>\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Tempat Lahir\r\n </label>\r\n <input type=\"text\" name=\"name\" id=\"dataName\" defaultValue={user.birth_place} onChange={e => setName(e.target.value)} style={{backgroundColor: \"silver\",color: \"black\"}} className=\"form-input form-data-booking bodytext2 mb-3\" placeholder=\"Tempat Lahir\" disabled/>\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Email\r\n </label>\r\n <input type=\"text\" name=\"name\" id=\"dataName\" defaultValue={user.email} onChange={e => setName(e.target.value)} style={{backgroundColor: \"silver\",color: \"black\"}} className=\"form-input form-data-booking bodytext2 mb-3\" placeholder=\"Email\" disabled/>\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Telepon\r\n </label>\r\n <input type=\"text\" name=\"name\" id=\"dataName\" defaultValue={user.phone_number} onChange={e => setName(e.target.value)} style={{backgroundColor: \"silver\",color: \"black\"}} className=\"form-input form-data-booking bodytext2 mb-3\" placeholder=\"Telepon\" disabled/>\r\n\r\n <button disabled={onProgress && 'disabled'} onClick={onUpdate} type=\"button\" id=\"buttonSave\" className=\"button-action-save text-white background-green500 bodytext1 text-center mt-5\">\r\n {onProgress ? <Spinner/> : 'Simpan Perubahan'}\r\n </button>\r\n </form>}\r\n </main>\r\n </div>\r\n \r\n\r\n <Footer/>\r\n\r\n </>\r\n )\r\n}\r\n\r\nexport default UpdateProfile;","import React, {useState, useEffect} from \"react\";\r\nimport {\r\n Link,\r\n useNavigate\r\n } from \"react-router-dom\";\r\nimport { checkAccount, getAccount, safeString, setAccount } from \"../helper/session\";\r\nimport Swal from \"sweetalert2\";\r\nimport Footer from \"../components/Footer\";\r\nimport axios, { updateprofile } from \"../helper/axios\";\r\nimport Spinner from \"../components/Spinner\";\r\nimport Select from 'react-select';\r\nimport { Player } from '@lottiefiles/react-lottie-player';\r\n\r\nconst UpdateDocument = () => {\r\n const [user, setUser] = useState([]);\r\n const [onProgress, setProgress] = useState(false);\r\n const navigate = useNavigate();\r\n\r\n const [name, setName] = useState(user.name);\r\n const [phone_number, setPhone] = useState(user.phone_number);\r\n const [email, setEmail] = useState(user.email);\r\n const [identity_id, setIdentity] = useState(user.identity_id);\r\n const [domicile_address, setDomicile] = useState(user.domicile_address);\r\n const [domicile_address_status, setDomicileStatus] = useState([]);\r\n const [religion, setReligion] = useState([]);\r\n const [gender, setGender] = useState([]);\r\n const [marriage, setMarriage] = useState([]);\r\n const [NPWP_No, setNpwp] = useState(user.NPWP_No);\r\n const [mother_name, setMother] = useState(user.mother_name);\r\n const [domicile_address_status_update, setDomicileStatusUpdate] = useState('');\r\n const [user_company, setUserCompany] = useState([]);\r\n // const [uploadktp, setKTP] = useState('');\r\n const [fileKtp, setFileKtp] = useState([]);\r\n const [fileDataURL, setFileDataURL] = useState([]);\r\n const [fileKtpPas, setFileKtpPas] = useState([]);\r\n const [fileDataURLPas, setFileDataURLPas] = useState([]);\r\n const [fileIdCard, setFileIdCard] = useState([]);\r\n const [fileDataURLId, setFileDataURLId] = useState([]);\r\n const [existingKtp, setExistKtp] = useState('');\r\n const [existingKtpPas, setExistKtpPas] = useState('');\r\n const [existingId, setExistId] = useState('');\r\n const [loading, setLoading] = useState(false);\r\n\r\n const imageMimeType = /image\\/(png|jpg|jpeg)/i;\r\n\r\n useEffect(() => {\r\n getdocumentdetail();\r\n }, [])\r\n\r\n const setKTP = (e) => {\r\n const fileKtp = e.target.files;\r\n setFileKtp(fileKtp);\r\n }\r\n\r\n const setKTPPas = (e) => {\r\n const fileKtpPas = e.target.files;\r\n setFileKtpPas(fileKtpPas);\r\n }\r\n\r\n const setIdCard = (e) => {\r\n const fileIdCard = e.target.files;\r\n setFileIdCard(fileIdCard);\r\n // console.log('fileIdCard',fileIdCard);\r\n // console.log('fileDataURLId',fileDataURLId);\r\n }\r\n\r\n const setContentProgess = (status) => {\r\n\t\tsetProgress(status);\r\n\t\tdocument.getElementById('buttonSave').disabled = status\r\n\t}\r\n\r\n const getdocumentdetail = () => {\r\n setLoading(true)\r\n const config = {\r\n headers: { Authorization: 'Bearer' + localStorage.getItem('token') }\r\n };\r\n \r\n axios.get('https://api-microsite.koperasi-astra.com/api/getdocumentprofile',config) \r\n .then(response => {\r\n setLoading(false)\r\n let userDocument = response.data.data;\r\n if(userDocument !== null){\r\n let url_ktp = \"https://api-microsite.koperasi-astra.com/public/\" + userDocument.photo_ktp\r\n let url_ktppas = \"https://api-microsite.koperasi-astra.com/public/\" + userDocument.photo_ktppas\r\n let url_idcard = \"https://api-microsite.koperasi-astra.com/public/\" + userDocument.photo_idcard\r\n setExistKtp(url_ktp)\r\n setExistKtpPas(url_ktppas)\r\n setExistId(url_idcard)\r\n }\r\n }).catch(error => {\r\n alert('gagal mendapatkan data')\r\n setLoading(false)\r\n });\r\n }\r\n\r\n const onUpdate = () => {\r\n const config = {\r\n headers: { Authorization: 'Bearer' + localStorage.getItem('token') }\r\n };\r\n\r\n setContentProgess(true);\r\n if(fileKtp == null || fileIdCard == null){\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Gagal',\r\n text: 'Upload Data Terlebih dahulu',\r\n }).then(res => {\r\n if(res.value){\r\n navigate('/profile/edit_document', { replace: true });\r\n }\r\n })\r\n \r\n setContentProgess(false);\r\n } else {\r\n const formData = new FormData()\r\n formData.append('photo_ktp', document.querySelector('#dataKtp').files[0] !== undefined ? document.querySelector('#dataKtp').files[0] : fileKtp)\r\n formData.append('photo_idcard', document.querySelector('#dataId').files[0] !== undefined ? document.querySelector('#dataId').files[0] : fileIdCard)\r\n formData.append('photo_ktppas', document.querySelector('#dataKtpPas').files[0] !== undefined ? document.querySelector('#dataKtpPas').files[0] : fileKtpPas)\r\n axios.post('https://api-microsite.koperasi-astra.com/api/updatedokumen',formData,config) \r\n .then(response => {\r\n // console.log('response',response);\r\n Swal.fire({\r\n icon: 'success',\r\n title: 'Berhasil',\r\n text: 'Data berhasil disimpan sebagai draf',\r\n }).then(res => {\r\n if(res.value){\r\n navigate('/profile/edit_kepagawaian', { replace: true });\r\n }\r\n })\r\n \r\n setContentProgess(false);\r\n }).catch(error => {\r\n // console.log('error',error);\r\n });\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-start align-items-center flex-row py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <Link to=\"/home/profile\" className=\"navbar-brand\" title=\"back\">\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <p className=\"mb-0 bodytext1 semibold color-black500 px-2 py-2\">Edit Dokumen</p>\r\n </div>\r\n </nav>\r\n\r\n <div className=\"align-items-start pt-0 flex-column mt-5\">\r\n <main role=\"main\" className=\"container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 mt-5\">\r\n {loading == true ? <Player\r\n src='https://assets4.lottiefiles.com/packages/lf20_ssmouzg5.json'\r\n className=\"player\"\r\n loop\r\n autoplay\r\n /> :\r\n <form encType=\"multipart/form-data\" className=\"container-user d-flex justify-content-center flex-column w-100 px-3 py-4 mb-4\">\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Upload KTP <span className=\"text-danger\">*</span>\r\n </label>\r\n <input type=\"file\" accept=\"image/*\" name=\"ktp\" id=\"dataKtp\" onChange={setKTP} className=\"form-input form-data-file-booking bodytext2\" placeholder=\"Nama Lengkap\"/>\r\n {existingKtp ? \r\n <p className=\"img-preview-wrapper\">\r\n {\r\n <img style={{width:300,height:200}} src={existingKtp} alt=\"preview\" />\r\n }</p>\r\n : null}\r\n\r\n {fileDataURL.length > 0 ?\r\n <p className=\"img-preview-wrapper\">\r\n {\r\n <img style={{width:300,height:200}} src={fileDataURL} alt=\"preview\" />\r\n }\r\n </p> : null}\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Upload KTP Pasangan\r\n </label>\r\n <input type=\"file\" accept=\"image/*\" pattern=\"[0-9]{3}-[0-9]{3}-[0-9]{4}\" name=\"ktppas\" id=\"dataKtpPas\" onChange={setKTPPas} maxLength=\"15\" className=\"form-input form-data-file-booking bodytext2\" placeholder=\"Nomor Telpon\"/>\r\n {existingKtpPas ? \r\n <p className=\"img-preview-wrapper\">\r\n {\r\n <img style={{width:300,height:200}} src={existingKtpPas} alt=\"preview\" />\r\n }</p>\r\n : null}\r\n\r\n {fileDataURLPas.length > 0 ?\r\n <p className=\"img-preview-wrapper\">\r\n {\r\n <img style={{width:300,height:200}} src={fileDataURLPas} alt=\"preview\" />\r\n }\r\n </p> : null}\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Upload ID Card <span className=\"text-danger\">*</span>\r\n </label>\r\n <input type=\"file\" accept=\"image/*\" onChange={setIdCard} name=\"idcard\" id=\"dataId\" className=\"form-input form-data-file-booking bodytext2\" placeholder=\"Alamat Email\" required/>\r\n {existingId ? \r\n <p className=\"img-preview-wrapper\">\r\n {\r\n <img style={{width:300,height:200}} src={existingId} alt=\"preview\" />\r\n }</p>\r\n : null}\r\n\r\n {fileDataURLId.length > 0 ?\r\n <p className=\"img-preview-wrapper\">\r\n {\r\n <img style={{width:300,height:200}} src={fileDataURLId} alt=\"preview\" />\r\n }\r\n </p> : null}\r\n\r\n <button disabled={onProgress && 'disabled'} onClick={onUpdate} type=\"button\" id=\"buttonSave\" className=\"button-action-save text-white background-green500 bodytext1 text-center mt-5\">\r\n {onProgress ? <Spinner/> : 'Simpan Perubahan'}\r\n </button>\r\n </form>}\r\n </main>\r\n </div>\r\n \r\n\r\n <Footer/>\r\n\r\n </>\r\n )\r\n}\r\n\r\nexport default UpdateDocument;","import React, {useState, useEffect} from \"react\";\r\nimport {\r\n Link,\r\n useNavigate\r\n } from \"react-router-dom\";\r\nimport { checkAccount, getAccount, safeString, setAccount } from \"../helper/session\";\r\nimport Swal from \"sweetalert2\";\r\nimport Footer from \"../components/Footer\";\r\nimport axios, { updateprofile } from \"../helper/axios\";\r\nimport Spinner from \"../components/Spinner\";\r\nimport Select from 'react-select';\r\nimport { Player } from '@lottiefiles/react-lottie-player';\r\n\r\nconst UpdateKepegawaian = () => {\r\n const [user, setUser] = useState([]);\r\n const [onProgress, setProgress] = useState(false);\r\n const navigate = useNavigate();\r\n\r\n const [user_company, setUserCompany] = useState([]);\r\n\r\n const [company, setCompany] = useState(user_company.company);\r\n const [id_employee, setIdEmployee] = useState(user_company.id_employee);\r\n const [division, setDivision] = useState(user_company.division);\r\n const [position, setPosition] = useState(user_company.position);\r\n const [grade, setGrade] = useState(user_company.grade);\r\n const [employee_starting_date, setEmplStart] = useState(user_company.employee_starting_date); const [loading, setLoading] = useState(true);\r\n\r\n useEffect(() => {\r\n getAccount();\r\n }, [])\r\n\r\n const handleImage = (evt) => {\r\n var tgt = evt.target || window.event.srcElement,\r\n files = tgt.files;\r\n \r\n if (FileReader && files && files.length) {\r\n var fr = new FileReader();\r\n fr.onload = function () {\r\n document.getElementById('image-profile').src = fr.result;\r\n }\r\n fr.readAsDataURL(files[0]);\r\n }else{\r\n document.getElementById('image-profile').src = 'https://defuj.github.io/mosya.bootstrap/assets/images/user-default.png';\r\n }\r\n }\r\n\r\n const getAccount = () => {\r\n setLoading(true)\r\n const config = {\r\n headers: { Authorization: 'Bearer' + localStorage.getItem('token') }\r\n };\r\n\r\n axios.get('https://api-microsite.koperasi-astra.com/api/auth/profile',config) \r\n .then(response => {\r\n let user = response.data.data[0];\r\n setLoading(false)\r\n setUserCompany(user);\r\n // console.log('user',user);\r\n }).catch(error => {\r\n setUser([]);\r\n });\r\n }\r\n\r\n const setContentProgess = (status) => {\r\n\t\tsetProgress(status);\r\n\t\tdocument.getElementById('buttonSave').disabled = status\r\n\t}\r\n\r\n const onUpdate = () => {\r\n const config = {\r\n headers: { Authorization: 'Bearer' + localStorage.getItem('token') }\r\n };\r\n\r\n const inputDivision = division == undefined ? user_company.divisi : division\r\n const inputPosition = position == undefined ? user_company.bagian : position\r\n \r\n setContentProgess(true);\r\n const postForm = {\r\n divisi: inputDivision,\r\n bagian: inputPosition\r\n }\r\n // console.log('UpdateDataCompany',postForm);\r\n localStorage.setItem('UpdateDataCompany', JSON.stringify(postForm))\r\n axios.put('https://api-microsite.koperasi-astra.com/api/updatecompany',postForm,config)\r\n .then(response=> {\r\n setContentProgess(false);\r\n let result = response.data;\r\n if(result.message == 'success'){\r\n Swal.fire({\r\n icon: 'success',\r\n title: 'Berhasil',\r\n text: 'Data berhasil disimpan sebagai Draft',\r\n }).then(res => {\r\n if(res.value){\r\n navigate('/profile/edit_bank', { replace: true });\r\n }\r\n })\r\n }else{\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Gagal',\r\n text: result.message,\r\n })\r\n }\r\n })\r\n .catch(error=>{\r\n setContentProgess(false);\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Terjadi Kesalahan',\r\n text: 'Terjadi kesalahan - Hubungi Admin',\r\n })\r\n })\r\n \r\n }\r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-start align-items-center flex-row py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <Link to=\"/home/profile\" className=\"navbar-brand\" title=\"back\">\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <p className=\"mb-0 bodytext1 semibold color-black500 px-2 py-2\">Edit Kepegawaian</p>\r\n </div>\r\n </nav>\r\n\r\n <div className=\"align-items-start pt-0 flex-column mt-5\">\r\n <main role=\"main\" className=\"container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 mt-5\">\r\n {loading == true ? <Player\r\n src='https://assets4.lottiefiles.com/packages/lf20_ssmouzg5.json'\r\n className=\"player\"\r\n loop\r\n autoplay\r\n /> :\r\n <form encType=\"multipart/form-data\" className=\"container-form px-3 py-3 bg-white d-flex flex-column mb-3\">\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Nama Affco\r\n </label>\r\n <input type=\"text\" name=\"name\" id=\"dataName\" defaultValue={user_company.affco} onChange={e => setCompany(e.target.value)} style={{backgroundColor: \"silver\",color: \"black\"}} className=\"form-input form-data-booking bodytext2 mb-3\" disabled/>\r\n\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n NPK\r\n </label>\r\n <input type=\"tel\" pattern=\"[0-9]{3}-[0-9]{3}-[0-9]{4}\" name=\"phone\" id=\"dataPhone\" defaultValue={user_company.npk} onChange={e => setIdEmployee(e.target.value)} maxLength=\"15\" style={{backgroundColor: \"silver\",color: \"black\"}} className=\"form-input form-data-booking bodytext2 mb-3\" disabled required/>\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Divisi\r\n </label>\r\n <input type=\"Division\" name=\"Division\" id=\"dataNIK\" defaultValue={user_company.divisi} onChange={e => setDivision(e.target.value)} className=\"form-input form-data-booking bodytext2 mb-3\" required/>\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Bagian\r\n </label>\r\n <input type=\"text\" name=\"domicile_address\" id=\"dataDomicile\" defaultValue={user_company.bagian} onChange={e => setPosition(e.target.value)} className=\"form-input form-data-booking bodytext2 mb-3\" required/>\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Gol. Koperasi Astra\r\n </label>\r\n <input type=\"text\" name=\"domicile_address\" id=\"dataDomicile\" defaultValue={user_company.gol_astra} style={{backgroundColor: \"silver\",color: \"black\"}} onChange={e => setGrade(e.target.value)} className=\"form-input form-data-booking bodytext2 mb-3\" required/>\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Tanggal Karyawan Tetap\r\n </label>\r\n <input type=\"text\" name=\"domicile_address\" id=\"dataDomicile\" defaultValue={user_company.tgl_kartap} style={{backgroundColor: \"silver\",color: \"black\"}} onChange={e => setEmplStart(e.target.value)} className=\"form-input form-data-booking bodytext2 mb-3\" disabled required/>\r\n\r\n <button disabled={onProgress && 'disabled'} onClick={onUpdate} type=\"button\" id=\"buttonSave\" className=\"button-action-save text-white background-green500 bodytext1 text-center mt-5\">\r\n {onProgress ? <Spinner/> : 'Simpan Perubahan'}\r\n </button>\r\n </form>}\r\n </main>\r\n </div>\r\n \r\n\r\n <Footer/>\r\n\r\n </>\r\n )\r\n}\r\n\r\nexport default UpdateKepegawaian;","import React, {useState, useEffect} from \"react\";\r\nimport {\r\n Link,useNavigate\r\n} from \"react-router-dom\";\r\nimport { getAccount, safeString } from \"../helper/session\";\r\nimport Swal from \"sweetalert2\";\r\nimport Footer from \"../components/Footer\";\r\nimport axios from \"../helper/axios\";\r\nimport Spinner from \"../components/Spinner\";\r\n\r\nconst UpdatePassword = () => {\r\n const [user, setUser] = useState(getAccount);\r\n const [onProgress, setProgress] = useState(false);\r\n const [password, setPassword] = useState(\"\");\r\n const [passwordOld, setPasswordOld] = useState(\"\");\r\n const [confirmPassword, setConfirmPassword] = useState(\"\");\r\n const navigate = useNavigate();\r\n\r\n useEffect(() => {\r\n setUser(getAccount);\r\n }, [])\r\n\r\n const setContentProgess = (status) => {\r\n setProgress(status);\r\n document.getElementById('buttonSave').disabled = status\r\n }\r\n\r\n const onSave = () => {\r\n const config = {\r\n headers: { Authorization: 'Bearer' + localStorage.getItem('token') }\r\n };\r\n\r\n\r\n const inputPasswordOld = safeString(passwordOld);\r\n const inputPassword = safeString(password);\r\n const inputConfirmPassword = safeString(confirmPassword);\r\n\r\n if(inputPasswordOld === \"\" || inputPassword === \"\" || inputConfirmPassword === \"\"){\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Perhatian',\r\n text: 'Semua form harus diisi',\r\n confirmButtonText: 'Mengerti'\r\n })\r\n }else{\r\n if(password !== confirmPassword){\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Perhatian',\r\n text: 'Konfirmasi kata sandi tidak sama',\r\n confirmButtonText: 'Mengerti'\r\n })\r\n }else{\r\n setContentProgess(true);\r\n axios.postForm('https://api-microsite.koperasi-astra.com/api/auth/reset', {\r\n id: user.id,\r\n current_password: inputPasswordOld,\r\n new_password: inputPassword,\r\n new_confirm_password: inputConfirmPassword,\r\n isAlreadyReset: 1\r\n },config).then(response => {\r\n setContentProgess(false);\r\n let result = response.data;\r\n if(result.status = '200'){\r\n Swal.fire({\r\n icon: 'success',\r\n title: 'Berhasil',\r\n text: 'Kata sandi berhasil diperbarui',\r\n }).then(res => {\r\n if(res.value){\r\n navigate('/home/profile');\r\n }\r\n })\r\n }else{\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Gagal',\r\n text: result.message,\r\n confirmButtonText: 'Mengerti'\r\n })\r\n }\r\n })\r\n .catch(error=>{\r\n setContentProgess(false);\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Terjadi Kesalahan',\r\n text: 'Tidak dapat terhubung ke server',\r\n confirmButtonText: 'Mengerti'\r\n })\r\n })\r\n }\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-start align-items-center flex-row py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <Link to=\"/home/profile\" className=\"navbar-brand\" title=\"back\">\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <p className=\"mb-0 bodytext1 semibold color-black500 px-2 py-2\">Ubah Kata Sandi</p>\r\n </div>\r\n </nav>\r\n\r\n <div className=\"align-items-start pt-0 flex-column mt-5\">\r\n <main role=\"main\" className=\"container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 mt-5\">\r\n <div className=\"container-user d-flex justify-content-start flex-column w-100 px-3 py-4 mb-4\">\r\n <p className=\"headline5 color-black500 semibold p-0 mb-1\">\r\n Ubah Kata Sandi\r\n </p>\r\n <p className=\"bodytext2 color-black500 p-0 m-0 mb-3\">\r\n Ubah kata sandi anda dengan yang baru.\r\n </p>\r\n\r\n <div className=\"input-group-custom bg-white mt-3\">\r\n <i className=\"fi fi-rr-lock-alt color-black400\"></i>\r\n <input type=\"password\" onChange={e => setPasswordOld(e.target.value)} id=\"passwordOld\" className=\"form-input bodytext2\" placeholder=\"Masukan Kata Sandi Lama\" required/>\r\n </div>\r\n\r\n <div className=\"input-group-custom bg-white mt-3\">\r\n <i className=\"fi fi-rr-lock color-black400\"></i>\r\n <input type=\"password\" onChange={e => setPassword(e.target.value)} id=\"password\" className=\"form-input bodytext2\" placeholder=\"Masukan Kata Sandi Baru\" required/>\r\n </div>\r\n\r\n <div className=\"input-group-custom bg-white mt-3\">\r\n <i className=\"fi fi-rr-lock color-black400\"></i>\r\n <input type=\"password\" onChange={e => setConfirmPassword(e.target.value)} id=\"passwordConfirm\" className=\"form-input bodytext2\" placeholder=\"Konfirmasi Kata Sandi Baru\" required/>\r\n </div>\r\n\r\n <button onClick={onSave} id=\"buttonSave\" className=\"button-action-save text-white background-green500 bodytext1 text-center mt-5\">\r\n {onProgress ? <Spinner /> : \"Simpan Perubahan\"}\r\n </button>\r\n \r\n\r\n </div>\r\n </main>\r\n </div>\r\n \r\n\r\n <Footer/>\r\n\r\n </>\r\n )\r\n}\r\n\r\nexport default UpdatePassword;","import React from \"react\";\r\nconst Loading = React.memo(() =>{\r\n return(\r\n <lottie-player \r\n src=\"https://lottie.host/c6adff8b-27bc-48e3-a625-5bcc7331acf1/2TLwoxtwof.json\" \r\n background=\"transparent\" \r\n speed=\"1\" \r\n style={{width: '150px', height: '300px'}}\r\n class=\"ml-auto mr-auto my-4 loading\" loop autoplay></lottie-player>\r\n )\r\n})\r\n\r\nexport default Loading;","import React from \"react\";\r\n\r\nconst EmptyState = React.memo((props) => {\r\n let {title, desc, wrapHeight, imageWidth} = props;\r\n let titleEmpty = title ? title : 'Tidak menemukan produk';\r\n let descEmpty = desc ? desc : 'Silahkan coba lagi nanti';\r\n let wrapHeightEmpty = wrapHeight ? wrapHeight : false;\r\n let imageWidthEmpty = imageWidth ? imageWidth : '150px';\r\n return (\r\n <div className={wrapHeightEmpty ? 'container-empty d-flex justify-content-center align-items-center flex-column flex-fill py-5' : 'container-empty d-flex justify-content-center align-items-center flex-column flex-fill'} height=\"1024\">\r\n <img src={require('../assets/images/car_not_found.png')} alt=\"empty\" className=\"img-empty h-100 mx-5 my-4\" width={imageWidthEmpty}/>\r\n <div className=\"empty-text text-center\">\r\n <p className=\"headline6 color-black500 semibold m-0 px-3\" id=\"title-not-found\" dangerouslySetInnerHTML={{__html:titleEmpty}}></p>\r\n <p className=\"bodytext2 color-black300 semibold m-0 px-3\" id=\"desc-not-found\">{descEmpty}</p>\r\n </div>\r\n </div>\r\n );\r\n})\r\nexport default EmptyState;","import React, {useState, useEffect} from \"react\";\r\nimport axios, {carlist} from '../helper/axios';\r\nimport Loading from '../components/Loading';\r\nimport EmptyState from '../components/EmptyState';\r\nimport { Link, useNavigate, useParams } from \"react-router-dom\";\r\nimport { getListCar, safeString } from \"../helper/session\";\r\nimport Footer from \"../components/Footer\";\r\n\r\nconst Products = () => {\r\n let { keyword } = useParams();\r\n const [cars, setCars] = useState(getListCar());\r\n const [keywords, setKeywords] = useState(keyword);\r\n const [loading, setLoading] = useState(true);\r\n \r\n const [contentSort, setContentSort] = useState('all'); // all, new, price\r\n const [contentOrder, setContentOrder] = useState('desc'); // asc, desc\r\n const [filterColor, setFilterColor] = useState('Semua');\r\n const [filterBrand, setFilterBrand] = useState('Semua');\r\n const [filterFuel, setFilterFuel] = useState('Semua');\r\n const [filterStartPrice, setFilterStartPrice] = useState('');\r\n const [filterEndPrice, setFilterEndPrice] = useState('');\r\n const [filterStartYear, setFilterStartYear] = useState('');\r\n const [filterEndYear, setFilterEndYear] = useState('');\r\n const [getProdukPinjaman, setProdukPinjaman] = useState([]);\r\n\r\n const navigate = useNavigate();\r\n\r\n const sortCars = (cars) => {\r\n let res = cars;\r\n if(keywords !== undefined && keywords !== ''){\r\n res = cars.filter((car) => `${car.model.toString().toLowerCase()} ${car.brand.toString().toLowerCase()} ${car.fuel.toString().toLowerCase()} ${car.color.toString().toLowerCase()} ${car.description.toString().toLowerCase()}`.toString().includes(keywords.toString().toLowerCase()));\r\n }\r\n\r\n if(contentSort === 'all'){\r\n setCars(res);\r\n }else if(contentSort === 'new'){\r\n res = res.sort((a, b) => (a, b) => parseFloat(b.id) - parseFloat(a.id));\r\n setCars(res);\r\n }else if(contentSort === 'price'){\r\n if(contentOrder === 'asc'){\r\n res = res.sort((a, b) => parseFloat(a.price.replace('Rp. ','')) - parseFloat(b.price.replace('Rp. ','')));\r\n }else if(contentOrder === 'desc'){\r\n res = res.sort((a, b) => parseFloat(b.price.replace('Rp. ','')) - parseFloat(a.price.replace('Rp. ','')));\r\n }\r\n setCars(res);\r\n }\r\n }\r\n\r\n const changeContentOrder = (sort) => {\r\n setContentSort(sort)\r\n setContentOrder(contentOrder === 'asc' ? 'desc' : 'asc')\r\n sortCars(cars);\r\n }\r\n\r\n const changeContentSort = (sort) => {\r\n setContentSort(sort);\r\n sortCars(cars);\r\n }\r\n \r\n const getPinjaman = () => {\r\n setLoading(true);\r\n const config = {\r\n headers: { Authorization: localStorage.getItem('token') }\r\n };\r\n \r\n setLoading(true) \r\n \r\n axios.get('https://commerce-kai-loan-core-opusb-prod.azurewebsites.net/loan/product',config) \r\n .then(response => {\r\n let getProdukPinjaman = response.data.data;\r\n setLoading(false) \r\n setProdukPinjaman(getProdukPinjaman);\r\n // console.log('result',getProdukPinjaman);\r\n }).catch(error => {\r\n\r\n });\r\n\r\n // axios.get(carlist)\r\n // .then(response => {\r\n // let result = response.data;\r\n // if(result.status){\r\n // let res = result.data;\r\n \r\n // if(filterColor !== 'Semua' && filterColor !== ''){\r\n // res = res.filter((item) => item.color === filterColor)\r\n // }\r\n\r\n // if(filterFuel !== 'Semua' && filterFuel !== ''){\r\n // res = res.filter((item) => item.fuel === filterFuel)\r\n // }\r\n\r\n // if(filterBrand !== 'Semua' && filterBrand !== ''){\r\n // res = res.filter((item) => item.brand === filterBrand)\r\n // }\r\n\r\n // if(filterStartPrice !== ''){\r\n // if(filterEndPrice !== ''){\r\n // res = res.filter((item) => parseInt(item.price.replace('Rp. ','')) >= parseInt(filterStartPrice) && parseInt(item.price.replace('Rp. ','')) <= parseInt(filterEndPrice))\r\n // }else{\r\n // res = res.filter((item) => parseInt(item.price.replace('Rp. ','')) >= parseInt(filterStartPrice))\r\n // }\r\n // }else{\r\n // if(filterEndPrice !== ''){\r\n // res = res.filter((item) => parseInt(item.price.replace('Rp. ','')) <= parseInt(filterEndPrice))\r\n // }\r\n // }\r\n\r\n // if(filterStartYear !== ''){\r\n // if(filterEndYear !== ''){\r\n // res = res.filter((item) => parseInt(item.year) >= parseInt(filterStartYear) && parseInt(item.year) <= parseInt(filterEndYear))\r\n // }else{\r\n // res = res.filter((item) => parseInt(item.year) >= parseInt(filterStartYear))\r\n // }\r\n // }else{\r\n // if(filterEndYear !== ''){\r\n // res = res.filter((item) => parseInt(item.year) <= parseInt(filterEndYear))\r\n // }\r\n // }\r\n // sortCars(res);\r\n // }else{\r\n // setCars([]);\r\n // }\r\n // setLoading(false);\r\n // }).catch(error => {\r\n // setCars([]);\r\n // setLoading(false);\r\n // });\r\n }\r\n\r\n const CarContent = React.memo(({data, index}) => {\r\n return (\r\n <Link className=\"product-items w-50 flex-column lazy\" to={`/product/${data.id_product}`} key={index}>\r\n <p className=\"bodytext1 color-black800 semibold m-0 px-2\">{data.loan_type_name}</p>\r\n </Link>\r\n )\r\n });\r\n \r\n const onSearch = (e) => { \r\n if(keywords === \"\"){\r\n navigate('/products', {replace: true});\r\n }else{\r\n navigate('/products/'+keywords, {replace: true});\r\n }\r\n e.preventDefault();\r\n getPinjaman();\r\n }\r\n\r\n const onWritingKeyword = (keyword) => {\r\n setKeywords(keyword);\r\n\r\n if(keyword === \"\"){\r\n navigate('/products', {replace: true});\r\n getPinjaman();\r\n }\r\n }\r\n\r\n const resetFilter = () => {\r\n setFilterColor('Semua');\r\n setFilterBrand('Semua');\r\n setFilterFuel('Semua');\r\n setFilterStartPrice('');\r\n setFilterEndPrice('');\r\n setFilterStartYear('');\r\n setFilterEndYear('');\r\n getPinjaman();\r\n }\r\n\r\n useEffect(() => {\r\n document.title = \"Pinjaman Tersedia\";\r\n setKeywords(keyword === undefined ? '' : keyword);\r\n getPinjaman();\r\n }, []);\r\n \r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-between align-items-center flex-column py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <form onSubmit={onSearch} action=\"\" id=\"form-search\" className=\"container-search form-search w-100 d-flex justify-content-between align-items-center\" style={{height: '48px'}}>\r\n <Link to=\"\" className=\"navbar-brand\" title=\"back\" onClick={() => navigate(-1)}>\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <div className=\"input-group-search background-black50 h-100\">\r\n <i className=\"fi fi-br-search color-black200 mr-2 headline5\"></i>\r\n <input type=\"text\" defaultValue={keywords} onChange={e => onWritingKeyword(safeString(e.target.value))} className=\"bodytext1\" id=\"input-search\" placeholder=\"Cari pinjaman ...\"/>\r\n </div>\r\n {/* <button type=\"button\" id=\"toggleFilter\" data-toggle=\"modal\" data-target=\"#dialogFilter\" className=\"h-100 d-flex align-items-center justify-content-center button-search ml-3 menu-filter\" style={{width: '48px'}}>\r\n {filterColor === 'Semua' && filterBrand === 'Semua' && filterFuel === 'Semua' && filterStartPrice === '' && filterEndPrice === '' && filterStartYear === '' && filterEndYear === '' ? <i className=\"fi fi-rr-filter text-white headline5\"></i> : <i className=\"fi fi-sr-filter text-white headline5\"></i>}\r\n </button> */}\r\n </form>\r\n\r\n {/* <div className=\"container-menu-tab w-100 d-flex justify-content-between mt-2\">\r\n <button onClick={() => changeContentSort('all')} className={contentSort === 'all' ? 'menu-tab-item bodytext2 flex-fill active' : 'menu-tab-item bodytext2 flex-fill'}>Semua</button>\r\n <button onClick={() => changeContentSort('new')} className={contentSort === 'new' ? 'menu-tab-item bodytext2 flex-fill active' : 'menu-tab-item bodytext2 flex-fill'}>Terbaru</button>\r\n <button onClick={() => changeContentOrder('price') } id=\"menu-price\" className={contentSort === 'price' ? 'menu-tab-item bodytext2 flex-fill active' : 'menu-tab-item bodytext2 flex-fill'}>\r\n Harga \r\n {(contentSort === 'price' && contentOrder === 'asc') && <i className=\"fi fi-sr-arrow-up\"></i>}\r\n {(contentSort === 'price' && contentOrder === 'desc') && <i className=\"fi fi-sr-arrow-down\"></i>}\r\n </button>\r\n </div> */}\r\n </div>\r\n </nav>\r\n\r\n <main role=\"main\" className=\"container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 main-content\">\r\n {loading && getProdukPinjaman.length === 0 && <Loading />}\r\n {!loading && getProdukPinjaman.length === 0 && <EmptyState title={keywords !== undefined && keywords !== '' && `Pencarian <span class=\"color-green500 semibold\">\"${keyword}\"</span> Tidak Ditemukan`} desc={keywords !== undefined && keywords !== '' && `Silahkan gunakan kata kunci lain`}/>}\r\n\r\n <div className=\"container-products w-100 mb-2\">\r\n <div className=\"container-product d-flex justify-content-start d-flex w-100 flex-wrap px-2 py-1\">\r\n {getProdukPinjaman.length > 0 && keyword !== undefined && (\r\n <p className=\"mb-0 bodytext1 color-black500 text-search-result semibold px-3 w-100\">\r\n Menemukan <span className=\"color-green500\">{getProdukPinjaman.length}</span> Pinjaman dengan kata kunci <span className=\"color-green500\">{keyword}</span>\r\n </p>\r\n )}\r\n\r\n {getProdukPinjaman.length > 0 && keyword === undefined && (\r\n <p className=\"mb-0 bodytext1 color-black500 text-search-result semibold px-3 w-100\">\r\n <span className=\"color-green500 semibold\">{getProdukPinjaman.length}</span> pinjaman ditemukan\r\n </p>\r\n )}\r\n\r\n {getProdukPinjaman.length > 0 && getProdukPinjaman.map((data, index) => <CarContent data={data} index={index} key={index}/>)}\r\n </div>\r\n </div>\r\n </main>\r\n <Footer/>\r\n\r\n <form action=\"\" method=\"get\" id=\"form-filter\">\r\n <div className=\"modal fade\" id=\"dialogFilter\" data-backdrop=\"static\" data-keyboard=\"false\" tabIndex=\"-1\" aria-labelledby=\"staticBackdropLabel\" aria-hidden=\"true\">\r\n <div className=\"modal-dialog modal-dialog-centered modal-dialog-scrollable col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12\">\r\n <div className=\"modal-content modal-filter-content\">\r\n <div className=\"modal-header\">\r\n <h5 className=\"modal-title headline6\" id=\"staticBackdropLabel\">Filter</h5>\r\n <button type=\"button\" className=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n <i className=\"fi fi-br-cross headline6\"></i>\r\n </button>\r\n </div>\r\n <div className=\"modal-body\">\r\n {/* <p className=\"textbody1 semibold mb-2\">Warna</p>\r\n <div className=\"container-select-color d-flex align-content-start flex-wrap flex-wrap w-100 my-2\">\r\n <label className=\"select-item select-color-item active\">\r\n <input type=\"checkbox\" name=\"color\" className=\"input-select-color\" value=\"Semua\" hidden defaultChecked/>\r\n Semua\r\n </label>\r\n <label className=\"select-item select-color-item\">\r\n <input type=\"checkbox\" name=\"color\" className=\"input-select-color\" value=\"Hitam\" hidden/>\r\n Hitam\r\n </label>\r\n <label className=\"select-item select-color-item\">\r\n <input type=\"checkbox\" name=\"color\" className=\"input-select-color\" value=\"Silver\" hidden/>\r\n Silver\r\n </label>\r\n <label className=\"select-item select-color-item\">\r\n <input type=\"checkbox\" name=\"color\" className=\"input-select-color\" value=\"Putih\" hidden/>\r\n Putih\r\n </label>\r\n <label className=\"select-item select-color-item\">\r\n <input type=\"checkbox\" name=\"color\" className=\"input-select-color\" value=\"Biru\" hidden/>\r\n Biru\r\n </label>\r\n <label className=\"select-item select-color-item\">\r\n <input type=\"checkbox\" name=\"color\" className=\"input-select-color\" value=\"Jingga\" hidden/>\r\n Jingga\r\n </label>\r\n <label className=\"select-item select-color-item\">\r\n <input type=\"checkbox\" name=\"color\" className=\"input-select-color\" value=\"Merah\" hidden/>\r\n Merah\r\n </label>\r\n <label className=\"select-item select-color-item\">\r\n <input type=\"checkbox\" name=\"color\" className=\"input-select-color\" value=\"Gray\" hidden/>\r\n Gray\r\n </label>\r\n </div> */}\r\n <p className=\"textbody1 semibold mb-2\">Bahan Bakar</p>\r\n <div className=\"container-select-fuel d-flex align-content-start flex-wrap flex-wrap w-100 my-2\">\r\n <label onClick={() => setFilterFuel('Semua')} className={filterFuel === 'Semua' ? 'select-item select-fuel-item active' : 'select-item select-fuel-item'}>\r\n <input type=\"checkbox\" name=\"fuel\" className=\"input-select-fuel\" value=\"Semua\" hidden/>\r\n Semua\r\n </label>\r\n <label onClick={() => setFilterFuel('Bensin')} className={filterFuel === 'Bensin' ? 'select-item select-fuel-item active' : 'select-item select-fuel-item'}>\r\n <input type=\"checkbox\" name=\"fuel\" className=\"input-select-fuel\" value=\"Bensin\" hidden/>\r\n Bensin\r\n </label>\r\n <label onClick={() => setFilterFuel('Solar')} className={filterFuel === 'Solar' ? 'select-item select-fuel-item active' : 'select-item select-fuel-item'}>\r\n <input type=\"checkbox\" name=\"fuel\" className=\"input-select-fuel\" value=\"Solar\" hidden/>\r\n Solar\r\n </label>\r\n <label onClick={() => setFilterFuel('Listrik')} className={filterFuel === 'Listrik' ? 'select-item select-fuel-item active' : 'select-item select-fuel-item'}>\r\n <input type=\"checkbox\" name=\"fuel\" className=\"input-select-fuel\" value=\"Listrik\" hidden/>\r\n Listrik\r\n </label>\r\n <label onClick={() => setFilterFuel('Hybrid')} className={filterFuel === 'Hybrid' ? 'select-item select-fuel-item active' : 'select-item select-fuel-item'}>\r\n <input type=\"checkbox\" name=\"fuel\" className=\"input-select-fuel\" value=\"Hybrid\" hidden/>\r\n Hybrid\r\n </label>\r\n </div>\r\n <p className=\"textbody1 semibold mb-2\">Tahun</p>\r\n <div className=\"container-input-year d-flex lex-column justify-content-between align-items-center mb-2\">\r\n <div className=\"input-group-search form-search background-black50 h-50 py-0 px-3\">\r\n <input type=\"text\" onChange={e => setFilterStartYear(e.target.value)} pattern=\"\\d*\" maxLength=\"4\" name=\"tahun-awal\" id=\"tahun-awal\" className=\"bodytext1 text-center\" placeholder=\"Tahun Awal\"/>\r\n </div>\r\n <p className=\"bodytext1 color-black500 semibold px-2 pt-3\">sd</p>\r\n <div className=\"input-group-search form-search background-black50 h-50 py-0 px-3\">\r\n <input type=\"text\" onChange={e => setFilterEndYear(e.target.value)} pattern=\"\\d*\" maxLength=\"4\" name=\"tahun-akhir\" id=\"tahun-akhir\" className=\"bodytext1 text-center\" placeholder=\"Tahun Akhir\"/>\r\n </div>\r\n </div>\r\n \r\n <p className=\"textbody1 semibold mb-2\">Batas Harga (Rp)</p>\r\n <div className=\"container-input-year d-flex lex-column justify-content-between align-items-center mb-2\">\r\n <div className=\"input-group-search form-search background-black50 h-50 py-0 px-3\">\r\n <input type=\"number\" onChange={e => setFilterStartPrice(e.target.value)} name=\"harga-awal\" id=\"harga-awal\" className=\"bodytext1 text-center\" placeholder=\"Harga Awal\"/>\r\n </div>\r\n <p className=\"bodytext1 color-black500 semibold px-2 pt-3\">sd</p>\r\n <div className=\"input-group-search form-search background-black50 h-50 py-0 px-3\">\r\n <input type=\"number\" onChange={e => setFilterEndPrice(e.target.value)} name=\"harga-akhir\" id=\"harga-akhir\" className=\"bodytext1 text-center\" placeholder=\"Harga Akhir\"/>\r\n </div>\r\n </div>\r\n </div>\r\n <div className=\"modal-footer justify-content-around\">\r\n <button onClick={resetFilter} type=\"reset\" className=\"btn flex-fill button-action-filter button-action-filter-reset bg-white bodytext2 py-2 color-green500\" data-dismiss=\"modal\" id=\"buttonReset\">Atur ulang</button>\r\n <button onClick={getPinjaman} type=\"button\" className=\"btn flex-fill button-action-filter background-green500 bodytext2 text-white py-2\" data-dismiss=\"modal\" id=\"buttonFilter\">Tampilkan</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </>\r\n )\r\n}\r\n\r\nexport default Products;","import React, { useState, useEffect } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport axios from 'axios';\r\nimport Skeleton from 'react-loading-skeleton';\r\nimport 'react-loading-skeleton/dist/skeleton.css';\r\nimport { Search, User, Plus } from 'lucide-react';\r\n\r\nconst API = {\r\n auth: \"https://lendtick-user-prod.koperasi-astra.com\",\r\n notif: \"https://kai-notif.koperasi-astra.com\",\r\n hostLoan: \"https://commerce-kai-loan-opusb-prod.azurewebsites.net\",\r\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\r\n hostLoanCore: \"https://commerce-kai-loan-core-opusb-prod.azurewebsites.net\",\r\n finance: \"https://finance-api.koperasi-astra.com\",\r\n content: \"https://lendtick-content.koperasi-astra.com\",\r\n contentOld: \"https://lendtick-content.koperasi-astra.com\",\r\n catalog: \"https://lendtick-catalog.koperasi-astra.com\",\r\n hotel: \"https://commerce-kai-order-hotel.azurewebsites.net\",\r\n};\r\n\r\nconst Home = () => {\r\n const [profile, setProfile] = useState({});\r\n const [banners, setBanners] = useState([]);\r\n const [loading, setLoading] = useState(true);\r\n const [currentBanner, setCurrentBanner] = useState(0);\r\n\r\n useEffect(() => {\r\n document.title = 'Beranda';\r\n fetchUserInfo();\r\n fetchBanners();\r\n }, []);\r\n\r\n const fetchUserInfo = async () => {\r\n try {\r\n const response = await axios.get(`${API.auth}/profile/get`, {\r\n headers: { Authorization: localStorage.getItem('token') }\r\n });\r\n setProfile(response.data.data);\r\n setLoading(false);\r\n } catch (error) {\r\n console.error('Error fetching user info:', error);\r\n setLoading(false);\r\n }\r\n };\r\n\r\n const fetchBanners = async () => {\r\n try {\r\n const response = await axios.get(`${API.content}/content/promo`);\r\n if (response.data && response.data.data && Array.isArray(response.data.data)) {\r\n setBanners(response.data.data);\r\n } else {\r\n setBanners([]);\r\n }\r\n } catch (error) {\r\n console.error('Error fetching banners:', error);\r\n setBanners([]);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (banners.length === 0) return;\r\n const timer = setInterval(() => {\r\n setCurrentBanner((prev) => (prev + 1) % banners.length);\r\n }, 3000);\r\n return () => clearInterval(timer);\r\n }, [banners.length]);\r\n\r\n const goToSlide = (index) => {\r\n if (banners.length === 0) return;\r\n setCurrentBanner(index);\r\n };\r\n\r\n return (\r\n <div className=\"w-100 mb-4 bg-white p-3 flex-row justify-content-center col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto\">\r\n <style>\r\n {`\r\n /* Global Styles */\r\n .navbar {\r\n background: white;\r\n padding: 12px 20px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n .logo {\r\n height: 32px;\r\n width: auto;\r\n }\r\n\r\n .user-greeting {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 14px;\r\n color: #333;\r\n }\r\n\r\n .user-name {\r\n font-weight: 500;\r\n }\r\n\r\n /* Previous styles remain the same */\r\n .app {\r\n max-width: 600px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n background-color: #f5f5f5;\r\n }\r\n\r\n /* Banner Section */\r\n .banner-section {\r\n margin-bottom: 24px;\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n height: 200px;\r\n }\r\n\r\n .banner-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n }\r\n\r\n .banner-slide {\r\n display: flex;\r\n transition: transform 0.5s ease;\r\n height: 100%;\r\n }\r\n\r\n .banner-image {\r\n flex-shrink: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n .dots {\r\n position: absolute;\r\n bottom: 16px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 8px;\r\n z-index: 2;\r\n }\r\n\r\n .dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.6);\r\n border: none;\r\n padding: 0;\r\n cursor: pointer;\r\n transition: background-color 0.2s ease;\r\n }\r\n\r\n .dot.active {\r\n background: white;\r\n }\r\n\r\n /* Welcome Card */\r\n .welcome-card {\r\n background: #4285F4;\r\n border-radius: 16px;\r\n padding: 24px;\r\n color: white;\r\n margin-bottom: 24px;\r\n min-height: 200px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .welcome-text {\r\n font-size: 16px;\r\n margin: 0;\r\n margin-bottom: 4px;\r\n opacity: 0.9;\r\n }\r\n\r\n .username {\r\n font-size: 24px;\r\n font-weight: bold;\r\n margin: 0;\r\n line-height: 1.3;\r\n max-width: 80%;\r\n }\r\n\r\n /* Menu Grid */\r\n .menu-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 16px;\r\n padding: 0;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .menu-item {\r\n background: white;\r\n border-radius: 12px;\r\n padding: 20px;\r\n text-decoration: none;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 12px;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n }\r\n\r\n .menu-item:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .menu-icon {\r\n width: 48px;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 4px;\r\n }\r\n\r\n .menu-icon i {\r\n font-size: 24px;\r\n }\r\n\r\n .menu-item .fi-rr-wallet {\r\n color: #FFA726;\r\n }\r\n\r\n .menu-item .fi-rr-document {\r\n color: #66BB6A;\r\n }\r\n\r\n .menu-label {\r\n font-size: 14px;\r\n color: #333;\r\n margin: 0;\r\n font-weight: 500;\r\n }\r\n\r\n /* Loading State */\r\n .loading {\r\n opacity: 0.7;\r\n }\r\n\r\n /* Responsive Adjustments */\r\n @media (max-width: 480px) {\r\n .app {\r\n padding: 16px;\r\n }\r\n\r\n .welcome-card {\r\n padding: 20px;\r\n min-height: 180px;\r\n }\r\n\r\n .username {\r\n font-size: 22px;\r\n }\r\n\r\n .menu-grid {\r\n gap: 12px;\r\n }\r\n\r\n .menu-item {\r\n padding: 16px;\r\n }\r\n\r\n .banner-section {\r\n height: 160px;\r\n }\r\n }\r\n `}\r\n </style>\r\n\r\n <nav className=\"navbar\">\r\n <img \r\n src=\"https://adm-simpanan.koperasi-astra.com/storage/config/M3nj1nCDoaIIpPrrxWUhiThJuFYTXF6EivrsKcgW.png\" \r\n alt=\"Logo\" \r\n className=\"logo\"\r\n />\r\n <div className=\"user-greeting\">\r\n Hi, <span className=\"user-name\">{profile.name || 'User'}</span>\r\n </div>\r\n </nav>\r\n\r\n <div className=\"app\">\r\n <div className=\"banner-section\">\r\n {loading ? (\r\n <Skeleton height={200} style={{ borderRadius: '16px' }} />\r\n ) : (\r\n <div className=\"banner-container\">\r\n <div \r\n className=\"banner-slide\"\r\n style={{\r\n transform: `translateX(-${currentBanner * 100}%)`\r\n }}\r\n >\r\n {banners.map((banner) => (\r\n <img\r\n key={banner.id_content}\r\n src={banner.image_path}\r\n alt={banner.title}\r\n className=\"banner-image\"\r\n />\r\n ))}\r\n </div>\r\n <div className=\"dots\">\r\n {banners.map((_, index) => (\r\n <button\r\n key={index}\r\n className={`dot ${index === currentBanner ? 'active' : ''}`}\r\n onClick={() => goToSlide(index)}\r\n />\r\n ))}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n <div className=\"menu-grid\">\r\n <Link to=\"/pinjaman\" className=\"menu-item\">\r\n <div className=\"menu-icon\">\r\n <i className=\"fi fi-rr-wallet\"></i>\r\n </div>\r\n <span className=\"menu-label\">Pinjaman</span>\r\n </Link>\r\n <Link to=\"/home/history\" className=\"menu-item\">\r\n <div className=\"menu-icon\">\r\n <i className=\"fi fi-rr-document\"></i>\r\n </div>\r\n <span className=\"menu-label\">Riwayat Pinjaman Saya</span>\r\n </Link>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Home;","import React, {useEffect, useState} from \"react\";\r\nimport { Link} from \"react-router-dom\";\r\nimport '../assets/styles/home.css';\r\nimport Loading from '../components/Loading';\r\nimport axios, {historylist} from '../helper/axios';\r\nimport { getAccount, getHistories, setHistories} from '../helper/session';\r\nimport EmptyState from \"../components/EmptyState\";\r\n\r\nconst Catalog = React.memo(() => {\r\n const [loading, setLoading] = useState(false);\r\n const [history, setHistory] = useState(getHistories());\r\n const [account, setAccount] = useState(getAccount());\r\n const [loan, setLoan] = useState([]);\r\n\r\n const getHistory = async () => {\r\n const config = {\r\n headers: { Authorization: localStorage.getItem('token') }\r\n };\r\n\r\n axios.get('https://commerce-kai-loan-core-opusb-prod.azurewebsites.net/loan/open',config)\r\n .then(response => {\r\n let loan = response.data.data;\r\n\r\n if(loan.length > 0){\r\n setLoan(loan);\r\n }else{\r\n setLoan([]);\r\n }\r\n // console.log('loan',loan);\r\n setLoading(false);\r\n \r\n }).catch(error => {\r\n setLoan([]);\r\n setLoading(false);\r\n });\r\n }\r\n\r\n const HistoryContent = React.memo(({data}) => {\r\n return(\r\n <div className=\"d-flex flex-column history-item mb-3 text-decoration-none\" key={data.loan_number}>\r\n <div className=\" d-flex flex-row justify-content-center align-items-center\">\r\n <div className=\"d-flex flex-column flex-fill\">\r\n <p className=\"semibold bodytext2 color-black500 mb-0\">\r\n Nomor Pinjaman {data.loan_number}\r\n </p>\r\n </div>\r\n <p className={(data.status === 'Belum Bayar' || data.status === 'Batal' || data.status === null) ? 'payment-status-1 semibold caption mb-0' : 'payment-status-2 semibold caption mb-0'}>\r\n Angsuran Ke {data.paid_term}\r\n </p>\r\n </div>\r\n\r\n <div className=\"d-flex flex-row align-items-center mt-2\">\r\n <div className=\"d-flex flex-fill flex-column pl-3\">\r\n <p className=\"caption semibold color-green500 mb-0\">Sisa Angsuran : Rp. {data.unpaid_installment.toFixed(1).replace(/\\d(?=(\\d{3})+\\.)/g, '$&,')}</p>\r\n \r\n <p className=\"caption semibold color-green500 mb-0\">Angsuran Per Bulan : Rp. {data.installments.toFixed(1).replace(/\\d(?=(\\d{3})+\\.)/g, '$&,')}</p>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n });\r\n\r\n useEffect(() => {\r\n document.title = \"Promo\";\r\n setHistory(getHistories());\r\n setAccount(getAccount());\r\n getHistory();\r\n setLoading(true);\r\n }, []);\r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-start align-items-center flex-row py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <p className=\"navbar-brand mb-0 bodytext1 semibold color-black500 px-1 py-2\" title=\"\">\r\n Promo\r\n </p>\r\n </div>\r\n </nav>\r\n\r\n <main role=\"main\" className=\"container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 mt-5 pt-4\" style={{minHeight: '300px'}}>\r\n Segera Hadir ...\r\n </main>\r\n </>\r\n )\r\n})\r\n\r\nexport default Catalog;","import React, { useEffect, useState, useCallback } from \"react\";\r\nimport { useNavigate } from \"react-router-dom\";\r\nimport axios from '../helper/axios';\r\nimport { Button, Spin, Empty } from 'antd';\r\nimport { ArrowLeftOutlined, RightOutlined } from '@ant-design/icons';\r\nimport accounting from 'accounting';\r\n\r\nconst API = {\r\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\r\n};\r\n\r\nconst CreditNewHistoryService = {\r\n STATUS_DRAFT: 'MLTSTS00',\r\n STATUS_REQUESTED: 'MLTSTS01',\r\n STATUS_APPROVED_HR: 'MLTSTS03',\r\n STATUS_APPROVED_MEMBER: 'MLTSTS07',\r\n STATUS_APPROVED_BY_KAI: 'MLTSTS13',\r\n STATUS_ACTIVE: 'MLTSTS14',\r\n STATUS_CANCEL_BY_USER: 'MLTSTS15',\r\n STATUS_CANCEL_BY_SYSTEM: 'MLTSTS16',\r\n STATUS_CANCEL_BY_KAI: 'MLTSTS17',\r\n STATUS_LOAN_TEXT: {\r\n 'MLTSTS00': 'Drafted',\r\n 'MLTSTS01': 'Menunggu Persetujuan HRD',\r\n 'MLTSTS03': 'Menungggu Persetujuan Koperasi Astra',\r\n 'MLTSTS07': 'Menunggu Pencairan',\r\n 'MLTSTS13': 'Menunggu Konfirmasi Anggota',\r\n 'MLTSTS14': 'Aktif',\r\n 'AC': 'Aktif',\r\n 'MLTSTS15': 'Batal/ditolak',\r\n 'MLTSTS16': 'Batal/ditolak',\r\n 'MLTSTS17': 'Batal/ditolak',\r\n },\r\n};\r\n\r\nconst STATUS_LOAN_TEXT = {\r\n MLTSTS00: {\r\n text: 'Drafted',\r\n color: '#135188',\r\n bgColor: '#e6f4ff'\r\n },\r\n MLTSTS01: {\r\n text: 'Menunggu Persetujuan HRD',\r\n color: '#135188',\r\n bgColor: '#e6f4ff'\r\n },\r\n MLTSTS03: {\r\n text: 'Menunggu Persetujuan Koperasi Astra',\r\n color: '#52c41a',\r\n bgColor: '#f6ffed'\r\n },\r\n MLTSTS07: {\r\n text: 'Menunggu Pencairan',\r\n color: '#52c41a',\r\n bgColor: '#f6ffed'\r\n },\r\n MLTSTS13: {\r\n text: 'Menunggu Konfirmasi Anggota',\r\n color: '#faad14',\r\n bgColor: '#fff7e6'\r\n },\r\n MLTSTS14: {\r\n text: 'Aktif',\r\n color: '#52c41a',\r\n bgColor: '#f6ffed'\r\n },\r\n AC: {\r\n text: 'Aktif',\r\n color: '#52c41a',\r\n bgColor: '#f6ffed'\r\n },\r\n MLTSTS15: {\r\n text: 'Batal/ditolak',\r\n color: '#ff4d4f',\r\n bgColor: '#fff1f0'\r\n },\r\n MLTSTS16: {\r\n text: 'Batal/ditolak',\r\n color: '#ff4d4f',\r\n bgColor: '#fff1f0'\r\n },\r\n MLTSTS17: {\r\n text: 'Batal/ditolak',\r\n color: '#ff4d4f',\r\n bgColor: '#fff1f0'\r\n }\r\n};\r\n\r\nconst History = () => {\r\n const [state, setState] = useState({\r\n loading: true,\r\n loans: [],\r\n idKoperasi: '',\r\n arrError: [],\r\n isRefresh: false,\r\n });\r\n\r\n const navigate = useNavigate();\r\n\r\n const getProfile = useCallback(async () => {\r\n try {\r\n const config = {\r\n headers: { Authorization: localStorage.getItem('token') }\r\n };\r\n const response = await axios.get('https://lendtick-user-prod.koperasi-astra.com/profile/get', config);\r\n setState(prevState => ({ ...prevState, idKoperasi: response.data.data.id_koperasi }));\r\n } catch (error) {\r\n console.error('Error fetching profile:', error);\r\n setState(prevState => ({ ...prevState, arrError: [...prevState.arrError, 'Error fetching profile'] }));\r\n }\r\n }, []);\r\n\r\n const getHistory = useCallback(async () => {\r\n try {\r\n const config = {\r\n headers: { Authorization: localStorage.getItem('token') }\r\n };\r\n const response = await axios.get(`${API.hostLoanNew}/loan-new?page=1&size=100&id_koperasi=${state.idKoperasi}`, config);\r\n setState(prevState => ({ \r\n ...prevState, \r\n loans: response.data.data.items || [],\r\n loading: false,\r\n isRefresh: false\r\n }));\r\n } catch (error) {\r\n console.error('Error fetching loan history:', error);\r\n setState(prevState => ({ \r\n ...prevState, \r\n arrError: [...prevState.arrError, 'Error fetching loan history'],\r\n loading: false,\r\n isRefresh: false\r\n }));\r\n }\r\n }, [state.idKoperasi]);\r\n\r\n useEffect(() => {\r\n getProfile();\r\n }, [getProfile]);\r\n\r\n useEffect(() => {\r\n if (state.idKoperasi) {\r\n getHistory();\r\n }\r\n }, [state.idKoperasi, getHistory]);\r\n\r\n const onPressItem = async (loan) => {\r\n if (loan.status_loan === CreditNewHistoryService.STATUS_ACTIVE || loan.status_loan === 'AC') {\r\n navigate('/credit-new-active', {\r\n state: {\r\n cms_kartuangsuran_id: loan.cms_kartuangsuran_id,\r\n cms_kartupinjaman_id: loan.cms_kartupinjaman_id,\r\n }\r\n });\r\n return;\r\n }\r\n\r\n setState(prevState => ({ ...prevState, loading: true }));\r\n try {\r\n const config = {\r\n headers: { Authorization: localStorage.getItem('token') }\r\n };\r\n let detailService = null;\r\n if (loan.status_loan === CreditNewHistoryService.STATUS_APPROVED_BY_KAI) {\r\n detailService = await axios.get(`${API.hostLoanNew}/loan-new/detail-approved?loan_new_id=${loan.loan_new_id}&cms_id_analisa=${loan.cms_id_analisa}`, config);\r\n } else {\r\n detailService = await axios.get(`${API.hostLoanNew}/loan/detail?loan_new_id=${loan.loan_new_id}`, config);\r\n }\r\n \r\n setState(prevState => ({ ...prevState, loading: false }));\r\n navigateDetailLoan(detailService.data.data);\r\n } catch (error) {\r\n setState(prevState => ({ ...prevState, loading: false }));\r\n const message = error.message || 'Pastikan koneksi tersambung, silakan coba lagi';\r\n alert(message);\r\n }\r\n };\r\n\r\n const navigateDetailLoan = (loan) => {\r\n if (loan.status_loan === CreditNewHistoryService.STATUS_DRAFT) {\r\n const incrementPage = parseInt(loan.increment_page, 10);\r\n if (incrementPage === 1) {\r\n if (loan.kode_pinjaman === '12E') {\r\n navigate('/credit-good/credit-input-document-barang');\r\n } else {\r\n navigate('/input-document', { state: { loanNewId: loan.loan_new_id } });\r\n }\r\n } else if (incrementPage === 2) {\r\n navigate('/input-email', { state: { loanNewId: loan.loan_new_id } });\r\n } else if (incrementPage === 3) {\r\n navigate('/input-summary', { state: { loanNewId: loan.loan_new_id } });\r\n }\r\n return;\r\n }\r\n\r\n if (loan.status_loan === CreditNewHistoryService.STATUS_REQUESTED ||\r\n loan.status_loan === CreditNewHistoryService.STATUS_APPROVED_HR) {\r\n navigate('/credit-status', { state: { loanNewId: loan.loan_new_id } });\r\n return;\r\n }\r\n\r\n if (loan.status_loan === CreditNewHistoryService.STATUS_APPROVED_BY_KAI) {\r\n navigate('/credit-status', { state: { loanNewId: loan.loan_new_id } });\r\n return;\r\n }\r\n\r\n if (loan.status_loan === CreditNewHistoryService.STATUS_APPROVED_MEMBER) {\r\n navigate('/credit-new-waiting');\r\n return;\r\n }\r\n\r\n if (loan.status_loan === CreditNewHistoryService.STATUS_ACTIVE) {\r\n navigate('/credit-new-active', { state: { loanNewId: loan.loan_new_id } });\r\n return;\r\n }\r\n\r\n const statusCancels = [\r\n CreditNewHistoryService.STATUS_CANCEL_BY_USER,\r\n CreditNewHistoryService.STATUS_CANCEL_BY_KAI,\r\n CreditNewHistoryService.STATUS_CANCEL_BY_SYSTEM\r\n ];\r\n \r\n if (statusCancels.includes(loan.status_loan)) {\r\n navigate('/credit-new-cancel', { state: { loanNewId: loan.loan_new_id } });\r\n return;\r\n }\r\n };\r\n\r\n const LoanItem = React.memo(({ loan }) => {\r\n const status = STATUS_LOAN_TEXT[loan.status_loan] || {\r\n text: 'Unknown',\r\n color: '#999',\r\n bgColor: '#f5f5f5'\r\n };\r\n \r\n let tenor = parseInt(loan.approved_tenor || loan.applied_tenor || 0);\r\n let angsuranBulan = accounting.formatMoney(loan.angsuran_bulan || loan.applied_angsuran_bulan, \"\", 0, \",\", \",\");\r\n const statusName = loan.status_loan && loan.status_loan !== '' ? \r\n CreditNewHistoryService.STATUS_LOAN_TEXT[loan.status_loan] : '';\r\n\r\n return (\r\n <div \r\n onClick={() => onPressItem(loan)}\r\n style={{\r\n backgroundColor: 'white',\r\n padding: '16px',\r\n marginBottom: '8px',\r\n position: 'relative',\r\n cursor: 'pointer',\r\n width: '100%',\r\n boxSizing: 'border-box'\r\n }}\r\n >\r\n <div style={{\r\n paddingRight: '24px'\r\n }}>\r\n <div style={{\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n marginBottom: '4px'\r\n }}>\r\n <span style={{\r\n fontSize: '14px',\r\n color: '#333'\r\n }}>\r\n {loan.no_dokumen}\r\n </span>\r\n <span style={{\r\n fontSize: '12px',\r\n color: (STATUS_LOAN_TEXT[loan.status_loan] || {color: '#999'}).color,\r\n backgroundColor: (STATUS_LOAN_TEXT[loan.status_loan] || {bgColor: '#f5f5f5'}).bgColor,\r\n padding: '2px 8px',\r\n borderRadius: '4px'\r\n }}>\r\n {(STATUS_LOAN_TEXT[loan.status_loan] || {text: 'Unknown Status'}).text}\r\n </span>\r\n </div>\r\n\r\n <div style={{\r\n fontSize: '14px',\r\n color: '#666',\r\n marginBottom: '4px'\r\n }}>\r\n {loan.nama_pinjaman}\r\n </div>\r\n\r\n <div style={{\r\n fontSize: '14px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '4px'\r\n }}>\r\n <span style={{ color: '#135188' }}>\r\n Rp {angsuranBulan}\r\n </span>\r\n <span style={{ color: '#999' }}>×</span>\r\n <span style={{ color: '#135188' }}>\r\n {tenor}\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div style={{\r\n position: 'absolute',\r\n right: '16px',\r\n top: '50%',\r\n transform: 'translateY(-50%)',\r\n color: '#d9d9d9'\r\n }}>\r\n <RightOutlined />\r\n </div>\r\n </div>\r\n );\r\n });\r\n\r\n if (state.loading) {\r\n return (\r\n <div style={{\r\n padding: '20px',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n minHeight: '100vh'\r\n }}>\r\n <Spin size=\"large\" />\r\n </div>\r\n );\r\n }\r\n\r\n return (\r\n <div style={{\r\n margin: '0px auto',\r\n padding: '20px',\r\n maxWidth: '460px',\r\n backgroundColor: '#f8f9fa',\r\n fontFamily: 'TripSans'\r\n }}>\r\n {/* Header */}\r\n <div style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '12px',\r\n marginBottom: '16px'\r\n }}>\r\n <Button \r\n type=\"text\" \r\n icon={<ArrowLeftOutlined />} \r\n onClick={() => navigate(-1)}\r\n />\r\n <span style={{\r\n fontSize: '20px',\r\n fontWeight: '600'\r\n }}>\r\n Riwayat Pinjaman\r\n </span>\r\n </div>\r\n\r\n {/* Loan List */}\r\n <div>\r\n {state.loans.length === 0 ? (\r\n <Empty\r\n image={Empty.PRESENTED_IMAGE_SIMPLE}\r\n description=\"Tidak ada riwayat pinjaman\"\r\n />\r\n ) : (\r\n <div>\r\n {state.loans.map((loan) => (\r\n <LoanItem key={loan.loan_new_id} loan={loan} />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default History;","import React, {useState, useEffect} from \"react\";\r\nimport {\r\n Link,\r\n useNavigate\r\n } from \"react-router-dom\";\r\nimport '../assets/styles/home.css';\r\nimport { checkAccount, deleteAccount, getAccount, getHistories } from \"../helper/session\";\r\nimport Loading from \"../components/Loading\";\r\nimport Swal from \"sweetalert2\";\r\nimport axios, { historylist } from \"../helper/axios\";\r\nimport { Player } from '@lottiefiles/react-lottie-player';\r\n\r\nconst Profile = () => {\r\n const [account, setAccount] = useState(getAccount);\r\n const [loading, setLoading] = useState(true);\r\n const [history, setHistory] = useState(getHistories());\r\n const [getProfile, setProfile] = useState([]);\r\n const [agreement, setAgree] = useState(0);\r\n const [onProgress, setProgress] = useState(false);\r\n const [alreadyReset, setAlreadyReset] = useState(false);\r\n const navigate = useNavigate();\r\n\r\n const signOut = () => {\r\n Swal.fire({\r\n title: 'Keluar Akun?',\r\n text: \"Apakah kamu yakin ingin keluar akun?\",\r\n icon: 'question',\r\n showCancelButton: true,\r\n confirmButtonText: 'Ya, Keluar!',\r\n cancelButtonText: 'Tidak'\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n deleteAccount();\r\n window.location.replace('/signin');\r\n }\r\n })\r\n }\r\n\r\n const handleChange = (event) => {\r\n if (event.target.checked) {\r\n var agreement = 1;\r\n setAgree(agreement);\r\n // console.log('agreement',agreement);\r\n } else {\r\n var agreement = 0;\r\n setAgree(agreement);\r\n // console.log('agreement',agreement);\r\n }\r\n }\r\n\r\n const setContentProgess = (status) => {\r\n setProgress(status);\r\n document.getElementById('buttonSave').disabled = status\r\n }\r\n\r\n const submitData = () => {\r\n\r\n const config = {\r\n headers: { Authorization: 'Bearer' + localStorage.getItem('token') }\r\n };\r\n\r\n if(agreement == true){\r\n Swal.fire({\r\n title: 'Submit Data?',\r\n text: \"Setelah data berhasil di submit, update data bisa dilakukan kembali setelah 3 bulan kemudian\",\r\n icon: 'question',\r\n showCancelButton: true,\r\n confirmButtonText: 'Setuju',\r\n cancelButtonText: 'Tidak'\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n setContentProgess(true);\r\n const postForm = {\r\n isSubmitted: 1,\r\n }\r\n axios.put('https://api-microsite.koperasi-astra.com/api/submitapproval',postForm,config)\r\n .then(response=> {\r\n setContentProgess(false);\r\n let result = response.data;\r\n if(result.message == 'success'){\r\n Swal.fire({\r\n icon: 'success',\r\n title: 'Berhasil',\r\n text: 'Data berhasil dikirim untuk dilakukan persetujuan',\r\n }).then(res => {\r\n window.location.reload();\r\n if(res.value){\r\n window.location.reload();\r\n navigate('/home/profile', { replace: true });\r\n }\r\n })\r\n }else{\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Gagal',\r\n text: result.message,\r\n })\r\n }\r\n })\r\n .catch(error=>{\r\n setContentProgess(false);\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Terjadi Kesalahan',\r\n text: 'Terjadi kesalahan - Hubungi Admin',\r\n })\r\n })\r\n }\r\n })\r\n } else {\r\n Swal.fire({\r\n title: 'Gagal',\r\n text: \"Silahkan Ceklist Persetujuan Terlebih dahulu\",\r\n icon: 'error',\r\n confirmButtonText: 'Ya',\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n window.location.reload();\r\n }\r\n })\r\n }\r\n \r\n }\r\n\r\n const ContentUser = () => {\r\n return (\r\n <div className=\"container-user d-flex flex-column w-100 px-3 py-4 mb-4\">\r\n <div className=\"content-profile d-flex flex-column align-items-center mt-2 py-4\">\r\n <div className=\"container-image-profile\">\r\n <img src={getProfile.personal_photo !== null && getProfile.personal_photo !== '' ? getProfile.personal_photo : 'https://defuj.github.io/mosya.bootstrap/assets/images/user-default.png'} alt=\"profile\" className=\"image-profile\" id=\"dataImage\"/>\r\n </div>\r\n <div className=\"data-profile d-flex flex-column flex-fill\">\r\n <p className=\"headline5 color-black500 semibold p-0 mb-2 mt-2 text-center\" id=\"dataName\">\r\n {getProfile.id_koperasi}\r\n </p>\r\n <p className=\"bodytext2 color-black500 p-0 m-0 text-center\" id=\"dataEmail\">\r\n {getProfile.name}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div className=\"container-spec d-flex align-content-between flex-wrap mt-3 mb-3 data-spec\" id=\"data-spec\">\r\n <div className=\"spec-item flex-column flex-fill justify-content-column m-0 mt-3 p-3 radius-16\">\r\n <p className=\"bodytext1 color-black500 semibold mb-2 flex-fill w-100\">Data Personal</p>\r\n <Link to=\"/profile/edit\" className=\"text-decoration-none d-flex\">\r\n <button className=\"button-action-profile color-black500 bg-white bodytext1 d-flex flex-row justify-content-between align-items-center flex-fill px-0 py-2\">\r\n <p className=\"mb-0 bodytext1 flex-fill text-left\">\r\n Data Pribadi\r\n </p>\r\n <i className=\"fi fi-sr-angle-right\"></i>\r\n </button>\r\n </Link>\r\n\r\n {/* <Link to=\"/profile/edit_document\" className=\"text-decoration-none d-flex\">\r\n <button className=\"button-action-profile color-black500 bg-white bodytext1 d-flex flex-row justify-content-between align-items-center flex-fill px-0 py-2\">\r\n <p className=\"mb-0 bodytext1 flex-fill text-left\">\r\n Data Dokumen\r\n </p>\r\n <i className=\"fi fi-sr-angle-right\"></i>\r\n </button>\r\n </Link>\r\n\r\n <Link to=\"/profile/edit_kepagawaian\" className=\"text-decoration-none d-flex\">\r\n <button className=\"button-action-profile color-black500 bg-white bodytext1 d-flex flex-row justify-content-between align-items-center flex-fill px-0 py-2\">\r\n <p className=\"mb-0 bodytext1 flex-fill text-left\">\r\n Data Kepegawaian\r\n </p>\r\n <i className=\"fi fi-sr-angle-right\"></i>\r\n </button>\r\n </Link>\r\n \r\n <Link to=\"/profile/edit_bank\" className=\"text-decoration-none d-flex\">\r\n <button className=\"button-action-profile color-black500 bg-white bodytext1 d-flex flex-row justify-content-between align-items-center flex-fill px-0 py-2\">\r\n <p className=\"mb-0 bodytext1 flex-fill text-left\">\r\n Data Bank\r\n </p>\r\n <i className=\"fi fi-sr-angle-right\"></i>\r\n </button>\r\n </Link> */}\r\n \r\n {/* <Link to=\"/profile/password\" className=\"text-decoration-none d-flex\">\r\n <button className=\"button-action-profile color-black500 bg-white bodytext1 d-flex flex-row justify-content-between align-items-center flex-fill px-0 py-2\">\r\n <p className=\"mb-0 bodytext1 flex-fill text-left\">\r\n Ubah Kata Sandi\r\n </p>\r\n <i className=\"fi fi-sr-angle-right\"></i>\r\n </button>\r\n </Link> */}\r\n\r\n <button onClick={signOut} className=\"button-action-logout text-white bodytext1 text-center mt-3 d-flex flex-row w-100 justify-content-center flex-fill\" id=\"buttonLogout\">\r\n <p className=\"mb-0\">Keluar Akun</p>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n }\r\n\r\n const getHistory = () => {\r\n \r\n // console.log('token',localStorage.getItem('token'));\r\n\r\n const config = {\r\n headers: { Authorization: localStorage.getItem('token') }\r\n };\r\n\r\n setLoading(true) \r\n\r\n axios.get('https://lendtick-user-prod.koperasi-astra.com/profile/get',config) \r\n .then(response => {\r\n var profiles = response.data.data\r\n setProfile(profiles);\r\n setLoading(false) \r\n // console.log('response',response);\r\n }).catch(error => {\r\n setProfile([]);\r\n });\r\n\r\n // console.log('UpdateDataProfile',JSON.parse(localStorage.getItem('UpdateDataProfile')));\r\n // console.log('UpdateDataCompany',JSON.parse(localStorage.getItem('UpdateDataCompany')));\r\n // console.log('UpdateDataBank',JSON.parse(localStorage.getItem('UpdateDataBank')));\r\n // console.log('UpdateDocument',JSON.parse(localStorage.getItem('UpdateDocument')));\r\n }\r\n\r\n useEffect(() => {\r\n document.title = \"Profil\";\r\n if(checkAccount()){\r\n setAccount(getAccount);\r\n getHistory();\r\n }else{\r\n window.location.replace('/signin');\r\n }\r\n }, [])\r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-between align-items-center flex-row py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-2\">\r\n <p className=\"navbar-brand mb-0 bodytext1 semibold color-black500 px-1 py-2 flex-fill\" title=\"Profile\">\r\n Profil Akun\r\n </p>\r\n </div>\r\n </nav>\r\n\r\n <main role=\"main\" id=\"container-user\" className=\"container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 mt-5\">\r\n {loading && <Player\r\n src='https://assets6.lottiefiles.com/packages/lf20_YZb2Qu.json'\r\n className=\"player\"\r\n loop\r\n autoplay\r\n />}\r\n {!loading && checkAccount() && <ContentUser />}\r\n </main>\r\n\r\n </>\r\n )\r\n}\r\n\r\nexport default Profile;","import React, {useState, useEffect} from \"react\";\r\nimport {\r\n Link,\r\n useNavigate,\r\n useParams\r\n } from \"react-router-dom\";\r\nimport Footer from \"../components/Footer\";\r\nimport axios, { brandlist, carlist } from \"../helper/axios\";\r\nimport Loading from \"../components/Loading\";\r\nimport EmptyState from \"../components/EmptyState\";\r\nimport { safeString } from \"../helper/session\";\r\n\r\nconst Brands = () => {\r\n let { keyword } = useParams();\r\n const [brands, setBrands] = useState([]);\r\n const [cars, setCars] = useState([]);\r\n const [onProgress, setProgress] = useState(false);\r\n const [keywords, setKeywords] = useState(keyword === undefined ? \"\" : keyword);\r\n const navigate = useNavigate();\r\n\r\n const getBrands = () => {\r\n setProgress(true);\r\n axios.get(brandlist)\r\n .then(response => {\r\n setProgress(false);\r\n let result = response.data;\r\n if(result.status){\r\n // // console.log(`keyword : ${keyword}`);\r\n // // console.log(`keywords : ${keywords}`);\r\n if(keywords === ''){\r\n setBrands(result.data);\r\n }else{\r\n let filtered = result.data.filter(brand => brand.name.toLowerCase().includes(keywords.toLowerCase()));\r\n setBrands(filtered);\r\n }\r\n }else{\r\n setBrands([]);\r\n }\r\n }).catch(error => {\r\n setProgress(false);\r\n setBrands([]);\r\n });\r\n }\r\n\r\n const reGetBrands = (e) => {\r\n if(keywords === \"\"){\r\n navigate('/brands', {replace: true});\r\n }else{\r\n navigate('/brands/'+keywords, {replace: true});\r\n }\r\n e.preventDefault();\r\n getBrands();\r\n }\r\n\r\n const getCars = () => {\r\n setProgress(true);\r\n axios.get(carlist)\r\n .then(response => {\r\n setProgress(false);\r\n let result = response.data;\r\n if(result.status){\r\n var cars = result.data;\r\n setCars(cars);\r\n }else{\r\n setCars([]);\r\n }\r\n }).catch(error => {\r\n setProgress(false);\r\n setCars([]);\r\n });\r\n }\r\n\r\n const setupKeyword = (keyword) => {\r\n setKeywords(keyword);\r\n\r\n if(keyword === \"\"){\r\n navigate('/brands', {replace: true});\r\n getBrands();\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n document.title = \"Merek Mobil\";\r\n setKeywords(keyword === undefined ? '' : keyword);\r\n cars.length === 0 && getCars();\r\n getBrands(); \r\n }, [])\r\n\r\n const onBack = () => {\r\n navigate(-1);\r\n }\r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-start align-items-center flex-row py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <Link to=\"\" className=\"navbar-brand\" title=\"back\" onClick={onBack}>\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <p className=\"mb-0 bodytext1 semibold color-black500 px-2 py-2\">List Merek Mobil</p>\r\n </div>\r\n </nav>\r\n\r\n <main role=\"main\" className=\"container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 mt-5\">\r\n <div className=\"container-user d-flex flex-row justify-content-between px-3 py-4\">\r\n <div className=\"content-text flex-column w-100\">\r\n <p className=\"headline5 color-black500 semibold p-0 mb-1\">\r\n Merek Mobil Tersedia\r\n </p>\r\n <p className=\"bodytext2 color-black500 p-0 m-0\">\r\n Merek mobil yang tersedia di mosya\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <form onSubmit={reGetBrands} className=\"form-search container-search mx-3 mb-4 d-flex justify-content-between align-items-center\" style={{height: '48px'}}>\r\n <div className=\"input-group-search bg-white h-100\">\r\n <input type=\"text\" defaultValue={keywords} onChange={e => setupKeyword(safeString(e.target.value))} id=\"search-merk\" className=\"bodytext1 color-black800\" placeholder=\"Cari merk mobil\"/>\r\n </div>\r\n <button onClick={reGetBrands} type=\"button\" className=\"h-100 d-flex align-items-center justify-content-center button-search ml-3\" style={{width: '48px'}}>\r\n <i className=\"fi fi-br-search text-white headline6\"></i>\r\n </button>\r\n </form>\r\n \r\n <div className=\"container-merk d-flex flex-wrap align-content-start px-2 mb-3\" id=\"container-merk\" style={{minHeight: '200px'}}>\r\n {onProgress && <Loading/>}\r\n {!onProgress && brands.length > 0 && brands.map((brand, index) => {\r\n const countCar = cars.filter(car => car.brand.toString().toLowerCase() === brand.name.toString().toLowerCase()).length;\r\n return (\r\n <Link to={`/products/${brand.name}`} className=\"merk-item text-decoration-none\" key={index}>\r\n <p className=\"bodytext1 color-black500 semibold mb-0 merk-name\">{brand.name}</p>\r\n <p className=\"caption color-black400 mb-0 merk-car\">{countCar > 99 ? '99+ Mobil Tersedia' : countCar === 0 ? 'Tidak Ada Mobil' : countCar+' Mobil Tersedia'}</p>\r\n </Link>\r\n )})}\r\n </div>\r\n {!onProgress && brands.length === 0 && <EmptyState imageWidth=\"120\" wrapHeight={true} title={keyword === undefined ? 'Tidak ada merk' : `Merk <span class=\"color-green500 semibold\">\"${keyword}\"</span> Tidak Ditemukan`} desc={keyword === undefined ? 'Silahkan coba lagi nanti' : `Silahkan gunakan kata kunci lain`} />}\r\n </main>\r\n \r\n <Footer/>\r\n\r\n </>\r\n )\r\n}\r\n\r\nexport default Brands;","import React, {useState, useEffect} from \"react\";\r\nimport axios, {carlist} from '../helper/axios';\r\nimport Loading from '../components/Loading';\r\nimport EmptyState from '../components/EmptyState';\r\nimport { Link, useNavigate, useParams } from \"react-router-dom\";\r\nimport { getListCar, safeString } from \"../helper/session\";\r\nimport Footer from \"../components/Footer\";\r\nimport Spinner from \"../components/Spinner\";\r\n\r\nconst SimulasiPinjaman = () => {\r\n let { keyword } = useParams();\r\n const [cars, setCars] = useState(getListCar());\r\n const [keywords, setKeywords] = useState(keyword);\r\n const [loading, setLoading] = useState(true);\r\n const [onProgress, setProgress] = useState(false);\r\n \r\n const [contentSort, setContentSort] = useState('all'); // all, new, price\r\n const [contentOrder, setContentOrder] = useState('desc'); // asc, desc\r\n const [filterColor, setFilterColor] = useState('Semua');\r\n const [filterBrand, setFilterBrand] = useState('Semua');\r\n const [filterFuel, setFilterFuel] = useState('Semua');\r\n const [filterStartPrice, setFilterStartPrice] = useState('');\r\n const [filterEndPrice, setFilterEndPrice] = useState('');\r\n const [filterStartYear, setFilterStartYear] = useState('');\r\n const [filterEndYear, setFilterEndYear] = useState('');\r\n\r\n const navigate = useNavigate();\r\n\r\n const sortCars = (cars) => {\r\n let res = cars;\r\n if(keywords !== undefined && keywords !== ''){\r\n res = cars.filter((car) => `${car.model.toString().toLowerCase()} ${car.brand.toString().toLowerCase()} ${car.fuel.toString().toLowerCase()} ${car.color.toString().toLowerCase()} ${car.description.toString().toLowerCase()}`.toString().includes(keywords.toString().toLowerCase()));\r\n }\r\n\r\n if(contentSort === 'all'){\r\n setCars(res);\r\n }else if(contentSort === 'new'){\r\n res = res.sort((a, b) => (a, b) => parseFloat(b.id) - parseFloat(a.id));\r\n setCars(res);\r\n }else if(contentSort === 'price'){\r\n if(contentOrder === 'asc'){\r\n res = res.sort((a, b) => parseFloat(a.price.replace('Rp. ','')) - parseFloat(b.price.replace('Rp. ','')));\r\n }else if(contentOrder === 'desc'){\r\n res = res.sort((a, b) => parseFloat(b.price.replace('Rp. ','')) - parseFloat(a.price.replace('Rp. ','')));\r\n }\r\n setCars(res);\r\n }\r\n }\r\n\r\n const changeContentOrder = (sort) => {\r\n setContentSort(sort)\r\n setContentOrder(contentOrder === 'asc' ? 'desc' : 'asc')\r\n sortCars(cars);\r\n }\r\n\r\n const changeContentSort = (sort) => {\r\n setContentSort(sort);\r\n sortCars(cars);\r\n }\r\n \r\n const getCar = () => {\r\n setLoading(true);\r\n axios.get(carlist)\r\n .then(response => {\r\n let result = response.data;\r\n if(result.status){\r\n let res = result.data;\r\n \r\n if(filterColor !== 'Semua' && filterColor !== ''){\r\n res = res.filter((item) => item.color === filterColor)\r\n }\r\n\r\n if(filterFuel !== 'Semua' && filterFuel !== ''){\r\n res = res.filter((item) => item.fuel === filterFuel)\r\n }\r\n\r\n if(filterBrand !== 'Semua' && filterBrand !== ''){\r\n res = res.filter((item) => item.brand === filterBrand)\r\n }\r\n\r\n if(filterStartPrice !== ''){\r\n if(filterEndPrice !== ''){\r\n res = res.filter((item) => parseInt(item.price.replace('Rp. ','')) >= parseInt(filterStartPrice) && parseInt(item.price.replace('Rp. ','')) <= parseInt(filterEndPrice))\r\n }else{\r\n res = res.filter((item) => parseInt(item.price.replace('Rp. ','')) >= parseInt(filterStartPrice))\r\n }\r\n }else{\r\n if(filterEndPrice !== ''){\r\n res = res.filter((item) => parseInt(item.price.replace('Rp. ','')) <= parseInt(filterEndPrice))\r\n }\r\n }\r\n\r\n if(filterStartYear !== ''){\r\n if(filterEndYear !== ''){\r\n res = res.filter((item) => parseInt(item.year) >= parseInt(filterStartYear) && parseInt(item.year) <= parseInt(filterEndYear))\r\n }else{\r\n res = res.filter((item) => parseInt(item.year) >= parseInt(filterStartYear))\r\n }\r\n }else{\r\n if(filterEndYear !== ''){\r\n res = res.filter((item) => parseInt(item.year) <= parseInt(filterEndYear))\r\n }\r\n }\r\n sortCars(res);\r\n }else{\r\n setCars([]);\r\n }\r\n setLoading(false);\r\n }).catch(error => {\r\n setCars([]);\r\n setLoading(false);\r\n });\r\n }\r\n\r\n const CarContent = React.memo(({data, index}) => {\r\n return (\r\n <Link className=\"product-items w-50 flex-column lazy\" to={`/product/${data.id}/${data.model.replaceAll(' ','_')}`} key={index}>\r\n <div className=\"lazy product-cover mb-2\" style={{backgroundImage : `url('${data.image_cover}')`}}></div>\r\n <p className=\"bodytext1 color-black800 semibold m-0 px-2\">{data.model}</p>\r\n <p className=\"bodytext2 color-black300 m-0 px-2\">{data.year} | {data.color.length > 0 ? `${data.color.length} Warna` : 'Tidak Ada Warna'}</p>\r\n <p className=\"bodytext2 semibold color-green500 m-0 py-1 px-2\">{data.price}</p>\r\n </Link>\r\n )\r\n });\r\n \r\n const onSearch = (e) => { \r\n if(keywords === \"\"){\r\n navigate('/products', {replace: true});\r\n }else{\r\n navigate('/products/'+keywords, {replace: true});\r\n }\r\n e.preventDefault();\r\n getCar();\r\n }\r\n\r\n const onWritingKeyword = (keyword) => {\r\n setKeywords(keyword);\r\n\r\n if(keyword === \"\"){\r\n navigate('/products', {replace: true});\r\n getCar();\r\n }\r\n }\r\n\r\n const resetFilter = () => {\r\n setFilterColor('Semua');\r\n setFilterBrand('Semua');\r\n setFilterFuel('Semua');\r\n setFilterStartPrice('');\r\n setFilterEndPrice('');\r\n setFilterStartYear('');\r\n setFilterEndYear('');\r\n getCar();\r\n }\r\n\r\n const onUpdate = () => {\r\n\r\n }\r\n\r\n useEffect(() => {\r\n document.title = \"Pinjaman Tersedia\";\r\n setKeywords(keyword === undefined ? '' : keyword);\r\n getCar();\r\n }, []);\r\n \r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-between align-items-center flex-column py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <form onSubmit={onSearch} action=\"\" id=\"form-search\" className=\"container-search form-search w-100 d-flex justify-content-between align-items-center\" style={{height: '48px'}}>\r\n <Link to=\"\" className=\"navbar-brand\" title=\"back\" onClick={() => navigate(-1)}>\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <div className=\"input-group-search background-black50 h-100\">\r\n <i className=\"fi fi-br-search color-black200 mr-2 headline5\"></i>\r\n <input type=\"text\" defaultValue={keywords} onChange={e => onWritingKeyword(safeString(e.target.value))} className=\"bodytext1\" id=\"input-search\" placeholder=\"Cari pinjaman ...\"/>\r\n </div>\r\n <button type=\"button\" id=\"toggleFilter\" data-toggle=\"modal\" data-target=\"#dialogFilter\" className=\"h-100 d-flex align-items-center justify-content-center button-search ml-3 menu-filter\" style={{width: '48px'}}>\r\n {filterColor === 'Semua' && filterBrand === 'Semua' && filterFuel === 'Semua' && filterStartPrice === '' && filterEndPrice === '' && filterStartYear === '' && filterEndYear === '' ? <i className=\"fi fi-rr-filter text-white headline5\"></i> : <i className=\"fi fi-sr-filter text-white headline5\"></i>}\r\n </button>\r\n </form>\r\n\r\n <div className=\"container-menu-tab w-100 d-flex justify-content-between mt-2\">\r\n <button onClick={() => changeContentSort('all')} className={contentSort === 'all' ? 'menu-tab-item bodytext2 flex-fill active' : 'menu-tab-item bodytext2 flex-fill'}>Semua</button>\r\n <button onClick={() => changeContentSort('new')} className={contentSort === 'new' ? 'menu-tab-item bodytext2 flex-fill active' : 'menu-tab-item bodytext2 flex-fill'}>Terbaru</button>\r\n {/* <button onClick={() => changeContentOrder('price') } id=\"menu-price\" className={contentSort === 'price' ? 'menu-tab-item bodytext2 flex-fill active' : 'menu-tab-item bodytext2 flex-fill'}>\r\n Harga \r\n {(contentSort === 'price' && contentOrder === 'asc') && <i className=\"fi fi-sr-arrow-up\"></i>}\r\n {(contentSort === 'price' && contentOrder === 'desc') && <i className=\"fi fi-sr-arrow-down\"></i>}\r\n </button> */}\r\n </div>\r\n </div>\r\n </nav>\r\n\r\n <main role=\"main\" className=\"container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 main-content\">\r\n \r\n <form encType=\"multipart/form-data\" className=\"container-form px-3 py-3 bg-white d-flex flex-column mb-3\">\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Tipe Pinjaman\r\n </label>\r\n <input type=\"text\" name=\"name\" id=\"dataName\" className=\"form-input form-data-booking bodytext2 mb-3\" placeholder=\"Tipe Pinjaman\"/>\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Silahkan isi Nominal Pinjaman\r\n </label>\r\n <input type=\"text\" name=\"name\" id=\"dataBirthPlace\" className=\"form-input form-data-booking bodytext2 mb-3\" placeholder=\"Nominal Pinjaman\"/>\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Silahkan isi Periode Pinjaman\r\n </label>\r\n <input type=\"text\" name=\"name\" id=\"dataName\" className=\"form-input form-data-booking bodytext2 mb-3\" placeholder=\"Periode Pinjaman\"/>\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Offset\r\n </label>\r\n <input type=\"text\" name=\"name\" id=\"dataName\" className=\"form-input form-data-booking bodytext2 mb-3\" placeholder=\"Pilih Offset\"/>\r\n\r\n <button disabled={onProgress && 'disabled'} onClick={onUpdate} type=\"button\" id=\"buttonSave\" className=\"button-action-save text-white background-green500 bodytext1 text-center mt-5\">\r\n {onProgress ? <Spinner/> : 'Simulasikan Pinjaman'}\r\n </button>\r\n </form>\r\n \r\n </main>\r\n <Footer/>\r\n\r\n {/* <form action=\"\" method=\"get\" id=\"form-filter\">\r\n <div className=\"modal fade\" id=\"dialogFilter\" data-backdrop=\"static\" data-keyboard=\"false\" tabIndex=\"-1\" aria-labelledby=\"staticBackdropLabel\" aria-hidden=\"true\">\r\n <div className=\"modal-dialog modal-dialog-centered modal-dialog-scrollable col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12\">\r\n <div className=\"modal-content modal-filter-content\">\r\n <div className=\"modal-header\">\r\n <h5 className=\"modal-title headline6\" id=\"staticBackdropLabel\">Filter</h5>\r\n <button type=\"button\" className=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n <i className=\"fi fi-br-cross headline6\"></i>\r\n </button>\r\n </div>\r\n <div className=\"modal-body\">\r\n \r\n </div>\r\n <div className=\"modal-footer justify-content-around\">\r\n <button onClick={resetFilter} type=\"reset\" className=\"btn flex-fill button-action-filter button-action-filter-reset bg-white bodytext2 py-2 color-green500\" data-dismiss=\"modal\" id=\"buttonReset\">Atur ulang</button>\r\n <button onClick={getCar} type=\"button\" className=\"btn flex-fill button-action-filter background-green500 bodytext2 text-white py-2\" data-dismiss=\"modal\" id=\"buttonFilter\">Tampilkan</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form> */}\r\n </>\r\n )\r\n}\r\n\r\nexport default SimulasiPinjaman;","import React, {useState, useEffect} from \"react\";\r\nimport axios, {carlist} from '../helper/axios';\r\nimport Loading from '../components/Loading';\r\nimport EmptyState from '../components/EmptyState';\r\nimport { Link, useNavigate, useParams } from \"react-router-dom\";\r\nimport { getListCar, safeString } from \"../helper/session\";\r\nimport Footer from \"../components/Footer\";\r\nimport Spinner from \"../components/Spinner\";\r\n\r\nconst GondolaTicket = () => {\r\n let { keyword } = useParams();\r\n const [cars, setCars] = useState(getListCar());\r\n const [keywords, setKeywords] = useState(keyword);\r\n const [loading, setLoading] = useState(true);\r\n const [onProgress, setProgress] = useState(false);\r\n \r\n const [contentSort, setContentSort] = useState('all'); // all, new, price\r\n const [contentOrder, setContentOrder] = useState('desc'); // asc, desc\r\n const [filterColor, setFilterColor] = useState('Semua');\r\n const [filterBrand, setFilterBrand] = useState('Semua');\r\n const [filterFuel, setFilterFuel] = useState('Semua');\r\n const [filterStartPrice, setFilterStartPrice] = useState('');\r\n const [filterEndPrice, setFilterEndPrice] = useState('');\r\n const [filterStartYear, setFilterStartYear] = useState('');\r\n const [filterEndYear, setFilterEndYear] = useState('');\r\n\r\n const navigate = useNavigate();\r\n\r\n const sortCars = (cars) => {\r\n let res = cars;\r\n if(keywords !== undefined && keywords !== ''){\r\n res = cars.filter((car) => `${car.model.toString().toLowerCase()} ${car.brand.toString().toLowerCase()} ${car.fuel.toString().toLowerCase()} ${car.color.toString().toLowerCase()} ${car.description.toString().toLowerCase()}`.toString().includes(keywords.toString().toLowerCase()));\r\n }\r\n\r\n if(contentSort === 'all'){\r\n setCars(res);\r\n }else if(contentSort === 'new'){\r\n res = res.sort((a, b) => (a, b) => parseFloat(b.id) - parseFloat(a.id));\r\n setCars(res);\r\n }else if(contentSort === 'price'){\r\n if(contentOrder === 'asc'){\r\n res = res.sort((a, b) => parseFloat(a.price.replace('Rp. ','')) - parseFloat(b.price.replace('Rp. ','')));\r\n }else if(contentOrder === 'desc'){\r\n res = res.sort((a, b) => parseFloat(b.price.replace('Rp. ','')) - parseFloat(a.price.replace('Rp. ','')));\r\n }\r\n setCars(res);\r\n }\r\n }\r\n\r\n const changeContentOrder = (sort) => {\r\n setContentSort(sort)\r\n setContentOrder(contentOrder === 'asc' ? 'desc' : 'asc')\r\n sortCars(cars);\r\n }\r\n\r\n const changeContentSort = (sort) => {\r\n setContentSort(sort);\r\n sortCars(cars);\r\n }\r\n \r\n const getCar = () => {\r\n setLoading(true);\r\n axios.get(carlist)\r\n .then(response => {\r\n let result = response.data;\r\n if(result.status){\r\n let res = result.data;\r\n \r\n if(filterColor !== 'Semua' && filterColor !== ''){\r\n res = res.filter((item) => item.color === filterColor)\r\n }\r\n\r\n if(filterFuel !== 'Semua' && filterFuel !== ''){\r\n res = res.filter((item) => item.fuel === filterFuel)\r\n }\r\n\r\n if(filterBrand !== 'Semua' && filterBrand !== ''){\r\n res = res.filter((item) => item.brand === filterBrand)\r\n }\r\n\r\n if(filterStartPrice !== ''){\r\n if(filterEndPrice !== ''){\r\n res = res.filter((item) => parseInt(item.price.replace('Rp. ','')) >= parseInt(filterStartPrice) && parseInt(item.price.replace('Rp. ','')) <= parseInt(filterEndPrice))\r\n }else{\r\n res = res.filter((item) => parseInt(item.price.replace('Rp. ','')) >= parseInt(filterStartPrice))\r\n }\r\n }else{\r\n if(filterEndPrice !== ''){\r\n res = res.filter((item) => parseInt(item.price.replace('Rp. ','')) <= parseInt(filterEndPrice))\r\n }\r\n }\r\n\r\n if(filterStartYear !== ''){\r\n if(filterEndYear !== ''){\r\n res = res.filter((item) => parseInt(item.year) >= parseInt(filterStartYear) && parseInt(item.year) <= parseInt(filterEndYear))\r\n }else{\r\n res = res.filter((item) => parseInt(item.year) >= parseInt(filterStartYear))\r\n }\r\n }else{\r\n if(filterEndYear !== ''){\r\n res = res.filter((item) => parseInt(item.year) <= parseInt(filterEndYear))\r\n }\r\n }\r\n sortCars(res);\r\n }else{\r\n setCars([]);\r\n }\r\n setLoading(false);\r\n }).catch(error => {\r\n setCars([]);\r\n setLoading(false);\r\n });\r\n }\r\n\r\n const CarContent = React.memo(({data, index}) => {\r\n return (\r\n <Link className=\"product-items w-50 flex-column lazy\" to={`/product/${data.id}/${data.model.replaceAll(' ','_')}`} key={index}>\r\n <div className=\"lazy product-cover mb-2\" style={{backgroundImage : `url('${data.image_cover}')`}}></div>\r\n <p className=\"bodytext1 color-black800 semibold m-0 px-2\">{data.model}</p>\r\n <p className=\"bodytext2 color-black300 m-0 px-2\">{data.year} | {data.color.length > 0 ? `${data.color.length} Warna` : 'Tidak Ada Warna'}</p>\r\n <p className=\"bodytext2 semibold color-green500 m-0 py-1 px-2\">{data.price}</p>\r\n </Link>\r\n )\r\n });\r\n \r\n const onSearch = (e) => { \r\n if(keywords === \"\"){\r\n navigate('/products', {replace: true});\r\n }else{\r\n navigate('/products/'+keywords, {replace: true});\r\n }\r\n e.preventDefault();\r\n getCar();\r\n }\r\n\r\n const onWritingKeyword = (keyword) => {\r\n setKeywords(keyword);\r\n\r\n if(keyword === \"\"){\r\n navigate('/products', {replace: true});\r\n getCar();\r\n }\r\n }\r\n\r\n const resetFilter = () => {\r\n setFilterColor('Semua');\r\n setFilterBrand('Semua');\r\n setFilterFuel('Semua');\r\n setFilterStartPrice('');\r\n setFilterEndPrice('');\r\n setFilterStartYear('');\r\n setFilterEndYear('');\r\n getCar();\r\n }\r\n\r\n const onUpdate = () => {\r\n\r\n }\r\n\r\n useEffect(() => {\r\n document.title = \"Pinjaman Tersedia\";\r\n setKeywords(keyword === undefined ? '' : keyword);\r\n getCar();\r\n }, []);\r\n \r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-between align-items-center flex-column py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <form onSubmit={onSearch} action=\"\" id=\"form-search\" className=\"container-search form-search w-100 d-flex justify-content-between align-items-center\" style={{height: '48px'}}>\r\n <Link to=\"\" className=\"navbar-brand\" title=\"back\" onClick={() => navigate(-1)}>\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <div className=\"input-group-search background-black50 h-100\">\r\n <i className=\"fi fi-br-search color-black200 mr-2 headline5\"></i>\r\n <input type=\"text\" defaultValue={keywords} onChange={e => onWritingKeyword(safeString(e.target.value))} className=\"bodytext1\" id=\"input-search\" placeholder=\"Cari tiket ...\"/>\r\n </div>\r\n </form>\r\n\r\n <div className=\"container-menu-tab w-100 d-flex justify-content-between mt-2\">\r\n <button onClick={() => changeContentSort('all')} className={contentSort === 'all' ? 'menu-tab-item bodytext2 flex-fill active' : 'menu-tab-item bodytext2 flex-fill'}>Semua</button>\r\n <button onClick={() => changeContentSort('new')} className={contentSort === 'new' ? 'menu-tab-item bodytext2 flex-fill active' : 'menu-tab-item bodytext2 flex-fill'}>Terbaru</button>\r\n {/* <button onClick={() => changeContentOrder('price') } id=\"menu-price\" className={contentSort === 'price' ? 'menu-tab-item bodytext2 flex-fill active' : 'menu-tab-item bodytext2 flex-fill'}>\r\n Harga \r\n {(contentSort === 'price' && contentOrder === 'asc') && <i className=\"fi fi-sr-arrow-up\"></i>}\r\n {(contentSort === 'price' && contentOrder === 'desc') && <i className=\"fi fi-sr-arrow-down\"></i>}\r\n </button> */}\r\n </div>\r\n </div>\r\n </nav>\r\n\r\n <main role=\"main\" className=\"container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 main-content\">\r\n \r\n <form encType=\"multipart/form-data\" className=\"container-form px-3 py-3 bg-white d-flex flex-column mb-3\">\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Beli Tiket Gondola\r\n </label>\r\n <a id=\"___GOERS___widget\" href=\"https://goersapp.com/venues/gondola-ancol--gondola\" data-background-color=\"transparent\">Gondola Ancol</a>\r\n </form>\r\n \r\n </main>\r\n <Footer/>\r\n\r\n {/* <form action=\"\" method=\"get\" id=\"form-filter\">\r\n <div className=\"modal fade\" id=\"dialogFilter\" data-backdrop=\"static\" data-keyboard=\"false\" tabIndex=\"-1\" aria-labelledby=\"staticBackdropLabel\" aria-hidden=\"true\">\r\n <div className=\"modal-dialog modal-dialog-centered modal-dialog-scrollable col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12\">\r\n <div className=\"modal-content modal-filter-content\">\r\n <div className=\"modal-header\">\r\n <h5 className=\"modal-title headline6\" id=\"staticBackdropLabel\">Filter</h5>\r\n <button type=\"button\" className=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n <i className=\"fi fi-br-cross headline6\"></i>\r\n </button>\r\n </div>\r\n <div className=\"modal-body\">\r\n \r\n </div>\r\n <div className=\"modal-footer justify-content-around\">\r\n <button onClick={resetFilter} type=\"reset\" className=\"btn flex-fill button-action-filter button-action-filter-reset bg-white bodytext2 py-2 color-green500\" data-dismiss=\"modal\" id=\"buttonReset\">Atur ulang</button>\r\n <button onClick={getCar} type=\"button\" className=\"btn flex-fill button-action-filter background-green500 bodytext2 text-white py-2\" data-dismiss=\"modal\" id=\"buttonFilter\">Tampilkan</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form> */}\r\n </>\r\n )\r\n}\r\n\r\nexport default GondolaTicket;","import React, {useEffect} from \"react\";\r\n// import Swiper from 'swiper/swiper-bundle';\r\nimport { Autoplay, Pagination, Scrollbar } from 'swiper';\r\nimport { Swiper, SwiperSlide } from 'swiper/react'\r\nimport \"swiper/swiper-bundle.css\";\r\n\r\nconst ImageSliderNav = React.memo((props) => {\r\n const banners = props.banner;\r\n const updatePosition = () => {\r\n try {\r\n const pagination = document.querySelector('.swiper-pagination');\r\n document.getElementById('container-slide').appendChild(pagination);\r\n document.querySelector('.swiper-pagination').style.cssText = 'bottom:auto';\r\n } catch (error) {}\r\n }\r\n\r\n useEffect(() => {\r\n updatePosition();\r\n }, [updatePosition])\r\n return (\r\n <div className=\"container-slider\" id=\"container-slide\">\r\n <Swiper className=\"productSlider\"\r\n modules={[Pagination, Scrollbar, Autoplay]}\r\n autoplay={{delay: 5000, disableOnInteraction: false}}\r\n spaceBetween={16}\r\n slidesPerView={'auto'}\r\n centeredSlides={false}\r\n pagination={{ clickable: true }}>\r\n {banners.map((item, index) => \r\n <SwiperSlide key={index}>\r\n <img src={item} alt=\"\"/>\r\n </SwiperSlide>\r\n )}\r\n </Swiper>\r\n </div>\r\n )\r\n})\r\n\r\nexport default ImageSliderNav;","import React, {useState, useEffect} from \"react\";\r\nimport axios, {cardetail} from '../helper/axios';\r\nimport Loading from '../components/Loading';\r\nimport EmptyState from '../components/EmptyState';\r\nimport { Link, useNavigate, useParams } from \"react-router-dom\";\r\nimport { changeColorSelected, getDetailCar, safeString, setCurrentCar, setDetailCar } from \"../helper/session\";\r\nimport Footer from \"../components/Footer\";\r\nimport Spinner from \"../components/Spinner\";\r\nimport Swal from \"sweetalert2\";\r\nimport ImageSliderNav from \"../components/ImageSliderNav\";\r\n\r\nconst Product = () => {\r\n let { id, title } = useParams();\r\n const [car, setCar] = useState(getDetailCar(id));\r\n const [loading, setLoading] = useState(false);\r\n const [onOrder, setOnOrder] = useState(false);\r\n const [colorSelected, setColorSelected] = useState(null);\r\n const [loanProductDetail, setLoanProductDetail] = useState([]);\r\n const [onProgress, setProgress] = useState(false);\r\n const [nominal, setNominal] = useState('');\r\n const [periode, setPeriode] = useState('');\r\n const [hasilSimulasi, setHasilSimulasi] = useState([]);\r\n\r\n const navigate = useNavigate();\r\n\r\n const setColor = (color) => {\r\n setColorSelected(color);\r\n changeColorSelected(color);\r\n }\r\n\r\n const getProduct = async () => {\r\n const config = {\r\n headers: { Authorization: localStorage.getItem('token') }\r\n };\r\n\r\n axios.get('https://commerce-kai-loan-core-opusb-prod.azurewebsites.net/loan/product/' + id,config)\r\n .then(response => {\r\n let loanProductDetail = response.data.data;\r\n \r\n setLoanProductDetail(loanProductDetail);\r\n\r\n // console.log('loanProductDetail',loanProductDetail);\r\n \r\n }).catch(error => {\r\n setLoanProductDetail([]);\r\n });\r\n }\r\n \r\n const getCar = () => {\r\n \r\n }\r\n\r\n const onSimulate = () => {\r\n setProgress(true)\r\n const config = {\r\n headers: { Authorization: 'Bearer' + localStorage.getItem('token') }\r\n };\r\n\r\n const postForm = {\r\n id_product: parseInt(id),\r\n principal: parseInt(loanProductDetail.min_plafond),\r\n period: parseInt(loanProductDetail.default_term),\r\n is_offset: false,\r\n id_loan_offsets:[\r\n {\r\n \"id_loan\": \"\"\r\n }\r\n ]\r\n }\r\n\r\n axios.post('https://commerce-kai-loan-core-opusb-prod.azurewebsites.net/loan/simulation',postForm,config)\r\n .then(response=> {\r\n let result = response.data.data;\r\n // console.log('result',result);\r\n\r\n setHasilSimulasi(result);\r\n setProgress(false)\r\n })\r\n }\r\n\r\n const rupiah = (number)=>{\r\n return new Intl.NumberFormat(\"id-ID\", {\r\n style: \"currency\",\r\n currency: \"IDR\"\r\n }).format(number);\r\n }\r\n\r\n const createRequest = () => {\r\n setOnOrder(false);\r\n navigate(`/order/${id}/identity`); \r\n }\r\n\r\n useEffect(() => {\r\n document.title = \"Koperasi Astra - \" + safeString(title === undefined ? '' : title.replaceAll('_',' '));\r\n setCar(getDetailCar(id));\r\n getCar();\r\n getProduct();\r\n }, []);\r\n \r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-start align-items-center flex-row py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <Link to=\"\" className=\"navbar-brand\" title=\"back\" onClick={() => navigate(-1)}>\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <p className=\"mb-0 bodytext1 semibold color-black500 px-2\">Detail Pinjaman</p>\r\n </div>\r\n </nav>\r\n\r\n <main role=\"main\" className=\"container-car container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 mt-5 pt-4\" style={{minHeight: '1vh'}}>\r\n {loading && <Loading />}\r\n\r\n {!loading && loanProductDetail === null && <EmptyState/>}\r\n \r\n {/* {car !== null && car.image.length > 0 && <ImageSliderNav banner={car.image}/>} */}\r\n\r\n {loanProductDetail !== null && \r\n <div className=\"container-data mt-5 mb-3\">\r\n\r\n {/* {loanProductDetail.catalog.link !== '' && */}\r\n <a href='#' target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-decoration-none container-spec d-flex align-content-start flex-wrap px-2 mb-3 data-spec\" id=\"data-spec\">\r\n <div className=\"spec-item d-flex flex-row item-align-center justify-content-start w-100\">\r\n <i className=\"headline4 color-black400 fi fi-rr-document\" style={{height: '32px'}}></i>\r\n <div className=\"flex-fill align-items-center pl-3\">\r\n <p className=\"bodytext1 color-black500 semibold mb-0\">Unduh Brosur Produk</p>\r\n <p className=\"caption color-black300 mb-0 align-items-center\">\r\n <i className=\"bodytext2 color-black400 fi fi-rr-download mr-2\"></i>\r\n </p>\r\n </div>\r\n </div>\r\n </a>\r\n {/* } */}\r\n\r\n {/* <p className=\"color-black500 bodytext1 semibold mb-1 px-3\">Spesifikasi</p>\r\n <div className=\"container-spec d-flex align-content-start flex-wrap px-2 mb-3 data-spec\" id=\"data-spec\">\r\n <div className=\"spec-item flex-column justify-content-start\">\r\n <p className=\"caption color-black300 mb-0\">Tahun</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">{car.year !== undefined ? car.year : '-'}</p>\r\n </div>\r\n\r\n <div className=\"spec-item flex-column justify-content-start\">\r\n <p className=\"caption color-black300 mb-0\">Bahan Bakar</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">{car.fuel !== undefined ? car.fuel : '-'}</p>\r\n </div>\r\n\r\n <div className=\"spec-item flex-column justify-content-start\">\r\n <p className=\"caption color-black300 mb-0\">Kilometer</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">{car.kilometer !== undefined ? car.kilometer : '-'}</p>\r\n </div>\r\n\r\n <div className=\"spec-item flex-column justify-content-start\">\r\n <p className=\"caption color-black300 mb-0\">Plat Nomor</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">{car.plate_number !== undefined ? car.plate_number : '-'}</p>\r\n </div>\r\n\r\n \r\n </div> */}\r\n\r\n {/* {car.color.length > 0 && \r\n <>\r\n <p className=\"color-black500 bodytext1 semibold mb-1 px-3\">Warna Tersedia</p>\r\n <div className=\"container-spec d-flex align-content-start flex-wrap px-2 data-dp mb-3\">\r\n {car.color.map((color, index) => \r\n <div className=\"spec-item flex-column justify-content-start\" key={index}>\r\n <p className=\"caption color-black300 mb-0\">Warna</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">{color !== '' ? color : '-'}</p>\r\n </div>)} \r\n </div>\r\n </>\r\n } */}\r\n \r\n <p className=\"color-black500 bodytext1 semibold mb-1 px-3\">Detail Pinjaman</p>\r\n <div className=\"container-spec d-flex align-content-start flex-wrap px-2 data-dp mb-3\" id=\"data-dp\">\r\n <div className=\"spec-item flex-column justify-content-start flex-fill\">\r\n <p className=\"caption color-black300 mb-0\">Min Tenor</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">{loanProductDetail.default_term}</p>\r\n </div>\r\n\r\n <div className=\"spec-item flex-column justify-content-start flex-fill\">\r\n <p className=\"caption color-black300 mb-0\">Min Pengajuan</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">{loanProductDetail.min_plafond}</p>\r\n </div>\r\n </div>\r\n \r\n <p className=\"color-black500 bodytext1 semibold mb-2 px-3\">Kontak</p>\r\n <div className=\"container-contact d-flex flex-row align-items-center px-3 py-3 mx-3 mb-5\">\r\n <img src={require('../assets/images/contact.jpg')} alt=\"\" className=\"mr-3\"/>\r\n <div className=\"flex-column flex-fill\">\r\n <p className=\"mb-0 bodytext1 semibold color-black600\">CS</p>\r\n <p className=\"mb-0 bodytext2 color-black300\">Koperasi Astra</p>\r\n </div>\r\n <a href=\"https://wa.me/+6285315131514/?text=Hallo,\" target=\"_blank\" id=\"sendMessage\" rel=\"noopener noreferrer\" className=\"text-decoration-none\">\r\n <i className=\"fi fi-brands-whatsapp mr-2 px-2 mt-1\" ></i>\r\n </a>\r\n \r\n <i className=\"fi fi-rr-phone-call px-2 mt-1\" onClick={() => window.open('tel:+6285315131514')}></i>\r\n </div>\r\n </div>\r\n }\r\n </main>\r\n <Footer withNavigation={loanProductDetail !== null}/>\r\n {loanProductDetail !== null && \r\n <>\r\n <nav className=\"navbar bottom-nav-buy fixed-bottom navbar-expand bg-white px-3 py-3 shadow-sm col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 text-center m-auto\">\r\n <form className=\"text-decoration-none d-flex flex-fill\">\r\n <button id=\"toggleFilter\" data-toggle=\"modal\" data-target=\"#dialogFilter\" disabled={onOrder && 'disabled'} className=\"button-message flex-fill bodytext2 semibold text-white d-flex flex-row justify-content-center align-items-center background-green500\" type=\"button\">\r\n <p className=\"mb-0 py-1\">\r\n {onOrder ? <Spinner/> : 'Ajukan Pinjaman'}\r\n </p>\r\n </button>\r\n </form>\r\n </nav>\r\n\r\n {loanProductDetail !== null && \r\n <div className=\"modal fade\" id=\"dialogFilter\" data-backdrop=\"static\" data-keyboard=\"false\" tabIndex=\"-1\" aria-labelledby=\"staticBackdropLabel\" aria-hidden=\"true\">\r\n <div className=\"modal-dialog modal-dialog-centered modal-dialog-scrollable col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12\">\r\n <div className=\"modal-content modal-filter-content\">\r\n <div className=\"modal-header\">\r\n <h5 className=\"modal-title headline6\" id=\"staticBackdropLabel\">Simulasikan Pinjaman</h5>\r\n <button type=\"button\" className=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n <i className=\"fi fi-br-cross headline6\"></i>\r\n </button>\r\n </div>\r\n <div className=\"modal-body\">\r\n <div className=\"justify-content-between mb-3\">\r\n <form encType=\"multipart/form-data\" className=\"container-form px-3 py-3 bg-white d-flex flex-column mb-3\">\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Silahkan isi Nominal Pinjaman\r\n </label>\r\n <input type=\"number\" min={0} name=\"name\" defaultValue={loanProductDetail.min_plafond} id=\"nominal\" className=\"form-input form-data-booking bodytext2 mb-3\" onChange={e => setNominal(e.target.value)} placeholder=\"Nominal Pinjaman\"/>\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Silahkan isi Periode Pinjaman\r\n </label>\r\n <input type=\"number\" min={0} max={60} defaultValue={loanProductDetail.default_term} name=\"name\" id=\"periode\" className=\"form-input form-data-booking bodytext2 mb-3\" onChange={e => setPeriode(e.target.value)} placeholder=\"Periode Pinjaman\"/>\r\n\r\n <button disabled={onProgress && 'disabled'} onClick={onSimulate} type=\"button\" id=\"buttonSave\" className=\"button-action-save text-white background-green500 bodytext1 text-center mt-5\">\r\n {onProgress ? <Spinner/> : 'Simulasikan Pinjaman'}\r\n </button>\r\n </form>\r\n </div>\r\n\r\n \r\n {hasilSimulasi !== null && \r\n <div>\r\n <p className=\"color-black500 bodytext1 semibold mb-1 px-3\">Total Pinjaman</p>\r\n <div className=\"container-spec d-flex align-content-start flex-wrap px-2 data-dp mb-3\" id=\"data-dp\">\r\n <div className=\"spec-item flex-column justify-content-start flex-fill\">\r\n <p className=\"caption color-black300 mb-0\">Total Diajukan</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">{hasilSimulasi.total_loan == null ? 0 : rupiah(hasilSimulasi.total_loan)}</p>\r\n </div>\r\n\r\n <div className=\"spec-item flex-column justify-content-start flex-fill\">\r\n <p className=\"caption color-black300 mb-0\">Total Bunga</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">{hasilSimulasi.total_interest == null ? 0 : rupiah(hasilSimulasi.total_interest)}</p>\r\n </div>\r\n\r\n <div className=\"spec-item flex-column justify-content-start flex-fill\">\r\n <p className=\"caption color-black300 mb-0\">Jangka Waktu</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">{hasilSimulasi.term == null ? 0 : hasilSimulasi.term}</p>\r\n </div>\r\n\r\n <div className=\"spec-item flex-column justify-content-start flex-fill\">\r\n <p className=\"caption color-black300 mb-0\">Dana Diterima</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">{hasilSimulasi.received == null ? 0 : rupiah(hasilSimulasi.received)}</p>\r\n </div>\r\n\r\n <div className=\"spec-item flex-column justify-content-start flex-fill\">\r\n <p className=\"caption color-black300 mb-0\">Bunga Perbulan</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">{hasilSimulasi.monthly_interest == null ? 0 : rupiah(hasilSimulasi.monthly_interest)}</p>\r\n </div>\r\n\r\n <div className=\"spec-item flex-column justify-content-start flex-fill\">\r\n <p className=\"caption color-black300 mb-0\">Cicilan Per Bulan</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">{hasilSimulasi.installments == null ? 0 : rupiah(hasilSimulasi.installments)}</p>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div className=\"modal-footer justify-content-around\">\r\n <button onClick={createRequest} type=\"button\" className=\"btn flex-fill button-message background-green500 bodytext2 text-white\" data-dismiss=\"modal\" id=\"buttonFilter\">Lanjutkan Pinjaman</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </>\r\n }\r\n\r\n\r\n \r\n </>\r\n )\r\n}\r\n\r\nexport default Product;","import React, {useEffect, useState} from \"react\";\r\nimport { useParams, useNavigate, Link} from \"react-router-dom\";\r\nimport Swal from \"sweetalert2\";\r\nimport Footer from \"../components/Footer\";\r\nimport Loading from \"../components/Loading\";\r\nimport axios from \"../helper/axios\";\r\nimport { getDataBooking, setDataBooking } from \"../helper/session\";\r\nimport Spinner from \"../components/Spinner\";\r\n\r\nconst OrderInputIdentity = React.memo(() => {\r\n const { id } = useParams();\r\n const [dokumenPinjaman, setDokumenPinjaman] = useState();\r\n const [dokumenAplikasi, setDokumenAplikasi] = useState([]);\r\n const [nominal,setNominal] = useState(3048103);\r\n const [periode,setPeriode] = useState(9);\r\n const [docTypeId,setDocTypeId] = useState('');\r\n const [phone,setPhone] = useState('');\r\n const [address,setAddress] = useState('');\r\n const [loading, setLoading] = useState(false);\r\n const [fileIdCard, setFileIdCard] = useState([]);\r\n const [fileDataURLId, setFileDataURLId] = useState([]);\r\n const [onProgress, setProgress] = useState(false);\r\n \r\n const navigate = useNavigate();\r\n\r\n // const getPinjamanAplikasi = () => {\r\n // setLoading(true);\r\n // const config = {\r\n // headers: { Authorization: localStorage.getItem('token') }\r\n // };\r\n\r\n // axios.get('https://commerce-kai-loan-core-opusb-prod.azurewebsites.net/loan/product/' + id,config)\r\n // .then(response => {\r\n // let result = response.data;\r\n // setLoading(false);\r\n // // console.log('result',result);\r\n // }).catch(error => {\r\n // setDokumenPinjaman(null);\r\n // setLoading(false);\r\n // Swal.fire({\r\n // title: 'Perhatian',\r\n // text: 'Terjadi kesalahan, silahkan kembali lagi nanti',\r\n // icon: 'error',\r\n // confirmButtonText: 'Kembali',\r\n // allowOutsideClick: false,\r\n // }).then((result) => {\r\n // if (result.value) {\r\n // navigate(-1);\r\n // }\r\n // })\r\n // });\r\n // }\r\n\r\n const getDokumenAplikasi = () => {\r\n setLoading(true);\r\n const config = {\r\n headers: { Authorization: localStorage.getItem('token') }\r\n };\r\n\r\n axios.get('https://commerce-kai-loan-core-opusb-prod.azurewebsites.net/loan/document/' + id,config)\r\n .then(response => {\r\n let result = response.data.data;\r\n setLoading(false);\r\n setDokumenAplikasi(result);\r\n\r\n // console.log('dokumen',result);\r\n }).catch(error => {\r\n setDokumenPinjaman(null);\r\n setLoading(false);\r\n Swal.fire({\r\n title: 'Perhatian',\r\n text: 'Terjadi kesalahan, silahkan kembali lagi nanti',\r\n icon: 'error',\r\n confirmButtonText: 'Kembali',\r\n allowOutsideClick: false,\r\n }).then((result) => {\r\n if (result.value) {\r\n navigate(-1);\r\n }\r\n })\r\n });\r\n }\r\n\r\n const toBase64 = (file) => new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n reader.onload = () => resolve(reader.result);\r\n reader.onerror = error => reject(error);\r\n });\r\n\r\n const setDocs = (e,doc_id) => {\r\n const fileIdCard = e.target.files;\r\n setFileIdCard(fileIdCard);\r\n setDocTypeId(doc_id)\r\n }\r\n\r\n const prepareDataBooking = async () => {\r\n const inputCarId = document.querySelector('#inputCardId');\r\n const inputCardFamilly = document.querySelector('#inputCardFamilly');\r\n const inputCardId2 = document.querySelector('#inputCardId2');\r\n\r\n let data = {\r\n nominal: nominal,\r\n periode: periode,\r\n cardId: await toBase64(inputCarId.files[0]),\r\n cardIdName: inputCarId.files[0].name,\r\n cardFamilly: await toBase64(inputCardFamilly.files[0]),\r\n cardFamillyName: inputCardFamilly.files[0].name,\r\n cardId2: inputCardId2.files.length > 0 ? await toBase64(inputCardId2.files[0]) : null,\r\n cardId2Name: inputCardId2.files.length > 0 ? inputCardId2.files[0].name : null,\r\n }\r\n setDataBooking(data)\r\n }\r\n\r\n\tconst convertBase64 = (file) => {\r\n\t\treturn new Promise((resolve, reject) => {\r\n\t\t const fileReader = new FileReader();\r\n\t\t fileReader.readAsDataURL(file)\r\n\t\t fileReader.onload = () => {\r\n\t\t\tresolve(fileReader.result);\r\n\t\t }\r\n\t\t fileReader.onerror = (error) => {\r\n\t\t\treject(error);\r\n\t\t }\r\n\t\t})\r\n\t}\r\n\r\n const uploadImage = async () => {\r\n setProgress(true)\r\n const config = {\r\n headers: { Authorization: localStorage.getItem('token') }\r\n };\r\n\r\n var doc_id = '';\r\n var doc_photo = '';\r\n const formData = new FormData()\r\n\r\n dokumenAplikasi.forEach((v,i)=>{\r\n if(v.path == \"\"){\r\n doc_id = v.id_document_type;\r\n }\r\n })\r\n\r\n const temp_doc_id = fileIdCard[0];\r\n const fileAfterConvert = await convertBase64(temp_doc_id);\r\n // var strImage = fileAfterConvert.replace(/^data:image\\/[a-z]+;base64,/, \"\");\r\n\r\n const postForm = {\r\n doc_photo: fileAfterConvert,\r\n id_document_type: doc_id\r\n }\r\n\r\n axios.post('https://lendtick-user-prod.koperasi-astra.com/profile/document/add',postForm,config) \r\n .then(response => {\r\n // console.log('response',response);\r\n setProgress(false)\r\n Swal.fire({\r\n icon: 'success',\r\n title: 'Berhasil',\r\n text: 'Dokumen berhasil disubmit',\r\n }).then(res => {\r\n window.location.reload();\r\n })\r\n setContentProgess(false);\r\n }).catch(error => {\r\n // console.log('error',error);\r\n });\r\n }\r\n\r\n const updateImage = async () => {\r\n setProgress(true)\r\n const config = {\r\n headers: { Authorization: localStorage.getItem('token') }\r\n };\r\n\r\n var doc_id = '';\r\n var doc_photo = '';\r\n const formData = new FormData()\r\n\r\n const temp_doc_id = fileIdCard[0];\r\n const fileAfterConvert = await convertBase64(temp_doc_id);\r\n // var strImage = fileAfterConvert.replace(/^data:image\\/[a-z]+;base64,/, \"\");\r\n\r\n const postForm = {\r\n doc_photo: fileAfterConvert,\r\n id_document_type: docTypeId\r\n }\r\n\r\n axios.post('https://lendtick-user-prod.koperasi-astra.com/profile/document/update',postForm,config) \r\n .then(response => {\r\n // console.log('response',response);\r\n setProgress(false)\r\n Swal.fire({\r\n icon: 'success',\r\n title: 'Berhasil',\r\n text: 'Dokumen berhasil di update',\r\n }).then(res => {\r\n window.location.reload();\r\n })\r\n setContentProgess(false);\r\n }).catch(error => {\r\n // console.log('error',error);\r\n });\r\n }\r\n\r\n const setContentProgess = (status) => {\r\n\t\tsetProgress(status);\r\n\t\tdocument.getElementById('buttonSave').disabled = status\r\n\t}\r\n\r\n const createOrder = () => {\r\n setProgress(true)\r\n const config = {\r\n headers: { Authorization: localStorage.getItem('token') }\r\n };\r\n\r\n const postSimulate = {\r\n id_product: id,\r\n principal: nominal,\r\n period: periode,\r\n is_offset: false,\r\n id_loan_offsets:[\r\n {\r\n \"id_loan\": \"\"\r\n }\r\n ]\r\n }\r\n\r\n axios.post('https://commerce-kai-loan-core-opusb-prod.azurewebsites.net/loan/simulation',postSimulate,config)\r\n .then(response=> {\r\n let result = response.data.data;\r\n \r\n const today = new Date();\r\n const todayIso = today.toISOString();\r\n\r\n const postForm = {\r\n id_product: id,\r\n request_date: todayIso,\r\n loan_request: nominal,\r\n term_monthly: periode,\r\n installments: result.installments,\r\n is_offset: false,\r\n loan_offsets: [\r\n {\r\n \"id_loan\": \"\",\r\n \"unpaid_installment\": 0\r\n }\r\n ],\r\n voucher_code: 0\r\n }\r\n\r\n axios.post('https://commerce-kai-loan-core-opusb-prod.azurewebsites.net/loan/request',postForm,config) \r\n .then(response => {\r\n setProgress(false)\r\n // console.log('response',response);\r\n Swal.fire({\r\n icon: 'success',\r\n title: 'Berhasil',\r\n text: 'Pengajuan berhasil dibuat',\r\n }).then(res => {\r\n if(res.value){\r\n navigate('/home', { replace: true });\r\n }\r\n })\r\n setContentProgess(false);\r\n }).catch(error => {\r\n // console.log('error',error);\r\n });\r\n\r\n })\r\n }\r\n\r\n useEffect(() => {\r\n document.title = 'Identitas Peminjam';\r\n let last = getDataBooking();\r\n setLoading(false);\r\n setDokumenPinjaman(getDokumenAplikasi());\r\n }, []);\r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-start align-items-center flex-row py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <Link to=\"\" className=\"navbar-brand\" title=\"back\" onClick={() => navigate(-1)}>\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <p className=\"mb-0 bodytext1 semibold color-black500 px-2\">Informasi Pinjaman</p>\r\n </div>\r\n </nav>\r\n\r\n <main role=\"main\" className=\"container-car container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 mt-5 pt-2\">\r\n {loading && <Loading/>}\r\n {!loading && dokumenAplikasi !== null && \r\n <form className=\"container-form px-3 py-3 bg-white d-flex flex-column mb-3\">\r\n <p className=\"headline6 color-black500 semibold p-0 mb-4\">\r\n Identitas Peminjam\r\n </p>\r\n\r\n <input type=\"text\" name=\"id\" id=\"productId\" hidden/>\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Nominal Pinjaman <span className=\"text-danger\">*</span>\r\n </label>\r\n <input onKeyUp={e => setNominal(e.target.value)} defaultValue={nominal} type=\"number\" min={0} id=\"inputName\" name=\"name\" maxLength=\"100\" className=\"form-input form-data-booking bodytext2 mb-3\" placeholder=\"Masukkan Nominal Pinjaman\" required/>\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Jangka Waktu <span className=\"text-danger\">*</span>\r\n </label>\r\n <input onKeyUp={e => setPeriode(e.target.value)} defaultValue={periode} type=\"number\" min={0} max={60} id=\"inputName\" name=\"name\" maxLength=\"100\" className=\"form-input form-data-booking bodytext2 mb-3\" placeholder=\"Masukkan Jangka Waktu Pinjaman\" required/>\r\n\r\n {!loading && dokumenAplikasi.length > 0 ? \r\n <div>\r\n {dokumenAplikasi.map((docs, index) => \r\n <div className=\"spec-item flex-column justify-content-start\" key={index}>\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\" style={{marginTop:10}}>\r\n {docs.document_name} <span className=\"text-danger\">*</span>\r\n </label>\r\n {docs.path == \"\" ? <div>\r\n <input type=\"file\" onChange={setDocs} accept=\"image/*,.pdf\" name=\"cardId\" id=\"updateDoc\" className=\"form-input form-data-file-booking bodytext2\" encType=\"multipart/form-data\" required/>\r\n <p className=\"mb-3 caption color-black300 mt-1\">format file: JPG,JPEG, PNG,PDF max upload 2Mb</p>\r\n <button disabled={onProgress && 'disabled'} onClick={uploadImage} type=\"button\" id=\"buttonSave\" className=\"button-message flex-fill bodytext2 semibold text-white d-flex flex-row justify-content-center align-items-center background-green500\">\r\n {onProgress ? <Spinner/> : 'Simpan Perubahan'}\r\n </button>\r\n </div> : \r\n <div>\r\n <img style={{width:300,height:200}} src={docs.path} alt=\"preview\" />\r\n\r\n <input type=\"file\" onChange={(event)=> { \r\n setDocs(event,docs.id_document_type)\r\n }} accept=\"image/*,.pdf\" name=\"cardId\" id=\"updateDoc\" className=\"form-input form-data-file-booking bodytext2\" encType=\"multipart/form-data\" required/>\r\n <p className=\"mb-3 caption color-black300 mt-1\">format file: JPG,JPEG, PNG,PDF max upload 2Mb</p>\r\n <button disabled={onProgress && 'disabled'} onClick={updateImage} type=\"button\" id=\"buttonSave\" className=\"button-message flex-fill bodytext2 semibold text-white d-flex flex-row justify-content-center align-items-center background-green500\">\r\n {onProgress ? <Spinner/> : 'Simpan Perubahan'}\r\n </button>\r\n\r\n </div>}\r\n </div>)} \r\n \r\n </div> : null}\r\n\r\n </form>\r\n }\r\n </main>\r\n\r\n <Footer withNavigation={!loading && dokumenAplikasi !== null}/>\r\n \r\n {!loading && dokumenAplikasi !== null && \r\n <nav className=\"navbar bottom-nav-buy fixed-bottom navbar-expand bg-white px-3 py-3 shadow-sm col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 text-center m-auto\">\r\n <button onClick={createOrder} id=\"buttonSubmit\" className=\"button-message flex-fill bodytext2 semibold text-white d-flex flex-row justify-content-center align-items-center background-green500\" type=\"button\">\r\n <p className=\"mb-0 py-1\">Ajukan Pinjaman</p>\r\n </button>\r\n </nav>\r\n }\r\n \r\n </>\r\n );\r\n});\r\n\r\nexport default OrderInputIdentity;","import React,{useState, useEffect} from \"react\";\r\nimport { Link, useNavigate, useParams } from \"react-router-dom\";\r\nimport Swal from \"sweetalert2\";\r\nimport Footer from \"../components/Footer\";\r\nimport Loading from \"../components/Loading\";\r\nimport Spinner from \"../components/Spinner\";\r\nimport axios, { cardetail, ordercreate, orderpayment, orderupload } from \"../helper/axios\";\r\nimport { deleteCurrentCar, deleteLastBooking, getAccount, getColorSelected, getCurrentCar, getDataBooking, getLastBooking, setBooking, setLastBooking } from \"../helper/session\";\r\nconst OrderPaymentMethod = React.memo(() => {\r\n const { id } = useParams();\r\n const [car, setCar] = useState(getCurrentCar());\r\n const [loading, setLoading] = useState(false);\r\n const [progress, setProgress] = useState(false);\r\n const [paymentSelected, setPaymentSelected] = useState(null);\r\n\r\n const navigate = useNavigate();\r\n\r\n // const getCar = () => {\r\n // setLoading(true);\r\n // if(getDataBooking() !== null){\r\n // axios.get(cardetail + '?id=' + id)\r\n // .then(response => {\r\n // let result = response.data;\r\n // setLoading(false);\r\n // if(result.status){\r\n // setCar(result.data);\r\n // }else{\r\n // deleteCurrentCar();\r\n // Swal.fire({\r\n // title: 'Perhatian',\r\n // text: 'Mobil yang anda pilih tidak tersedia',\r\n // icon: 'error',\r\n // confirmButtonText: 'Kembali',\r\n // allowOutsideClick: false,\r\n // }).then((result) => {\r\n // if (result.value) {\r\n // deleteCurrentCar();\r\n // navigate(-1);\r\n // }\r\n // })\r\n // }\r\n // }).catch(error => {\r\n // setCar(null);\r\n // setLoading(false);\r\n\r\n // deleteCurrentCar();\r\n // Swal.fire({\r\n // title: 'Perhatian',\r\n // text: 'Terjadi kesalahan, silahkan kembali lagi nanti',\r\n // icon: 'error',\r\n // confirmButtonText: 'Kembali',\r\n // allowOutsideClick: false,\r\n // }).then((result) => {\r\n // if (result.value) {\r\n // deleteCurrentCar();\r\n // navigate(-1);\r\n // }\r\n // })\r\n // });\r\n // }else{\r\n // Swal.fire({\r\n // title: 'Perhatian',\r\n // text: 'Terjadi kesalahan, silahkan kembali lagi nanti',\r\n // icon: 'error',\r\n // confirmButtonText: 'Kembali',\r\n // allowOutsideClick: false,\r\n // }).then((result) => {\r\n // if (result.value) {\r\n // deleteCurrentCar();\r\n // navigate(-1);\r\n // }\r\n // })\r\n // }\r\n // }\r\n\r\n const dataURLtoFile = (dataurl, filename) => {\r\n var arr = dataurl.split(','),\r\n mime = arr[0].match(/:(.*?);/)[1],\r\n bstr = atob(arr[1]), \r\n n = bstr.length, \r\n u8arr = new Uint8Array(n);\r\n while(n--){\r\n u8arr[n] = bstr.charCodeAt(n);\r\n }\r\n \r\n return new File([u8arr], filename, {type:mime});\r\n }\r\n\r\n const uploadPaymentType = (code) => {\r\n setProgress(true);\r\n axios.postForm(orderpayment,{\r\n code: code,\r\n payment_method: parseInt(paymentSelected)\r\n })\r\n .then(response => {\r\n setProgress(false);\r\n let result = response.data;\r\n //// console.log('result upload payment type : ');\r\n //// console.log(result);\r\n if(result.status){\r\n deleteLastBooking(`${car.id}`);\r\n Swal.fire({\r\n title: 'Pemesanan berhasil',\r\n text: 'Silahkan lakukan pembayaran sesuai dengan metode yang anda pilih',\r\n icon: 'success',\r\n confirmButtonText: 'Mengerti',\r\n allowOutsideClick: false,\r\n }).then((result)=>{\r\n if(result.value){\r\n navigate(`/order/${code}/bill`, { replace: true });\r\n }\r\n })\r\n }else{\r\n setProgress(false);\r\n Swal.fire({\r\n title: 'Gagal',\r\n text: result.message,\r\n icon: 'error',\r\n confirmButtonText: 'Mengerti'\r\n })\r\n }\r\n }).catch(error => {\r\n //// console.log(error);\r\n setProgress(false);\r\n Swal.fire({\r\n title: 'Perhatian',\r\n text: 'Gagal mengupload file',\r\n icon: 'error',\r\n confirmButtonText: 'Mengerti',\r\n })\r\n });\r\n }\r\n\r\n const uploadImage = (code) => {\r\n setProgress(true);\r\n const data = getDataBooking();\r\n const postForm = {\r\n code: code,\r\n card_id: dataURLtoFile(data.cardId,data.cardIdName),\r\n card_familly: dataURLtoFile(data.cardFamilly, data.cardFamillyName),\r\n card_id_2: data.cardId2 != null ? dataURLtoFile(data.cardId2, data.cardId2Name) : null,\r\n }\r\n axios.postForm(orderupload, postForm)\r\n .then(response => {\r\n let result = response.data;\r\n //// console.log('result upload image : ');\r\n //// console.log(result);\r\n if(result.status){\r\n const lastBooking = getLastBooking(`${car.id}`)\r\n setLastBooking(`${car.id}`,{\r\n car: lastBooking.car,\r\n code: lastBooking.code,\r\n image: true,\r\n });\r\n uploadPaymentType(code);\r\n }else{\r\n setProgress(false);\r\n Swal.fire({\r\n title: 'Gagal',\r\n text: result.message,\r\n icon: 'error',\r\n confirmButtonText: 'Mengerti',\r\n })\r\n }\r\n }).catch(error => {\r\n //// console.log(error);\r\n setProgress(false);\r\n Swal.fire({\r\n title: 'Perhatian',\r\n text: 'Gagal mengupload file',\r\n icon: 'error',\r\n confirmButtonText: 'Mengerti',\r\n })\r\n })\r\n }\r\n\r\n const uploadData = () => {\r\n setProgress(true);\r\n const user = getAccount();\r\n const data = getDataBooking();\r\n axios.postForm(ordercreate, {\r\n id: user.id,\r\n id_car: car.id,\r\n name: data.name,\r\n address: data.address,\r\n phone: data.phone,\r\n name_2: data.name2,\r\n note : getColorSelected() !== null ? getColorSelected() : null,\r\n }).then(response => {\r\n let result = response.data;\r\n //('result upload data:');\r\n //// console.log(result);\r\n if(result.status){\r\n const code = result.code;\r\n setBooking({\r\n car: car.id,\r\n code: code,\r\n });\r\n setLastBooking(`${car.id}`,{\r\n car: car.id,\r\n code: code,\r\n image: false\r\n });\r\n uploadImage(code);\r\n }else{\r\n setProgress(false);\r\n Swal.fire({\r\n title: 'Perhatian',\r\n text: result.message,\r\n icon: 'error',\r\n confirmButtonText: 'Mengerti',\r\n })\r\n }\r\n }).catch(error => {\r\n //// console.log(error);\r\n setProgress(false);\r\n Swal.fire({\r\n title: 'Perhatian',\r\n text: 'Terjadi kesalahan',\r\n icon: 'error',\r\n confirmButtonText: 'Mengerti',\r\n })\r\n });\r\n }\r\n\r\n const createOrder = () => {\r\n if(paymentSelected !== null){\r\n setProgress(true);\r\n axios.get(cardetail + '?id=' + id)\r\n .then(response => {\r\n let result = response.data;\r\n //// console.log('result create order:');\r\n //// console.log(result);\r\n if(result.status){\r\n if(result.data.status === 'Ready'){\r\n let lastBooking = getLastBooking(id);\r\n if(lastBooking === null){\r\n uploadData();\r\n }else{\r\n if(lastBooking.image){\r\n uploadPaymentType(lastBooking.code);\r\n }else{\r\n uploadImage(lastBooking.code);\r\n }\r\n }\r\n }else{\r\n setProgress(false);\r\n Swal.fire({\r\n title: 'Perhatian',\r\n text: 'Mobil yang anda pilih sudah tidak tersedia',\r\n icon: 'error',\r\n confirmButtonText: 'Kembali',\r\n allowOutsideClick: false,\r\n }).then((result) => {\r\n if (result.value) {\r\n deleteCurrentCar();\r\n navigate(-1);\r\n }\r\n })\r\n }\r\n }else{\r\n setProgress(false);\r\n deleteCurrentCar();\r\n Swal.fire({\r\n title: 'Perhatian',\r\n text: 'Mobil yang anda pilih tidak tersedia',\r\n icon: 'error',\r\n confirmButtonText: 'Kembali',\r\n allowOutsideClick: false,\r\n }).then((result) => {\r\n if (result.value) {\r\n deleteCurrentCar();\r\n navigate(-1);\r\n }\r\n })\r\n }\r\n }).catch(error => {\r\n //// console.log(error);\r\n setProgress(false);\r\n deleteCurrentCar();\r\n Swal.fire({\r\n title: 'Perhatian',\r\n text: 'Terjadi kesalahan, silahkan kembali lagi nanti',\r\n icon: 'error',\r\n confirmButtonText: 'Kembali',\r\n allowOutsideClick: false,\r\n }).then((result) => {\r\n if (result.value) {\r\n deleteCurrentCar();\r\n navigate(-1);\r\n }\r\n })\r\n });\r\n }else{\r\n Swal.fire({\r\n title: 'Perhatian',\r\n text: 'Silahkan pilih metode pembayaran',\r\n icon: 'error',\r\n confirmButtonText: 'Mengerti',\r\n })\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n document.title = 'Pilih Metode Pembayaran';\r\n setCar(getCurrentCar());\r\n setLoading(false);\r\n // getCar();\r\n }, []);\r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-start align-items-center flex-row py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <Link to=\"\" className=\"navbar-brand\" title=\"back\" onClick={() => navigate(-1)}>\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <p className=\"mb-0 bodytext1 semibold color-black500 px-2\">Informasi Pemesanan</p>\r\n </div>\r\n </nav>\r\n\r\n <main role=\"main\" className=\"container-car container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 mt-5 pt-2\" style={{minHeight: '330px'}}>\r\n {loading && <Loading/>}\r\n {!loading && car !== null && \r\n <div className=\"container-form px-3 py-3 bg-white d-flex flex-column mb-3\">\r\n <p className=\"headline6 color-black500 semibold p-0 mb-3\">\r\n Rencana Pembayaran\r\n </p>\r\n <div className=\"d-flex flex-row product-section-payment justify-content-between mb-3\">\r\n <img id=\"dataImage\" src={car.image_cover} alt=\"\"/>\r\n <div className=\"flex-fill ml-3\">\r\n <p className=\"caption color-green500 semibold mb-0\" id=\"dataMerk\">{car.brand}</p>\r\n <p className=\"headline6 semibold color-black800 mb-0\" id=\"dataModel\">{car.model}</p>\r\n <p className=\"bodytext1 color-black300 mb-0\" id=\"dataColorYear\">{getColorSelected()} | {car.year}</p>\r\n </div>\r\n </div>\r\n <p className=\"bodytext1 color-black500 semibold p-0 mb-2\">\r\n Pilih Pembayaran\r\n </p>\r\n <form id=\"formPayment\" name=\"formPayment\" className=\"container-payment-type d-flex flex-column\">\r\n <label onClick={() => setPaymentSelected(0)} className={paymentSelected === 0 ? 'payment-type-item d-flex flex-column justify-content-start w-100 mb-2 active' : 'payment-type-item d-flex flex-column justify-content-start w-100 mb-2'}>\r\n <p className=\"bodytext2 color-black500 semibold mb-1\">Cash</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">{car.price}</p>\r\n </label>\r\n {car.payments.map((pay, index) => \r\n <label onClick={() => setPaymentSelected(pay.id)} className={paymentSelected === pay.id ? 'payment-type-item d-flex flex-column justify-content-start w-100 mb-2 active' : 'payment-type-item d-flex flex-column justify-content-start w-100 mb-2'} key={index}>\r\n <p className=\"bodytext2 color-black500 semibold mb-1\">{pay.label}</p>\r\n <div className=\"d-flex flex-fill flex-row justity-content-between w-100\">\r\n <p className=\"bodytext2 flex-fill color-black500 semibold mb-0\">DP: {pay.dp}</p>\r\n <p className=\"bodytext2 color-black500 semibold mb-0\">Cicilan: {pay.cicilan}</p>\r\n </div>\r\n </label> \r\n )}\r\n </form>\r\n </div>\r\n }\r\n </main>\r\n\r\n <Footer withNavigation={!loading && car !== null}/>\r\n\r\n {!loading && car !== null && \r\n <nav className=\"navbar bottom-nav-buy fixed-bottom navbar-expand bg-white px-3 py-3 shadow-sm col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 text-center m-auto\">\r\n <button onClick={() => navigate(-1)} type=\"reset\" className=\"btn flex-fill button-action-filter button-back-payment w-50 bg-white bodytext2 semibold color-green500 mr-2\">\r\n Kembali\r\n </button>\r\n <button onClick={createOrder} disabled={progress && 'disabled'} id=\"buttonSubmit\" className=\"button-message flex-fill bodytext2 semibold w-50 text-white d-flex flex-row justify-content-center align-items-center background-green500\" type=\"button\">\r\n <p className=\"mb-0 py-1\">\r\n {progress ? <Spinner/> : 'Konfirmasi'}\r\n </p>\r\n </button>\r\n </nav>\r\n }\r\n </>\r\n );\r\n});\r\n\r\nexport default OrderPaymentMethod;","import React, {useState, useEffect} from \"react\";\r\nimport { Link, useNavigate, useParams } from \"react-router-dom\";\r\nimport Swal from \"sweetalert2\";\r\nimport Footer from \"../components/Footer\";\r\nimport Loading from \"../components/Loading\";\r\nimport Spinner from \"../components/Spinner\";\r\nimport axios, { orderpaymentinfo, orderuploadpayment } from \"../helper/axios\";\r\n\r\nconst OrderBill = React.memo(() => {\r\n const { code } = useParams();\r\n const [loading , setLoading] = useState(true);\r\n const [data, setData] = useState(null);\r\n const [progress, setProgress] = useState(false);\r\n \r\n const navigate = useNavigate();\r\n\r\n const uploadFile = () => {\r\n const image = document.querySelector('#buktiBayar')\r\n if(image.files.length > 0){\r\n setProgress(true);\r\n axios.postForm(orderuploadpayment,{\r\n code: code,\r\n image: image.files[0]\r\n }).then(response => {\r\n setProgress(false);\r\n let result = response.data;\r\n if(result.status){\r\n Swal.fire({\r\n icon: 'success',\r\n title: 'Berhasil',\r\n text: 'Bukti pembayaran berhasil dikirim.',\r\n confirmButtonText: 'Lanjutkan',\r\n }).then(()=>{\r\n navigate('/home/history', {replace: true});\r\n })\r\n }else{\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Perhatian',\r\n text: result.message,\r\n confirmButtonText: 'Mengerti',\r\n })\r\n }\r\n }).catch(error => {\r\n setProgress(false);\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Terjadi Kesalahan',\r\n text: 'Silahkan mencoba lagi nanti',\r\n confirmButtonText: 'Mengerti',\r\n })\r\n })\r\n }else{\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Perhatian',\r\n text: 'Bukti pembayaran belum dipilih',\r\n confirmButtonText: 'Mengerti',\r\n })\r\n }\r\n }\r\n\r\n const copyContent = (content) => {\r\n navigator.clipboard.writeText(content).then(function() {\r\n // // console.log('Berhasil disalin ke clipboard');\r\n alert('Berhasil disalin ke clipboard');\r\n }, function(err) {\r\n console.error('Tidak dapat menyalin', err);\r\n alert('Tidak dapat menyalin');\r\n });\r\n }\r\n\r\n const getOrder = async () => {\r\n setLoading(true);\r\n axios.postForm(orderpaymentinfo,{\r\n code: code\r\n })\r\n .then(response => {\r\n let result = response.data;\r\n setLoading(false);\r\n if(result.status){\r\n const data = result.data; \r\n setData(data); \r\n }else{\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Perhatian',\r\n text: result.message,\r\n confirmButtonText: 'Kembali',\r\n }).then(() => {\r\n navigate('/home/history', { replace: true });\r\n });\r\n }\r\n }).catch(error => {\r\n setLoading(false);\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Terjadi Kesalahan',\r\n text: 'Telah terjadi kesalahan, silahkan mencoba lagi nanti',\r\n confirmButtonText: 'Kembali',\r\n }).then(() => {\r\n navigate('/home/history', { replace: true });\r\n });\r\n });\r\n }\r\n\r\n useEffect(() => {\r\n document.title = \"Unggah Bukti Bayar\";\r\n setLoading(true);\r\n getOrder();\r\n }, []);\r\n\r\n return(\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-start align-items-center flex-row py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <Link to=\"\" onClick={() => navigate(-1)} className=\"navbar-brand\" title=\"back\">\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <p className=\"mb-0 bodytext1 semibold color-black500 px-2\">Informasi Pembayaran Booking</p>\r\n </div>\r\n </nav>\r\n\r\n <main role=\"main\" className=\"container-car container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 mt-5 pt-2\">\r\n {loading && <Loading/>}\r\n {!loading && data !== null && \r\n <>\r\n <div className=\"container-form px-3 py-3 bg-white d-flex flex-column mb-3\">\r\n <p className=\"bodytext1 color-black500 semibold p-0 mb-4\">\r\n Untuk melanjutkan booking, harap transfer sesuai petunjuk di bawah!\r\n </p>\r\n <p className=\"bodytext1 color-black500 semibold p-0\">\r\n Bank BRI (Transfer)\r\n </p>\r\n\r\n <p className=\"caption color-black500 p-0 mb-1\">\r\n Nomor Rekening\r\n </p>\r\n <div className=\"d-flex flex-fill flex-column-justify-content-between mb-0\">\r\n <p className=\"bodytext2 color-black500 p-0 flex-fill\">\r\n <b id=\"norek\">1246476978028</b>\r\n </p>\r\n <Link to=\"\" className=\"text-decoration-none bodytext2 semibold color-green500 p-0\" onClick={() => copyContent('1246476978028')}>\r\n Salin\r\n </Link>\r\n </div>\r\n\r\n <p className=\"caption color-black500 p-0 mb-1\">\r\n Kode Unik\r\n </p>\r\n <p className=\"bodytext2 color-black500 p-0 flex-fill\" id=\"codeUnique\">\r\n {data.code_unique}\r\n </p>\r\n\r\n <p className=\"caption color-black500 p-0 mb-1\">\r\n Total Bayar\r\n </p>\r\n <div className=\"d-flex flex-fill flex-column-justify-content-between mb-0\">\r\n <p className=\"bodytext2 color-black500 p-0 flex-fill\" id=\"totalPayment\">\r\n {data.total_payment}\r\n </p>\r\n <Link to=\"\" className=\"text-decoration-none bodytext2 semibold color-green500 p-0\" onClick={() => copyContent(data.total_payment)}>\r\n Salin\r\n </Link>\r\n </div>\r\n\r\n <p className=\"caption semibold text-danger p-0\">\r\n * Pastikan untuk membayar sesuai total bayar!\r\n </p>\r\n </div>\r\n\r\n <form className=\"container-form px-3 py-3 bg-white d-flex flex-column mb-3\">\r\n <p className=\"bodytext1 color-black500 semibold p-0 mb-4\">\r\n Upload Bukti Bayar\r\n </p>\r\n \r\n <input type=\"file\" accept=\"image/*,.pdf\" name=\"payment-image\" id=\"buktiBayar\" className=\"form-input form-data-file-booking bodytext2\" placeholder=\"Pilih file\" encType=\"multipart/form-data\"/>\r\n <p className=\"mb-3 caption color-black300 mt-1\">format file: JPG,JPEG, PNG,PDF max upload 2Mb</p>\r\n <button onClick={uploadFile} disabled={progress && 'disabled'} type=\"button\" id=\"buttonSubmit\" className=\"button-message flex-fill bodytext2 semibold text-white d-flex flex-row justify-content-center align-items-center background-green500\">\r\n <p className=\"mb-0 py-1\">\r\n {progress ? <Spinner/> : 'Kirim Bukti Pembayaran'}\r\n </p>\r\n </button>\r\n </form>\r\n\r\n\r\n <div className=\"container-form px-3 py-3 bg-white d-flex flex-column mb-3\">\r\n <p className=\"bodytext1 color-black500 semibold p-0 mb-4\">\r\n Petunjuk Transfer Bank\r\n </p>\r\n <div className=\"accordion payment-guide\" id=\"accordionExample\">\r\n <div className=\"card\">\r\n <div className=\"card-header\" id=\"headingOne\">\r\n <button className=\"btn btn-link btn-block text-left d-flex justify-content-between collapsed\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapseOne\" aria-expanded=\"true\" aria-controls=\"collapseOne\">\r\n <p className=\"mb-0 flex-fill\">Petunjuk Transfer ATM</p>\r\n <i className=\"fi fi-br-angle-down down bodytext1\"></i>\r\n <i className=\"fi fi-br-angle-up up bodytext1\"></i>\r\n </button>\r\n </div>\r\n \r\n <div id=\"collapseOne\" className=\"collapse\" aria-labelledby=\"headingOne\" data-parent=\"#accordionExample\">\r\n <div className=\"card-body\">\r\n Belum ada informasi\r\n </div>\r\n </div>\r\n </div>\r\n <div className=\"card\">\r\n <div className=\"card-header\" id=\"headingTwo\">\r\n <button className=\"btn btn-link btn-block text-left d-flex justify-content-between collapsed\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapseTwo\" aria-expanded=\"false\" aria-controls=\"collapseTwo\">\r\n <p className=\"mb-0 flex-fill\">Petunjuk Transfer iBanking</p>\r\n <i className=\"fi fi-br-angle-down down bodytext1\"></i>\r\n <i className=\"fi fi-br-angle-up up bodytext1\"></i>\r\n </button>\r\n </div>\r\n <div id=\"collapseTwo\" className=\"collapse\" aria-labelledby=\"headingTwo\" data-parent=\"#accordionExample\">\r\n <div className=\"card-body\">\r\n Belum ada informasi\r\n </div>\r\n </div>\r\n </div>\r\n <div className=\"card\">\r\n <div className=\"card-header\" id=\"headingThree\">\r\n <button className=\"btn btn-link btn-block text-left d-flex justify-content-between\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapseThree\" aria-expanded=\"false\" aria-controls=\"collapseTwo\">\r\n <p className=\"mb-0 flex-fill\">Petunjuk Transfer mBanking</p>\r\n <i className=\"fi fi-br-angle-down down bodytext1\"></i>\r\n <i className=\"fi fi-br-angle-up up bodytext1\"></i>\r\n </button>\r\n </div>\r\n <div id=\"collapseThree\" className=\"collapse show\" aria-labelledby=\"headingThree\" data-parent=\"#accordionExample\">\r\n <div className=\"card-body\">\r\n <ol type=\"1\">\r\n <li>Buka aplikasi, kemudian pilih menu Mobile Banking BRI.</li>\r\n <li>Untuk mengirim uang, tap menu Transfer.</li>\r\n <li>Untuk transfer ke sesama rekening BRI, tap menu Sesama BRI.</li>\r\n <li>Pada halaman baru, masukkan nomor rekening BRI yang dituju.</li>\r\n <li>Masukkan jumlah transfer yang akan dikirim.</li>\r\n <li>Klik OK. Lalu, masukkan PIN Mobile Banking BRI Anda. Klik SEND.</li>\r\n <li>Untuk melakukan verifikasi SMS, Klik OK.</li>\r\n <li>Terima SMS dari Mobile Banking BRI, lalu ketik YA <br/> Kode Transaksi. Kalau bingung, ikuti saja petunjuk yang ada pada SMS tersebut.</li>\r\n <li>Kalau sudah benar, langsung Kirim SMS.</li>\r\n </ol>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </>\r\n }\r\n </main>\r\n\r\n <Footer/>\r\n </>\r\n );\r\n});\r\n\r\nexport default OrderBill;","import React, {useEffect, useState} from \"react\";\r\nimport { Link, useNavigate, useParams } from \"react-router-dom\";\r\nimport Swal from \"sweetalert2\";\r\nimport Footer from \"../components/Footer\";\r\nimport Loading from \"../components/Loading\";\r\nimport Spinner from \"../components/Spinner\";\r\nimport axios, { orderconfirm, orderdetail } from \"../helper/axios\";\r\nimport { getAccount } from \"../helper/session\";\r\n\r\nconst OrderDetail = React.memo(() => {\r\n const {code} = useParams();\r\n const [order, setOrder] = useState(null);\r\n const [loading, setLoading] = useState(true);\r\n const [progress, setProgress] = useState(false);\r\n const [user, setUser] = useState(getAccount());\r\n const navigate = useNavigate();\r\n\r\n const getOrder = async () => {\r\n setLoading(true);\r\n axios.get(`${orderdetail}?id=${code}&user_id=${user.id}`)\r\n .then(response => {\r\n setLoading(false);\r\n let result = response.data;\r\n if(result.status){\r\n setOrder(result.data);\r\n }else{\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Perhatian',\r\n text: result.message,\r\n confirmButtonText: 'Mengerti',\r\n }).then(() => {\r\n navigate('/home/history', {replace: true});\r\n });\r\n }\r\n }).catch(error => {\r\n setLoading(false);\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Terjadi kesalahan',\r\n text: 'Terjadi kesalahan, silahkan coba lagi',\r\n confirmButtonText: 'Mengerti',\r\n }).then(() => {\r\n navigate('/home/history', {replace: true});\r\n });\r\n })\r\n }\r\n\r\n const orderConfirm = async () => {\r\n Swal.fire({\r\n title: 'Mobil sudah diterima?',\r\n text: 'Apakah kamu yakin pesanan kamu sudah sampai?',\r\n icon: 'question',\r\n showCancelButton: true,\r\n cancelButtonText: 'Tidak',\r\n confirmButtonText: 'Ya, Sudah Sampai'\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n setProgress(true);\r\n axios.get(`${orderconfirm}?id=${code}&user_id=${user.id}`)\r\n .then(response => {\r\n setProgress(false);\r\n let result = response.data;\r\n // // console.log(result);\r\n if(result.status){\r\n Swal.fire({\r\n title: 'Pesanan Diterima',\r\n text: 'Pesanan kamu sudah diterima',\r\n icon: 'success',\r\n confirmButtonText: 'OK'\r\n }).then((result) => {\r\n getOrder();\r\n });\r\n }else{\r\n Swal.fire({\r\n title: 'Gagal',\r\n text: result.message,\r\n icon: 'error',\r\n confirmButtonText: 'Oke'\r\n })\r\n }\r\n }).catch(error => {\r\n setProgress(false);\r\n Swal.fire({\r\n title: 'Gagal',\r\n text: 'Terjadi kesalahan, silahkan coba lagi',\r\n icon: 'error',\r\n confirmButtonText: 'Oke'\r\n })\r\n })\r\n }\r\n });\r\n }\r\n\r\n useEffect(() => {\r\n document.title = \"Detail Pemesanan\";\r\n setUser(getAccount());\r\n getOrder();\r\n }, []);\r\n\r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-start align-items-center flex-row py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <Link to=\"/home/history\" className=\"navbar-brand\" title=\"back\">\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <p className=\"mb-0 bodytext1 semibold color-black500 px-2\">Detail Pemesanan</p>\r\n </div>\r\n </nav>\r\n\r\n <main role=\"main\" className=\"container-car container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 mt-5 pt-2\" style={{minHeight: '400px'}}>\r\n {loading && <Loading/>}\r\n {!loading && order !== null && \r\n <>\r\n <div id=\"container-status\" className={order.status === 'Belum Bayar' || order.status === 'Batal' ? 'container-status status-0 px-3 py-3 d-flex flex-column mb-2 status-1' : 'container-status status-0 px-3 py-3 d-flex flex-column mb-2 status-2'}>\r\n <p className=\"mb-1 bodytext1 semibold\" id=\"statusTitle\">\r\n {order.status === 'Belum Bayar' && 'Pesanan Kamu Belum Dibayar'}\r\n {order.status === 'Dibayar' && 'Pesanan Kamu Sudah Dibayar'}\r\n {order.status === 'Verifikasi' && 'Pesanan Kamu Sedang Diverifikasi'}\r\n {order.status === 'Batal' && 'Maaf Pesanan Kamu Dibatalkan!'}\r\n {order.status === 'Dikirim' && 'Pesanan Kamu Dalam Perjalanan'}\r\n {order.status === 'Selesai' && 'Pesanan Kamu Sudah Sampai'}\r\n </p>\r\n <p className=\"mb-0 bodytext2\" id=\"statusDesc\">\r\n {order.status === 'Belum Bayar' && 'Segera lakukan pembayaran booking fee !'}\r\n {order.status === 'Dibayar' && 'Silahkan tunggu, informasi selanjutnya akan kami hubungi via nomor telepon yang terdaftar'}\r\n {order.status === 'Verifikasi' && 'Pesanan kamu sedang diverifikasi oleh tim kami, harap tunggu informasi selanjutnya.'}\r\n {order.status === 'Batal' && (order.description !== null && order.description !== '' ? order.description : 'Kami menemukan permasalahan terkait identitas kamu, silahkan hubungi kami untuk konfirmasi kembali.')}\r\n {order.status === 'Dikirim' && 'Tim kami sedang mengirim mobil kamu, harap tunggu, dan cek secara berkala pada LACAK PESANAN.'}\r\n {order.status === 'Selesai' && 'Alhamdulillah pesanan kamu sudah sampai.'}\r\n </p>\r\n </div>\r\n\r\n <div className=\"container-request-code bg-white px-3 py-3 d-flex flex-column mb-2\">\r\n <p className=\"mb-1 bodytext1 semibold color-black500 mb-2\">\r\n Informasi Pemesanan\r\n </p>\r\n <div className=\"d-flex flex-row justify-content-between\">\r\n <p className=\"mb-0 bodytext2 color-black400 flex-fill\">\r\n Nomor Pesanan\r\n </p>\r\n <p className=\"mb-0 bodytext2 semibold color-black500\" id=\"nomor\">#{order.code}</p>\r\n </div>\r\n </div>\r\n\r\n <div className=\"container-address bg-white px-3 py-3 d-flex flex-column mb-2\">\r\n <p className=\"mb-1 bodytext1 semibold color-black500 mb-2\">\r\n Alamat Pengiriman\r\n </p>\r\n <p className=\"mb-0 bodytext2 color-black400 flex-fill mb-2\" id=\"phone\">{order.address.model} ({order.address.phone})</p>\r\n <p className=\"mb-0 bodytext2 color-black400\" id=\"address\">{order.address.address}</p>\r\n </div>\r\n\r\n <div className=\"d-flex flex-row bg-white px-3 py-3 product-section-payment justify-content-between mb-2\">\r\n <img id=\"dataImage\" src={order.car.image} alt=\"\"/>\r\n <div className=\"flex-fill ml-3\">\r\n <p className=\"caption color-green500 semibold mb-0\" id=\"dataBrand\">{order.car.brand}</p>\r\n <p className=\"bodytext1 semibold color-black800 mb-0\" id=\"dataModel\">{order.car.model}</p>\r\n <p className=\"caption color-black300 mb-0\" id=\"dataColorYear\">{order.note} | {order.car.year}</p>\r\n </div>\r\n </div>\r\n\r\n <div className=\"container-request-code bg-white px-3 py-3 d-flex flex-column mb-2\">\r\n <p className=\"mb-1 bodytext1 semibold color-black500 mb-2\">\r\n Rincian Pembayaran\r\n </p>\r\n <div className=\"d-flex flex-row justify-content-between mb-1\">\r\n <p className=\"mb-0 bodytext2 color-black400 flex-fill\">\r\n Metode Pembayaran\r\n </p>\r\n <p className=\"mb-0 bodytext2 semibold color-black500\" id=\"paymentMethod\">{order.payment.payment_method}</p>\r\n </div>\r\n\r\n <div className=\"d-flex flex-row justify-content-between mb-1\">\r\n <p className=\"mb-0 bodytext2 color-black400 flex-fill\">\r\n Booking Fee\r\n </p>\r\n <p className=\"mb-0 bodytext2 semibold color-black500\" id=\"bookingFee\">{order.payment.booking_fee}</p>\r\n </div>\r\n\r\n <div className=\"d-flex flex-row justify-content-between mb-1\">\r\n <p className=\"mb-0 bodytext2 color-black400 flex-fill\">\r\n Kode Unik\r\n </p>\r\n <p className=\"mb-0 bodytext2 semibold color-black500\" id=\"codeUnique\">{order.payment.code_uniq}</p>\r\n </div>\r\n\r\n <div className=\"d-flex flex-row justify-content-between mb-1\">\r\n <p className=\"mb-0 bodytext2 color-black500 semibold flex-fill\">\r\n Total bayar\r\n </p>\r\n <p className=\"mb-0 bodytext2 semibold color-black500 semibold\" id=\"totalPayment\">{order.payment.total_payment}</p>\r\n </div>\r\n\r\n </div>\r\n\r\n <div className=\"container-request-code bg-white px-3 py-3 d-flex flex-column mb-2\">\r\n <p className=\"mb-1 bodytext1 semibold color-black500 mb-2\">\r\n Kontak\r\n </p>\r\n\r\n <div className=\"container-contact d-flex flex-row align-items-center px-3 py-3\">\r\n <img src={require('../assets/images/contact.jpg')} alt=\"\" className=\"mr-3\"/>\r\n <div className=\"flex-column flex-fill\">\r\n <p className=\"mb-0 bodytext1 semibold color-black600\">Sintia</p>\r\n <p className=\"mb-0 bodytext2 color-black300\">Narahubung</p>\r\n </div>\r\n <a href={`https://wa.me/+6285315131514/?text=Hallo,\\nSaya ingin membeli mobil ${order.car.model}`} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-decoration-none\">\r\n <i className=\"fi fi-brands-whatsapp mr-2 px-2 mt-1\" ></i>\r\n </a>\r\n \r\n <i className=\"fi fi-rr-phone-call px-2 mt-1\" onClick={() => window.open('tel:+6285315131514')}></i>\r\n </div>\r\n </div>\r\n </>\r\n }\r\n </main>\r\n\r\n <Footer withNavigation={order !== null && (order.status === 'Belum Bayar' || order.status === 'Dikirim' || order.status === 'Selesai')}/>\r\n\r\n {!loading && order !== null && (order.status === 'Belum Bayar' || order.status === 'Dikirim' || order.status === 'Selesai') && \r\n <nav id=\"container-action\" className=\"navbar bottom-nav-buy fixed-bottom navbar-expand bg-white px-3 py-3 shadow-sm col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 text-center m-auto\">\r\n {!loading && order !== null && order.status === 'Belum Bayar' && \r\n <Link to={`/order/${code}/bill`} className=\"d-flex flex-fill text-decoration-none\">\r\n <button type=\"button\" className=\"button-message flex-fill bodytext2 semibold text-white d-flex flex-row justify-content-center align-items-center background-green500\">\r\n <p className=\"mb-0 py-1\">Bayar Sekarang</p>\r\n </button>\r\n </Link>\r\n }\r\n\r\n {!loading && order !== null && order.status === 'Dikirim' && \r\n <>\r\n <Link to=\"\" onClick={orderConfirm} className=\"d-flex flex-fill text-decoration-none w-50\">\r\n <button type=\"button\" id=\"buttonConfirm\" className=\"mr-2 button-request-finish bg-white flex-fill bodytext2 semibold color-green500 d-flex flex-row justify-content-center align-items-center\" >\r\n {progress ? <Spinner/> : 'Pesanan Diterima'}\r\n </button>\r\n </Link> \r\n <Link to={`/order/${code}/tracking`} className=\"d-flex flex-fill text-decoration-none w-50\">\r\n <button type=\"button\" className=\"button-message flex-fill bodytext2 semibold text-white justify-content-center background-green500\">\r\n Lacak Pesanan\r\n </button>\r\n </Link>\r\n </>\r\n }\r\n\r\n {!loading && order !== null && order.status === 'Selesai' && \r\n <>\r\n <Link to=\"/home/catalog\" className=\"d-flex flex-fill text-decoration-none\">\r\n <button type=\"submit\" className=\"button-message flex-fill bodytext2 semibold text-white d-flex flex-row justify-content-center align-items-center background-green500\" >\r\n <p className=\"mb-0 py-1\">Belanja Lagi</p>\r\n </button>\r\n </Link>\r\n </>\r\n }\r\n </nav>\r\n }\r\n </>\r\n );\r\n});\r\n\r\nexport default OrderDetail;","import React, {useEffect, useState} from \"react\";\r\nimport { Link, useNavigate, useParams } from \"react-router-dom\";\r\nimport Swal from \"sweetalert2\";\r\nimport Footer from \"../components/Footer\";\r\nimport Loading from \"../components/Loading\";\r\nimport axios, { orderdetail, ordertracking } from \"../helper/axios\";\r\nimport { getAccount } from \"../helper/session\";\r\n\r\nconst OrderTracking = () => {\r\n const {code} = useParams();\r\n const [loading, setLoading] = useState(true);\r\n const [user, setUser] = useState(getAccount());\r\n const [track, setTrack] = useState(null);\r\n const navigate = useNavigate();\r\n\r\n const getTracking = async () => {\r\n setLoading(true);\r\n axios.get(`${ordertracking}?id=${code}&user_id=${user.id}`)\r\n .then(response => {\r\n setLoading(false);\r\n let result = response.data;\r\n if(result.status){\r\n setTrack(result.data);\r\n }else{\r\n setTrack(null);\r\n Swal.fire({\r\n title: 'Perhatian',\r\n text: 'Tidak menemukan informasi pesanan',\r\n icon: 'error',\r\n confirmButtonText: 'Kembali'\r\n }).then((result) => {\r\n navigate('/home/history');\r\n });\r\n }\r\n }).catch(error => {\r\n setLoading(false);\r\n setTrack(null);\r\n Swal.fire({\r\n title: 'Gagal',\r\n text: 'Terjadi kesalahan, silahkan coba lagi',\r\n icon: 'error',\r\n confirmButtonText: 'Kembali'\r\n }).then((result) => {\r\n navigate('/home/history');\r\n });\r\n })\r\n }\r\n\r\n const checkStatusOrder = async () => {\r\n setLoading(true);\r\n axios.get(`${orderdetail}?id=${code}&user_id=${user.id}`)\r\n .then(res => {\r\n let result = res.data;\r\n if(result.status){\r\n if(result.data.status === 'Dikirim'){\r\n getTracking();\r\n }else{\r\n Swal.fire({\r\n title: 'Perhatian',\r\n text: 'Pesanan kamu belum dikirim',\r\n icon: 'warning',\r\n confirmButtonText: 'Kembali'\r\n }).then((result) => {\r\n navigate('/home/history');\r\n });\r\n }\r\n }else{\r\n Swal.fire({\r\n title: 'Perhatian',\r\n text: 'Tidak menemukan informasi pesanan',\r\n icon: 'error',\r\n confirmButtonText: 'Kembali'\r\n }).then((result) => {\r\n navigate('/home/history');\r\n });\r\n }\r\n }).catch(err => {\r\n Swal.fire({\r\n title: 'Gagal',\r\n text: 'Terjadi kesalahan, silahkan coba lagi',\r\n icon: 'error',\r\n confirmButtonText: 'Kembali'\r\n }).then((result) => {\r\n navigate('/home/history');\r\n });\r\n })\r\n\r\n \r\n }\r\n\r\n useEffect(() => {\r\n document.title = \"Lacak Pengiriman\";\r\n setUser(getAccount());\r\n setLoading(true);\r\n checkStatusOrder();\r\n }, []);\r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-start align-items-center flex-row py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <Link to={`/order/${code}/detail`} className=\"navbar-brand\" title=\"back\">\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <p className=\"mb-0 bodytext1 semibold color-black500 px-2\">Detail Pengiriman</p>\r\n </div>\r\n </nav>\r\n\r\n <main role=\"main\" className=\"container-car container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 mt-5 pt-2\" style={{minHeight : '350px'}}>\r\n {loading && <Loading/>}\r\n {!loading && track !== null && \r\n <>\r\n <div className=\"container-request-code bg-white px-3 py-3 d-flex flex-column mb-2\">\r\n <p className=\"mb-1 bodytext1 semibold color-black500 mb-2\">\r\n Status Pemesanan\r\n </p>\r\n <div className=\"d-flex flex-row justify-content-between mb-1\">\r\n <p className=\"mb-0 bodytext2 color-black400 flex-fill\">\r\n Nomor Pesanan\r\n </p>\r\n <p className=\"mb-0 bodytext2 semibold color-black500\">\r\n #{track.id}\r\n </p>\r\n </div>\r\n <div className=\"d-flex flex-row justify-content-between mb-1\">\r\n <p className=\"mb-0 bodytext2 color-black400 flex-fill\">\r\n Waktu Pemesanan\r\n </p>\r\n <p className=\"mb-0 bodytext2 semibold color-black500\">\r\n {track.date}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n {track.tracking.length > 0 && \r\n <div className=\"container-tracking px-4 py-3 d-flex flex-column mb-2 mt-3\">\r\n <div className=\"timeline\">\r\n {track.tracking.map((item, i) => \r\n <div className={i === 0 ? 'pb-4 container-track right start' : i+1 === track.tracking.length ? 'pb-4 container-track right end' : 'pb-4 container-track right'} key={i}>\r\n <div className=\"content\">\r\n <div className=\"d-flex flex-row justify-content-between\">\r\n <p className={i === 0 ? 'mb-0 bodytext1 flex-fill color-black500' : i+1 === track.tracking.length ? 'mb-0 bodytext1 flex-fill color-green500' : 'mb-0 bodytext1 flex-fill'} >{item.date}</p>\r\n <p className=\"mb-0 color-black300 bodytext2\">{item.time}</p>\r\n </div>\r\n <p className=\"mb-0 color-black300 bodytext2\">{item.description}</p>\r\n </div>\r\n </div>\r\n ).reverse()}\r\n </div>\r\n </div>\r\n }\r\n </>\r\n }\r\n </main>\r\n\r\n <Footer/>\r\n </>\r\n );\r\n}\r\n\r\nexport default OrderTracking;","import React, {useState, useEffect} from \"react\";\r\nimport {\r\n Link,\r\n useNavigate\r\n } from \"react-router-dom\";\r\nimport { checkAccount, getAccount, safeString, setAccount } from \"../helper/session\";\r\nimport Swal from \"sweetalert2\";\r\nimport Footer from \"../components/Footer\";\r\nimport axios, { updateprofile } from \"../helper/axios\";\r\nimport Spinner from \"../components/Spinner\";\r\nimport Select from 'react-select';\r\nimport { Player } from '@lottiefiles/react-lottie-player';\r\n\r\nconst UpdateBank = () => {\r\n const [user, setUser] = useState([]);\r\n const [onProgress, setProgress] = useState(false);\r\n const navigate = useNavigate();\r\n\r\n const [user_bank, setBankAccount] = useState([]);\r\n\r\n const [name_bank, setBank] = useState(user.name_bank);\r\n const [atas_nama, setAtasNama] = useState(user.atas_nama);\r\n const [norek, setNorek] = useState(user.norek);\r\n const [bank_list, setBankList] = useState([])\r\n const [bank_update, setBankUpdate] = useState('');\r\n const [loading, setLoading] = useState(true);\r\n\r\n useEffect(() => {\r\n getAccount();\r\n getBankList();\r\n }, [])\r\n\r\n const getAccount = () => {\r\n setLoading(true)\r\n const config = {\r\n headers: { Authorization: 'Bearer' + localStorage.getItem('token') }\r\n };\r\n \r\n axios.get('https://api-microsite.koperasi-astra.com/api/auth/profile',config) \r\n .then(response => {\r\n let user = response.data.data[0];\r\n setLoading(false)\r\n setBankAccount(user);\r\n setBankUpdate({ label: user.nama_bank, value: user.nama_bank })\r\n setAtasNama(user.atas_nama)\r\n setNorek(user.norek)\r\n setUser(user);\r\n // console.log('result',user);\r\n }).catch(error => {\r\n setUser([]);\r\n });\r\n }\r\n \r\n const setBankChange = (event) => {\r\n setBankUpdate({ label: event.label, value: event.value })\r\n // console.log('sini',event);\r\n }\r\n\r\n const getBankList = () => {\r\n \r\n axios.get('https://api-microsite.koperasi-astra.com/api/getbank') \r\n .then(response => {\r\n let list_bank = response.data.banks;\r\n var bank_list = [];\r\n // console.log('list_bank',list_bank);\r\n list_bank.forEach(element => {\r\n var bank_temp = {\r\n value: element.id_opusb,\r\n label: element.name_bank\r\n }\r\n \r\n bank_list.push(bank_temp);\r\n });\r\n setBankList(bank_list);\r\n // console.log('bank_list',bank_list);\r\n }).catch(error => {\r\n setBankList([]);\r\n });\r\n }\r\n\r\n\r\n const setContentProgess = (status) => {\r\n\t\tsetProgress(status);\r\n\t\tdocument.getElementById('buttonSave').disabled = status\r\n\t}\r\n\r\n const onUpdate = () => {\r\n const config = {\r\n headers: { Authorization: 'Bearer' + localStorage.getItem('token') }\r\n };\r\n\r\n const inputNameBank = bank_update == undefined ? user.name_bank : bank_update.label;\r\n const inputIdBank = bank_update.value;\r\n const inputAtasNama = atas_nama == undefined ? user.atas_nama : atas_nama;\r\n const inputNorek = norek == undefined ? user.norek : norek\r\n\r\n // console.log('inputNameBank',inputNameBank);\r\n \r\n if(inputNameBank !== undefined && inputAtasNama !== undefined&& inputNorek !== undefined){\r\n setContentProgess(true);\r\n const postForm = {\r\n name_bank: inputNameBank,\r\n atas_nama: inputAtasNama,\r\n norek: inputNorek,\r\n id_bank: inputIdBank\r\n }\r\n axios.put('https://api-microsite.koperasi-astra.com/api/updatebank',postForm,config)\r\n .then(response=> {\r\n setContentProgess(false);\r\n let result = response.data;\r\n if(result.message == 'success'){\r\n Swal.fire({\r\n icon: 'success',\r\n title: 'Berhasil',\r\n text: 'Data berhasil disimpan sebagai Draft',\r\n }).then(res => {\r\n if(res.value){\r\n navigate('/home/profile', { replace: true });\r\n }\r\n })\r\n }else{\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Gagal',\r\n text: result.message,\r\n })\r\n }\r\n })\r\n .catch(error=>{\r\n setContentProgess(false);\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Terjadi Kesalahan',\r\n text: 'Terjadi kesalahan - Hubungi Admin',\r\n })\r\n })\r\n }else{\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Perhatian',\r\n text: 'Harap Mengisi Data Dengan Benar dan Lengkap',\r\n })\r\n }\r\n\r\n }\r\n\r\n return (\r\n <>\r\n <nav className=\"navbar fixed-top bg-white border-bottom shadow-sm px-0\">\r\n <div className=\"col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 m-auto d-flex justify-content-start align-items-center flex-row py-0 px-xl-3 px-lg-3 px-md-3 px-sm-3 px-3\">\r\n <Link to=\"/home/profile\" className=\"navbar-brand\" title=\"back\">\r\n <i className=\"fi fi-sr-angle-left color-black400 headline6\"></i>\r\n </Link>\r\n <p className=\"mb-0 bodytext1 semibold color-black500 px-2 py-2\">Edit Bank</p>\r\n </div>\r\n </nav>\r\n\r\n <div className=\"align-items-start pt-0 flex-column mt-5\">\r\n <main role=\"main\" className=\"container-fluid col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 pt-0 pl-0 pr-0 mt-5\">\r\n {loading == true ? <Player\r\n src='https://assets4.lottiefiles.com/packages/lf20_ssmouzg5.json'\r\n className=\"player\"\r\n loop\r\n autoplay\r\n /> :\r\n <form encType=\"multipart/form-data\" className=\"container-form px-3 py-3 bg-white d-flex flex-column mb-3\">\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Nama Bank\r\n </label>\r\n <Select\r\n onChange={e => setBankChange(e)} defaultValue={{ label: user.name_bank, value: user.name_bank }} value={bank_update}\r\n options={bank_list} className=\"form-input form-data-booking bodytext2 mb-3\"\r\n />\r\n {/* <select onChange={e => setBankChange(e.target.value)} defaultValue={user_bank.name_bank} className=\"form-input form-data-booking bodytext2 mb-3\">\r\n {bank_list.map((data, i) => \r\n <option key={i} value={data.value}>{data.label}</option>)}\r\n </select> */}\r\n\r\n {/* <input type=\"text\" name=\"name\" id=\"dataName\" defaultValue={user_bank.name_bank} onChange={e => setBank(e.target.value)} className=\"form-input form-data-booking bodytext2 mb-3\" disabled/> */}\r\n\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n Atas Nama Bank\r\n </label>\r\n <input type=\"text\" name=\"atasnama\" id=\"dataatasnama\" defaultValue={user.atas_nama} onChange={e => setAtasNama(e.target.value)} className=\"form-input form-data-booking bodytext2 mb-3\" required/>\r\n\r\n <label className=\"bodytext1 color-black500 p-0 mb-1\">\r\n No Rekening Bank\r\n </label>\r\n <input type=\"Norek\" name=\"Norek\" id=\"dataNorek\" defaultValue={user.norek} onChange={e => setNorek(e.target.value)} className=\"form-input form-data-booking bodytext2 mb-3\" required/>\r\n\r\n <button disabled={onProgress && 'disabled'} onClick={onUpdate} type=\"button\" id=\"buttonSave\" className=\"button-action-save text-white background-green500 bodytext1 text-center mt-5\">\r\n {onProgress ? <Spinner/> : 'Simpan Perubahan'}\r\n </button>\r\n </form>}\r\n </main>\r\n </div>\r\n \r\n\r\n <Footer/>\r\n\r\n </>\r\n )\r\n}\r\n\r\nexport default UpdateBank;","import React, { useState, useEffect } from 'react';\r\nimport { useNavigate } from 'react-router-dom';\r\nimport axios from 'axios';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faArrowLeft, faQuestionCircle, faChevronRight, faTimes, faSpinner } from '@fortawesome/free-solid-svg-icons';\r\nimport '../assets/styles/pinjaman.css';\r\nimport { \r\n Card, \r\n Button, \r\n Typography, \r\n Space, \r\n Table, \r\n Modal,\r\n Statistic,\r\n Tooltip,\r\n List,\r\n Checkbox,\r\n Divider \r\n} from 'antd';\r\nimport { \r\n ArrowLeftOutlined,\r\n QuestionCircleOutlined,\r\n RightOutlined,\r\n DeleteOutlined,\r\n InfoCircleOutlined \r\n} from '@ant-design/icons';\r\n\r\nconst { Title, Text } = Typography;\r\n\r\nconst API = {\r\n auth: \"https://lendtick-user-prod.koperasi-astra.com\",\r\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\r\n};\r\n\r\nconst Pinjaman = () => {\r\n const navigate = useNavigate();\r\n const [loanBalance, setLoanBalance] = useState(null);\r\n const [loanOffsets, setLoanOffsets] = useState([]);\r\n const [loanDraft, setLoanDraft] = useState([]);\r\n const [loanTypes, setLoanTypes] = useState([]);\r\n const [loading, setLoading] = useState(true);\r\n const [showModal, setShowModal] = useState(false);\r\n const [modalContent, setModalContent] = useState({});\r\n const [cancellingLoanId, setCancellingLoanId] = useState(null);\r\n\r\n useEffect(() => {\r\n fetchData();\r\n }, []);\r\n\r\n const getSafeValue = (obj, path, defaultValue = 0) => {\r\n try {\r\n return path.split('.').reduce((acc, curr) => acc && acc[curr], obj) || defaultValue;\r\n } catch (e) {\r\n return defaultValue;\r\n }\r\n };\r\n\r\n // Format currency helper\r\n const formatCurrency = (value) => {\r\n return new Intl.NumberFormat('id-ID', {\r\n style: 'currency',\r\n currency: 'IDR',\r\n minimumFractionDigits: 0,\r\n maximumFractionDigits: 0\r\n }).format(value);\r\n };\r\n\r\n const fetchData = async () => {\r\n try {\r\n const token = localStorage.getItem('token');\r\n const personalData = await fetchUserInfo(token);\r\n const [balanceRes, offsetsRes, typesRes, draftRes] = await Promise.all([\r\n fetchLoanBalance(token, personalData.id_koperasi),\r\n fetchLoanOffset(token, personalData.id_koperasi),\r\n fetchMasterLoan(token, personalData.id_koperasi),\r\n fetchLoanDraft(token, personalData.id_koperasi)\r\n ]);\r\n\r\n const modifiedLoanTypes = (typesRes.data.data || []).map(loan => {\r\n if (loan.loan_code === '12P' || loan.kategori_pinjaman === 'FIRST LOAN') {\r\n return {\r\n ...loan,\r\n loan_plafon_max: 30000000 // Set to 30 million\r\n };\r\n }\r\n return loan;\r\n });\r\n\r\n setLoanBalance(balanceRes.data.data);\r\n setLoanOffsets(offsetsRes.data.data || []);\r\n setLoanTypes(modifiedLoanTypes);\r\n setLoanDraft(draftRes.data.data || []);\r\n setLoading(false);\r\n } catch (error) {\r\n console.error('Error fetching data:', error);\r\n setLoading(false);\r\n }\r\n };\r\n\r\n const fetchUserInfo = async (token) => {\r\n const response = await axios.get(`${API.auth}/profile/get`, {\r\n headers: { Authorization: token }\r\n });\r\n return response.data.data;\r\n };\r\n\r\n const fetchLoanBalance = async (token, idKoperasi) => {\r\n return axios.get(`${API.hostLoanNew}/loan/balance?id_koperasi=${idKoperasi}`, {\r\n headers: { Authorization: token }\r\n });\r\n };\r\n\r\n const fetchLoanOffset = async (token, idKoperasi) => {\r\n return axios.get(`${API.hostLoanNew}/loan/offset?id_koperasi=${idKoperasi}`, {\r\n headers: { Authorization: token }\r\n });\r\n };\r\n\r\n const fetchMasterLoan = async (token, idKoperasi) => {\r\n return axios.get(`${API.hostLoanNew}/loan/tipes?id_koperasi=${idKoperasi}`, {\r\n headers: { Authorization: token }\r\n });\r\n };\r\n\r\n const fetchLoanDraft = async (token, idKoperasi) => {\r\n return axios.get(`${API.hostLoanNew}/loan/draft?id_koperasi=${idKoperasi}`, {\r\n headers: { Authorization: token }\r\n });\r\n };\r\n\r\n const handleProductClick = (product) => {\r\n navigate('/simulation', { state: { product } });\r\n };\r\n\r\n const handleInfoClick = (product) => {\r\n setModalContent({\r\n title: 'Informasi Pinjaman',\r\n description: product.description,\r\n rateFlat: product.loan_rate,\r\n plafonMax: product.loan_plafon_max,\r\n tenor: product.loan_term\r\n });\r\n setShowModal(true);\r\n };\r\n\r\n const handleLoanDraftClick = async (draft) => {\r\n try {\r\n const token = localStorage.getItem('token');\r\n const response = await axios.get(`${API.hostLoanNew}/loan/detail?loan_new_id=${draft.loan_new_id}`, {\r\n headers: { Authorization: token }\r\n });\r\n const loanDetail = response.data.data;\r\n \r\n if (draft.increment_page === 1) {\r\n navigate('/input-document', { state: { loanDetail } });\r\n } else if (draft.increment_page === 2) {\r\n navigate('/input-email', { state: { loanDetail } });\r\n } else if (draft.increment_page === 3) {\r\n navigate('/input-summary', { state: { loanDetail } });\r\n }\r\n } catch (error) {\r\n console.error('Error fetching loan detail:', error);\r\n }\r\n };\r\n\r\n const handleLoanDraftCancel = async (draft) => {\r\n try {\r\n setCancellingLoanId(draft.loan_new_id);\r\n const token = localStorage.getItem('token');\r\n await axios.post(`${API.hostLoanNew}/loan-new/cancel`, { loan_new_id: draft.loan_new_id }, {\r\n headers: { Authorization: token }\r\n });\r\n fetchData(); // Refresh data after cancellation\r\n } catch (error) {\r\n console.error('Error cancelling loan draft:', error);\r\n } finally {\r\n setCancellingLoanId(null);\r\n }\r\n };\r\n\r\n if (loading) {\r\n return <div className=\"loading\">Loading...</div>;\r\n }\r\n\r\n return (\r\n <div className=\"simulasi-pinjaman-container\">\r\n <Space direction=\"vertical\" size=\"large\" style={{ width: '100%' }}>\r\n {/* Header */}\r\n <Card bordered={false}>\r\n <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>\r\n <Button \r\n type=\"text\" \r\n icon={<ArrowLeftOutlined />} \r\n onClick={() => navigate('/home')} \r\n />\r\n <Title level={4} style={{ margin: 0 }}>Kredit</Title>\r\n </div>\r\n </Card>\r\n\r\n <Card bordered={false}>\r\n <Space direction=\"vertical\" size=\"large\" style={{ width: '100%' }}>\r\n <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '16px' }}>\r\n <Statistic\r\n title=\"Total Angsuran Anda Saat Ini\"\r\n value={getSafeValue(loanBalance, 'total_active_installment', 0)}\r\n formatter={(value) => formatCurrency(value)}\r\n />\r\n <Statistic\r\n title={\r\n <Space>\r\n Plafon Maksimal\r\n <Tooltip title=\"Info Plafon Maksimal\">\r\n <QuestionCircleOutlined style={{ cursor: 'pointer' }} />\r\n </Tooltip>\r\n </Space>\r\n }\r\n value={getSafeValue(loanBalance, 'max_plafon', 0)}\r\n formatter={(value) => formatCurrency(value)}\r\n />\r\n </div>\r\n <Statistic\r\n title=\"Sisa Kemampuan Angsur\"\r\n value={getSafeValue(loanBalance, 'installment_ability', 0)}\r\n formatter={(value) => formatCurrency(value)}\r\n />\r\n </Space>\r\n</Card>\r\n\r\n{/* Active Loans */}\r\n<Card \r\n title=\"Pinjaman Aktif\" \r\n bordered={false}\r\n>\r\n <Table \r\n dataSource={Array.isArray(loanOffsets) ? loanOffsets : []}\r\n rowKey={(record) => record.loan_no || record.id || Math.random().toString()}\r\n pagination={false}\r\n columns={[\r\n {\r\n title: 'Jenis Pinjaman',\r\n dataIndex: 'loan_name',\r\n render: (text, record) => (\r\n <Space>\r\n <Checkbox \r\n checked={record.checked || false}\r\n onChange={() => {/* Handle checkbox change */}}\r\n />\r\n {text || '-'}\r\n </Space>\r\n )\r\n },\r\n {\r\n title: 'Angsuran/Bulan',\r\n dataIndex: 'installment_amount',\r\n align: 'right',\r\n render: (value) => formatCurrency(value || 0)\r\n }\r\n ]}\r\n locale={{ emptyText: 'No Data' }}\r\n />\r\n</Card>\r\n\r\n{/* Draft Loans */}\r\n<Card \r\n title=\"Pinjaman Draft\" \r\n bordered={false}\r\n>\r\n <Table \r\n dataSource={Array.isArray(loanDraft) ? loanDraft : []}\r\n rowKey={(record) => record.loan_new_id || record.id || Math.random().toString()}\r\n pagination={false}\r\n columns={[\r\n {\r\n title: 'Jenis Pinjaman',\r\n dataIndex: 'nama_pinjaman',\r\n render: (text) => text || '-'\r\n },\r\n {\r\n title: 'Angsuran/Bulan',\r\n dataIndex: 'applied_angsuran_bulan',\r\n align: 'right',\r\n render: (value) => formatCurrency(value || 0)\r\n },\r\n {\r\n title: 'Aksi',\r\n align: 'center',\r\n render: (_, record) => (\r\n <Button\r\n danger\r\n type=\"link\"\r\n icon={<DeleteOutlined />}\r\n loading={cancellingLoanId === getSafeValue(record, 'loan_new_id')}\r\n onClick={() => handleLoanDraftCancel(record)}\r\n >\r\n Batalkan\r\n </Button>\r\n )\r\n }\r\n ]}\r\n locale={{ emptyText: 'No Data' }}\r\n />\r\n</Card>\r\n\r\n<Card \r\n title=\"Pilih Produk Pinjaman\" \r\n bordered={false}\r\n>\r\n<List\r\n dataSource={Array.isArray(loanTypes) ? loanTypes : []}\r\n renderItem={(product) => (\r\n <List.Item\r\n className=\"hover:bg-blue-600\"\r\n style={{ \r\n cursor: 'pointer',\r\n backgroundColor: '#135188',\r\n borderRadius: '12px', // increased from 8px\r\n marginBottom: '16px', // increased from 8px\r\n padding: '24px' // increased from 16px\r\n }}\r\n onClick={() => handleProductClick(product)}\r\n actions={[\r\n <Tooltip title=\"Info Pinjaman\">\r\n <InfoCircleOutlined \r\n style={{ color: 'white', fontSize: '35px' }}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n handleInfoClick(product);\r\n }}\r\n />\r\n </Tooltip>\r\n ]}\r\n >\r\n <List.Item.Meta\r\n title={\r\n <Text style={{ color: 'white', margin: 0, fontSize: '18px' }}>\r\n {product.loan_name || '-'}\r\n </Text>\r\n }\r\n description={\r\n <Text style={{ color: 'rgba(255, 255, 255, 0.85)', fontSize: '16px' }}>\r\n {`Bunga ${product.loan_rate || 0}% / Tahun`}\r\n </Text>\r\n }\r\n />\r\n </List.Item>\r\n )}\r\n />\r\n</Card>\r\n\r\n{/* Info Modal */}\r\n<Modal\r\n title={getSafeValue(modalContent, 'title', 'Informasi Pinjaman')}\r\n open={showModal}\r\n onCancel={() => setShowModal(false)}\r\n footer={[\r\n <Button key=\"close\" type=\"primary\" onClick={() => setShowModal(false)}>\r\n Tutup\r\n </Button>\r\n ]}\r\n>\r\n <Space direction=\"vertical\" size=\"middle\" style={{ width: '100%' }}>\r\n <div>\r\n <Text strong>Deskripsi Pinjaman: </Text>\r\n <Text>{getSafeValue(modalContent, 'description', '-')}</Text>\r\n </div>\r\n <div>\r\n <Text strong>Rate Flat: </Text>\r\n <Text>{getSafeValue(modalContent, 'rateFlat', 0)}%</Text>\r\n </div>\r\n <div>\r\n <Text strong>Plafon Maksimal: </Text>\r\n <Text>{formatCurrency(getSafeValue(modalContent, 'plafonMax', 0))}</Text>\r\n </div>\r\n <div>\r\n <Text strong>Tenor: </Text>\r\n <Text>{getSafeValue(modalContent, 'tenor', 0)} Bulan</Text>\r\n </div>\r\n </Space>\r\n</Modal>\r\n </Space>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Pinjaman;","import React from 'react';\r\n\r\nconst RiwayatPinjaman = () => {\r\n return (\r\n <div>\r\n <h1>Component Title</h1>\r\n {/* Add your component content here */}\r\n </div>\r\n );\r\n};\r\n\r\nexport default RiwayatPinjaman;","import React from 'react';\r\n\r\nconst PelunasanPinjaman = () => {\r\n return (\r\n <div>\r\n <h1>Component Title</h1>\r\n {/* Add your component content here */}\r\n </div>\r\n );\r\n};\r\n\r\nexport default PelunasanPinjaman;","import React from 'react';\r\n\r\nconst Gadget = () => {\r\n return (\r\n <div>\r\n <h1>Component Title</h1>\r\n {/* Add your component content here */}\r\n </div>\r\n );\r\n};\r\n\r\nexport default Gadget;","import React from 'react';\r\n\r\nconst Pulsa = () => {\r\n return (\r\n <div>\r\n <h1>Component Title</h1>\r\n {/* Add your component content here */}\r\n </div>\r\n );\r\n};\r\n\r\nexport default Pulsa;","import React from 'react';\r\n\r\nconst PaketData = () => {\r\n return (\r\n <div>\r\n <h1>Component Title</h1>\r\n {/* Add your component content here */}\r\n </div>\r\n );\r\n};\r\n\r\nexport default PaketData;","import React, { createContext, useState, useContext } from 'react';\n\nconst LoanContext = createContext();\n\nexport const LoanProvider = ({ children }) => {\n const [loanData, setLoanData] = useState(null);\n\n return (\n <LoanContext.Provider value={{ loanData, setLoanData }}>\n {children}\n </LoanContext.Provider>\n );\n};\n\nexport const useLoan = () => {\n const context = useContext(LoanContext);\n if (context === undefined) {\n throw new Error('useLoan must be used within a LoanProvider');\n }\n return context;\n};","import React, { useState, useEffect } from 'react';\r\nimport { useNavigate, useLocation } from 'react-router-dom';\r\nimport axios from 'axios';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faArrowLeft, faChevronDown, faCalculator, faClock, faMoneyBillWave, faBullseye, faInfoCircle } from '@fortawesome/free-solid-svg-icons';\r\nimport '../assets/styles/simulasiPinjaman.css';\r\nimport { useLoan } from '../LoanContext';\r\nimport { \r\n Form, \r\n Input, \r\n Button, \r\n Select, \r\n Radio, \r\n Modal, \r\n Card, \r\n Divider,\r\n Checkbox,\r\n Typography,\r\n Space,\r\n InputNumber\r\n} from 'antd';\r\nimport { ArrowLeftOutlined } from '@ant-design/icons';\r\n\r\nconst { Title, Text } = Typography;\r\n\r\nconst API = {\r\n auth: \"https://lendtick-user-prod.koperasi-astra.com\",\r\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\r\n};\r\n\r\nconst AD_REFERENCE_ID = 1001017;\r\n\r\nconst loanInfos = [\r\n 'Pilih Info',\r\n 'Pameran KAI/Open Table KAI',\r\n 'Email',\r\n 'Website',\r\n 'HRD/Kopnit',\r\n 'Brosur/Poster/Banner',\r\n 'Sosial Media (Instagram,Facebook)',\r\n 'Youtube',\r\n 'Teman/Keluarga',\r\n 'SMS/Whatsapp',\r\n];\r\n\r\nconst SimulasiPinjaman = () => {\r\n const navigate = useNavigate();\r\n const location = useLocation();\r\n const product = location.state && location.state.product ? location.state.product : {};\r\n\r\n const [loading, setLoading] = useState(false);\r\n const [loanBalance, setLoanBalance] = useState(null);\r\n const [loanOffsetData, setLoanOffsetData] = useState([]);\r\n const [loanSimulation, setLoanSimulation] = useState(null);\r\n const [formData, setFormData] = useState({\r\n applied_amount: '',\r\n applied_tenor: product.loan_term || '',\r\n offset_pinjaman: '',\r\n loan_purpose: '',\r\n media_informasi: '',\r\n });\r\n const [refCalculationSimulation, setRefCalculationSimulation] = useState([]);\r\n const [refCalculationSimulationValue, setRefCalculationSimulationValue] = useState(null);\r\n const [showOffsetModal, setShowOffsetModal] = useState(false);\r\n const [showResultModal, setShowResultModal] = useState(false);\r\n const [personalData, setPersonalData] = useState(null);\r\n const { setLoanData } = useLoan();\r\n\r\n useEffect(() => {\r\n fetchInitialData();\r\n }, []);\r\n\r\n \r\n // Tambahkan fungsi format number dengan pemisah 3 digit\r\n const formatNumber = (value) => {\r\n if (!value) return '0';\r\n return `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\r\n };\r\n\r\n // Tambahkan parser untuk input number\r\n const numberParser = (value) => {\r\n return value.replace(/\\$\\s?|(,*)/g, '');\r\n };\r\n\r\n const [form] = Form.useForm();\r\n\r\n const fetchInitialData = async () => {\r\n setLoading(true);\r\n try {\r\n const token = localStorage.getItem('token');\r\n if (!token) {\r\n throw new Error('Token tidak ditemukan. Silakan login kembali.');\r\n }\r\n const userData = await fetchUserInfo(token);\r\n setPersonalData(userData);\r\n await Promise.all([\r\n fetchLoanBalance(token, userData.id_koperasi),\r\n fetchLoanOffset(token, userData.id_koperasi),\r\n getCalculationSimulationReference(token, userData.id_koperasi),\r\n ]);\r\n } catch (error) {\r\n console.error('Error fetching initial data:', error);\r\n alert(error.message || 'Terjadi kesalahan saat mengambil data. Silakan coba lagi.');\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n const handleOffsetChange = (index) => {\r\n const newLoanOffsetData = [...loanOffsetData];\r\n newLoanOffsetData[index].checked = !newLoanOffsetData[index].checked;\r\n setLoanOffsetData(newLoanOffsetData);\r\n\r\n // Update offset_pinjaman in formData\r\n const newOffsetPinjaman = getOffsetPinjaman(newLoanOffsetData);\r\n setFormData(prevState => ({\r\n ...prevState,\r\n offset_pinjaman: newOffsetPinjaman\r\n }));\r\n };\r\n\r\n const getTotalOffset = () => {\r\n let totalOffset = 0;\r\n loanOffsetData.forEach(loan => {\r\n if (loan.checked) {\r\n totalOffset += loan.installment_amount;\r\n }\r\n });\r\n return totalOffset;\r\n };\r\n \r\n const getOffsetPinjaman = (data = loanOffsetData) => {\r\n return data\r\n .filter(loan => loan.checked)\r\n .map(loan => loan.loan_no)\r\n .join(',');\r\n };\r\n\r\n const fetchUserInfo = async (token) => {\r\n try {\r\n const response = await axios.get(`${API.auth}/profile/get`, {\r\n headers: { Authorization: token }\r\n });\r\n if (!response.data.data || !response.data.data.id_koperasi) {\r\n throw new Error('Data pengguna tidak lengkap');\r\n }\r\n return response.data.data;\r\n } catch (error) {\r\n console.error('Error fetching user info:', error);\r\n throw new Error('Gagal mengambil informasi pengguna');\r\n }\r\n };\r\n\r\n const fetchLoanBalance = async (token, idKoperasi) => {\r\n const response = await axios.get(`${API.hostLoanNew}/loan/balance?id_koperasi=${idKoperasi}`, {\r\n headers: { Authorization: token }\r\n });\r\n setLoanBalance(response.data.data);\r\n };\r\n\r\n const fetchLoanOffset = async (token, idKoperasi) => {\r\n const response = await axios.get(`${API.hostLoanNew}/loan/offset?id_koperasi=${idKoperasi}`, {\r\n headers: { Authorization: token }\r\n });\r\n setLoanOffsetData(response.data.data.map(loan => ({ ...loan, checked: false })));\r\n };\r\n\r\n const getCalculationSimulationReference = async (token, idKoperasi) => {\r\n try {\r\n const response = await axios.get(`${API.hostLoanNew}/loan/ref-calculation-simulation?ad_reference_id=${AD_REFERENCE_ID}&loan_code=${product.loan_code}`, {\r\n headers: { Authorization: token }\r\n });\r\n const options = response.data.data.map(item => ({\r\n value: item.applied_code_sim_perhitungan,\r\n label: item.applied_simulasi_perhitungan,\r\n }));\r\n setRefCalculationSimulation(options);\r\n // Set default value if available\r\n if (options.length > 0) {\r\n setRefCalculationSimulationValue(options[0].value);\r\n }\r\n } catch (error) {\r\n console.error('Error fetching calculation simulation reference:', error);\r\n }\r\n };\r\n\r\n const handleCalculationTypeChange = (value) => {\r\n setRefCalculationSimulationValue(value);\r\n // Reset applied_amount when changing calculation type\r\n setFormData(prevState => ({ ...prevState, applied_amount: '0' }));\r\n };\r\n\r\n\r\n const handleInputChange = (name, value) => {\r\n setFormData(prevState => ({ ...prevState, [name]: value }));\r\n };\r\n\r\n const formatLabel = (key) => {\r\n const labels = {\r\n applied_simulasi_perhitungan: 'Simulasi Perhitungan',\r\n nama_pinjaman: 'Jenis Pinjaman',\r\n applied_amount: 'Pokok Pinjaman',\r\n applied_tenor: 'Tenor',\r\n applied_angsuran_bulan: 'Angsuran/Bulan',\r\n applied_biaya_admin: 'Biaya Administrasi',\r\n applied_provisi: 'Biaya Provisi',\r\n applied_biaya_asuransi: 'Biaya Asuransi',\r\n applied_jumlah_offset: 'Estimasi Offset',\r\n applied_dana_diterima: 'Dana Diterima'\r\n };\r\n return labels[key] || key.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase());\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (!personalData) {\r\n alert('Data pengguna belum tersedia. Silakan coba lagi.');\r\n return;\r\n }\r\n \r\n if (!formData.applied_amount || formData.applied_amount === '0') {\r\n alert('Silakan isi Nominal Pinjaman');\r\n return;\r\n }\r\n \r\n if (!refCalculationSimulationValue) {\r\n alert('Silakan pilih Simulasi Perhitungan');\r\n return;\r\n }\r\n \r\n const maxAmount = product.loan_plafon_max;\r\n if (parseInt(formData.applied_amount) > maxAmount) {\r\n alert('Jumlah Nominal Pinjaman melebihi Maksimal Plafon');\r\n return;\r\n }\r\n \r\n if (!formData.applied_tenor || formData.applied_tenor === '') {\r\n alert('Silakan isi Tenor Pinjaman');\r\n return;\r\n }\r\n \r\n if (!formData.media_informasi || formData.media_informasi === '' || formData.media_informasi === 'Pilih Info') {\r\n alert('Silakan isi Media Informasi Pinjaman');\r\n return;\r\n }\r\n \r\n const simulationParams = {\r\n id_koperasi: personalData.id_koperasi,\r\n kode_pinjaman: product.loan_code,\r\n applied_amount: parseInt(formData.applied_amount),\r\n applied_tenor: parseInt(formData.applied_tenor),\r\n is_offset: formData.offset_pinjaman && formData.offset_pinjaman.length > 0 ? 'Y' : 'N',\r\n no_pinjaman: formData.offset_pinjaman,\r\n validation: true,\r\n applied_code_sim_perhitungan: refCalculationSimulationValue,\r\n calculation_date: new Date().toLocaleDateString('en-GB')\r\n };\r\n \r\n setLoading(true);\r\n try {\r\n const token = localStorage.getItem('token');\r\n if (!token) {\r\n throw new Error('Token tidak ditemukan. Silakan login kembali.');\r\n }\r\n const response = await axios.post(`${API.hostLoanNew}/loan/simulation`, simulationParams, {\r\n headers: { Authorization: token }\r\n });\r\n setLoanSimulation(response.data.data);\r\n setShowResultModal(true);\r\n } catch (error) {\r\n console.error('Error in loan simulation:', error);\r\n let errorMessage = 'Terjadi kesalahan saat simulasi';\r\n if (error.response && error.response.data && error.response.data.message) {\r\n errorMessage = error.response.data.message;\r\n } else if (error.message) {\r\n errorMessage = error.message;\r\n }\r\n alert(errorMessage);\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n const handleAjukanPinjaman = () => {\r\n if (!loanSimulation || !personalData) {\r\n alert('Data simulasi atau data personal tidak lengkap. Silakan coba lagi.');\r\n return;\r\n }\r\n \r\n const formDataToSave = {\r\n id_koperasi: personalData.id_koperasi,\r\n tipe_pinjaman: product.loan_type,\r\n nama_pinjaman: product.loan_name,\r\n kode_pinjaman: product.loan_code,\r\n rate_flat: product.loan_rate,\r\n applied_amount: loanSimulation.applied_amount,\r\n applied_tenor: formData.applied_tenor,\r\n offset_pinjaman: getOffsetPinjaman(),\r\n total_offset: getTotalOffset(),\r\n loan_purpose: formData.loan_purpose,\r\n media_informasi: formData.media_informasi,\r\n applied_total_bunga: loanSimulation.applied_total_bunga,\r\n applied_total_pinjaman: loanSimulation.applied_total_pinjaman,\r\n applied_angsuran_bulan: loanSimulation.applied_angsuran_bulan,\r\n applied_pt_bns_tahun: loanSimulation.applied_pt_bns_tahun,\r\n applied_provisi: loanSimulation.applied_provisi,\r\n applied_biaya_admin: loanSimulation.applied_biaya_admin,\r\n applied_biaya_asuransi: loanSimulation.applied_biaya_asuransi,\r\n applied_jumlah_offset: loanSimulation.applied_jumlah_offset,\r\n applied_dana_diterima: loanSimulation.applied_dana_diterima, \r\n applied_simulasi_perhitungan: loanSimulation.applied_simulasi_perhitungan,\r\n applied_code_sim_perhitungan: loanSimulation.applied_code_sim_perhitungan,\r\n applied_biaya_as_jiwa: loanSimulation.applied_biaya_as_jiwa,\r\n applied_biaya_as_phk: loanSimulation.applied_biaya_as_phk,\r\n tanggal_kartap: personalData.tanggal_kartap,\r\n verified_affco: personalData.verified_affco,\r\n tanggal_pengajuan: new Date().toISOString(),\r\n status_pinjaman: 'DIAJUKAN',\r\n syarat_ketentuan: 0,\r\n };\r\n \r\n localStorage.setItem('formData', JSON.stringify(formDataToSave));\r\n navigate('/term-condition');\r\n };\r\n\r\n const formatCurrency = (amount) => {\r\n return new Intl.NumberFormat('id-ID', { \r\n style: 'currency', \r\n currency: 'IDR',\r\n minimumFractionDigits: 0,\r\n maximumFractionDigits: 0\r\n }).format(amount);\r\n };\r\n\r\n if (loading) {\r\n return <div className=\"loading\">Loading...</div>;\r\n }\r\n\r\n return (\r\n <div className=\"simulasi-pinjaman-container\">\r\n <Card bordered={false}>\r\n <Space direction=\"vertical\" size=\"large\" style={{ width: '100%' }}>\r\n {/* Header */}\r\n <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>\r\n <Button \r\n type=\"text\" \r\n icon={<ArrowLeftOutlined />} \r\n onClick={() => navigate(-1)} \r\n />\r\n <Title level={4} style={{ margin: 0 }}>Simulasi Kredit</Title>\r\n </div>\r\n\r\n <Form\r\n layout=\"vertical\"\r\n form={form}\r\n initialValues={formData}\r\n >\r\n {/* Jenis Pinjaman */}\r\n <Form.Item label=\"Jenis Pinjaman\">\r\n <Input \r\n value={product.loan_name || ''} \r\n disabled \r\n />\r\n </Form.Item>\r\n\r\n {/* Jenis Perhitungan */}\r\n <Form.Item label=\"Pilih Jenis Perhitungan\">\r\n <Radio.Group\r\n value={refCalculationSimulationValue}\r\n onChange={(e) => handleCalculationTypeChange(e.target.value)}\r\n >\r\n <Space direction=\"vertical\">\r\n {refCalculationSimulation.map((option) => (\r\n <Radio key={option.value} value={option.value}>\r\n {option.label}\r\n </Radio>\r\n ))}\r\n </Space>\r\n </Radio.Group>\r\n </Form.Item>\r\n\r\n {/* Pokok Pinjaman */}\r\n <Form.Item \r\n label={refCalculationSimulationValue === 'DanaDiterima' ? 'Dana Diterima' : 'Pokok Pinjaman'}\r\n >\r\n <InputNumber\r\n style={{ width: '100%' }}\r\n formatter={formatNumber}\r\n parser={numberParser}\r\n value={formData.applied_amount}\r\n onChange={(value) => handleInputChange('applied_amount', value)}\r\n placeholder=\"0\"\r\n addonBefore=\"Rp\"\r\n />\r\n </Form.Item>\r\n\r\n <Form.Item label=\"Tenor Pinjaman\">\r\n <InputNumber\r\n style={{ width: '100%' }}\r\n value={formData.applied_tenor}\r\n onChange={(value) => handleInputChange('applied_tenor', value)}\r\n placeholder=\"0\"\r\n min={0}\r\n addonAfter=\"bulan\"\r\n />\r\n </Form.Item>\r\n\r\n {/* Offset */}\r\n <Form.Item label=\"Offset\">\r\n <Button \r\n onClick={() => setShowOffsetModal(true)}\r\n block\r\n >\r\n {loanOffsetData.filter(loan => loan.checked).length > 0 \r\n ? `${loanOffsetData.filter(loan => loan.checked).length} Pinjaman dipilih` \r\n : 'Pilih Offset'}\r\n </Button>\r\n </Form.Item>\r\n\r\n {/* Tujuan Pinjaman */}\r\n <Form.Item label=\"Tujuan Pinjaman\">\r\n <Input\r\n value={formData.loan_purpose}\r\n onChange={(e) => handleInputChange('loan_purpose', e.target.value)}\r\n placeholder=\"Masukkan tujuan pinjaman\"\r\n />\r\n </Form.Item>\r\n\r\n {/* Informasi Pinjaman */}\r\n <Form.Item label=\"Informasi pinjaman diketahui melalui\">\r\n <Select\r\n value={formData.media_informasi}\r\n onChange={(value) => handleInputChange('media_informasi', value)}\r\n >\r\n {loanInfos.map((info, index) => (\r\n <Select.Option key={index} value={info}>{info}</Select.Option>\r\n ))}\r\n </Select>\r\n </Form.Item>\r\n\r\n <Button \r\n type=\"primary\" \r\n onClick={handleSubmit} \r\n block\r\n size=\"large\"\r\n >\r\n Simulasikan Kredit\r\n </Button>\r\n </Form>\r\n </Space>\r\n </Card>\r\n\r\n {showOffsetModal && (\r\n\r\n<div className=\"bottom-sheet-overlay\">\r\n<div className=\"bottom-sheet\">\r\n <div className=\"bottom-sheet-header\">\r\n <div className=\"w-12 h-1.5 bg-gray-200 rounded-full mx-auto mb-3\"/>\r\n <h2>Pilih Offset</h2>\r\n <button onClick={() => setShowOffsetModal(false)} className=\"modal-close\">×</button>\r\n </div>\r\n \r\n <div className=\"bottom-sheet-content\">\r\n {loanOffsetData.map((loan, index) => (\r\n <div key={index} className=\"offset-item\">\r\n <div className=\"checkbox-wrapper\">\r\n <input \r\n type=\"checkbox\" \r\n id={`offset-${index}`}\r\n checked={loan.checked}\r\n onChange={() => handleOffsetChange(index)}\r\n className=\"hidden\"\r\n />\r\n <label \r\n htmlFor={`offset-${index}`}\r\n />\r\n </div>\r\n <div className=\"loan-details\">\r\n <span className=\"loan-name\">{loan.loan_name}</span>\r\n <span className=\"loan-amount\">{formatCurrency(loan.installment_amount)}</span>\r\n </div>\r\n </div>\r\n ))}\r\n </div>\r\n \r\n <div className=\"bottom-sheet-footer\">\r\n <button onClick={() => setShowOffsetModal(false)} className=\"apply-button\">\r\n Terapkan\r\n </button>\r\n </div>\r\n</div>\r\n</div>\r\n)}\r\n\r\n{showResultModal && loanSimulation && (\r\n <div className=\"bottom-sheet-container\">\r\n <div className=\"bottom-sheet\">\r\n <div className=\"bottom-sheet-header\">\r\n <div className=\"drag-indicator\"></div>\r\n </div>\r\n <div className=\"bottom-sheet-content\">\r\n <div className=\"simulation-result\">\r\n <div \r\n className=\"result-item\" \r\n style={{ \r\n display: \"flex\", \r\n justifyContent: \"center\", \r\n alignItems: \"center\", \r\n height: \"10vh\", // atau sesuaikan tinggi elemen sesuai kebutuhan\r\n textAlign: \"center\" \r\n }}\r\n >\r\n <h1>Simulasi Kredit</h1>\r\n </div>\r\n <div className=\"result-item\">\r\n <span>Jenis Pinjaman</span>\r\n <strong>{loanSimulation.nama_pinjaman}</strong>\r\n </div>\r\n <div className=\"result-item\">\r\n <span>Metode Pinjaman</span>\r\n <strong>{loanSimulation.approved_simulasi_perhitungan}</strong>\r\n </div>\r\n <div className=\"result-item\">\r\n <span>Pokok Pinjaman</span>\r\n <strong>{formatCurrency(loanSimulation.applied_amount)}</strong>\r\n </div>\r\n <div className=\"result-item\">\r\n <span>Tenor</span>\r\n <strong>{loanSimulation.applied_tenor} Bulan</strong>\r\n </div>\r\n <div className=\"result-item highlight\">\r\n <span>Angsuran/Bulan</span>\r\n <strong>{formatCurrency(loanSimulation.applied_angsuran_bulan)}</strong>\r\n </div>\r\n <div className=\"result-item\">\r\n <span>Biaya Administrasi</span>\r\n <strong>{formatCurrency(loanSimulation.applied_biaya_admin)}</strong>\r\n </div>\r\n <div className=\"result-item\">\r\n <span>Biaya Provisi</span>\r\n <strong>{formatCurrency(loanSimulation.applied_provisi)}</strong>\r\n </div>\r\n <div className=\"result-item\">\r\n <span>Biaya Asuransi</span>\r\n <strong>{formatCurrency(loanSimulation.applied_biaya_asuransi)}</strong>\r\n </div>\r\n <div className=\"result-item\">\r\n <span>Estimasi Biaya Offset</span>\r\n <strong>{formatCurrency(loanSimulation.applied_jumlah_offset)}</strong>\r\n </div>\r\n <div className=\"result-item highlight\">\r\n <span>Dana Diterima</span>\r\n <strong>{formatCurrency(loanSimulation.applied_dana_diterima)}</strong>\r\n </div>\r\n </div>\r\n </div>\r\n <div className=\"bottom-sheet-footer\">\r\n <button onClick={handleAjukanPinjaman} className=\"apply-button\">Ajukan Pinjaman</button>\r\n <button onClick={() => setShowResultModal(false)} className=\"close-button\">Tutup</button>\r\n </div>\r\n </div>\r\n </div>\r\n)}\r\n </div>\r\n );\r\n};\r\n\r\nexport default SimulasiPinjaman;","import React, { useState, useEffect } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport axios from 'axios';\nimport { \n Card, \n Checkbox, \n Button, \n Typography, \n Space,\n Spin\n} from 'antd';\nimport { ArrowLeftOutlined } from '@ant-design/icons';\n\nconst { Title, Paragraph } = Typography;\n\nconst API = {\n auth: \"https://lendtick-user-prod.koperasi-astra.com\",\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\n};\n\n\nconst TermCondition = () => {\n const navigate = useNavigate();\n const [loading, setLoading] = useState(false);\n const [checked, setChecked] = useState(false);\n const [formData, setFormData] = useState(null);\n\n useEffect(() => {\n const token = localStorage.getItem('token');\n if (!token) {\n navigate('/login');\n return;\n }\n\n const storedFormData = localStorage.getItem('formData');\n if (storedFormData) {\n try {\n const parsedFormData = JSON.parse(storedFormData);\n if (isFormDataValid(parsedFormData)) {\n setFormData(parsedFormData);\n } else {\n throw new Error('Data tidak lengkap');\n }\n } catch (error) {\n console.error('Error parsing formData:', error);\n alert('Data pinjaman tidak lengkap. Anda akan diarahkan ke halaman simulasi.');\n navigate('/simulasi-pinjaman');\n }\n } else {\n alert('Data pinjaman tidak ditemukan. Anda akan diarahkan ke halaman simulasi.');\n navigate('/simulation');\n }\n }, [navigate]);\n\n const isFormDataValid = (data) => {\n const requiredFields = [\n 'id_koperasi', 'tipe_pinjaman', 'nama_pinjaman', 'kode_pinjaman',\n 'applied_amount', 'applied_tenor', 'loan_purpose', 'media_informasi'\n ];\n return requiredFields.every(field => data[field] !== undefined && data[field] !== null);\n };\n\n const handleSetuju = async () => {\n if (!checked || !formData) return;\n\n setLoading(true);\n try {\n const token = localStorage.getItem('token');\n const updatedFormData = {\n ...formData,\n syarat_ketentuan: 1\n };\n\n const response = await axios.post(`${API.hostLoanNew}/loan-new`, updatedFormData, {\n headers: { Authorization: token }\n });\n\n const newFormData = response.data.data;\n setFormData(newFormData);\n localStorage.setItem('formData', JSON.stringify(newFormData));\n\n navigate('/input-document');\n } catch (error) {\n console.error('Error:', error);\n let errorMessage = 'Terjadi kesalahan. Silakan coba lagi.';\n if (error.response && error.response.data && error.response.data.message) {\n errorMessage = error.response.data.message;\n }\n alert(errorMessage);\n } finally {\n setLoading(false);\n }\n };\n\n if (!formData) {\n return <div className=\"flex justify-center items-center min-h-screen\">\n <Spin size=\"large\" />\n </div>;\n }\n\n return (\n <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px', backgroundColor: '#f8f9fa', fontFamily: 'TripSans' }}>\n <Card bordered={false}>\n <div style={{ marginBottom: '24px', display: 'flex', alignItems: 'center', gap: '16px' }}>\n <Button \n type=\"text\" \n icon={<ArrowLeftOutlined />} \n onClick={() => navigate(-1)}\n />\n <Title level={4} style={{ margin: 0 }}>Syarat & Ketentuan</Title>\n </div>\n\n <Space direction=\"vertical\" size=\"large\" style={{ width: '100%' }}>\n <div style={{ backgroundColor: '#f8f9fa', padding: '24px', borderRadius: '8px' }}>\n <Space direction=\"vertical\" size=\"middle\">\n <Paragraph>\n 1. Anggota mengikuti prosedur pengajuan pinjaman yang ditetapkan oleh Koperasi Astra sebagai lembaga pemberi pinjaman, termasuk mengisi formulir aplikasi pinjaman dan melampirkan dokumen pendukung yang ditentukan.\n </Paragraph>\n <Paragraph>\n 2. Anggota harus menandatangani surat penjanjian pinjaman yang menjelaskan detail pinjaman, termasuk jumlah pinjaman, jangka waktu pinjaman, dan tingkat bunga yang berlaku.\n </Paragraph>\n <Paragraph>\n 3. Anggota yang tidak memenuhi kriteria berhak untuk tidak disetujui pengajuan pinjamannya.\n </Paragraph>\n <Paragraph>\n 4. Persetujuan pinjaman adalah wewenang Koperasi Astra.\n </Paragraph>\n </Space>\n </div>\n\n <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px', marginBottom: '24px' }}>\n <Checkbox \n checked={checked}\n onChange={(e) => setChecked(e.target.checked)}\n >\n <span style={{ color: '#374151' }}>\n Saya menyetujui ketentuan ini\n </span>\n </Checkbox>\n </div>\n\n <Button\n type=\"primary\"\n size=\"large\"\n block\n onClick={handleSetuju}\n disabled={!checked || loading}\n loading={loading}\n >\n {loading ? 'Memproses...' : 'Setuju dan Lanjutkan'}\n </Button>\n </Space>\n </Card>\n </div>\n );\n};\n\nexport default TermCondition;","import axios from 'axios';\n\nconst API = {\n auth: \"https://lendtick-user-prod.koperasi-astra.com\",\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\n};\n\nconst CreditService = {\n DOC_TYPE_FIX: 'fix',\n DOC_TYPE_UMUM: 'umum',\n DOC_TYPE_KHUSUS: 'khusus',\n DOC_TYPE_FIX_ID_IDENTITY: 'ktp',\n DOC_TYPE_FIX_ID_CARD: 'card',\n DOC_TYPE_FIX_PERSONAL: 'personal',\n\n async getLoanRequirementDocument(kodePinjaman, idKoperasi) {\n const token = localStorage.getItem('token');\n return axios.get(`${API.hostLoanNew}/loan/requirement-document`, {\n headers: { Authorization: token },\n params: { kode_pinjaman: kodePinjaman, id_koperasi: idKoperasi }\n });\n },\n\n async postUploadDocument(data) {\n const token = localStorage.getItem('token');\n return axios.post(`${API.hostLoanNew}/loan-new/upload-document`, data, {\n headers: { Authorization: token }\n });\n },\n\n async postSaveDocument(data) {\n const token = localStorage.getItem('token');\n return axios.post(`${API.hostLoanNew}/loan-new/save-document`, data, {\n headers: { Authorization: token }\n });\n },\n\n // Add other methods as needed\n};\n\nexport default CreditService;","import React, { useState, useEffect, useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport axios from 'axios';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faArrowLeft, faUpload, faCheck, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';\nimport '../assets/styles/inputDocument.css';\nimport CreditService from '../services/CreditService';\nimport { \n Card, \n Upload, \n Button, \n message, \n Typography, \n Space, \n Modal,\n Alert\n} from 'antd';\nimport { \n ArrowLeftOutlined,\n UploadOutlined,\n EyeOutlined\n} from '@ant-design/icons';\n\nconst { Title, Text } = Typography;\n\nconst API = {\n auth: \"https://lendtick-user-prod.koperasi-astra.com\",\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\n};\n\nconst InputDocument = () => {\n const navigate = useNavigate();\n const [loading, setLoading] = useState(false);\n const [uploadingMessage, setUploadingMessage] = useState(null);\n const [loadDocumentList, setLoadDocumentList] = useState([]);\n const [arrError, setArrError] = useState([]);\n const [formData, setFormData] = useState(null);\n\n useEffect(() => {\n const storedFormData = localStorage.getItem('formData');\n if (storedFormData) {\n setFormData(JSON.parse(storedFormData));\n } else {\n setArrError(['Data pinjaman tidak ditemukan. Silakan kembali ke halaman sebelumnya.']);\n }\n }, []);\n\n useEffect(() => {\n if (formData) {\n fetchInitialData();\n }\n }, [formData]);\n\n // Tambahkan fungsi validasi file\n const beforeUpload = (file) => {\n const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';\n if (!isJpgOrPng) {\n message.error('Anda hanya dapat mengunggah file JPG/PNG!');\n return false;\n }\n \n const isLt2M = file.size / 1024 / 1024 < 2;\n if (!isLt2M) {\n message.error('Gambar harus lebih kecil dari 2MB!');\n return false;\n }\n \n return true;\n };\n\n const fetchInitialData = useCallback(async () => {\n setLoading(true);\n try {\n const token = localStorage.getItem('token');\n if (!token) {\n throw new Error('Token tidak ditemukan. Silakan login kembali.');\n }\n const response = await axios.get(`${API.hostLoanNew}/loan/requirement-document`, {\n headers: { Authorization: token },\n params: { \n kode_pinjaman: formData.kode_pinjaman, \n id_koperasi: formData.id_koperasi\n }\n });\n setLoadDocumentList(setDocumentList(response.data.data.persyaratan_umum, response.data.data.persyaratan_khusus));\n } catch (error) {\n console.error('Error fetching initial data:', error);\n setArrError([error.message || 'Terjadi kesalahan saat mengambil data. Silakan coba lagi.']);\n } finally {\n setLoading(false);\n }\n }, [formData]);\n\n const setDocumentList = useCallback((docUmum, docKhusus) => {\n const _docList = [\n { priority: 1, id: null, keyId: CreditService.DOC_TYPE_FIX_ID_IDENTITY, docNo: '', title: 'KTP', source: formData.id_identity_photo, type: CreditService.DOC_TYPE_FIX },\n { priority: 2, id: null, keyId: CreditService.DOC_TYPE_FIX_ID_CARD, docNo: '', title: 'ID CARD', source: formData.id_card_photo, type: CreditService.DOC_TYPE_FIX },\n { priority: 3, id: null, keyId: CreditService.DOC_TYPE_FIX_PERSONAL, docNo: '', title: 'Foto Selfie', source: formData.personal_photo, type: CreditService.DOC_TYPE_FIX },\n ];\n \n let lastPriority = _docList.length;\n \n if (docUmum && Array.isArray(docUmum)) {\n docUmum.forEach(doc => {\n lastPriority++;\n _docList.push({\n priority: lastPriority,\n id: doc.id_loan_persyaratan_umum,\n keyId: doc.cms_persyaratan_umum_id,\n docNo: doc.no_dokumen || '',\n title: doc.description_persyaratan_umum,\n source: doc.persy_umum_photo || '',\n type: CreditService.DOC_TYPE_UMUM,\n model: doc,\n });\n });\n }\n \n if (docKhusus && Array.isArray(docKhusus)) {\n docKhusus.forEach(doc => {\n lastPriority++;\n _docList.push({\n priority: lastPriority,\n id: doc.id_loan_persyaratan_kusus,\n keyId: doc.cms_persyaratan_khusus_id,\n docNo: doc.no_dokumen || '',\n title: doc.description_persyaratan_kusus,\n source: doc.persy_khusus_photo || '',\n type: CreditService.DOC_TYPE_KHUSUS,\n model: doc,\n });\n });\n }\n \n return _docList;\n }, [formData]);\n\n const handleFileChange = useCallback((event, priority) => {\n const file = event.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onloadend = () => {\n const base64String = reader.result;\n updateDocument(priority, base64String, file.type);\n };\n reader.readAsDataURL(file);\n }\n }, []);\n\n const updateDocument = useCallback((priority, base64, fileType) => {\n setLoadDocumentList(prevDocs => prevDocs.map(doc => \n doc.priority === priority ? { ...doc, source: base64, base64: base64.split(',')[1], extension: fileType.split('/')[1] } : doc\n ));\n setArrError([]);\n }, []);\n\n const onClickSubmit = useCallback(async () => {\n const errors = loadDocumentList.filter(doc => !doc.source || doc.source === '')\n .map(doc => `Silahkan pilih gambar untuk [${doc.title}]`);\n \n if (errors.length > 0) {\n setArrError(errors);\n return;\n }\n \n setLoading(true);\n const docLength = loadDocumentList.length;\n let uploadCount = 0;\n \n try {\n for (const doc of loadDocumentList) {\n setUploadingMessage(`Uploading ${uploadCount + 1}/${docLength} document... `);\n await postUploadDocument(doc);\n uploadCount++;\n }\n \n setUploadingMessage('Saving document... ');\n const res = await postSaveDocument();\n setFormData(res.data);\n localStorage.setItem('formData', JSON.stringify(res.data));\n \n navigate('/input-email');\n } catch (error) {\n console.error('Error during document upload:', error);\n setArrError(['Terjadi kesalahan saat mengunggah dokumen. Silakan coba lagi.']);\n } finally {\n setLoading(false);\n setUploadingMessage(null);\n }\n }, [loadDocumentList, formData, navigate]);\n\n const postUploadDocument = async (document) => {\n if (!document.base64) return;\n\n const postParams = {\n loan_new_id: formData.loan_new_id,\n type: document.type,\n key_id: document.keyId,\n content: `data:image/${document.extension};base64,${document.base64}`,\n persyaratan_umum: document.type === CreditService.DOC_TYPE_UMUM ? document.model : null,\n persyaratan_khusus: document.type === CreditService.DOC_TYPE_KHUSUS ? document.model : null,\n };\n\n const token = localStorage.getItem('token');\n await axios.post(`${API.hostLoanNew}/loan-new/upload-document`, postParams, {\n headers: { Authorization: token }\n });\n };\n\n const postSaveDocument = async () => {\n const token = localStorage.getItem('token');\n return await axios.post(`${API.hostLoanNew}/loan-new/save-document`, {\n loan_new_id: formData.loan_new_id,\n }, {\n headers: { Authorization: token }\n });\n };\n\n if (loading) {\n return (\n <div className=\"loading-container\">\n <div className=\"spinner\"></div>\n <p>{uploadingMessage}</p>\n </div>\n );\n }\n\n return (\n <div style={{ maxWidth: 800, margin: '0 auto', padding: '16px' }}>\n <Space direction=\"vertical\" size=\"large\" style={{ width: '100%' }}>\n {/* Header */}\n <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>\n <Button \n type=\"text\" \n icon={<ArrowLeftOutlined />} \n onClick={() => navigate(-1)} \n />\n <Title level={4} style={{ margin: 0 }}>Dokumen Persyaratan</Title>\n </div>\n\n {/* Document Cards */}\n <Space direction=\"vertical\" size=\"middle\" style={{ width: '100%' }}>\n {loadDocumentList.map((doc) => (\n <Card \n key={doc.priority}\n title={doc.title}\n style={{ width: '100%' }}\n >\n <Space direction=\"vertical\" size=\"middle\" style={{ width: '100%' }}>\n {/* Info text untuk batasan file */}\n <Text type=\"secondary\">\n Format file: JPG/PNG, Maksimum 2MB\n </Text>\n\n <Upload\n accept=\".jpg,.jpeg,.png\"\n beforeUpload={beforeUpload}\n showUploadList={false}\n customRequest={({ file }) => {\n handleFileChange({ target: { files: [file] }}, doc.priority);\n }}\n >\n <Button \n icon={<UploadOutlined />} \n type={doc.source ? \"default\" : \"primary\"}\n >\n {doc.source ? 'Ubah File' : 'Pilih File'}\n </Button>\n </Upload>\n\n {/* Preview Image dengan ukuran lebih besar */}\n {doc.source && (\n <div style={{ \n border: '1px solid #f0f0f0',\n borderRadius: '8px',\n padding: '8px',\n position: 'relative'\n }}>\n <img \n src={doc.source} \n alt={`Preview ${doc.title}`} \n style={{ \n width: '100%',\n height: 'auto',\n maxHeight: '300px',\n objectFit: 'contain'\n }} \n />\n <Button\n type=\"primary\"\n icon={<EyeOutlined />}\n style={{\n position: 'absolute',\n right: '8px',\n top: '8px'\n }}\n onClick={() => {\n Modal.info({\n title: doc.title,\n content: (\n <img \n src={doc.source} \n alt={`Preview ${doc.title}`}\n style={{\n width: '100%',\n height: 'auto',\n maxHeight: '80vh',\n objectFit: 'contain'\n }}\n />\n ),\n width: '80%',\n });\n }}\n >\n Lihat Full\n </Button>\n </div>\n )}\n </Space>\n </Card>\n ))}\n </Space>\n\n {/* Error Messages */}\n {arrError.length > 0 && (\n <Alert\n message=\"Error\"\n description={\n <ul style={{ margin: 0, paddingLeft: 20 }}>\n {arrError.map((error, index) => (\n <li key={index}>{error}</li>\n ))}\n </ul>\n }\n type=\"error\"\n showIcon\n />\n )}\n\n {/* Submit Button */}\n <Button\n type=\"primary\"\n size=\"large\"\n block\n onClick={onClickSubmit}\n loading={loading}\n disabled={loading || loadDocumentList.some(doc => !doc.source)}\n >\n {loading ? `${uploadingMessage || 'Mengunggah...'}` : 'Lanjutkan'}\n </Button>\n </Space>\n\n {/* Loading Modal */}\n <Modal\n visible={loading}\n closable={false}\n footer={null}\n centered\n >\n <div style={{ textAlign: 'center', padding: '20px' }}>\n <Space direction=\"vertical\" size=\"middle\">\n <div className=\"spinner\" />\n <Text>{uploadingMessage || 'Mengunggah...'}</Text>\n </Space>\n </div>\n </Modal>\n </div>\n );\n};\n\nexport default InputDocument;","// src/services/API.js\n\nexport const API = {\n auth: \"https://lendtick-user-prod.koperasi-astra.com\",\n notif: \"https://api-notif.koperasi-astra.com\",\n hostLoan: \"https://commerce-kai-loan-opusb-staging.azurewebsites.net\",\n hostLoanCore: \"https://commerce-kai-loan-core-opusb-stg.azurewebsites.net\",\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\n finance: \"http://13.67.41.162\",\n content: \"https://commerce-kai-content-staging.azurewebsites.net\",\n contentOld: \"https://commerce-kai-content-staging.azurewebsites.net\",\n catalog: \"https://lendtick-catalog.koperasi-astra.com\",\n hotel: \"https://commerce-kai-order-hotel.azurewebsites.net\",\n };","import { API } from './API';\n\nconst urlGetLoanBalance = API.hostLoanNew + '/loan-new';\nconst urlGetLoanDetailApproved = API.hostLoanNew + '/loan-new/detail-approved';\nconst urlGetReasonCancel = API.hostLoanNew + '/loan/reason-cancel';\nconst urlPostRejectUser = API.hostLoanNew + '/loan-new/reject-user';\nconst urlPostRevisionUser = API.hostLoanNew + '/loan-new/revision-user';\nconst urlGetContractDocument = API.hostLoanNew + '/loan-new/contract-document';\nconst urlPostManualSignature = API.hostLoanNew + '/loan-new/manual-signature';\nconst urlGetInstallmentCardDetail = API.hostLoanNew + '/loan/installment-card-details';\nconst urlGetInstallmentCardReport = API.hostLoanNew + '/loan/installment-card-report';\n\nconst urlPostDigisignVerification = API.hostLoanNew + '/digisign/verification';\nconst urlPostDigisignActivation = API.hostLoanNew + '/digisign/activation';\nconst urlPostDigisignSendDocument = API.hostLoanNew + '/digisign/sign-document';\nconst urlPostDigisignLinkSign = API.hostLoanNew + '/digisign/gen-link-sign';\nconst urlPostDigisignDescript = API.hostLoanNew + '/digisign/decript-response';\nconst urlPostDigisignFile = API.hostLoanNew + '/digisign/digisign-file';\n\nconst urlPostResi = 'https://u.koperasi-astra.com/cek-resi';\nconst urlCekOrder = API.hostLoanNew + '/order/cek-order';\n\nconst send = (requestFn) => {\n return new Promise((resolve, reject) => {\n const token = localStorage.getItem('token');\n requestFn(token)\n .then(response => response.json())\n .then(json => {\n if(json.status === 1) {\n if (json.data && json.data.token) {\n localStorage.setItem('token', json.data.token);\n send(requestFn);\n } else {\n resolve(json);\n }\n } else {\n reject(json);\n }\n })\n .catch(err => {\n reject(err);\n });\n });\n};\n\nconst CreditNewHistoryService = {\n STATUS_DRAFT: 'MLTSTS00',\n STATUS_REQUESTED: 'MLTSTS01',\n STATUS_APPROVED_HR: 'MLTSTS03',\n STATUS_APPROVED_MEMBER: 'MLTSTS07',\n STATUS_APPROVED_BY_KAI: 'MLTSTS13',\n STATUS_ACTIVE: 'MLTSTS14',\n STATUS_CANCEL_BY_USER: 'MLTSTS15',\n STATUS_CANCEL_BY_SYSTEM: 'MLTSTS16',\n STATUS_CANCEL_BY_KAI: 'MLTSTS17',\n STATUS_LOAN_TEXT: {\n 'MLTSTS00': 'Drafted',\n 'MLTSTS01': 'Menunggu Persetujuan HRD',\n 'MLTSTS03': 'Menungggu Persetujuan Koperasi Astra',\n 'MLTSTS07': 'Menunggu Pencairan',\n 'MLTSTS13': 'Menunggu Konfirmasi Anggota',\n 'MLTSTS14': 'Aktif',\n 'AC': 'Aktif',\n 'MLTSTS15': 'Batal/ditolak',\n 'MLTSTS16': 'Batal/ditolak',\n 'MLTSTS17': 'Batal/ditolak',\n },\n\n getResponseData(res) {\n return res != null && res.data != null ? res.data : null;\n },\n\n currencyFormat(num) {\n return 'Rp ' + num.toFixed(0).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,');\n },\n\n convertFormatNumber(e) {\n if (Number(e)) {\n return e;\n } else if (Number(e.replace(/,/g, '').replace('Rp ', ''))) {\n return Number(e.replace(/,/g, '').replace('Rp ', ''));\n }\n },\n \n getLoanList: (page, size, idKoperasi) => {\n return send((token) => {\n return fetch(urlGetLoanBalance + '?page=' + page + '&size=' + size + '&id_koperasi=' + idKoperasi, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n\n getLoanDetailApproved: (loanNewId, cmsIdAnalis) => {\n // console.log('getLoanDetailApproved', urlGetLoanDetailApproved + '?loan_new_id=' + loanNewId + '&cms_id_analisa=' + cmsIdAnalis);\n return send((token) => {\n return fetch(urlGetLoanDetailApproved + '?loan_new_id=' + loanNewId + '&cms_id_analisa=' + cmsIdAnalis, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n\n getReasonCancel: () => {\n return send((token) => {\n return fetch(urlGetReasonCancel + '?type=ANG', {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n\n postRejectUser: (data) => {\n return send((token) => {\n return fetch(urlPostRejectUser, {\n method: 'POST',\n body: JSON.stringify(data),\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n\n postRevisionUser: (data) => {\n return send((token) => {\n return fetch(urlPostRevisionUser, {\n method: 'POST',\n body: JSON.stringify(data),\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n\n getUrlGetContractDocument: (loanNewId) => {\n return urlGetContractDocument + '?loan_new_id=' + loanNewId;\n },\n\n getContractDocument: (loanNewId, filename) => {\n // Note: This method might need to be adjusted for web environment\n const token = localStorage.getItem('token');\n return fetch(urlGetContractDocument + '?loan_new_id=' + loanNewId, {\n headers: {\n 'Authorization': token,\n }\n })\n .then(response => response.blob())\n .then(blob => {\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.style.display = 'none';\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n });\n },\n\n postManualSignature: (data) => {\n return send((token) => {\n return fetch(urlPostManualSignature, {\n method: 'POST',\n body: JSON.stringify(data),\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n\n getInstallmentCardDetail: (noDocument) => {\n return send((token) => {\n return fetch(urlGetInstallmentCardDetail + '?cms_kartuangsuran_id=' + noDocument, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n\n getInstallmentCardReport: (cmsKartupinjamanId, cmsKartuangsuranId, filename) => {\n // Note: This method might need to be adjusted for web environment\n const token = localStorage.getItem('token');\n return fetch(urlGetInstallmentCardReport + '?cms_kartupinjaman_id=' + cmsKartupinjamanId + '&cms_kartuangsuran_id=' + cmsKartuangsuranId, {\n headers: {\n 'Authorization': token,\n }\n })\n .then(response => response.blob())\n .then(blob => {\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.style.display = 'none';\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n });\n },\n\n postDigisignVerification: (data) => {\n return send((token) => {\n return fetch(urlPostDigisignVerification, {\n method: 'POST',\n body: JSON.stringify(data),\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n\n postDigisignActivation: (data) => {\n // console.log('data', urlPostDigisignActivation, data);\n return send((token) => {\n return fetch(urlPostDigisignActivation, {\n method: 'POST',\n body: JSON.stringify(data),\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n\n postDigisignSendDocument: (data) => {\n // console.log('data', urlPostDigisignSendDocument, data);\n return send((token) => {\n return fetch(urlPostDigisignSendDocument, {\n method: 'POST',\n body: JSON.stringify(data),\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n\n postDigisignLinkSign: (data) => {\n // console.log('data', urlPostDigisignLinkSign, data);\n return send((token) => {\n return fetch(urlPostDigisignLinkSign, {\n method: 'POST',\n body: JSON.stringify(data),\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n\n postDigisignDescript: (data) => {\n // console.log('data', urlPostDigisignDescript, data);\n return send((token) => {\n return fetch(urlPostDigisignDescript, {\n method: 'POST',\n body: JSON.stringify(data),\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n\n postDigisignFile: (data) => {\n // console.log('data', urlPostDigisignFile, data);\n return send((token) => {\n return fetch(urlPostDigisignFile, {\n method: 'POST',\n body: JSON.stringify(data),\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n \n postCekResi: (data) => {\n return send((token) => {\n return fetch(urlPostResi, {\n method: 'POST',\n body: JSON.stringify(data),\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n\n postCekOrder: (data) => {\n return send((token) => {\n return fetch(urlCekOrder, {\n method: 'POST',\n body: JSON.stringify(data),\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': token\n }\n });\n });\n },\n};\n\nexport default CreditNewHistoryService;","// src/utils/loanUtils.js\n\nimport CreditNewHistoryService from \"../services/CreditNewHistoryService\";\n\nconst allowedShowStatusDanaDiterima = [\n CreditNewHistoryService.STATUS_REQUESTED,\n CreditNewHistoryService.STATUS_APPROVED_HR\n];\n\nexport const isShowDanaDiterima = (status_loan) => {\n return allowedShowStatusDanaDiterima.includes(status_loan);\n};\n\n// Jika Anda memiliki fungsi utilitas lain terkait loan, Anda bisa menambahkannya di sini\n// Contoh:\n// export const someOtherLoanUtil = () => {\n// // Implementation\n// };","import React, { useState, useEffect } from 'react';\nimport { useNavigate, useLocation } from 'react-router-dom';\nimport { Grid, Row, Col } from 'react-flexbox-grid';\nimport moment from 'moment';\nimport 'moment/locale/id';\nimport accounting from 'accounting';\nimport _ from 'lodash';\n\nimport CreditNewHistoryService from '../services/CreditNewHistoryService';\nimport { isShowDanaDiterima } from '../utils/loan';\n\nconst DetailRiwayatPinjaman = () => {\n const navigate = useNavigate();\n const location = useLocation();\n const [state, setState] = useState({\n titleError: null,\n arrError: [],\n loading: false,\n isRefresh: false,\n alertConfirmNo: false,\n alertConfirmYesGt: false,\n formData: location.state && location.state.formData ? location.state.formData : {},\n alasanBatan: [{ value: '', label: '' }],\n alasanBatanSelected: null,\n visibleRejectReason: false,\n labelRejectReason: null,\n currentPosition: 0,\n labelKirim: '',\n time: '',\n waybill_number: '',\n receiver_name: '',\n shipper_name: '',\n courier_name: '',\n showModalResi: false,\n summary_courier: '',\n manifest: []\n });\n\n useEffect(() => {\n const unsubscribe = () => {\n const formData = location.state && location.state.formData ? location.state.formData : {};\n if (formData && formData.status_loan === CreditNewHistoryService.STATUS_APPROVED_BY_KAI) {\n setState(prevState => ({ ...prevState, loading: true }));\n fetchInit();\n }\n \n if (state.formData.order_id !== null && state.formData.order_id !== '') {\n // fetchPengiriman();\n }\n };\n \n unsubscribe();\n \n return () => {\n // Cleanup if needed\n };\n }, [location.state]);\n\n useEffect(() => {\n const newFormData = location.state && location.state.formData ? location.state.formData : {};\n if (newFormData !== state.formData) {\n setState(prevState => ({ ...prevState, formData: newFormData }));\n }\n }, [location.state]);\n\n const setResponseError = (errMessage) => {\n setState(prevState => ({\n ...prevState,\n arrError: [...prevState.arrError, errMessage]\n }));\n };\n\n const fetchInit = async () => {\n try {\n const token = localStorage.getItem('token');\n if (token === null) {\n navigate('/login');\n } else {\n fetchAlasanBatal();\n }\n } catch (err) {\n setState(prevState => ({ ...prevState, loading: false }));\n }\n };\n\n const onRefresh = async () => {\n const formData = location.state && location.state.formData ? location.state.formData : {};\n if (formData && formData.status_loan === CreditNewHistoryService.STATUS_APPROVED_BY_KAI) {\n setState(prevState => ({ ...prevState, isRefresh: true }));\n await fetchInit();\n }\n };\n\n const isStepStatus = () => {\n const formData = state.formData;\n return [CreditNewHistoryService.STATUS_REQUESTED, CreditNewHistoryService.STATUS_APPROVED_HR].includes(formData.status_loan);\n };\n\n const isStepMemberConfirmation = () => {\n const formData = state.formData;\n return formData.status_loan === CreditNewHistoryService.STATUS_APPROVED_BY_KAI;\n };\n\n const getStatusInfoText = () => {\n const formData = state.formData;\n if (formData && formData.status_loan === CreditNewHistoryService.STATUS_REQUESTED) {\n return (formData.kode_pinjaman === '12E' || formData.kode_pinjaman === '12F')\n ? 'Pengajuan pembelian sedang ditinjau oleh bagian HRD'\n : 'Pengajuan pinjaman sedang ditinjau oleh bagian HRD';\n }\n if (formData && formData.status_loan === CreditNewHistoryService.STATUS_APPROVED_HR) {\n return (formData.kode_pinjaman === '12E' || formData.kode_pinjaman === '12F')\n ? 'Pengajuan pembelian sedang ditinjau oleh Koperasi Astra'\n : 'Pengajuan pinjaman sedang ditinjau oleh Koperasi Astra';\n }\n return '';\n };\n\n const getStepNumber = () => {\n const formData = state.formData;\n if (formData && formData.status_loan === CreditNewHistoryService.STATUS_REQUESTED) {\n return 1;\n }\n if (formData && formData.status_loan === CreditNewHistoryService.STATUS_APPROVED_HR) {\n return 2;\n }\n if (formData && formData.status_loan === CreditNewHistoryService.STATUS_APPROVED_BY_KAI) {\n return 3;\n }\n };\n\n const fetchAlasanBatal = () => {\n if (isStepMemberConfirmation()) {\n CreditNewHistoryService.getReasonCancel()\n .then((res) => {\n const resData = CreditNewHistoryService.getResponseData(res);\n setState(prevState => ({\n ...prevState,\n loading: false,\n isRefresh: false,\n alasanBatan: resData.map((it) => ({\n value: it.id.toString(),\n label: it.reason\n })),\n }));\n })\n .catch((error) => {\n setState(prevState => ({ ...prevState, loading: false, isRefresh: false }));\n // console.log('error', error);\n alert('Pastikan koneksi tersambung, silakan coba lagi');\n });\n } else {\n setState(prevState => ({ ...prevState, loading: false, isRefresh: false }));\n }\n };\n\n const onPressConfirmYes = (data) => {\n const formData = state.formData;\n if (formData && formData.gt_rencana_cair) {\n setState(prevState => ({ ...prevState, alertConfirmYesGt: true }));\n return;\n }\n\n navigate('/credit-new-ttd');\n };\n\n const onPressConfirmYesYes = () => {\n const reqBody = {\n loan_new_id: state.formData.loan_new_id,\n };\n\n setState(prevState => ({ ...prevState, loading: true }));\n CreditNewHistoryService.postRevisionUser(reqBody)\n .then((res) => {\n setState(prevState => ({ ...prevState, loading: false, alertConfirmNo: false }));\n navigate('/credit-list');\n })\n .catch((error) => {\n setState(prevState => ({ ...prevState, loading: false, isRefresh: false }));\n // console.log('error', error);\n const message = error.message || 'Pastikan koneksi tersambung, silakan coba lagi';\n alert(message);\n });\n };\n\n const onPressConfirmYesCancel = () => {\n setState(prevState => ({ ...prevState, alertConfirmYesGt: false, alertConfirmNo: true, alasanBatanSelected: null }));\n };\n\n const onPressConfirmNo = (data) => {\n setState(prevState => ({ ...prevState, alertConfirmNo: true, alasanBatanSelected: null }));\n };\n\n const onPressConfirmNoYes = (data) => {\n if (!state.alasanBatanSelected || state.alasanBatanSelected === '') {\n return '';\n }\n\n let alasanBatalText = '';\n const { alasanBatan } = state;\n if (alasanBatan && alasanBatan.length > 0) {\n for (const ix in alasanBatan) {\n if (alasanBatan[ix].value === state.alasanBatanSelected) {\n alasanBatalText = alasanBatan[ix].label;\n break;\n }\n }\n }\n\n var reqBody = {\n loan_new_id: state.formData.loan_new_id,\n id_koperasi: state.personalData && state.personalData.id_koperasi ? state.personalData.id_koperasi : undefined,\n alasan_batal: state.alasanBatanSelected,\n alasan_batal_text: alasanBatalText,\n detail_alasan: '',\n };\n\n setState(prevState => ({ ...prevState, loading: true }));\n CreditNewHistoryService.postRejectUser(reqBody)\n .then((res) => {\n setState(prevState => ({ ...prevState, loading: false, alertConfirmNo: false }));\n navigate('/credit-list');\n })\n .catch((error) => {\n setState(prevState => ({ ...prevState, loading: false, isRefresh: false }));\n // console.log('error', error);\n const message = error.message || 'Pastikan koneksi tersambung, silakan coba lagi';\n alert(message);\n });\n };\n\n const onPressConfirmNoCancel = (data) => {\n setState(prevState => ({ ...prevState, alertConfirmNo: false }));\n };\n\n const onSelectAlasanBatal = (value) => {\n setState(prevState => ({\n ...prevState,\n alasanBatanSelected: value,\n visibleRejectReason: false,\n labelRejectReason: value\n }));\n };\n\n const showRejectReason = () => {\n setState(prevState => ({ ...prevState, visibleRejectReason: !prevState.visibleRejectReason }));\n };\n\n const toggleBottomNavigationViewRejectReason = () => {\n setState(prevState => ({ ...prevState, visibleRejectReason: !prevState.visibleRejectReason }));\n };\n\n const showResi = () => {\n const orderBody = {\n loan_new_id: state.formData.loan_new_id,\n };\n\n setState(prevState => ({ ...prevState, loading: true }));\n CreditNewHistoryService.postCekOrder(orderBody)\n .then((res) => {\n // console.log('res', res.data.nomor_resi);\n const reqBody = {\n resi: res.data.nomor_resi,\n };\n\n CreditNewHistoryService.postCekResi(reqBody)\n .then((res) => {\n setState(prevState => ({\n ...prevState,\n loading: false,\n showModalResi: !prevState.showModalResi,\n summary_courier: res.data.summary,\n manifest: res.data.manifest\n }));\n })\n .catch((error) => {\n // console.log('catch', error.data.manifest);\n setState(prevState => ({\n ...prevState,\n loading: false,\n showModalResi: !prevState.showModalResi,\n summary_courier: error.data.summary,\n manifest: error.data.manifest\n }));\n });\n })\n .catch((error) => {\n // console.log('catch', error);\n setState(prevState => ({\n ...prevState,\n loading: false,\n showModalResi: !prevState.showModalResi,\n summary_courier: error.data.summary,\n manifest: error.data.manifest\n }));\n });\n };\n\n const onPressCloseResi = () => {\n setState(prevState => ({ ...prevState, showModalResi: !prevState.showModalResi }));\n };\n\n const onPressRefreshResi = () => {\n setState(prevState => ({ ...prevState, showModalResi: !prevState.showModalResi }));\n };\n\n if (state.loading) {\n return (\n <div style={{ padding: 15, backgroundColor: '#f8f8ff' }}>\n <div style={{ padding: 30 }}>\n <p>Loading...</p>\n </div>\n </div>\n );\n }\n\n return (\n <div style={{ paddingTop: 15, paddingBottom: 15, backgroundColor: '#f8f8ff' }}>\n {state.arrError.length > 0 && (\n <div>\n <div className=\"alert alert-warning\">\n <h4>{state.titleError}</h4>\n <ul>\n {state.arrError.map((error, index) => (\n <li key={index}>{error}</li>\n ))}\n </ul>\n </div>\n </div>\n )}\n <div className=\"container\">\n {isStepStatus() && (\n <LoanStatusApproval\n data={state.formData}\n text={getStatusInfoText()}\n waybill_number={state.waybill_number}\n receiver_name={state.receiver_name}\n shipper_name={state.shipper_name}\n courier_name={state.courier_name}\n time={state.time}\n labelKirim={state.labelKirim}\n />\n )}\n {isStepMemberConfirmation() && (\n <LoanMemberConfirmation\n data={state.formData}\n onPressYes={(data) => onPressConfirmYes(data)}\n showResi={(data) => showResi(data)}\n onPressNo={(data) => onPressConfirmNo(data)}\n />\n )}\n </div>\n\n {/* Modal for alertConfirmYesGt */}\n {state.alertConfirmYesGt && (\n <div className=\"modal\">\n <div className=\"modal-content\">\n <p>Persetujuan pengajuan pinjaman Anda melebihi batas waktu konfirmasi. Apakah Anda ingin mengajukan perhitungan kembali?</p>\n <button onClick={onPressConfirmYesYes}>Ya</button>\n <button onClick={onPressConfirmYesCancel}>Batalkan Pinjaman</button>\n </div>\n </div>\n )}\n\n {/* Modal for showModalResi */}\n {state.showModalResi && (\n <div className=\"modal\">\n <div className=\"modal-content\">\n <h2>Rincian Pengiriman</h2>\n {state.summary_courier && (\n <table>\n <tbody>\n <tr>\n <td>No. Resi</td>\n <td>{state.summary_courier.waybill_number}</td>\n </tr>\n <tr>\n <td>Kurir</td>\n <td>{state.summary_courier.courier_name}</td>\n </tr>\n <tr>\n <td>Layanan</td>\n <td>{state.summary_courier.service_code}</td>\n </tr>\n <tr>\n <td>Pengirim</td>\n <td>{state.summary_courier.shipper_name}</td>\n </tr>\n <tr>\n <td>Penerima</td>\n <td>{state.summary_courier.receiver_name}</td>\n </tr>\n <tr>\n <td>Asal</td>\n <td>{state.summary_courier.origin}</td>\n </tr>\n <tr>\n <td>Tujuan</td>\n <td>{state.summary_courier.destination}</td>\n </tr>\n <tr>\n <td>Tanggal</td>\n <td>{state.summary_courier.waybill_date}</td>\n </tr>\n <tr>\n <td>Status</td>\n <td>{state.summary_courier.status}</td>\n </tr>\n </tbody>\n </table>\n )}\n <table>\n <thead>\n <tr>\n <th>Tanggal & Waktu</th>\n <th>Deskripsi</th>\n </tr>\n </thead>\n <tbody>\n {state.manifest.length > 0 && state.manifest.map((step, index) => (\n <tr key={index}>\n <td>{step.manifest_date + ' ' + step.manifest_time}</td>\n <td>{step.manifest_description}</td>\n </tr>\n ))}\n </tbody>\n </table>\n <button onClick={onPressRefreshResi}>Perbarui Resi</button>\n <button onClick={onPressCloseResi}>OK</button>\n </div>\n </div>\n )}\n\n {/* Modal for alertConfirmNo */}\n {state.alertConfirmNo && (\n <div className=\"modal\">\n <div className=\"modal-content\">\n <h2>Apakah anda yakin ingin membatalkan pinjaman?</h2>\n <p>Jika ya, isi alasan pembatalan pinjaman</p>\n <select\n value={state.alasanBatanSelected || ''}\n onChange={(e) => onSelectAlasanBatal(e.target.value)}\n >\n <option value=\"\">Pilih Alasan Batal</option>\n {state.alasanBatan.map((reason) => (\n <option key={reason.value} value={reason.value}>\n {reason.label}\n </option>\n ))}\n </select>\n <button onClick={onPressConfirmNoYes}>Ya</button>\n <button onClick={onPressConfirmNoCancel}>Tidak</button>\n </div>\n </div>\n )}\n </div>\n );\n};\n\nconst LoanStatusApproval = (props) => {\n const tenor = parseInt(props.data.applied_tenor || 0);\n const amount = props.data.applied_amount && props.data.applied_amount !== '' ? accounting.formatMoney(props.data.applied_amount, \"\", 0, \",\", \",\") : 0;\n const angsuranBulan = props.data.applied_angsuran_bulan && props.data.applied_angsuran_bulan !== '' ? accounting.formatMoney(props.data.applied_angsuran_bulan, \"\", 0, \",\", \",\") : 0;\n const dateApplied = props.data.date_applied && props.data.date_applied !== '' ? moment(props.data.date_applied).format('DD/MM/YYYY') : '-';\n const danaDiterima = props.data.applied_dana_diterima && props.data.applied_dana_diterima !== '' ? accounting.formatMoney(props.data.applied_dana_diterima, \"\", 0, \",\", \",\") : 0;\n const danaDiterimaAnggota = props.data.dana_diterima_anggota && props.data.dana_diterima_anggota !== '' ? accounting.formatMoney(props.data.dana_diterima_anggota, \"\", 0, \",\", \",\") : 0;\n const nilaiPelunasanKopnit = props.data.nilai_pelunasan_kopnit && props.data.nilai_pelunasan_kopnit !== '' ? accounting.formatMoney(props.data.nilai_pelunasan_kopnit, \"\", 0, \",\", \",\") : 0;\n\n return (\n <div className=\"loan-status-approval\">\n <div className=\"loan-status-header\">\n <h3>Summary</h3>\n </div>\n <Grid>\n <Row>\n <Col xs={8}>Tanggal Pengajuan</Col>\n <Col xs={4}>{dateApplied}</Col>\n </Row>\n <Row>\n <Col xs={8}>Tipe Pengajuan</Col>\n <Col xs={4}>{props.data.nama_pinjaman}</Col>\n </Row>\n {(props.data.kode_pinjaman === '12E' || props.data.kode_pinjaman === '12F') ? (\n <>\n <Row>\n <Col xs={8}>Nama Barang</Col>\n <Col xs={4}>{props.data.nama_barang}</Col>\n </Row>\n <Row>\n <Col xs={8}>Tipe/Merek</Col>\n <Col xs={4}>{props.data.tipe_merk}</Col>\n </Row>\n <Row>\n <Col xs={8}>Warna</Col>\n <Col xs={4}>{props.data.warna}</Col>\n </Row>\n <Row>\n <Col xs={8}>Alamat Kirim</Col>\n <Col xs={4}>{props.data.alamat_pengiriman}</Col>\n </Row>\n <Row>\n <Col xs={8}>Jangka Waktu Cicilan</Col>\n <Col xs={4}>{tenor} Bulan</Col>\n </Row>\n <Row>\n <Col xs={8}>Cicilan/Bulan</Col>\n <Col xs={4}>Rp. {angsuranBulan}</Col>\n </Row>\n </>\n ) : (\n <>\n <Row>\n <Col xs={8}>Jumlah Pengajuan</Col>\n <Col xs={4}>Rp. {amount}</Col>\n </Row>\n <Row>\n <Col xs={8}>Tenor</Col>\n <Col xs={4}>{tenor} Bulan</Col>\n </Row>\n <Row>\n <Col xs={8}>Angsuran/Bulan</Col>\n <Col xs={4}>Rp. {angsuranBulan}</Col>\n </Row>\n </>\n )}\n {(props.data.kode_pinjaman !== '12E' && props.data.kode_pinjaman !== '12F') && isShowDanaDiterima(props.data.status_loan) && (\n <>\n <Row>\n <Col xs={8}>Dana Diterima</Col>\n <Col xs={4}>Rp. {danaDiterima}</Col>\n </Row>\n {props.data.is_split_pencairan === 'Y' && (\n <>\n <Row>\n <Col xs={8}>Pelunasan Koperasi Unit</Col>\n <Col xs={4}>Rp. {nilaiPelunasanKopnit}</Col>\n </Row>\n <Row>\n <Col xs={8}>Dana Diterima Anggota</Col>\n <Col xs={4}>Rp. {danaDiterimaAnggota}</Col>\n </Row>\n </>\n )}\n </>\n )}\n </Grid>\n <p>{props.text}</p>\n </div>\n );\n};\n\nconst LoanMemberConfirmation = (props) => {\n const formatAddress = (address) => {\n if (!address) return '-';\n const parts = address.split(',').map(part => part.trim());\n return parts.join('\\n');\n };\n\n const tenor = parseInt(props.data.approved_tenor || 0);\n const amount = props.data.approved_amount && props.data.approved_amount !== '' ? accounting.formatMoney(props.data.approved_amount, \"\", 0, \",\", \",\") : 0;\n const angsuranBulan = props.data.angsuran_bulan && props.data.angsuran_bulan !== '' ? accounting.formatMoney(props.data.angsuran_bulan, \"\", 0, \",\", \",\") : 0;\n const dataDiterima = props.data.dana_deterima && props.data.dana_deterima !== '' ? accounting.formatMoney(props.data.dana_deterima, \"\", 0, \",\", \",\") : 0;\n const pt_bns_tahun = props.data.pt_bns_tahun && props.data.pt_bns_tahun !== '' ? accounting.formatMoney(props.data.pt_bns_tahun, \"\", 0, \",\", \",\") : 0;\n const rencanaCair = props.data.rencana_cair && props.data.rencana_cair !== '' ? moment(props.data.rencana_cair).format('DD/MM/YYYY') : '-';\n const biaya_asuransi = props.data.biaya_asuransi && props.data.biaya_asuransi !== '' ? accounting.formatMoney(props.data.biaya_asuransi, \"\", 0, \",\", \",\") : 0;\n const biaya_admin = props.data.biaya_admin && props.data.biaya_admin !== '' ? accounting.formatMoney(props.data.biaya_admin, \"\", 0, \",\", \",\") : 0;\n const provisi = props.data.provisi && props.data.provisi !== '' ? accounting.formatMoney(props.data.provisi, \"\", 0, \",\", \",\") : 0;\n const jumlah_offset = props.data.jumlah_offset && props.data.jumlah_offset !== '' ? accounting.formatMoney(props.data.jumlah_offset, \"\", 0, \",\", \",\") : 0;\n\n const is12EF = props.data.kode_pinjaman === '12E' || props.data.kode_pinjaman === '12F';\n\n return (\n <div className=\"loan-member-confirmation\">\n <div className=\"loan-header\">\n <h3>Persetujuan {is12EF ? 'Cicilan' : 'Kredit'}</h3>\n </div>\n <div className=\"loan-type\">\n <p>Tipe Pinjaman</p>\n <h4>{props.data.nama_pinjaman}</h4>\n </div>\n {!is12EF && (\n <div className=\"loan-amount\">\n <Grid>\n <Row>\n <Col xs={6}>Dana Diterima</Col>\n <Col xs={6}>Rp. {dataDiterima}</Col>\n </Row>\n </Grid>\n </div>\n )}\n <Grid className=\"loan-details\">\n {!is12EF && (\n <Row>\n <Col xs={8}>Pokok Pinjaman</Col>\n <Col xs={4}>Rp. {amount}</Col>\n </Row>\n )}\n {is12EF && (\n <>\n <Row>\n <Col xs={8}>Nama Barang</Col>\n <Col xs={4}>{props.data.nama_barang || '-'}</Col>\n </Row>\n <Row>\n <Col xs={8}>Tipe/Merek</Col>\n <Col xs={4}>{props.data.tipe_merk || '-'}</Col>\n </Row>\n <Row>\n <Col xs={8}>Warna</Col>\n <Col xs={4}>{props.data.warna || '-'}</Col>\n </Row>\n <Row>\n <Col xs={8}>Alamat Kirim</Col>\n <Col xs={4}>{formatAddress(props.data.alamat_pengiriman)}</Col>\n </Row>\n </>\n )}\n <Row>\n <Col xs={8}>{is12EF ? 'Jangka Waktu Cicilan' : 'Jangka Waktu'}</Col>\n <Col xs={4}>{tenor} Bulan</Col>\n </Row>\n <Row>\n <Col xs={8}>{is12EF ? 'Angsuran Per Bulan' : 'Cicilan Per Bulan'}</Col>\n <Col xs={4}>Rp. {angsuranBulan}</Col>\n </Row>\n {!is12EF && (\n <>\n <Row>\n <Col xs={8}>Potongan Bonus/Tahun</Col>\n <Col xs={4}>Rp. {pt_bns_tahun}</Col>\n </Row>\n <Row>\n <Col xs={8}>Rencana Pencairan</Col>\n <Col xs={4}>{rencanaCair}</Col>\n </Row>\n </>\n )}\n </Grid>\n {!is12EF && (\n <>\n <div className=\"loan-deductions\">\n <h4>Potongan Pinjaman</h4>\n </div>\n <Grid className=\"loan-deductions-details\">\n <Row>\n <Col xs={8}>Biaya Asuransi</Col>\n <Col xs={4}>Rp. {biaya_asuransi}</Col>\n </Row>\n <Row>\n <Col xs={8}>Biaya Administrasi</Col>\n <Col xs={4}>Rp. {biaya_admin}</Col>\n </Row>\n <Row>\n <Col xs={8}>Biaya Provisi</Col>\n <Col xs={4}>Rp. {provisi}</Col>\n </Row>\n <Row>\n <Col xs={8}>Potongan Angsuran Pertama</Col>\n <Col xs={4}>Rp. {angsuranBulan}</Col>\n </Row>\n <Row>\n <Col xs={8}>Total Offset</Col>\n <Col xs={4}>Rp. {jumlah_offset}</Col>\n </Row>\n </Grid>\n </>\n )}\n <div className=\"loan-confirmation\">\n <p>Apakah Anda menyetujui hasil persetujuan {is12EF ? 'cicilan' : 'kredit'}?</p>\n <div className=\"button-group\">\n <button onClick={() => props.onPressYes(props.data)}>Ya</button>\n <button onClick={() => props.onPressNo(props.data)}>Tidak</button>\n </div>\n </div>\n </div>\n );\n};\n\nexport default DetailRiwayatPinjaman;","import React, { useState, useEffect, useCallback } from 'react';\r\nimport { \r\n Card,\r\n Button,\r\n Typography,\r\n Space,\r\n Input,\r\n Alert,\r\n Spin,\r\n Result\r\n} from 'antd';\r\nimport { \r\n ArrowLeftOutlined,\r\n MailOutlined,\r\n SyncOutlined,\r\n ArrowRightOutlined,\r\n CheckCircleOutlined\r\n} from '@ant-design/icons';\r\nimport { useNavigate, useLocation } from 'react-router-dom';\r\nimport axios from 'axios';\r\n\r\nconst { Title, Text } = Typography;\r\n\r\nconst API = {\r\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\r\n};\r\n\r\nconst EmailValidation = () => {\r\n const navigate = useNavigate();\r\n const location = useLocation();\r\n const [loading, setLoading] = useState(true);\r\n const [verificationSent, setVerificationSent] = useState(false);\r\n const [emailVerified, setEmailVerified] = useState(false);\r\n const [formData, setFormData] = useState(null);\r\n const [error, setError] = useState(null);\r\n\r\n // Define all callback functions first\r\n const getEmailVerificationStatus = useCallback((data) => {\r\n if (data && data.email_verified === \"1\") return true;\r\n if (data && data.data && data.data.email_verified === \"1\") return true;\r\n return false;\r\n }, []);\r\n\r\n const getLoanNewId = useCallback((data) => {\r\n if (data && data.loan_new_id) return data.loan_new_id;\r\n if (data && data.data && data.data.loan_new_id) return data.data.loan_new_id;\r\n return null;\r\n }, []);\r\n\r\n const getEmail = useCallback((data) => {\r\n if (data && data.data && data.data.email) return data.data.email;\r\n if (data && data.email) return data.email;\r\n return '';\r\n }, []);\r\n\r\n const fetchLoanDetails = useCallback(async (loanNewId) => {\r\n try {\r\n const token = localStorage.getItem('token');\r\n if (!token) throw new Error('Token tidak ditemukan. Silakan login kembali.');\r\n\r\n const response = await axios.get(`${API.hostLoanNew}/loan/detail`, {\r\n headers: { Authorization: token },\r\n params: { loan_new_id: loanNewId }\r\n });\r\n\r\n return response.data.data;\r\n } catch (error) {\r\n console.error('Error fetching loan details:', error);\r\n setError('Terjadi kesalahan saat mengambil data pinjaman. Silakan coba lagi.');\r\n return null;\r\n }\r\n }, []);\r\n\r\n const checkEmailVerification = useCallback(async () => {\r\n const loanNewId = getLoanNewId(formData ? formData.data : null);\r\n if (!loanNewId) {\r\n console.error('FormData is not properly loaded');\r\n setLoading(false);\r\n return;\r\n }\r\n\r\n setLoading(true);\r\n const updatedData = await fetchLoanDetails(loanNewId);\r\n if (updatedData) {\r\n setFormData({ data: updatedData });\r\n if (getEmailVerificationStatus(updatedData)) {\r\n setEmailVerified(true);\r\n setVerificationSent(true);\r\n } else {\r\n setEmailVerified(false);\r\n }\r\n }\r\n setLoading(false);\r\n }, [formData, fetchLoanDetails, getLoanNewId, getEmailVerificationStatus]);\r\n\r\n const handleSendVerification = useCallback(async () => {\r\n const loanNewId = getLoanNewId(formData ? formData.data : null);\r\n if (!loanNewId) {\r\n console.error('FormData is not properly loaded');\r\n return;\r\n }\r\n\r\n setLoading(true);\r\n setError(null);\r\n try {\r\n const token = localStorage.getItem('token');\r\n if (!token) throw new Error('Token tidak ditemukan. Silakan login kembali.');\r\n \r\n await axios.post(`${API.hostLoanNew}/loan-new/send-verification-email`, {\r\n loan_new_id: loanNewId\r\n }, {\r\n headers: { Authorization: token }\r\n });\r\n \r\n setVerificationSent(true);\r\n } catch (error) {\r\n setError('Terjadi kesalahan saat mengirim email verifikasi. Silakan coba lagi.');\r\n } finally {\r\n setLoading(false);\r\n }\r\n }, [formData, getLoanNewId]);\r\n\r\n const handleNext = useCallback(() => {\r\n const loanNewId = getLoanNewId(formData ? formData.data : null);\r\n navigate('/input-summary', { state: { loanNewId } });\r\n }, [formData, getLoanNewId, navigate]);\r\n\r\n // Define useEffect after all callbacks\r\n useEffect(() => {\r\n const loadData = async () => {\r\n setLoading(true);\r\n try {\r\n let data = null;\r\n const storedFormData = localStorage.getItem('formData');\r\n \r\n if (storedFormData) {\r\n data = JSON.parse(storedFormData);\r\n } else if (location.state && location.state.loanNewId) {\r\n data = await fetchLoanDetails(location.state.loanNewId);\r\n }\r\n\r\n if (data) {\r\n setFormData({ data });\r\n if (getEmailVerificationStatus(data)) {\r\n setEmailVerified(true);\r\n setVerificationSent(true);\r\n }\r\n } else {\r\n setError('Data pinjaman tidak ditemukan. Silakan kembali ke halaman sebelumnya.');\r\n }\r\n } catch (err) {\r\n setError('Terjadi kesalahan saat memuat data. Silakan coba lagi.');\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n loadData();\r\n }, [fetchLoanDetails, getEmailVerificationStatus, location.state]);\r\n\r\n // Render loading state\r\n if (loading) {\r\n return (\r\n <div style={{ \r\n minHeight: '100vh', \r\n display: 'flex', \r\n justifyContent: 'center', \r\n alignItems: 'center',\r\n backgroundColor: '#f0f2f5'\r\n }}>\r\n <Space direction=\"vertical\" align=\"center\">\r\n <Spin size=\"large\" />\r\n <Text>Memproses...</Text>\r\n </Space>\r\n </div>\r\n );\r\n }\r\n\r\n return (\r\n <div style={{ maxWidth: 800, margin: '0 auto', padding: '16px' }}>\r\n <Space direction=\"vertical\" size=\"large\" style={{ width: '100%' }}>\r\n {/* Header */}\r\n <Card bordered={false}>\r\n <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>\r\n <Button \r\n type=\"text\" \r\n icon={<ArrowLeftOutlined />} \r\n onClick={() => navigate(-1)} \r\n />\r\n <Title level={4} style={{ margin: 0 }}>\r\n Verifikasi Email\r\n </Title>\r\n </div>\r\n </Card>\r\n\r\n {/* Email Card */}\r\n <Card bordered={false}>\r\n <Space direction=\"vertical\" size=\"middle\" style={{ width: '100%' }}>\r\n <Title level={5}>Email Anda</Title>\r\n <Input\r\n prefix={<MailOutlined />}\r\n value={getEmail(formData ? formData.data : null)}\r\n disabled\r\n style={{ width: '100%' }}\r\n />\r\n \r\n {/* Status Messages */}\r\n {verificationSent && !emailVerified && (\r\n <Alert\r\n message=\"Email verifikasi telah dikirim. Silakan cek email Anda.\"\r\n type=\"info\"\r\n showIcon\r\n />\r\n )}\r\n \r\n {emailVerified && (\r\n <Result\r\n status=\"success\"\r\n title=\"Email Terverifikasi\"\r\n subTitle=\"Email Anda telah terverifikasi. Silakan lanjutkan ke tahap berikutnya.\"\r\n />\r\n )}\r\n\r\n {error && (\r\n <Alert\r\n message={error}\r\n type=\"error\"\r\n showIcon\r\n />\r\n )}\r\n\r\n {/* Action Buttons */}\r\n <Space direction=\"vertical\" size=\"middle\" style={{ width: '100%' }}>\r\n {!emailVerified && (\r\n <Button\r\n type=\"primary\"\r\n icon={<MailOutlined />}\r\n loading={loading}\r\n disabled={loading || verificationSent}\r\n block\r\n onClick={handleSendVerification}\r\n >\r\n {loading ? 'Mengirim...' : 'Kirim Verifikasi'}\r\n </Button>\r\n )}\r\n\r\n {emailVerified ? (\r\n <Button \r\n type=\"primary\"\r\n icon={<ArrowRightOutlined />}\r\n onClick={handleNext}\r\n block\r\n >\r\n Selanjutnya\r\n </Button>\r\n ) : verificationSent && (\r\n <Button\r\n icon={<SyncOutlined />}\r\n onClick={checkEmailVerification}\r\n disabled={loading || !verificationSent}\r\n block\r\n >\r\n Refresh Status\r\n </Button>\r\n )}\r\n </Space>\r\n </Space>\r\n </Card>\r\n\r\n {/* Success State */}\r\n {emailVerified && (\r\n <Alert\r\n message=\"Berhasil\"\r\n description=\"Email Anda telah terverifikasi. Klik 'Selanjutnya' untuk melanjutkan proses.\"\r\n type=\"success\"\r\n showIcon\r\n icon={<CheckCircleOutlined />}\r\n />\r\n )}\r\n </Space>\r\n </div>\r\n );\r\n};\r\n\r\nexport default EmailValidation;","import React, { useState, useEffect, useCallback } from 'react';\r\nimport { useNavigate, useLocation } from 'react-router-dom';\r\nimport axios from 'axios';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faArrowLeft, faCheckCircle } from '@fortawesome/free-solid-svg-icons';\r\nimport '../assets/styles/submitLoanConfirmation.css';\r\nimport { \r\n Card,\r\n Button,\r\n Typography,\r\n Space,\r\n Descriptions,\r\n Alert,\r\n Spin,\r\n Modal\r\n} from 'antd';\r\nimport { \r\n ArrowLeftOutlined,\r\n CheckCircleOutlined\r\n} from '@ant-design/icons';\r\n\r\nconst { Title, Text } = Typography;\r\n\r\nconst API = {\r\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\r\n};\r\n\r\nconst SubmitLoanConfirmation = () => {\r\n const navigate = useNavigate();\r\n const location = useLocation();\r\n const [loading, setLoading] = useState(true);\r\n const [loanData, setLoanData] = useState(null);\r\n const [error, setError] = useState(null);\r\n const [successModalVisible, setSuccessModalVisible] = useState(false);\r\n\r\n\r\n const fetchLoanDetails = useCallback(async (loanNewId) => {\r\n // console.log('Fetching loan details for ID:', loanNewId);\r\n setLoading(true);\r\n setError(null);\r\n try {\r\n const token = localStorage.getItem('token');\r\n if (!token) throw new Error('Token tidak ditemukan. Silakan login kembali.');\r\n\r\n const response = await axios.get(`${API.hostLoanNew}/loan/detail`, {\r\n headers: { Authorization: token },\r\n params: { loan_new_id: loanNewId }\r\n });\r\n\r\n // console.log('Loan details response:', response.data);\r\n\r\n const relevantData = {\r\n nama_pinjaman: response.data.data.nama_pinjaman,\r\n no_dokumen: response.data.data.no_dokumen,\r\n applied_amount: response.data.data.applied_amount,\r\n applied_angsuran_bulan: response.data.data.applied_angsuran_bulan,\r\n applied_biaya_asuransi: response.data.data.applied_biaya_asuransi,\r\n applied_dana_diterima: response.data.data.applied_dana_diterima,\r\n applied_tenor: response.data.data.applied_tenor,\r\n applied_total_pinjaman: response.data.data.applied_total_pinjaman,\r\n loan_new_id: response.data.data.loan_new_id\r\n };\r\n\r\n setLoanData(relevantData);\r\n } catch (error) {\r\n console.error('Error fetching loan details:', error);\r\n setError('Terjadi kesalahan saat mengambil data pinjaman. Silakan coba lagi.');\r\n } finally {\r\n setLoading(false);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n const loadData = async () => {\r\n let loanNewId = null;\r\n let parsedData = null;\r\n const storedFormData = localStorage.getItem('formData');\r\n \r\n if (storedFormData) {\r\n // console.log('Found stored form data');\r\n parsedData = JSON.parse(storedFormData);\r\n if (parsedData && parsedData.data && parsedData.data.loan_new_id) {\r\n loanNewId = parsedData.data.loan_new_id;\r\n }\r\n }\r\n \r\n if (!loanNewId && location.state && location.state.loanNewId) {\r\n // console.log('Using loanNewId from location state');\r\n loanNewId = location.state.loanNewId;\r\n }\r\n\r\n if (loanNewId) {\r\n await fetchLoanDetails(loanNewId);\r\n } else {\r\n console.error('No loan_new_id found');\r\n setError('Data pinjaman tidak ditemukan. Silakan kembali ke halaman sebelumnya.');\r\n setLoading(false);\r\n }\r\n };\r\n\r\n loadData();\r\n }, [fetchLoanDetails, location.state]);\r\n\r\n // Format currency function\r\n const formatCurrency = (amount) => {\r\n return new Intl.NumberFormat('id-ID', { \r\n style: 'currency', \r\n currency: 'IDR',\r\n minimumFractionDigits: 0,\r\n maximumFractionDigits: 0\r\n }).format(amount);\r\n };\r\n\r\n // Update loading state render\r\n if (loading) {\r\n return (\r\n <div style={{ \r\n height: '100vh', \r\n display: 'flex', \r\n justifyContent: 'center', \r\n alignItems: 'center' \r\n }}>\r\n <Space direction=\"vertical\" align=\"center\">\r\n <Spin size=\"large\" />\r\n <Text>Memproses...</Text>\r\n </Space>\r\n </div>\r\n );\r\n }\r\n\r\n // Update handleSubmit function\r\n const handleSubmit = async () => {\r\n setLoading(true);\r\n setError(null);\r\n try {\r\n const token = localStorage.getItem('token');\r\n if (!token) throw new Error('Token tidak ditemukan. Silakan login kembali.');\r\n\r\n await axios.post(`${API.hostLoanNew}/loan-new/submit`, {\r\n loan_new_id: loanData.loan_new_id\r\n }, {\r\n headers: { Authorization: token }\r\n });\r\n\r\n setSuccessModalVisible(true); // Show success modal instead of alert\r\n } catch (error) {\r\n console.error('Error submitting loan:', error);\r\n setError('Terjadi kesalahan saat mengajukan pinjaman. Silakan coba lagi.');\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n if (loading) {\r\n return (\r\n <div className=\"loading-container\">\r\n <div className=\"spinner\"></div>\r\n <p>Memproses...</p>\r\n </div>\r\n );\r\n }\r\n\r\n return (\r\n <div style={{ maxWidth: 800, margin: '0 auto', padding: '16px' }}>\r\n <Space direction=\"vertical\" size=\"large\" style={{ width: '100%' }}>\r\n {/* Header */}\r\n <Card bordered={false}>\r\n <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>\r\n <Button \r\n type=\"text\" \r\n icon={<ArrowLeftOutlined />} \r\n onClick={() => navigate(-1)} \r\n />\r\n <Title level={4} style={{ margin: 0 }}>\r\n Konfirmasi Pengajuan Pinjaman\r\n </Title>\r\n </div>\r\n </Card>\r\n\r\n {/* Loan Details */}\r\n {loanData && (\r\n <Card bordered={false}>\r\n <Descriptions\r\n title=\"Detail Pinjaman\"\r\n bordered\r\n column={1}\r\n labelStyle={{ width: '200px', fontWeight: 'bold' }}\r\n >\r\n <Descriptions.Item label=\"Jenis Pinjaman\">\r\n {loanData.nama_pinjaman}\r\n </Descriptions.Item>\r\n <Descriptions.Item label=\"Pokok Pinjaman\">\r\n {formatCurrency(loanData.applied_amount)}\r\n </Descriptions.Item>\r\n <Descriptions.Item label=\"Tenor\">\r\n {parseInt(loanData.applied_tenor)} bulan\r\n </Descriptions.Item>\r\n <Descriptions.Item label=\"Angsuran per Bulan\">\r\n {formatCurrency(loanData.applied_angsuran_bulan)}\r\n </Descriptions.Item>\r\n <Descriptions.Item label=\"Nomor Dokumen\">\r\n {loanData.no_dokumen}\r\n </Descriptions.Item>\r\n <Descriptions.Item label=\"Biaya Asuransi\">\r\n {formatCurrency(loanData.applied_biaya_asuransi)}\r\n </Descriptions.Item>\r\n <Descriptions.Item label=\"Dana Diterima\">\r\n {formatCurrency(loanData.applied_dana_diterima)}\r\n </Descriptions.Item>\r\n </Descriptions>\r\n </Card>\r\n )}\r\n\r\n {/* Error Message */}\r\n {error && (\r\n <Alert\r\n message=\"Error\"\r\n description={error}\r\n type=\"error\"\r\n showIcon\r\n />\r\n )}\r\n\r\n {/* Submit Button */}\r\n <Button\r\n type=\"primary\"\r\n size=\"large\"\r\n block\r\n onClick={handleSubmit}\r\n disabled={loading || !loanData}\r\n icon={!loading && <CheckCircleOutlined />}\r\n loading={loading}\r\n >\r\n {loading ? 'Memproses...' : 'Ajukan Pinjaman'}\r\n </Button>\r\n\r\n {/* Success Modal */}\r\n <Modal\r\n title=\"Berhasil\"\r\n open={successModalVisible}\r\n onOk={() => {\r\n setSuccessModalVisible(false);\r\n navigate('/');\r\n }}\r\n onCancel={() => {\r\n setSuccessModalVisible(false);\r\n navigate('/');\r\n }}\r\n okText=\"OK\"\r\n cancelText=\"Tutup\"\r\n >\r\n <Space>\r\n <CheckCircleOutlined style={{ color: '#52c41a', fontSize: 24 }} />\r\n <Text>Pinjaman berhasil diajukan!</Text>\r\n </Space>\r\n </Modal>\r\n </Space>\r\n </div>\r\n );\r\n};\r\n\r\nexport default SubmitLoanConfirmation;","import React, { useState, useEffect, useCallback } from 'react';\r\nimport { useNavigate, useLocation } from 'react-router-dom';\r\nimport axios from 'axios';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faArrowLeft } from '@fortawesome/free-solid-svg-icons';\r\nimport '../assets/styles/creditNewStatus.css';\r\nimport accounting from 'accounting';\r\nimport moment from 'moment';\r\nimport 'moment/locale/id';\r\n\r\nconst API = {\r\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\r\n};\r\n\r\nconst CreditNewStatusService = {\r\n STATUS_DRAFT: 'MLTSTS00',\r\n STATUS_REQUESTED: 'MLTSTS01',\r\n STATUS_APPROVED_HR: 'MLTSTS03',\r\n STATUS_APPROVED_MEMBER: 'MLTSTS07',\r\n STATUS_APPROVED_BY_KAI: 'MLTSTS13',\r\n STATUS_ACTIVE: 'MLTSTS14',\r\n STATUS_CANCEL_BY_USER: 'MLTSTS15',\r\n STATUS_CANCEL_BY_SYSTEM: 'MLTSTS16',\r\n STATUS_CANCEL_BY_KAI: 'MLTSTS17',\r\n STATUS_LOAN_TEXT: {\r\n 'MLTSTS00': 'Drafted',\r\n 'MLTSTS01': 'Menunggu Persetujuan HRD',\r\n 'MLTSTS03': 'Menungggu Persetujuan Koperasi Astra',\r\n 'MLTSTS07': 'Menunggu Pencairan',\r\n 'MLTSTS13': 'Menunggu Konfirmasi Anggota',\r\n 'MLTSTS14': 'Aktif',\r\n 'AC': 'Aktif',\r\n 'MLTSTS15': 'Batal/ditolak',\r\n 'MLTSTS16': 'Batal/ditolak',\r\n 'MLTSTS17': 'Batal/ditolak',\r\n },\r\n};\r\n\r\nconst CreditNewStatusComponent = () => {\r\n const [state, setState] = useState({\r\n titleError: null,\r\n arrError: [],\r\n loading: true,\r\n isRefresh: false,\r\n alertConfirmNo: false,\r\n alertConfirmYesGt: false,\r\n formData: null,\r\n alasanBatan: [],\r\n alasanBatanSelected: null,\r\n visibleRejectReason: false,\r\n labelRejectReason: null,\r\n currentPosition: 0,\r\n });\r\n\r\n const navigate = useNavigate();\r\n const location = useLocation();\r\n\r\n const fetchLoanDetails = useCallback(async (loanNewId) => {\r\n setState(prevState => ({ ...prevState, loading: true }));\r\n try {\r\n const token = localStorage.getItem('token');\r\n if (!token) throw new Error('Token tidak ditemukan. Silakan login kembali.');\r\n\r\n const response = await axios.get(`${API.hostLoanNew}/loan/detail`, {\r\n headers: { Authorization: token },\r\n params: { loan_new_id: loanNewId }\r\n });\r\n\r\n setState(prevState => ({\r\n ...prevState,\r\n formData: response.data.data,\r\n loading: false,\r\n }));\r\n\r\n if (response.data.data.status_loan === CreditNewStatusService.STATUS_APPROVED_BY_KAI) {\r\n fetchAlasanBatal();\r\n }\r\n } catch (error) {\r\n console.error('Error fetching loan details:', error);\r\n setState(prevState => ({\r\n ...prevState,\r\n loading: false,\r\n arrError: [...prevState.arrError, 'Terjadi kesalahan saat mengambil data pinjaman. Silakan coba lagi.'],\r\n }));\r\n }\r\n }, []);\r\n\r\n const fetchAlasanBatal = async () => {\r\n try {\r\n const token = localStorage.getItem('token');\r\n const response = await axios.get(`${API.hostLoanNew}/loan/reason-cancel?type=ANG`, {\r\n headers: { Authorization: token }\r\n });\r\n setState(prevState => ({\r\n ...prevState,\r\n alasanBatan: response.data.data.map(it => ({ value: it.id.toString(), label: it.reason })),\r\n }));\r\n } catch (error) {\r\n console.error('Error fetching alasan batal:', error);\r\n setState(prevState => ({\r\n ...prevState,\r\n arrError: [...prevState.arrError, 'Terjadi kesalahan saat mengambil alasan batal. Silakan coba lagi.'],\r\n }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n const loadData = async () => {\r\n let loanNewId = null;\r\n if (location.state && location.state.loanNewId) {\r\n loanNewId = location.state.loanNewId;\r\n } else {\r\n const storedFormData = localStorage.getItem('formData');\r\n if (storedFormData) {\r\n const parsedData = JSON.parse(storedFormData);\r\n if (parsedData && parsedData.data && parsedData.data.loan_new_id) {\r\n loanNewId = parsedData.data.loan_new_id;\r\n }\r\n }\r\n }\r\n\r\n if (loanNewId) {\r\n await fetchLoanDetails(loanNewId);\r\n } else {\r\n setState(prevState => ({\r\n ...prevState,\r\n loading: false,\r\n arrError: [...prevState.arrError, 'Data pinjaman tidak ditemukan. Silakan kembali ke halaman sebelumnya.'],\r\n }));\r\n }\r\n };\r\n\r\n loadData();\r\n }, [fetchLoanDetails, location.state]);\r\n\r\n const onPressConfirmYes = async () => {\r\n if (state.formData.gt_rencana_cair) {\r\n setState(prevState => ({ ...prevState, alertConfirmYesGt: true }));\r\n return;\r\n }\r\n navigate('/credit-ttd-manual', { state: { loanNewId: state.formData.loan_new_id } });\r\n };\r\n\r\n const onPressConfirmYesYes = async () => {\r\n try {\r\n const token = localStorage.getItem('token');\r\n await axios.post(`${API.hostLoanNew}/loan-new/revision-user`, {\r\n loan_new_id: state.formData.loan_new_id,\r\n }, {\r\n headers: { Authorization: token }\r\n });\r\n navigate('/credit-list');\r\n } catch (error) {\r\n console.error('Error confirming revision:', error);\r\n setState(prevState => ({\r\n ...prevState,\r\n arrError: [...prevState.arrError, 'Terjadi kesalahan saat melakukan konfirmasi. Silakan coba lagi.'],\r\n }));\r\n }\r\n };\r\n\r\n const onPressConfirmNo = () => {\r\n setState(prevState => ({ ...prevState, alertConfirmNo: true, alasanBatanSelected: null }));\r\n };\r\n\r\n const onPressConfirmNoYes = async () => {\r\n if (!state.alasanBatanSelected) {\r\n alert('Silakan pilih alasan pembatalan');\r\n return;\r\n }\r\n \r\n try {\r\n const token = localStorage.getItem('token');\r\n let alasanBatalText = '';\r\n const selectedReason = state.alasanBatan.find(function (item) {\r\n return item.value === state.alasanBatanSelected;\r\n });\r\n if (selectedReason) {\r\n alasanBatalText = selectedReason.label;\r\n }\r\n \r\n await axios.post(`${API.hostLoanNew}/loan-new/reject-user`, {\r\n loan_new_id: state.formData.loan_new_id,\r\n id_koperasi: state.formData.id_koperasi,\r\n alasan_batal: state.alasanBatanSelected,\r\n alasan_batal_text: alasanBatalText,\r\n detail_alasan: '',\r\n }, {\r\n headers: { Authorization: token }\r\n });\r\n navigate('/credit-list');\r\n } catch (error) {\r\n console.error('Error rejecting loan:', error);\r\n setState(prevState => ({\r\n ...prevState,\r\n arrError: [...prevState.arrError, 'Terjadi kesalahan saat membatalkan pinjaman. Silakan coba lagi.'],\r\n }));\r\n }\r\n };\r\n\r\n const renderLoanStatusApproval = () => {\r\n const { formData } = state;\r\n if (!formData) return null;\r\n\r\n const tenor = parseInt(formData.applied_tenor || 0);\r\n const amount = accounting.formatMoney(formData.applied_amount || 0, \"\", 0, \",\", \",\");\r\n const angsuranBulan = accounting.formatMoney(formData.applied_angsuran_bulan || 0, \"\", 0, \",\", \",\");\r\n const dateApplied = formData.date_applied ? moment(formData.date_applied).format('DD/MM/YYYY') : '-';\r\n\r\n return (\r\n <div className=\"loan-status-approval\">\r\n <h2>Summary</h2>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Tanggal Pengajuan:</span>\r\n <span className=\"value\">{dateApplied}</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Tipe Pengajuan:</span>\r\n <span className=\"value\">{formData.nama_pinjaman}</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Jumlah Pengajuan:</span>\r\n <span className=\"value\">Rp {amount}</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Tenor:</span>\r\n <span className=\"value\">{tenor} Bulan</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Angsuran/Bulan:</span>\r\n <span className=\"value\">Rp {angsuranBulan}</span>\r\n </div>\r\n <p className=\"status-info\">{getStatusInfoText()}</p>\r\n </div>\r\n );\r\n };\r\n\r\n const renderLoanMemberConfirmation = () => {\r\n const { formData } = state;\r\n if (!formData) return null;\r\n\r\n const tenor = parseInt(formData.approved_tenor || 0);\r\n const amount = accounting.formatMoney(formData.approved_amount || 0, \"\", 0, \",\", \",\");\r\n const angsuranBulan = accounting.formatMoney(formData.angsuran_bulan || 0, \"\", 0, \",\", \",\");\r\n const dataDiterima = accounting.formatMoney(formData.dana_deterima || 0, \"\", 0, \",\", \",\");\r\n\r\n return (\r\n <div className=\"loan-member-confirmation\">\r\n <h2>Persetujuan Kredit</h2>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Tipe Pinjaman:</span>\r\n <span className=\"value\">{formData.nama_pinjaman}</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Dana Diterima:</span>\r\n <span className=\"value\">Rp {dataDiterima}</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Pokok Pinjaman:</span>\r\n <span className=\"value\">Rp {amount}</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Tenor:</span>\r\n <span className=\"value\">{tenor} Bulan</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Angsuran Per Bulan:</span>\r\n <span className=\"value\">Rp {angsuranBulan}</span>\r\n </div>\r\n <p className=\"confirmation-question\">Apakah Anda menyetujui hasil persetujuan kredit?</p>\r\n <div className=\"button-group\">\r\n <button className=\"btn-primary\" onClick={onPressConfirmYes}>Ya</button>\r\n <button className=\"btn-danger\" onClick={onPressConfirmNo}>Tidak</button>\r\n </div>\r\n </div>\r\n );\r\n };\r\n\r\n const getStatusInfoText = () => {\r\n const { formData } = state;\r\n if (formData.status_loan === CreditNewStatusService.STATUS_REQUESTED) {\r\n return 'Pengajuan pinjaman sedang ditinjau oleh bagian HRD';\r\n }\r\n if (formData.status_loan === CreditNewStatusService.STATUS_APPROVED_HR) {\r\n return 'Pengajuan pinjaman sedang ditinjau oleh Koperasi Astra';\r\n }\r\n return '';\r\n };\r\n\r\n if (state.loading) {\r\n return (\r\n <div className=\"home-container bg-white\">\r\n <header className=\"header-wrapper\">\r\n <div className=\"header-content\">\r\n <button onClick={() => navigate(-1)} className=\"back-button\">\r\n <FontAwesomeIcon icon={faArrowLeft} style={{ color: 'black' }} />\r\n </button>\r\n <h1>Riwayat Pinjaman</h1>\r\n </div>\r\n </header>\r\n <div className=\"loading-container\">\r\n <div className=\"spinner\"></div>\r\n <p>Memuat...</p>\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n return (\r\n <div className=\"home-container bg-white\">\r\n <header className=\"header-wrapper\">\r\n <div className=\"header-content\">\r\n <button onClick={() => navigate(-1)} className=\"back-button\">\r\n <FontAwesomeIcon icon={faArrowLeft} style={{ color: 'black' }} />\r\n </button>\r\n <h1>Status Pinjaman</h1>\r\n </div>\r\n </header>\r\n\r\n {state.arrError.length > 0 && (\r\n <div className=\"error-messages\">\r\n {state.arrError.map((error, index) => (\r\n <p key={index} className=\"error-message\">{error}</p>\r\n ))}\r\n </div>\r\n )}\r\n\r\n {state.formData && (\r\n <>\r\n {[CreditNewStatusService.STATUS_REQUESTED, CreditNewStatusService.STATUS_APPROVED_HR].includes(state.formData.status_loan) && renderLoanStatusApproval()}\r\n {state.formData.status_loan === CreditNewStatusService.STATUS_APPROVED_BY_KAI && renderLoanMemberConfirmation()}\r\n </>\r\n )}\r\n\r\n {/* Modal for confirmation */}\r\n {state.alertConfirmYesGt && (\r\n <div className=\"modal\">\r\n <div className=\"modal-content\">\r\n <p>Persetujuan pengajuan pinjaman Anda melebihi batas waktu konfirmasi. Apakah Anda ingin mengajukan perhitungan kembali?</p>\r\n <div className=\"button-group\">\r\n <button className=\"btn-primary\" onClick={onPressConfirmYesYes}>Ya</button>\r\n <button className=\"btn-danger\" onClick={() => setState(prevState => ({ ...prevState, alertConfirmYesGt: false }))}>Tidak</button>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n\r\n {/* Modal for rejection reason */}\r\n {state.alertConfirmNo && (\r\n <div className=\"modal\">\r\n <div className=\"modal-content\">\r\n <h2>Alasan Pembatalan</h2>\r\n <select \r\n value={state.alasanBatanSelected || ''}\r\n onChange={(e) => setState(prevState => ({ ...prevState, alasanBatanSelected: e.target.value }))}\r\n >\r\n <option value=\"\">Pilih Alasan Batal</option>\r\n {state.alasanBatan.map(reason => (\r\n <option key={reason.value} value={reason.value}>{reason.label}</option>\r\n ))}\r\n </select>\r\n <div className=\"button-group\">\r\n <button className=\"btn-primary\" onClick={onPressConfirmNoYes}>Konfirmasi</button>\r\n <button className=\"btn-danger\" onClick={() => setState(prevState => ({ ...prevState, alertConfirmNo: false }))}>Batal</button>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default CreditNewStatusComponent;","import React, { useState, useEffect, useCallback } from 'react';\r\nimport { useNavigate, useLocation } from 'react-router-dom';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faArrowLeft } from '@fortawesome/free-solid-svg-icons';\r\nimport '../assets/styles/creditNewStatus.css';\r\nimport moment from 'moment';\r\nimport 'moment/locale/id';\r\nimport accounting from 'accounting';\r\n\r\nconst API = {\r\n hostLoanNew: \"https://loan-new.koperasi-astra.com\"\r\n};\r\n\r\nconst CreditNewCancel = () => {\r\n const [state, setState] = useState({\r\n titleError: null,\r\n arrError: [],\r\n loading: true,\r\n isRefresh: false,\r\n formData: null,\r\n debugInfo: null // Tambah untuk debugging\r\n });\r\n\r\n const navigate = useNavigate();\r\n const location = useLocation();\r\n\r\n const fetchLoanDetails = useCallback(async (loanNewId) => {\r\n setState(prevState => ({ ...prevState, loading: true }));\r\n try {\r\n const token = localStorage.getItem('token');\r\n if (!token) throw new Error('Token tidak ditemukan. Silakan login kembali.');\r\n\r\n // console.log('Fetching loan details for ID:', loanNewId); // Debug log\r\n\r\n // Tambahkan params ke URL query\r\n const url = `${API.hostLoanNew}/loan/detail?loan_new_id=${loanNewId}`;\r\n // console.log('Request URL:', url); // Debug log\r\n\r\n const response = await fetch(url, {\r\n headers: { \r\n Authorization: token,\r\n 'Content-Type': 'application/json'\r\n },\r\n method: 'GET'\r\n });\r\n\r\n // console.log('Response status:', response.status); // Debug log\r\n\r\n if (!response.ok) {\r\n throw new Error(`HTTP error! status: ${response.status}`);\r\n }\r\n \r\n const data = await response.json();\r\n // console.log('Response data:', data); // Debug log\r\n\r\n if (data.status && data.data) {\r\n setState(prevState => ({\r\n ...prevState,\r\n formData: data.data,\r\n loading: false,\r\n debugInfo: {\r\n requestUrl: url,\r\n responseStatus: response.status,\r\n timestamp: new Date().toISOString()\r\n }\r\n }));\r\n } else {\r\n throw new Error('Invalid data format received');\r\n }\r\n } catch (error) {\r\n console.error('Error fetching loan details:', error);\r\n setState(prevState => ({\r\n ...prevState,\r\n loading: false,\r\n arrError: [...prevState.arrError, 'Terjadi kesalahan saat mengambil data pinjaman. Silakan coba lagi.'],\r\n debugInfo: {\r\n error: error.message,\r\n timestamp: new Date().toISOString()\r\n }\r\n }));\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n const loadData = async () => {\r\n let loanNewId = null;\r\n\r\n // Debug logs untuk location state\r\n // console.log('Location state:', location.state);\r\n // console.log('Storage formData:', localStorage.getItem('formData'));\r\n\r\n if (location.state && location.state.loanNewId) {\r\n loanNewId = location.state.loanNewId;\r\n // console.log('Using loanNewId from location state:', loanNewId);\r\n } else {\r\n const storedFormData = localStorage.getItem('formData');\r\n if (storedFormData) {\r\n try {\r\n const parsedData = JSON.parse(storedFormData);\r\n // console.log('Parsed stored data:', parsedData);\r\n if (parsedData && parsedData.data && parsedData.data.loan_new_id) {\r\n loanNewId = parsedData.data.loan_new_id;\r\n // console.log('Using loanNewId from storage:', loanNewId);\r\n }\r\n } catch (error) {\r\n console.error('Error parsing stored data:', error);\r\n }\r\n }\r\n }\r\n\r\n if (loanNewId) {\r\n await fetchLoanDetails(loanNewId);\r\n } else {\r\n setState(prevState => ({\r\n ...prevState,\r\n loading: false,\r\n arrError: ['Data pinjaman tidak ditemukan. Silakan kembali ke halaman sebelumnya.']\r\n }));\r\n }\r\n };\r\n\r\n loadData();\r\n }, [fetchLoanDetails, location.state]);\r\n\r\n if (state.loading) {\r\n return (\r\n <div className=\"home-container bg-white\">\r\n <header className=\"header-wrapper\">\r\n <div className=\"header-content\">\r\n <button onClick={() => navigate(-1)} className=\"back-button\">\r\n <FontAwesomeIcon icon={faArrowLeft} style={{ color: 'black' }} />\r\n </button>\r\n <h1>Riwayat Pinjaman</h1>\r\n </div>\r\n </header>\r\n <div className=\"loading-container\">\r\n <div className=\"spinner\"></div>\r\n <p>Memuat...</p>\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n const { formData } = state;\r\n const tenor = parseInt(formData && formData.applied_tenor ? formData.applied_tenor : 0);\r\n const amount = accounting.formatMoney(formData && formData.applied_amount ? formData.applied_amount : 0, \"\", 0, \",\", \",\");\r\n const angsuranBulan = accounting.formatMoney(formData && formData.applied_angsuran_bulan ? formData.applied_angsuran_bulan : 0, \"\", 0, \",\", \",\");\r\n const dateApplied = formData && formData.date_applied ? \r\n moment(formData.date_applied).format('DD/MM/YYYY') : \r\n '-';\r\n\r\n // Debug element to show in development\r\n const DebugInfo = process.env.NODE_ENV === 'development' ? (\r\n <div style={{ margin: '10px', padding: '10px', background: '#f5f5f5', fontSize: '12px' }}>\r\n <pre>{JSON.stringify(state.debugInfo, null, 2)}</pre>\r\n </div>\r\n ) : null;\r\n\r\n return (\r\n <div className=\"home-container bg-white\">\r\n <header className=\"header-wrapper\">\r\n <div className=\"header-content\">\r\n <button onClick={() => navigate(-1)} className=\"back-button\">\r\n <FontAwesomeIcon icon={faArrowLeft} style={{ color: 'black' }} />\r\n </button>\r\n <h1>Status Pinjaman</h1>\r\n </div>\r\n </header>\r\n\r\n {state.arrError.length > 0 && (\r\n <div className=\"error-messages\">\r\n {state.arrError.map((error, index) => (\r\n <p key={index} className=\"error-message\">{error}</p>\r\n ))}\r\n </div>\r\n )}\r\n\r\n {formData && (\r\n <div className=\"loan-status-content\">\r\n <div className=\"loan-status-card\">\r\n <div className=\"loan-details\">\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Tanggal Pengajuan:</span>\r\n <span className=\"value\">{dateApplied}</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Tipe Pengajuan:</span>\r\n <span className=\"value\">{formData.nama_pinjaman}</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Jumlah Pengajuan:</span>\r\n <span className=\"value\">Rp {amount}</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Tenor:</span>\r\n <span className=\"value\">{tenor} Bulan</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Angsuran/Bulan:</span>\r\n <span className=\"value\">Rp {angsuranBulan}</span>\r\n </div>\r\n </div>\r\n\r\n <div className=\"rejection-status\">\r\n <p className=\"rejection-title\">\r\n {formData.workflow_status_name || 'Pengajuan Pinjaman Anda tidak disetujui / Batal'}\r\n </p>\r\n <div className=\"rejection-details\">\r\n <p className=\"rejection-label\">Alasan:</p>\r\n <p className=\"rejection-value\">{formData.alasan_batal || '-'}</p>\r\n {/* {formData.detail_alasan && (\r\n <>\r\n <p className=\"rejection-label\">Detail Alasan:</p>\r\n <p className=\"rejection-value\">{formData.detail_alasan}</p>\r\n </>\r\n )} */}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default CreditNewCancel;","import React, { useState, useEffect, useCallback } from 'react';\r\nimport { useNavigate, useLocation } from 'react-router-dom';\r\nimport axios from 'axios';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faArrowLeft, faDownload } from '@fortawesome/free-solid-svg-icons';\r\nimport accounting from 'accounting';\r\nimport '../assets/styles/creditNewStatus.css';\r\nimport moment from 'moment';\r\nimport 'moment/locale/id';\r\n\r\nconst API = {\r\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\r\n};\r\n\r\nconst ENDPOINTS = {\r\n getInstallmentCardDetail: `${API.hostLoanNew}/loan/installment-card-details`,\r\n getInstallmentCardReport: `${API.hostLoanNew}/loan/installment-card-report`\r\n};\r\n\r\nconst CreditNewStatusActive = () => {\r\n const navigate = useNavigate();\r\n const location = useLocation();\r\n const [state, setState] = useState({\r\n titleError: null,\r\n arrError: [],\r\n loading: true,\r\n formData: null,\r\n listCardDetail: null,\r\n isSubmitting: false\r\n });\r\n\r\n const fetchInstallmentCardDetail = useCallback(async (cms_kartuangsuran_id) => {\r\n try {\r\n const token = localStorage.getItem('token');\r\n if (!token) {\r\n navigate('/login');\r\n return;\r\n }\r\n\r\n // URL yang benar untuk endpoint\r\n const response = await axios.get(\r\n `${ENDPOINTS.getInstallmentCardDetail}?cms_kartuangsuran_id=${cms_kartuangsuran_id}`,\r\n {\r\n headers: { \r\n Authorization: token,\r\n 'Content-Type': 'application/json'\r\n }\r\n }\r\n );\r\n\r\n // console.log('Card detail response:', response.data); // Debug log\r\n\r\n if (response.data && response.data.data) {\r\n setState(prev => ({\r\n ...prev,\r\n loading: false,\r\n listCardDetail: response.data.data\r\n }));\r\n } else {\r\n throw new Error('Data kartu angsuran tidak valid');\r\n }\r\n } catch (error) {\r\n console.error('Error fetching card details:', error);\r\n setState(prev => ({\r\n ...prev,\r\n loading: false,\r\n arrError: [...prev.arrError, 'Terjadi kesalahan saat mengambil data kartu angsuran. Silakan coba lagi.']\r\n }));\r\n }\r\n }, [navigate]);\r\n\r\n const handleDownload = async () => {\r\n setState(prev => ({ ...prev, isSubmitting: true }));\r\n try {\r\n const token = localStorage.getItem('token');\r\n const response = await axios.get(\r\n ENDPOINTS.getInstallmentCardReport, \r\n {\r\n headers: { \r\n Authorization: token,\r\n 'Content-Type': 'application/json'\r\n },\r\n responseType: 'blob'\r\n }\r\n );\r\n \r\n const url = window.URL.createObjectURL(new Blob([response.data]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.setAttribute('download', 'Kartu_Angsuran.pdf');\r\n document.body.appendChild(link);\r\n link.click();\r\n link.remove();\r\n } catch (error) {\r\n console.error('Error downloading card:', error);\r\n setState(prev => ({\r\n ...prev,\r\n arrError: [...prev.arrError, 'Gagal mengunduh kartu angsuran. Silakan coba lagi.']\r\n }));\r\n } finally {\r\n setState(prev => ({ ...prev, isSubmitting: false }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n const loadData = async () => {\r\n const cardId = location.state && location.state.cms_kartuangsuran_id;\r\n // console.log('Card ID from location:', cardId); // Debug log\r\n\r\n if (cardId) {\r\n await fetchInstallmentCardDetail(cardId);\r\n } else {\r\n setState(prev => ({\r\n ...prev,\r\n loading: false,\r\n arrError: ['Data kartu angsuran tidak ditemukan. Silakan kembali ke halaman sebelumnya.']\r\n }));\r\n }\r\n };\r\n\r\n loadData();\r\n }, [fetchInstallmentCardDetail, location.state]);\r\n\r\n if (state.loading) {\r\n return (\r\n <div className=\"home-container bg-white\">\r\n <header className=\"header-wrapper\">\r\n <div className=\"header-content\">\r\n <button onClick={() => navigate(-1)} className=\"back-button\">\r\n <FontAwesomeIcon icon={faArrowLeft} style={{ color: 'black' }} />\r\n </button>\r\n <h1>Detail Pinjaman</h1>\r\n </div>\r\n </header>\r\n <div className=\"loading-container\">\r\n <div className=\"spinner\"></div>\r\n <p>Memuat...</p>\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n const data = state.listCardDetail && state.listCardDetail.length > 0 ? state.listCardDetail[0] : null;\r\n const statusIdentifier = data && data.statusAngsuran ? data.statusAngsuran.identifier : '';\r\n\r\n return (\r\n <div className=\"home-container bg-white\">\r\n <header className=\"header-wrapper\">\r\n <div className=\"header-content\">\r\n <button onClick={() => navigate(-1)} className=\"back-button\">\r\n <FontAwesomeIcon icon={faArrowLeft} style={{ color: 'black' }} />\r\n </button>\r\n <h1>Detail Pinjaman</h1>\r\n </div>\r\n </header>\r\n\r\n {state.arrError.length > 0 && (\r\n <div className=\"error-messages\">\r\n {state.arrError.map((error, index) => (\r\n <p key={index} className=\"error-message\">{error}</p>\r\n ))}\r\n </div>\r\n )}\r\n\r\n {data && (\r\n <div className=\"loan-status-content\">\r\n <div className=\"loan-status-card\">\r\n <div className=\"loan-header\">\r\n <h3 className=\"loan-type\">{data.nama_pinjaman}</h3>\r\n </div>\r\n\r\n <div className=\"loan-details\">\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Pokok Pinjaman</span>\r\n <span className=\"value\">\r\n Rp {accounting.formatMoney(data.pokokPinjaman || 0, \"\", 0, \",\", \",\")}\r\n </span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Tenor</span>\r\n <span className=\"value\">{data.jangkaBulan1} Bulan</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Angsuran Per Bulan</span>\r\n <span className=\"value\">\r\n Rp {accounting.formatMoney(data.angsuranbulankartu || 0, \"\", 0, \",\", \",\")}\r\n </span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Tanggal Pencairan</span>\r\n <span className=\"value\">{data.dateInvoiced}</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Status Pinjaman</span>\r\n <span className=\"value status\">{statusIdentifier}</span>\r\n </div>\r\n </div>\r\n\r\n <div className=\"installment-table\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>No</th>\r\n <th>Angsuran/Bulan</th>\r\n <th>Saldo Pinjaman</th>\r\n <th>Tanggal Bayar</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n {state.listCardDetail && state.listCardDetail.map((item, index) => (\r\n <tr key={index}>\r\n <td>{index + 1}</td>\r\n <td>\r\n Rp {accounting.formatMoney(item.angsuranbulankartu || item.angsuranBulan || 0, \"\", 0, \",\", \",\")}\r\n </td>\r\n <td>\r\n Rp {accounting.formatMoney(item.saldoAngsur || 0, \"\", 0, \",\", \",\")}\r\n </td>\r\n <td>{item.payDate}</td>\r\n </tr>\r\n ))}\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <button \r\n className=\"download-button\"\r\n onClick={handleDownload}\r\n disabled={state.isSubmitting}\r\n >\r\n <FontAwesomeIcon icon={faDownload} /> \r\n {state.isSubmitting ? 'Mengunduh...' : 'Download Kartu Angsuran'}\r\n </button>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default CreditNewStatusActive;","import React, { useState, useEffect } from 'react';\r\nimport { useNavigate, useLocation } from 'react-router-dom';\r\nimport axios from 'axios';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faArrowLeft } from '@fortawesome/free-solid-svg-icons';\r\nimport '../assets/styles/creditNewTtd.css';\r\n\r\nconst API = {\r\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\r\n};\r\n\r\nconst CreditTtdComponent = () => {\r\n const [state, setState] = useState({\r\n titleError: null,\r\n arrError: [],\r\n loading: false,\r\n isRefresh: false,\r\n alertConfirmNo: false,\r\n alertConfirmYesGt: false,\r\n });\r\n\r\n const [formData, setFormData] = useState(null);\r\n const navigate = useNavigate();\r\n const location = useLocation();\r\n\r\n useEffect(() => {\r\n const fetchLoanDetails = async () => {\r\n setState(prevState => ({ ...prevState, loading: true }));\r\n try {\r\n const token = localStorage.getItem('token');\r\n if (!token) {\r\n navigate('/login');\r\n return;\r\n }\r\n\r\n let loanNewId = null;\r\n if (location.state && location.state.loanNewId) {\r\n loanNewId = location.state.loanNewId;\r\n } else {\r\n const storedFormData = localStorage.getItem('formData');\r\n if (storedFormData) {\r\n const parsedData = JSON.parse(storedFormData);\r\n if (parsedData && parsedData.data && parsedData.data.loan_new_id) {\r\n loanNewId = parsedData.data.loan_new_id;\r\n }\r\n }\r\n }\r\n\r\n if (loanNewId) {\r\n const response = await axios.get(`${API.hostLoanNew}/loan/detail`, {\r\n headers: { Authorization: token },\r\n params: { loan_new_id: loanNewId }\r\n });\r\n setFormData(response.data.data);\r\n } else {\r\n setState(prevState => ({\r\n ...prevState,\r\n arrError: [...prevState.arrError, 'Data pinjaman tidak ditemukan. Silakan kembali ke halaman sebelumnya.'],\r\n }));\r\n }\r\n } catch (error) {\r\n console.error('Error fetching loan details:', error);\r\n setState(prevState => ({\r\n ...prevState,\r\n arrError: [...prevState.arrError, 'Terjadi kesalahan saat mengambil data pinjaman. Silakan coba lagi.'],\r\n }));\r\n } finally {\r\n setState(prevState => ({ ...prevState, loading: false }));\r\n }\r\n };\r\n\r\n fetchLoanDetails();\r\n }, [navigate, location]);\r\n\r\n const onPressBtn = async () => {\r\n if (!formData || !formData.loan_new_id) {\r\n alert('Data pinjaman tidak tersedia. Silakan coba lagi.');\r\n return;\r\n }\r\n\r\n setState(prevState => ({ ...prevState, loading: true }));\r\n try {\r\n const token = localStorage.getItem('token');\r\n const response = await axios.get(`${API.hostLoanNew}/loan-new/detail-approved`, {\r\n headers: { Authorization: token },\r\n params: { loan_new_id: formData.loan_new_id, cms_id_analisa: formData.cms_id_analisa }\r\n });\r\n setFormData(response.data);\r\n navigate('/credit-new-verification-digisign', { \r\n state: { \r\n digisign: \"signPage\", // atau \"activationPage\" tergantung kebutuhan\r\n loan_new_id: formData.loan_new_id \r\n } \r\n });\r\n } catch (error) {\r\n console.error('error', error);\r\n let message = 'Pastikan koneksi tersambung, silakan coba lagi';\r\n if (error.response && error.response.data && error.response.data.message) {\r\n message = error.response.data.message;\r\n }\r\n alert(message);\r\n } finally {\r\n setState(prevState => ({ ...prevState, loading: false }));\r\n }\r\n };\r\n\r\n if (state.loading) {\r\n return (\r\n <div className=\"loading-container\">\r\n <div className=\"spinner\"></div>\r\n <p>Memuat...</p>\r\n </div>\r\n );\r\n }\r\n\r\n return (\r\n <div className=\"credit-ttd-container\">\r\n <header className=\"simulasi-header\">\r\n <button onClick={() => navigate(-1)} className=\"back-button\">\r\n <FontAwesomeIcon icon={faArrowLeft} />\r\n </button>\r\n <h1>Tanda Tangan Digisign</h1>\r\n </header>\r\n\r\n {state.arrError.length > 0 && (\r\n <div className=\"error-messages\">\r\n {state.arrError.map((error, index) => (\r\n <p key={index} className=\"error-message\">{error}</p>\r\n ))}\r\n </div>\r\n )}\r\n\r\n <div className=\"credit-ttd-content\">\r\n <h2 className=\"credit-ttd-title\">Tanda Tangan Digisign</h2>\r\n\r\n <p className=\"credit-ttd-description\">\r\n Untuk menyelesaikan proses pinjaman anda, anda akan melakukan proses registrasi, aktivasi dan tandatangan digital yang dilakukan melalui platform digisign yang adalah partner Koperasi Astra Internasional.\r\n </p>\r\n <p className=\"credit-ttd-description\">\r\n Proses ini akan terdiri dari 3 tahap, Antara Lain:\r\n </p>\r\n <ol className=\"credit-ttd-steps\">\r\n <li>Registrasi</li>\r\n <li>Aktivasi</li>\r\n <li>Tanda Tangan</li>\r\n </ol>\r\n <p className=\"credit-ttd-description\">\r\n Proses tanda tangan anggota akan dijalankan melalui Koperasi Astra Apps\r\n </p>\r\n\r\n <button className=\"btn-primary\" onClick={onPressBtn} disabled={!formData}>\r\n Lanjutkan Proses Tanda Tangan\r\n </button>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default CreditTtdComponent;","import React, { useState, useEffect } from 'react';\r\nimport { useNavigate, useLocation } from 'react-router-dom';\r\nimport axios from 'axios';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faArrowLeft } from '@fortawesome/free-solid-svg-icons';\r\nimport '../assets/styles/creditDigisign.css';\r\n\r\nconst API = {\r\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\r\n};\r\n\r\nconst CreditDigisignComponent = () => {\r\n const [state, setState] = useState({\r\n titleError: null,\r\n arrError: [],\r\n loading: false,\r\n loadingMessage: '',\r\n isRefresh: false,\r\n isSubmit: false,\r\n webview_url: null,\r\n isShowDigisign: false,\r\n errVerification: [],\r\n successMessage: null,\r\n activationPageSuccess: false,\r\n });\r\n \r\n const [formData, setFormData] = useState(null);\r\n const navigate = useNavigate();\r\n const location = useLocation();\r\n \r\n useEffect(() => {\r\n const fetchInit = async () => {\r\n // console.log(\"Starting fetchInit\");\r\n try {\r\n const token = localStorage.getItem('token');\r\n if (!token) {\r\n // console.log(\"No token found, navigating to login\");\r\n navigate('/login');\r\n return;\r\n }\r\n \r\n // console.log(\"Current formData:\", formData);\r\n \r\n if (!formData || !formData.loan_new_id) {\r\n // console.log(\"No formData or incomplete formData, fetching loan detail\");\r\n await fetchLoanDetail();\r\n }\r\n \r\n const digisign = location.state && location.state.digisign;\r\n // console.log(\"Digisign state:\", digisign);\r\n \r\n if (digisign === \"signPage\" || state.activationPageSuccess) {\r\n if (formData && formData.digisign_document_id) {\r\n await fetchDigisignLinkSign();\r\n } else {\r\n await fetchSendDoc();\r\n }\r\n } else if (digisign === \"activationPage\") {\r\n await fetchDigisignActivation();\r\n }\r\n } catch (err) {\r\n console.error(\"Error in fetchInit:\", err);\r\n setErrorVerification(err.message);\r\n } finally {\r\n setState(prevState => ({ ...prevState, loading: false }));\r\n }\r\n };\r\n \r\n fetchInit();\r\n \r\n const timeoutId = setTimeout(() => {\r\n setState(prevState => ({ ...prevState, loading: false, loadingMessage: 'Loading timeout. Please try again.' }));\r\n }, 30000);\r\n \r\n return () => clearTimeout(timeoutId);\r\n }, []);\r\n \r\n const fetchLoanDetail = async () => {\r\n try {\r\n const token = localStorage.getItem('token');\r\n let loan_new_id = location.state && location.state.loan_new_id;\r\n \r\n if (!loan_new_id) {\r\n const storedFormData = localStorage.getItem('formData');\r\n if (storedFormData) {\r\n const parsedData = JSON.parse(storedFormData);\r\n loan_new_id = parsedData && parsedData.data && parsedData.data.loan_new_id;\r\n }\r\n }\r\n \r\n if (!loan_new_id) {\r\n throw new Error('Data pinjaman tidak ditemukan. Silakan kembali ke halaman sebelumnya.');\r\n }\r\n \r\n const response = await axios.get(`${API.hostLoanNew}/loan/detail`, {\r\n headers: { Authorization: token },\r\n params: { loan_new_id: loan_new_id }\r\n });\r\n \r\n if (response.data && response.data.status) {\r\n setFormData(response.data.data);\r\n } else {\r\n throw new Error('Failed to fetch loan details');\r\n }\r\n } catch (error) {\r\n console.error('fetchLoanDetail.error', error);\r\n setErrorVerification(error.message);\r\n }\r\n };\r\n\r\n const fetchSendDoc = async () => {\r\n setState(prevState => ({ ...prevState, loadingMessage: 'prepare e-sign document' }));\r\n try {\r\n // Log formData untuk debugging\r\n // console.log('formData in fetchSendDoc:', formData);\r\n \r\n // Periksa apakah formData ada dan memiliki loan_new_id\r\n if (!formData || !formData.loan_new_id) {\r\n throw new Error('Data pinjaman tidak lengkap. Mohon coba lagi.');\r\n }\r\n \r\n const token = localStorage.getItem('token');\r\n if (!token) {\r\n throw new Error('Token tidak ditemukan. Silakan login kembali.');\r\n }\r\n \r\n const response = await axios.post(`${API.hostLoanNew}/loan-new/digisign-send-document`, {\r\n loan_new_id: formData.loan_new_id,\r\n email: formData.email,\r\n generate_link: true\r\n }, {\r\n headers: { Authorization: token }\r\n });\r\n \r\n // console.log('fetchSendDoc response:', response);\r\n \r\n if (!response.data.status) {\r\n throw new Error(response.data.message || 'Gagal mengirim dokumen');\r\n }\r\n \r\n if (response.data.data && response.data.data.document_id) {\r\n setFormData(prevFormData => ({\r\n ...prevFormData,\r\n digisign_document_id: response.data.data.document_id\r\n }));\r\n }\r\n \r\n setState(prevState => ({\r\n ...prevState,\r\n loading: false,\r\n isRefresh: false,\r\n webview_url: response.data.data && response.data.data.link ? response.data.data.link : null,\r\n errVerification: []\r\n }));\r\n } catch (error) {\r\n console.error('fetchSendDoc.error', error);\r\n setErrorVerification(error.message);\r\n }\r\n };\r\n\r\n const fetchDigisignLinkSign = async () => {\r\n setState(prevState => ({ ...prevState, loadingMessage: 'request e-sign link' }));\r\n try {\r\n const token = localStorage.getItem('token');\r\n const response = await axios.post(`${API.hostLoanNew}/loan-new/digisign-link-sign`, {\r\n email: formData.email,\r\n document_id: formData.digisign_document_id,\r\n }, {\r\n headers: { Authorization: token }\r\n });\r\n\r\n if (!response.data.status) {\r\n setErrorVerification(response.data.message);\r\n } else {\r\n if (response.data.data && response.data.data.link) {\r\n setState(prevState => ({\r\n ...prevState,\r\n loading: false,\r\n isRefresh: false,\r\n webview_url: response.data.data.link,\r\n errVerification: []\r\n }));\r\n } else if (response.data.signed === true) {\r\n setState(prevState => ({ ...prevState, loading: true }));\r\n fetchDigisignFile();\r\n }\r\n }\r\n } catch (error) {\r\n console.error('fetchDigisignLinkSign.error', error);\r\n setErrorVerification(error.message);\r\n }\r\n };\r\n\r\n const fetchDigisignActivation = async () => {\r\n setState(prevState => ({ ...prevState, loadingMessage: 'check e-sign user activation' }));\r\n try {\r\n const token = localStorage.getItem('token');\r\n const response = await axios.post(`${API.hostLoanNew}/loan-new/digisign-activation`, {\r\n email: formData.email,\r\n }, {\r\n headers: { Authorization: token }\r\n });\r\n\r\n if (!response.data.status) {\r\n setErrorVerification(response.data.message);\r\n } else {\r\n if (response.data.data && response.data.data.link) {\r\n setState(prevState => ({\r\n ...prevState,\r\n loading: false,\r\n isRefresh: false,\r\n webview_url: response.data.data.link,\r\n errVerification: []\r\n }));\r\n } else if (response.data.activated === true) {\r\n setState(prevState => ({\r\n ...prevState,\r\n activationPageSuccess: true,\r\n webview_url: null,\r\n loading: true\r\n }));\r\n fetchSendDoc();\r\n }\r\n }\r\n } catch (error) {\r\n console.error('fetchDigisignActivation.error', error);\r\n setErrorVerification(error.message);\r\n }\r\n };\r\n\r\n const fetchDigisignFile = async () => {\r\n setState(prevState => ({ ...prevState, loadingMessage: 'saving e-sign document' }));\r\n try {\r\n const token = localStorage.getItem('token');\r\n const response = await axios.post(`${API.hostLoanNew}/loan-new/digisign-file`, {\r\n loan_new_id: formData.loan_new_id,\r\n document_id: formData.digisign_document_id,\r\n }, {\r\n headers: { Authorization: token }\r\n });\r\n\r\n setState(prevState => ({ ...prevState, loading: false, isRefresh: false, errVerification: [] }));\r\n if (!response.data.status) {\r\n console.error('fetchDigisignFile.error status', response.data.message);\r\n setErrorVerification(response.data.message);\r\n } else {\r\n navigate('/credit-new-waiting');\r\n }\r\n } catch (error) {\r\n setState(prevState => ({ ...prevState, loading: false, isRefresh: false, errVerification: [] }));\r\n console.error('fetchDigisignFile.error', error);\r\n setErrorVerification(error.message);\r\n }\r\n };\r\n\r\n const setErrorVerification = (errMessage) => {\r\n const errVerification = [];\r\n if (errMessage && typeof errMessage !== 'string' && errMessage.length > 0) {\r\n errMessage.forEach(err => {\r\n const message = `${err.notif} ${err.info || ''}`;\r\n errVerification.push(message);\r\n });\r\n } else {\r\n errVerification.push(errMessage);\r\n }\r\n setState(prevState => ({\r\n ...prevState,\r\n loading: false,\r\n isRefresh: false,\r\n errVerification,\r\n successMessage: null,\r\n loadingMessage: ''\r\n }));\r\n };\r\n\r\n const onNavigationStateChange = (url) => {\r\n // console.log(\"check ==>\", url);\r\n if (url.includes(\"digisign/activation\")) {\r\n if (url.includes(\"msg=\")) {\r\n setState(prevState => ({\r\n ...prevState,\r\n activationPageSuccess: true,\r\n webview_url: null,\r\n successMessage: {\r\n message: 'Proses Aktivasi Berhasil',\r\n email: formData.email,\r\n identity_id: formData.identity_id,\r\n }\r\n }));\r\n setTimeout(() => {\r\n setState(prevState => ({ ...prevState, loading: true }));\r\n fetchSendDoc();\r\n }, 2000);\r\n } else {\r\n setState(prevState => ({ ...prevState, loading: true, activationPageSuccess: true, webview_url: null }));\r\n fetchSendDoc();\r\n }\r\n } else if (url.includes(\"digisign/complete\")) {\r\n if (url.includes(\"msg=\")) {\r\n setState(prevState => ({\r\n ...prevState,\r\n webview_url: null,\r\n successMessage: {\r\n message: 'Proses tanda tangan berhasil!',\r\n email: formData.email,\r\n identity_id: formData.identity_id,\r\n document_id: formData.digisign_document_id,\r\n }\r\n }));\r\n setTimeout(() => {\r\n setState(prevState => ({ ...prevState, loading: true }));\r\n fetchDigisignFile();\r\n }, 2000);\r\n } else {\r\n setState(prevState => ({ ...prevState, loading: true, webview_url: null }));\r\n fetchDigisignFile();\r\n }\r\n }\r\n };\r\n\r\n if (state.loading) {\r\n return (\r\n <div className=\"loading-container\">\r\n <div className=\"spinner\"></div>\r\n <p>{state.loadingMessage}</p>\r\n </div>\r\n );\r\n }\r\n\r\n return (\r\n <div className=\"credit-digisign-container\">\r\n <header className=\"credit-digisign-header\">\r\n <button onClick={() => navigate(-1)} className=\"back-button\">\r\n <FontAwesomeIcon icon={faArrowLeft} />\r\n </button>\r\n <h1>Tanda Tangan Digisign</h1>\r\n </header>\r\n\r\n <div className=\"credit-digisign-content\">\r\n {state.loading ? (\r\n <div className=\"loading-container\">\r\n <div className=\"spinner\"></div>\r\n <p>{state.loadingMessage}</p>\r\n </div>\r\n ) : (\r\n <>\r\n {!state.webview_url && (\r\n <div className=\"message-container\">\r\n <p>{state.loadingMessage}</p>\r\n {state.errVerification.length > 0 && (\r\n <VerificationFailed data={state.errVerification} />\r\n )}\r\n {state.successMessage && (\r\n <DigisignSuccessMessage data={state.successMessage} />\r\n )}\r\n </div>\r\n )}\r\n\r\n {state.webview_url && (\r\n <div className=\"webview-container\">\r\n <iframe\r\n src={state.webview_url}\r\n title=\"Digisign\"\r\n width=\"100%\"\r\n height=\"600px\"\r\n onLoad={(e) => onNavigationStateChange(e.target.contentWindow.location.href)}\r\n />\r\n </div>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n</div>\r\n);\r\n};\r\n\r\nconst VerificationFailed = ({ data }) => (\r\n <div className=\"verification-failed\">\r\n <h3>Error Message</h3>\r\n {data.map((message, index) => (\r\n <p key={index} className=\"error-message\">{message}</p>\r\n ))}\r\n </div>\r\n);\r\n\r\nconst DigisignSuccessMessage = ({ data }) => (\r\n <div className=\"digisign-success\">\r\n <h3>{data.message}</h3>\r\n <p>Email: {data.email}</p>\r\n <p>E-KTP: {data.identity_id}</p>\r\n </div>\r\n);\r\n\r\nexport default CreditDigisignComponent;","import React, { useState, useEffect, useCallback } from 'react';\r\nimport { useNavigate, useLocation } from 'react-router-dom';\r\nimport axios from 'axios';\r\nimport { Alert, Button, Input, Modal, Spin, message } from 'antd';\r\nimport { CloudUploadOutlined, DownloadOutlined } from '@ant-design/icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faArrowLeft } from '@fortawesome/free-solid-svg-icons';\r\nimport '../assets/styles/creditNewManualSign.css';\r\nimport accounting from 'accounting';\r\nimport moment from 'moment';\r\nimport 'moment/locale/id';\r\n\r\nconst API = {\r\n hostLoanNew: \"https://loan-new.koperasi-astra.com\",\r\n};\r\n\r\nconst CreditNewManualSignComponent = () => {\r\n const navigate = useNavigate();\r\n const location = useLocation();\r\n const [state, setState] = useState({\r\n titleError: null,\r\n arrError: [],\r\n loading: true,\r\n isRefresh: false,\r\n checked: false,\r\n kontrakUri1: null,\r\n kontrakUri2: null,\r\n kontrakBase641: null,\r\n kontrakBase642: null,\r\n contractDocumentUri: null,\r\n isSubmit: false,\r\n token: null,\r\n isShowFileDownload: false,\r\n formData: null,\r\n });\r\n\r\n const fetchLoanDetails = useCallback(async (loanNewId) => {\r\n setState(prevState => ({ ...prevState, loading: true }));\r\n try {\r\n const token = localStorage.getItem('token');\r\n if (!token) throw new Error('Token tidak ditemukan. Silakan login kembali.');\r\n\r\n const response = await axios.get(`${API.hostLoanNew}/loan/detail`, {\r\n headers: { Authorization: token },\r\n params: { loan_new_id: loanNewId }\r\n });\r\n\r\n setState(prevState => ({\r\n ...prevState,\r\n formData: response.data.data,\r\n loading: false,\r\n }));\r\n } catch (error) {\r\n console.error('Error fetching loan details:', error);\r\n setState(prevState => ({\r\n ...prevState,\r\n loading: false,\r\n arrError: [...prevState.arrError, 'Terjadi kesalahan saat mengambil data pinjaman. Silakan coba lagi.'],\r\n }));\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n const loadData = async () => {\r\n let loanNewId = null;\r\n if (location.state && location.state.loanNewId) {\r\n loanNewId = location.state.loanNewId;\r\n } else {\r\n const storedFormData = localStorage.getItem('formData');\r\n if (storedFormData) {\r\n const parsedData = JSON.parse(storedFormData);\r\n if (parsedData && parsedData.data && parsedData.data.loan_new_id) {\r\n loanNewId = parsedData.data.loan_new_id;\r\n }\r\n }\r\n }\r\n\r\n if (loanNewId) {\r\n await fetchLoanDetails(loanNewId);\r\n } else {\r\n setState(prevState => ({\r\n ...prevState,\r\n loading: false,\r\n arrError: [...prevState.arrError, 'Data pinjaman tidak ditemukan. Silakan kembali ke halaman sebelumnya.'],\r\n }));\r\n }\r\n };\r\n\r\n loadData();\r\n }, [fetchLoanDetails, location.state]);\r\n\r\n const onRefresh = useCallback(() => {\r\n setState(prevState => ({ ...prevState, isRefresh: false }));\r\n }, []);\r\n\r\n const onChangeImage = useCallback((type, file) => {\r\n const reader = new FileReader();\r\n reader.onloadend = () => {\r\n if (type === 'kontrak1') {\r\n setState(prevState => ({\r\n ...prevState,\r\n kontrakUri1: file.name,\r\n kontrakBase641: reader.result,\r\n }));\r\n } else if (type === 'kontrak2') {\r\n setState(prevState => ({\r\n ...prevState,\r\n kontrakUri2: file.name,\r\n kontrakBase642: reader.result,\r\n }));\r\n }\r\n };\r\n reader.readAsDataURL(file);\r\n }, []);\r\n\r\n const onPressDownloadDoc = useCallback(async () => {\r\n try {\r\n setState(prevState => ({ ...prevState, loading: true }));\r\n const filename = `Dokumen_Kontrak_${state.formData.no_dokumen}.pdf`;\r\n const response = await axios.get(`${API.hostLoanNew}/loan-new/contract-document?loan_new_id=${state.formData.loan_new_id}`, {\r\n responseType: 'blob',\r\n headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }\r\n });\r\n \r\n const url = window.URL.createObjectURL(new Blob([response.data]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.setAttribute('download', filename);\r\n document.body.appendChild(link);\r\n link.click();\r\n link.remove();\r\n setState(prevState => ({ ...prevState, loading: false }));\r\n } catch (error) {\r\n console.error('Error downloading document:', error);\r\n setState(prevState => ({ ...prevState, loading: false }));\r\n message.error('Gagal mengunduh dokumen. Silakan coba lagi.'); // Perubahan di sini\r\n }\r\n }, [state.formData]);\r\n\r\n const onPressUploadDoc = useCallback(async () => {\r\n if (!state.kontrakUri1 || !state.kontrakUri2) {\r\n message.warning('Silakan unggah kedua halaman kontrak.');\r\n return;\r\n }\r\n\r\n try {\r\n setState(prevState => ({ ...prevState, loading: true }));\r\n const reqBody = {\r\n loan_new_id: state.formData.loan_new_id,\r\n kontrak1: state.kontrakBase641,\r\n kontrak2: state.kontrakBase642,\r\n };\r\n\r\n const response = await axios.post(`${API.hostLoanNew}/loan-new/manual-signature`, reqBody, {\r\n headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }\r\n });\r\n\r\n setState(prevState => ({ ...prevState, loading: false }));\r\n if (response.data.status) {\r\n navigate('/credit-new-waiting');\r\n } else {\r\n Alert.error(response.data.message || 'Failed to upload documents. Please try again.');\r\n }\r\n } catch (error) {\r\n console.error('Error uploading documents:', error);\r\n setState(prevState => ({ ...prevState, loading: false }));\r\n message.error('Gagal mengunggah dokumen. Silakan coba lagi.'); // Perubahan di sini\r\n }\r\n }, [state, navigate]);\r\n\r\n const InputDocument = ({ label, value, onChangeImage }) => (\r\n <>\r\n <label className=\"input-label\">\r\n {label}<span className=\"required\">*</span>\r\n </label>\r\n <Input.Group compact>\r\n <Input\r\n value={value}\r\n placeholder=\"Upload Document\"\r\n readOnly\r\n />\r\n <Button onClick={() => document.getElementById(label).click()}>\r\n Browse\r\n </Button>\r\n <input\r\n id={label}\r\n type=\"file\"\r\n accept=\"image/*\"\r\n onChange={(e) => onChangeImage(e.target.files[0])}\r\n style={{ display: 'none' }}\r\n />\r\n </Input.Group>\r\n </>\r\n );\r\n\r\n if (state.loading) {\r\n return (\r\n <div className=\"loading-container\">\r\n <Spin size=\"large\" />\r\n <p>Memuat...</p>\r\n </div>\r\n );\r\n }\r\n\r\n return (\r\n <div className=\"credit-new-manual-sign-container\">\r\n <header className=\"manual-sign-header\">\r\n <button onClick={() => navigate(-1)} className=\"back-button\">\r\n <FontAwesomeIcon icon={faArrowLeft} />\r\n </button>\r\n <h1>Tanda Tangan Manual</h1>\r\n </header>\r\n\r\n {state.arrError.length > 0 && (\r\n <Alert\r\n message=\"Error\"\r\n description={state.arrError.join(', ')}\r\n type=\"error\"\r\n showIcon\r\n style={{ marginBottom: 16 }}\r\n />\r\n )}\r\n\r\n {state.formData && (\r\n <div className=\"loan-details\">\r\n <h2>Detail Pinjaman</h2>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Jenis Pinjaman:</span>\r\n <span className=\"value\">{state.formData.nama_pinjaman}</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Pokok Pinjaman:</span>\r\n <span className=\"value\">Rp {accounting.formatMoney(state.formData.approved_amount || 0, \"\", 0, \",\", \",\")}</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Tenor:</span>\r\n <span className=\"value\">{state.formData.approved_tenor || 0} Bulan</span>\r\n </div>\r\n <div className=\"detail-item\">\r\n <span className=\"label\">Angsuran Per Bulan:</span>\r\n <span className=\"value\">Rp {accounting.formatMoney(state.formData.angsuran_bulan || 0, \"\", 0, \",\", \",\")}</span>\r\n </div>\r\n </div>\r\n )}\r\n\r\n<p className=\"instructions\">\r\n Proses approval sudah lengkap. Silakan tekan tombol di bawah ini untuk mengunduh dokumen. Tanda tangani, scan, dan unggah dokumen sebagai gambar.\r\n</p>\r\n\r\n<Button\r\n className=\"download-button\"\r\n icon={<DownloadOutlined />}\r\n onClick={onPressDownloadDoc}\r\n>\r\n Unduh Dokumen\r\n</Button>\r\n\r\n<div className=\"upload-instructions\">\r\n <h3>Informasi</h3>\r\n <p>Harap unggah dokumen dengan mode potret</p>\r\n</div>\r\n\r\n<div className=\"input-document\">\r\n <InputDocument\r\n label=\"Unggah Dokumen Halaman 1\"\r\n value={state.kontrakUri1}\r\n onChangeImage={(file) => onChangeImage('kontrak1', file)}\r\n />\r\n</div>\r\n\r\n<div className=\"input-document\">\r\n <InputDocument\r\n label=\"Unggah Dokumen Halaman 2\"\r\n value={state.kontrakUri2}\r\n onChangeImage={(file) => onChangeImage('kontrak2', file)}\r\n />\r\n</div>\r\n\r\n<Button\r\n className=\"upload-button\"\r\n onClick={onPressUploadDoc}\r\n>\r\n Unggah Dokumen\r\n</Button>\r\n\r\n <Modal\r\n visible={state.isShowFileDownload}\r\n onCancel={() => setState(prevState => ({ ...prevState, isShowFileDownload: false }))}\r\n footer={null}\r\n width=\"80%\"\r\n >\r\n <iframe\r\n src={state.contractDocumentUri}\r\n style={{ width: '100%', height: '80vh' }}\r\n title=\"Contract Document\"\r\n />\r\n </Modal>\r\n </div>\r\n );\r\n};\r\n\r\nexport default CreditNewManualSignComponent;","import React, {useEffect} from \"react\";\r\nimport {\r\n Navigate,\r\n Routes,\r\n Route\r\n} from \"react-router-dom\";\r\nimport {checkAccount, safeString} from './helper/session';\r\n\r\nimport Signin from './pages/SignIn';\r\nimport Signup from './pages/SignUp';\r\nimport Main from './pages/Main';\r\nimport ForgotPassword from './pages/ForgotPassword';\r\nimport CekPendaftaran from './pages/CekPendaftaran';\r\nimport PrivacyPolicy from './pages/PrivacyPolicy';\r\nimport ResetPassword from './pages/ResetPassword';\r\nimport OneTimePassword from './pages/OneTimePassword';\r\nimport UpdateProfile from \"./pages/UpdateProfile\";\r\nimport UpdateDocument from \"./pages/UpdateDocument\";\r\nimport UpdateKepegawaian from \"./pages/UpdateKepegawaian\";\r\nimport UpdatePassword from \"./pages/UpdatePassword\";\r\nimport Products from \"./pages/Products\";\r\n\r\nimport Home from './pages/Home';\r\nimport Catalog from './pages/Catalog';\r\nimport History from './pages/History';\r\nimport Profile from './pages/Profile';\r\nimport Brands from \"./pages/Brands\";\r\nimport JenisPinjaman from \"./pages/JenisPinjaman\";\r\nimport SimulasiPinjaman from \"./pages/SimulasiPinjaman_\";\r\nimport GondolaTicket from \"./pages/GondolaTicket\";\r\nimport Product from \"./pages/Product\";\r\nimport OrderInputIdentity from \"./pages/OrderInputIdentity\";\r\nimport OrderPaymentMethod from \"./pages/OrderPaymentMethod\";\r\nimport OrderBill from \"./pages/OrderBill\";\r\nimport OrderDetail from \"./pages/OrderDetail\";\r\nimport OrderTracking from \"./pages/OrderTracking\";\r\nimport UpdateBank from \"./pages/UpdateBank\";\r\n\r\nimport Pinjaman from \"./pages/Pinjaman\";\r\nimport RiwayatPinjaman from \"./pages/RiwayatPinjaman\";\r\nimport PelunasanPinjaman from \"./pages/PelunasanPinjaman\";\r\nimport Gadget from \"./pages/Gadget\";\r\nimport Pulsa from \"./pages/Pulsa\";\r\nimport PaketData from \"./pages/PaketData\";\r\nimport Simulation from './pages/Simulation';\r\nimport TermCondition from './pages/TermCondition';\r\nimport InputDocument from './pages/InputDocument';\r\nimport DetailRiwayatPinjaman from './pages/DetailRiwayatPinjaman';\r\nimport InputEmail from './pages/InputEmail';\r\nimport InputSummary from './pages/InputSummary';\r\nimport HistoryStatus from './pages/HistoryStatus';\r\nimport HistoryStatusCancel from './pages/HistoryStatusCancel';\r\nimport HistoryStatusActive from './pages/HistoryStatusActive';\r\nimport CreditTtd from './pages/CreditTtd';\r\nimport CreditTtdDigisign from './pages/CreditTtdDigisign';\r\nimport CreditTtdManual from './pages/CreditTtdManual';\r\n\r\nimport { LoanProvider } from './LoanContext';\r\n\r\nconst App = () => {\r\n const configClass = () => {\r\n let pathname = safeString(window.location.pathname);\r\n if(pathname === '/signin' || pathname === 'signup' || pathname === '/forgot_password' || pathname === '/reset_password' || pathname === '/otp'){\r\n document.getElementById('body').classList.remove('align-items-start');\r\n document.getElementById('body').classList.remove('py-0');\r\n document.getElementById('body').classList.remove('flex-column');\r\n document.getElementById('body').classList.add('text-center');\r\n }else{\r\n document.getElementById('body').classList.remove('text-center');\r\n document.getElementById('body').classList.add('align-items-start');\r\n document.getElementById('body').classList.add('py-0');\r\n document.getElementById('body').classList.add('flex-column');\r\n }\r\n }\r\n useEffect(() => {\r\n configClass();\r\n }, [configClass]);\r\n\r\n return (\r\n <LoanProvider>\r\n <Routes>\r\n <Route exact path=\"/\" element={<Navigate to=\"/home\" replace=\"true\"/>} />\r\n <Route path=\"/signin\" element={checkAccount() ? <Navigate to=\"/home\" replace=\"true\"/> : <Signin/>} /> \r\n <Route path=\"/signup\" element={checkAccount() ? <Navigate to=\"/home\" replace=\"true\"/> : <Signup/>} /> \r\n <Route path=\"/forgot_password\" element={checkAccount() ? <Navigate to=\"/home\" replace=\"true\"/> : <ForgotPassword/>} /> \r\n <Route path=\"/cek_pendaftaran\" element={checkAccount() ? <Navigate to=\"/home\" replace=\"true\"/> : <CekPendaftaran/>} /> \r\n <Route path=\"/privacy-policy\" element={<PrivacyPolicy/>} /> \r\n <Route path=\"/reset_password\" element={checkAccount() ? <Navigate to=\"/home\" replace=\"true\"/> : <ResetPassword/>} /> \r\n <Route path=\"/otp\" element={checkAccount() ? <Navigate to=\"/home\" replace=\"true\"/> : <OneTimePassword/>} /> \r\n <Route path=\"/home\">\r\n <Route path=\"\" element={checkAccount() ? <Main component={Home}/> : <Navigate to=\"/signin\" replace=\"true\"/>} /> \r\n <Route path=\"catalog\" element={<Main component={Catalog}/>} /> \r\n <Route path=\"history\" element={checkAccount() ? <Main component={History}/> : <Navigate to=\"/signin\" replace=\"true\"/>} /> \r\n <Route path=\"profile\" element={checkAccount() ? <Main component={Profile}/> : <Navigate to=\"/signin\" replace=\"true\"/>} /> \r\n <Route path=\"*\" element={<Navigate to=\"/profile\" replace=\"true\"/>} />\r\n </Route> \r\n <Route path=\"/profile\">\r\n <Route path=\"\" element={checkAccount() ?<Navigate to=\"/home/profile\" replace=\"true\"/> : <Navigate to=\"/signin\" replace=\"true\"/>} />\r\n <Route path=\"edit\" element={checkAccount() ? <UpdateProfile/> : <Navigate to=\"/signin\" replace=\"true\"/>} /> \r\n <Route path=\"edit_document\" element={checkAccount() ? <UpdateDocument/> : <Navigate to=\"/signin\" replace=\"true\"/>} /> \r\n <Route path=\"edit_kepagawaian\" element={checkAccount() ? <UpdateKepegawaian/> : <Navigate to=\"/signin\" replace=\"true\"/>} /> \r\n <Route path=\"edit_bank\" element={checkAccount() ? <UpdateBank/> : <Navigate to=\"/signin\" replace=\"true\"/>} /> \r\n <Route path=\"password\" element={checkAccount() ? <UpdatePassword/> : <Navigate to=\"/signin\" replace=\"true\"/>} /> \r\n <Route path=\"*\" element={<Navigate to=\"/home\" replace=\"true\"/>} />\r\n </Route>\r\n <Route path=\"/products\">\r\n <Route path=\"\" element={<Products/>}/>\r\n <Route path=\":keyword\" element={<Products/>}/>\r\n </Route>\r\n <Route path=\"/product\">\r\n <Route path=\"\" element={<Brands/>}/>\r\n <Route path=\":id\" element={<Product/>}/>\r\n </Route>\r\n <Route path=\"/brands\">\r\n <Route path=\"\" element={<Brands/>}/>\r\n <Route path=\":keyword\" element={<Brands/>}/>\r\n </Route>\r\n {/* <Route path=\"/jenispinjaman\">\r\n <Route path=\"\" element={<JenisPinjaman/>}/>\r\n <Route path=\":keyword\" element={<JenisPinjaman/>}/>\r\n </Route>\r\n <Route path=\"/simulasipinjaman\">\r\n <Route path=\"\" element={<SimulasiPinjaman/>}/>\r\n <Route path=\":keyword\" element={<SimulasiPinjaman/>}/>\r\n </Route> */}\r\n <Route path=\"/gondolaticket\">\r\n <Route path=\"\" element={<GondolaTicket/>}/>\r\n <Route path=\":keyword\" element={<GondolaTicket/>}/>\r\n </Route>\r\n <Route path=\"/order\">\r\n <Route path=\"\" element={<Navigate to=\"/home\" replace=\"true\"/>}/>\r\n <Route path=\":id/identity\" element={checkAccount() ? <OrderInputIdentity/> : <Navigate to=\"/signin\" replace=\"true\"/>}/>\r\n <Route path=\":id/payments\" element={checkAccount() ? <OrderPaymentMethod/> : <Navigate to=\"/signin\" replace=\"true\"/>}/>\r\n <Route path=\":code/bill\" element={checkAccount() ? <OrderBill/> : <Navigate to=\"/signin\" replace=\"true\"/>}/>\r\n <Route path=\":code/detail\" element={checkAccount() ? <OrderDetail/> : <Navigate to=\"/signin\" replace=\"true\"/>}/>\r\n <Route path=\":code/tracking\" element={checkAccount() ? <OrderTracking/> : <Navigate to=\"/signin\" replace=\"true\"/>}/>\r\n <Route path=\":id/*\" element={<Navigate to=\"/home\" replace=\"true\"/>} /> \r\n <Route path=\":code/*\" element={<Navigate to=\"/home\" replace=\"true\"/>} /> \r\n <Route path=\"*\" element={<Navigate to=\"/home\" replace=\"true\"/>} /> \r\n </Route>\r\n <Route path=\"/*\" element={<Navigate to=\"/home\" replace=\"true\"/>} /> \r\n \r\n <Route path=\"/pinjaman\" element={checkAccount() ? <Pinjaman /> : <Navigate to=\"/signin\" replace={true} />} />\r\n <Route path=\"/simulasi-pinjaman\" element={checkAccount() ? <SimulasiPinjaman /> : <Navigate to=\"/signin\" replace={true} />} />\r\n <Route path=\"/riwayat-pinjaman\" element={checkAccount() ? <RiwayatPinjaman /> : <Navigate to=\"/signin\" replace={true} />} />\r\n <Route path=\"/pelunasan-pinjaman\" element={checkAccount() ? <PelunasanPinjaman /> : <Navigate to=\"/signin\" replace={true} />} />\r\n <Route path=\"/gadget\" element={checkAccount() ? <Gadget /> : <Navigate to=\"/signin\" replace={true} />} />\r\n <Route path=\"/pulsa\" element={checkAccount() ? <Pulsa /> : <Navigate to=\"/signin\" replace={true} />} />\r\n <Route path=\"/paket-data\" element={checkAccount() ? <PaketData /> : <Navigate to=\"/signin\" replace={true} />} />\r\n <Route path=\"/simulation\" element={checkAccount() ? <Simulation /> : <Navigate to=\"/signin\" replace={true} />} />\r\n <Route path=\"/term-condition\" element={checkAccount() ? <TermCondition /> : <Navigate to=\"/signin\" replace={true} />} />\r\n <Route path=\"/input-document\" element={checkAccount() ? <InputDocument /> : <Navigate to=\"/signin\" replace={true} />} /> \r\n <Route path=\"/detail-pinjaman\" element={checkAccount() ? <DetailRiwayatPinjaman /> : <Navigate to=\"/signin\" replace={true} />} /> \r\n <Route path=\"/input-email\" element={checkAccount() ? <InputEmail /> : <Navigate to=\"/signin\" replace={true} />} /> \r\n <Route path=\"/input-summary\" element={checkAccount() ? <InputSummary /> : <Navigate to=\"/signin\" replace={true} />} /> \r\n <Route path=\"/credit-status\" element={checkAccount() ? <HistoryStatus /> : <Navigate to=\"/signin\" replace={true} />} /> \r\n <Route path=\"/credit-new-cancel\" element={checkAccount() ? <HistoryStatusCancel /> : <Navigate to=\"/signin\" replace={true} />} /> \r\n <Route path=\"/credit-new-active\" element={checkAccount() ? <HistoryStatusActive /> : <Navigate to=\"/signin\" replace={true} />} /> \r\n <Route path=\"/credit-ttd\" element={checkAccount() ? <CreditTtd /> : <Navigate to=\"/signin\" replace={true} />} /> \r\n <Route path=\"/credit-new-verification-digisign\" element={checkAccount() ? <CreditTtdDigisign /> : <Navigate to=\"/signin\" replace={true} />} /> \r\n <Route path=\"/credit-ttd-manual\" element={checkAccount() ? <CreditTtdManual /> : <Navigate to=\"/signin\" replace={true} />} /> \r\n </Routes>\r\n </LoanProvider>\r\n );\r\n}\r\n\r\nexport default App;\r\n","const reportWebVitals = onPerfEntry => {\r\n if (onPerfEntry && onPerfEntry instanceof Function) {\r\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\r\n getCLS(onPerfEntry);\r\n getFID(onPerfEntry);\r\n getFCP(onPerfEntry);\r\n getLCP(onPerfEntry);\r\n getTTFB(onPerfEntry);\r\n });\r\n }\r\n};\r\n\r\nexport default reportWebVitals;\r\n","import React from \"react\";\r\nimport ReactDOM from 'react-dom/client';\r\nimport { BrowserRouter } from \"react-router-dom\";\r\n\r\nimport './assets/styles/typography.css';\r\n// import './assets/styles/bootstrap.css';\r\nimport './index.css';\r\nimport './assets/styles/style.css';\r\nimport './assets/styles/signin.css';\r\nimport './assets/styles/navigation.css';\r\n\r\nimport App from './App';\r\nimport reportWebVitals from './reportWebVitals';\r\n\r\nconst root = ReactDOM.createRoot(document.getElementById('root'));\r\nroot.render(\r\n <React.StrictMode>\r\n <BrowserRouter>\r\n <App />\r\n </BrowserRouter>\r\n </React.StrictMode>\r\n);\r\n\r\n// If you want to start measuring performance in your app, pass a function\r\n// to log results (for example: reportWebVitals(// console.log))\r\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\r\nreportWebVitals();\r\n"],"sourceRoot":""}
\r\n ![\"Koperasi](\"https://adm-simpanan.koperasi-astra.com/storage/config/M3nj1nCDoaIIpPrrxWUhiThJuFYTXF6EivrsKcgW.png\")
\r\n