diff --git a/app/components/app/encounter/entry-form.vue.backup b/app/components/app/encounter/entry-form-prev-00.vue
similarity index 99%
rename from app/components/app/encounter/entry-form.vue.backup
rename to app/components/app/encounter/entry-form-prev-00.vue
index f92b7736..a0c1ec28 100644
--- a/app/components/app/encounter/entry-form.vue.backup
+++ b/app/components/app/encounter/entry-form-prev-00.vue
@@ -43,7 +43,7 @@ const emit = defineEmits<{
 }>()
 
 // Validation schema
-const { handleSubmit, errors, defineField, meta } = useForm<IntegrationEncounterFormData>({
+const { handleSubmit, errors, defineField, meta } = useForm<any>({
   validationSchema: toTypedSchema(IntegrationEncounterSchema),
 })
 
@@ -141,7 +141,7 @@ function onAddSep() {
     registerDate: registerDate.value,
     cardNumber: cardNumber.value,
     paymentType: paymentType.value,
-    sepType: sepType.value
+    sepType: sepType.value,
   }
   emit('event', 'add-sep', formValues)
 }
@@ -454,7 +454,7 @@ defineExpose({
                     name="i-lucide-loader-2"
                     class="h-4 w-4 animate-spin"
                   />
-                   <Icon
+                  <Icon
                     v-else
                     name="i-lucide-plus"
                     class="h-4 w-4"
diff --git a/app/components/app/encounter/entry-form-prev.vue b/app/components/app/encounter/entry-form-prev-01.vue
similarity index 100%
rename from app/components/app/encounter/entry-form-prev.vue
rename to app/components/app/encounter/entry-form-prev-01.vue
diff --git a/app/components/app/encounter/list.cfg.ts b/app/components/app/encounter/list.cfg.ts
index 442233cc..5572b397 100644
--- a/app/components/app/encounter/list.cfg.ts
+++ b/app/components/app/encounter/list.cfg.ts
@@ -147,7 +147,8 @@ export const ambulatoryConfig: Config = {
   parses: {
     registeredAt: (rec: unknown): unknown => {
       const recX = rec as Encounter
-      return recX.registeredAt ? (recX.registeredAt as string).substring(0, 10) : '-'
+      const currentDate = recX.registeredAt ? (recX.registeredAt as string) : (recX as any).createdAt
+      return currentDate ? currentDate.substring(0, 10) : '-'
     },
     patientNumber: (rec: unknown): unknown => {
       const recX = rec as any
@@ -194,10 +195,9 @@ export const ambulatoryConfig: Config = {
   },
 
   components: {
-    sep(rec, idx) {
+    sep(rec) {
       const res: RecComponent = {
         rec: rec as object,
-        idx,
         component: vclaimSepInfo,
       }
       return res
diff --git a/app/components/app/encounter/vclaim-sep-info.vue b/app/components/app/encounter/vclaim-sep-info.vue
index a72e1352..06af4f85 100644
--- a/app/components/app/encounter/vclaim-sep-info.vue
+++ b/app/components/app/encounter/vclaim-sep-info.vue
@@ -1,33 +1,75 @@
 <script setup lang="ts">
 const props = defineProps<{
   rec: any
-  idx: number
 }>()
+
+const recSepId = inject<Ref<number>>('rec_sep_id')!
+const recSepMenu = inject<Ref<string>>('rec_sep_menu')!
+const recSepSubMenu = inject<Ref<string>>('rec_sep_sub_menu')!
+const sepFileReview = ref<any>({})
+const sippFileReview = ref<any>({})
+
+const getEncounterDocument = () => {
+  const encounter = props.rec
+  if (encounter.encounterDocuments && Array.isArray(encounter.encounterDocuments)) {
+    for (const doc of encounter.encounterDocuments) {
+      if (doc.type_code === 'vclaim-sep') {
+        sepFileReview.value = { id: doc.id, fileName: doc.fileName, filePath: doc.filePath, type: doc.type_code }
+      } else if (doc.type_code === 'vclaim-sipp') {
+        sippFileReview.value = { id: doc.id, fileName: doc.fileName, filePath: doc.filePath, type: doc.type_code }
+      }
+    }
+  }
+}
+
+function handleSepView(menu: string, subMenu: string) {
+  recSepId.value = props.rec.id || 0
+  recSepMenu.value = menu
+  recSepSubMenu.value = subMenu
+}
+
+onMounted(() => {
+  getEncounterDocument()
+})
 </script>
 
 <template>
   <div class="flex flex-col gap-2">
     <Button
-      variant="ghost"
+      variant="outline"
       type="button"
       class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+      @click="handleSepView('sipp', sippFileReview.id ? 'edit' : 'view')"
     >
       <Icon
+        v-if="sippFileReview.id"
         name="i-lucide-eye"
         class="h-5 w-5"
       />
-      Lihat SIPP
+      <Icon
+        v-else
+        name="i-lucide-upload"
+        class="h-5 w-5"
+      />
+      {{ sippFileReview.id ? 'Lihat SIPP' : 'Upload File SIPP' }}
     </Button>
     <Button
-      variant="ghost"
+      variant="outline"
       type="button"
       class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+      @click="handleSepView('sep', sepFileReview.id ? 'edit' : 'view')"
     >
       <Icon
+        v-if="sepFileReview.id"
         name="i-lucide-eye"
         class="h-5 w-5"
       />
-      Lihat SEP
+      <Icon
+        v-else
+        name="i-lucide-upload"
+        class="h-5 w-5"
+      />
+      {{ sepFileReview.id ? 'Lihat SEP' : 'Upload File SEP' }}
     </Button>
   </div>
 </template>
diff --git a/app/components/content/encounter/list.vue b/app/components/content/encounter/list.vue
index ebb49042..5cff930a 100644
--- a/app/components/content/encounter/list.vue
+++ b/app/components/content/encounter/list.vue
@@ -7,6 +7,7 @@ import { ActionEvents } from '~/components/pub/my-ui/data/types'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import * as CH from '~/components/pub/my-ui/content-header'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
 import { useSidebar } from '~/components/pub/ui/sidebar/utils'
 
 // App libs
@@ -19,6 +20,9 @@ import {
   cancel as cancelEncounter,
 } from '~/services/encounter.service'
 
+// Handlers
+import { uploadAttachmentCustom } from '~/handlers/supporting-document.handler'
+
 // Apps
 import Content from '~/components/app/encounter/list.vue'
 import FilterNav from '~/components/app/encounter/filter-nav.vue'
@@ -53,9 +57,13 @@ const isLoading = reactive<DataTableLoader>({
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
+const recSepId = ref<number>(0)
+const recSepMenu = ref<string>('')
+const recSepSubMenu = ref<string>('')
 const isFilterFormDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
 const isRecordCancelOpen = ref(false)
+const uploadFile = ref<any>(null)
 
 // Headers
 const hreaderPrep: CH.Config = {
@@ -102,6 +110,9 @@ provide('activeServicePosition', activeServicePosition)
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+provide('rec_sep_id', recSepId)
+provide('rec_sep_menu', recSepMenu)
+provide('rec_sep_sub_menu', recSepSubMenu)
 provide('table_data_loader', isLoading)
 
 watch(getActiveRole, (role?: string) => {
@@ -129,6 +140,19 @@ watch(
   },
 )
 
+watch([recSepId, recSepMenu, recSepSubMenu], (value) => {
+  const id = value[0]
+  const menu = value[1]
+  const subMenu = value[2]
+  if (!id) return
+  if (subMenu === 'view') {
+    handleViewFile(id, menu, subMenu)
+  }
+  if (subMenu === 'edit') {
+    handleUploadFile(id, menu)
+  }
+})
+
 onMounted(() => {
   getPatientList()
 })
@@ -172,6 +196,55 @@ async function getPatientList() {
   }
 }
 
+function handleUploadFile(id: number, menu: string) {
+  uploadFile.value = null
+  document.getElementById('uploadFile')?.click()
+}
+
+async function handleUploadFileSubmit() {
+  if (!uploadFile.value) return
+  const result = await uploadAttachmentCustom({
+    file: uploadFile.value,
+    refId: recSepId.value,
+    entityTypeCode: 'encounter',
+    type: recSepMenu.value === 'sep' ? 'vclaim-sep' : 'vclaim-sipp',
+  })
+  if (result.success) {
+    toast({
+      title: 'Berhasil',
+      description: 'File berhasil diunggah',
+      variant: 'default',
+    })
+    await getPatientList()
+  } else {
+    toast({
+      title: 'Gagal',
+      description: 'File gagal diunggah',
+      variant: 'destructive',
+    })
+  }
+}
+
+function handleViewFile(id: number, menu: string, subMenu: string) {
+  const currentData: any = data.value.find((item: any) => item.id === id)
+  if (!currentData) return
+  let fileReviewSep: any = null
+  let fileReviewSipp: any = null
+  for (const doc of currentData.encounterDocuments) {
+    if (doc.type_code === 'vclaim-sep') {
+      fileReviewSep = { id: doc.id, fileName: doc.fileName, filePath: doc.filePath, type: doc.type_code }
+    } else if (doc.type_code === 'vclaim-sipp') {
+      fileReviewSipp = { id: doc.id, fileName: doc.fileName, filePath: doc.filePath, type: doc.type_code }
+    }
+  }
+  if (fileReviewSep && menu === 'sep' && subMenu === 'view') {
+    window.open(fileReviewSep.filePath, '_blank')
+  }
+  if (fileReviewSipp && menu === 'sipp' && subMenu === 'view') {
+    window.open(fileReviewSipp.filePath, '_blank')
+  }
+}
+
 function handleFilterApply(filters: { personName: string; startDate: string; endDate: string }) {
   filterParams.value = {
     'person-name': filters.personName,
@@ -356,4 +429,16 @@ function handleRemoveConfirmation() {
   >
     Hak akses tidak memenuhi kriteria untuk proses ini.
   </Dialog>
+
+  <FileUpload
+    id="uploadFile"
+    class="hidden"
+    field-name="uploadFile"
+    label="Dokumen"
+    placeholder="Pilih file"
+    :accept="['pdf', 'jpg', 'png']"
+    :max-size-mb="1"
+    v-model="uploadFile"
+    @file-selected="handleUploadFileSubmit"
+  />
 </template>
diff --git a/app/handlers/supporting-document.handler.ts b/app/handlers/supporting-document.handler.ts
index 87ff864a..d63e1ccf 100644
--- a/app/handlers/supporting-document.handler.ts
+++ b/app/handlers/supporting-document.handler.ts
@@ -27,6 +27,7 @@ export async function uploadAttachmentCustom(payload: any) {
   const { user } = useUserStore()
   
   const formData = new FormData()
+  formData.append('code', payload.type)
   formData.append('content', payload.file)
   formData.append('entityType_code', payload.entityTypeCode)
   formData.append('type_code', payload.type)