diff --git a/assets/css/molybdenum.css b/assets/css/molybdenum.css
index 461f73e..375a415 100755
--- a/assets/css/molybdenum.css
+++ b/assets/css/molybdenum.css
@@ -6,7 +6,7 @@
 :root {
     color-scheme: light only;
     --secondary-table: #1e634a;
-    --primary-table: #1182a4;
+    --primary-table: #17253b;
     --primary-foreground: #050607;
     --secondary-foreground: #aaaaac;
     --primary-background: #fefdfc;
diff --git a/assets/images/bpn.webp b/assets/images/bpn.webp
index 2c0684f..6908102 100644
Binary files a/assets/images/bpn.webp and b/assets/images/bpn.webp differ
diff --git a/assets/images/logo-text.webp b/assets/images/logo-text.webp
new file mode 100644
index 0000000..dee3e1a
Binary files /dev/null and b/assets/images/logo-text.webp differ
diff --git a/index.html b/index.html
index e16e6da..e7347fc 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 		<meta charset="utf-8">
         <meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0"/>
         <link rel="icon" type="image/webp" href="/assets/images/bpn.webp">
-        <title>Agen Perubahan Admin Panel</title>
+        <title>SIGAP ASN - Sistem Informasi Gerakan Agen Perubahan ASN</title>
         <link rel="preload" href="/assets/fonts/materials.woff2" as="font" type="font/woff2" crossorigin="anonymous">
         <link rel="preload" href="/assets/fonts/ss3l.woff2" as="font" type="font/woff2" crossorigin="anonymous">
         <link rel="preload" href="/assets/fonts/ss3il.woff2" as="font" type="font/woff2" crossorigin="anonymous">
@@ -45,7 +45,7 @@ aside
     min-height: 100%;
     width: 30ch;
     background-color: var(--primary-table);
-    color: var(--primary-foreground);
+    color: var(--primary-background);
     padding: .5ch;
     padding-top: 3.5em;
     box-shadow: var(--primary-foreground) .65ch 0, inset var(--primary-foreground) -13px 0 20px -25px;
@@ -148,7 +148,7 @@ nav
         <load-screen id="blocker" style="background-color : #fefdfc ; z-index: 1;"><sonar-ping></sonar-ping><load-message>Memuat Aplikasi...</load-message></load-screen>
         <aside>
             <div class="logobox">
-                <img src="/assets/images/logo-text.png" style="width: 100%; height: 100%; object-fit: contain; object-position: 1.5ch center;">
+                <img src="/assets/images/logo-text.webp" style="width: 100%; height: 100%; object-fit: contain; object-position: 1.5ch center;">
             </div>
             <div class="sidebar">
                 <div class="item" data-path="dasbor">
@@ -175,7 +175,7 @@ nav
             <nav>
                 <div>
                     <span>
-                        Agen Perubahan ATR/BPN Kanwil Riau
+                        SIGAP ASN ATR/BPN Kanwil Riau
                     </span>
                 </div>
                 &nbsp;
@@ -189,7 +189,7 @@ nav
                 
             </div>
             <div id="footer">
-                <span>Agen Perubahan Admin Panel <span id="vernum"></span></span>
+                <span>SIGAP ASN Panel <span id="vernum"></span></span>
                 &nbsp;
                 <span>ATR/BPN Kantor Wilayah Provinsi Riau</span>
             </div>
diff --git a/login.html b/login.html
index dca8bc5..e1b409c 100644
--- a/login.html
+++ b/login.html
@@ -4,7 +4,7 @@
 		<meta charset="utf-8">
         <meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0"/>
         <link rel="icon" type="image/webp" href="/assets/images/bpn.webp">
-        <title>Agen Perubahan ATR/BPN Riau</title>
+        <title>SIGAP ASN - Sistem Informasi Gerakan Agen Perubahan ASN</title>
         <link rel="preload" href="/assets/fonts/materials.woff2" as="font" type="font/woff2" crossorigin="anonymous">
         <link rel="preload" href="/assets/fonts/ss3l.woff2" as="font" type="font/woff2" crossorigin="anonymous">
         <link rel="preload" href="/assets/fonts/ss3il.woff2" as="font" type="font/woff2" crossorigin="anonymous">
@@ -37,9 +37,9 @@
     </head>
     <body style="margin: 0; height: 100%;">
         <load-screen id="blocker" style="background-color : #fefdfc ; z-index: 1;"><sonar-ping></sonar-ping><load-message>Memuat Aplikasi...</load-message></load-screen>
-        <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 2.4em); background-color: var(--secondary-background); flex-direction: column; background-image: url(/assets/images/bpn.webp); background-position-x: center; background-repeat: no-repeat;">
+        <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 2.4em); background-color: var(--secondary-background); flex-direction: column; background-image: url(/assets/images/bpn.webp); background-position-x: center; background-position-y: 7vh; background-repeat: no-repeat;">
             <div style="width: 40ch; padding: 1.5ch; background-color: var(--semi-background); backdrop-filter: blur(3px);" id="box">
-                <h3 style="text-align: center;"><span id="mt">Agen Perubahan ATR/BPN<br>Kantor Wilayah Provinsi Riau</span></h3>
+                <h3 style="text-align: center;"><span id="mt" style="text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px  1px 0 white, 1px  1px 0 white;">Masuk Aplikasi</span></h3>
                 <div style="margin: auto; width: max-content;">
                     <input id="uname" type="text" class="icon" placeholder="Username"><m-inline class="icon">person</m-inline><br>
                     <input id="pwd" type="password" class="icon peek" placeholder="Password"><m-inline class="icon">password</m-inline><a-button id="peeker" type="peek"><m-inline>visibility_on</m-inline></a-button><br>   
@@ -50,7 +50,7 @@
             </div>
         </div>
         <div style="height: 3em; background-color: var(--secondary-background); text-align: center; font-size: .8em;">
-            Agen Perubahan ATR/BPN Kanwil Riau <span id="vernum"></span><br>
+            Sistem Informasi Gerakan Agen Perubahan ASN <span id="vernum"></span><br>
             Kementerian ATR/BPN Kantor Wilayah Provinsi Riau
         </div>
     </body>
