Skip to content

aa.gusti / eis

Go to a project
Commit 85281360 by aa.gustiana@gmail.com
Options

Perbaikan HasilPertemuan 4 Juli 2025

1 parent 5b2fc957
Inline Side-by-side
Showing 6 changed files with 750 additions and 29 deletions
eispajak/models/payment.py
...@@ -208,6 +208,60 @@ class PaymentWEBR(PCBase, CommonModel): ...@@ -208,6 +208,60 @@ class PaymentWEBR(PCBase, CommonModel):
return qry return qry
class TargetJNS(PCBase, CommonModel):
__tablename__ = 'target_jenis'
__table_args__ = {'schema': 'public'}
id = Column(Integer, primary_key=True)
created = Column(Date, nullable=False)
updated = Column(Date, nullable=False)
kode = Column(String(32))
nama = Column(String(128))
status = Column(SmallInteger)
class Targets(PCBase, DefaultModel):
__tablename__ = 'targets'
__table_args__ = {'schema': 'public'}
id = Column(Integer, primary_key=True)
created = Column(Date, nullable=False)
updated = Column(Date, nullable=False)
kode = Column(String(32))
nama = Column(String(128))
tahun = Column(Integer)
jenis = Column(Integer)
t_anggaran = Column(BigInteger)
t_perubahan = Column(BigInteger)
m01 = Column(BigInteger)
m02 = Column(BigInteger)
m03 = Column(BigInteger)
m04 = Column(BigInteger)
m05 = Column(BigInteger)
m06 = Column(BigInteger)
m07 = Column(BigInteger)
m08 = Column(BigInteger)
m09 = Column(BigInteger)
m10 = Column(BigInteger)
m11 = Column(BigInteger)
m12 = Column(BigInteger)
status = Column(SmallInteger)
@classmethod
def query_from(cls, columns=None, filters=None, db_session=PCDBSession):
query = db_session.query().select_from(cls)
if columns:
for c in columns:
query = query.add_columns(c)
if filters:
filter_expressions = []
for d in filters:
field = getattr(cls, d[0])
operator = d[1]
value = d[2]
filter_expressions.append(field.op(operator)(value))
query = query.filter(
*[e for i, e in enumerate(filter_expressions) if e is not None])
return query
def get_connection(settings): def get_connection(settings):
url = 'pcpd.url' in settings and settings['pcpd.url'] and 'pcpd.' or 'sqlalchemy.' url = 'pcpd.url' in settings and settings['pcpd.url'] and 'pcpd.' or 'sqlalchemy.'
......
eispajak/scripts/data/routes.csv
...@@ -2,7 +2,7 @@ kode,nama,path,status,type,is_menu,parent_id,file_name,class_name,func_name,perm ...@@ -2,7 +2,7 @@ kode,nama,path,status,type,is_menu,parent_id,file_name,class_name,func_name,perm
eis-pcpd,PCPD,/eis/pcpd,1,0,0 eis-pcpd,PCPD,/eis/pcpd,1,0,0
eis-pcpd-act,PCPD Act,/eis/pcpd/{act}/act,1,0 eis-pcpd-act,PCPD Act,/eis/pcpd/{act}/act,1,0
eis-pajak,Pajak,#,1,0,1 eis-pajak,Pajak,#,1,0,1
eis-pajak-kumulatif,Pajak,/eis/pajak,1,0,1,eis-pajak,pcpd,Views,view_pajak,,pcpd.pt eis-pajak-kumulatif,Pajak,/eis/pajak,1,0,1,eis-pajak,pcpd,Views,view_pajak,,pcpd_pajak.pt
eis-pbb,PBB,/eis/pbb,1,0,1,eis-pajak,pcpd,Views,view_pbb,eis,pbb.pt eis-pbb,PBB,/eis/pbb,1,0,1,eis-pajak,pcpd,Views,view_pbb,eis,pbb.pt
eis-bphtb,BPHTB,/eis/bphtb,1,0,1,eis-pajak,pcpd,Views,view_bphtb,eis,pcpd.pt eis-bphtb,BPHTB,/eis/bphtb,1,0,1,eis-pajak,pcpd,Views,view_bphtb,eis,pcpd.pt
eis-hotel,Hotel,/eis/hotel,1,0,1,eis-pajak,pcpd,Views,view_hotel,eis,pcpd.pt eis-hotel,Hotel,/eis/hotel,1,0,1,eis-pajak,pcpd,Views,view_hotel,eis,pcpd.pt
......
eispajak/views/pcpd.py
...@@ -8,7 +8,7 @@ from ..models.eis import Eis, Chart, ChartItem, Slide ...@@ -8,7 +8,7 @@ from ..models.eis import Eis, Chart, ChartItem, Slide
from datatables import ColumnDT, DataTables from datatables import ColumnDT, DataTables
from sqlalchemy import func, and_, String from sqlalchemy import func, and_, String
from sqlalchemy.sql.expression import cast from sqlalchemy.sql.expression import cast
from ..models.payment import PaymentPBB, PaymentPAD, PaymentBPHTB, PaymentWEBR from ..models.payment import PaymentPBB, PaymentPAD, PaymentBPHTB, PaymentWEBR, Targets
from opensipkd.pbb.monitoring.models import PembayaranSppt, Kecamatan, Kelurahan, Sppt from opensipkd.pbb.monitoring.models import PembayaranSppt, Kecamatan, Kelurahan, Sppt
from datetime import timedelta from datetime import timedelta
logger = logging.getLogger(__name__) logger = logging.getLogger(__name__)
...@@ -27,6 +27,97 @@ PAD_TYP = { ...@@ -27,6 +27,97 @@ PAD_TYP = {
"pbb": ["PBB", "BPHTB"] "pbb": ["PBB", "BPHTB"]
} }
jenis_pajak = {
"opsen": {
"kode": "41012",
"nama": "Opsen",
"subs": [
{"kode": "410120010001",
"nama": "Opsen PKB"},
{"kode": "410121010001",
"nama": "Opsen BBNKB"},
]},
"pbb": {
"kode": "410115",
"nama": "PBBP2"},
"bphtb": {
"kode": "410116",
"nama": "BPHTB-Pemindahan Hak"},
"resto": {
"kode": "41011901",
"nama": "PBJT Restoran",
"subs": [
{"kode": "410119010001",
"nama": "PBJT-Restoran"},
{"kode": "410119010002",
"nama": "PBJT-Penyedia Jasa Boga atau Katering"},
{"kode": "410119020001",
"nama": "PBJT-Konsumsi Tenaga Listrik dari Sumber Lain"},
]},
"ppju": {
"kode": "41011902",
"nama": "PBJT-Tenaga Listrik",
"subs": []},
"hotel": {
"kode": "41011903",
"nama": "PBJT Jasa Perhotelan",
"subs": [
{"kode": "410119030001", "nama": "PBJT-Hotel"},
{"kode": "410119030003", "nama": "PBJT-Vila"},
{"kode": "410119030007", "nama": "PBJT-Wisma Pariwisata"},
]},
"parkir": {
"kode": "41011904",
"nama": "PBJT-Penyediaan atau Penyelenggaraan Tempat Parkir"},
"hiburan": {
"kode": "41011905",
"nama": "PBJT-Jasa Kesenian dan Hiburan",
"subs": [
{"kode": "410119050001",
"nama": "PBJT-Tontonan Film atau Bentuk Tontonan Audio Visual Lainnya yang Dipertontonkan secara Langsung di Suatu Lokasi Tertentu"},
{"kode": "410119050002",
"nama": "PBJT-Pergelaran Kesenian, Musik, Tari, dan/atau Busana"},
{"kode": "410119050007",
"nama": "PBJT-Pacuan Kuda dan Perlombaan Kendaraan Bermotor"},
{"kode": "410119050008",
"nama": "PBJT-Permainan Ketangkasan"},
{"kode": "410119050009",
"nama": "PBJT-Olahraga Permainan dengan Menggunakan Tempat/Ruang dan/atau Peralatan dan Perlengkapan untuk Olahraga dan Kebugaran"},
{"kode": "410119050010",
"nama": "PBJT-Rekreasi Wahana Air, Wahana Ekologi, Wahana Pendidikan, Wahana Budaya, Wahana Salju, Wahana Permainan, Pemancingan, Agrowisata, dan Kebun Binatang"},
{"kode": "410119050012",
"nama": "PBJT-Distkotek, Karaoke, Kelab Malam, Bar, dan Mandi Uap/Spa"},
]},
"reklame": {
"kode": "410109",
"nama": "Pajak Reklame",
"subs": [
{"kode": "410109010001",
"nama": "Pajak Reklame Papan/Billboard/Videotron/Megatron"},
{"kode": "410109020001", "nama": "Pajak Reklame Kain"},
{"kode": "410109030001",
"nama": "Pajak Reklame Melekat/Stiker"},
{"kode": "410109050001", "nama": "Pajak Reklame Berjalan"},
]},
"atd": {
"kode": "410112",
"nama": "Pajak Air Tanah"},
"walet": {
"kode": "410113",
"nama": "Pajak Sarang Burung Walet "},
"minerba": {
"kode": "410114",
"nama": "Pajak Mineral Bukan Logam dan Batuan",
"subs": [
{"kode": "410114230001", "nama": "Pajak Pasir dan Kerikil"},
{"kode": "410114300001", "nama": "Pajak Tanah Liat"},
]}
}
class Views(BaseView): class Views(BaseView):
@view_config(route_name='eis-pcpd', renderer='templates/pcpd.pt', @view_config(route_name='eis-pcpd', renderer='templates/pcpd.pt',
...@@ -145,6 +236,22 @@ class Views(BaseView): ...@@ -145,6 +236,22 @@ class Views(BaseView):
# "monthlyAcc": monthlyAcc, # "monthlyAcc": monthlyAcc,
# "monthlyAccTrx": monthlyAccTrx, # "monthlyAccTrx": monthlyAccTrx,
# } # }
def get_targets(self, kode=None):
targets = Targets.query_from([func.sum(Targets.t_anggaran).label("murni"),
func.sum(Targets.t_perubahan).label("perubahan"),]).filter(
Targets.tahun == self.ses['tahun'],
)
if kode:
targets = targets.filter(
Targets.kode.ilike(jenis_pajak[kode]["kode"]+'%'))
targets = targets.first()
if targets:
target = targets.perubahan or targets.murni or 0
else:
target = 0
target = float(target)
return target
def get_pbb_data(self): def get_pbb_data(self):
if log.root.level == logging.DEBUG: if log.root.level == logging.DEBUG:
today = datetime.strptime('2025-06-05', "%Y-%m-%d") today = datetime.strptime('2025-06-05', "%Y-%m-%d")
...@@ -178,6 +285,9 @@ class Views(BaseView): ...@@ -178,6 +285,9 @@ class Views(BaseView):
week, weekTrx, weekly, weeklyTrx, weeklyAcc, weeklyAccTrx = \ week, weekTrx, weekly, weeklyTrx, weeklyAcc, weeklyAccTrx = \
self.get_daily_data(PembayaranSppt, field, None, filter_exp) self.get_daily_data(PembayaranSppt, field, None, filter_exp)
ytd_target = self.get_targets("pbb")
ytd_persen = round(ytd/ytd_target * 100, 2) if ytd_target > 0 else 0
return {"today": amt, return {"today": amt,
"trx": trx, "trx": trx,
"daily": daily, "daily": daily,
...@@ -197,6 +307,8 @@ class Views(BaseView): ...@@ -197,6 +307,8 @@ class Views(BaseView):
"monthlyTrx": monthlyTrx, "monthlyTrx": monthlyTrx,
"monthlyAcc": monthlyAcc, "monthlyAcc": monthlyAcc,
"monthlyAccTrx": monthlyAccTrx, "monthlyAccTrx": monthlyAccTrx,
"ytdTarget": ytd_target,
"ytdPersen": ytd_persen,
} }
def get_bphtb_data(self): def get_bphtb_data(self):
...@@ -229,7 +341,8 @@ class Views(BaseView): ...@@ -229,7 +341,8 @@ class Views(BaseView):
today-timedelta(weeks=6), today) today-timedelta(weeks=6), today)
week, weekTrx, weekly, weeklyTrx, weeklyAcc, weeklyAccTrx = \ week, weekTrx, weekly, weeklyTrx, weeklyAcc, weeklyAccTrx = \
self.get_daily_data(PaymentBPHTB, field, None, filter_exp) self.get_daily_data(PaymentBPHTB, field, None, filter_exp)
ytd_target = float(self.get_targets("bphtb"))
ytd_persen = round(ytd/ytd_target * 100, 2) if ytd_target > 0 else 0
return {"today": amt, return {"today": amt,
"trx": trx, "trx": trx,
"daily": daily, "daily": daily,
...@@ -249,6 +362,8 @@ class Views(BaseView): ...@@ -249,6 +362,8 @@ class Views(BaseView):
"monthlyTrx": monthlyTrx, "monthlyTrx": monthlyTrx,
"monthlyAcc": monthlyAcc, "monthlyAcc": monthlyAcc,
"monthlyAccTrx": monthlyAccTrx, "monthlyAccTrx": monthlyAccTrx,
"ytdTarget": ytd_target,
"ytdPersen": ytd_persen,
} }
def get_pad_data(self, typ): def get_pad_data(self, typ):
...@@ -283,7 +398,8 @@ class Views(BaseView): ...@@ -283,7 +398,8 @@ class Views(BaseView):
today-timedelta(weeks=6), today) today-timedelta(weeks=6), today)
week, weekTrx, weekly, weeklyTrx, weeklyAcc, weeklyAccTrx = \ week, weekTrx, weekly, weeklyTrx, weeklyAcc, weeklyAccTrx = \
self.get_daily_data(PaymentPAD, field, None, filter_exp, typ) self.get_daily_data(PaymentPAD, field, None, filter_exp, typ)
ytd_target = float(self.get_targets(typ))
ytd_persen = round(ytd/ytd_target * 100, 2) if ytd_target > 0 else 0
return {"today": amt, return {"today": amt,
"trx": trx, "trx": trx,
"daily": daily, "daily": daily,
...@@ -303,6 +419,8 @@ class Views(BaseView): ...@@ -303,6 +419,8 @@ class Views(BaseView):
"monthlyTrx": monthlyTrx, "monthlyTrx": monthlyTrx,
"monthlyAcc": monthlyAcc, "monthlyAcc": monthlyAcc,
"monthlyAccTrx": monthlyAccTrx, "monthlyAccTrx": monthlyAccTrx,
"ytdTarget": ytd_target,
"ytdPersen": ytd_persen,
} }
def get_webr_data(self): def get_webr_data(self):
...@@ -359,6 +477,7 @@ class Views(BaseView): ...@@ -359,6 +477,7 @@ class Views(BaseView):
"monthlyTrx": monthlyTrx, "monthlyTrx": monthlyTrx,
"monthlyAcc": monthlyAcc, "monthlyAcc": monthlyAcc,
"monthlyAccTrx": monthlyAccTrx, "monthlyAccTrx": monthlyAccTrx,
"target": 0,
} }
def loop_data(self, src, dst): def loop_data(self, src, dst):
...@@ -427,15 +546,20 @@ class Views(BaseView): ...@@ -427,15 +546,20 @@ class Views(BaseView):
self.loop_data(pdl["weeklyTrx"], weeklyTrx) self.loop_data(pdl["weeklyTrx"], weeklyTrx)
self.loop_data(pdl["weeklyAcc"], weeklyAcc) self.loop_data(pdl["weeklyAcc"], weeklyAcc)
self.loop_data(pdl["weeklyAccTrx"], weeklyAccTrx) self.loop_data(pdl["weeklyAccTrx"], weeklyAccTrx)
ytd_target = float(pbb.get("ytdTarget", 0)) + float(bphtb.get("ytdTarget", 0)) + \
float(pdl.get("ytdTarget", 0))
ytd = float(pbb.get("ytd", 0)) + float(bphtb.get("ytd", 0)) + \
float(pdl.get("ytd", 0))
resp = {"today": float(pbb.get("today", 0)) + float(bphtb.get("today", 0)) + float(pdl.get("today", 0)), resp = {"today": float(pbb.get("today", 0)) + float(bphtb.get("today", 0)) + float(pdl.get("today", 0)),
"trx": float(pbb.get("trx", 0)) + float(bphtb.get("trx", 0)) + float(pdl.get("trx", 0)), "trx": float(pbb.get("trx", 0)) + float(bphtb.get("trx", 0)) + float(pdl.get("trx", 0)),
"daily": daily, "daily": daily,
"dailyTrx": dailyTrx, "dailyTrx": dailyTrx,
"dailyAcc": dailyAcc, "dailyAcc": dailyAcc,
"dailyAccTrx": dailyAccTrx, "dailyAccTrx": dailyAccTrx,
"ytd": float(pbb.get("ytd", 0)) + float(bphtb.get("ytd", 0)) + float(pdl.get("ytd", 0)), "ytd": ytd,
"trxYtd": float(pbb.get("trxYtd", 0)) + float(bphtb.get("trxYtd", 0)) + float(pdl.get("trxYtd", 0)), "trxYtd": float(pbb.get("trxYtd", 0)) + float(bphtb.get("trxYtd", 0)) + float(pdl.get("trxYtd", 0)),
"ytdTarget": ytd_target,
"ytdPersen": round(ytd/ytd_target * 100, 2) if ytd_target > 0 else 0,
"pie": [("I", 100, '#16a75c'), ("II", 200, '#ffb900'), "pie": [("I", 100, '#16a75c'), ("II", 200, '#ffb900'),
("III", 300, '#133132'), ("IV", 200, '#123456'), ("III", 300, '#133132'), ("IV", 200, '#123456'),
("V", 100, '#545355')], ("V", 100, '#545355')],
...@@ -447,6 +571,7 @@ class Views(BaseView): ...@@ -447,6 +571,7 @@ class Views(BaseView):
"monthlyTrx": monthlyTrx, "monthlyTrx": monthlyTrx,
"monthlyAcc": monthlyAcc, "monthlyAcc": monthlyAcc,
"monthlyAccTrx": monthlyAccTrx, "monthlyAccTrx": monthlyAccTrx,
} }
return resp return resp
...@@ -492,6 +617,28 @@ class Views(BaseView): ...@@ -492,6 +617,28 @@ class Views(BaseView):
"persen": kecamatan[kec]["persen"], "persen": kecamatan[kec]["persen"],
} for kec in kecamatan] } for kec in kecamatan]
def get_grid_pajak(self, jenis):
target = self.get_targets(jenis)
if jenis == "pbb":
realisasi = self.get_pbb_data()["ytd"]
elif jenis=="bphtb":
realisasi = self.get_bphtb_data()["ytd"]
else:
realisasi = self.get_pad_data(jenis)["ytd"]
return {jenis: {"kode": jenis_pajak[jenis]["kode"].rjust(8, '0'),
"nama": jenis_pajak[jenis]["nama"],
"target": target,
"realisasi": realisasi,
"sisa": target - realisasi,
"persen": round(realisasi/target * 100,2) if target > 0 else 0}
}
@view_config(route_name='eis-pcpd-act', renderer='json') @view_config(route_name='eis-pcpd-act', renderer='json')
def view_app_act(self): def view_app_act(self):
tahun = self.ses['tahun'] tahun = self.ses['tahun']
...@@ -503,9 +650,25 @@ class Views(BaseView): ...@@ -503,9 +650,25 @@ class Views(BaseView):
json_data['success'] = False json_data['success'] = False
act = req.matchdict['act'] act = req.matchdict['act']
if act == 'grid': if act == 'grid':
rows = DBSession.query(Eis).filter(Eis.id == id) data = {}
if not rows: data.update(self.get_grid_pajak("hotel"))
return json_data data.update(self.get_grid_pajak("resto"))
data.update(self.get_grid_pajak("hiburan"))
data.update(self.get_grid_pajak("parkir"))
data.update(self.get_grid_pajak("ppju"))
data.update(self.get_grid_pajak("reklame"))
data.update(self.get_grid_pajak("minerba"))
data.update(self.get_grid_pajak("atd"))
data.update(self.get_grid_pajak("pbb"))
data.update(self.get_grid_pajak("bphtb"))
data.update(self.get_grid_pajak("opsen"))
return [{"kode": data[d]["kode"],
"nama": data[d]["nama"],
"target": data[d]["target"],
"realisasi": data[d]["realisasi"],
"sisa": data[d]["sisa"],
"persen": data[d]["persen"]} for d in data]
elif act == 'pbb': elif act == 'pbb':
resp = self.get_pbb_data() resp = self.get_pbb_data()
resp["tabel"] = self.get_pbb_area() resp["tabel"] = self.get_pbb_area()
......
eispajak/views/templates/pbb.pt
...@@ -39,6 +39,10 @@ ...@@ -39,6 +39,10 @@
<div class="chart-container"> <div class="chart-container">
<h2 class="primary"> <h2 class="primary">
<b>Rp. <h2 class="odometer sub-odometer bold primary" id="ytd">0</h2></b> <b>Rp. <h2 class="odometer sub-odometer bold primary" id="ytd">0</h2></b>
<p>
Target Rp. <span class=" bold" id="ytdTarget">123</span>
<p>
Persentase <span class="odometer sub-odometer bold primary" id="ytdPersen">
</h2> </h2>
<h3 class="primary bold"><span id="trxYtd">0</span> Transaksi</h3> <h3 class="primary bold"><span id="trxYtd">0</span> Transaksi</h3>
</div> </div>
...@@ -64,9 +68,9 @@ ...@@ -64,9 +68,9 @@
<div class="row"> <div class="row">
<div class="col-md-2"> <div class="col-md-2">
<select class="form-control rounded" id="rangeType"> <select class="form-control rounded" id="rangeType">
<option value="1">Harian</option>
<option value="2">Mingguan</option>
<option value="3">Bulanan</option> <option value="3">Bulanan</option>
<option value="2">Mingguan</option>
<option value="1">Harian</option>
</select> </select>
</div> </div>
<hr> <hr>
...@@ -178,12 +182,12 @@ ...@@ -178,12 +182,12 @@
</thead> </thead>
<tbody> <tbody>
<tr class="odd"> <tr class="odd">
<td class="">32.08-010</td> <td class=""></td>
<td class="">CIPATUJAH</td> <td class=""></td>
<td class="right">63.185</td> <td class="right">0</td>
<td class="right">1.183.837.314</td> <td class="right">0</td>
<td class="right">42.681</td> <td class="right">0</td>
<td class="right">789.492.550</td> <td class="right">0</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -219,7 +223,7 @@ ...@@ -219,7 +223,7 @@
// canvas.height = window.innerHeight / 2; // canvas.height = window.innerHeight / 2;
console.log(window.innerHeight); console.log(window.innerHeight);
console.log($("#panelRealisasi").height()) console.log($("#panelRealisasi").height())
canvasBar.height = $("#panelRealisasi").height() + 125; // canvasBar.height = $("#panelRealisasi").height() + 125;
canvasBar.parentNode.parentNode.parentNode.style.height = $("#panelRealisasi").height() + "px"; canvasBar.parentNode.parentNode.parentNode.style.height = $("#panelRealisasi").height() + "px";
// const bar_data = { // const bar_data = {
// labels: [ // labels: [
...@@ -283,6 +287,7 @@ ...@@ -283,6 +287,7 @@
// } // }
// }, // },
// responsive: true, // responsive: true,
maintainAspectRatio: true,
plugins: { plugins: {
legend: { legend: {
display: false, display: false,
...@@ -474,6 +479,8 @@ ...@@ -474,6 +479,8 @@
trx.innerHTML = parseInt(newData.trx).toLocaleString("id-ID"); trx.innerHTML = parseInt(newData.trx).toLocaleString("id-ID");
odytd.update(newData.ytd); odytd.update(newData.ytd);
trxYtd.innerHTML = parseInt(newData.trxYtd).toLocaleString("id-ID"); trxYtd.innerHTML = parseInt(newData.trxYtd).toLocaleString("id-ID");
ytdTarget.innerHTML = parseInt(newData.ytdTarget).toLocaleString("id-ID");
ytdPersen.innerHTML = parseFloat(newData.ytdPersen).toFixed(2) + "%";
time.innerHTML = formatter.format(date);//newData.time; time.innerHTML = formatter.format(date);//newData.time;
time.style.fontWeight = 'bold'; time.style.fontWeight = 'bold';
......
eispajak/views/templates/pcpd.pt
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<metal:css fill-slot="css_files"> <metal:css fill-slot="css_files">
<link rel="stylesheet" href="${home}/eis/static/css/odometer-theme-plaza.css"> <link rel="stylesheet" href="${home}/eis/static/css/odometer-theme-plaza.css">
<link href="${home}/eis/static/css/pcpd.css" rel="stylesheet"> <link href="${home}/eis/static/css/pcpd.css" rel="stylesheet">
</metal:css> </metal:css>
<style metal:fill-slot="styles"> <style metal:fill-slot="styles">
</style> </style>
...@@ -38,6 +38,10 @@ ...@@ -38,6 +38,10 @@
<div class="chart-container"> <div class="chart-container">
<h2 class="primary"> <h2 class="primary">
<b>Rp. <h2 class="odometer sub-odometer bold primary" id="ytd">0</h2></b> <b>Rp. <h2 class="odometer sub-odometer bold primary" id="ytd">0</h2></b>
<p>
Target Rp. <span class=" bold" id="ytdTarget">123</span>
<p>
Persentase <span class="odometer sub-odometer bold primary" id="ytdPersen">
</h2> </h2>
<h3 class="primary bold"><span id="trxYtd">1067</span> Transaksi</h3> <h3 class="primary bold"><span id="trxYtd">1067</span> Transaksi</h3>
</div> </div>
...@@ -63,9 +67,9 @@ ...@@ -63,9 +67,9 @@
<div class="row "> <div class="row ">
<div class="col-md-2"> <div class="col-md-2">
<select class="form-control rounded" id="rangeType"> <select class="form-control rounded" id="rangeType">
<option value="1">Harian</option>
<option value="2">Mingguan</option>
<option value="3">Bulanan</option> <option value="3">Bulanan</option>
<option value="2">Mingguan</option>
<option value="1">Harian</option>
</select> </select>
</div> </div>
<hr> <hr>
...@@ -122,7 +126,7 @@ ...@@ -122,7 +126,7 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<img src="${home}/eis/static/42x42-line-chart-icon.png" class="icon-rounded" alt="" align="left"> <img src="${home}/eis/static/42x42-line-chart-icon.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Transaksi Kumulatif <h5 class="text-left bold">Tren Transaksi Kumulatif
<i class="fa fa-info-circle pull-right icon-color"></i> <i class="fa fa-info-circle pull-right icon-color"></i>
</h5> </h5>
</div> </div>
...@@ -231,7 +235,7 @@ ...@@ -231,7 +235,7 @@
tension: 0.5 tension: 0.5
}] }]
}; };
var ctx = document.getElementById('chartRealisasiCnt').getContext('2d'); var ctx = document.getElementById('chartRealisasiCnt').getContext('2d');
var canvas = document.getElementById('chartRealisasiCnt'); var canvas = document.getElementById('chartRealisasiCnt');
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
...@@ -349,7 +353,7 @@ ...@@ -349,7 +353,7 @@
value: 0, value: 0,
format: '(.ddd)', format: '(.ddd)',
}); });
$.fn.datarefresh = function () { $.fn.datarefresh = function () {
console.log("data_refresh"); console.log("data_refresh");
console.log("${url}"); console.log("${url}");
...@@ -361,22 +365,22 @@ ...@@ -361,22 +365,22 @@
trx.innerHTML = parseInt(newData.trx).toLocaleString("id-ID"); trx.innerHTML = parseInt(newData.trx).toLocaleString("id-ID");
odytd.update(newData.ytd); odytd.update(newData.ytd);
trxYtd.innerHTML = parseInt(newData.trxYtd).toLocaleString("id-ID"); trxYtd.innerHTML = parseInt(newData.trxYtd).toLocaleString("id-ID");
time.innerHTML = formatter.format(date);//newData.time; ytdTarget.innerHTML = parseInt(newData.ytdTarget).toLocaleString("id-ID");
ytdPersen.innerHTML = parseFloat(newData.ytdPersen).toFixed(2) + "%";
time.innerHTML = formatter.format(date);
time.style.fontWeight = 'bold'; time.style.fontWeight = 'bold';
// removeData(pieChart);
addData(pieChart, newData.pie); addData(pieChart, newData.pie);
trendChart(); trendChart();
} else { } else {
console.log("Request failed."); console.log("Request failed.");
} }
setTimeout(function () { setTimeout(function () {
console.log("timeout"); console.log("timeout");
$().datarefresh(); $().datarefresh();
}, 300000); }, 300000);
}).fail(function() { }).fail(function () {
setTimeout(function () { setTimeout(function () {
console.log("timeout"); console.log("timeout");
$().datarefresh(); $().datarefresh();
......
eispajak/views/templates/pcpd_pajak.pt 0 → 100644
<html metal:use-macro="load: eis-base.pt" tal:define="url request.route_url('eis-pcpd-act', act=module);">
<metal:css fill-slot="css_files">
<link rel="stylesheet" href="${home}/eis/static/css/odometer-theme-plaza.css">
<link rel="stylesheet" href="${home}/static/v3/plugin/datatables/1.10/media/css/dataTables.bootstrap.css">
<link href="${home}/eis/static/css/pcpd.css" rel="stylesheet">
</metal:css>
<style metal:fill-slot="styles">
</style>
<div metal:fill-slot="content">
<div class="row ">
<div class="col-md-2">
<img src="${home}/eis/static/pcpd-logo.png" class="img-responsive logo-pcpd" alt="PCPD Logo">
</div>
<div class="col-md-10">
<div class="panel panel-default text-center main-panel uppercase">
<div class="panel-body">
<h1 class="title-panel"><b>${title}</b></h1>
<div class="padding-top-sm">
<h5 id="time">Rab, 4 Jun 2025 - 14:11:05</h5>
</div>
<h4 class="odoometer-head">
<b>Rp.<h4 class="odometer bold" id="today"></h4></b>
</h4>
<h5 class="padding-top-sm"><b><span id="trx"></span> Transaksi</b></h5>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-money-transfer.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">
Total Realisasi s.d Hari Ini
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container">
<h2 class="primary">
<b>Realisasi Rp. <span class="odometer sub-odometer bold primary" id="ytd">0</span></b>
<p>
Target Rp. <span class=" bold" id="ytdTarget">123</span>
<p>
Persentase <span class="odometer sub-odometer bold primary" id="ytdPersen">
</h2>
<h3 class="primary bold"><span id="trxYtd">0</span> Transaksi</h3>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default hide">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-pie-chart.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Jumlah Transaksi
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center">
<canvas id="chartPie"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Target dan Realisasi per Pajak
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<table class="table table-bordered table-sm" id="table1">
<thead>
<tr>
<th class="align-middle text-center">Kode</th>
<th class="align-middle text-center">Uraian</th>
<th class="text-center">Target</th>
<th class="text-center">Realisasi</th>
<th class="text-center">Selisih</th>
<th class="text-center">%</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class=""></td>
<td class=""></td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr>
</div>
<div class="row ">
<div class="col-md-2">
<select class="form-control rounded" id="rangeType">
<option value="3">Bulanan</option>
<option value="2">Mingguan</option>
<option value="1">Harian</option>
</select>
</div>
<hr>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-gantt-chart.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Realiasi (Rp)
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartRealisasi"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-chart.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Realiasi Kumulatif (Rp)
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartKumulatif" width="200" height="200"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Transaksi
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartRealisasiCnt"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-line-chart-icon.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Transaksi Kumulatif
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartKumulatifCnt" width="200" height="200"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<metal:js fill-slot="js_files">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> -->
<script src="${home}/eis/static/js/chart.js"></script>
<script src="${home}/eis/static/js/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="${home}/eis/static/js/odometer.js"></script>
<script src="${home}/static/v3/plugin/datatables/1.10/media/js/jquery.dataTables.min.js"></script>
<script src="${home}/static/v3/plugin/datatables/1.10/media/js/jquery.dataTables.ext.js"></script>
</metal:js>
<script metal:fill-slot="scripts">
var pieChart;
var amtTrendChart;
var trxTrendChart;
var amtKumulatifChart;
var trxKumulatifChart;
var newData;
$(document).ready(function () {
var ctx = document.getElementById('chartPie').getContext('2d');
var canvas = document.getElementById('chartPie');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.8;
const pie_data = {
labels: [
'Pajak',
'Retribusi',
],
datasets: [{
data: [300, 100],
backgroundColor: [
'#16a75c', //'rgb(255, 99, 132)',
'#ffb900', // 'rgb(54, 162, 235)'
],
hoverOffset: 4
}]
};
pieChart = new Chart(ctx,
{
type: 'pie',
data: pie_data,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom'
}
}
}
}
);
var ctx = document.getElementById('chartRealisasi').getContext('2d');
var canvas = document.getElementById('chartRealisasi');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.38;
var realisasi_data = {
labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
datasets: [{
label: 'Tren Realiasi',
data: [100, 50, 300, 250, 100, 150, 2000],
borderColor: '#16a75c',// 'rgb(75, 192, 192)',
backgroundColor: '#16a75c8a',
fill: true,
tension: 0.5
}]
};
amtTrendChart = new Chart(ctx, {
type: 'line',
data: realisasi_data,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
drawBorder: false,
}
}
}
}
});
var transaksi_data = {
labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
datasets: [{
label: 'Tren Transaksi',
data: [100, 50, 300, 250, 100, 150, 2000],
borderColor: '#16a75c',// 'rgb(75, 192, 192)',
backgroundColor: '#16a75c8a',
fill: true,
tension: 0.5
}]
};
var ctx = document.getElementById('chartRealisasiCnt').getContext('2d');
var canvas = document.getElementById('chartRealisasiCnt');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.38;
trxTrendChart = new Chart(ctx, {
type: 'line',
data: transaksi_data,
options: {
responsive: true,
maintainAspectRatio: false,
}
});
var ctx = document.getElementById('chartKumulatif').getContext('2d');
var canvas = document.getElementById('chartKumulatif');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.38;
var kumulatif_data = {
labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
datasets: [{
label: 'Tren Kumulatif',
data: [100, 150, 400, 650, 900, 950, 1100],
borderColor: '#ffb900', //'rgb(75, 192, 192)',
backgroundColor: '#debd68ad',
fill: true,
tension: 0.5
}]
};
amtKumulatifChart = new Chart(ctx, {
type: 'line',
data: kumulatif_data,
options: {
responsive: true,
maintainAspectRatio: false,
}
});
var ctx = document.getElementById('chartKumulatifCnt').getContext('2d');
var canvas = document.getElementById('chartKumulatifCnt');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.38;
trxKumulatifChart = new Chart(ctx, {
type: 'line',
data: kumulatif_data,
options: {
responsive: true,
maintainAspectRatio: false,
}
});
$("#rangeType").change(function () {
trendChart();
});
$().datarefresh();
});
function addData(chart, data) {
labels = [];
aData = [];
backgroundColor = [];
data.forEach(element => {
labels.push(element[0]);
aData.push(element[1]);
if (element.length > 2)
backgroundColor.push(element[2]);
});
chart.data.labels.length = 0;
chart.data.datasets[0].data.length = 0;
if (backgroundColor.length != 0) {
chart.data.datasets[0].data.backgroundColor = 0;
chart.data.datasets[0].backgroundColor = backgroundColor;
}
chart.data.labels = labels;
chart.data.datasets[0].data = aData;
chart.update();
}
trendChart = function () {
if (rangeType.value == 1) {
amtTrendChartData = newData.daily;
trxTrendChartData = newData.dailyTrx;
amtKumulatifChartData = newData.dailyAcc;
trxKumulatifChartData = newData.dailyAccTrx;
}
else if (rangeType.value == 2) {
amtTrendChartData = newData.weekly;
trxTrendChartData = newData.weeklyTrx;
amtKumulatifChartData = newData.weeklyAcc;
trxKumulatifChartData = newData.weeklyAccTrx;
}
else {
amtTrendChartData = newData.monthly;
trxTrendChartData = newData.monthlyTrx;
amtKumulatifChartData = newData.monthlyAcc;
trxKumulatifChartData = newData.monthlyAccTrx;
}
addData(amtTrendChart, amtTrendChartData);
addData(trxTrendChart, trxTrendChartData);
addData(amtKumulatifChart, amtKumulatifChartData);
addData(trxKumulatifChart, trxKumulatifChartData);
}
const formatter = new Intl.DateTimeFormat('id-ID', { dateStyle: 'full', timeStyle: 'medium' });
var today_el = document.getElementById('today');
odtoday = new Odometer({
el: today_el,
value: 0,
format: '(.ddd)',
});
var ytd_el = document.getElementById('ytd');
odytd = new Odometer({
el: ytd_el,
value: 0,
format: '(.ddd)',
});
// var ytd_target = new Odometer({
// el: document.getElementById('ytd_target'),
// value: 0,
// format: '(.ddd)',
// });
var table = $('#table1').DataTable(
{
"destroy": true,
"paging": false,
"searching": false,
"info": false,
"autoWidth": false,
"order": [[0, 'asc']],
"columnDefs": [
{ className: 'text-center', width: "50px", targets: [0] },
{ className: 'text-left', targets: [1] },
{ className: 'text-right', width: "100px", targets: [2, 3, 4, 5] }
]
}
);
var tableRefresh = function () {
table.clear();
var url = "${url}".replace("/pajak/", "/grid/");
$.get(url, {}, function (data, status) {
if (status === "success") {
console.log(data);
data.forEach(function (row) {
console.log(row);
table.row.add([
row.kode,
row.nama,
row.target.toLocaleString("id-ID"),
row.realisasi.toLocaleString("id-ID"),
row.sisa.toLocaleString("id-ID"),
row.persen.toFixed(2)
]);
});
table.draw();
} else {
console.log("Request failed.");
table.draw();
}
}).fail(function () {
console.log("Request failed.");
table.draw();
});
}
$.fn.datarefresh = function () {
// console.log("data_refresh");
// console.log("${url}");
$.get("${url}", {}, function (data, status) {
if (status === "success") {
newData = data;
date = new Date(newData.time);
odtoday.update(newData.today);
trx.innerHTML = parseInt(newData.trx).toLocaleString("id-ID");
odytd.update(newData.ytd);
ytdTarget.innerHTML = parseInt(newData.ytdTarget).toLocaleString("id-ID");
ytdPersen.innerHTML = parseFloat(newData.ytdPersen).toFixed(2) + "%";
trxYtd.innerHTML = parseInt(newData.trxYtd).toLocaleString("id-ID");
time.innerHTML = formatter.format(date);//newData.time;
time.style.fontWeight = 'bold';
// removeData(pieChart);
addData(pieChart, newData.pie);
trendChart();
tableRefresh();
} else {
console.log("Request failed.");
}
setTimeout(function () {
console.log("timeout");
$().datarefresh();
}, 300000);
}).fail(function () {
setTimeout(function () {
console.log("timeout");
$().datarefresh();
}, 300000);
});
}
</script>
</html>
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!