You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
7.6 KiB
164 lines
7.6 KiB
import React from 'react' |
|
import ReactDOMServer from 'react-dom/server' |
|
import { CardBody, Button, CardFooter } from 'reactstrap' |
|
// import { Button as Button2 } from 'primereact/button' |
|
// import { Skeleton } from 'primereact/skeleton' |
|
import { Circle, CornerUpRight } from 'react-feather' |
|
// import { Divider } from 'primereact/divider' |
|
// import Rating from 'react-rating' |
|
// import { numberFormat } from '@utils' |
|
// import { Shortcut } from '@mui/icons-material' |
|
|
|
import 'primereact/resources/themes/lara-light-indigo/theme.css' // theme |
|
import 'primereact/resources/primereact.css' // core css |
|
// import "primeicons/primeicons.css" // icons |
|
import 'primeflex/primeflex.css' |
|
import noImage from './noImage.png' |
|
import dayjs from 'dayjs' |
|
import { store } from '../../kytp/store/store' |
|
export default function ComponentPopUpNpwp(props) { |
|
// const content = props |
|
// const content = data.features[0].properties |
|
// { |
|
// "alamat": "Jl. Peta Selatan Blok Pasar Kalideres No. 65", |
|
// "nm_kpp_zona": "KPP Pratama Jakarta Kalideres", |
|
// "nm_kantor_pengampu": "KPP Pratama Jakarta Kalideres", |
|
// "nm_perekam": "MUHAMMAD HILAL BASHORI", |
|
// "nm_kpp_perekam": "KPP Pratama Jakarta Jatinegara", |
|
// "nama_ar_mfwp": "NOVI PRIYANTI", |
|
// "jns_wp_mfwp": "OP NON KARYAWAN", |
|
// "status_wp_mfwp": "NORMAL", |
|
// "warna_pembayaran_thn_terakhir": "BLACK", |
|
// "status_spt_tahunan_terakhir": "0", |
|
// "merk_usaha": null, |
|
// "no_telp": "085640474272", |
|
// "creation_date": "26-JUL-24 09.18.25.000000 AM", |
|
// "nama_ar_zona": "ADHITYA PRIMADHA ANDI" |
|
// } |
|
const ElementReact = () => { |
|
const petaStore = store.getState().peta |
|
// console.log(petaStore) |
|
return ( |
|
<> |
|
<input type="hidden" id="uuid" value={props.UUID} /> |
|
<div width={'200px'}> |
|
<div style={{ width: '262px', height: '104px', overflow: 'hidden' }} className="mb-1 flex center-block border"> |
|
<img alt="" src={noImage} style={{ maxWidth: 'inherit', maxHeight: 'inherit', height: '100px', width: 'inherit', objectFit: 'contain' }} /> |
|
</div> |
|
|
|
<CardBody className="m-0 p-0 d-flex justify-content-around align-items-center"> |
|
<div style={{ width: '190px' }}> |
|
<h5 className="poi-name text-primary fw-bolder cursor-pointer"> {props.NAMA}</h5> |
|
<h6 className="poi-name text-primary fw-bolder cursor-pointer"> {props.npwp}</h6> |
|
</div> |
|
<div style={{ width: '64px' }} className="d-flex justify-content-end text-end"> |
|
<div className="arah"> |
|
<Button className="btn-icon rounded-circle btn-sm" id="arah" color="primary"> |
|
<CornerUpRight size={14} /> |
|
</Button> |
|
</div> |
|
{/* <Button className="btn-icon rounded-circle btn-sm" outline color="primary"> |
|
<Bookmark size={14} /> |
|
</Button> */} |
|
</div> |
|
</CardBody> |
|
<div className="container-next-data my-50" id="container-next-data"> |
|
<ul className="list-unstyled" style={{ width: '262px' }}> |
|
<li className="mb-25 d-flex justify-content-between"> |
|
<span className="fw-bolder mr-1">Merk:</span> |
|
<span className="text-right">{props.merk_usaha ?? '-'}</span> |
|
</li> |
|
<li className="mb-25 d-flex justify-content-between"> |
|
<span className="fw-bolder mr-1">Alamat:</span> |
|
<span className="text-right">{props.alamat}</span> |
|
</li> |
|
|
|
<li className="mb-25 d-flex justify-content-between"> |
|
<span className="fw-bolder mr-1">Kontak:</span> |
|
<span className="text-right">{props.no_telp}</span> |
|
</li> |
|
<hr className="m-25" /> |
|
<li className="mb-25 d-flex justify-content-between"> |
|
<span className="fw-bolder mr-1">Zona:</span> |
|
<span className="text-right"> |
|
{props.nm_kpp_zona} - {props.nama_ar_zona} |
|
</span> |
|
</li> |
|
{props.npwp === null ? null : ( |
|
<li className="mb-25 d-flex justify-content-between"> |
|
<span className="fw-bolder mr-1">Pengampu:</span> |
|
<span className="text-right"> |
|
{props.nm_kantor_pengampu} - {props.nama_ar_mfwp} |
|
</span> |
|
</li> |
|
)} |
|
<li className="mb-25 d-flex justify-content-between"> |
|
<span className="fw-bolder mr-1">Perekam:</span> |
|
<span className="text-right"> |
|
{props.nm_kpp_perekam} - {props.nm_perekam} ({dayjs(props.creation_date).format('YYYY-MM-DD')}) |
|
</span> |
|
</li> |
|
<hr className="m-25" /> |
|
{props.npwp === null ? null : ( |
|
<> |
|
<li className="mb-25 d-flex justify-content-between"> |
|
<span className="fw-bolder mr-1">Jenis / Status WP:</span> |
|
<span className="text-right"> |
|
{props.jns_wp_mfwp} / {props.status_wp_mfwp}{' '} |
|
</span> |
|
</li> |
|
<li className="mb-25 mt-25 d-flex justify-content-between align-middle"> |
|
<span className="fw-bolder mr-1">Tematik Pembayaran:</span> |
|
<span className="text-right"> |
|
<> |
|
<span className="mr-50">{petaStore.warnaBayar[props.warna_pembayaran_thn_terakhir].info}</span> |
|
<Circle |
|
fontSize={'1.5rem'} |
|
fill={petaStore.warnaBayar[props.warna_pembayaran_thn_terakhir].warna} |
|
color={petaStore.warnaBayar[props.warna_pembayaran_thn_terakhir].warna} |
|
/> |
|
</> |
|
</span> |
|
</li> |
|
<li className="mb-25 mt-25 d-flex justify-content-between align-middle"> |
|
<span className="fw-bolder mr-1">Tematik Pelaporan SPT:</span> |
|
<span className="text-right"> |
|
<> |
|
<span className="mr-50">{petaStore.statusSPT[props.status_spt_tahunan_terakhir][0].KETERANGAN}</span> |
|
{/* <Circle |
|
fontSize={'1.5rem'} |
|
fill={petaStore.warnaBayar[props.warna_pembayaran_thn_terakhir.toLowerCase()].warna} |
|
color={petaStore.warnaBayar[props.warna_pembayaran_thn_terakhir.toLowerCase()].warna} |
|
/> */} |
|
</> |
|
</span> |
|
</li> |
|
</> |
|
)} |
|
</ul> |
|
</div> |
|
|
|
<div style={{ width: '100%' }}>{/* <div className="">Kategori : {content.NAMA}</div> */}</div> |
|
<div className="arah2" id="arah2"></div> |
|
<CardFooter className="p-0 pt-1 text-right flex justify-content-between align-items-center"> |
|
<Button className="detail-box" outline color="primary" size="sm" title="Tutup tampilan" disabled> |
|
{/* <Shortcut style={{ transform: 'scaleX(-1)' }} /> */} |
|
<span className="align-middle ms-25 ">Detail </span> |
|
</Button> |
|
<Button className="tutup-box" outline color="primary" size="sm" title="Tutup tampilan"> |
|
{/* <Shortcut style={{ transform: 'scaleX(-1)' }} /> */} |
|
<span className="align-middle ms-25">Tutup</span> |
|
</Button> |
|
</CardFooter> |
|
</div> |
|
</> |
|
) |
|
} |
|
return ReactDOMServer.renderToString( |
|
<div> |
|
<ElementReact /> |
|
</div> |
|
) |
|
} |
|
|
|
// export default ComponentPopUpNpwp
|
|
|