diff --git a/modules/agen-new.html b/modules/agen-new.html
index a009800..bbab021 100644
--- a/modules/agen-new.html
+++ b/modules/agen-new.html
@@ -79,7 +79,8 @@
             <span>Level*</span>
             <span>:</span>
             <select id="lvl">
-                <option value="2">Agen Perubahan</option>
+                <option value="3">Agen Perubahan</option>
+                <option value="2">Supervisor</option>
                 <option value="1">Evaluator</option>
             </select>
         </div>
diff --git a/modules/agen-newaccount.html b/modules/agen-newaccount.html
index a9c3c5e..a6cca8c 100644
--- a/modules/agen-newaccount.html
+++ b/modules/agen-newaccount.html
@@ -11,7 +11,8 @@
     <span>Level*</span>
     <span>:</span>
     <select id="lvel">
-        <option value="2">Agen Perubahan</option>
+        <option value="3">Agen Perubahan</option>
+        <option value="2">Supervisor</option>
         <option value="1">Evaluator</option>
     </select>
     &nbsp;
diff --git a/modules/agen-profil.html b/modules/agen-profil.html
index 567a1ae..20b036c 100644
--- a/modules/agen-profil.html
+++ b/modules/agen-profil.html
@@ -104,7 +104,7 @@
         $('#hasAc').prop("hidden",false);
         $('#hasntAc').prop("hidden",true);
         $('#unm').text(data.userAccount.username);
