Screen Sharing

), + } + }else{ + return { + label: vChildThird.menuNm, key: vChildThird.menuId, icon: (

), + } + } + + }) + } + + if(vChild.url){ + tmpChild.push({ + label: ({vChild.menuNm}), key: vChild.menuId, icon: (

), children: resultListChildThird + }) + }else{ + + tmpChild.push({ + label: vChild.menuNm, key: vChild.menuId, icon: (

), children: resultListChildThird + }) + } + }) + + } else { + tmpChild = null + } + + if(v.url){ + tmpMenu.push({ + label: ({v.menuNm}), key: v.menuId, icon: (

), children: tmpChild + }) + }else{ + tmpMenu.push({ + label: v.menuNm, key: v.menuId, icon: (

), children:[{ + key: 'g1', label: 'Menu '+v.menuNm, type: 'group', children: tmpChild + }] + }) + + } + + }) + + console.log(tmpMenu) + + setMenuTapera(tmpMenu.filter((v)=>v.key === 1)) + setMenuSilos(tmpMenu.filter((v)=>v.key === 2)) + setMenuManajemenData(tmpMenu.filter((v)=>v.key === 3)) + setMenuUsers(tmpMenu.filter((v)=>v.key === 8)) + + + } + } + + const getMenuDummy = () => { + const items = [{ + key: 'sub1', label:

Tapera Connect

, icon: , children: [{ + key: 'g1', label: 'Menu Tappera Connect', type: 'group', children: [{ + key: '1', label: 'Inbox', + }, { + key: '2', label: 'Follow Up', + },], + }, + + ], + }, + + ]; + setMenuList(items) + } + + useEffect(() => { + // getMenu() + // getMenuDummy() + }, []); + + useEffect(() => { + console.log(toggleStatus) + }, [toggleStatus]); + + return (<> + +

+ +

+ + +

+ ); +}; + +export default React.memo(MenuList); diff --git a/src/components/master/Navbar.jsx b/src/components/master/Navbar.jsx new file mode 100644 index 0000000..073416f --- /dev/null +++ b/src/components/master/Navbar.jsx @@ -0,0 +1,365 @@ +"use client"; +import React, {useEffect, useState} from "react"; +import {BellOutlined, CloseOutlined, MenuFoldOutlined, MenuOutlined, MenuUnfoldOutlined, MoonOutlined, SunOutlined, UserOutlined} from '@ant-design/icons'; +import useAuth from "@/hooks/useAuth"; +import {useRouter} from "next/navigation"; +import {useAPI} from "@/hooks/useAPI"; +import modalStore from "@/store/modal"; +import {API} from "@/lib/API"; +import {Button, Drawer, Menu, Switch} from "antd"; +import Link from "next/link"; +import notifStore from "@/store/notifStore"; +import ExportedImage from "next-image-export-optimizer" +import menuStore from "@/store/menuStore"; + +function Navbar() { + const router = useRouter(); + const {notifOpen} = notifStore() + const {setToggle} = menuStore() + // const {data: dataUser, isSuccess} = useAPI.GET('user', '/ref/user/' + localStorage.getItem('userId')) + const {removeAuth} = useAuth() + const [MenuList, setMenuList] = useState([]) + const {setModalPassword, setModalProfile} = modalStore() + const [current, setCurrent] = useState(null); + const [collapsed, setCollapsed] = useState(false); + + + const ViewImage = ({fotoMember}) => { + if (fotoMember == null) return ; + + let getImage = '/'; + return

; + }; + + + const logout = async () => { + // let response = await API.GET('/auth/logout'); + // console.log(response) + // if (response.status === 200) { + // await removeAuth() + router.push("/login"); + // } + } + + let valTheme = localStorage.getItem('valTheme') + let state = null + if (valTheme == 'true') { + state = true + document.body.classList.add('darkMode') + } else { + state = false + } + + const [isTheme, setTheme] = useState(state); + + const buttonHandler = (val) => { + setTheme((status) => !status); + let theme = null + if (val != true) { + theme = 'lightMode' + document.body.classList.add(theme); + document.body.classList.remove('darkMode'); + } else { + theme = 'darkMode' + document.body.classList.add(theme); + document.body.classList.remove('lightMode'); + } + localStorage.setItem('setTheme', theme) + localStorage.setItem('valTheme', val) + }; + + const modalChangeProfile = () => { + setModalProfile(true) + } + const modalChangePassword = (type) => { + console.log(type) + setModalPassword(true, type) + } + + const getMenu = async () => { + let menu = await API.GET('/ref/menu'); + if (menu.status !== 200) { + notifOpen("Gagal", menu?.result?.message, "danger"); + } else { + let tmpMenu = [] + menu?.result?.forEach((v, k) => { + + let tmpChild = [] + + if (v.childs) { + v?.childs?.forEach((vChild, kChild) => { + + let resultListChildThird = null + if (vChild.childs) { + resultListChildThird = vChild?.childs?.map((vChildThird, kChildThird) => { + if (vChildThird.url) { + return { + label: ({vChildThird.menuNm}), key: vChildThird.menuId, icon: (

), + } + } else { + return { + label: vChildThird.menuNm, key: vChildThird.menuId, icon: (

), + } + } + + }) + } + + if (vChild.url) { + tmpChild.push({ + label: ({vChild.menuNm}), key: vChild.menuId, icon: (

), children: resultListChildThird + }) + } else { + + tmpChild.push({ + label: vChild.menuNm, key: vChild.menuId, icon: (

), children: resultListChildThird + }) + } + }) + + } else { + tmpChild = null + } + + if (v.url) { + tmpMenu.push({ + label: ({v.menuNm}), key: v.menuId, icon: (

), children: tmpChild + }) + } else { + tmpMenu.push({ + label: v.menuNm, key: v.menuId, icon: (

), children: [{ + key: 'g1', label: 'Menu ' + v.menuNm, type: 'group', children: tmpChild + }] + }) + + } + + }) + + console.log(tmpMenu) + setMenuList(tmpMenu) + + } + } + + + const checkFirstLogin = () => { + if (dataUser?.result?.userStatusId === 3) { + modalChangePassword('first') + } + } + + const checkPasswordExpired = () => { + if (dataUser?.result?.passwordExpired) { + modalChangePassword('expired') + } + } + + // useEffect(() => { + // if (isSuccess) { + // checkFirstLogin() + // checkPasswordExpired() + // } + // + // }, [isSuccess]); + + + useEffect(() => { + // getMenu() + + }, []); + + const onClickMenu = (e) => { + // console.log('click ', e); + setCollapsed(!collapsed); + // document.querySelector(".backdrop").classList.remove("backdropMenu"); + // document.querySelector(".menuInline").classList.remove("in"); + // document.querySelector(".menuInline").classList.add("out"); + setCurrent(e.key); + }; + + const [scroll, setScroll] = useState(false); + useEffect(() => { + window.addEventListener("scroll", () => { + setScroll(window.scrollY > 15); + }); + }, []); + + const [openDraw, setOpenDraw] = useState(false); + const showDrawer = () => { + setOpenDraw(true); + }; + const closeDraw = () => { + setOpenDraw(false); + }; + + const toggleCollapsed = () => { + setCollapsed(!collapsed); + }; + + return ( + <> + {/*

*/} + + + +

+ +

+ v0.1.0{" "} +

Command Center

+ {collapsed ?

: ''} +

+ + +

+ {/**/} +

+ +

+ {/*

{dataUser?.result?.fullName}

*/} + {/*

{dataUser?.result?.roleNm}

*/} +

+ + +

+ +

+ {/*

{dataUser?.result?.username}

*/} + {/*

Cabang {dataUser?.result?.branchNm}

*/} +

+ + +

+ } unCheckedChildren={} onChange={buttonHandler} checked={isTheme}/> +

+ +

+
+ + 20 Januari 2024 +
+
+
+
+ +
+
+
+
Aktifitas
+
update hasil aktifitas
+
+
+
+
+
+ +
+
+
+
Aktifitas
+
update hasil aktifitas
+
+
+
+
+
+ +
+
+
+
Aktifitas
+
update hasil aktifitas
+
+
+
+
+ + 19 Januari 2024 +
+
+
+
+ +
+
+
+
Aktifitas
+
update hasil aktifitas
+
+
+

+ + +

+ +