diff --git a/modules/dasbor-level1.html b/modules/dasbor-level1.html
new file mode 100644
index 0000000..84648ba
--- /dev/null
+++ b/modules/dasbor-level1.html
@@ -0,0 +1,172 @@
+<style>
+    .card{
+        border-radius: 1ch;
+        background-color: var(--input-background);
+        padding: 1.25ch;
+        display: grid; 
+        grid-template-columns: auto 1fr;
+    }
+    .ecard{
+        border-radius: 1ch;
+        background-color: var(--input-background);
+        padding: 1.25ch;
+    }
+    .numbers
+    {
+        width: 4ch;
+        height: 4ch;
+        background-color: var(--neutral-p-accent);
+        border-radius: 2ch;
+        text-align: center;
+        line-height: 2em;
+        margin: 1ch;
+    }
+    .numbers.warn
+    {
+        background-color: var(--neutral-n-accent);
+    }
+    .numbers.good
+    {
+        background-color: var(--positive-accent);
+    }
+    .texts{
+        font-weight: 600;
+        padding: 0 1ch;
+    }
+    .stexts{
+        padding: 0 1ch;
+    }
+</style>
+<div style="padding: 1ch; font-size: 1.2em; font-weight: 600;">
+    Dasbor Evaluator <span id="uk"></span>
+</div>
+<div style="display: grid; gap: 2ch; grid-template-columns: 1fr auto 1fr; padding: 1ch">
+    <div class="card">
+        <div class="numbers">
+            0
+        </div>
+        <div class="texts">
+            Rencana<br>
+            Aksi
+        </div>
+    </div>
+    <div class="card">
+        
+        <div class="numbers">
+            0
+        </div>
+        <div class="texts">
+            Aksi<br>
+            Berlangsung
+        </div>
+    </div>
+    <div class="card">
+        <div class="numbers warn">
+            0
+        </div>
+        <div class="texts">
+            Menunggu<br>
+            Evaluasi
+        </div>
+    </div>
+    <div style="grid-column: span 2;" class="ecard">
+        <div class="texts">
+            Paling Butuh Perhatian
+        </div>
+        <div class="stexts">
+            <span id="udate">Tanggal</span>
+            <span>-</span>
+            <span id="utext">Deskripsi</span>
+        </div>
+    </div>
+    <div class="card">
+        <div class="numbers good">
+            0
+        </div>
+        <div class="texts">
+            Telah<br>
+            Dievaluasi
+        </div>
+    </div>
+    <div class="ecard">
+        <div class="texts">
+            Hari Ini
+        </div>
+        <div class="stexts" id="htoday">
+            Tidak ada yang istimewa hari ini.
+        </div>
+    </div>
+    <div style="grid-column: span 2;" class="ecard">
+        <div class="texts">
+            <span id="mo"></span>
+            <span id="yr"></span>
+        </div>
+        <div class="stexts" id="calendar" style="display: grid; grid-template-columns: auto auto auto auto auto auto auto; gap: 1ch;">
+        </div>
+    </div>
+</div>
+<script type="module">
+    function µ(selector)
+    {
+        if (selector) return $('body>#main>#content').find(selector);
+        return $('body>#main>#content');
+    }
+    µ('#uk').text(userDetails.info.unitKerja);
+    µ('#mo').text(monthName[(new Date()).getMonth()+1]);
+    µ('#yr').text((new Date()).getFullYear());
+    function buildCalendar()
+    {
+        µ('#calendar').empty();
+        µ('#calendar')[0].style.marginTop = ".5em"
+        const dayNames = 
+        [
+            "Ahd",
+            "Sen",
+            "Sel",
+            "Rab",
+            "Kam",
+            "Jum",
+            "Sab"
+        ]
+        for (let d = 0;d<7;d++)
+        {
+            const day = moly.newElement("div");
+            day.append(dayNames[d]);
+            day.style.fontWeight = "600";
+            day.style.color = d == 0 ? "var(--negative-accent)" : "var(--primary-foreground)";
+            day.style.textAlign = "center"
+            day.style.borderBottom = "1px solid " + (d == 0 ? "var(--negative-accent)" : "var(--primary-foreground)");
+            µ('#calendar').append(day);
+        }
+        const today = new Date();
+        const tomonth = new Date(today.getFullYear(),today.getMonth(),1);
+        const tomonthl = new Date(today.getFullYear(),today.getMonth()+1,0);
+        const firstDay = tomonth.getDay();
+        console.log("today", today);
+        console.log("tomonth", tomonth);
+        console.log("firstday", firstDay);
+        const lastDate = tomonthl.getDate();
+        const todayDate = today.getDate()
+        let x = 0;
+        while (x <firstDay)
+        {
+            µ('#calendar').append(moly.newElement("div"));
+            x++;
+        }
+        for (let d = 1;d<=lastDate;d++)
+        {
+            const day = moly.newElement("div");
+            day.append(d);
+            day.style.color = (firstDay + d - 1) % 7 == 0 ? "var(--negative-accent)" : "var(--primary-foreground)";
+            day.style.textAlign = "center"
+            day.style.margin = "auto"
+            day.style.width = "2em"
+            day.style.height = "2em"
+            day.style.lineHeight = "2em"
+            day.style.borderRadius = "1em"
+            day.style.backgroundColor = d == todayDate ? "var(--secondary-background)" : "";
+            µ('#calendar').append(day);
+        }
+    }
+    buildCalendar();
+</script>
\ No newline at end of file
diff --git a/modules/dasbor-level2.html b/modules/dasbor-level2.html
new file mode 100644
index 0000000..50d8566
--- /dev/null
+++ b/modules/dasbor-level2.html
@@ -0,0 +1,172 @@
+<style>
+    .card{
+        border-radius: 1ch;
+        background-color: var(--input-background);
+        padding: 1.25ch;
+        display: grid; 
+        grid-template-columns: auto 1fr;
+    }
+    .ecard{
+        border-radius: 1ch;
+        background-color: var(--input-background);
+        padding: 1.25ch;
+    }
+    .numbers
+    {
+        width: 4ch;
+        height: 4ch;
+        background-color: var(--neutral-p-accent);
+        border-radius: 2ch;
+        text-align: center;
+        line-height: 2em;
+        margin: 1ch;
+    }
+    .numbers.warn
+    {
+        background-color: var(--neutral-n-accent);
+    }
+    .numbers.good
+    {
+        background-color: var(--positive-accent);
+    }
+    .texts{
+        font-weight: 600;
+        padding: 0 1ch;
+    }
+    .stexts{
+        padding: 0 1ch;
+    }
+</style>
+<div style="padding: 1ch; font-size: 1.2em; font-weight: 600;">
+    Dasbor Supervisor <span id="uk"></span>
+</div>
+<div style="display: grid; gap: 2ch; grid-template-columns: 1fr auto 1fr; padding: 1ch">
+    <div class="card">
+        <div class="numbers">
+            0
+        </div>
+        <div class="texts">
+            Rencana<br>
+            Aksi
+        </div>
+    </div>
+    <div class="card">
+        
+        <div class="numbers">
+            0
+        </div>
+        <div class="texts">
+            Aksi<br>
+            Berlangsung
+        </div>
+    </div>
+    <div class="card">
+        <div class="numbers warn">
+            0
+        </div>
+        <div class="texts">
+            Menunggu<br>
+            Respons
+        </div>
+    </div>
+    <div style="grid-column: span 2;" class="ecard">
+        <div class="texts">
+            Paling Butuh Perhatian
+        </div>
+        <div class="stexts">
+            <span id="udate">Tanggal</span>
+            <span>-</span>
+            <span id="utext">Deskripsi</span>
+        </div>
+    </div>
+    <div class="card">
+        <div class="numbers good">
+            0
+        </div>
+        <div class="texts">
+            Telah<br>
+            Direspons
+        </div>
+    </div>
+    <div class="ecard">
+        <div class="texts">
+            Hari Ini
+        </div>
+        <div class="stexts" id="htoday">
+            Tidak ada yang istimewa hari ini.
+        </div>
+    </div>
+    <div style="grid-column: span 2;" class="ecard">
+        <div class="texts">
+            <span id="mo"></span>
+            <span id="yr"></span>
+        </div>
+        <div class="stexts" id="calendar" style="display: grid; grid-template-columns: auto auto auto auto auto auto auto; gap: 1ch;">
+        </div>
+    </div>
+</div>
+<script type="module">
+    function µ(selector)
+    {
+        if (selector) return $('body>#main>#content').find(selector);
+        return $('body>#main>#content');
+    }
+    µ('#uk').text(userDetails.info.unitKerja);
+    µ('#mo').text(monthName[(new Date()).getMonth()+1]);
+    µ('#yr').text((new Date()).getFullYear());
+    function buildCalendar()
+    {
+        µ('#calendar').empty();
+        µ('#calendar')[0].style.marginTop = ".5em"
+        const dayNames = 
+        [
+            "Ahd",
+            "Sen",
+            "Sel",
+            "Rab",
+            "Kam",
+            "Jum",
+            "Sab"
+        ]
+        for (let d = 0;d<7;d++)
+        {
+            const day = moly.newElement("div");
+            day.append(dayNames[d]);
+            day.style.fontWeight = "600";
+            day.style.color = d == 0 ? "var(--negative-accent)" : "var(--primary-foreground)";
+            day.style.textAlign = "center"
+            day.style.borderBottom = "1px solid " + (d == 0 ? "var(--negative-accent)" : "var(--primary-foreground)");
+            µ('#calendar').append(day);
+        }
+        const today = new Date();
+        const tomonth = new Date(today.getFullYear(),today.getMonth(),1);
+        const tomonthl = new Date(today.getFullYear(),today.getMonth()+1,0);
+        const firstDay = tomonth.getDay();
+        console.log("today", today);
+        console.log("tomonth", tomonth);
+        console.log("firstday", firstDay);
+        const lastDate = tomonthl.getDate();
+        const todayDate = today.getDate()
+        let x = 0;
+        while (x <firstDay)
+        {
+            µ('#calendar').append(moly.newElement("div"));
+            x++;
+        }
+        for (let d = 1;d<=lastDate;d++)
+        {
+            const day = moly.newElement("div");
+            day.append(d);
+            day.style.color = (firstDay + d - 1) % 7 == 0 ? "var(--negative-accent)" : "var(--primary-foreground)";
+            day.style.textAlign = "center"
+            day.style.margin = "auto"
+            day.style.width = "2em"
+            day.style.height = "2em"
+            day.style.lineHeight = "2em"
+            day.style.borderRadius = "1em"
+            day.style.backgroundColor = d == todayDate ? "var(--secondary-background)" : "";
+            µ('#calendar').append(day);
+        }
+    }
+    buildCalendar();
+</script>
\ No newline at end of file
diff --git a/modules/dasbor-level3.html b/modules/dasbor-level3.html
new file mode 100644
index 0000000..a7d8ee1
--- /dev/null
+++ b/modules/dasbor-level3.html
@@ -0,0 +1,172 @@
+<style>
+    .card{
+        border-radius: 1ch;
+        background-color: var(--input-background);
+        padding: 1.25ch;
+        display: grid; 
+        grid-template-columns: auto 1fr;
+    }
+    .ecard{
+        border-radius: 1ch;
+        background-color: var(--input-background);
+        padding: 1.25ch;
+    }
+    .numbers
+    {
+        width: 4ch;
+        height: 4ch;
+        background-color: var(--neutral-p-accent);
+        border-radius: 2ch;
+        text-align: center;
+        line-height: 2em;
+        margin: 1ch;
+    }
+    .numbers.warn
+    {
+        background-color: var(--neutral-n-accent);
+    }
+    .numbers.good
+    {
+        background-color: var(--positive-accent);
+    }
+    .texts{
+        font-weight: 600;
+        padding: 0 1ch;
+    }
+    .stexts{
+        padding: 0 1ch;
+    }
+</style>
+<div style="padding: 1ch; font-size: 1.2em; font-weight: 600;">
+    Dasbor Agen Perubahan <span id="uk"></span>
+</div>
+<div style="display: grid; gap: 2ch; grid-template-columns: 1fr auto 1fr; padding: 1ch">
+    <div class="card">
+        <div class="numbers">
+            0
+        </div>
+        <div class="texts">
+            Rencana<br>
+            Aksi
+        </div>
+    </div>
+    <div class="card">
+        
+        <div class="numbers">
+            0
+        </div>
+        <div class="texts">
+            Aksi<br>
+            Berlangsung
+        </div>
+    </div>
+    <div class="card">
+        <div class="numbers warn">
+            0
+        </div>
+        <div class="texts">
+            Menunggu<br>
+            Evaluasi
+        </div>
+    </div>
+    <div style="grid-column: span 2;" class="ecard">
+        <div class="texts">
+            Paling Butuh Perhatian
+        </div>
+        <div class="stexts">
+            <span id="udate">Tanggal</span>
+            <span>-</span>
+            <span id="utext">Deskripsi</span>
+        </div>
+    </div>
+    <div class="card">
+        <div class="numbers good">
+            0
+        </div>
+        <div class="texts">
+            Telah<br>
+            Dievaluasi
+        </div>
+    </div>
+    <div class="ecard">
+        <div class="texts">
+            Hari Ini
+        </div>
+        <div class="stexts" id="htoday">
+            Tidak ada yang istimewa hari ini.
+        </div>
+    </div>
+    <div style="grid-column: span 2;" class="ecard">
+        <div class="texts">
+            <span id="mo"></span>
+            <span id="yr"></span>
+        </div>
+        <div class="stexts" id="calendar" style="display: grid; grid-template-columns: auto auto auto auto auto auto auto; gap: 1ch;">
+        </div>
+    </div>
+</div>
+<script type="module">
+    function µ(selector)
+    {
+        if (selector) return $('body>#main>#content').find(selector);
+        return $('body>#main>#content');
+    }
+    µ('#uk').text(userDetails.info.unitKerja);
+    µ('#mo').text(monthName[(new Date()).getMonth()+1]);
+    µ('#yr').text((new Date()).getFullYear());
+    function buildCalendar()
+    {
+        µ('#calendar').empty();
+        µ('#calendar')[0].style.marginTop = ".5em"
+        const dayNames = 
+        [
+            "Ahd",
+            "Sen",
+            "Sel",
+            "Rab",
+            "Kam",
+            "Jum",
+            "Sab"
+        ]
+        for (let d = 0;d<7;d++)
+        {
+            const day = moly.newElement("div");
+            day.append(dayNames[d]);
+            day.style.fontWeight = "600";
+            day.style.color = d == 0 ? "var(--negative-accent)" : "var(--primary-foreground)";
+            day.style.textAlign = "center"
+            day.style.borderBottom = "1px solid " + (d == 0 ? "var(--negative-accent)" : "var(--primary-foreground)");
+            µ('#calendar').append(day);
+        }
+        const today = new Date();
+        const tomonth = new Date(today.getFullYear(),today.getMonth(),1);
+        const tomonthl = new Date(today.getFullYear(),today.getMonth()+1,0);
+        const firstDay = tomonth.getDay();
+        console.log("today", today);
+        console.log("tomonth", tomonth);
+        console.log("firstday", firstDay);
+        const lastDate = tomonthl.getDate();
+        const todayDate = today.getDate()
+        let x = 0;
+        while (x <firstDay)
+        {
+            µ('#calendar').append(moly.newElement("div"));
+            x++;
+        }
+        for (let d = 1;d<=lastDate;d++)
+        {
+            const day = moly.newElement("div");
+            day.append(d);
+            day.style.color = (firstDay + d - 1) % 7 == 0 ? "var(--negative-accent)" : "var(--primary-foreground)";
+            day.style.textAlign = "center"
+            day.style.margin = "auto"
+            day.style.width = "2em"
+            day.style.height = "2em"
+            day.style.lineHeight = "2em"
+            day.style.borderRadius = "1em"
+            day.style.backgroundColor = d == todayDate ? "var(--secondary-background)" : "";
+            µ('#calendar').append(day);
+        }
+    }
+    buildCalendar();
+</script>
\ No newline at end of file
diff --git a/modules/dasbor.html b/modules/dasbor.html
index e69de29..6afbb1c 100644
--- a/modules/dasbor.html
+++ b/modules/dasbor.html
@@ -0,0 +1,13 @@
+<script type="module">
+    async function getContent()
+    {
+        const loadid = moly.loadScreen.show("Memuat Dasbor...", "dots","#content");
+        const cont = await fetch("/modules/dasbor-level"+level+".html");
+        if (cont.status != 200) return "Gagal Memuat Konten. Silakan ulangi kembali beberapa saat lagi.";
+        moly.loadScreen.close(loadid);
+        return await cont.text();
+    }
+    const level = userDetails.level ==0 ? 1 : userDetails.level;
+    $('#content').html(await getContent());
+    // console.log(await getContent())
+</script>
\ No newline at end of file
diff --git a/modules/kegiatan-proker-evaled.html b/modules/kegiatan-proker-evaled.html
new file mode 100644
index 0000000..edb8f43
--- /dev/null
+++ b/modules/kegiatan-proker-evaled.html
@@ -0,0 +1,42 @@
+<div>
+    Sasaran Aksi:
+</div>
+<div id="sasaran" style="margin-bottom: .5em;">&nbsp;</div>
+<div>
+    Kendala, Hambatan, dan Masalah:
+</div>
+<textarea disabled id="kendala" style="width: 75ch;height: 6em; resize: none;" maxlength="240" placeholder="(Tidak ada kendala)">
+</textarea>
+<div>
+    Solusi:
+</div>
+<textarea disabled id="solusi" style="width: 100%;height: 6em; resize: none;" maxlength="240" placeholder="(Tidak ada solusi)">
+</textarea>
+<div>
+    Catatan Evaluasi:
+</div>
+<textarea disabled id="evalnotes" style="width: 100%;height: 6em; resize: none;" maxlength="240" placeholder="(Tidak ada solusi)">
+</textarea>
+<script type="module">
+    const thisDialog = moly.lastDialog();
+    const data = thisDialog.data;
+    const journal = data.journal.find(j=>j.status == 4);
+    const evalnotes = data.journal.find(j=>j.status == 8).notes;
+    const notes = JSON.parse(journal.notes);
+    function µ(selector)
+    {
+        if (selector) return $(thisDialog.box).find(selector);
+        return $(thisDialog.box);
+    }
+    µ('#sasaran').text(data.sasaran);
+    µ('#kendala').text(notes.kendala);
+    µ('#solusi').text(notes.solusi);
+    µ('#evalnotes').text(evalnotes);
+    µ('#ve').text(journal.document);
+    µ('#ve').click(async()=>{
+        const loadid = moly.loadScreen.show("Memroses berkas...","bar","#main");
+        await moly.dialog.show({title: "Preview Eviden", content:"/modules/pdf-previewer.html",fetching:true, data: {url: "/uploads/dokumen/" + journal.document}});
+        moly.loadScreen.close(loadid)
+        thisDialog.resolve(false);
+    });
+</script>
\ No newline at end of file
diff --git a/modules/kegiatan-proker-finished.html b/modules/kegiatan-proker-finished.html
index 5680bc6..1fa73a9 100644
--- a/modules/kegiatan-proker-finished.html
+++ b/modules/kegiatan-proker-finished.html
@@ -19,9 +19,8 @@
 <script type="module">
     const thisDialog = moly.lastDialog();
     const data = thisDialog.data;