-        $('#lvl').text(data.userAccount.level == 0 ? "Super Admin" : data.userAccount.level == 1 ? "Evaluator" : data.userAccount.level == 2 ? "Agen Perubahan" : "Tidak Diketahui: "+ data.userAccount.level);
+        $('#lvl').text(data.userAccount.level == 0 ? "Super Admin" : data.userAccount.level == 1 ? "Evaluator" : data.userAccount.level == 2 ? "Supervisor" : data.userAccount.level == 3 ? "Agen Perubahan" : "Tidak Diketahui: "+ data.userAccount.level);
     }
     else
     {
diff --git a/modules/agen-usermod.html b/modules/agen-usermod.html
index 6d431c6..88fe187 100644
--- a/modules/agen-usermod.html
+++ b/modules/agen-usermod.html
@@ -11,7 +11,8 @@
     <span>Level</span>
     <span>:</span>
     <select id="lvel" disabled>
-        <option value="2">Agen Perubahan</option>
+        <option value="3">Agen Perubahan</option>
+        <option value="2">Supervisor</option>
         <option value="1">Evaluator</option>
         <option value="0">Super Admin</option>
     </select>
diff --git a/modules/agen.html b/modules/agen.html
index d66c846..769fd9d 100644
--- a/modules/agen.html
+++ b/modules/agen.html
@@ -120,7 +120,7 @@
             ro.append(ac);
             id.append(v.agentID);
             un.append(v.username);
-            lv.append(v.level == 0 ? "Super Admin" : v.level == 1 ? "Evaluator" : v.level == 2 ? "Agen" : "Tidak Diketahui: "+ v.level );
+            lv.append(v.level == 0 ? "Super Admin" : v.level == 1 ? "Evaluator" : v.level == 2 ? "Supervisor" : v.level ==3 ? "Agen" : "Tidak Diketahui: "+ v.level );
             ac.append(v.active ? "Ya" : "Tidak");
             $(ro).click(async()=>{
                 const aksi = await moly.dialog.show({title: "Modifikasi Akun Agen",content:"/modules/agen-usermod.html",fetching: true, data: v});
diff --git a/modules/kegiatan.html b/modules/kegiatan.html
index 470cdb3..bda6faf 100644
--- a/modules/kegiatan.html
+++ b/modules/kegiatan.html
@@ -1,61 +1,153 @@
-<style>
-</style><group-el label="Program Kerja">
-    <div style="text-align: right;">
+<div style="text-align: center; font-weight: 600; margin: .8em 0; font-size: 1.2em;">
+    Program Kerja Agen Perubahan
+</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>
+    <div style="display: grid; grid-template-columns: auto auto auto; gap: .75ch;">
+        <a-button id="submitProker">Ajukan Program Kerja</a-button>
+        <sep-bar></sep-bar>
         <a-button id="newProker">Tambah Kegiatan</a-button>
     </div>
-    <div style="max-height: calc(50vh - 6em); overflow-y: scroll; margin: 1em 0" id="pkWrapper">
-        <table id="proker" class="bordered selectable">
-            <colgroup>
-                <col style="width: 4ch;">
-                <col style="width: 19ch;">
-                <col>
-                <col style="width: 8ch;">
-                <col style="width: 17ch;">
-                <col style="width: 14ch;">
-            </colgroup>
-            <thead>
-                <tr>
-                    <th>No</th>
-                    <th>Kegiatan</th>
-                    <th>Sasaran</th>
-                    <th>Target Waktu</th>
-                    <th>Waktu Mulai</th>
-                    <th>Status</th>
-                </tr>
-            </thead>
-            <tbody id="empty">
-                <tr>
-                    <td colspan="6" style="text-align: center;">Data Kosong</td>
-                </tr>
-            </tbody>
-            <tbody id="pkContent" hidden>
-            </tbody>
-        </table>
-    </div>
-</group-el>
+</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: 19ch;">
+            <col>
+            <col style="width: 8ch;">
+            <col style="width: 17ch;">
+            <col style="width: 16ch;">
+        </colgroup>
+        <thead>
+            <tr>
+                <th>No</th>
+                <th>Kegiatan</th>
+                <th>Sasaran</th>
+                <th>Target Waktu</th>
+                <th>Waktu Mulai</th>
+                <th>Status</th>
+            </tr>
+        </thead>
+        <tbody id="empty">
+            <tr>
+                <td colspan="6" style="text-align: center;">Data Kosong</td>
+            </tr>
+        </tbody>
+        <tbody id="pkContent" hidden>
+        </tbody>
+    </table>
+</div>
 <script type="module">
-    let prokers = [];
+    window.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()
     {
         const loadid = moly.loadScreen.show("Memuat Daftar Program Kerja...","bar","#pkWrapper");
-        const kegiatanName = [
-            "Sebagai Katalis",
-            "Sebagai Penggerak Perubahan",
-            "Sebagai Pemberi Solusi",
-            "Sebagai Mediator",
-            "Sebagai Penghubung"
-        ]
         prokers = await getJson('/api/getprokers');
         if (prokers.status != 200 || prokers.length < 1) 
         {
             moly.loadScreen.close(loadid);
             return;
         }
-        prokers = prokers.data;
+        $('#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();
-        $.each(prokers,(i,v)=>{
+        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)",
+        ];
+        $.each(listedProkers,(i,v)=>{
+            
             const ro = moly.newElement("tr");
             const no = moly.newElement("td");
             const kg = moly.newElement("td");
@@ -77,8 +169,8 @@
             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("Draft");
-            st.style.textAlign = "center";
+            st.append(statusName[v.journal.at(-1).status]);
+            st.style = statusStyles[v.journal.at(-1).status];
             $(ro).click(async()=>{
                 const data = v;
                 const vw = await moly.dialog.show({title: "Detil Program Kerja", content: "/modules/kegiatan-proker-view.html", fetching: true, data});
@@ -86,7 +178,6 @@
             })
             $('#proker #pkContent').append(ro);
         });
-        moly.loadScreen.close(loadid);
     }
     $(document).ready(async()=>{
         populateProker();
@@ -95,5 +186,27 @@
             const np = await moly.dialog.show({title: "Entri Program Kerja dan Rencana Aksi", content: "/modules/kegiatan-proker-new.html", fetching: true, data});
             if(np) populateProker();
         });
+        $('#submitProker').click(async()=>{
+            const loadid = moly.loadScreen.show("Memuat Daftar Program Kerja...","bar","#pkWrapper");
+            const listedProkers = prokers.filter(e=>e.year == Number($('#pkYear').val()));
+            const progCheck = [false,false,false,false,false];
+            $.each(listedProkers,(_,v)=>{progCheck[v.kegiatan] = true});
+            if(!(progCheck[0] && progCheck[1] && progCheck[2] && progCheck[3] && progCheck[4]))
+            {
+                moly.alert.show("Program Kerja Belum Lengkap","Harap melengkapi Program Kerja. Pastikan seluruh Kegiatan telah diprogramkan.");
+                console.log(progCheck)
+                moly.loadScreen.close(loadid);
+                return;
+            }
+            const submission = await postJson('/api/submitpk',{agentid: userDetails.agentID, year: Number($('#pkYear').val())});
+            if(submission.status != 202)
+            {
+                moly.alert.show("Pengajuan Program Kerja Gagal","Program Kerja tidak berhasil diajukan. Silakan ulangi kembali beberapa saat lagi.")
+                moly.loadScreen.close(loadid);
+                return;
+            }
+            populateProker();
+            moly.loadScreen.close(loadid);
+        })
     })
 </script>
\ No newline at end of file