+ + ); +} + +export default React.memo(Navbar); \ No newline at end of file diff --git a/src/components/refTemplate/Form.jsx b/src/components/refTemplate/Form.jsx new file mode 100644 index 0000000..71fa480 --- /dev/null +++ b/src/components/refTemplate/Form.jsx @@ -0,0 +1,378 @@ +/* eslint-disable react/display-name */ +import {useForm} from "react-hook-form"; +import React, {forwardRef, useImperativeHandle} from "react"; +import ModalForm from "@/components/util/ModalForm"; +import modalStore from "@/store/modal"; +import {Col, Row} from "antd"; +import Input from "@/components/util/Input"; +import {Helper} from "@/lib/Helper"; +import dayjs from "dayjs"; +import {DropdownAPI} from "@/lib/DropdownAPI"; + + +const Form = forwardRef( + ({ storeData, approveRejectData, setTitle, listForm, sizeModal, dataApproval }, ref) => { + const { FormId, modalDetail, actionType } = modalStore(); + useImperativeHandle(ref, () => ({ + resetForm, + setFormValue, + })); + + const { + register, + handleSubmit, + reset, + setValue, + getValues, + control, + formState: { errors }, + } = useForm(); + + const resetForm = () => { + reset(); + }; + + const filterTypeMoney = () => { + return listForm.map((val) => { + if (val.type === "money") { + return val.name; + } + }); + }; + + const filterTypeDate = () => { + return listForm.map((val) => { + if (val.type === "date") { + return val.name; + } + }); + }; + + const filterTypeTime = () => { + return listForm.map((val) => { + if (val.type === "time") { + return val.name; + } + }); + }; + + const filterTypePercentage = () => { + return listForm.map((val) => { + if (val.type === "percentage") { + return val.name; + } + }); + }; + + const filterTypeText = () => { + return listForm.map((val) => { + if (val.type === "text") { + return val.name; + } + }); + }; + + const filterInputDisabled = () => { + return listForm.map((val) => { + if (val.onEdit === "disabled") { + return val.name; + } + }); + }; + + const filterTypeSelectChild = () => { + return listForm.map((val) => { + if (val.selectType === "child") { + return val.name; + } + }); + }; + + const setValueSelect = async (name, value) => { + if (name === "kdSubProduk") + await DropdownAPI.getListSubProduct(value); + }; + + const setFormValue = (name, value, type) => { + let listMoney = filterTypeMoney(); + // let listSelectChild = filterTypeSelectChild(); + if (listMoney.includes(name)) + return setValue(name, Helper.numFormat(value)); + // if (listSelectChild.includes(name)) return setValueSelect(name, value); + + setValue(name, value); + }; + + const onSubmit = (data, action) => { + // if (actionType == 'approval' ) return approveRejectData(data, action); + + let listMoney = filterTypeMoney(); + let listDate = filterTypeDate(); + let listTime = filterTypeTime(); + let listPercentage = filterTypePercentage(); + let listText = filterTypeText(); + let listDisabled = filterInputDisabled(); + + for (const name in data) { + if (listMoney.includes(name)) + data[name] = parseInt(Helper.numFormatClear(data[name])); + if (listDate.includes(name)) + data[name] = dayjs(data[name]).format("YYYY-MM-DD"); + if (listPercentage.includes(name)) + // data[name] = parseFloat(data[name].replace("%", "")); + data[name] = parseFloat(data[name]); + + if (listText.includes(name)) data[name] = String(data[name]); + if (listDisabled.includes(name)) delete data[name]; + } + + storeData(data); + }; + + return ( + + {modalDetail || actionType == 'history_approval' ? ( + "" + ) : + + } + + } + > +

+ { + + {listForm && + listForm.map((v, k) => { + let setReadonly = + FormId !== "new" + ? v.onEdit + ? v.onEdit == "readonly" + ? true + : false + : false + : false; + let setDisabled = + FormId !== "new" + ? v.onEdit + ? v.onEdit == "disabled" + ? true + : false + : false + : false; + + if (modalDetail || actionType == 'approval' ) { + setReadonly = true; + } + + let setRequired = v.required; + + if (v.type === "text") + return ( + + + + ); + + if (v.type === "number") + return ( + + + + ); + + if (v.type === "username") + return ( + + + + ); + if (v.type === "select") + return ( + + + + ); + + if (v.type === "money") + return ( + + + + ); + + if (v.type === "percentage") + return ( + + + + ); + + if (v.type === "textarea") + return ( + + + + ); + + if (v.type === "custom") + return ( + + + + ); + + if (v.type === "switch") + return ( + + + + ); + + if (v.type === "date") + return ( + + + + ); + + if (v.type === "time") + return ( + + + + ); + })} + + } +

+ + ); + } +); + +export default Form; diff --git a/src/components/refTemplate/LogData.jsx b/src/components/refTemplate/LogData.jsx new file mode 100644 index 0000000..ad4fe68 --- /dev/null +++ b/src/components/refTemplate/LogData.jsx @@ -0,0 +1,36 @@ +const columns = [ + { + name: "Label", + selector: row => row.label, + sortable: true, + }, + { + name: "Data Lama", + selector: row => row.old_value, + style: { + backgroundColor: '#FBE5E5', + }, + sortable: true, + }, + { + name: "Data Baru", + selector: row => row.new_value, + style: { + backgroundColor: '#E6F9ED', + }, + sortable: true, + } +] + +const conditionalRowStyles = [ + { + when: row => true, + classNames: ['row-log-data'] + }, +]; + +const LogData = () => { + +} + +export default LogData \ No newline at end of file diff --git a/src/components/refTemplate/Main.jsx b/src/components/refTemplate/Main.jsx new file mode 100644 index 0000000..5e67c18 --- /dev/null +++ b/src/components/refTemplate/Main.jsx @@ -0,0 +1,548 @@ +"use client"; +import React, {useEffect, useRef, useState} from "react"; +import breadcrumbStore from "@/store/breadcrumbStore"; +import modalStore from "@/store/modal"; +import confirmStore from "@/store/confirmStore"; +import {API} from "@/lib/API"; +import notifStore from "@/store/notifStore"; +import WrapperContent from "@/components/util/WrapperContent"; +import SearchInput from "@/components/util/SearchInput"; +import ToolBar from "@/components/refTemplate/ToolBar"; +import Form from "@/components/refTemplate/Form"; +import {Dropdown} from "antd"; +import {CheckCircleOutlined, CheckOutlined, CloseCircleOutlined, CloseOutlined, ContainerOutlined, DeleteOutlined, EditOutlined, FieldTimeOutlined, FileProtectOutlined, SendOutlined, SettingOutlined} from "@ant-design/icons"; +// import {exportExcel} from "@/lib/exportExcel"; +// import {exportDocx} from "@/lib/exportDocx"; +import DTAnt from "@/components/util/DTAnt"; +import DTAntServerSide from "@/components/util/DTAntServerSide"; + +const RefTemplate = ({ + refTitle, + refSubTitle, + refEndPointAll, + columnTableRef, + primaryKey, + listForm, + listAction, + setDependSelect, + sizeModal, + ToolFilter, + customExport, + serverSide, + typeRef + }) => { + const formRef = useRef(); + const {modalOpen, modalClose, FormId, modalStat, setModalLoading, setModalDetail, actionType} = modalStore(); + const {setSubTitle, setTitle, setShow} = breadcrumbStore(); + const {confirmOpen, confirmClose, setConfirmLoading} = confirmStore(); + const {notifOpen} = notifStore() + + const [Data, setData] = useState([]); + const [searchText, setSearchText] = useState(null); + const [tableColumn, setTableColumn] = useState(null); + const [loadingTable, setLoadingTable] = useState(true) + const [trigerGetData, setTrigerGetData] = useState(0) + const [dataApproval, setDataApproval] = useState() + + // CRUD + const deleteData = async (id) => { + confirmOpen("Hapus Data", "Yakin Hapus Data Ini", async () => { + setConfirmLoading(true); + let response = await API.DELETE(`${refEndPointAll}/${id}`); + if (response.status === 200) { + notifOpen("Berhasil", "berhasil hapus data"); + await getData(); + setConfirmLoading(false); + confirmClose(); + } else { + console.log(response); + setConfirmLoading(false); + notifOpen("Gagal", response.result.message, "danger"); + confirmClose(); + } + }); + }; + + const sendApproval = async (id) => { + confirmOpen("Kirim Pengajuan", "Kirim Pengajuan Data Ini?", async () => { + setConfirmLoading(true); + let response = await API.GET(`${refEndPointAll}/${id}/waiting-approve`); + if (response.status === 200) { + notifOpen("Berhasil", "Pengajuan berhasil dikirim"); + await getData(); + setConfirmLoading(false); + confirmClose(); + } else { + setConfirmLoading(false); + notifOpen("Gagal", response.result.message, "danger"); + confirmClose(); + } + }); + }; + + + const activeData = async (id,active) => { + + let titleActive = (active) ? 'Aktifkan' : 'Nonaktifkan'; + + confirmOpen(`${titleActive} Data`, `Yakin ${titleActive} Data Ini`, async () => { + setConfirmLoading(true); + + let response = await API.POST(`${refEndPointAll}`,{ + id : id, + isActive : !active + }) + + if (response.status === 200) { + notifOpen("Berhasil", `berhasil ${titleActive} data`); + await getData(); + setConfirmLoading(false); + confirmClose(); + } else { + setConfirmLoading(false); + notifOpen("Gagal", response.result.message, "danger"); + confirmClose(); + } + }); + }; + + const getData = async () => { + if (serverSide){ + setTrigerGetData(prev => prev+1); + }else{ + setData([]) + setLoadingTable(true) + let response = await API.GET(`${refEndPointAll}`); + console.log(response) + if (response.status !== 200){ + notifOpen("Gagal", response?.result?.message, "danger"); + } + setData(response.result); + + setLoadingTable(false) + } + }; + + const getDataById = async () => { + let url = `${refEndPointAll}/${FormId}`; + if ( actionType === 'history_approval' ) url += '/historyApproval' + let response = await API.GET(url); + + if (response.status === 500) { + modalClose(); + return notifOpen("Gagal", "Terjadi kesalahan", "danger"); + } + + let data = response.result; + + if ( actionType == 'history_approval' && data.length == 0 ) { + modalClose(); + return notifOpen("Warning", "Riwayat pengajuan belum tersedia", "warning"); + } + + if ( actionType == 'history_approval' || actionType == 'approval' ) { + setDataApproval(data) + } + + listForm.forEach((v, k) => { + let value = data[v.name] + formRef.current.setFormValue(v.name, value); + }); + + setModalLoading(false); + }; + + + + const storeData = async (formData) => { + if (FormId !== "new") formData[primaryKey] = FormId; + + setModalLoading(true); + + let response; + if (typeRef === 'KARYAWAN') { response = await API.POST_KARYAWAN(`${refEndPointAll}`, formData);} + else if (typeRef === 'SSO'){ response = await API.POST_SSO(`${refEndPointAll}`, formData);} + else{ response = await API.POST(`${refEndPointAll}`, formData);} + + if (response.status === 200) { + modalClose(); + notifOpen("Berhasil", "berhasil Simpan data"); + await getData(); + } else { + notifOpen("Gagal", response.result.message, "danger"); + } + setModalLoading(false); + }; + + const approveRejectData = async (id, action) => { + setModalLoading(true); + let title = action == 'approve' ? 'Setujui' : 'Tolak' + let userLoginId = localStorage.getItem('userId'); + + let formData = { + 'userId' : id, + 'approveId' : userLoginId, + 'status': action == 'approve' ? 1 : 2 + }; + + confirmOpen(`${title} Data`, `${title} Data Ini?`, async () => { + let response = await API.POST(`${refEndPointAll}/approve`, formData); + if (response.status === 200) { + let msg = action == 'approve' ? 'disetujui' : 'ditolak' + confirmClose(); + notifOpen("Berhasil", `Data berhasil ${msg}`); + await getData(); + } else { + let msg = response?.result?.message || 'Terjadi kesalahan' + notifOpen("Gagal", msg, "danger"); + } + setModalLoading(false); + }); + }; + + const detailData = (id) => { + modalOpen(id) + setModalDetail(true) + } + // CRUD + const handleSearch = (event) => { + + const handler = setTimeout(() => { + setSearchText(event.target.value); + }, 1000); + + // Cleanup function to clear the timeout if value or delay changes + return () => { + clearTimeout(handler); + }; + + + }; + + const filteredData = Data?.data?.filter((item) => + Object.values(item).some((value) => { + + if (searchText){ + return value?.toString().toLowerCase().includes(searchText.toLowerCase()) + }else{ + return value + } + + } + ) + ); + + + const initColumn = () => { + let column = columnTableRef; + + let action = { + render: (_, row) => { + let isWaitingApproval = row.statusApproval ? row.statusApproval == 'WAITING' : false + let items = []; + + + if (listAction.includes('detail')) { + items.push({ + key: '7', + label: ( + + ), + }) + } + + if (listAction.includes('update') && !isWaitingApproval) { + items.push({ + key: '1', + label: ( + + ), + }) + } + + if (listAction.includes('delete')) { + items.push({ + key: '2', + label: ( + + ), + }) + } + + if (listAction.includes('approval')) { + items.push({ + key: '3', + label: ( + + ), + }) + + items.push({ + key: '8', + label: ( + + ), + }) + } + + if (listAction.includes('active') && !isWaitingApproval) { + if (row.active) { + items.push({ + key: "5", + label: ( + + ), + }); + } else { + items.push({ + key: "4", + label: ( + + ), + }); + } + } + + if (listAction.includes('history_approval')) { + items.push({ + key: '6', + label: ( + + ), + }) + } + + if (listAction.includes('send_approval')) { + items.push({ + key: '7', + label: ( + + ), + }) + } + + return ( + <> + + + + + ); + }, + dataIndex: 'act', + key: 'act', + width: "40px", + }; + + column.push(action); + setTableColumn(column); + }; + const actExportExcel = () => { + if (filteredData[0]) { + let columnsExport = [] + + if (customExport) { + columnsExport = customExport + } else { + let getHead = filteredData[0]; + for (var keyHead in getHead) { + columnsExport.push( + {header: keyHead, key: keyHead} + ) + } + } + + const payload = [ + {columns: columnsExport, data: filteredData, sheetName: refSubTitle}, + ]; + exportExcel(payload, refSubTitle); + } else { + notifOpen("Data tidak tersedia", "Data di table minimal 1 baris", "warning"); + } + + } + const actExportWord = () => { + let filename = refSubTitle + let path = '/export/word/ref_template.docx'; + + let docData = { + aaa: 'tests', + bbb: 'test bb', + table: [ + { + kolom1: 'kolom A', + kolom2: 'kolom B' + }, + { + kolom1: 'kolom A', + kolom2: 'kolom B' + } + ] + } + + exportDocx({docData, path, filename}); + } + const actExportPDF = () => { + + let dataExport = [{cif: 'wawaw'}] + + const columns = [ + {header: "CIF", key: "cif"}, + {header: "CIF", key: "cif"}, + + ] + const payload = [ + {columns: columns, data: dataExport, sheetName: "Sheet 1"}, + ]; + exportExcel(payload, `Data Excel`); + } + const setActiveData = async (id, setActive) => { + let title = 'Non Aktif Data' + let message = 'Non aktifkan data ini' + let msgSuccess = 'Data berhasil dinonaktifkan' + if ( setActive ) { + title = 'Aktif Data' + message = 'Aktifkan data ini' + msgSuccess = 'Data berhasil diaktifkan' + } + + let reqBody = { + [primaryKey]: id, + "active": setActive ? true : false + } + + confirmOpen(title, message, async () => { + setConfirmLoading(true); + let response = await API.POST(`${refEndPointAll}`, reqBody); + if (response.status === 200) { + notifOpen("Berhasil", msgSuccess); + await getData(); + } else { + setConfirmLoading(false); + notifOpen("Gagal", response.result.message, "danger"); + } + setConfirmLoading(false); + confirmClose(); + }); + }; + + useEffect(() => { + setTitle(refTitle); + setSubTitle(refSubTitle); + initColumn(); + if (!serverSide){ + getData(); + } + + }, []); + + useEffect(() => { + formRef.current.resetForm(); + if (FormId === "new") setModalLoading(false); + if (FormId !== "new" && FormId != null) { + getDataById(); + } + }, [modalStat]); + + useEffect(() => { + // setShow() + // document.getElementById("nav-title").style.left = "270px"; + }, [tableColumn]); + + + return ( + <> + +

+ + +

{refTitle}

{refSubTitle}

+ +

+ + {tableColumn ? + (serverSide) ? + (): + + () + + : ( + "loading" + )} +

+ +

+ + ); +}; + +export default React.memo(RefTemplate); + + diff --git a/src/components/refTemplate/ToolBar.jsx b/src/components/refTemplate/ToolBar.jsx new file mode 100644 index 0000000..5b411bf --- /dev/null +++ b/src/components/refTemplate/ToolBar.jsx @@ -0,0 +1,66 @@ +import {FileExcelOutlined, FileOutlined, FilePdfFilled, FileWordOutlined, PlusCircleOutlined, ReloadOutlined} from '@ant-design/icons'; +import modalStore from '@/store/modal'; +import {Dropdown} from "antd"; +import React from "react"; + +export default function ToolBar({getData, listAction, actExportExcel, actExportWord, actExportPDF}) { + const {modalOpen} = modalStore(); + let items = []; + + if (listAction.includes('exportExcel')) { + items.push({ + key: '1', + label: ( + + ), + }) + } + + if (listAction.includes('exportWord')) { + items.push({ + key: '2', + label: ( + + ), + }) + } + + if (listAction.includes('exportPDF')) { + items.push({ + key: '3', + label: ( + + ), + }) + } + + return ( + <> + {/*

*/} + + + {listAction && (listAction.includes('create')) ? + : ''} + + {listAction && (listAction.includes('exportExcel') || listAction.includes('exportWord') || listAction.includes('exportPDF')) ? + + + : ''} + + + {/*

*/} + + ) +}; \ No newline at end of file diff --git a/src/components/util/BadgeStatus.jsx b/src/components/util/BadgeStatus.jsx new file mode 100644 index 0000000..f628682 --- /dev/null +++ b/src/components/util/BadgeStatus.jsx @@ -0,0 +1,11 @@ +import React from 'react' +import { Tag } from 'antd' + +const BadgeStatus = ({ active }) => { + + return ( + {active ? 'Aktif' : 'Non Aktif'} + ) +} + +export default BadgeStatus \ No newline at end of file diff --git a/src/components/util/BadgeStatusApproval.jsx b/src/components/util/BadgeStatusApproval.jsx new file mode 100644 index 0000000..5a1cf41 --- /dev/null +++ b/src/components/util/BadgeStatusApproval.jsx @@ -0,0 +1,29 @@ +import React from 'react' +import { Tag } from 'antd' + +const REF_STATUS_APPROVAL = { + 0: { + name: 'Baru', + className: 'badge-new' + }, + 1: { + name: 'Disetujui', + className: 'badge-approved' + }, + 2: { + name: 'Ditolak', + className: 'badge-rejected' + }, + 3: { + name: 'Menunggu Persetujuan', + className: 'badge-waiting-approval' + } +} + +const BadgeStatusApproval = ({ approvalId }) => { + return ( + {REF_STATUS_APPROVAL[approvalId].name} + ) +} + +export default BadgeStatusApproval \ No newline at end of file diff --git a/src/components/util/BadgeStsKelengkapanData.jsx b/src/components/util/BadgeStsKelengkapanData.jsx new file mode 100644 index 0000000..bb86ed3 --- /dev/null +++ b/src/components/util/BadgeStsKelengkapanData.jsx @@ -0,0 +1,23 @@ +import React from "react"; + +const BadgeStsKelengkapanData = ({ id, name }) => { + return id == 1 ? ( +

+ {name} +

+ ) : ( +

+ {name} +

+ ); +}; + +export default BadgeStsKelengkapanData; diff --git a/src/components/util/BadgeStsTindakLanjut.jsx b/src/components/util/BadgeStsTindakLanjut.jsx new file mode 100644 index 0000000..84b51f3 --- /dev/null +++ b/src/components/util/BadgeStsTindakLanjut.jsx @@ -0,0 +1,10 @@ +import React from 'react' + +const BadgeStsTindakLanjut = ({id, name}) => { + if (id === 1) return (

{name}

); + if (id === 2) return (

{name}

); + if (id === 3) return (

{name}

); + if (id === 4) return (

{name}

); +} + +export default BadgeStsTindakLanjut \ No newline at end of file diff --git a/src/components/util/Button.jsx b/src/components/util/Button.jsx new file mode 100644 index 0000000..332615a --- /dev/null +++ b/src/components/util/Button.jsx @@ -0,0 +1,15 @@ +import {Spin} from 'antd'; + +export default function Button({title,loading}) { + return( + <> +

+ + + + +

+ + ) +} \ No newline at end of file diff --git a/src/components/util/CheckAuth.jsx b/src/components/util/CheckAuth.jsx new file mode 100644 index 0000000..a927339 --- /dev/null +++ b/src/components/util/CheckAuth.jsx @@ -0,0 +1,18 @@ +import {LoadingOutlined} from "@ant-design/icons"; + +export default function CheckAuth() { + return ( +

SAM - System Activity Monitoring

Bank Kalteng

check authorization

+ +

+ ) +} \ No newline at end of file diff --git a/src/components/util/DTAnt.jsx b/src/components/util/DTAnt.jsx new file mode 100644 index 0000000..2700fe6 --- /dev/null +++ b/src/components/util/DTAnt.jsx @@ -0,0 +1,37 @@ +import React, {useEffect, useState} from "react"; +import {Table} from "antd"; + +import LoadingTable from "@/components/util/LoadingTable"; + +function DTAnt({ columnTable, data, loadingTable, size, pageSize, rowKey, totalRow }) { + const [columns, setColumns] = useState([]); + + useEffect(() => { + setColumns(columnTable); + }, []); + + return ( + <> + , + }} + locale={{ emptyText: (loadingTable) ? '-' : null }} + columns={columns} + dataSource={data} + rowKey={rowKey} + size={(size) ? size : 'medium'} + pagination={{ + defaultPageSize: (pageSize) ? pageSize : 10, + pageSizeOptions: ['5', '10', '20', '30', '40'], + showSizeChanger: true, + showTotal: (total, range) => `${range[0]}-${range[1]} dari ${total} Data` + }} /> + + ) + +} + + +export default React.memo(DTAnt); \ No newline at end of file diff --git a/src/components/util/DTAntServerSide.jsx b/src/components/util/DTAntServerSide.jsx new file mode 100644 index 0000000..68ffdc5 --- /dev/null +++ b/src/components/util/DTAntServerSide.jsx @@ -0,0 +1,196 @@ +import React, {useEffect, useState} from "react"; +import {Table} from "antd"; +import {API} from "@/lib/API"; +import {v4 as uuidv4} from 'uuid'; +import selectedTableStore from "@/store/selectedTableStore"; + + +// README +// untuk menggunakan isSelected, harus ditambahkan juga keyTable + +function DTAntServerSide({columnTable, size,keyTable,endPoint,searchText,triger,filter,noLoadingTable,isSelected}) { + + console.log(filter) + + const {setDataSelect} = selectedTableStore() + + const [columns, setColumns] = useState([]); + const [Data, setData] = useState([]) + const [loading, setLoading] = useState(false) + const [pageSize, setPageSize] = useState(10) + const [currentPage, setCurrentPage] = useState(1) + const [selectedRowKeys, setSelectedRowKeys] = useState([]); + const [tableParams, setTableParams] = useState({ + pagination: { + current: 1, + pageSize: (pageSize) ? pageSize : 10, + pageSizeOptions: ['5', '10', '20', '30', '50'], + showSizeChanger: true, + total: 0 + }, + }); + + const getData = async (page,search,size) => { + if (!noLoadingTable){ + setLoading(true) + } + + let setSize = (size) ? size : pageSize + let setSearch = (search) ? `&search=${search}` :'' + let setFilter = (filter) ? '&'+ new URLSearchParams(filter).toString() : ''; + + let response = await API.GET(endPoint+`?page=${page-1}&size=${setSize}${setSearch}${setFilter}`); + console.log({response}) + + setData(response.result); + setLoading(false) + + setTableParams({ + ...tableParams, + pagination: { + ...tableParams.pagination, + current: page, + total: response.result.totalElements, + }, + }); + } + + const handleTableChange = (pagination, filters, sorter) => { + console.log({pagination, filters, sorter}) + setTableParams({ + pagination, + filters, + ...sorter, + }); + + setPageSize(pagination.pageSize) + setCurrentPage(pagination.current) + getData(pagination.current,'',pagination.pageSize) + }; + + // useEffect(() => { + // console.log(pageSize) + // getData(1) + // }, [pageSize]); + + useEffect(() => { + setColumns(columnTable); + // getData(1) + }, []); + + useEffect(() => { + setColumns(columnTable); + }, [columnTable]); + + useEffect(() => { + if (searchText !== null){ + setTableParams(prev => ({...prev,pagination:{ + current: 1 + } })) + getData(1,searchText) + } + }, [searchText]); + + // useEffect(() => { + // setTableParams({ + // ...tableParams, + // pagination: { + // ...tableParams.pagination, + // total: Data.totalElements, + // }, + // }); + // }, [Data]); + + useEffect(() => { + setTableParams(prev => ({...prev,pagination:{ + current: 1 + } })) + getData(1) + }, [triger]); + + useEffect(() => { + getData(1) + }, [filter]) + + + const onSelectChange = (selectedRow) => { + setSelectedRowKeys(selectedRow); + setDataSelect(selectedRow) + }; + + + const dataDummy = [ + { + key: '1', + status:1, + roleNm: 'John Brown', + age: 32, + nmBranch: 'New York No. 1 Lake Park', + }, + { + key: '2', + status:2, + roleNm: 'Jim Green', + age: 42, + nmBranch: 'London No. 1 Lake Park', + }, + { + key: '3', + status:3, + roleNm: 'Joe Black', + age: 32, + nmBranch: 'Sydney No. 1 Lake Park', + }, + { + key: '4', + status:4, + roleNm: 'Disabled User', + age: 99, + nmBranch: 'Sydney No. 1 Lake Park', + }, + { + key: '5', + status:5, + roleNm: 'Disabled User', + age: 99, + nmBranch: 'Sydney No. 1 Lake Park', + }, + { + key: '6', + status:6, + roleNm: 'Disabled User', + age: 99, + nmBranch: 'Sydney No. 1 Lake Park', + }, + ]; + + return ( + <> +