-    const journal = data.journal.at(-1);
+    const journal = data.journal.find(j=>j.status == 4) ;
     const notes = JSON.parse(journal.notes);
-    console.log(data)
     function µ(selector)
     {
         if (selector) return $(thisDialog.box).find(selector);
diff --git a/modules/kegiatan.html b/modules/kegiatan.html
index 595b080..dff9a0f 100644
--- a/modules/kegiatan.html
+++ b/modules/kegiatan.html
@@ -17,11 +17,12 @@
     <table id="proker" class="bordered selectable">
         <colgroup>
             <col style="width: 4ch;">
-            <col style="width: 19ch;">
+            <col style="width: 27ch;">
             <col>
             <col style="width: 8ch;">
             <col style="width: 17ch;">
             <col style="width: 16ch;">
+            <col style="width: 9ch;">
         </colgroup>
         <thead>
             <tr>
@@ -31,11 +32,12 @@
                 <th>Target Waktu</th>
                 <th>Waktu Mulai</th>
                 <th>Status</th>
+                <th>Evaluasi</th>
             </tr>
         </thead>
         <tbody id="empty">
             <tr>
-                <td colspan="6" style="text-align: center;">Data Kosong</td>
+                <td colspan="7" style="text-align: center;">Data Kosong</td>
             </tr>
         </tbody>
         <tbody id="pkContent" hidden>
@@ -146,10 +148,10 @@
             "text-align: center; background-color: var(--neutral-p-accent); color: var(--primary-foreground)",
             "text-align: center; background-color: var(--neutral-n-accent); color: var(--primary-foreground)",
             "text-align: center; background-color: var(--negative-accent); color: var(--primary-background)",
-            "text-align: center; background-color: unset; color: var(--positive-accent)", // belum jadwalnya
-            "text-align: center; background-color: unset; color: unset", // berjalan 
-            "text-align: center; background-color: unset; color: var(--neutral-n-accent)", // hampir deadline
-            "text-align: center; background-color: unset; color: var(--negative-accent)" // terlambat
+            "text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--positive-accent)", // belum jadwalnya
+            "text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--neutral-p-accent)", // berjalan 
+            "text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--neutral-n-accent)", // hampir deadline
+            "text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--negative-accent)" // terlambat
         ];
         $.each(listedProkers,(i,v)=>{
             
@@ -160,12 +162,14 @@
             const tw = moly.newElement("td");
             const wm = moly.newElement("td");
             const st = moly.newElement("td");
+            const ev = moly.newElement("td");
             ro.append(no);
             ro.append(kg);
             ro.append(ss);
             ro.append(tw);
             ro.append(wm);
             ro.append(st);
+            ro.append(ev);
             no.append((i+1)+".");
             no.style.textAlign = "right";
             kg.append(kegiatanName[v.kegiatan]);
@@ -176,13 +180,17 @@
             wm.style.textAlign = "right";
             const Now = new Date();
             const doneline = new Date(v.journal.at(-1).timeStamp);
-            const lifeline = v.isInMonth ? new Date(v.year, v.startMonth -1, 1) : new Date(v.year, v.startMonth -1, v.startDay);
-            const deadline = v.isInMonth ? new Date(v.year, v.startMonth + v.timeTarget, 0) : new Date(v.year, v.startMonth -1, v.startDay + v.timeTarget);
-            const neardeadline = (new Date(deadline)).setDate(deadline.getDate() - 15);
-            v.status = v.journal.at(-1).status == 4 && doneline < lifeline ? 4 : v.journal.at(-1).status == 4 && doneline <= deadline ? 5 : v.journal.at(-1).status == 4 && doneline > deadline ? 6 : v.journal.at(-1).status == 3 && v.year < Now.getFullYear() ? 7 : 3;
+            const lifeline = (v.isInMonth ? new Date(v.year, v.startMonth -1, 1) : new Date(v.year, v.startMonth -1, v.startDay)).setHours(0,0,0,0);
+            const deadline = new Date((v.isInMonth ? new Date(v.year, v.startMonth + v.timeTarget, 0) : new Date(v.year, v.startMonth -1, v.startDay + v.timeTarget)).setHours(23,59,59));
+            const neardeadline = new Date((new Date(deadline)).setDate(deadline.getDate() - 15)).setHours(0,0,0,0);
+            // v.status = v.journal.at(-1).status == 4 && doneline < lifeline ? 4 : v.journal.at(-1).status == 4 && doneline <= deadline ? 5 : v.journal.at(-1).status == 4 && doneline > deadline ? 6 : v.journal.at(-1).status == 3 && v.year < Now.getFullYear() ? 7 : 3;
+            v.status = v.journal.at(-1).status == 8 ? (v.journal.at(-2).status == 4 && doneline < lifeline ? 4 : v.journal.at(-2).status == 4 && doneline <= deadline ? 5 : v.journal.at(-2).status == 4 && doneline > deadline ? 6 : v.journal.at(-2).status == 3 && v.year < Now.getFullYear() ? 7 : 3) : (v.journal.at(-1).status == 4 && doneline < lifeline ? 4 : v.journal.at(-1).status == 4 && doneline <= deadline ? 5 : v.journal.at(-1).status == 4 && doneline > deadline ? 6 : v.journal.at(-1).status == 3 && v.year < Now.getFullYear() ? 7 : 3);
             st.append(statusName[v.status]);
+            ev.append(v.journal.at(-1).status == 8 ? "Sudah" : v.journal.at(-1).status < 4 ? "---" : "Belum");
+            ev.style.textAlign = "center";
+            ev.style.backgroundColor = v.journal.at(-1).status == 8 ? "var(--positive-accent)" : v.journal.at(-1).status < 4 ? "" : "var(--neutral-n-accent)";
             v.styleCode = v.status != 3 ? v.status : Now < lifeline ? 8 : Now < neardeadline ? 9 : Now >= neardeadline && Now < deadline ? 10 : 11;
-            $(st).text(v.status != 3 ? $(st).text() : Now < lifeline ? "Belum Jadwalnya" : Now < neardeadline ? "Berjalan" : Now >= neardeadline && Now <= deadline ? "Hampir Deadline" : "Lewat Deadline");
+            $(st).text(v.status != 3 ? $(st).text() : Now < lifeline ? "Belum Jadwalnya" : Now < neardeadline ? "Berjalan" : Now >= neardeadline && Now.getDate() == deadline.getDate() && Now.getMonth() == deadline.getMonth() ? "Deadline!" : Now >= neardeadline && Now <= deadline ? "Hampir Deadline" : "Lewat Deadline");
             st.style = statusStyles[v.styleCode];
             $(ro).click(async()=>{
                 const data = v;
@@ -191,6 +199,10 @@
                     const vw = await moly.dialog.show({title: "Detil Program Kerja", content: "/modules/kegiatan-proker-edit.html", fetching: true, data});
                     if(vw) populateProker();
                 }
+                else if (data.journal.at(-1).status == 8)
+                {
+                    await moly.dialog.show({title: "Hasil Evaluasi Aksi Perubahan", content: "/modules/kegiatan-proker-evaled.html", fetching: true, data})
+                }
                 else if (data.journal.at(-1).status > 3)
                 {
                     await moly.dialog.show({title: "Lihat Eviden Akhir Aksi Perubahan", content: "/modules/kegiatan-proker-finished.html", fetching: true, data})
diff --git a/modules/monev-detil.html b/modules/monev-detil.html
new file mode 100644
index 0000000..73e7781
--- /dev/null
+++ b/modules/monev-detil.html
@@ -0,0 +1,146 @@
+<div style="display: grid; grid-template-columns: auto 1fr; column-gap: 1.5ch;">
+    <div style="display: grid; grid-template-columns: auto auto 1fr; column-gap: 1ch;">
+        <span>Kegiatan</span>
+        &nbsp;
+        <select id="kegiatan" style="width: max-content;" disabled>
+            <option value="-1" selected disabled>-Pilih Kegiatan-</option>
+            <option value="0">Sebagai Katalis</option>
+            <option value="1">Sebagai Penggerak Perubahan</option>
+            <option value="2">Sebagai Pemberi Solusi</option>
+            <option value="3">Sebagai Mediator</option>
+            <option value="4">Sebagai Penghubung</option>
+        </select>
+        <span>Target Waktu</span>
+        &nbsp;
+        <div>
+            <input type="number" id="target" min="1" style="width: 7ch;" value="1" disabled>
+            &nbsp;
+            <select id="targetUnit" style="width: max-content;" disabled>
+                <option value="0">Hari</option>
+                <option value="1" selected>Bulan</option>
+            </select>
+        </div>
+        <span class="forDay" hidden>Tgl Mulai</span>
+        <span class="forDay" hidden></span>
+        <input class="forDay" type="date" id="startDate" style="max-width: max-content;" hidden disabled>
+        <span class="forMonth">Bulan Mulai</span>
+        <span class="forMonth"></span>
+        <input class="forMonth" type="month" id="startMonth" style="max-width: max-content;" disabled>
+        <div style="grid-column: span 3;">
+            <span>Sasaran Kegiatan:</span><br>
+            <textarea disabled id="sasaran" style="resize: none; width: 100%; height: 4.6em;" maxlength="510" placeholder="Contoh: Mengenakan seragam sesuai aturan."></textarea>
+        </div>
+        <div style="grid-column: span 3;">
+            <span>Sasaran Entitas:</span><br>
+            <textarea disabled id="enttarget" style="resize: none; width: 100%; height: 4.6em;" maxlength="510" placeholder="Contoh: Seluruh pegawai Kanwil BPN Provinsi Riau."></textarea>
+        </div>
+        <div style="grid-column: span 3;">
+            <span>Indikator:</span><br>
+            <textarea disabled id="indikator" style="resize: none; width: 100%; height: 4.6em;" maxlength="510" placeholder="Contoh: Persentase pegawai taat aturan berpakaian."></textarea>
+        </div>
+        <div style="grid-column: span 3;">
+            <span>Rencana Aksi:</span><br>
+            <textarea disabled id="aksi" style="resize: none; width: 100%; height: 4.6em;" maxlength="510" placeholder="Contoh: Sosialisasi aturan berpakaian."></textarea>
+        </div>
+    </div>
+    <div style="width: 54ch;">
+        <div style="display: grid; grid-template-columns: auto 1fr; column-gap: 1ch; grid-auto-rows: 1.8em; line-height: 1.8em;">
+            <span style="grid-column: span 2;">Ringkasan Jurnal:</span>
+            <span>Status Terakhir</span>
+            <div style="display: grid; grid-template-columns: 1fr auto auto; column-gap: 1ch; grid-auto-rows: 1.8em; line-height: 1.8em;"><div id="lastStatus"></div><div id="evalstat" style="padding: 0 .5ch;">---</div><a-button id="eval" style="padding: 0 .5ch;">Evaluasi</a-button></div>
+            <span>Tanggal/Waktu</span>
+            <div id="lastDate"></div>
+            <span style="grid-column: span 2;">Timeline Jurnal:</span>
+            <div style="grid-column: span 2; overflow: hidden auto; height: 24em;" id="detJournal">
+                
+            </div>
+        </div>
+    </div>
+</div>
+<script type="module">
+    const thisDialog = moly.lastDialog();
+    const data = thisDialog.data;
+    function µ(selector)
+    {
+        if (selector) return $(thisDialog.box).find(selector);
+        return $(thisDialog.box);
+    }
+    function fillForms()
+    {
+        µ('#aksi').val(data.actions);
+        µ('#enttarget').val(data.entityTarget);
+        µ('#indikator').val(data.indicators);
+        µ('#targetUnit').val(data.isInMonth ? 1 : 0);
+        µ('#kegiatan').val(data.kegiatan);
+        µ('#sasaran').val(data.sasaran);
+        let DateTime = data.year + "-" + data.startMonth.toString().padStart(2,"0");
+        DateTime += data.isInMonth ? "" : "-" + data.startDay.toString().padStart(2,"0");
+        µ('#target').val(data.timeTarget);
+        if(data.isInMonth)
+        {
+            µ('#startMonth').val(DateTime);
+        }
+        else
+        {
+            µ('#startDate').val(DateTime);
+        }
+        µ('#lastStatus').text(data.statusText);
+        µ('#lastStatus')[0].style = data.statusStyle;
+        µ('#evalstat').text(data.journal.at(-1).status == 8 ? "(Sudah Evaluasi)" : data.journal.at(-1).status < 4 ? "(Belum Selesai)" : "(Belum Evaluasi)");
+        µ('#eval').prop("disabled",(data.journal.at(-1).status < 4 || data.journal.at(-1).status == 8));
+        µ('#lastDate').text(data.journal.at(-1).timeStamp);
+        µ('#detJournal').empty();
+        $.each(data.journal,(_,v)=>{
+            const group = moly.customElement("group-el");
+            const by = moly.newElement("div");
+            const st = moly.newElement("div");
+            const no = moly.newElement("div");
+            group.append(by);
+            // group.append(st);
+            group.append(no);
+            group.setAttribute("label",v.timeStamp);
+            group.setAttribute("collapsed","");
+            by.append((v.status >=4 && v.status <=6 ? "Selesai " : "") + (data.statusNames[v.status] == "Berjalan" ? "Disetujui" : (data.statusNames[v.status] ?? "")) + (v.status == 8 ? "Dievaluasi" : "") + " oleh "+ agents.find(e=>e.agentID == v.submitterID).name);
+            by.style = "font-style: italic;"
+            st.append("Status: " + (v.status >=4 && v.status <=6 ? "Selesai " : "") + data.statusNames[v.status]);
+            if(v.status ==4)
+            {
+                const ks = JSON.parse(v.notes);
+                no.append("Kendala:");
+                no.append(moly.newElement("br"));
+                no.append(ks.kendala.length > 1? ks.kendala : "-");
+                no.append(moly.newElement("br"));
+                no.append("Solusi:");
+                no.append(moly.newElement("br"));
+                no.append(ks.solusi.length > 1? ks.solusi : "-");
+            }
+            else
+            {
+                no.append("Catatan:");
+                no.append(moly.newElement("br"));
+                no.append(v.notes.length > 1? v.notes : "-");
+            }
+            // console.log(typeof v.document)
+            if(typeof v.document === "string")
+            {
+                // alert('s')
+                const doc = moly.newElement("div");
+                const doclink = moly.customElement("a-button");
+                doc.append("Lihat Dokumen: ");
+                doc.append(doclink);
+                doclink.append(v.document);
+                $(doclink).click(async()=>{
+                    await moly.dialog.show({title: "Preview Eviden", content:"/modules/pdf-previewer.html",fetching:true, data: {url: "/uploads/dokumen/" + v.document}});
+                })
+                group.append(doc);
+            }
+            µ('#detJournal').append(group);
+        })
+        $('#detJournal').children().last().prop("collapsed", false);
+    }
+    fillForms();
+    µ('#eval').click(async()=>{
+        const evalr = await moly.dialog.show({title: "Evaluasi Aksi Perubahan", content: "/modules/monev-eval.html", fetching: true, data});
+        if(evalr) thisDialog.resolve(data.owner.agentID);
+    });
+</script>
\ No newline at end of file
diff --git a/modules/monev-eval.html b/modules/monev-eval.html
new file mode 100644
index 0000000..8e5ab03
--- /dev/null
+++ b/modules/monev-eval.html
@@ -0,0 +1,64 @@
+
+<div style="display: grid;  grid-template-columns: auto 1fr; column-gap: 1ch; height: 80vh;">
+    <div>
+        <div>Dokumen Eviden:</div>
+        <iframe style="width: 68vw; height: calc(83vh - 3.5em); width: calc(88vw - 38ch)">
+
+        </iframe>
+    </div>
+    <div style="display: grid; grid-template-columns: auto 1fr; column-gap: 1ch; width: 35ch; grid-auto-rows: min-content;">
+        <span style="grid-column: span 2;">Aksi Perubahan</span>
+        <textarea id="act" style="grid-column: span 2; width: 35ch; height: 5em; resize: none;" readonly></textarea>
+        Rencana&nbsp;Mulai <span id="planStart"></span>
+        Rencana&nbsp;Durasi <span id="planDur"></span>
+        Selesai&nbsp;Pada <span id="finishedAt"></span>
+        Status&nbsp;Selesai <span id="doneStat"></span>
+        <span style="grid-column: span 2;">
+            Kendala:
+        </span>
+        <textarea id="pro" style="grid-column: span 2; width: 35ch; height: 5em; resize: none;" placeholder="(Tidak ada kendala)" readonly></textarea>
+        <span style="grid-column: span 2;">
+            Solusi:
+        </span>
+        <textarea id="sol" style="grid-column: span 2; width: 35ch; height: 5em; resize: none;" placeholder="(Tidak ada solusi)" readonly></textarea>
+        <span style="grid-column: span 2;">
+            Catatan Evaluasi:
+        </span>
+        <textarea id="evalnotes" style="grid-column: span 2; width: 35ch; height: 5em; resize: none;" placeholder="Contoh: Bagus, harap pertahankan kinerja saudara."></textarea>
+    </div>
+</div>
+<div style="text-align: right;">
+    <a-button id="submit">Kirim Evaluasi</a-button>
+</div>
+<script type="module">
+    const thisDialog = moly.lastDialog();
+    const data = thisDialog.data;
+    function µ(selector)
+    {
+        if (selector) return $(thisDialog.box).find(selector);
+        return $(thisDialog.box);
+    }
+    const finJour = data.journal.find(e=>e.status == 4);
+    const prosol = JSON.parse(finJour.notes);
+    console.log(data)
+    µ('#act').val(data.actions);
+    µ('#pro').val(prosol.kendala);
+    µ('#sol').val(prosol.solusi);
+    µ('#planStart').text(data.year + "-" + data.startMonth.toString().padStart(2,"0")+ (data.isInMonth ? "" : "-" + data.startDay.toString().padStart(2,"0")));
+    µ('#planDur').text(data.timeTarget + " " + (data.isInMonth ? "Bulan" : "Hari"));
+    µ('#finishedAt').text(finJour.timeStamp.substring(0,16));
+    µ('#doneStat').text(data.statusText);
+    µ('iframe')[0].src="/uploads/dokumen/" + finJour.document;
+    µ('#submit').click(async()=>{
+        const loadid = moly.loadScreen.show("Mengirim Evaluasi...","sonar","#"+µ('div[id^="db"]')[0].id)
+        const evalres = await postJson('/api/eval', {prokerid: data.prokerID, notes: µ('#evalnotes').val().length > 0 ? µ('#evalnotes').val(): "-"});
+        if(evalres.status != 201)
+        {
+            moly.alert.show("Pengiriman Evaluaasi Gagal","Tidak dapat mengirim evaluasi. Silakan ulangi kembali beberapa saat lagi.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        moly.loadScreen.close(loadid);
+        thisDialog.resolve(true);
+    });
+</script>
\ No newline at end of file
diff --git a/modules/monev.html b/modules/monev.html
new file mode 100644
index 0000000..7cd61bb
--- /dev/null
+++ b/modules/monev.html
@@ -0,0 +1,274 @@
+<group-el label="Daftar Agen Perubahan" id="agGroup">
+    <div style="text-align: center; font-weight: 600; margin: .8em 0; font-size: 1.1em;">
+        Daftar Agen Perubahan<br>
+        <span id="uk"></span>
+    </div>
+    <div style="max-height: calc(50vh - 6em); overflow-y: scroll; margin: 0 0 1em 0; padding: 0 2ch 2ch 2ch;" id="agWrapper">
+        <table id="agents" class="bordered selectable">
+            <colgroup>
+                <col style="width: 4ch;">
+                <col style="width: 22ch;">
+                <col>
+            </colgroup>
+            <thead>
+                <tr>
+                    <th>No</th>
+                    <th>NIP</th>
+                    <th>Nama Agen</th>
+                </tr>
+            </thead>
+            <tbody id="agEmpty">
+                <tr>
+                    <td colspan="3" style="text-align: center;"> 
+                        Data Kosong
+                    </td>
+                </tr>
+            </tbody>
+            <tbody id="agContent" hidden>
+
+            </tbody>
+        </table>
+    </div>
+</group-el>
+<group-el label="Program Kerja" id="pkGroup" collapsed disabled>
+    <div style="text-align: center; font-weight: 600; margin: .8em 0; font-size: 1.1em;">
+        Program Kerja Agen Perubahan<br>
+        <span id="agName"></span>
+    </div>
+    <div style="display: flex; justify-content: space-between; padding: 0 2.5ch;">
+        <span>Tahun:&nbsp;
+            <select id="pkYear" style="width: max-content;">
+
+            </select>
+        </span>
+        &nbsp;
+    </div>
+    <div style="max-height: calc(50vh - 6em); overflow-y: scroll; margin: 0 0 1em 0; padding: 0 2ch 2ch 2ch;" id="pkWrapper">
+        <table id="proker" class="bordered selectable">
+            <colgroup>
+                <col style="width: 4ch;">
+                <col style="width: 27ch;">
+                <col>
+                <col style="width: 8ch;">
+                <col style="width: 17ch;">
+                <col style="width: 16ch;">
+                <col style="width: 9ch;">
+            </colgroup>
+            <thead>
+                <tr>
+                    <th>No</th>
+                    <th>Kegiatan</th>
+                    <th>Sasaran</th>
+                    <th>Target Waktu</th>
+                    <th>Waktu Mulai</th>
+                    <th>Status</th>
+                    <th>Evaluasi</th>
+                </tr>
+            </thead>
+            <tbody id="empty">
+                <tr>
+                    <td colspan="7" style="text-align: center;">Data Kosong</td>
+                </tr>
+            </tbody>
+            <tbody id="pkContent" hidden>
+            </tbody>
+        </table>
+    </div>
+</group-el>
+<script type="module">
+    let prokers = [];
+    const kegiatanName = [
+        "Sebagai Katalis",
+        "Sebagai Penggerak Perubahan",
+        "Sebagai Pemberi Solusi",
+        "Sebagai Mediator",
+        "Sebagai Penghubung"
+    ]
+    const statusName = [
+        "Draft",
+        "Ditolak",
+        "Diajukan",
+        "Berjalan",
+        "Lebih Awal",
+        "Tepat Waktu",
+        "Terlambat",
+        "Tidak Terlaksana"
+    ]
+    async function populateProker(agentID)
+    {
+        if(!agentID) return;
+        const loadid = moly.loadScreen.show("Memuat Daftar Program Kerja...","bar","#pkWrapper");
+        prokers = await getJson('/api/getprokers');
+        if (prokers.status != 200 || prokers.length < 1) 
+        {
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        $('#agName').text(agents.find(a=>a.agentID == agentID)?.name);
+        prokers.data = prokers.data.filter(e=>e.ownerID == agentID);
+        $('#pkYear').empty();
+        const years = [];
+        prokers = prokers.data.reduce((a,v)=>{
+            const aindex = a.findIndex(e=>e.prokerID == v.prokerID);
+            if(!years.includes(v.year))
+            {
+                years.push(v.year);
+                const opt = moly.newElement("option");
+                opt.value = v.year;
+                opt.append(v.year);
+                $('#pkYear').append(opt);
+            }
+            if(aindex >=0)
+            {
+                a[aindex].journal.push({
+                    journalID: v.journalID,
+                    submitterID: v.submitterID,
+                    notes: v.notes,
+                    status: v.status,
+                    document: v.document,
+                    timeStamp: v.timeStamp.replace("T"," ")
+                })
+                a[aindex].journal.sort((ja,jb)=>ja.journalID.localeCompare(jb.journalID));
+            }
+            else
+            {
+                const nv = JSON.parse(JSON.stringify(v));
+                nv.journal= [{
+                    journalID: v.journalID,
+                    submitterID: v.submitterID,
+                    notes: v.notes,
+                    status: v.status,
+                    document: v.document,
+                    timeStamp: v.timeStamp.replace("T"," ")
+                }]
+                const owner = agents.find(e=> e.agentID == v.ownerID)
+                if (owner)
+                {
+                    nv.owner = owner
+                    delete nv.ownerID
+                }
+                delete nv.journalID;
+                delete nv.submitterID;
+                delete nv.notes;
+                delete nv.status;
+                delete nv.document;
+                delete nv.timeStamp;
+                a.push(nv);
+            }
+            return a;
+        },[]);
+        $('#pkYear').val(years.length > 0 ? years[0] : "");
+        $('#submitProker').prop("disabled",years.length < 1);
+        $('#pkYear').change(()=>{
+            fillProker();
+        })
+        fillProker();
+        moly.loadScreen.close(loadid);
+    }
+    function fillProker()
+    {
+        $('#proker #empty').prop("hidden", prokers.length > 0);
+        $('#proker #pkContent').prop("hidden", prokers.length < 1);
+        $('#proker #pkContent').empty();
+        const listedProkers = prokers.filter(e=>e.year == Number($('#pkYear').val()));
+        $('#submitProker').prop("disabled",!(listedProkers.length > 0 && listedProkers[0].journal.at(-1).status < 2));
+        const statusStyles =[
+            "text-align: center; background-color: var(--secondary-foreground); color: var(--primary-background)",
+            "text-align: center; background-color: var(--neutral-n-accent); color: var(--primary-foreground)",
+            "text-align: center; background-color: var(--positive-accent); color: var(--primary-foreground)",
+            "text-align: center; background-color: unset; color: unset",
+            "text-align: center; background-color: var(--positive-accent); color: var(--primary-foreground)",
+            "text-align: center; background-color: var(--neutral-p-accent); color: var(--primary-foreground)",
+            "text-align: center; background-color: var(--neutral-n-accent); color: var(--primary-foreground)",
+            "text-align: center; background-color: var(--negative-accent); color: var(--primary-background)",
+            "text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--positive-accent)", // belum jadwalnya
+            "text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--neutral-p-accent)", // berjalan 
+            "text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--neutral-n-accent)", // hampir deadline
+            "text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--negative-accent)" // terlambat
+        ];
+        $.each(listedProkers,(i,v)=>{
+            
+            const ro = moly.newElement("tr");
+            const no = moly.newElement("td");
+            const kg = moly.newElement("td");
+            const ss = moly.newElement("td");
+            const tw = moly.newElement("td");
+            const wm = moly.newElement("td");
+            const st = moly.newElement("td");
+            const ev = moly.newElement("td");
+            ro.append(no);
+            ro.append(kg);
+            ro.append(ss);
+            ro.append(tw);
+            ro.append(wm);
+            ro.append(st);
+            ro.append(ev);
+            no.append((i+1)+".");
+            no.style.textAlign = "right";
+            kg.append(kegiatanName[v.kegiatan]);
+            ss.append(v.sasaran);
+            tw.append(`${v.timeTarget} ${v.isInMonth ? "Bulan" : "Hari"}`);
+            tw.style.textAlign = "center";
+            wm.append(((v.startDay == null ? "" : v.startDay.toString().padStart(2,"0") + " ") + monthName[v.startMonth] + " " + v.year));
+            wm.style.textAlign = "right";
+            const Now = new Date();
+            const doneline = new Date(v.journal.at(-1).timeStamp);
+            const lifeline = (v.isInMonth ? new Date(v.year, v.startMonth -1, 1) : new Date(v.year, v.startMonth -1, v.startDay)).setHours(0,0,0,0);
+            const deadline = new Date((v.isInMonth ? new Date(v.year, v.startMonth + v.timeTarget, 0) : new Date(v.year, v.startMonth -1, v.startDay + v.timeTarget)).setHours(23,59,59));
+            const neardeadline = new Date((new Date(deadline)).setDate(deadline.getDate() - 15)).setHours(0,0,0,0);
+            v.status = v.journal.at(-1).status == 8 ? (v.journal.at(-2).status == 4 && doneline < lifeline ? 4 : v.journal.at(-2).status == 4 && doneline <= deadline ? 5 : v.journal.at(-2).status == 4 && doneline > deadline ? 6 : v.journal.at(-2).status == 3 && v.year < Now.getFullYear() ? 7 : 3) : (v.journal.at(-1).status == 4 && doneline < lifeline ? 4 : v.journal.at(-1).status == 4 && doneline <= deadline ? 5 : v.journal.at(-1).status == 4 && doneline > deadline ? 6 : v.journal.at(-1).status == 3 && v.year < Now.getFullYear() ? 7 : 3);
+            st.append(statusName[v.status]);
+            v.styleCode = v.status != 3 ? v.status : Now < lifeline ? 8 : Now < neardeadline ? 9 : Now >= neardeadline && Now < deadline ? 10 : 11;
+            // $(st).text(v.status != 3 ? $(st).text() : Now < lifeline ? "Belum Jadwalnya" : Now < neardeadline ? "Berjalan" : Now >= neardeadline && Now <= deadline ? "Hampir Deadline" : "Lewat Deadline");
+            $(st).text(v.status != 3 ? $(st).text() : Now < lifeline ? "Belum Jadwalnya" : Now < neardeadline ? "Berjalan" : Now >= neardeadline && Now.getDate() == deadline.getDate() && Now.getMonth() == deadline.getMonth() ? "Deadline!" : Now >= neardeadline && Now <= deadline ? "Hampir Deadline" : "Lewat Deadline");
+            v.statusText = $(st).text();
+            v.statusStyle = statusStyles[v.styleCode];
+            st.style = statusStyles[v.styleCode];
+            v.statusNames = statusName;
+            ev.append(v.journal.at(-1).status == 8 ? "Sudah" : v.journal.at(-1).status < 4 ? "---" : "Belum");
+            ev.style.textAlign = "center";
+            ev.style.backgroundColor = v.journal.at(-1).status == 8 ? "var(--positive-accent)" : v.journal.at(-1).status < 4 ? "" : "var(--neutral-n-accent)";
+            $(ro).click(async()=>{
+                const det = await moly.dialog.show({title: "Monitoring Aksi Perubahan",content:"/modules/monev-detil.html",fetching:true, data:v});
+                populateProker(det);
+            })
+            $('#proker #pkContent').append(ro);
+        });
+    }
+    function fillAgents()
+    {
+        const loadid = moly.loadScreen.show("Memuat data agen...","bar","#agWrapper");
+        $('#agContent').empty();
+        $.each(agents,(i,v)=>{
+            const ro = moly.newElement("tr");
+            const no = moly.newElement("td");
+            const ni = moly.newElement("td");
+            const na = moly.newElement("td");
+            ro.append(no)
+            ro.append(ni)
+            ro.append(na)
+            no.append((i+1) + ".");
+            no.style.textAlign = "right";
+            ni.append(v.agentID);
+            ni.style.textAlign = "center";
+            na.append(v.name);
+            $(ro).click(()=>{
+                $('#agGroup').prop("collapsed",true);
+                $('#pkGroup').prop("collapsed",false);
+                $('#pkGroup').prop("disabled",false);
+                populateProker(v.agentID);
+            });
+            $('#agContent').append(ro);
+        })
+        $('#agEmpty').prop("hidden",agents.length > 0);
+        $('#agContent').prop("hidden",agents.length < 1);
+        moly.loadScreen.close(loadid);
+    }
+    $(document).ready(async()=>{
+        $('#uk').text(userDetails.info.unitKerja);
+        fillAgents();
+        $($('#agGroup')[0].shadowRoot).find("group-label>a-button")[0].addEventListener("click",()=>{
+                $('#pkGroup').prop("collapsed",!$('#agGroup').prop("collapsed"));
+        });
+    })
+</script>
\ No newline at end of file
diff --git a/modules/submission.html b/modules/submission.html
index 9f64ea8..a13830e 100644
--- a/modules/submission.html
+++ b/modules/submission.html
@@ -7,7 +7,7 @@
         <table id="agents" class="bordered selectable">
             <colgroup>
                 <col style="width: 4ch;">
-                <col style="width: 22ch;">
+                <col style="width: 27ch;">
                 <col>
             </colgroup>
             <thead>
@@ -179,10 +179,10 @@
             "text-align: center; background-color: var(--neutral-p-accent); color: var(--primary-foreground)",
             "text-align: center; background-color: var(--neutral-n-accent); color: var(--primary-foreground)",
             "text-align: center; background-color: var(--negative-accent); color: var(--primary-background)",
-            "text-align: center; background-color: unset; color: var(--positive-accent)", // belum jadwalnya
-            "text-align: center; background-color: unset; color: unset", // berjalan 
-            "text-align: center; background-color: unset; color: var(--neutral-n-accent)", // hampir deadline
-            "text-align: center; background-color: unset; color: var(--negative-accent)" // terlambat
+            "text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--positive-accent)", // belum jadwalnya
+            "text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--neutral-p-accent)", // berjalan 
+            "text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--neutral-n-accent)", // hampir deadline
+            "text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--negative-accent)" // terlambat
         ];
         $.each(listedProkers,(i,v)=>{
             
@@ -209,13 +209,14 @@
             wm.style.textAlign = "right";
             const Now = new Date();
             const doneline = new Date(v.journal.at(-1).timeStamp);
-            const lifeline = v.isInMonth ? new Date(v.year, v.startMonth -1, 1) : new Date(v.year, v.startMonth -1, v.startDay);
-            const deadline = v.isInMonth ? new Date(v.year, v.startMonth + v.timeTarget, 0) : new Date(v.year, v.startMonth -1, v.startDay + v.timeTarget);
-            const neardeadline = (new Date(deadline)).setDate(deadline.getDate() - 15);
-            v.status = v.journal.at(-1).status == 4 && doneline < lifeline ? 4 : v.journal.at(-1).status == 4 && doneline <= deadline ? 5 : v.journal.at(-1).status == 4 && doneline > deadline ? 6 : v.journal.at(-1).status == 3 && v.year < Now.getFullYear() ? 7 : 3;
+            const lifeline = (v.isInMonth ? new Date(v.year, v.startMonth -1, 1) : new Date(v.year, v.startMonth -1, v.startDay)).setHours(0,0,0,0);
+            const deadline = new Date((v.isInMonth ? new Date(v.year, v.startMonth + v.timeTarget, 0) : new Date(v.year, v.startMonth -1, v.startDay + v.timeTarget)).setHours(23,59,59));
+            const neardeadline = new Date((new Date(deadline)).setDate(deadline.getDate() - 15)).setHours(0,0,0,0);
+            // v.status = v.journal.at(-1).status == 4 && doneline < lifeline ? 4 : v.journal.at(-1).status == 4 && doneline <= deadline ? 5 : v.journal.at(-1).status == 4 && doneline > deadline ? 6 : v.journal.at(-1).status == 3 && v.year < Now.getFullYear() ? 7 : 3;
+            v.status = v.journal.at(-1).status == 8 ? (v.journal.at(-2).status == 4 && doneline < lifeline ? 4 : v.journal.at(-2).status == 4 && doneline <= deadline ? 5 : v.journal.at(-2).status == 4 && doneline > deadline ? 6 : v.journal.at(-2).status == 3 && v.year < Now.getFullYear() ? 7 : 3) : (v.journal.at(-1).status == 4 && doneline < lifeline ? 4 : v.journal.at(-1).status == 4 && doneline <= deadline ? 5 : v.journal.at(-1).status == 4 && doneline > deadline ? 6 : v.journal.at(-1).status == 3 && v.year < Now.getFullYear() ? 7 : 3);
             st.append(statusName[v.status]);
             v.styleCode = v.status != 3 ? v.status : Now < lifeline ? 8 : Now < neardeadline ? 9 : Now >= neardeadline && Now < deadline ? 10 : 11;
-            $(st).text(v.status != 3 ? $(st).text() : Now < lifeline ? "Belum Jadwalnya" : Now < neardeadline ? "Berjalan" : Now >= neardeadline && Now <= deadline ? "Hampir Deadline" : "Lewat Deadline");
+            $(st).text(v.status != 3 ? $(st).text() : Now < lifeline ? "Belum Jadwalnya" : Now < neardeadline ? "Berjalan" : Now >= neardeadline && Now.getDate() == deadline.getDate() && Now.getMonth() == deadline.getMonth() ? "Deadline!" : Now >= neardeadline && Now <= deadline ? "Hampir Deadline" : "Lewat Deadline");
             st.style = statusStyles[v.styleCode];
             $(ro).click(async()=>{
                 const vr = await moly.dialog.show({title: "Detil Program Kerja "+v.owner.name, content: "/modules/submission-view.html", fetching: true, data: {startIndex: i, prokers}});
