diff --git a/.gitignore b/.gitignore
index 3cfacf1..ef34ff6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 .DS_Store
-/assets/images/uploads/*
\ No newline at end of file
+/assets/images/uploads/*
+/uploads/*
diff --git a/modules/kegiatan-proker-finish.html b/modules/kegiatan-proker-finish.html
new file mode 100644
index 0000000..10bea99
--- /dev/null
+++ b/modules/kegiatan-proker-finish.html
@@ -0,0 +1,72 @@
+<div>
+    Sasaran Aksi:
+</div>
+<div id="sasaran" style="margin-bottom: .5em;">&nbsp;</div>
+<div>
+    Kendala, Hambatan, dan Masalah (Opsional):
+</div>
+<textarea id="kendala" style="width: 75ch;height: 6em; resize: none;" maxlength="240" placeholder="Silakan isi dengan kendala, hambatan, dan permasalahan yang dihadapi selama menjalankan aksi perubahan.">
+</textarea>
+<div>
+    Solusi (Opsional):
+</div>
+<textarea id="solusi" style="width: 100%;height: 6em; resize: none;" maxlength="240" placeholder="Silakan isi dengan langkah yang diambil untuk menanggulangi kendala, hambatan, dan permasalahan diatas.">
+</textarea>
+<div style="display: grid; grid-template-columns: 1fr auto; column-gap: 1.25ch;">
+    <span>Dokumen Eviden (Wajib): </span>
+    <file-input accept="application/pdf" id="evidence" style="width: 52.75ch"></file-input>
+</div>
+<div style="display: grid;grid-template-columns: auto 1fr auto; margin-top: .75em; border-top: 1px solid var(--secondary-foreground); padding-top: .5em;">
+    <a-button id="cancel" type="negative">Batal</a-button>
+    &nbsp;
+    <a-button id="upload">Upload Eviden</a-button>
+</div>
+<script type="module">
+    const thisDialog = moly.lastDialog();
+    const data = thisDialog.data;
+    let evidence = null;
+    function µ(selector)
+    {
+        if (selector) return $(thisDialog.box).find(selector);
+        return $(thisDialog.box);
+    }
+    µ('#sasaran').text(data.sasaran);
+    µ('#evidence').change(async()=>{
+        if(µ('#evidence')[0]._input.files.length < 1)
+        {
+            evidence = null;   
+            return;
+        }
+        const loadid = moly.loadScreen.show("Memroses berkas...","bar","#"+µ('div[id^="db"]')[0].id);
+        evidence = await moly.file.serialise(µ('#evidence')[0]._input.files[0]);
+        moly.loadScreen.close(loadid);
+    });
+    µ('#cancel').click(()=>{thisDialog.resolve(false)});
+    µ('#upload').click(async()=>{
+        const loadid = moly.loadScreen.show("Memroses berkas...","bar","#"+µ('div[id^="db"]')[0].id);
+        const upload = 
+        {
+            prokerid: data.prokerID,
+            notes: JSON.stringify({
+                kendala: µ('#kendala').val(),
+                solusi: µ('#solusi').val()
+            }),
+            evidence: evidence.data
+        }
+        if(!evidence)
+        {
+            moly.alert.show("Dokumen Eviden Belum Dipilih","Dokuman Eviden bersifat wajib. Harap input dokumen eviden untuk diunggah.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        const upl = await postJson('/api/pkevidence',upload);
+        if(upl.status != 201)
+        {
+            moly.alert.show("Eviden Tidak Terupload","Eviden tidak berhasi diupload. Silakan ulangi kembali beberapa saat lagi.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        moly.loadScreen.close(loadid);
+    });
+    //["prokerid", "notes", "evidence"]
+</script>
\ No newline at end of file
diff --git a/modules/kegiatan-proker-finished.html b/modules/kegiatan-proker-finished.html
new file mode 100644
index 0000000..5680bc6
--- /dev/null
+++ b/modules/kegiatan-proker-finished.html
@@ -0,0 +1,40 @@
+<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 style="display: grid; grid-template-columns: auto 1fr; column-gap: 1.25ch;">
+    <span>Dokumen Eviden: </span>
+    <a-button id="ve">Lihat Dokumen</a-button>
+</div>
+<script type="module">
+    const thisDialog = moly.lastDialog();
+    const data = thisDialog.data;
+    const journal = data.journal.at(-1);
+    const notes = JSON.parse(journal.notes);
+    console.log(data)
+    function µ(selector)
+    {
+        if (selector) return $(thisDialog.box).find(selector);
+        return $(thisDialog.box);
+    }
+    µ('#sasaran').text(data.sasaran);
+    µ('#kendala').text(notes.kendala);
+    µ('#solusi').text(notes.solusi);
+    µ('#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-new.html b/modules/kegiatan-proker-new.html
index 35d4f3d..8028b68 100644
--- a/modules/kegiatan-proker-new.html
+++ b/modules/kegiatan-proker-new.html
@@ -55,7 +55,6 @@
         if (selector) return $(thisDialog.box).find(selector);
         return $(thisDialog.box);
     }
-    console.log(prokers);
     µ('#targetUnit').change(()=>{
         µ('.forDay').prop("hidden", µ('#targetUnit').val() != "0");
         µ('.forMonth').prop("hidden", µ('#targetUnit').val() != "1");
diff --git a/modules/kegiatan.html b/modules/kegiatan.html
index 55c98c4..595b080 100644
--- a/modules/kegiatan.html
+++ b/modules/kegiatan.html
@@ -146,6 +146,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
         ];
         $.each(listedProkers,(i,v)=>{
             
@@ -170,8 +174,16 @@
             tw.style.textAlign = "center";
             wm.append(((v.startDay == null ? "" : v.startDay.toString().padStart(2,"0") + " ") + monthName[v.startMonth] + " " + v.year));
             wm.style.textAlign = "right";
-            st.append(statusName[v.journal.at(-1).status]);
-            st.style = statusStyles[v.journal.at(-1).status];
+            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;
+            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.style = statusStyles[v.styleCode];
             $(ro).click(async()=>{
                 const data = v;
                 if (data.journal.at(-1).status < 2)
@@ -179,9 +191,13 @@
                     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 > 3)
+                {
+                    await moly.dialog.show({title: "Lihat Eviden Akhir Aksi Perubahan", content: "/modules/kegiatan-proker-finished.html", fetching: true, data})
+                }
                 else if (data.journal.at(-1).status > 2)
                 {
-                    alert("To Advance the proker")
+                    await moly.dialog.show({title: "Upload Eviden Akhir Aksi Perubahan", content: "/modules/kegiatan-proker-finish.html", fetching: true, data})
                 }
             })
             $('#proker #pkContent').append(ro);
diff --git a/modules/pdf-previewer.html b/modules/pdf-previewer.html
index 5ce4039..41401cc 100644
--- a/modules/pdf-previewer.html
+++ b/modules/pdf-previewer.html
@@ -9,5 +9,5 @@
         if (selector) return $(thisDialog.box).find(selector);
         return $(thisDialog.box);
     }
-    µ('#previewer')[0].src = "data:application/pdf;base64,"+data.data;
+    µ('#previewer')[0].src = data.data? "data:application/pdf;base64,"+data.data : data.url;
 </script>
\ No newline at end of file
diff --git a/modules/submission.html b/modules/submission.html
index 84adc59..9f64ea8 100644
--- a/modules/submission.html
+++ b/modules/submission.html
@@ -179,6 +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
         ];
         $.each(listedProkers,(i,v)=>{
             
@@ -203,8 +207,16 @@
             tw.style.textAlign = "center";
             wm.append(((v.startDay == null ? "" : v.startDay.toString().padStart(2,"0") + " ") + monthName[v.startMonth] + " " + v.year));
             wm.style.textAlign = "right";
-            st.append(statusName[v.journal.at(-1).status]);
-            st.style = statusStyles[v.journal.at(-1).status];
+            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;
+            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.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}});
                 // console.log(vr);