(keyTable) ? record[keyTable]:uuidv4()} + size={(size) ? size : 'medium'} + // locale={{emptyText: (loading) ? '-' : null}} + dataSource={Data?.data} + // dataSource={dataDummy} + pagination={{...tableParams.pagination, showTotal: (total, range) => `${range[0]}-${range[1]} dari ${total} Data`}} + loading={{ + spinning: loading, + // indicator: , + }} + onChange={handleTableChange} + /> + + + + + ) + +} + + +export default React.memo(DTAntServerSide); \ No newline at end of file diff --git a/src/components/util/DTCheckboxStyle.jsx b/src/components/util/DTCheckboxStyle.jsx new file mode 100644 index 0000000..b2aecc9 --- /dev/null +++ b/src/components/util/DTCheckboxStyle.jsx @@ -0,0 +1,17 @@ +/* eslint-disable react/display-name */ +import React, {forwardRef} from 'react'; + + +const DTCheckboxStyle = forwardRef(({onClick, ...rest}, ref) => { + return( +

+ + +

+ ) +}); + + +export default DTCheckboxStyle; \ No newline at end of file diff --git a/src/components/util/FormInput.jsx b/src/components/util/FormInput.jsx new file mode 100644 index 0000000..d9be67f --- /dev/null +++ b/src/components/util/FormInput.jsx @@ -0,0 +1,32 @@ +import { Col } from "antd"; +import React from "react"; +import Input from "@/components/util/Input"; + +const FormInput = ({form, validation}) => { + const { register, setValue, errors, getValues } = validation + const RefInput = Input[form.type]; + const placeholder = form.type == "select" ? `Daftar ${form.alias}` : undefined; + + return ( + + + + ); +}; + +export default FormInput; diff --git a/src/components/util/IconSVG.jsx b/src/components/util/IconSVG.jsx new file mode 100644 index 0000000..a74dab6 --- /dev/null +++ b/src/components/util/IconSVG.jsx @@ -0,0 +1,110 @@ +const IconTabungan = () => { + return ( + + ) +} + +const CloseIcon = () => { + return ( + + ) +} + +const CheckedIcon = () => { + return ( + + ) +} + +const IconFasilitas = () => { + return ( + + ); +} + +const IconKredit = () => { + return ( + + ) +} + +const IconDeposito = () => { + return ( + + ) +} + +export const IconSVG = { + IconTabungan, + IconFasilitas, + IconKredit, + IconDeposito, + CloseIcon, + CheckedIcon, +} \ No newline at end of file diff --git a/src/components/util/Input/InputAutoComplete.jsx b/src/components/util/Input/InputAutoComplete.jsx new file mode 100644 index 0000000..fc92e75 --- /dev/null +++ b/src/components/util/Input/InputAutoComplete.jsx @@ -0,0 +1,62 @@ +import {AutoComplete} from 'antd'; + +const InputAutoComplete = ({ + title, + name, + register, + error, + placeholder, + required, + options, + setValue, + setReadonly, + setDisabled, + val, + onSearch, + getDataOnChange, + notFoundContent = false +}) => { + + let setRequired = (required) ? { required: `Data ${title} Harus di Isi` } : {} + let validateList = { ...setRequired }; + + const onChange = (value) => { + let arrFilter = options.find(item => item.value === value); + setValue(name, arrFilter, { shouldValidate: true }) + } + + const filterOption = (input, option) => + (option?.label ?? '').toLowerCase().includes(input.toLowerCase()); + + return ( + <> +

+ + + {title} + + {error[name] &&

{error[name]?.message}

} +

+ + ); +}; + +export default InputAutoComplete; diff --git a/src/components/util/Input/InputCustom.jsx b/src/components/util/Input/InputCustom.jsx new file mode 100644 index 0000000..b9d6794 --- /dev/null +++ b/src/components/util/Input/InputCustom.jsx @@ -0,0 +1,58 @@ +const InputCustom = ({ + title, + name, + register, + error, + placeholder, + maxlength, + required, + setReadonly, + ...props +}) => { + let setRequired = required + ? { required: `Data ${title} Harus di Isi` } + : {}; + let setMaxLength = maxlength + ? { + maxLength: { + value: maxlength, + message: `Maksimal ${maxlength} Karakter`, + }, + } + : {}; + + let validateList = { ...setRequired, ...setMaxLength }; + + + + return ( + <> +

+ + + {title} + + {error[name] && ( +

{error[name]?.message}

+ )} +

+ + ); +}; + +export default InputCustom; diff --git a/src/components/util/Input/InputDate.jsx b/src/components/util/Input/InputDate.jsx new file mode 100644 index 0000000..4c80fe1 --- /dev/null +++ b/src/components/util/Input/InputDate.jsx @@ -0,0 +1,72 @@ +import {Helper} from "@/lib/Helper"; +import {DatePicker} from "antd"; +import dayjs from "dayjs"; + +const InputDate = ({ + title, + name, + register, + error, + placeholder, + maxlength, + required, + setValue, + value, + minDate, + setReadonly, + maxDate, + picker = "default", + format = 'DD MMM YYYY', +}) => { + let setRequired = required + ? { required: `Data ${title} Harus di Isi` } + : {}; + let setMaxLength = maxlength + ? { + maxLength: { + value: maxlength, + message: `Maksimal ${maxlength} Karakter`, + }, + } + : {}; + + let validateList = { ...setRequired, ...setMaxLength }; + + const onChange = (_, dateString) => { + setValue(name, dayjs(dateString, 'DD MMM YYYY'), { shouldValidate: true }); + }; + + const newFormat = Helper.setFormatInputDate(picker, format); + + return ( +

+ + + {" "} + {title}{" "}{(required) ? *:''} + + {error[name] && ( +

{error[name]?.message}

+ )} +

+ ); +}; + +export default InputDate; diff --git a/src/components/util/Input/InputDateHeader.jsx b/src/components/util/Input/InputDateHeader.jsx new file mode 100644 index 0000000..184c02f --- /dev/null +++ b/src/components/util/Input/InputDateHeader.jsx @@ -0,0 +1,95 @@ +import {Helper} from "@/lib/Helper"; +import {DatePicker} from "antd"; +import dayjs from "dayjs"; + +const InputDateHeader = ({ + title, + name, + register, + error, + placeholder, + maxlength, + required, + setReadonly, + setDisabled, + picker = "default", + setValue, + value, + noValidate, + format = 'DD MMM YYYY', +}) => { + let setRequired = required + ? { required: `Data ${title} Harus di Isi` } + : {}; + let setMaxLength = maxlength + ? { + maxLength: { + value: maxlength, + message: `Maksimal ${maxlength} Karakter`, + }, + } + : {}; + + let validateList = { ...setRequired, ...setMaxLength }; + + const onChange = (_, dateString) => { + setValue(name, dayjs(dateString, 'DD MMM YYYY'), { shouldValidate: true }); + }; + + const newFormat = Helper.setFormatInputDate(picker, format); + + + return ( + + (noValidate) ? +

+ + + {" "} + {title}{" "} + +

+ : + +

+ + + {" "} + {title}{" "} + + {error[name] && ( +

{error[name]?.message}

+ )} +

+ ); +}; + +export default InputDateHeader; diff --git a/src/components/util/Input/InputDateRange.jsx b/src/components/util/Input/InputDateRange.jsx new file mode 100644 index 0000000..344b9ee --- /dev/null +++ b/src/components/util/Input/InputDateRange.jsx @@ -0,0 +1,66 @@ +import {Helper} from "@/lib/Helper"; +import {DatePicker, Space} from 'antd'; +import dayjs from 'dayjs'; + +const { RangePicker } = DatePicker; + +const rangePresets = [ + { label: 'Seminggu terakhir', value: [dayjs().add(-7, 'd'), dayjs()] }, + { label: 'Bulan ini', value: [dayjs().startOf("month") , dayjs().endOf("month")] }, + { label: 'Bulan lalu', value: [dayjs().startOf("month").month(dayjs().month() - 1), dayjs().endOf("month").month(dayjs().month() - 1)] }, + {label: 'Tahun ini', value: [dayjs().startOf("year"), dayjs().endOf("year")]}, + {label: 'Tahun lalu', value: [dayjs().startOf('year').year(dayjs().year() - 1), dayjs().endOf('year').year(dayjs().year() - 1)]}, +]; + +const InputDateRange = ({ + title, + name, + register, + error, + placeholder, + maxlength, + required, + setValue, + format = 'DD MMM YYYY', + picker = 'default', + }) => { + let setRequired = (required) ? { required: `Data ${title} Harus di Isi` } : {} + let setMaxLength = (maxlength) ? { maxLength: { value: maxlength, message: `Maksimal ${maxlength} Karakter` } } : {} + + let validateList = {...setRequired,...setMaxLength} + + const onChange = (_, dateString) => { + setValue(name, { + startDate: dateString[0], + endDate: dateString[1] + }, { shouldValidate: true }) + }; + + const newFormat = Helper.setFormatInputDate(picker, format) + + return ( +

+ + {title} + + + {error[name] &&

{error[name]?.message}

} +

+ ); + }; + + export default InputDateRange; + \ No newline at end of file diff --git a/src/components/util/Input/InputEmail.jsx b/src/components/util/Input/InputEmail.jsx new file mode 100644 index 0000000..bc0ca14 --- /dev/null +++ b/src/components/util/Input/InputEmail.jsx @@ -0,0 +1,50 @@ +const InputEmail = ({ + title, + name, + register, + error, + placeholder, + maxlength, + required, + }) => { + let setRequired = (required) ? {required: "Data must be filled in"} : {} + let setMaxLength = (maxlength) ? {maxLength: {value: maxlength, message: `Maksimal ${maxlength} Karakter`}} : {} + let setEmail = { + pattern: { + value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, + message: 'Format E-Mail Salah', + } + } + + let validateList = {...setRequired, ...setMaxLength, ...setEmail} + + const handleInput = (e) => { + e.target.value = e.target.value.replace(/[^a-zA-Z0-9_!@#$-%+.=&]/g, ""); + }; + return ( + <> +

+ + + {title} + + {error[name] &&

{error[name]?.message}

} +

+ +

+ + ); +}; + +export default InputEmail; + \ No newline at end of file diff --git a/src/components/util/Input/InputHidden.jsx b/src/components/util/Input/InputHidden.jsx new file mode 100644 index 0000000..454ca77 --- /dev/null +++ b/src/components/util/Input/InputHidden.jsx @@ -0,0 +1,37 @@ +const InputHidden = ({ + title, + name, + register, + error, + placeholder, + maxlength, + required, + setReadonly +}) => { + let setRequired = (required) ? { required: `Data ${title} Harus di Isi` } : {} + let setMaxLength = (maxlength) ? { maxLength: { value: maxlength, message: `Maksimal ${maxlength} Karakter` } } : {} + + let validateList = { ...setRequired, ...setMaxLength } + + return ( + <> +

+ + {error[name] &&

{error[name]?.message}

} +

+ +

+ + ); +}; + +export default InputHidden; diff --git a/src/components/util/Input/InputImage.jsx b/src/components/util/Input/InputImage.jsx new file mode 100644 index 0000000..eadca09 --- /dev/null +++ b/src/components/util/Input/InputImage.jsx @@ -0,0 +1,63 @@ +"use client" +import {useEffect} from "react"; + +const InputImage = ({ + title, + name, + register, + error, + placeholder, + maxlength, + required, +}) => { + let setRequired = (required) ? { required: "Data must be filled in" } : {} + let setMaxLength = (maxlength) ? { maxLength: { value: maxlength, message: `Maksimal ${maxlength} Karakter` } } : {} + + let validateList = {...setRequired,...setMaxLength} + + useEffect(() => { + // $('#changeImage_'+name).hide(); + // $('#imageInput_'+name).on('change', function() { + // let inputImg = $(this); + // if(inputImg.val().length > 0) { + // let fileReader = new FileReader(); + // fileReader.onload = function (data) { + // $("#imagePreview_"+name).attr('src', data.target.result); + // } + // fileReader.readAsDataURL(inputImg.prop('files')[0]); + // $("#imagePreview_"+name).css('display', 'block'); + // $('#changeImage_'+name).css('display', 'block'); + + // } + // }); + + // $('#changeImage_'+name).on('click', function() { + // let $control = $(this); + // $control.css('display', 'none'); + // $('#imageInput_'+name).val(''); + // let $preview = $("#imagePreview_"+name); + // $preview.attr('src', '/img/no-image.jpg'); + // }); + }, []) + + + return ( + <> +

{title}

Image Format PNG,JPG,JPEG Max 500 Kb. Recommendation resolution is 800 x 800

+ + +

+ +

+ + + ); +}; + +export default InputImage; diff --git a/src/components/util/Input/InputLatLng.jsx b/src/components/util/Input/InputLatLng.jsx new file mode 100644 index 0000000..a6fdb3e --- /dev/null +++ b/src/components/util/Input/InputLatLng.jsx @@ -0,0 +1,56 @@ +import {useEffect, useState} from 'react'; +import {MapContainer, Marker, Popup, TileLayer, useMapEvents} from 'react-leaflet'; + +const InputLatLng = ({ setValue, latlon }) => { + + function LocationMarker() { + const [position, setPosition] = useState(null) + const [lon, setLon] = useState(); + const [lat, setLat] = useState(); + + const map = useMapEvents({ + click(e) { + map.locate(); + setPosition(e.latlng); + map.flyTo(e.latlng, map.getZoom()); + + setLon(e.latlng.lng); + setLat(e.latlng.lat); + setValue('lat', e.latlng.lat); + setValue('lon', e.latlng.lng); + }, + }) + + useEffect(() => { + setPosition(latlon); + }, []); + + return position === null ? null : ( + + + Latitude : {lat} +

Longitude : {lon} + + + ) + } + + return ( +

+ + + + +

+ ); +}; + +export default InputLatLng; diff --git a/src/components/util/Input/InputMoney.jsx b/src/components/util/Input/InputMoney.jsx new file mode 100644 index 0000000..16f70bd --- /dev/null +++ b/src/components/util/Input/InputMoney.jsx @@ -0,0 +1,99 @@ +const InputMoney = ({ + title, + name, + register, + error, + placeholder, + maxlength, + required, + setReadonly, + satuanInput, + allowDecimal + }) => { + + let setRequired = (required) ? {required: `Data ${title} Harus di Isi`} : {} + let setMaxLength = (maxlength) ? {maxLength: {value: maxlength, message: `Maksimal ${maxlength} Karakter`}} : {} + + let validateList = {...setRequired, ...setMaxLength} + + const handleInput = (e) => { + // e.target.value = e.target.value.replace(/[^0-9]/g, ''); + var separator = "."; + var a = e.target.value; + var b = a.replace(/[^\d]/g, ""); + var c = ""; + var panjang = b.length; + var j = 0; + for (var i = panjang; i > 0; i--) { + j = j + 1; + if (((j % 3) == 1) && (j != 1)) { + c = b.substr(i - 1, 1) + separator + c; + } else { + c = b.substr(i - 1, 1) + c; + } + } + e.target.value = c + }; + + const handleInputDecimal = (event) => { + const inputField = event.target; + let value = inputField.value; + + // Remove any characters that are not digits or the comma + value = value.replace(/[^\d,]/g, ''); + + // Ensure there is only one comma + const commaIndex = value.indexOf(','); + if (commaIndex !== -1) { + const beforeComma = value.slice(0, commaIndex); + const afterComma = value.slice(commaIndex + 1).replace(/,/g, ''); // Remove any additional commas + value = beforeComma + ',' + afterComma; + } + + // Format the integer part with thousand separators + const parts = value.split(','); + parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.'); + + // Limit to two decimal places + if (parts.length > 1) { + parts[1] = parts[1].slice(0, 2); + } + + // Join the parts back together + value = parts.join(','); + + + event.target.value = value + } + + let setStyle = (satuanInput) ? {textAlign:'right',paddingRight:'40px'} :{} + return ( + <> +

+ {(satuanInput) ?

{satuanInput}

:''} + + + {title} {(required) ? *:''} + + {error[name] &&

{error[name]?.message}

} +

+ +

+ + ); +}; + +export default InputMoney; + \ No newline at end of file diff --git a/src/components/util/Input/InputNumber.jsx b/src/components/util/Input/InputNumber.jsx new file mode 100644 index 0000000..96bed52 --- /dev/null +++ b/src/components/util/Input/InputNumber.jsx @@ -0,0 +1,56 @@ +const InputNumber = ({ + title, + name, + register, + error, + placeholder, + maxlength, + minlength, + required, + setReadonly, + satuanInput, + maxNominal, + minNominal + }) => { + + let setRequired = (required) ? {required: `Data ${title} Harus di Isi`} : {} + let setMaxLength = (maxlength) ? {maxLength: {value: maxlength, message: `Maksimal ${maxlength} Karakter`}} : {} + let setMinLength = (minlength) ? {maxLength: {value: minlength, message: `Minimal ${minlength} Karakter`}} : {} + let setMaxNominal = (maxNominal) ? {max: {value: maxNominal, message: `Maksimal ${maxNominal} ${satuanInput ?? ''}`}} : {} + let setMinNominal = (minNominal) ? {min: {value: minNominal, message: `Minimal ${minNominal} ${satuanInput ?? ''}`}} : {} + + let validateList = {...setRequired, ...setMaxLength, ...setMaxNominal,...setMinNominal} + + const handleInput = (e) => { + e.target.value = e.target.value.replace(/[^0-9]/g, ''); + }; + return ( + <> +

+ {(satuanInput) ?

{satuanInput}

:''} + + + {title} {(required) ? *:''} + + {error[name] &&

{error[name]?.message}

} +

+ +

+ + ); +}; + +export default InputNumber; + \ No newline at end of file diff --git a/src/components/util/Input/InputPassword.jsx b/src/components/util/Input/InputPassword.jsx new file mode 100644 index 0000000..7efa987 --- /dev/null +++ b/src/components/util/Input/InputPassword.jsx @@ -0,0 +1,61 @@ +"use client" +import {useRef, useState} from "react"; +import {EyeFilled, EyeInvisibleFilled} from '@ant-design/icons'; + +const InputPassword = ({ + title, + name, + register, + error, + placeholder, + maxlength, + required, + }) => { + + + const [showPassword, setShowPassword] = useState(false); + const inputRef = useRef(null); + + let setRequired = (required) ? {required: `${title} Harus di Isi`} : {} + let setMaxLength = (maxlength) ? {maxLength: {value: maxlength, message: `Maksimal ${maxlength} Karakter`}} : {} + let validateList = {...setRequired, ...setMaxLength} + + const handleInput = (e) => { + e.target.value = e.target.value.replace(/[^a-zA-Z0-9_!@#$-%+=&]/g, ""); + }; + const togglePassword = () => { + setShowPassword(prevState => !prevState); + }; + + + return ( + <> +

+ +

+ {showPassword ? : } +

+ + {title} + + {error[name] &&

{error[name]?.message}

} +

+ +

+ + ); +}; + +export default InputPassword; + \ No newline at end of file diff --git a/src/components/util/Input/InputPercentage.jsx b/src/components/util/Input/InputPercentage.jsx new file mode 100644 index 0000000..a771243 --- /dev/null +++ b/src/components/util/Input/InputPercentage.jsx @@ -0,0 +1,81 @@ +import {InputNumber} from 'antd' +import { useEffect, useState } from 'react'; +import { Controller } from 'react-hook-form'; + +const InputPercentage = ({ + title, + name, + register, + error, + placeholder, + maxlength, + required, + setReadonly, + setValue, + val, + control +}) => { + let setRequired = required + ? { required: `Data ${title} Harus di Isi` } + : {}; + let setMaxLength = maxlength + ? { + maxLength: { + value: maxlength, + message: `Maksimal ${maxlength} Karakter`, + }, + } + : {}; + + let validateList = { ...setRequired, ...setMaxLength }; + + + + + + + return ( + <> +

+ ( + value ? `${value}` : ''} + parser={(value) => value.replace('%', '')} + readOnly={setReadonly} + className="form-control borderInput floating-input" + name={name} + maxLength={maxlength ? maxlength : 250} + placeholder={placeholder ? placeholder : `.`} + onChange={(value) => field.onChange(value)} + {...register(name, validateList)} + {...field} + // onChange={onChange} + // defaultValue={valueInput} + /> + )} + /> + + + {title} + + {error[name] && ( +

{error[name]?.message}

+ )} +

+ + ); +}; + +export default InputPercentage; diff --git a/src/components/util/Input/InputSelect.jsx b/src/components/util/Input/InputSelect.jsx new file mode 100644 index 0000000..636cff7 --- /dev/null +++ b/src/components/util/Input/InputSelect.jsx @@ -0,0 +1,66 @@ +import {Select} from 'antd'; + +const InputSelect = ({ + title, + name, + register, + error, + placeholder, + required, + options, + setValue, + setReadonly, + setDisabled, + val, + loading, + withSearch = true, + getDataOnChange + }) => { + let setRequired = (required) ? {required: `Data ${title} Harus di Isi`} : {} + let validateList = {...setRequired}; + + const handleChange = (value) => { + setValue(name, value, {shouldValidate: true}) + if (getDataOnChange) getDataOnChange(value, setValue) + }; + // const onSearch = (value) => { + // console.log('search:', value); + // }; + + const filterOption = (input, option) => + (option?.label ?? '').toLowerCase().includes(input.toLowerCase()); + + + return ( + <> +

+ + + {title} + + {error[name] &&

{error[name]?.message}

} +

+ + ); +}; + +export default InputSelectHeader; diff --git a/src/components/util/Input/InputSwitch.jsx b/src/components/util/Input/InputSwitch.jsx new file mode 100644 index 0000000..89c8cde --- /dev/null +++ b/src/components/util/Input/InputSwitch.jsx @@ -0,0 +1,76 @@ +import {Switch} from 'antd' +import { useEffect, useState } from 'react'; + +const InputSwitch = ({ + title, + name, + register, + setValue, + setReadonly, + value +}) => { + + console.log({name, value}) + + const onChange = (checked) => { + setValue(name, checked ? true : false) + setChecked(checked) + }; + + const [checked, setChecked] = useState(value) + + useEffect(() => { + setChecked(value) + }, [value]) + + + + return ( + <> + { + setReadonly ? + ( +

+ + + {title} + +

+ ) + : + ( +

{title}

+ + +

+ ) + } + + + ); +}; + +export default InputSwitch; diff --git a/src/components/util/Input/InputText.jsx b/src/components/util/Input/InputText.jsx new file mode 100644 index 0000000..ca09827 --- /dev/null +++ b/src/components/util/Input/InputText.jsx @@ -0,0 +1,41 @@ +const InputText = ({ + title, + name, + register, + error, + placeholder, + maxlength, + required, + setReadonly + }) => { + let setRequired = (required) ? {required: `Data ${title} Harus di Isi`} : {} + let setMaxLength = (maxlength) ? {maxLength: {value: maxlength, message: `Maksimal ${maxlength} Karakter`}} : {} + + let validateList = {...setRequired, ...setMaxLength} + + return ( + <> +

+ + + {title} {(required) ? *:''} + + {error[name] &&

{error[name]?.message}

} +

+ +

+ + ); +}; + +export default InputText; diff --git a/src/components/util/Input/InputTextTask.jsx b/src/components/util/Input/InputTextTask.jsx new file mode 100644 index 0000000..3476ae1 --- /dev/null +++ b/src/components/util/Input/InputTextTask.jsx @@ -0,0 +1,70 @@ +"use client"; + +const InputTextTask = ({ + title, + name, + register, + error, + placeholder, + maxlength, + required, + submitOnEnter +}) => { + let setRequired = required ? { required: "Data must be filled in" } : {}; + let setMaxLength = maxlength + ? { + maxLength: { + value: maxlength, + message: `Maksimal ${maxlength} Karakter`, + }, + } + : {}; + + let validateList = { ...setRequired, ...setMaxLength }; + + function autoResize() { + const textarea = document.getElementById(name); + textarea.style.height = 'auto'; // Reset the height to auto to recalculate the actual height + textarea.style.height = (textarea.scrollHeight) + 'px'; // Set the height to the scrollHeight + } + + + const handleKeyDown = (event) => { + if (event.key === 'Enter') { + // 👇 Get input value + event.preventDefault(); + submitOnEnter() + } + }; + + + return ( + <> +

+ + + + + {error[name] && ( +

{error[name]?.message}

+ )} +

+ + ); +}; + +export default InputTextTask; diff --git a/src/components/util/Input/InputTextarea.jsx b/src/components/util/Input/InputTextarea.jsx new file mode 100644 index 0000000..fab150f --- /dev/null +++ b/src/components/util/Input/InputTextarea.jsx @@ -0,0 +1,38 @@ +const InputTextarea = ({ + title, + name, + register, + error, + maxlength, + required, + setReadonly, + className, + ...props + }) => { + let setRequired = (required) ? {required: ` ${title} Harus di Isi`} : {} + let setMaxLength = (maxlength) ? {maxLength: {value: maxlength, message: `Maksimal ${maxlength} Karakter`}} : {} + + let validateList = {...setRequired, ...setMaxLength} + + return ( + <> +

+
+

+ + + {title} {(required) ? *:''} + + {error[name] &&

{error[name]?.message}

} +

+ +

+ + ); +}; + +export default InputTextarea; diff --git a/src/components/util/Input/InputTime.jsx b/src/components/util/Input/InputTime.jsx new file mode 100644 index 0000000..e7c9ab1 --- /dev/null +++ b/src/components/util/Input/InputTime.jsx @@ -0,0 +1,46 @@ +import {TimePicker} from "antd"; + +const InputTime = ({ + title, + name, + register, + error, + placeholder, + maxlength, + required, + setReadonly, + setValue +}) => { + let setRequired = (required) ? { required: `Data ${title} Harus di Isi` } : {} + let setMaxLength = (maxlength) ? { maxLength: { value: maxlength, message: `Maksimal ${maxlength} Karakter` } } : {} + + let validateList = { ...setRequired, ...setMaxLength } + const format = 'HH:mm'; + + const onChange = (_, dateString) => { + setValue(name, dateString, { shouldValidate: true }); + }; + + return ( +

+ + + {title} + + {error[name] &&

{error[name]?.message}

} +

+ ); +}; + +export default InputTime; diff --git a/src/components/util/Input/InputUploadImage.jsx b/src/components/util/Input/InputUploadImage.jsx new file mode 100644 index 0000000..a3921a4 --- /dev/null +++ b/src/components/util/Input/InputUploadImage.jsx @@ -0,0 +1,146 @@ +import React, {useState} from "react"; +import {CloseOutlined, EditOutlined, LoadingOutlined,} from "@ant-design/icons"; +import {Button, Upload} from "antd"; +import ExportedImage from "next-image-export-optimizer"; + +const getBase64 = (img, callback) => { + const reader = new FileReader(); + reader.addEventListener("load", () => callback(reader.result)); + reader.readAsDataURL(img); +}; + +const InputUploadImage = ({ + title, + name, + register, + error, + required, + maxSize = 2, + setError, + setValue, + extensions = ["png", "jpg", "jpeg"], + }) => { + const [loading, setLoading] = useState(false); + const [imageUrl, setImageUrl] = useState(); + + let setRequired = required ? {required: `Upload file ${title}`} : {}; + let validateList = {...setRequired}; + + const handleChange = (info) => { + if (info.file.status === "uploading") { + setLoading(true); + return; + } + if (info.file.status === "done") { + getBase64(info.file.originFileObj, (url) => { + setLoading(false); + setImageUrl(url); + setValue(name, info.file, {shouldValidate: true}); + }); + } + }; + + const beforeUpload = (file) => { + const extFileUploaded = file.type.split("/")[1].toLowerCase(); + const isExtValid = extensions.includes(extFileUploaded); + if (!extensions.includes(extFileUploaded)) + setError(name, { + type: "custom", + message: "File yang diupload harus " + extensions.join(", "), + }); + + const isSizeFileValid = file.size / 1024 / 1024 < maxSize; + if (!isSizeFileValid) + setError(name, { + type: "custom", + message: `Maksimal gambar yang diupload ${maxSize} MB`, + }); + return isExtValid && isSizeFileValid; + }; + + const clearImage = () => { + setImageUrl(null); + setValue(name, null, {shouldValidate: true}); + }; + + return ( +

+ + {" "} + {title}{" "} + +

+ +

+ {error[name] && ( +

{error[name]?.message}

+ )} +

+ ); +}; + +export default InputUploadImage; diff --git a/src/components/util/Input/InputUsername.jsx b/src/components/util/Input/InputUsername.jsx new file mode 100644 index 0000000..b4d3086 --- /dev/null +++ b/src/components/util/Input/InputUsername.jsx @@ -0,0 +1,49 @@ +const InputUsername = ({ + title, + name, + register, + error, + placeholder, + maxlength, + minlength, + required, + setReadonly + }) => { + let setRequired = (required) ? {required: `${title} Harus di Isi`} : {} + let setMaxLength = (maxlength) ? {maxLength: {value: maxlength, message: `Maksimal ${maxlength} Karakter`}} : {} + let setMinLength = (minlength) ? {minLength: {value: minlength, message: `Minimal ${minlength} Karakter`}} : {} + + let validateList = {...setRequired, ...setMaxLength, ...setMinLength} + + const handleInput = (e) => { + e.target.value = e.target.value.replace(/[^a-zA-Z0-9_!@#$-%+=&]/g, ""); + }; + return ( + <> +

+ + + {title} + + {error[name] &&

{error[name]?.message}

} +

+ +

+ + ); +}; + +export default InputUsername; + \ No newline at end of file diff --git a/src/components/util/Input/index.jsx b/src/components/util/Input/index.jsx new file mode 100644 index 0000000..f8856f0 --- /dev/null +++ b/src/components/util/Input/index.jsx @@ -0,0 +1,56 @@ +import InputEmail from "./InputEmail"; +import InputImage from './InputImage'; +import InputNumber from './InputNumber'; +import InputPassword from "./InputPassword"; +import InputSelect from './InputSelect'; +import InputText from "./InputText"; +import InputTextTask from './InputTextTask'; +import InputTextarea from "./InputTextarea"; +import InputUsername from "./InputUsername"; +import InputDate from './InputDate'; +import InputDateRange from './InputDateRange'; +import InputUploadImage from "./InputUploadImage"; +import InputMoney from "@/components/util/Input/InputMoney"; +import InputCustom from "./InputCustom"; +import InputPercentage from "./InputPercentage"; +import InputSwitch from "./InputSwitch"; + +const Input = { + Text: InputText, + Number: InputNumber, + Money: InputMoney, + Select: InputSelect, + Username: InputUsername, + Email: InputEmail, + Password: InputPassword, + Textarea: InputTextarea, + Image: InputImage, + DateRange: InputDateRange, + TextTask: InputTextTask, + Date: InputDate, + UploadImage: InputUploadImage, + Custom: InputCustom, + Percentage: InputPercentage, + Switch: InputSwitch +} + +export const REF_INPUT_NAME = { + TEXT: 'Text', + NUMBER: 'Number', + MONEY: 'Money', + SELECT: 'Select', + USERNAME: 'Username', + EMAIL: 'Email', + PASSWORD: 'Password', + TEXTAREA: 'Textarea', + IMAGE: 'Image', + DATERANGE: 'DateRange', + TEXT_TASK: 'TextTask', + DATE: 'Date', + UPLOAD_IMAGE: 'UploadImage', + CUSTOM: 'Custom', + PERCENTAGE: 'Percentage', + SWITCH: 'Switch', +} + +export default Input diff --git a/src/components/util/LoadingDashboard.jsx b/src/components/util/LoadingDashboard.jsx new file mode 100644 index 0000000..255079c --- /dev/null +++ b/src/components/util/LoadingDashboard.jsx @@ -0,0 +1,60 @@ +import {Skeleton} from "antd"; + +export default function LoadingDashboard() { + return ( + <> +

+ +

+ + + ); +} diff --git a/src/components/util/LoadingPage.jsx b/src/components/util/LoadingPage.jsx new file mode 100644 index 0000000..08c763f --- /dev/null +++ b/src/components/util/LoadingPage.jsx @@ -0,0 +1,19 @@ +import React from 'react' +import NextTopLoader from 'nextjs-toploader'; + +const LoadingPage = () => { + return ( + + ) +} + +export default LoadingPage \ No newline at end of file diff --git a/src/components/util/LoadingTable.jsx b/src/components/util/LoadingTable.jsx new file mode 100644 index 0000000..006bfb3 --- /dev/null +++ b/src/components/util/LoadingTable.jsx @@ -0,0 +1,36 @@ +import {Skeleton} from "antd"; + +export default function LoadingTable() { + return ( + <> +

+ +

+ + + ); +} diff --git a/src/components/util/LocationMarker.jsx b/src/components/util/LocationMarker.jsx new file mode 100644 index 0000000..908a95f --- /dev/null +++ b/src/components/util/LocationMarker.jsx @@ -0,0 +1,83 @@ +import {useEffect, useState} from 'react'; +import {useMapEvents} from "react-leaflet"; +import {Marker} from 'react-leaflet/Marker' +import {Popup} from 'react-leaflet/Popup' + +import "leaflet-control-geocoder/dist/Control.Geocoder.css"; +import "leaflet-control-geocoder/dist/Control.Geocoder.js"; +import L from "leaflet"; + +import icon from "../../lib/constans"; + +export default function LocationMarker({ setValue, latlon }) { + const [position, setPosition] = useState(null) + const [lon, setLon] = useState(); + const [lat, setLat] = useState(); + + const map = useMapEvents({ + click(e) { + map.locate(); + setPosition(e.latlng); + map.flyTo(e.latlng, map.getZoom()); + + setLon(e.latlng.lng); + setLat(e.latlng.lat); + setValue('lat', e.latlng.lat); + setValue('lon', e.latlng.lng); + }, + // locationfound(e) { + // setPosition(latlon) + // map.flyTo(latlon, map.getZoom()) + // }, + }); + + useEffect(() => { + let geocoder = L.Control.Geocoder.nominatim(); + if (typeof URLSearchParams !== "undefined" && location.search) { + // parse /?geocoder=nominatim from URL + let params = new URLSearchParams(location.search); + let geocoderString = params.get("geocoder"); + if (geocoderString && L.Control.Geocoder[geocoderString]) { + geocoder = L.Control.Geocoder[geocoderString](); + } else if (geocoderString) { + console.warn("Unsupported geocoder", geocoderString); + } + } + + L.Control.geocoder({ + query: "", + placeholder: "Search here...", + defaultMarkGeocode: false, + geocoder + }).on("markgeocode", function (e) { + let latlng = latlon ? latlon : e.geocode.center; + + setLon(latlng.lng); + setLat(latlng.lat); + setValue('lat', latlng.lat); + setValue('lon', latlng.lng); + + L.marker(latlng, { icon }) + .addTo(map) + .bindPopup(e.geocode.name) + .openPopup(); + map.fitBounds(e.geocode.bbox); + + }).addTo(map); + + + if (latlon) { + setPosition(latlon); + map.flyTo(latlon, map.getZoom()) + } + }, []); + + return position === null ? null : ( + + + Latitude : {lat} +

Longitude : {lon} + + + ) +} diff --git a/src/components/util/ModalConfirm.jsx b/src/components/util/ModalConfirm.jsx new file mode 100644 index 0000000..ac3c3f7 --- /dev/null +++ b/src/components/util/ModalConfirm.jsx @@ -0,0 +1,35 @@ +import confirmStore from "@/store/confirmStore"; +import {Modal, Spin} from "antd"; + +export default function ModalConfirm() { + const { confirmStat, confirmClose,confirmAct,title,subTitle,confirmLoading } = confirmStore(); + return ( + <> + + +

+ +

{title}

{subTitle}

+ + +

+ + + + + ); +} diff --git a/src/components/util/ModalCustom.jsx b/src/components/util/ModalCustom.jsx new file mode 100644 index 0000000..52f61f5 --- /dev/null +++ b/src/components/util/ModalCustom.jsx @@ -0,0 +1,4 @@ + +export default function ModalCustom({setOpen,width,children,title,subTitle}){ + +} \ No newline at end of file diff --git a/src/components/util/ModalForm.jsx b/src/components/util/ModalForm.jsx new file mode 100644 index 0000000..1cc64ec --- /dev/null +++ b/src/components/util/ModalForm.jsx @@ -0,0 +1,43 @@ +import {Modal, Spin} from "antd"; +import modalStore from "@/store/modal"; + +import {CloseOutlined} from '@ant-design/icons'; + +export default function ModalForm({ + size, + title, + subTitle, + children, + action, + loading, + }) { + + const {modalStat, modalClose, modalLoading} = modalStore(); + + return ( + <> + + +

+ +

{title}

{subTitle}

+ {children} +

+ +

+ {action} +

+ + + + ); +} diff --git a/src/components/util/ModalNotif.jsx b/src/components/util/ModalNotif.jsx new file mode 100644 index 0000000..c624ec4 --- /dev/null +++ b/src/components/util/ModalNotif.jsx @@ -0,0 +1,52 @@ +import notifStore from "@/store/notifStore"; +import {Modal} from "antd"; +import {CheckCircleOutlined, CloseCircleOutlined, InfoCircleOutlined, WarningOutlined} from "@ant-design/icons"; +import {useEffect} from "react"; + +export default function ModalNotif() { + const {notifStat, notifType, title, subTitle, notifClose} = notifStore(); + + let type = (notifType) ? notifType : 'success' + + const IconList = () => { + let type = (notifType) ? notifType : 'success' + if (type === 'info') return () + if (type === 'warning') return () + if (type === 'danger') return () + if (type === 'success') return () + } + + useEffect(() => { + if (notifStat === true) setTimeout(notifClose, 2000); + }, [notifStat]); + + return ( + <> + +

+ +

{title}

{subTitle}

+ + +

+ + + + ); +} diff --git a/src/components/util/ModalSessionTimeout.jsx b/src/components/util/ModalSessionTimeout.jsx new file mode 100644 index 0000000..c4c5c43 --- /dev/null +++ b/src/components/util/ModalSessionTimeout.jsx @@ -0,0 +1,91 @@ +import useAuth from "@/hooks/useAuth"; +import {updateExpireTime} from "@/hooks/useIdleDetection"; +import {Modal} from "antd"; +import {useRouter} from "next/navigation"; +import {useEffect, useState} from "react"; +import {API} from "@/lib/API"; + +export default function ModalSessionTimeout({setIsIdle}) { + const {removeAuth} = useAuth(); + const router = useRouter(); + + const [countdown, setCountdown] = useState(30); + const [open, setOpen] = useState(true); + + const logout = async () => { + let response = await API.GET('/auth/logout'); + console.log(response) + if (response.status === 200) { + await removeAuth() + router.push("/login"); + } + } + + const stillConnected = () => { + updateExpireTime(); + setOpen(false); + setIsIdle(false); + }; + + useEffect(() => { + setTimeout(() => { + setCountdown(countdown - 1); + }, 1000); + + if (countdown <= 0) { + logout() + } + }, [countdown]); + + return ( + <> + +

+ Session Timeout +

+ Sesi login anda akan segera berakhir + dalam {countdown} detik.{" "} +

+ +

+ + + +

+ + + ); +} diff --git a/src/components/util/SearchInput.jsx b/src/components/util/SearchInput.jsx new file mode 100644 index 0000000..55dd1f6 --- /dev/null +++ b/src/components/util/SearchInput.jsx @@ -0,0 +1,12 @@ +import {SearchOutlined,} from '@ant-design/icons'; + +export default function SearchInput({handleSearch, style}) { + return ( +

+ + +

+ ) + + +}; diff --git a/src/components/util/WrapperContent.jsx b/src/components/util/WrapperContent.jsx new file mode 100644 index 0000000..0f77479 --- /dev/null +++ b/src/components/util/WrapperContent.jsx @@ -0,0 +1,16 @@ +import {motion} from "framer-motion" + +export default function WrapperContent({children,type}) { + return( + <> + + {children} +

+ + + ) +} \ No newline at end of file diff --git a/src/hooks/useAPI.jsx b/src/hooks/useAPI.jsx new file mode 100644 index 0000000..081d0e3 --- /dev/null +++ b/src/hooks/useAPI.jsx @@ -0,0 +1,63 @@ +import {useQuery} from "react-query"; +import {API} from '@/lib/API'; + +export const useAPI = { + GET, + POST, + PUT, + DELETE, + GET_SSO +}; + + +function GET(key, url, config) { + let configDefault = { + retry: false, + refetchOnWindowFocus: false, + } + + let resultConfig = {...configDefault, ...config} + + const result = useQuery({ + queryKey: key, + queryFn: async () => { + let result = await API.GET(url) + return result + }, + ...resultConfig + + }) + return result +} + +function GET_SSO(key, url, config) { + let configDefault = { + retry: false, + refetchOnWindowFocus: false, + } + + let resultConfig = {...configDefault, ...config} + + const result = useQuery({ + queryKey: key, + queryFn: async () => { + let result = await API.GET_SSO(url) + return result + }, + ...resultConfig + + }) + return result +} + +function POST(params) { + +} + +function PUT(params) { + +} + +function DELETE(params) { + +} \ No newline at end of file diff --git a/src/hooks/useAuth.jsx b/src/hooks/useAuth.jsx new file mode 100644 index 0000000..c25be44 --- /dev/null +++ b/src/hooks/useAuth.jsx @@ -0,0 +1,24 @@ +"use client" +import {API} from "@/lib/API"; + +const useAuth = () => { + const setAuth = async (token, user) => { + let res = await API.SET_COOKIE(token) + localStorage.setItem('userId', user); + + return res + } + + const removeAuth = async () => { + let res = await API.DELETE_COOKIE() + // localStorage.removeItem('userId') + // location.reload(); + } + + return { + setAuth, + removeAuth + } +} + +export default useAuth \ No newline at end of file diff --git a/src/hooks/useCheckStepPengajuan.jsx b/src/hooks/useCheckStepPengajuan.jsx new file mode 100644 index 0000000..0157993 --- /dev/null +++ b/src/hooks/useCheckStepPengajuan.jsx @@ -0,0 +1,16 @@ +import { STEP_PENGAJUAN } from '@/app/main/flpp/proses_pengajuan/page'; +import { notFound, useSearchParams } from 'next/navigation'; +import React from 'react' + +const useCheckStepPengajuan = () => { + const searchParams = useSearchParams(); + const stepName = searchParams.get("step"); + const id = searchParams.get("id"); + + if (!stepName || !id) return notFound(); + if (!STEP_PENGAJUAN[stepName]) return notFound(); + + return {stepName, id} +} + +export default useCheckStepPengajuan \ No newline at end of file diff --git a/src/hooks/useDebounce.jsx b/src/hooks/useDebounce.jsx new file mode 100644 index 0000000..3b6bfa0 --- /dev/null +++ b/src/hooks/useDebounce.jsx @@ -0,0 +1,17 @@ +import { useState, useEffect } from 'react'; + +export function useDebounce(value, delay = 500) { + const [debouncedValue, setDebouncedValue] = useState(value); + + useEffect(() => { + const handler = setTimeout(() => { + setDebouncedValue(value); + }, delay); + + return () => { + clearTimeout(handler); + }; + }, [value, delay]); + + return debouncedValue; +} \ No newline at end of file diff --git a/src/hooks/useFilterInboxTapera.jsx b/src/hooks/useFilterInboxTapera.jsx new file mode 100644 index 0000000..00cf875 --- /dev/null +++ b/src/hooks/useFilterInboxTapera.jsx @@ -0,0 +1,46 @@ +import { DropdownAPI } from '@/lib/DropdownAPI' +import React, {useEffect, useState, useCallback} from 'react' +import { useDebounce } from './useDebounce'; + +const useFilterInboxTapera = () => { + + const [dropdownData, setDropdownData] = useState({}); + const [dropdownLoading, setDropdownLoading] = useState({ + products: true, + status: true + }); + + const [filter, setFilter] = useState({ + productId: '', statusPembiayaanId: '' + }) + + const [searchText, setSearchText] = useState(null) + const debounceSearchText = useDebounce(searchText) + + useEffect(() => { + const getRefDropdown = async () => { + const productList = await DropdownAPI.productTapera() + const stsPembiayaanList = await DropdownAPI.statusPembiayaan() + setDropdownData({ products: productList, status: stsPembiayaanList}) + setDropdownLoading({ products: false, status: false }) + } + + getRefDropdown() + }, []) + + const handleChangeFilter = useCallback((value, name) => { + setFilter(prev => ({...prev, [name]: value})) + }, []) + + return { + dropdownData, + dropdownLoading, + filter, + searchText, + setSearchText, + debounceSearchText, + handleChangeFilter + } +} + +export default useFilterInboxTapera \ No newline at end of file diff --git a/src/hooks/useIdleDetection.jsx b/src/hooks/useIdleDetection.jsx new file mode 100644 index 0000000..01dc70a --- /dev/null +++ b/src/hooks/useIdleDetection.jsx @@ -0,0 +1,52 @@ +"use client"; + +import {useEffect, useState} from "react"; + +const ONE_HOUR = 30 * 60 * 1000; // 30 menit +const TEN_SECONDS = 2 * 1000; // 10 + +export const updateExpireTime = () => { + const expireTime = Date.now() + ONE_HOUR; + localStorage.setItem("expireTime", expireTime); +}; + +const useIdleDetection = () => { + const [isIdle, setIsIdle] = useState(false); + + const checkInactivity = () => { + const expireTime = localStorage.getItem("expireTime"); + if (expireTime < Date.now()) { + setIsIdle(true); + } + }; + + useEffect(() => { + // Check for ever 1 seconds + const interval = setInterval(() => { + checkInactivity(); + }, 1000); + + return () => clearInterval(interval); + }, []); + + useEffect(() => { + updateExpireTime(); + + window.addEventListener("click", updateExpireTime); + window.addEventListener("keypress", updateExpireTime); + window.addEventListener("scroll", updateExpireTime); + window.addEventListener("mousemove", updateExpireTime); + + // Cleanup + return () => { + window.removeEventListener("click", updateExpireTime); + window.removeEventListener("keypress", updateExpireTime); + window.removeEventListener("scroll", updateExpireTime); + window.removeEventListener("mousemove", updateExpireTime); + }; + }, []); + + return { isIdle, setIsIdle }; +}; + +export default useIdleDetection; diff --git a/src/hooks/usePreventBackNavigation.jsx b/src/hooks/usePreventBackNavigation.jsx new file mode 100644 index 0000000..b1ab069 --- /dev/null +++ b/src/hooks/usePreventBackNavigation.jsx @@ -0,0 +1,38 @@ +import {useEffect} from 'react'; +import {usePathname, useRouter} from "next/navigation"; +import historyRouteStore from "@/store/historyRouteStore"; + +const usePreventBackNavigation = () => { + const router = useRouter(); + const pathname = usePathname() + const {setHistory,historyRoute} = historyRouteStore() + + useEffect(() => { + + setHistory(pathname) + + + }, [router]); + + useEffect(() => { + if (historyRoute === '/main/intro' || historyRoute === '/login'){ + + const handlePopState = (e) => { + e.preventDefault(); + window.history.pushState(null, '', window.location.href); + }; + + // Push the initial state + window.history.pushState(null, '', window.location.href); + window.addEventListener('popstate', handlePopState); + + return () => { + window.removeEventListener('popstate', handlePopState); + }; + + } + + }, [historyRoute]); +}; + +export default usePreventBackNavigation; diff --git a/src/hooks/useRouteHistory.jsx b/src/hooks/useRouteHistory.jsx new file mode 100644 index 0000000..a133997 --- /dev/null +++ b/src/hooks/useRouteHistory.jsx @@ -0,0 +1,30 @@ +import {useEffect, useState} from 'react'; + +import {useRouter} from "next/navigation"; + +const useRouteHistory = () => { + const router = useRouter(); + const [previousRoute, setPreviousRoute] = useState(''); + + useEffect(() => { + + if (!router || !router.events) { + console.error("Router or router events are not available."); + return; + } + + const handleRouteChange = (url) => { + setPreviousRoute(router.asPath); + }; + + router.events.on('routeChangeStart', handleRouteChange); + + return () => { + router.events.off('routeChangeStart', handleRouteChange); + }; + }, [router]); + + return previousRoute; +}; + +export default useRouteHistory; diff --git a/src/lib/API.jsx b/src/lib/API.jsx new file mode 100644 index 0000000..bfc1265 --- /dev/null +++ b/src/lib/API.jsx @@ -0,0 +1,283 @@ +const baseUrl = process.env.NEXT_PUBLIC_API_URL; +const baseUrlSSO = process.env.NEXT_PUBLIC_API_URL_SSO; +const baseUrlKaryawan = process.env.NEXT_PUBLIC_API_URL_ABSENSI; +import {deleteCookie, getCookie, setCookie} from 'cookies-next'; + +var tokenAPI = null; +export const API = { + GET, + POST, + POST_PUBLIC, + GETAuth, + POST_IMAGE, + PUT, + DELETE, + DELETE_COOKIE, + SET_COOKIE, + getToken +}; + +async function getToken() { + if (tokenAPI) return tokenAPI; + // const res = await fetch('/api/cookie', { + // method: 'GET', + // headers: { + // 'Content-Type': 'application/json' + // } + // }) + // const result = await res.json() + // tokenAPI = result.data.value + // return result.data.value + + tokenAPI = await getCookie('token'); + return tokenAPI + +} + +async function DELETE_COOKIE() { + // const res = await fetch('/api/cookie', { + // method: 'DELETE', + // headers: { + // 'Content-Type': 'application/json' + // } + // }) + // const result = await res.json() + // return result + await deleteCookie('token') + return '' +} + +async function SET_COOKIE(token) { + // let data = {token: token} + // const res = await fetch('/api/cookie', { + // method: 'POST', + // headers: { + // 'Content-Type': 'application/json' + // }, + // body: JSON.stringify(data) + // }) + // const result = await res.json() + // return result + + await setCookie('token', token, {sameSite:'lax',secure:true}); + return token +} + +async function GET(url) { + try { + let token = await getToken() + const res = await fetch(baseUrl + url, { + next: {revalidate: 3600}, + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'Authorization': "Bearer " + token + } + }) + + if (res.status === 401 || res.status === 403){ + await DELETE_COOKIE() + return window.location.replace("/login"); + } + + + + const result = await res.json() + + return { + status: res.status, + statusText: res.statusText, + result: result + } + } catch (res) { + + return { + status: 500, + statusText: "Error API Connection ", + result: { + message :"Error API Connection" + } + } + } +} + +async function GETAuth(url) { + try { + let token = await getToken() + const res = await fetch(baseUrl + url, { + next: {revalidate: 3600}, + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'Authorization': "Bearer " + token + } + }) + const result = await res.json() + return { + status: res.status, + statusText: res.statusText, + result: result + } + } catch (res) { + return { + status: 500, + statusText: res, + result: null + } + } +} + +async function POST(url, data) { + let token = await getToken() + try { + const res = await fetch(baseUrl + url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': "Bearer " + token + }, + body: JSON.stringify(data) + }) + + if (res.status === 401 || res.status === 403){ + await DELETE_COOKIE() + return window.location.replace("/login"); + } + + const result = await res.json() + return { + status: res.status, + statusText: res.statusText, + result: result + } + } catch (res) { + return { + status: 500, + statusText: res, + result: null + } + } +} + +async function POST_PUBLIC(url, data) { + try { + const res = await fetch(baseUrl + url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(data) + }) + const result = await res.json() + return { + status: res.status, + statusText: res.statusText, + result: result + } + } catch (res) { + return { + status: 500, + statusText: res, + result: null + } + } + + +} + +async function POST_IMAGE(url, data) { + let token = await getToken() + + try { + const res = await fetch(baseUrl + url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': "Bearer " + token + }, + body: JSON.stringify(data) + }) + + if (res.status === 401 || res.status === 403){ + await DELETE_COOKIE() + return window.location.replace("/login"); + } + + const result = await res.json() + + return { + status: res.status, + statusText: res.statusText, + result: result + } + } catch (res) { + return { + status: 500, + statusText: res, + result: null + } + } +} + +async function PUT(url, data) { + let token = await getToken() + try { + const res = await fetch(baseUrl + url, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + 'Authorization': "Bearer " + token + }, + body: JSON.stringify(data) + }) + + if (res.status === 401 || res.status === 403){ + await DELETE_COOKIE() + return window.location.replace("/login"); + } + + const result = await res.json() + return { + status: res.status, + statusText: res.statusText, + result: result + } + } catch (res) { + return { + status: 500, + statusText: res, + result: null + } + } +} + +async function DELETE(url) { + let token = await getToken() + try { + const res = await fetch(baseUrl + url, { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json', + 'Authorization': "Bearer " + token + } + }) + + if (res.status === 401 || res.status === 403){ + await DELETE_COOKIE() + return window.location.replace("/login"); + } + + const result = await res.json() + return { + status: res.status, + statusText: res.statusText, + result: result + } + } catch (res) { + return { + status: 500, + statusText: res, + result: null + } + } +} diff --git a/src/lib/DropdownAPI.jsx b/src/lib/DropdownAPI.jsx new file mode 100644 index 0000000..3a341e3 --- /dev/null +++ b/src/lib/DropdownAPI.jsx @@ -0,0 +1,301 @@ +import {API} from "@/lib/API"; + +const role = async () => { + let response = await API.GET(`/ref/role`); + return response?.result?.data?.map((v) => { + return { + value: v.roleId, + label: v.roleNm, + }; + }); +} + const cabang = async () => { + let response = await API.GET(`/ref/branch`); + return response?.result?.data?.map((v) => { + return { + value: v.kdCab, + label: v.namaCabang, + }; + }); +} +const productType = async () => { + let response = await API.GET(`/ref/productType`); + return response?.result?.data?.map((v) => { + return { + value: v.productTypeId, + label: v.definition, + }; + }); +} + +const product = async () => { + let response = await API.GET(`/ref/product`); + return response?.result?.data?.map((v) => { + return { + value: v.id, + label: v.prodName, + }; + }); +} + +const branchType = async () => { + let response = await API.GET(`/ref/branch-type`); + return response?.result?.data?.map((v) => { + return { + value: v.id, + label: v.definition, + }; + }); +} + +const branch = async () => { + let response = await API.GET(`/ref/branch`); + return response?.result?.data?.map((v) => { + return { + value: v.id, + label: v.branchName, + }; + }); +} + +const wilayah = async () => { + let response = await API.GET(`/ref/wilayah`); + return response?.result?.data?.map((v) => { + return { + value: v.wilayahId, + label: v.wil, + }; + }); +} + +const bank = async () => { + let response = await API.GET(`/ref/bank`); + return response?.result?.data?.map((v) => { + return { + value: v.bankCode, + label: v.bankDescription, + }; + }); +} + +const productGroup = async () => { + let response = await API.GET(`/ref/group-product`); + return response?.result?.data?.map((v) => { + return { + value: v.id, + label: v.productGrpName, + }; + }); +} + +const developer = async () => { + let response = await API.GET(`/ref/developer`); + return response?.result?.data?.map((v) => { + return { + value: v.id, + label: v.developerName, + }; + }); +} + +const productCode = async () => { + let response = await API.GET(`/cbs/loan-product`); + return response?.result?.data?.map((v) => { + return { + value: v.prodid, + label: v.prodnm, + }; + }); +} + +const aplId = async () => { + let response = await API.GET(`/cbs-config/applid`); + return response?.result?.data?.map((v) => { + return { + value: v.parmid, + label: v.parmnm, + }; + }); +} + +const govPRG = async () => { + let response = await API.GET(`/cbs-config/govprg`); + return response?.result?.data?.map((v) => { + return { + value: v.parmid, + label: v.parmnm, + }; + }); +} + +const proposalType = async () => { + let response = await API.GET(`/ref/proposal-type`); + return response?.result?.data?.map((v) => { + return { + value: v.id, + label: v.definition, + }; + }); +} + +const workflowStatus = async () => { + let response = await API.GET(`/ref/workflow-status`); + return response?.result?.data?.map((v) => { + return { + value: v.id, + label: v.statusDefinition, + }; + }); +} + +const groupUser = async () => { + let response = await API.GET(`/ref/user-group`); + return response?.result?.data?.map((v) => { + return { + value: v.id, + label: v.groupDefinition, + }; + }); +} + +const workflowType = async () => { + let response = await API.GET(`/ref/workflow-type`); + return response?.result?.data?.map((v) => { + return { + value: v.id, + label: v.definition, + }; + }); +} + +const pekerjaanPPDPP = async () => { + let response = await API.GET(`/ref/pekerjaan-ppdpp`); + return response?.result?.data?.map((v) => { + return { + value: v.pekerjaan, + label: v.nmPekerjaan, + }; + }); +} + +const statusPembiayaan = async () => { + let response = await API.GET(`/ref/status-pembiayaan`); + return response?.result?.data?.map((v) => { + return { + value: v.statusPembiayaan, + label: v.namaStatusPembiayaan, + }; + }); +} + +const pekerjaan = async () => { + let response = await API.GET(`/ref/pekerjaan`); + return response?.result?.data?.map((v) => { + return { + value: v.idPekerjaan, + label: v.nmPekerjaan, + }; + }); +} + +const accountTypeFLPP = async () => { + let response = await API.GET(`/ref/jenis_accflpp`); + return response?.result?.data?.map((v) => { + return { + value: v.id, + label: v.definition, + }; + }); +} + +const masterGroupScoring = async () => { + let response = await API.GET(`/ref/master-group-scoring`); + return response?.result?.data?.map((v) => { + return { + value: v.id, + label: v.paramName, + }; + }); +} + +const developerScoring = async () => { + let response = await API.GET(`/ref/developer-param-scoring`); + return response?.result?.data?.map((v) => { + return { + value: v.id, + label: v.definition, + }; + }); +} + +const productTapera = async () => { + let response = await API.GET(`/ref-tapera/product`); + return response?.result?.data?.map((v) => { + return { + value: v.id, + label: v.namaProduk, + }; + }); +} + +const jenisPerumahanTapera = async () => { + let response = await API.GET(`/ref-tapera/jenis-perumahan`); + return response?.result?.data?.map((v) => { + return { + value: v.id, + label: v.definition, + }; + }); +} + +const perumahanTapera = async () => { + let response = await API.GET(`/ref-tapera/rumah`); + return response?.result?.data?.map((v) => { + return { + value: v.idRumah, + label: v.namaPerumahan, + ...v + }; + }); +} + +const wilayahTapera = async () => { + let response = await API.GET(`/ref-tapera/wilayah/dropdown`); + return response?.result?.map((v) => { + return { + value: v.wilayahId, + label: v.wil, + }; + }); +} + + +export const DropdownAPI = { + role, + cabang, + productType, + branchType, + branch, + bank, + wilayah, + productGroup, + productCode, + aplId, + govPRG, + developer, + product, + proposalType, + workflowStatus, + groupUser, + workflowType, + pekerjaanPPDPP, + statusPembiayaan, + pekerjaan, + accountTypeFLPP, + masterGroupScoring, + developerScoring, + productTapera, + jenisPerumahanTapera, + perumahanTapera, + wilayahTapera +}; diff --git a/src/lib/Helper.jsx b/src/lib/Helper.jsx new file mode 100644 index 0000000..7102ece --- /dev/null +++ b/src/lib/Helper.jsx @@ -0,0 +1,262 @@ +const dateFormat = 'DD/MM/YYYY' +const monthFormat = 'MM/YYYY' + +export const Helper = { + limitString, + today, + formatDate, + numFormatClear, + numFormat, + numFormatDec, + tableCSV, + tableExcel, + filterObjectByKeys, + differenceDate, + hashPassword, + randomId, + dateFormat, + monthFormat, + setFormatInputDate, + ComponentToString, + UcFirstWord, + maskingName + +}; + +function limitString(text, limit) { + return text.length > limit ? text.substring(0, limit) + "..." : text; +} + + +function hashPassword(newPassword) { + let result = bcrypt.hashSync(newPassword, 10); + return result; +} + +function setFormatInputDate (picker, format) { + if ( picker == 'month' ) return !format ? monthFormat : format + if ( picker == 'year' ) return 'YYYY' + return format ? format : dateFormat +} + +function maskingName(name) { + if (name){ + let str = name.toString(); + if (str.length <= 5) { + let maskedLow = str.slice(0, 2) + '*'.repeat(str.length - 2); + return maskedLow; // Jika panjang string <= 5, + } + + let masked = str.slice(0, 5) + '*'.repeat(str.length - 5); + return masked; + } +} + +function today() { + var date = new Date(); + var year = date.getFullYear(); + return year + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2); +} + +function differenceDate(start, end) { + var tanggalAwal = new Date(start); + var tanggalAkhir = new Date(end); + var selisihWaktu = tanggalAkhir - tanggalAwal; + var sisaHari = selisihWaktu / (1000 * 60 * 60 * 24); + return sisaHari +} + +function formatDate(dates, type) { + var date = new Date(dates); + var monthNames = [ + "Januari", + "Februari", + "Maret", + "April", + "Mei", + "Juni", + "Juli", + "Agustus", + "September", + "Oktober", + "November", + "Desember", + ]; + + var monthNamesSmall = [ + "Jan", + "Feb", + "Mar", + "Apr", + "Mei", + "Jun", + "Jul", + "Ags", + "Sep", + "Okt", + "Nov", + "Des", + ]; + + var day = date.getDate(); + var monthIndex = date.getMonth(); + var year = date.getFullYear(); + var hour = date.getHours(); + var minute = date.getMinutes(); + var sec = date.getSeconds(); + + switch (type) { + case "d": + return day; + case "m": + return monthIndex + 1; + case "mm": + return monthNamesSmall[monthIndex]; + case "M": + return monthNames[monthIndex]; + case "Y": + return year; + case 'd-mm-Y': + return day + ' ' + monthNamesSmall[(monthIndex)] + ' ' + year; + case "d-m-Y": + return day + "-" + (monthIndex + 1) + "-" + year; + case "Y-m-d": + return year + "-" + (monthIndex + 1) + "-" + day; + case "d-M-Y": + return day + " " + monthNames[monthIndex] + " " + year; + case "d-m-Y H:i:s": + return ( + day + + "-" + + (monthIndex + 1) + + "-" + + year + + ", " + + hour + + ":" + + minute + + ":" + + sec + ); + case "d-M-Y H:i:s": + return ( + day + + " " + + monthNames[monthIndex] + + " " + + year + + ", " + + hour + + ":" + + minute + + ":" + + sec + ); + + case "dMYHis": + return ( + day + monthIndex + year + hour + minute + sec + ); + } +} + +function numFormatClear(data) { + return data.replace(/\./g, ""); +} + +function numFormatDec(amount, decimalCount = 2, decimal = ",", thousands = ".") { + try { + decimalCount = Math.abs(decimalCount); + decimalCount = isNaN(decimalCount) ? 2 : decimalCount; + + const negativeSign = amount < 0 ? "-" : ""; + + let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString(); + let j = (i.length > 3) ? i.length % 3 : 0; + + return negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : ""); + } catch (e) { + console.log(e) + } +} + +function numFormat(amount, decimalCount = 0, decimal = ",", thousands = ".") { + // try { + // console.log(value) + // let val = (value / 1).toFixed(0).replace(".", ","); + // return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); + // }catch (e) { + // console.log(e) + // } + + try { + decimalCount = Math.abs(decimalCount); + decimalCount = isNaN(decimalCount) ? 2 : decimalCount; + + const negativeSign = amount < 0 ? "-" : ""; + + let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString(); + let j = (i.length > 3) ? i.length % 3 : 0; + + return negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : ""); + } catch (e) { + console.log(e) + } +} + +function randomId(length) { + const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + let result = ''; + for (let i = 0; i < length; i++) { + const randomIndex = Math.floor(Math.random() * charset.length); + result += charset.charAt(randomIndex); + } + return result; +} + +function filterObjectByKeys(obj, keysToKeep) { + const filteredObject = {}; + for (const key in obj) { + if (!keysToKeep.includes(key)) { + filteredObject[key] = obj[key]; + } + } + return filteredObject; +} + +function tableCSV(name, idTable) { + var workbook = XLSX.utils.book_new(); + var worksheet_data = document.getElementById(idTable); + var worksheet = XLSX.utils.table_to_sheet(worksheet_data); + workbook.SheetNames.push(name); + workbook.Sheets[name] = worksheet; + + return XLSX.writeFile(workbook, name + ' ' + this.G_formatDate(Date(), 'd-M-Y') + '.xlsx'); +} + +function tableExcel(name, idTable) { + + var a = document.createElement('a'); + var data_type = 'data:application/vnd.ms-excel'; + var table_div = document.getElementById(idTable); + var table_html = table_div.outerHTML.replace(/ /g, '%20'); + a.href = data_type + ', ' + table_html; + a.download = name + ' ' + this.G_formatDate(Date(), 'd-M-Y') + '.xls'; + a.click(); + e.preventDefault(); +} + +function ComponentToString() { + console.log(result); +} + +function UcFirstWord(str) +{ + var pieces = str.split(" "); + for ( var i = 0; i < pieces.length; i++ ) + { + var j = pieces[i].charAt(0).toUpperCase(); + pieces[i] = j + pieces[i].substr(1); + } + return pieces.join(" "); +} diff --git a/src/lib/RefStatus.js b/src/lib/RefStatus.js new file mode 100644 index 0000000..c99d7c0 --- /dev/null +++ b/src/lib/RefStatus.js @@ -0,0 +1,11 @@ +export const REF_STS_PEMBIAYAAN = { + BARU: 1, + TINDAKLANJUT_CABANG: 2, + PENERIMAAN_TINDAKLANJUT: 3, + PERSETUJUAN_SP3K: 4, + VERIFIKASI_KELAYAKAN_OK: 5, + AKAD: 6, + JADWAL_ANGSUR: 7, + PENOLAKAN_TINDAKLANJUT: 91, + PENOLAKAN_SP3K: 92 +} \ No newline at end of file diff --git a/src/lib/constans.js b/src/lib/constans.js new file mode 100644 index 0000000..6f2fcfc --- /dev/null +++ b/src/lib/constans.js @@ -0,0 +1,9 @@ +import L from "leaflet"; + +export default L.icon({ + iconSize: [25, 41], + iconAnchor: [10, 41], + popupAnchor: [2, -40], + iconUrl: "https://unpkg.com/leaflet@1.6/dist/images/marker-icon.png", + shadowUrl: "https://unpkg.com/leaflet@1.6/dist/images/marker-shadow.png" +}); diff --git a/src/lib/dummyData/dataMenu.jsx b/src/lib/dummyData/dataMenu.jsx new file mode 100644 index 0000000..12a6a0e --- /dev/null +++ b/src/lib/dummyData/dataMenu.jsx @@ -0,0 +1,140 @@ +export const dataMenu = [ + { + menuId: 1, + menuNm: "Dashboard", + icon: '', + url: "/main/dashboard", + }, + { + menuId: 2, + menuNm: "Kredit", + icon: '', + child: [ + { + menuId: 201, + menuNm: "Pembukaan Rekening", + url: "/main/nasabah", + }, + { + menuId: 202, + menuNm: "Pemeliharaan Rekening", + url: "/main/nasabah", + }, + { + menuId: 203, + menuNm: "Pencairan Rekening", + url: "/main/nasabah", + }, + ], + }, + { + menuId: 3, + menuNm: "Nasabah", + icon: '', + child: [ + { + menuId: 301, + menuNm: "Pembukaan Nasabah", + url: "/main/nasabah", + }, + { + menuId: 302, + menuNm: "Pemeliharaan Nasabah", + url: "/main/nasabah", + }, + { + menuId: 303, + menuNm: "Persetujuan Nasabah", + url: "/main/nasabah", + }, + ], + }, + { + menuId: 4, + menuNm: "Laporan", + icon: '', + child: [ + { + menuId: 401, + menuNm: "Laporan Nominatif Kredit", + url: "/main/nasabah", + }, + { + menuId: 402, + menuNm: "Laporan Pencairan Rekening", + url: "/main/nasabah", + }, + { + menuId: 403, + menuNm: "Laporan Pergerakan", + url: "/main/nasabah", + }, + ], + }, + { + menuId: 5, + menuNm: "Referensi", + icon: '', + child: [ + { + menuId: 401, + menuNm: "Manajemen User", + url: "/main/ref/cabang", + }, + { + menuId: 402, + menuNm: "Manajemen Cabang", + url: "/main/ref/cabang", + }, + { + menuId: 403, + menuNm: "Manajemen Produk", + url: "/main/ref/cabang", + }, + ], + }, + { + menuId: 6, + menuNm: "Config", + icon: '', + child: [ + { + menuId: 601, + menuNm: "Konfigurasi Fee", + url: "/main/nasabah", + }, + { + menuId: 602, + menuNm: "Konfigurasi Kolektibilitas", + url: "/main/nasabah", + }, + { + menuId: 603, + menuNm: "Konfigurasi Limit Bank", + url: "/main/nasabah", + }, + ], + }, + { + menuId: 7, + menuNm: "Batch Process", + icon: '', + child: [ + { + menuId: 701, + menuNm: "End Of Day", + url: "/main/nasabah", + }, + { + menuId: 702, + menuNm: "Start of Day", + url: "/main/nasabah", + }, + { + menuId: 603, + menuNm: "End Of Year", + url: "/main/nasabah", + }, + ], + }, +]; diff --git a/src/lib/exportDocx.js b/src/lib/exportDocx.js new file mode 100644 index 0000000..36c38c5 --- /dev/null +++ b/src/lib/exportDocx.js @@ -0,0 +1,65 @@ +import Docxtemplater from "docxtemplater"; +import PizZip from "pizzip"; +import {saveAs} from "file-saver"; + +let PizZipUtils = null; +if (typeof window !== "undefined") { + import("pizzip/utils/index.js").then(function (r) { + PizZipUtils = r; + }); +} + +function loadFile(url, callback) { + PizZipUtils.getBinaryContent(url, callback); +} + +export const exportDocx = ({docData, path, filename}) => { + loadFile(window.location.origin + path, function (error, content) { + if (error) { + throw error; + } + + let zip = new PizZip(content); + let doc = new Docxtemplater().loadZip(zip).setOptions({ + linebreaks: true + }); + + try { + doc.render(docData); + } catch (error) { + // The error thrown here contains additional information when logged with JSON.stringify (it contains a properties object containing all suberrors). + function replaceErrors(key, value) { + if (value instanceof Error) { + return Object.getOwnPropertyNames(value).reduce(function ( + error, + key + ) { + error[key] = value[key]; + return error; + }, + {}); + } + return value; + } + + if (error.properties && error.properties.errors instanceof Array) { + const errorMessages = error.properties.errors + .map(function (error) { + return error.properties.explanation; + }) + .join("\n"); + // errorMessages is a humanly readable message looking like this : + // 'The tag beginning with "foobar" is unopened' + } + throw error; + } + + var out = doc.getZip().generate({ + type: "blob", + mimeType: + "application/vnd.openxmlformats-officedocument.wordprocessingml.document" + }); + // Output the document using Data-URI + saveAs(out, filename); + }); +}; \ No newline at end of file diff --git a/src/lib/exportExcel.js b/src/lib/exportExcel.js new file mode 100644 index 0000000..31628a6 --- /dev/null +++ b/src/lib/exportExcel.js @@ -0,0 +1,140 @@ +const ExcelJS = require("exceljs"); + +// READ ME +// customHeadStyle digunakan apabila ingin menambahkan kolom header parent di row paling atas +// * cara penggunaan : sheet.spliceRows(1, 0, ['','','','','','Bulan Lalu','', 'Bulan Ini']); sheet.mergeCells('F1:G1');sheet.mergeCells('H1:I1'); + +// totalCell digunakan untuk mendapatkan sum per kolom +// * cara penggunaan : { +// colspanTotal : 3, +// column : ['D','E','F','G','H','I'] +// } + +export const exportExcel = (payload, fileName,customHeadStyle,totalCell) => +{ + const workbook = new ExcelJS.Workbook(); + payload.forEach((item, i) => { + let sheetName = item.sheetName || `Sheet${i+1}` + let sheet = workbook.addWorksheet(sheetName); + sheet.columns = item.columns + sheet.getRow(1).height = 30; + + eval(customHeadStyle) + + // Autosize column width + sheet.columns.forEach(function (column, i) { + + const columnLetter = String.fromCharCode(64 + (i+1)); + const headerCell = sheet.getCell(`${columnLetter}1`); + + + headerCell.fill = { + type: 'pattern', + pattern: 'solid', + fgColor: { argb: '003531' } + }; + headerCell.font = { + bold: true, + color: { argb: 'FFFFFF' }, + }; + + headerCell.alignment = { + vertical: 'middle', + horizontal: 'center' + }; + + if (customHeadStyle){ + const headerCell2 = sheet.getCell(`${columnLetter}2`); + headerCell2.fill = { + type: 'pattern', + pattern: 'solid', + fgColor: { argb: '003531' } + }; + headerCell2.font = { + bold: true, + color: { argb: 'FFFFFF' }, + }; + + headerCell2.alignment = { + vertical: 'middle', + horizontal: 'center' + }; + } + + + + + let maxLength = 0; + column.eachCell({ includeEmpty: true }, (cell) => { + const cellValue = cell.value ? cell.value.toString() : ''; + maxLength = Math.max(maxLength, cellValue.length); + }); + column.width = maxLength + 10; // Adding some padding + }); + sheet.addRows(item.data) + + + // TOTAL FOOTER + if (totalCell){ + const lastRowNumber = sheet.rowCount + 1; + const columnLetterTotal = String.fromCharCode(64 + (totalCell.colspanTotal)) + sheet.getCell(`A${lastRowNumber}`).value = 'Total'; + sheet.mergeCells(`A${lastRowNumber}:${columnLetterTotal}${lastRowNumber}`); + + let setTotal = []; + totalCell.column.forEach((v,k) => { + setTotal[v] = 0 + sheet.getColumn(v).eachCell({ includeEmpty: false }, (cell) => { + setTotal[v] += parseFloat(cell.value) || 0; + }); + sheet.getCell(`${v}${lastRowNumber}`).value = setTotal[v]; + }) + + sheet.columns.forEach(function (column, i) { + const columnLetter = String.fromCharCode(64 + (i+1)); + const footCell = sheet.getCell(`${columnLetter}${lastRowNumber}`); + + footCell.fill = { + type: 'pattern', + pattern: 'solid', + fgColor: { argb: 'd5ebe1' } + }; + footCell.font = { + bold: true, + }; + }) + } + // TOTAL FOOTER + + + + sheet.eachRow(row => { + row.eachCell(cell => { + cell.border = { + top: { style: 'thin' }, + left: { style: 'thin' }, + bottom: { style: 'thin' }, + right: { style: 'thin' }, + }; + + }); + }); + + + }) + + + + workbook.xlsx.writeBuffer().then(function (data) { + const blob = new Blob([data], { + type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", + }); + const url = window.URL.createObjectURL(blob); + const anchor = document.createElement("a"); + anchor.href = url; + anchor.download = `${fileName || 'download'}.xlsx`; + anchor.click(); + window.URL.revokeObjectURL(url); + }); + +} \ No newline at end of file diff --git a/src/lib/exportPDFTable.js b/src/lib/exportPDFTable.js new file mode 100644 index 0000000..052b2b2 --- /dev/null +++ b/src/lib/exportPDFTable.js @@ -0,0 +1,59 @@ +import jsPDF from "jspdf"; +import {Helper} from "@/lib/Helper"; +import 'jspdf-autotable'; + +export const exportPDFTable = (filename,subTitle,orientation,column,data,columnStyles) => { + const doc = new jsPDF({ + orientation: orientation, // Set orientation to landscape + unit: 'mm', // Set units to millimeters + format: 'a4' // Set page format to A4 + }); + doc.setFontSize(12) + doc.text(filename, 10, 10); + doc.setFontSize(9) + doc.text(subTitle, 10, 15); + doc.setFontSize(9) + doc.text(`Tanggal Cetak ${Helper.formatDate(new Date(), 'd-M-Y H:i:s')}`, 10, 20); + + doc.autoTable({ + margin: [10, 10, 10, 10], + startY: 27, + startX: 0, + body: data, + columnStyles: columnStyles, + // columnStyles: { + // 2: { halign: 'right' } // The third column (index 2) will be aligned to the right + // }, + headStyles: {fillColor: "#003531"}, + columns: column, + }) + + + // doc.save('table.pdf'); + doc.output('dataurlnewwindow'); +} + + +// const actExportPDFCustom = async() => { +// +// +// function addText(text) { +// let lineHeight = doc.getLineHeight(); // Get current line height +// let y = doc.autoTable.previous.finalY + lineHeight-10; // Calculate new y position +// doc.text(text, 14, y); // Add text at calculated y position +// } +// +// const doc = new jsPDF({ +// orientation: 'landscape', // Set orientation to landscape +// unit: 'mm', // Set units to millimeters +// format: 'a4' // Set page format to A4 +// }); +// +// doc.autoTable({ +// // html: '#tableGeneratePDF', +// html: '.ant-table-content table', +// startY: 20, +// useCss:true +// }) +// +// } \ No newline at end of file diff --git a/src/lib/icon.jsx b/src/lib/icon.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/web-vital.jsx b/src/lib/web-vital.jsx new file mode 100644 index 0000000..3857596 --- /dev/null +++ b/src/lib/web-vital.jsx @@ -0,0 +1,9 @@ +'use client' + +import {useReportWebVitals} from 'next/web-vitals' + +export function WebVitals() { + useReportWebVitals((metric) => { + console.log(metric) + }) +} \ No newline at end of file diff --git a/src/store/breadcrumbStore.js b/src/store/breadcrumbStore.js new file mode 100644 index 0000000..458d688 --- /dev/null +++ b/src/store/breadcrumbStore.js @@ -0,0 +1,15 @@ +import {create} from 'zustand'; + +const breadcrumbStore = create((set) => ({ + title: '', + subTitle: '', + widthTitle: '0px', + setTitle: (data) => set(() => ({title: data})), + setSubTitle: (data) => set(() => ({subTitle: data})), + setHide: () => set(() => ({widthTitle: '0px'})), + setShow: () => set(() => ({widthTitle: '270px'})), + + +})); + +export default breadcrumbStore; \ No newline at end of file diff --git a/src/store/confirmStore.js b/src/store/confirmStore.js new file mode 100644 index 0000000..10b07fd --- /dev/null +++ b/src/store/confirmStore.js @@ -0,0 +1,27 @@ +import {create} from "zustand"; + +const confirmStore = create((set) => ({ + confirmStat: false, + confirmLoading: false, + confirmAct: null, + FormId: null, + title: null, + subTitle: null, + confirmOpen: (title, subTitle, act) => + set(() => ({ + confirmStat: true, + title: title, + subTitle: subTitle, + confirmAct: act + })), + confirmClose: () => + set(() => ({ + confirmStat: false, + })), + setConfirmLoading: (status) => + set(() => ({ + confirmLoading: status, + })), +})); + +export default confirmStore; diff --git a/src/store/historyRouteStore.js b/src/store/historyRouteStore.js new file mode 100644 index 0000000..ae381ca --- /dev/null +++ b/src/store/historyRouteStore.js @@ -0,0 +1,12 @@ +import {create} from "zustand"; + +const historyRouteStore = create((set) => ({ + historyRoute: null, + setHistory: (route) => + set(() => ({ + historyRoute: route, + })), + +})); + +export default historyRouteStore; diff --git a/src/store/menuStore.js b/src/store/menuStore.js new file mode 100644 index 0000000..af21ffa --- /dev/null +++ b/src/store/menuStore.js @@ -0,0 +1,8 @@ +import {create} from 'zustand'; + +const menuStore = create((set) => ({ + toggleStatus: false, + setToggle: () => set((prev) => ({toggleStatus: !prev.toggleStatus})), +})); + +export default menuStore; \ No newline at end of file diff --git a/src/store/modal.js b/src/store/modal.js new file mode 100644 index 0000000..077daa2 --- /dev/null +++ b/src/store/modal.js @@ -0,0 +1,55 @@ +import {create} from "zustand"; + +const modalStore = create((set) => ({ + modalStat: false, + modalLoading: false, + FormId: null, + actionType: null, + modalDetail: null, + modalPassword: false, + modalProfile: false, + modalLoadingPassword: false, + modalLoadingProfile: false, + modalPasswordType:'normal', + modalOpen: (id, action) => + set(() => ({ + modalStat: true, + modalLoading: true, + FormId: id, + actionType: action + })), + modalClose: () => + set(() => ({ + modalStat: false, + modalDetail: false, + FormId: null, + })), + setModalLoading: (status,type) => + set(() => ({ + modalLoading: status, + + })), + setModalLoadingPassword: (status) => + set(() => ({ + modalLoadingPassword: status, + })), + setModalLoadingProfile: (status) => + set(() => ({ + modalLoadingProfile: status, + })), + setModalPassword: (status,type) => + set(() => ({ + modalPassword: status, + modalPasswordType:type + })), + setModalProfile: (status) => + set(() => ({ + modalProfile: status, + })), + setModalDetail: (status) => + set(() => ({ + modalDetail: status, + })), +})); + +export default modalStore; diff --git a/src/store/modalDashboard.js b/src/store/modalDashboard.js new file mode 100644 index 0000000..c0fb52b --- /dev/null +++ b/src/store/modalDashboard.js @@ -0,0 +1,96 @@ +import {create} from "zustand"; + +const modalDashboardStore = create((set) => ({ + modalStat: false, + modalLoading: false, + FormId: null, + actionType: null, + typeData: null, + typeKolek: null, + datatableDetail: false, + datatableDetailCabang: false, + datatableDetailKolektability: false, + datatableDetailNasabah: false, + dataNasabah: false, + kdCabangKonsol: null, + kdCabang: null, + nmCabangKonsol: null, + nmCabang: null, + customerId: null, + title: null, + subTitle: null, + modalOpen: (id, action) => + set(() => ({ + modalStat: true, + modalLoading: true, + FormId: id, + actionType: action + })), + modalClose: () => + set(() => ({ + modalStat: false, + FormId: null, + })), + setModalLoading: (status, type) => + set(() => ({ + modalLoading: status, + })), + setTypeData: (text) => + set(() => ({ + typeData: text + })), + setTypeKolek: (text) => + set(() => ({ + typeKolek: text + })), + setDatatableDetail: (status) => + set(() => ({ + datatableDetail: status + })), + setDatatableDetailCabang: (status) => + set(() => ({ + datatableDetailCabang: status + })), + setDatatableDetailKolektability: (status) => + set(() => ({ + datatableDetailKolektability: status + })), + setDatatableDetailNasabah: (status) => + set(() => ({ + datatableDetailNasabah: status + })), + setDataNasabah: (status) => + set(() => ({ + dataNasabah: status + })), + setKdCabangKonsol: (status) => + set(() => ({ + kdCabangKonsol: status + })), + setKdCabang: (status) => + set(() => ({ + kdCabang: status + })), + setNmCabangKonsol: (status) => + set(() => ({ + nmCabangKonsol: status + })), + setNmCabang: (status) => + set(() => ({ + nmCabang: status + })), + setCustomerId: (status) => + set(() => ({ + customerId: status + })), + setTitle: (status) => + set(() => ({ + title: status + })), + setSubTitle: (status) => + set(() => ({ + subTitle: status + })) +})); + +export default modalDashboardStore; diff --git a/src/store/notifStore.js b/src/store/notifStore.js new file mode 100644 index 0000000..520f7a1 --- /dev/null +++ b/src/store/notifStore.js @@ -0,0 +1,27 @@ +import {create} from "zustand"; + +const notifStore = create((set) => ({ + notifStat: false, + notifLoading: false, + FormId: null, + title: null, + subTitle: null, + notifType: null, + notifOpen: (title, subTitle, type) => + set(() => ({ + notifStat: true, + title: title, + subTitle: subTitle, + notifType: type + })), + notifClose: () => + set(() => ({ + notifStat: false, + })), + setNotifLoading: (status) => + set(() => ({ + notifLoading: status, + })), +})); + +export default notifStore; diff --git a/src/store/refStore.js b/src/store/refStore.js new file mode 100644 index 0000000..2f90e99 --- /dev/null +++ b/src/store/refStore.js @@ -0,0 +1,30 @@ +import {create} from 'zustand'; + +const refStore = create((set) => ({ + title: null, + subTitle: null, + endPoint: null, + columnTable: null, + listForm: null, + listAction: null, + primaryKey: null, + setTitle: (data) => set(() => ({title: data})), + setSubTitle: (data) => set(() => ({subTitle: data})), + setEndPointAll: (data) => set(() => ({endPoint: data})), + setColumnTable: (data) => set(() => ({columnTable: data})), + setListForm: (data) => set(() => ({listForm: data})), + setListAction: (data) => set(() => ({listAction: data})), + setPrimaryKey: (data) => set(() => ({primaryKey: data})), + resetRef: () => set(() => ({ + title: null, + subTitle: null, + endPoint: null, + columnTable: null, + listForm: null, + listAction: null, + primaryKey: null, + })), + +})); + +export default refStore; \ No newline at end of file diff --git a/src/store/selectedTableStore.js b/src/store/selectedTableStore.js new file mode 100644 index 0000000..df9ac7f --- /dev/null +++ b/src/store/selectedTableStore.js @@ -0,0 +1,16 @@ +import {create} from "zustand"; + +const selectedTableStore = create((set) => ({ + dataSelectedStore: [], + setDataSelect: (data) => + set(() => ({ + dataSelectedStore: data + })), + resetDataSelect: () => + set(() => ({ + dataSelectedStore: [] + })), + +})); + +export default selectedTableStore; diff --git a/src/store/store.js b/src/store/store.js new file mode 100644 index 0000000..926ff9a --- /dev/null +++ b/src/store/store.js @@ -0,0 +1,9 @@ +import {create} from 'zustand'; + +const useStore = create((set) => ({ + count: 0, + increment: () => set((state) => ({ count: state.count + 1 })), + decrement: () => set((state) => ({ count: state.count - 1 })), +})); + +export default useStore; \ No newline at end of file diff --git a/src/store/userStore.js b/src/store/userStore.js new file mode 100644 index 0000000..558c9c7 --- /dev/null +++ b/src/store/userStore.js @@ -0,0 +1,12 @@ +import {create} from 'zustand'; + +const userStore = create((set) => ({ + dataUserAuth: [], + updateStatusAuth: 0, + token: null, + setDataUserAuth: (data) => set(() => ({dataUserAuth: data})), + updateDataUserAuth: () => set((state) => ({updateStatusAuth: state.updateStatusAuth + 1})), + setToken: (data) => set(() => ({token: data})), +})); + +export default userStore; \ No newline at end of file diff --git a/src/text.html b/src/text.html new file mode 100644 index 0000000..2b2c25d --- /dev/null +++ b/src/text.html @@ -0,0 +1,63 @@ + + + + + + Screen Sharing + + + + +

+ + +

+ + + \ No newline at end of file