From 806cfad6a8e9ee90bb2df5dd30a12be1ea940bb3 Mon Sep 17 00:00:00 2001
From: ari <kusuma.ari.prabowo@gmail.com>
Date: Tue, 18 Nov 2025 11:31:57 +0700
Subject: [PATCH 01/12] update

---
 app/components/app/auth/login.vue             |   9 ++
 app/components/content/auth/login.vue         |  69 +++++++++-
 nuxt.config.ts                                |  22 ++++
 package.json                                  |   3 +
 .../api/v1/authentication/login-fes.post.ts   | 122 ++++++++++++++++++
 5 files changed, 224 insertions(+), 1 deletion(-)
 create mode 100644 server/api/v1/authentication/login-fes.post.ts

diff --git a/app/components/app/auth/login.vue b/app/components/app/auth/login.vue
index 29fb60b4..170ab5d3 100644
--- a/app/components/app/auth/login.vue
+++ b/app/components/app/auth/login.vue
@@ -13,6 +13,7 @@ const props = defineProps<Props>()
 
 const emit = defineEmits<{
   submit: [data: any]
+  sso: []
 }>()
 
 const { handleSubmit, defineField, errors, meta } = useForm({
@@ -33,6 +34,10 @@ const onSubmit = handleSubmit(async (values) => {
     console.error('Submission failed:', error)
   }
 })
+
+function onSSO() {
+  emit('sso')
+}
 </script>
 
 <template>
@@ -71,4 +76,8 @@ const onSubmit = handleSubmit(async (values) => {
       Login
     </Button>
   </form>
+
+  <Button @click="onSSO" target="_blank">
+    Login SSO
+  </Button>
 </template>
diff --git a/app/components/content/auth/login.vue b/app/components/content/auth/login.vue
index 0e581ca9..5489fef5 100644
--- a/app/components/content/auth/login.vue
+++ b/app/components/content/auth/login.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { z } from 'zod'
+import Keycloak from 'keycloak-js'
+// import { useKeycloak } from '@/stores/keycloak'
 
 const loginSchema = z.object({
   name: z.string().min(3, 'Please enter a valid username'),
@@ -39,10 +41,75 @@ async function onSubmit(data: LoginFormData) {
 
   isLoading.value = false
 }
+
+const config = useRuntimeConfig()
+// const store = useKeycloak()
+
+const state = reactive({
+    loggedIn: false
+})
+
+async function onSSO() {
+  const config = useRuntimeConfig()
+
+  const initOptions = {
+      url: config.public.KEYCLOAK_URL,
+      realm: config.public.KEYCLOAK_REALM,
+      clientId: config.public.KEYCLOAK_ID,
+      onLoad: 'login-required'
+  }
+
+  const keycloak = new Keycloak(initOptions)
+  keycloak
+      .init({ onLoad: initOptions.onLoad })
+      .then((auth) => {
+          if (!auth) {
+              window.location.reload()
+          } else {
+              // store.setup(keycloak)
+              state.loggedIn = true
+          }
+      })
+
+  if (state.loggedIn) {
+    const result = await xfetch('/api/v1/authentication/login-fes', 'POST', {
+      data: keycloak,
+    })
+
+    if (result.success) {
+      const { data: rawdata, meta } = result.body
+      if (meta.status === 'verified') {
+        login(rawdata)
+        navigateTo('/')
+      }
+    } else {
+      if (result.errors) {
+        Object.entries(result.errors).forEach(
+          ([field, errorInfo]: [string, any]) => (apiErrors.value[field] = errorInfo.message),
+        )
+      } else {
+        apiErrors.value.general = result.error?.message || result.message || 'Login failed'
+      }
+    }
+  }
+
+  // const urlSSO =
+  //   config.public.KEYCLOAK_ISSUER +
+  //   '/protocol/openid-connect/auth?client_id=' +
+  //   config.public.KEYCLOAK_ID +
+  //   '&scope=openid%20email%20profile&response_type=code&redirect_uri=' +
+  //   config.public.KEYCLOAK_LOGOUT_REDIRECT +
+  //   '%2Fapi%2Fauth%2Fcallback%2Fkeycloak&state=AKf-WHWdL822V3LaNS5MSFzJ96-VHp6FUXlXxIAzXXM&code_challenge=nXOcGLLlA1NtXI4RM4hL59iP_I_yQAsUDd5sAOkKBF4&code_challenge_method=S256'
+  // await navigateTo(urlSSO,
+  // {
+  //   open: { target: '_blank' },
+  //   external: true
+  // })
+}
 </script>
 
 <template>
-  <AppAuthLogin :schema="loginSchema" :is-loading="isLoading" @submit="onSubmit" />
+  <AppAuthLogin :schema="loginSchema" :is-loading="isLoading" @submit="onSubmit" @sso="onSSO" />
 </template>
 
 <style scoped></style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f4f0b231..588c79b8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,10 +7,32 @@ export default defineNuxtConfig({
     API_ORIGIN: process.env.NUXT_API_ORIGIN || 'http://localhost:3000',
     VCLAIM: process.env.NUXT_API_VCLAIM || 'http://localhost:3000',
     VCLAIM_SWAGGER: process.env.NUXT_API_VCLAIM_SWAGGER || 'http://localhost:3000',
+    //SSO
+    X_AP_CODE: process.env.X_AP_CODE || 'rssa-sso',
+    X_AP_SECRET_KEY: process.env.X_AP_SECRET_KEY || 'sapiperah',
+    SSO_CONFIRM_URL: process.env.SSO_CONFIRM_URL || 'https://auth.rssa.top/realms/sandbox/protocol/openid-connect/userinfo',
+    KEYCLOAK_ID: process.env.KEYCLOAK_ID  || 'portal-simrs-new',
+    KEYCLOAK_SECRET: process.env.KEYCLOAK_SECRET || 'awoiehrw3w8942341k1ln4',
+    KEYCLOAK_ISSUER: process.env.KEYCLOAK_ISSUER || 'https://auth.dev.rssa.id/realms/sandbox',
+    KEYCLOAK_LOGOUT_REDIRECT: process.env.KEYCLOAK_LOGOUT_REDIRECT  || 'http://localhost:3000',
+    //test
+    KEYCLOAK_REALM: process.env.KEYCLOAK_REALM || 'sandbox',
+    KEYCLOAK_URL: process.env.KEYCLOAK_URL  || 'https://auth.dev.rssa.id/',
     public: {
       API_ORIGIN: process.env.NUXT_API_ORIGIN || 'http://localhost:3000',
       VCLAIM: process.env.NUXT_API_VCLAIM || 'http://localhost:3000',
       VCLAIM_SWAGGER: process.env.NUXT_API_VCLAIM_SWAGGER || 'http://localhost:3000',
+      //SSO
+      X_AP_CODE: process.env.X_AP_CODE || 'rssa-sso',
+      X_AP_SECRET_KEY: process.env.X_AP_SECRET_KEY || 'sapiperah',
+      SSO_CONFIRM_URL: process.env.SSO_CONFIRM_URL || 'https://auth.rssa.top/realms/sandbox/protocol/openid-connect/userinfo',
+      KEYCLOAK_ID: process.env.KEYCLOAK_ID  || 'portal-simrs-new',
+      KEYCLOAK_SECRET: process.env.KEYCLOAK_SECRET || 'awoiehrw3w8942341k1ln4',
+      KEYCLOAK_ISSUER: process.env.KEYCLOAK_ISSUER || 'https://auth.dev.rssa.id/realms/sandbox',
+      KEYCLOAK_LOGOUT_REDIRECT: process.env.KEYCLOAK_LOGOUT_REDIRECT  || 'http://localhost:3000',
+      //test
+      KEYCLOAK_REALM: process.env.KEYCLOAK_REALM || 'sandbox',
+      KEYCLOAK_URL: process.env.KEYCLOAK_URL  || 'https://auth.dev.rssa.id/',
     },
   },
   ssr: false,
diff --git a/package.json b/package.json
index d415abde..d260052d 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "lint": "eslint .",
     "format": "eslint --fix ."
   },
+  "main": "./lib/keycloak.js",
   "dependencies": {
     "@iconify-json/lucide": "^1.2.30",
     "@iconify-json/radix-icons": "^1.2.2",
@@ -24,6 +25,7 @@
     "embla-carousel": "^8.5.2",
     "embla-carousel-vue": "^8.5.2",
     "h3": "^1.15.4",
+    "keycloak-js": "^26.2.1",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.4.1",
     "tailwindcss-animate": "^1.0.7"
@@ -50,6 +52,7 @@
     "eslint-plugin-format": "^1.0.1",
     "happy-dom": "^18.0.1",
     "lucide-vue-next": "^0.482.0",
+    "next-auth": "~4.21.1",
     "nuxt": "^4.0.3",
     "playwright-core": "^1.54.2",
     "prettier": "^3.6.2",
diff --git a/server/api/v1/authentication/login-fes.post.ts b/server/api/v1/authentication/login-fes.post.ts
new file mode 100644
index 00000000..abcd50e6
--- /dev/null
+++ b/server/api/v1/authentication/login-fes.post.ts
@@ -0,0 +1,122 @@
+import { getRequestURL, readBody, setCookie } from 'h3'
+
+// Function to verify JWT token with the userinfo endpoint
+export default defineEventHandler(async (event) => {
+  console.log("=================== MASUK FE SSO! ===================")
+  const body = await readBody(event)
+  const url = getRequestURL(event)
+  const config = useRuntimeConfig()
+
+  console.log("body: " + JSON.stringify(body))
+
+  // const apiSSOConfirm = 'https://auth.rssa.top/realms/sandbox/protocol/openid-connect/userinfo'
+  const apiSSOConfirm = config.public.SSO_CONFIRM_URL
+
+  const jwt = body.jwt
+  // const nip = body.nip
+  // const role = body.role
+  // const roleid = body.roleid
+  // const shift = body.shift
+  // const loginStatus = body.status_login
+  const token = 'Bearer ' + jwt
+
+  const res_sso = await fetch(apiSSOConfirm,
+  {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': token,
+    }
+  })
+
+  console.log(res_sso)
+  if (res_sso.status === 200) {
+    const parts = jwt.split('.')
+
+    if (parts.count != 3) {
+        // return ['error' => 'Invalid JWT format'];
+    }
+
+    const header = Buffer.from(strtr(parts[0], '-_', '+/'), 'base64').toString('utf8')
+    const payload = Buffer.from(strtr(parts[1], '-_', '+/'), 'base64').toString('utf8')
+
+    // const textDecoder = new TextDecoder('utf-8');
+    // // Decode the header and payload
+    // const decodedBinaryHead = atob(parts[0]);
+    // const decodedBinaryPayload = atob(parts[0]);
+    // const header = textDecoder.decode(Uint8Array.from(decodedBinaryHead, char => char.charCodeAt(0)));
+    // const payload = textDecoder.decode(Uint8Array.from(decodedBinaryPayload, char => char.charCodeAt(0)));
+
+    const result = {
+        'header': header,
+        'payload': payload
+    };
+
+    const apiOrigin = config.public.API_ORIGIN
+
+    const cleanOrigin = apiOrigin.replace(/\/+$/, '')
+    const cleanPath = url.pathname.replace(/^\/api\//, '').replace(/^\/+/, '')
+    const externalUrl = `${cleanOrigin}/${cleanPath}${url.search}`
+    console.log("external url: " + externalUrl)
+    console.log("body: " + JSON.stringify(body))
+
+    const resp = await fetch(externalUrl,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        name: JSON.parse(payload).name,
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-AuthPartner-Code': config.public.X_AP_CODE,
+        'X-AuthPartner-SecretKey': config.public.X_AP_SECRET_KEY,
+      },
+    })
+
+    console.log(resp)
+    // if (resp.status === 200) {
+    //   const data = await resp.json()
+
+    //   if (data?.data?.accessToken) {
+    //     setCookie(event, 'authentication', data.data.accessToken, {
+    //       path: '/',
+    //       httpOnly: true,
+    //       sameSite: 'strict',
+    //       maxAge: 60 * 60 * 24,
+    //     })
+
+    //     delete data.data.accessToken
+    //     // return data
+
+    //     const { login } = useUserStore()
+    //     await login(resp.text())
+    //     await navigateTo('/')
+    //   }
+    // }
+
+    return new Response(await resp.text(), {
+      status: resp.status,
+      headers: {
+        'Content-Type': resp.headers.get('content-type') || 'text/plain',
+      },
+    })
+  }
+
+  return new Response(await res_sso.text(), {
+    status: res_sso.status,
+    headers: {
+      'Content-Type': res_sso.headers.get('content-type') || 'text/plain',
+    },
+  })
+})
+
+function strtr(str: string, fromChars: string, toChars: string) {
+  let result = str;
+  for (let i = 0; i < fromChars.length; i++) {
+    const fromChar = fromChars[i] || '_-';
+    // const toChar = toChars[i];
+    // Use a global regex to replace all occurrences of the character
+    result = result.replace(new RegExp(fromChar.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), toChars);
+  }
+  return result;
+}

From d1fd8bb194628da7926c949ffb4a2c0717a7a115 Mon Sep 17 00:00:00 2001
From: ari <kusuma.ari.prabowo@gmail.com>
Date: Tue, 18 Nov 2025 11:50:01 +0700
Subject: [PATCH 02/12] update format func

---
 app/components/app/auth/login.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/components/app/auth/login.vue b/app/components/app/auth/login.vue
index 170ab5d3..a10200eb 100644
--- a/app/components/app/auth/login.vue
+++ b/app/components/app/auth/login.vue
@@ -35,9 +35,16 @@ const onSubmit = handleSubmit(async (values) => {
   }
 })
 
-function onSSO() {
-  emit('sso')
-}
+
+const onSSO = (async () => {
+  console.log("Emitting SSO...")
+  try {
+    await emit('sso')
+  } catch (error) {
+    console.error('Call SSO failed:', error)
+  }
+});
+
 </script>
 
 <template>

From 98910563b807fdb0ddf50f53f3888d55463009d2 Mon Sep 17 00:00:00 2001
From: ari <kusuma.ari.prabowo@gmail.com>
Date: Wed, 19 Nov 2025 16:47:23 +0700
Subject: [PATCH 03/12] update integrasi

---
 app/components/app/auth/login.vue     |  1 +
 app/components/content/auth/login.vue | 70 +++++++++++++++++++++------
 app/middleware/auth.global.ts         |  5 +-
 nuxt.config.ts                        | 48 ++++++++++++------
 package.json                          |  4 +-
 5 files changed, 94 insertions(+), 34 deletions(-)

diff --git a/app/components/app/auth/login.vue b/app/components/app/auth/login.vue
index a10200eb..d7f549dd 100644
--- a/app/components/app/auth/login.vue
+++ b/app/components/app/auth/login.vue
@@ -84,6 +84,7 @@ const onSSO = (async () => {
     </Button>
   </form>
 
+  <a href="/auth/keycloak/login">Login with Keycloak</a>
   <Button @click="onSSO" target="_blank">
     Login SSO
   </Button>
diff --git a/app/components/content/auth/login.vue b/app/components/content/auth/login.vue
index 5489fef5..27aeef5f 100644
--- a/app/components/content/auth/login.vue
+++ b/app/components/content/auth/login.vue
@@ -50,28 +50,20 @@ const state = reactive({
 })
 
 async function onSSO() {
+  console.log("=================== on SSO! ===================")
   const config = useRuntimeConfig()
 
-  const initOptions = {
+  const keycloak = new Keycloak({
       url: config.public.KEYCLOAK_URL,
       realm: config.public.KEYCLOAK_REALM,
-      clientId: config.public.KEYCLOAK_ID,
-      onLoad: 'login-required'
-  }
+      clientId: config.public.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID,
+  });
 
-  const keycloak = new Keycloak(initOptions)
-  keycloak
-      .init({ onLoad: initOptions.onLoad })
-      .then((auth) => {
-          if (!auth) {
-              window.location.reload()
-          } else {
-              // store.setup(keycloak)
-              state.loggedIn = true
-          }
-      })
+  try {
+    await keycloak.init({ onLoad: 'login-required' }); // Or 'login-required'
+    const nuxtApp = useNuxtApp()
+    nuxtApp.provide('keycloak', keycloak);
 
-  if (state.loggedIn) {
     const result = await xfetch('/api/v1/authentication/login-fes', 'POST', {
       data: keycloak,
     })
@@ -91,8 +83,54 @@ async function onSSO() {
         apiErrors.value.general = result.error?.message || result.message || 'Login failed'
       }
     }
+  } catch (error) {
+    console.error('Keycloak initialization failed:', error);
   }
 
+  // const initOptions = {
+  //     url: config.public.KEYCLOAK_URL,
+  //     realm: config.public.KEYCLOAK_REALM,
+  //     clientId: config.public.KEYCLOAK_ID,
+  //     onLoad: 'login-required'
+  // }
+
+  // const keycloak = new Keycloak(initOptions)
+  // console.log("=================== balik gak se! ===================")
+  // keycloak
+  //     .init({ onLoad: initOptions.onLoad })
+  //     .then((auth) => {
+  //         console.log(auth)
+  //         if (!auth) {
+  //             window.location.reload()
+  //         } else {
+  //             // store.setup(keycloak)
+  //             state.loggedIn = true
+  //         }
+  //     })
+
+  console.log("=================== onto login fes! ===================")
+  // if (state.loggedIn) {
+  //   const result = await xfetch('/api/v1/authentication/login-fes', 'POST', {
+  //     data: keycloak,
+  //   })
+
+  //   if (result.success) {
+  //     const { data: rawdata, meta } = result.body
+  //     if (meta.status === 'verified') {
+  //       login(rawdata)
+  //       navigateTo('/')
+  //     }
+  //   } else {
+  //     if (result.errors) {
+  //       Object.entries(result.errors).forEach(
+  //         ([field, errorInfo]: [string, any]) => (apiErrors.value[field] = errorInfo.message),
+  //       )
+  //     } else {
+  //       apiErrors.value.general = result.error?.message || result.message || 'Login failed'
+  //     }
+  //   }
+  // }
+
   // const urlSSO =
   //   config.public.KEYCLOAK_ISSUER +
   //   '/protocol/openid-connect/auth?client_id=' +
diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts
index e985520e..64d53a2f 100644
--- a/app/middleware/auth.global.ts
+++ b/app/middleware/auth.global.ts
@@ -2,10 +2,13 @@ export default defineNuxtRouteMiddleware((to) => {
   if (to.meta.public) return
 
   const { $pinia } = useNuxtApp()
+  const oidc = useOidcAuth();
+
   if (import.meta.client) {
     const userStore = useUserStore($pinia)
-    if (!userStore.isAuthenticated) {
+    if (!userStore.isAuthenticated && !oidc.loggedIn) {
       return navigateTo('/auth/login')
+      // oidc.login('dev');
     }
   }
 })
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 588c79b8..06532995 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -11,9 +11,9 @@ export default defineNuxtConfig({
     X_AP_CODE: process.env.X_AP_CODE || 'rssa-sso',
     X_AP_SECRET_KEY: process.env.X_AP_SECRET_KEY || 'sapiperah',
     SSO_CONFIRM_URL: process.env.SSO_CONFIRM_URL || 'https://auth.rssa.top/realms/sandbox/protocol/openid-connect/userinfo',
-    KEYCLOAK_ID: process.env.KEYCLOAK_ID  || 'portal-simrs-new',
-    KEYCLOAK_SECRET: process.env.KEYCLOAK_SECRET || 'awoiehrw3w8942341k1ln4',
-    KEYCLOAK_ISSUER: process.env.KEYCLOAK_ISSUER || 'https://auth.dev.rssa.id/realms/sandbox',
+    NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID  || 'portal-simrs-new',
+    NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET || 'awoiehrw3w8942341k1ln4',
+    NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL || 'https://auth.dev.rssa.id/realms/sandbox',
     KEYCLOAK_LOGOUT_REDIRECT: process.env.KEYCLOAK_LOGOUT_REDIRECT  || 'http://localhost:3000',
     //test
     KEYCLOAK_REALM: process.env.KEYCLOAK_REALM || 'sandbox',
@@ -26,9 +26,9 @@ export default defineNuxtConfig({
       X_AP_CODE: process.env.X_AP_CODE || 'rssa-sso',
       X_AP_SECRET_KEY: process.env.X_AP_SECRET_KEY || 'sapiperah',
       SSO_CONFIRM_URL: process.env.SSO_CONFIRM_URL || 'https://auth.rssa.top/realms/sandbox/protocol/openid-connect/userinfo',
-      KEYCLOAK_ID: process.env.KEYCLOAK_ID  || 'portal-simrs-new',
-      KEYCLOAK_SECRET: process.env.KEYCLOAK_SECRET || 'awoiehrw3w8942341k1ln4',
-      KEYCLOAK_ISSUER: process.env.KEYCLOAK_ISSUER || 'https://auth.dev.rssa.id/realms/sandbox',
+      NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID  || 'portal-simrs-new',
+      NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET || 'awoiehrw3w8942341k1ln4',
+      NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL || 'https://auth.dev.rssa.id/realms/sandbox',
       KEYCLOAK_LOGOUT_REDIRECT: process.env.KEYCLOAK_LOGOUT_REDIRECT  || 'http://localhost:3000',
       //test
       KEYCLOAK_REALM: process.env.KEYCLOAK_REALM || 'sandbox',
@@ -68,25 +68,31 @@ export default defineNuxtConfig({
     '@nuxtjs/color-mode',
     '@nuxtjs/tailwindcss',
     'shadcn-nuxt',
+    'nuxt-oidc-auth',
   ],
 
-  css: ['@unocss/reset/tailwind.css', '~/assets/css/main.css'],
-
-  colorMode: {
-    classSuffix: '',
+  oidc: {
+    defaultProvider: 'keycloak',
+    keycloak: {
+      audience: 'account',
+      baseUrl: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL, // change to your OP addrress
+      clientId: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID,
+      clientSecret: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET,
+      redirectUri: process.env.KEYCLOAK_LOGOUT_REDIRECT, // optional
+    },
+    middleware: {
+      globalMiddlewareEnabled: true,
+      customLoginPage: true
+    }
   },
 
+  css: ['@unocss/reset/tailwind.css', '~/assets/css/main.css'],
+
   features: {
     // For UnoCSS
     inlineStyles: false,
   },
 
-  eslint: {
-    config: {
-      standalone: false,
-    },
-  },
-
   imports: {
     dirs: ['./app/lib'],
   },
@@ -95,5 +101,15 @@ export default defineNuxtConfig({
     componentDir: './app/components/pub/ui',
   },
 
+  colorMode: {
+    classSuffix: '',
+  },
+
+  eslint: {
+    config: {
+      standalone: false,
+    },
+  },
+
   compatibilityDate: '2025-07-15',
 })
diff --git a/package.json b/package.json
index d260052d..95a51b70 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "embla-carousel": "^8.5.2",
     "embla-carousel-vue": "^8.5.2",
     "h3": "^1.15.4",
-    "keycloak-js": "^26.2.1",
+    "nuxt-openid-connect": "^0.8.1",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.4.1",
     "tailwindcss-animate": "^1.0.7"
@@ -51,9 +51,11 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-format": "^1.0.1",
     "happy-dom": "^18.0.1",
+    "keycloak-js": "^26.2.1",
     "lucide-vue-next": "^0.482.0",
     "next-auth": "~4.21.1",
     "nuxt": "^4.0.3",
+    "nuxt-oidc-auth": "1.0.0-beta.5",
     "playwright-core": "^1.54.2",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.5.14",

From 5166229d06cf43c1e03c25aafc2d171cc6ad1dac Mon Sep 17 00:00:00 2001
From: ari <kusuma.ari.prabowo@gmail.com>
Date: Wed, 19 Nov 2025 16:55:48 +0700
Subject: [PATCH 04/12] update env

---
 .env.example | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/.env.example b/.env.example
index 884ee1fb..c80e1391 100644
--- a/.env.example
+++ b/.env.example
@@ -2,3 +2,18 @@ NUXT_MAIN_API_ORIGIN=
 NUXT_BPJS_API_ORIGIN=
 NUXT_SYNC_API_ORIGIN=
 NUXT_API_ORIGIN=
+
+SSO_CONFIRM_URL =
+
+X_AP_CODE=rssa-sso
+X_AP_SECRET_KEY=sapiperah
+NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID=portal-simrs-new
+# Local
+NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET=
+NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL=http://127.0.0.1:8080/realms/rssa_testing
+
+KEYCLOAK_LOGOUT_REDIRECT=http://localhost:3000/
+
+# test local
+KEYCLOAK_REALM=rssa_testing
+KEYCLOAK_URL=http://127.0.0.1:8080/

From bbdaeee304854604d5198cbdb6295afd11e7b9ba Mon Sep 17 00:00:00 2001
From: ari <kusuma.ari.prabowo@gmail.com>
Date: Thu, 20 Nov 2025 16:25:35 +0700
Subject: [PATCH 05/12] update

---
 app/components/app/auth/login.vue     | 12 +++++++
 app/components/content/auth/login.vue | 50 ++++++++++++++++-----------
 app/pages/auth/sso.vue                | 13 +++++++
 3 files changed, 54 insertions(+), 21 deletions(-)
 create mode 100644 app/pages/auth/sso.vue

diff --git a/app/components/app/auth/login.vue b/app/components/app/auth/login.vue
index d7f549dd..7131daf2 100644
--- a/app/components/app/auth/login.vue
+++ b/app/components/app/auth/login.vue
@@ -14,6 +14,7 @@ const props = defineProps<Props>()
 const emit = defineEmits<{
   submit: [data: any]
   sso: []
+  response: [state: string]
 }>()
 
 const { handleSubmit, defineField, errors, meta } = useForm({
@@ -45,6 +46,14 @@ const onSSO = (async () => {
   }
 });
 
+const test = useRoute()
+const responseSSO = test.hash
+
+if (responseSSO != null && responseSSO != '') {
+  console.log("Getting Response SSO...")
+  await emit('response', responseSSO)
+}
+
 </script>
 
 <template>
@@ -85,7 +94,10 @@ const onSSO = (async () => {
   </form>
 
   <a href="/auth/keycloak/login">Login with Keycloak</a>
+
   <Button @click="onSSO" target="_blank">
     Login SSO
   </Button>
+
+  <span>success {{ responseSSO }}</span>
 </template>
diff --git a/app/components/content/auth/login.vue b/app/components/content/auth/login.vue
index 27aeef5f..23ab2316 100644
--- a/app/components/content/auth/login.vue
+++ b/app/components/content/auth/login.vue
@@ -60,29 +60,11 @@ async function onSSO() {
   });
 
   try {
-    await keycloak.init({ onLoad: 'login-required' }); // Or 'login-required'
+    const authenticatedResult = await keycloak.init({ onLoad: 'login-required' }); // Or 'login-required'
+    // seelah line ini aku mek paham logic e tapi faktane dunno
     const nuxtApp = useNuxtApp()
     nuxtApp.provide('keycloak', keycloak);
 
-    const result = await xfetch('/api/v1/authentication/login-fes', 'POST', {
-      data: keycloak,
-    })
-
-    if (result.success) {
-      const { data: rawdata, meta } = result.body
-      if (meta.status === 'verified') {
-        login(rawdata)
-        navigateTo('/')
-      }
-    } else {
-      if (result.errors) {
-        Object.entries(result.errors).forEach(
-          ([field, errorInfo]: [string, any]) => (apiErrors.value[field] = errorInfo.message),
-        )
-      } else {
-        apiErrors.value.general = result.error?.message || result.message || 'Login failed'
-      }
-    }
   } catch (error) {
     console.error('Keycloak initialization failed:', error);
   }
@@ -144,10 +126,36 @@ async function onSSO() {
   //   external: true
   // })
 }
+
+async function onResponseSSO(authenticatedResult: string) {
+  console.log("=================== onto login fes!!! ===================")
+  console.log(authenticatedResult)
+    if (authenticatedResult) {
+      const result = await xfetch('/api/v1/authentication/login-fes', 'POST', {
+        data: authenticatedResult,
+      })
+
+      if (result.success) {
+        const { data: rawdata, meta } = result.body
+        if (meta.status === 'verified') {
+          login(rawdata)
+          navigateTo('/')
+        }
+      } else {
+        if (result.errors) {
+          Object.entries(result.errors).forEach(
+            ([field, errorInfo]: [string, any]) => (apiErrors.value[field] = errorInfo.message),
+          )
+        } else {
+          apiErrors.value.general = result.error?.message || result.message || 'Login failed'
+        }
+      }
+    }
+}
 </script>
 
 <template>
-  <AppAuthLogin :schema="loginSchema" :is-loading="isLoading" @submit="onSubmit" @sso="onSSO" />
+  <AppAuthLogin :schema="loginSchema" :is-loading="isLoading" @submit="onSubmit" @sso="onSSO" @response="onResponseSSO" />
 </template>
 
 <style scoped></style>
diff --git a/app/pages/auth/sso.vue b/app/pages/auth/sso.vue
new file mode 100644
index 00000000..f2b21099
--- /dev/null
+++ b/app/pages/auth/sso.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'blank',
+  public: true,
+})
+
+const test = useRoute()
+const temp = test.hash
+</script>
+
+<template>
+ <span>success {{ temp }}</span>
+</template>

From 9ce103f38e5738388c3e855efdeb0bb5a04f991b Mon Sep 17 00:00:00 2001
From: ari <kusuma.ari.prabowo@gmail.com>
Date: Fri, 21 Nov 2025 14:43:08 +0700
Subject: [PATCH 06/12] update

---
 .env.example                                  |   6 +-
 app/components/app/auth/login.vue             |  27 ++--
 app/components/content/auth/login.vue         | 113 +----------------
 app/composables/useKeycloack.ts               | 117 ++++++++++++++++++
 app/middleware/auth.global.ts                 |  12 +-
 app/pages/auth/sso.vue                        |  31 +++--
 nuxt.config.ts                                |  24 +---
 package.json                                  |   1 -
 .../api/v1/authentication/login-fes.post.ts   |  69 +----------
 9 files changed, 167 insertions(+), 233 deletions(-)
 create mode 100644 app/composables/useKeycloack.ts

diff --git a/.env.example b/.env.example
index c80e1391..50d17cb5 100644
--- a/.env.example
+++ b/.env.example
@@ -7,13 +7,9 @@ SSO_CONFIRM_URL =
 
 X_AP_CODE=rssa-sso
 X_AP_SECRET_KEY=sapiperah
-NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID=portal-simrs-new
-# Local
-NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET=
-NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL=http://127.0.0.1:8080/realms/rssa_testing
-
 KEYCLOAK_LOGOUT_REDIRECT=http://localhost:3000/
 
 # test local
 KEYCLOAK_REALM=rssa_testing
 KEYCLOAK_URL=http://127.0.0.1:8080/
+CLIENT_ID=portal-simrs-new
diff --git a/app/components/app/auth/login.vue b/app/components/app/auth/login.vue
index 7131daf2..5acef75a 100644
--- a/app/components/app/auth/login.vue
+++ b/app/components/app/auth/login.vue
@@ -3,6 +3,8 @@ import type { z } from 'zod'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Loader2 } from 'lucide-vue-next'
 import { useForm } from 'vee-validate'
+import { useRouter } from 'vue-router'
+import { useKeycloak } from "~/composables/useKeycloack"
 
 interface Props {
   schema: z.ZodSchema<any>
@@ -14,7 +16,6 @@ const props = defineProps<Props>()
 const emit = defineEmits<{
   submit: [data: any]
   sso: []
-  response: [state: string]
 }>()
 
 const { handleSubmit, defineField, errors, meta } = useForm({
@@ -36,24 +37,24 @@ const onSubmit = handleSubmit(async (values) => {
   }
 })
 
+const { initKeycloak, getProfile, login } = useKeycloak()
+const profile = ref<any>(null)
+
+onMounted(async () => {
+  await initKeycloak('check-sso')
+  profile.value = getProfile()
+  console.log(profile)
+})
 
 const onSSO = (async () => {
-  console.log("Emitting SSO...")
   try {
-    await emit('sso')
+    const redirect = window.location.origin + '/auth/sso'
+    await login({ redirectUri: redirect })
   } catch (error) {
     console.error('Call SSO failed:', error)
   }
 });
 
-const test = useRoute()
-const responseSSO = test.hash
-
-if (responseSSO != null && responseSSO != '') {
-  console.log("Getting Response SSO...")
-  await emit('response', responseSSO)
-}
-
 </script>
 
 <template>
@@ -93,11 +94,7 @@ if (responseSSO != null && responseSSO != '') {
     </Button>
   </form>
 
-  <a href="/auth/keycloak/login">Login with Keycloak</a>
-
   <Button @click="onSSO" target="_blank">
     Login SSO
   </Button>
-
-  <span>success {{ responseSSO }}</span>
 </template>
diff --git a/app/components/content/auth/login.vue b/app/components/content/auth/login.vue
index 23ab2316..4efeef42 100644
--- a/app/components/content/auth/login.vue
+++ b/app/components/content/auth/login.vue
@@ -41,121 +41,10 @@ async function onSubmit(data: LoginFormData) {
 
   isLoading.value = false
 }
-
-const config = useRuntimeConfig()
-// const store = useKeycloak()
-
-const state = reactive({
-    loggedIn: false
-})
-
-async function onSSO() {
-  console.log("=================== on SSO! ===================")
-  const config = useRuntimeConfig()
-
-  const keycloak = new Keycloak({
-      url: config.public.KEYCLOAK_URL,
-      realm: config.public.KEYCLOAK_REALM,
-      clientId: config.public.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID,
-  });
-
-  try {
-    const authenticatedResult = await keycloak.init({ onLoad: 'login-required' }); // Or 'login-required'
-    // seelah line ini aku mek paham logic e tapi faktane dunno
-    const nuxtApp = useNuxtApp()
-    nuxtApp.provide('keycloak', keycloak);
-
-  } catch (error) {
-    console.error('Keycloak initialization failed:', error);
-  }
-
-  // const initOptions = {
-  //     url: config.public.KEYCLOAK_URL,
-  //     realm: config.public.KEYCLOAK_REALM,
-  //     clientId: config.public.KEYCLOAK_ID,
-  //     onLoad: 'login-required'
-  // }
-
-  // const keycloak = new Keycloak(initOptions)
-  // console.log("=================== balik gak se! ===================")
-  // keycloak
-  //     .init({ onLoad: initOptions.onLoad })
-  //     .then((auth) => {
-  //         console.log(auth)
-  //         if (!auth) {
-  //             window.location.reload()
-  //         } else {
-  //             // store.setup(keycloak)
-  //             state.loggedIn = true
-  //         }
-  //     })
-
-  console.log("=================== onto login fes! ===================")
-  // if (state.loggedIn) {
-  //   const result = await xfetch('/api/v1/authentication/login-fes', 'POST', {
-  //     data: keycloak,
-  //   })
-
-  //   if (result.success) {
-  //     const { data: rawdata, meta } = result.body
-  //     if (meta.status === 'verified') {
-  //       login(rawdata)
-  //       navigateTo('/')
-  //     }
-  //   } else {
-  //     if (result.errors) {
-  //       Object.entries(result.errors).forEach(
-  //         ([field, errorInfo]: [string, any]) => (apiErrors.value[field] = errorInfo.message),
-  //       )
-  //     } else {
-  //       apiErrors.value.general = result.error?.message || result.message || 'Login failed'
-  //     }
-  //   }
-  // }
-
-  // const urlSSO =
-  //   config.public.KEYCLOAK_ISSUER +
-  //   '/protocol/openid-connect/auth?client_id=' +
-  //   config.public.KEYCLOAK_ID +
-  //   '&scope=openid%20email%20profile&response_type=code&redirect_uri=' +
-  //   config.public.KEYCLOAK_LOGOUT_REDIRECT +
-  //   '%2Fapi%2Fauth%2Fcallback%2Fkeycloak&state=AKf-WHWdL822V3LaNS5MSFzJ96-VHp6FUXlXxIAzXXM&code_challenge=nXOcGLLlA1NtXI4RM4hL59iP_I_yQAsUDd5sAOkKBF4&code_challenge_method=S256'
-  // await navigateTo(urlSSO,
-  // {
-  //   open: { target: '_blank' },
-  //   external: true
-  // })
-}
-
-async function onResponseSSO(authenticatedResult: string) {
-  console.log("=================== onto login fes!!! ===================")
-  console.log(authenticatedResult)
-    if (authenticatedResult) {
-      const result = await xfetch('/api/v1/authentication/login-fes', 'POST', {
-        data: authenticatedResult,
-      })
-
-      if (result.success) {
-        const { data: rawdata, meta } = result.body
-        if (meta.status === 'verified') {
-          login(rawdata)
-          navigateTo('/')
-        }
-      } else {
-        if (result.errors) {
-          Object.entries(result.errors).forEach(
-            ([field, errorInfo]: [string, any]) => (apiErrors.value[field] = errorInfo.message),
-          )
-        } else {
-          apiErrors.value.general = result.error?.message || result.message || 'Login failed'
-        }
-      }
-    }
-}
 </script>
 
 <template>
-  <AppAuthLogin :schema="loginSchema" :is-loading="isLoading" @submit="onSubmit" @sso="onSSO" @response="onResponseSSO" />
+  <AppAuthLogin :schema="loginSchema" :is-loading="isLoading" @submit="onSubmit" />
 </template>
 
 <style scoped></style>
diff --git a/app/composables/useKeycloack.ts b/app/composables/useKeycloack.ts
new file mode 100644
index 00000000..a239322a
--- /dev/null
+++ b/app/composables/useKeycloack.ts
@@ -0,0 +1,117 @@
+import Keycloak from "keycloak-js";
+import { ref, computed, onBeforeMount } from "vue";
+
+let kc: any | null = null;
+
+const initialized = ref(false);
+const authenticated = ref(false);
+const token = ref<string | null>(null);
+const profile = ref<any>(null);
+
+export function useKeycloak() {
+  const initKeycloak = async (onLoad: "login-required" | "check-sso" = "check-sso") => {
+    if (kc) return kc;
+    kc = new Keycloak({
+      url: config.public.KEYCLOAK_URL,
+      realm: config.public.KEYCLOAK_REALM,
+      clientId: config.public.CLIENT_ID,
+    });
+
+    try {
+      const initOptions = {
+        onLoad,
+        promiseType: "native" as const,
+        pkceMethod: "S256" as const,
+      };
+      console.log(kc.url)
+      authenticated.value = await kc.init(initOptions);
+      initialized.value = true;
+      token.value = kc.token ?? null;
+      if (authenticated.value) {
+        try {
+          profile.value = await kc.loadUserProfile();
+        } catch (e) {
+          profile.value = null;
+        }
+      }
+      // automatically update token in background
+      kc.onTokenExpired = async () => {
+        try {
+          const refreshed = await kc.updateToken(30);
+          token.value = kc?.token ?? null;
+          if (!refreshed) {
+            // token not refreshed but still valid
+          }
+        } catch (err) {
+          console.warn("Failed to refresh token", err);
+        }
+      };
+      return kc;
+    } catch (err) {
+      console.log(authenticated)
+      console.error("Keycloak init xyz failed", err);
+      initialized.value = true;
+      authenticated.value = false;
+      return kc;
+    }
+  };
+
+  const login = (options?: Keycloak.KeycloakLoginOptions) => {
+    if (!kc) throw new Error("Keycloak not initialized");
+    return kc.login(options);
+  };
+
+  const logout = (redirectUri?: string) => {
+    if (!kc) throw new Error("Keycloak not initialized");
+    return kc.logout({ redirectUri });
+  };
+
+  const getToken = () => token.value;
+  const isAuthenticated = computed(() => authenticated.value);
+  const getProfile = () => profile.value;
+
+  // init on client automatically
+  // onBeforeMount(() => {
+  //   // try check-sso silently
+  //   if (!initialized.value) initKeycloak("check-sso");
+  // });
+
+  const apiErrors = ref<Record<string, string>>({})
+
+  const getResponse = async () => {
+    console.log("=================== onto login fes!!! ===================")
+    const params = {
+      token: token.value,
+      user: profile.value
+    }
+    const result = await xfetch('/api/v1/authentication/login-fes', 'POST', {
+      data: params,
+    })
+
+    if (result.success) {
+      const { data: rawdata, meta } = result.body
+      if (meta.status === 'verified') {
+        login(rawdata)
+        navigateTo('/')
+      }
+    } else {
+      if (result.errors) {
+        Object.entries(result.errors).forEach(
+          ([field, errorInfo]: [string, any]) => (apiErrors.value[field] = errorInfo.message),
+        )
+      } else {
+        apiErrors.value.general = result.error?.message || result.message || 'Login failed'
+      }
+    }
+  }
+
+  return {
+    initKeycloak,
+    login,
+    logout,
+    getToken,
+    isAuthenticated,
+    getProfile,
+    getResponse,
+  };
+}
diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts
index 64d53a2f..82ec2703 100644
--- a/app/middleware/auth.global.ts
+++ b/app/middleware/auth.global.ts
@@ -1,14 +1,18 @@
-export default defineNuxtRouteMiddleware((to) => {
+import { useKeycloak } from "~/composables/useKeycloack"
+
+export default defineNuxtRouteMiddleware(async (to) => {
   if (to.meta.public) return
 
   const { $pinia } = useNuxtApp()
-  const oidc = useOidcAuth();
+
+  const { initKeycloak, isAuthenticated} = useKeycloak(); // global composable
+  await initKeycloak("check-sso");
 
   if (import.meta.client) {
     const userStore = useUserStore($pinia)
-    if (!userStore.isAuthenticated && !oidc.loggedIn) {
+    if (!userStore.isAuthenticated && !isAuthenticated.value) {
+      // await login({ redirectUri: window.location.origin + to.fullPath });
       return navigateTo('/auth/login')
-      // oidc.login('dev');
     }
   }
 })
diff --git a/app/pages/auth/sso.vue b/app/pages/auth/sso.vue
index f2b21099..fbe6d959 100644
--- a/app/pages/auth/sso.vue
+++ b/app/pages/auth/sso.vue
@@ -1,13 +1,30 @@
 <script setup lang="ts">
-definePageMeta({
-  layout: 'blank',
-  public: true,
-})
+import { ref, onMounted } from 'vue'
+import { useKeycloak } from "~/composables/useKeycloack"
 
-const test = useRoute()
-const temp = test.hash
+const error = ref<string | null>(null)
+const { initKeycloak, isAuthenticated, getResponse } = useKeycloak()
+const profile = ref<any>(null)
+const token = ref<string | null>(null);
+
+onMounted(async () => {
+  try {
+    // Initialize Keycloak with login-required to ensure tokens set (Keycloak will process the code/state returned)
+    await initKeycloak('login-required')
+    // small delay to allow token propagation
+    if (isAuthenticated.value) {
+      await getResponse()
+    }
+  } catch (err: any) {
+    error.value = err?.message || String(err)
+  }
+})
 </script>
 
 <template>
- <span>success {{ temp }}</span>
+  <div style="max-width:720px;margin:40px auto">
+    <h2>Processing login...</h2>
+    <p v-if="error">Terjadi error: {{ error }}</p>
+    <p v-else>Mohon tunggu, sedang memproses otentikasi dan mengarahkan Anda ...</p>
+  </div>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 06532995..7d5dd000 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -11,13 +11,11 @@ export default defineNuxtConfig({
     X_AP_CODE: process.env.X_AP_CODE || 'rssa-sso',
     X_AP_SECRET_KEY: process.env.X_AP_SECRET_KEY || 'sapiperah',
     SSO_CONFIRM_URL: process.env.SSO_CONFIRM_URL || 'https://auth.rssa.top/realms/sandbox/protocol/openid-connect/userinfo',
-    NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID  || 'portal-simrs-new',
-    NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET || 'awoiehrw3w8942341k1ln4',
-    NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL || 'https://auth.dev.rssa.id/realms/sandbox',
     KEYCLOAK_LOGOUT_REDIRECT: process.env.KEYCLOAK_LOGOUT_REDIRECT  || 'http://localhost:3000',
     //test
     KEYCLOAK_REALM: process.env.KEYCLOAK_REALM || 'sandbox',
     KEYCLOAK_URL: process.env.KEYCLOAK_URL  || 'https://auth.dev.rssa.id/',
+    CLIENT_ID: process.env.CLIENT_ID || 'portal-simrs-new',
     public: {
       API_ORIGIN: process.env.NUXT_API_ORIGIN || 'http://localhost:3000',
       VCLAIM: process.env.NUXT_API_VCLAIM || 'http://localhost:3000',
@@ -26,13 +24,11 @@ export default defineNuxtConfig({
       X_AP_CODE: process.env.X_AP_CODE || 'rssa-sso',
       X_AP_SECRET_KEY: process.env.X_AP_SECRET_KEY || 'sapiperah',
       SSO_CONFIRM_URL: process.env.SSO_CONFIRM_URL || 'https://auth.rssa.top/realms/sandbox/protocol/openid-connect/userinfo',
-      NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID  || 'portal-simrs-new',
-      NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET || 'awoiehrw3w8942341k1ln4',
-      NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL || 'https://auth.dev.rssa.id/realms/sandbox',
       KEYCLOAK_LOGOUT_REDIRECT: process.env.KEYCLOAK_LOGOUT_REDIRECT  || 'http://localhost:3000',
       //test
       KEYCLOAK_REALM: process.env.KEYCLOAK_REALM || 'sandbox',
       KEYCLOAK_URL: process.env.KEYCLOAK_URL  || 'https://auth.dev.rssa.id/',
+      CLIENT_ID: process.env.CLIENT_ID || 'portal-simrs-new',
     },
   },
   ssr: false,
@@ -68,24 +64,8 @@ export default defineNuxtConfig({
     '@nuxtjs/color-mode',
     '@nuxtjs/tailwindcss',
     'shadcn-nuxt',
-    'nuxt-oidc-auth',
   ],
 
-  oidc: {
-    defaultProvider: 'keycloak',
-    keycloak: {
-      audience: 'account',
-      baseUrl: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL, // change to your OP addrress
-      clientId: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID,
-      clientSecret: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET,
-      redirectUri: process.env.KEYCLOAK_LOGOUT_REDIRECT, // optional
-    },
-    middleware: {
-      globalMiddlewareEnabled: true,
-      customLoginPage: true
-    }
-  },
-
   css: ['@unocss/reset/tailwind.css', '~/assets/css/main.css'],
 
   features: {
diff --git a/package.json b/package.json
index 95a51b70..98b42022 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,6 @@
     "lucide-vue-next": "^0.482.0",
     "next-auth": "~4.21.1",
     "nuxt": "^4.0.3",
-    "nuxt-oidc-auth": "1.0.0-beta.5",
     "playwright-core": "^1.54.2",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.5.14",
diff --git a/server/api/v1/authentication/login-fes.post.ts b/server/api/v1/authentication/login-fes.post.ts
index abcd50e6..64d54a71 100644
--- a/server/api/v1/authentication/login-fes.post.ts
+++ b/server/api/v1/authentication/login-fes.post.ts
@@ -7,18 +7,8 @@ export default defineEventHandler(async (event) => {
   const url = getRequestURL(event)
   const config = useRuntimeConfig()
 
-  console.log("body: " + JSON.stringify(body))
-
-  // const apiSSOConfirm = 'https://auth.rssa.top/realms/sandbox/protocol/openid-connect/userinfo'
   const apiSSOConfirm = config.public.SSO_CONFIRM_URL
-
-  const jwt = body.jwt
-  // const nip = body.nip
-  // const role = body.role
-  // const roleid = body.roleid
-  // const shift = body.shift
-  // const loginStatus = body.status_login
-  const token = 'Bearer ' + jwt
+  const token = 'Bearer ' + body.data.token
 
   const res_sso = await fetch(apiSSOConfirm,
   {
@@ -31,40 +21,17 @@ export default defineEventHandler(async (event) => {
 
   console.log(res_sso)
   if (res_sso.status === 200) {
-    const parts = jwt.split('.')
-
-    if (parts.count != 3) {
-        // return ['error' => 'Invalid JWT format'];
-    }
-
-    const header = Buffer.from(strtr(parts[0], '-_', '+/'), 'base64').toString('utf8')
-    const payload = Buffer.from(strtr(parts[1], '-_', '+/'), 'base64').toString('utf8')
-
-    // const textDecoder = new TextDecoder('utf-8');
-    // // Decode the header and payload
-    // const decodedBinaryHead = atob(parts[0]);
-    // const decodedBinaryPayload = atob(parts[0]);
-    // const header = textDecoder.decode(Uint8Array.from(decodedBinaryHead, char => char.charCodeAt(0)));
-    // const payload = textDecoder.decode(Uint8Array.from(decodedBinaryPayload, char => char.charCodeAt(0)));
-
-    const result = {
-        'header': header,
-        'payload': payload
-    };
-
     const apiOrigin = config.public.API_ORIGIN
 
     const cleanOrigin = apiOrigin.replace(/\/+$/, '')
     const cleanPath = url.pathname.replace(/^\/api\//, '').replace(/^\/+/, '')
     const externalUrl = `${cleanOrigin}/${cleanPath}${url.search}`
-    console.log("external url: " + externalUrl)
-    console.log("body: " + JSON.stringify(body))
 
     const resp = await fetch(externalUrl,
     {
       method: 'POST',
       body: JSON.stringify({
-        name: JSON.parse(payload).name,
+        name: body.data.user.username,
       }),
       headers: {
         'Content-Type': 'application/json',
@@ -73,27 +40,6 @@ export default defineEventHandler(async (event) => {
       },
     })
 
-    console.log(resp)
-    // if (resp.status === 200) {
-    //   const data = await resp.json()
-
-    //   if (data?.data?.accessToken) {
-    //     setCookie(event, 'authentication', data.data.accessToken, {
-    //       path: '/',
-    //       httpOnly: true,
-    //       sameSite: 'strict',
-    //       maxAge: 60 * 60 * 24,
-    //     })
-
-    //     delete data.data.accessToken
-    //     // return data
-
-    //     const { login } = useUserStore()
-    //     await login(resp.text())
-    //     await navigateTo('/')
-    //   }
-    // }
-
     return new Response(await resp.text(), {
       status: resp.status,
       headers: {
@@ -109,14 +55,3 @@ export default defineEventHandler(async (event) => {
     },
   })
 })
-
-function strtr(str: string, fromChars: string, toChars: string) {
-  let result = str;
-  for (let i = 0; i < fromChars.length; i++) {
-    const fromChar = fromChars[i] || '_-';
-    // const toChar = toChars[i];
-    // Use a global regex to replace all occurrences of the character
-    result = result.replace(new RegExp(fromChar.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), toChars);
-  }
-  return result;
-}

From f40d25042bb688d898f1fbb7b0956073b57417f9 Mon Sep 17 00:00:00 2001
From: ari <kusuma.ari.prabowo@gmail.com>
Date: Fri, 21 Nov 2025 15:00:24 +0700
Subject: [PATCH 07/12] update bug fix

---
 app/composables/useKeycloack.ts | 1 +
 nuxt.config.ts                  | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/composables/useKeycloack.ts b/app/composables/useKeycloack.ts
index a239322a..96e69b64 100644
--- a/app/composables/useKeycloack.ts
+++ b/app/composables/useKeycloack.ts
@@ -9,6 +9,7 @@ const token = ref<string | null>(null);
 const profile = ref<any>(null);
 
 export function useKeycloak() {
+  const config = useRuntimeConfig()
   const initKeycloak = async (onLoad: "login-required" | "check-sso" = "check-sso") => {
     if (kc) return kc;
     kc = new Keycloak({
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7d5dd000..f8286022 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -12,7 +12,6 @@ export default defineNuxtConfig({
     X_AP_SECRET_KEY: process.env.X_AP_SECRET_KEY || 'sapiperah',
     SSO_CONFIRM_URL: process.env.SSO_CONFIRM_URL || 'https://auth.rssa.top/realms/sandbox/protocol/openid-connect/userinfo',
     KEYCLOAK_LOGOUT_REDIRECT: process.env.KEYCLOAK_LOGOUT_REDIRECT  || 'http://localhost:3000',
-    //test
     KEYCLOAK_REALM: process.env.KEYCLOAK_REALM || 'sandbox',
     KEYCLOAK_URL: process.env.KEYCLOAK_URL  || 'https://auth.dev.rssa.id/',
     CLIENT_ID: process.env.CLIENT_ID || 'portal-simrs-new',
@@ -25,7 +24,6 @@ export default defineNuxtConfig({
       X_AP_SECRET_KEY: process.env.X_AP_SECRET_KEY || 'sapiperah',
       SSO_CONFIRM_URL: process.env.SSO_CONFIRM_URL || 'https://auth.rssa.top/realms/sandbox/protocol/openid-connect/userinfo',
       KEYCLOAK_LOGOUT_REDIRECT: process.env.KEYCLOAK_LOGOUT_REDIRECT  || 'http://localhost:3000',
-      //test
       KEYCLOAK_REALM: process.env.KEYCLOAK_REALM || 'sandbox',
       KEYCLOAK_URL: process.env.KEYCLOAK_URL  || 'https://auth.dev.rssa.id/',
       CLIENT_ID: process.env.CLIENT_ID || 'portal-simrs-new',

From 674a4be4cef8796683130ba301598e3dd070dcc8 Mon Sep 17 00:00:00 2001
From: ari <kusuma.ari.prabowo@gmail.com>
Date: Fri, 21 Nov 2025 15:19:22 +0700
Subject: [PATCH 08/12] update

---
 app/components/app/auth/login.vue          | 5 ++---
 app/components/layout/SidebarNavFooter.vue | 5 +++++
 app/composables/useKeycloack.ts            | 9 +++++----
 app/middleware/auth.global.ts              | 4 +++-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/components/app/auth/login.vue b/app/components/app/auth/login.vue
index 5acef75a..bb87069b 100644
--- a/app/components/app/auth/login.vue
+++ b/app/components/app/auth/login.vue
@@ -3,7 +3,6 @@ import type { z } from 'zod'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Loader2 } from 'lucide-vue-next'
 import { useForm } from 'vee-validate'
-import { useRouter } from 'vue-router'
 import { useKeycloak } from "~/composables/useKeycloack"
 
 interface Props {
@@ -37,7 +36,7 @@ const onSubmit = handleSubmit(async (values) => {
   }
 })
 
-const { initKeycloak, getProfile, login } = useKeycloak()
+const { initKeycloak, getProfile, loginSSO } = useKeycloak()
 const profile = ref<any>(null)
 
 onMounted(async () => {
@@ -49,7 +48,7 @@ onMounted(async () => {
 const onSSO = (async () => {
   try {
     const redirect = window.location.origin + '/auth/sso'
-    await login({ redirectUri: redirect })
+    await loginSSO({ redirectUri: redirect })
   } catch (error) {
     console.error('Call SSO failed:', error)
   }
diff --git a/app/components/layout/SidebarNavFooter.vue b/app/components/layout/SidebarNavFooter.vue
index 2c1e942c..5dcfa1a5 100644
--- a/app/components/layout/SidebarNavFooter.vue
+++ b/app/components/layout/SidebarNavFooter.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useSidebar } from '~/components/pub/ui/sidebar'
+import { useKeycloak } from "~/composables/useKeycloack"
 
 // defineProps<{
 //   user: {
@@ -11,11 +12,15 @@ import { useSidebar } from '~/components/pub/ui/sidebar'
 
 const { isMobile } = useSidebar()
 const { user, logout, setActiveRole, getActiveRole } = useUserStore()
+const { initKeycloak, logoutSSO } = useKeycloak()
 // const userStore = useUserStore().user
 
 function handleLogout() {
+  initKeycloak('check-sso')
+
   navigateTo('/auth/login')
   logout()
+  logoutSSO(window.location.origin + '/auth/login')
 }
 
 const showModalTheme = ref(false)
diff --git a/app/composables/useKeycloack.ts b/app/composables/useKeycloack.ts
index 96e69b64..563b3d1a 100644
--- a/app/composables/useKeycloack.ts
+++ b/app/composables/useKeycloack.ts
@@ -57,12 +57,12 @@ export function useKeycloak() {
     }
   };
 
-  const login = (options?: Keycloak.KeycloakLoginOptions) => {
+  const loginSSO = (options?: Keycloak.KeycloakLoginOptions) => {
     if (!kc) throw new Error("Keycloak not initialized");
     return kc.login(options);
   };
 
-  const logout = (redirectUri?: string) => {
+  const logoutSSO = (redirectUri?: string) => {
     if (!kc) throw new Error("Keycloak not initialized");
     return kc.logout({ redirectUri });
   };
@@ -78,6 +78,7 @@ export function useKeycloak() {
   // });
 
   const apiErrors = ref<Record<string, string>>({})
+  const { login } = useUserStore()
 
   const getResponse = async () => {
     console.log("=================== onto login fes!!! ===================")
@@ -108,8 +109,8 @@ export function useKeycloak() {
 
   return {
     initKeycloak,
-    login,
-    logout,
+    loginSSO,
+    logoutSSO,
     getToken,
     isAuthenticated,
     getProfile,
diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts
index 82ec2703..3a0efd16 100644
--- a/app/middleware/auth.global.ts
+++ b/app/middleware/auth.global.ts
@@ -2,6 +2,7 @@ import { useKeycloak } from "~/composables/useKeycloack"
 
 export default defineNuxtRouteMiddleware(async (to) => {
   if (to.meta.public) return
+  // if (!to.meta?.requiresAuth) return;
 
   const { $pinia } = useNuxtApp()
 
@@ -11,8 +12,9 @@ export default defineNuxtRouteMiddleware(async (to) => {
   if (import.meta.client) {
     const userStore = useUserStore($pinia)
     if (!userStore.isAuthenticated && !isAuthenticated.value) {
-      // await login({ redirectUri: window.location.origin + to.fullPath });
       return navigateTo('/auth/login')
+    } else {
+      console.log("its logged in!!! ")
     }
   }
 })

From 87121d00fdeb196a63df1c505a3acc9bea10726a Mon Sep 17 00:00:00 2001
From: ari <kusuma.ari.prabowo@gmail.com>
Date: Fri, 21 Nov 2025 15:57:09 +0700
Subject: [PATCH 09/12] update merge dan set cookies

---
 app/composables/useKeycloack.ts                |  8 ++++----
 server/api/v1/authentication/login-fes.post.ts | 17 ++++++++++++++++-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/app/composables/useKeycloack.ts b/app/composables/useKeycloack.ts
index 563b3d1a..09f72a8c 100644
--- a/app/composables/useKeycloack.ts
+++ b/app/composables/useKeycloack.ts
@@ -72,10 +72,10 @@ export function useKeycloak() {
   const getProfile = () => profile.value;
 
   // init on client automatically
-  // onBeforeMount(() => {
-  //   // try check-sso silently
-  //   if (!initialized.value) initKeycloak("check-sso");
-  // });
+  onBeforeMount(() => {
+    // try check-sso silently
+    if (!initialized.value) initKeycloak("check-sso");
+  });
 
   const apiErrors = ref<Record<string, string>>({})
   const { login } = useUserStore()
diff --git a/server/api/v1/authentication/login-fes.post.ts b/server/api/v1/authentication/login-fes.post.ts
index 64d54a71..bae714de 100644
--- a/server/api/v1/authentication/login-fes.post.ts
+++ b/server/api/v1/authentication/login-fes.post.ts
@@ -2,7 +2,6 @@ import { getRequestURL, readBody, setCookie } from 'h3'
 
 // Function to verify JWT token with the userinfo endpoint
 export default defineEventHandler(async (event) => {
-  console.log("=================== MASUK FE SSO! ===================")
   const body = await readBody(event)
   const url = getRequestURL(event)
   const config = useRuntimeConfig()
@@ -40,6 +39,22 @@ export default defineEventHandler(async (event) => {
       },
     })
 
+    if (resp.status === 200) {
+      const data = await resp.json()
+
+      if (data?.data?.accessToken) {
+        setCookie(event, 'authentication', data.data.accessToken, {
+          path: '/',
+          httpOnly: true,
+          sameSite: 'strict',
+          maxAge: 60 * 60 * 24,
+        })
+
+        delete data.data.accessToken
+        return data
+      }
+    }
+
     return new Response(await resp.text(), {
       status: resp.status,
       headers: {

From 6ee33d252563ca8e9ae9c9bc89f224dcd05b0b53 Mon Sep 17 00:00:00 2001
From: ari <kusuma.ari.prabowo@gmail.com>
Date: Tue, 25 Nov 2025 10:27:13 +0700
Subject: [PATCH 10/12] update BF login sso outsite login

---
 app/components/content/auth/login.vue | 2 --
 app/pages/auth/sso.vue                | 4 +++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/content/auth/login.vue b/app/components/content/auth/login.vue
index 4efeef42..0e581ca9 100644
--- a/app/components/content/auth/login.vue
+++ b/app/components/content/auth/login.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { z } from 'zod'
-import Keycloak from 'keycloak-js'
-// import { useKeycloak } from '@/stores/keycloak'
 
 const loginSchema = z.object({
   name: z.string().min(3, 'Please enter a valid username'),
diff --git a/app/pages/auth/sso.vue b/app/pages/auth/sso.vue
index fbe6d959..33f5cb0e 100644
--- a/app/pages/auth/sso.vue
+++ b/app/pages/auth/sso.vue
@@ -3,7 +3,7 @@ import { ref, onMounted } from 'vue'
 import { useKeycloak } from "~/composables/useKeycloack"
 
 const error = ref<string | null>(null)
-const { initKeycloak, isAuthenticated, getResponse } = useKeycloak()
+const { initKeycloak, isAuthenticated, getResponse, loginSSO } = useKeycloak()
 const profile = ref<any>(null)
 const token = ref<string | null>(null);
 
@@ -14,6 +14,8 @@ onMounted(async () => {
     // small delay to allow token propagation
     if (isAuthenticated.value) {
       await getResponse()
+    } else {
+      await loginSSO({ redirectUri: '/auth/sso' })
     }
   } catch (err: any) {
     error.value = err?.message || String(err)

From 616c15c87cd6c09a083fbeee4e0e596f6d6a8c1c Mon Sep 17 00:00:00 2001
From: ari <kusuma.ari.prabowo@gmail.com>
Date: Tue, 25 Nov 2025 11:06:51 +0700
Subject: [PATCH 11/12] update BF

---
 app/middleware/auth.global.ts | 6 ++++--
 app/pages/auth/sso.vue        | 6 ++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts
index 3a0efd16..b10ed401 100644
--- a/app/middleware/auth.global.ts
+++ b/app/middleware/auth.global.ts
@@ -6,7 +6,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
 
   const { $pinia } = useNuxtApp()
 
-  const { initKeycloak, isAuthenticated} = useKeycloak(); // global composable
+  const { initKeycloak, isAuthenticated, getResponse} = useKeycloak(); // global composable
   await initKeycloak("check-sso");
 
   if (import.meta.client) {
@@ -14,7 +14,9 @@ export default defineNuxtRouteMiddleware(async (to) => {
     if (!userStore.isAuthenticated && !isAuthenticated.value) {
       return navigateTo('/auth/login')
     } else {
-      console.log("its logged in!!! ")
+      if (isAuthenticated.value) {
+        await getResponse()
+      }
     }
   }
 })
diff --git a/app/pages/auth/sso.vue b/app/pages/auth/sso.vue
index 33f5cb0e..b16f6593 100644
--- a/app/pages/auth/sso.vue
+++ b/app/pages/auth/sso.vue
@@ -3,9 +3,7 @@ import { ref, onMounted } from 'vue'
 import { useKeycloak } from "~/composables/useKeycloack"
 
 const error = ref<string | null>(null)
-const { initKeycloak, isAuthenticated, getResponse, loginSSO } = useKeycloak()
-const profile = ref<any>(null)
-const token = ref<string | null>(null);
+const { initKeycloak, isAuthenticated, getResponse } = useKeycloak()
 
 onMounted(async () => {
   try {
@@ -15,7 +13,7 @@ onMounted(async () => {
     if (isAuthenticated.value) {
       await getResponse()
     } else {
-      await loginSSO({ redirectUri: '/auth/sso' })
+      return navigateTo('/auth/login')
     }
   } catch (err: any) {
     error.value = err?.message || String(err)

From 51725d7f73594805ae3afad8d3bb7989b0000fc1 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 12 Dec 2025 16:12:24 +0700
Subject: [PATCH 12/12] feat(patient): doc preview, integration to select
 ethnic and lang (#229)

* impl: opts for ethnic and lang

* fix: doc related for preview

fix: upload dokumen kk dan ktp

fix dokumen preview

fix: add preview doc on edit form
---
 app/components/app/patient/entry-form.vue     | 135 +++++++++++++++---
 .../app/patient/fields/select-ethnicity.vue   |  37 ++---
 .../app/patient/fields/select-lang.vue        |  21 +--
 app/components/app/patient/preview.vue        |  85 ++++++++++-
 app/components/content/patient/detail.vue     |  18 +++
 app/components/content/patient/form.vue       |  56 +++++++-
 app/models/ethnic.ts                          |   2 +-
 app/models/language.ts                        |   4 +-
 app/services/ethnic.service.ts                |  44 ++++++
 app/services/language.service.ts              |  44 ++++++
 app/services/patient.service.ts               |   9 +-
 11 files changed, 400 insertions(+), 55 deletions(-)
 create mode 100644 app/services/ethnic.service.ts
 create mode 100644 app/services/language.service.ts

diff --git a/app/components/app/patient/entry-form.vue b/app/components/app/patient/entry-form.vue
index c2e187a5..34dd2a34 100644
--- a/app/components/app/patient/entry-form.vue
+++ b/app/components/app/patient/entry-form.vue
@@ -11,6 +11,7 @@ import { calculateAge } from '~/models/person'
 // components
 import * as DE from '~/components/pub/my-ui/doc-entry'
 import { InputBase, FileField as FileUpload } from '~/components/pub/my-ui/form'
+import { Skeleton } from '~/components/pub/ui/skeleton'
 import { SelectBirthPlace } from '~/components/app/person/fields'
 import {
   InputName,
@@ -60,10 +61,20 @@ interface PatientFormInput {
 
 interface Props {
   isReadonly: boolean
+  languageOptions?: { value: string; label: string }[]
+  ethnicOptions?: { value: string; label: string }[]
   initialValues?: PatientFormInput
+  mode?: 'add' | 'edit'
+  identityFileUrl?: string
+  familyCardFileUrl?: string
 }
 
 const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'preview', url: string): void
+}>()
+
 const formSchema = toTypedSchema(PatientSchema)
 
 const { values, resetForm, setValues, setFieldValue, validate, setFieldError } = useForm<FormData>({
@@ -208,6 +219,7 @@ watch(
         label="Suku"
         placeholder="Pilih suku bangsa"
         :is-disabled="isReadonly || values.nationality !== 'WNI'"
+        :items="ethnicOptions || []"
       />
       <SelectLanguage
         field-name="language"
@@ -215,6 +227,7 @@ watch(
         placeholder="Pilih preferensi bahasa"
         is-required
         :is-disabled="isReadonly"
+        :items="languageOptions || []"
       />
       <SelectReligion
         field-name="religion"
@@ -256,22 +269,112 @@ watch(
       :col-count="2"
       :cell-flex="false"
     >
-      <FileUpload
-        field-name="identityCardFile"
-        label="Dokumen KTP"
-        placeholder="Unggah scan dokumen KTP"
-        :accept="['pdf', 'jpg', 'png']"
-        :max-size-mb="1"
-        :is-disabled="isReadonly"
-      />
-      <FileUpload
-        field-name="familyCardFile"
-        label="Dokumen KK"
-        placeholder="Unggah scan dokumen KK"
-        :accept="['pdf', 'jpg', 'png']"
-        :max-size-mb="1"
-        :is-disabled="isReadonly"
-      />
+      <div class="flex flex-col gap-3">
+        <FileUpload
+          field-name="residentIdentityFile"
+          label="Dokumen KTP"
+          placeholder="Unggah scan dokumen KTP"
+          :accept="['pdf', 'jpg', 'png']"
+          :max-size-mb="1"
+          :is-disabled="isReadonly"
+        />
+        <!-- Embed Preview Dokumen KTP (mode edit) -->
+        <div
+          v-if="mode === 'edit'"
+          class="flex flex-col gap-1"
+        >
+          <span class="text-xs text-muted-foreground">Dokumen Tersimpan</span>
+          <div
+            class="relative h-28 w-48 cursor-pointer overflow-hidden rounded-md border bg-muted"
+            :class="{ 'cursor-not-allowed opacity-60': !identityFileUrl }"
+            @click="identityFileUrl && emit('preview', identityFileUrl)"
+          >
+            <img
+              v-if="identityFileUrl"
+              :src="identityFileUrl"
+              alt="Dokumen KTP"
+              class="h-full w-full object-cover"
+            />
+            <Skeleton
+              v-else
+              class="h-full w-full"
+            />
+            <!-- Overlay -->
+            <div
+              class="absolute inset-0 flex items-center justify-center bg-black/50 transition-opacity"
+              :class="identityFileUrl ? 'opacity-0 hover:opacity-100' : 'opacity-100'"
+            >
+              <div
+                v-if="identityFileUrl"
+                class="flex flex-col items-center gap-1 text-white"
+              >
+                <span class="i-lucide-eye h-5 w-5" />
+                <span class="text-xs font-medium">Lihat Dokumen</span>
+              </div>
+              <div
+                v-else
+                class="flex flex-col items-center gap-1 text-white/70"
+              >
+                <span class="i-lucide-info h-5 w-5" />
+                <span class="text-xs font-medium">No Data</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col gap-3">
+        <FileUpload
+          field-name="familyIdentityFile"
+          label="Dokumen KK"
+          placeholder="Unggah scan dokumen KK"
+          :accept="['pdf', 'jpg', 'png']"
+          :max-size-mb="1"
+          :is-disabled="isReadonly"
+        />
+        <!-- Embed Preview Dokumen KK (mode edit) -->
+        <div
+          v-if="mode === 'edit'"
+          class="flex flex-col gap-1"
+        >
+          <span class="text-xs text-muted-foreground">Dokumen Tersimpan</span>
+          <div
+            class="relative h-28 w-48 cursor-pointer overflow-hidden rounded-md border bg-muted"
+            :class="{ 'cursor-not-allowed opacity-60': !familyCardFileUrl }"
+            @click="familyCardFileUrl && emit('preview', familyCardFileUrl)"
+          >
+            <img
+              v-if="familyCardFileUrl"
+              :src="familyCardFileUrl"
+              alt="Dokumen KK"
+              class="h-full w-full object-cover"
+            />
+            <Skeleton
+              v-else
+              class="h-full w-full"
+            />
+            <!-- Overlay -->
+            <div
+              class="absolute inset-0 flex items-center justify-center bg-black/50 transition-opacity"
+              :class="familyCardFileUrl ? 'opacity-0 hover:opacity-100' : 'opacity-100'"
+            >
+              <div
+                v-if="familyCardFileUrl"
+                class="flex flex-col items-center gap-1 text-white"
+              >
+                <span class="i-lucide-eye h-5 w-5" />
+                <span class="text-xs font-medium">Lihat Dokumen</span>
+              </div>
+              <div
+                v-else
+                class="flex flex-col items-center gap-1 text-white/70"
+              >
+                <span class="i-lucide-info h-5 w-5" />
+                <span class="text-xs font-medium">No Data</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </DE.Block>
   </form>
 </template>
diff --git a/app/components/app/patient/fields/select-ethnicity.vue b/app/components/app/patient/fields/select-ethnicity.vue
index 43ef6cba..73645441 100644
--- a/app/components/app/patient/fields/select-ethnicity.vue
+++ b/app/components/app/patient/fields/select-ethnicity.vue
@@ -6,6 +6,7 @@ import { cn } from '~/lib/utils'
 import * as DE from '~/components/pub/my-ui/doc-entry'
 
 const props = defineProps<{
+  items: { value: string; label: string }[]
   fieldName?: string
   label?: string
   placeholder?: string
@@ -28,23 +29,23 @@ const {
   labelClass,
 } = props
 
-const ethnicOptions = [
-  { label: 'Tidak diketahui', value: 'unknown', priority: 1 },
-  { label: 'Jawa', value: 'jawa' },
-  { label: 'Sunda', value: 'sunda' },
-  { label: 'Batak', value: 'batak' },
-  { label: 'Betawi', value: 'betawi' },
-  { label: 'Minangkabau', value: 'minangkabau' },
-  { label: 'Bugis', value: 'bugis' },
-  { label: 'Madura', value: 'madura' },
-  { label: 'Banjar', value: 'banjar' },
-  { label: 'Bali', value: 'bali' },
-  { label: 'Dayak', value: 'dayak' },
-  { label: 'Aceh', value: 'aceh' },
-  { label: 'Sasak', value: 'sasak' },
-  { label: 'Papua', value: 'papua' },
-  { label: 'Lainnya', value: 'lainnya', priority: -100 },
-]
+// const ethnicOptions = [
+//   { label: 'Tidak diketahui', value: 'unknown', priority: 1 },
+//   { label: 'Jawa', value: 'jawa' },
+//   { label: 'Sunda', value: 'sunda' },
+//   { label: 'Batak', value: 'batak' },
+//   { label: 'Betawi', value: 'betawi' },
+//   { label: 'Minangkabau', value: 'minangkabau' },
+//   { label: 'Bugis', value: 'bugis' },
+//   { label: 'Madura', value: 'madura' },
+//   { label: 'Banjar', value: 'banjar' },
+//   { label: 'Bali', value: 'bali' },
+//   { label: 'Dayak', value: 'dayak' },
+//   { label: 'Aceh', value: 'aceh' },
+//   { label: 'Sasak', value: 'sasak' },
+//   { label: 'Papua', value: 'papua' },
+//   { label: 'Lainnya', value: 'lainnya', priority: -100 },
+// ]
 </script>
 
 <template>
@@ -70,7 +71,7 @@ const ethnicOptions = [
             <Combobox
               :id="fieldName"
               v-bind="componentField"
-              :items="ethnicOptions"
+              :items="items"
               :placeholder="placeholder"
               :is-disabled="isDisabled"
               search-placeholder="Cari..."
diff --git a/app/components/app/patient/fields/select-lang.vue b/app/components/app/patient/fields/select-lang.vue
index 3f2b1bd1..5cf06d0b 100644
--- a/app/components/app/patient/fields/select-lang.vue
+++ b/app/components/app/patient/fields/select-lang.vue
@@ -6,6 +6,7 @@ import { cn } from '~/lib/utils'
 import * as DE from '~/components/pub/my-ui/doc-entry'
 
 const props = defineProps<{
+  items: { value: string; label: string }[]
   fieldName?: string
   label?: string
   placeholder?: string
@@ -29,15 +30,15 @@ const {
   labelClass,
 } = props
 
-const langOptions = [
-  { label: 'Bahasa Indonesia', value: 'id', priority: 1 },
-  { label: 'Bahasa Jawa', value: 'jawa' },
-  { label: 'Bahasa Sunda', value: 'sunda' },
-  { label: 'Bahasa Bali', value: 'bali' },
-  { label: 'Bahasa Jaksel', value: 'jaksel' },
-  { label: 'Bahasa Inggris', value: 'en' },
-  { label: 'Tidak Diketahui', value: 'unknown', priority: 100 },
-]
+// const langOptions = [
+//   { label: 'Bahasa Indonesia', value: 'id', priority: 1 },
+//   { label: 'Bahasa Jawa', value: 'jawa' },
+//   { label: 'Bahasa Sunda', value: 'sunda' },
+//   { label: 'Bahasa Bali', value: 'bali' },
+//   { label: 'Bahasa Jaksel', value: 'jaksel' },
+//   { label: 'Bahasa Inggris', value: 'en' },
+//   { label: 'Tidak Diketahui', value: 'unknown', priority: 100 },
+// ]
 </script>
 
 <template>
@@ -64,7 +65,7 @@ const langOptions = [
               :is-disabled="isDisabled"
               :id="fieldName"
               v-bind="componentField"
-              :items="langOptions"
+              :items="items"
               :placeholder="placeholder"
               :preserve-order="false"
               :class="
diff --git a/app/components/app/patient/preview.vue b/app/components/app/patient/preview.vue
index 123de9cf..a5907293 100644
--- a/app/components/app/patient/preview.vue
+++ b/app/components/app/patient/preview.vue
@@ -38,6 +38,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'back'): void
   (e: 'edit'): void
+  (e: 'preview', url: string): void
 }>()
 
 // #endregion
@@ -70,6 +71,14 @@ const patientAge = computed(() => {
   }
   return calculateAge(props.patient.person.birthDate)
 })
+
+const familiyCardFile = computed(() => {
+  return props.patient.person.familyIdentityFileUrl || ''
+})
+const identityFile = computed(() => {
+  return props.patient.person.residentIdentityFileUrl || ''
+})
+
 // #endregion
 
 // #region Lifecycle Hooks
@@ -166,13 +175,85 @@ function onNavigate(type: ClickType) {
         <AccordionTrigger>{{ section }}</AccordionTrigger>
         <AccordionContent>
           <div class="grid grid-cols-2 gap-4">
+            <!-- Dokumen KTP -->
             <div class="flex flex-col gap-2">
               <span class="text-sm text-muted-foreground">Dokumen KTP</span>
-              <Skeleton class="h-32 w-64 rounded-md" />
+              <div
+                class="relative h-32 w-64 cursor-pointer overflow-hidden rounded-md border bg-muted"
+                :class="{ 'cursor-not-allowed opacity-60': !identityFile }"
+                @click="identityFile && emit('preview', identityFile)"
+              >
+                <img
+                  v-if="identityFile"
+                  :src="identityFile"
+                  alt="Dokumen KTP"
+                  class="h-full w-full object-cover"
+                />
+                <Skeleton
+                  v-else
+                  class="h-full w-full"
+                />
+                <!-- Overlay -->
+                <div
+                  class="absolute inset-0 flex items-center justify-center bg-black/50 transition-opacity"
+                  :class="identityFile ? 'opacity-0 hover:opacity-100' : 'opacity-100'"
+                >
+                  <div
+                    v-if="identityFile"
+                    class="flex flex-col items-center gap-1 text-white"
+                  >
+                    <span class="i-lucide-eye h-6 w-6" />
+                    <span class="text-sm font-medium">Lihat Dokumen</span>
+                  </div>
+                  <div
+                    v-else
+                    class="flex flex-col items-center gap-1 text-white/70"
+                  >
+                    <span class="i-lucide-info h-6 w-6" />
+                    <span class="text-sm font-medium">No Data</span>
+                  </div>
+                </div>
+              </div>
             </div>
+            <!-- Dokumen KK -->
             <div class="flex flex-col gap-2">
               <span class="text-sm text-muted-foreground">Dokumen KK</span>
-              <Skeleton class="h-32 w-64 rounded-md" />
+              <div
+                class="relative h-32 w-64 cursor-pointer overflow-hidden rounded-md border bg-muted"
+                :class="{ 'cursor-not-allowed opacity-60': !familiyCardFile }"
+                @click="familiyCardFile && emit('preview', familiyCardFile)"
+              >
+                <img
+                  v-if="familiyCardFile"
+                  :src="familiyCardFile"
+                  alt="Dokumen KK"
+                  class="h-full w-full object-cover"
+                />
+                <Skeleton
+                  v-else
+                  class="h-full w-full"
+                />
+                <!-- Overlay -->
+                <div
+                  class="absolute inset-0 flex items-center justify-center bg-black/50 transition-opacity"
+                  :class="familiyCardFile ? 'opacity-0 hover:opacity-100' : 'opacity-100'"
+                >
+                  <div
+                    v-if="familiyCardFile"
+                    class="flex flex-col items-center gap-1 text-white"
+                  >
+                    <span class="i-lucide-eye h-6 w-6" />
+                    <span class="text-sm font-medium">Lihat Dokumen</span>
+                  </div>
+                  <div
+                    v-else
+                    class="flex flex-col items-center gap-1 text-white/70"
+                  >
+                    <span class="i-lucide-info h-6 w-6" />
+                    <span class="text-sm font-medium">No Data</span>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </AccordionContent>
diff --git a/app/components/content/patient/detail.vue b/app/components/content/patient/detail.vue
index ffe315a9..647c3310 100644
--- a/app/components/content/patient/detail.vue
+++ b/app/components/content/patient/detail.vue
@@ -6,6 +6,8 @@ import type { Person } from '~/models/person'
 
 // Components
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
 
 import { getPatientDetail } from '~/services/patient.service'
 
@@ -17,6 +19,9 @@ const props = defineProps<{
 // #endregion
 
 // #region State & Computed
+const isDocPreviewDialogOpen = ref<boolean>(false)
+const docPreviewUrl = ref<string>('')
+
 const patient = ref(
   withBase<PatientEntity>({
     person: {} as Person,
@@ -80,6 +85,19 @@ async function onEdit() {
       :patient="patient"
       @back="onBack"
       @edit="onEdit"
+      @preview="
+        (url: string) => {
+          docPreviewUrl = url
+          isDocPreviewDialogOpen = true
+        }
+      "
     />
+    <Dialog
+      v-model:open="isDocPreviewDialogOpen"
+      title="Preview Dokumen"
+      size="2xl"
+    >
+      <DocPreviewDialog :link="docPreviewUrl" />
+    </Dialog>
   </div>
 </template>
diff --git a/app/components/content/patient/form.vue b/app/components/content/patient/form.vue
index 62d85880..ebceb608 100644
--- a/app/components/content/patient/form.vue
+++ b/app/components/content/patient/form.vue
@@ -17,6 +17,8 @@ import AppPersonAddressEntryFormRelative from '~/components/app/person-address/e
 import AppPersonFamilyParentsForm from '~/components/app/person/family-parents-form.vue'
 import AppPersonContactEntryForm from '~/components/app/person-contact/entry-form.vue'
 import AppPersonRelativeEntryForm from '~/components/app/person-relative/entry-form.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
 
 // helper
 import { format, parseISO } from 'date-fns'
@@ -24,6 +26,8 @@ import { id as localeID } from 'date-fns/locale'
 
 // services
 import { getPatientDetail, uploadAttachment } from '~/services/patient.service'
+import { getValueLabelList as getEthnicOpts } from '~/services/ethnic.service'
+import { getValueLabelList as getLanguageOpts } from '~/services/language.service'
 
 import { isReadonly, isProcessing, handleActionSave, handleActionEdit } from '~/handlers/patient.handler'
 
@@ -47,6 +51,23 @@ const props = defineProps<{
 const residentIdentityFile = ref<File>()
 const familyCardFile = ref<File>()
 
+// Dialog preview dokumen
+const isDocPreviewDialogOpen = ref<boolean>(false)
+const docPreviewUrl = ref<string>('')
+
+// Computed untuk URL dokumen tersimpan
+const identityFileUrl = computed(() => {
+  return patientDetail.value.person?.residentIdentityFileUrl || ''
+})
+const familyCardFileUrl = computed(() => {
+  return patientDetail.value.person?.familyIdentityFileUrl || ''
+})
+
+function handlePreviewDoc(url: string) {
+  docPreviewUrl.value = url
+  isDocPreviewDialogOpen.value = true
+}
+
 // form related state
 const personAddressForm = ref<ExposedForm<any> | null>(null)
 const personAddressRelativeForm = ref<ExposedForm<any> | null>(null)
@@ -58,6 +79,9 @@ const personPatientForm = ref<ExposedForm<any> | null>(null)
 // #endregion
 
 // #region State & Computed
+const ethnicOptions = ref<{ value: string; label: string }[]>([])
+const languageOptions = ref<{ value: string; label: string }[]>([])
+
 const patientDetail = ref(
   withBase<PatientEntity>({
     person: {} as Person,
@@ -223,6 +247,13 @@ const responsibleFormInitialValues = computed(() => {
 
 // #region Lifecycle Hooks
 onMounted(async () => {
+  const optsReq = {
+    'page-no-limit': true,
+  }
+
+  ethnicOptions.value = await getEthnicOpts(optsReq, true)
+  languageOptions.value = await getLanguageOpts(optsReq, true)
+
   // if edit mode, fetch patient detail
   if (props.mode === 'edit' && props.patientId) {
     await loadInitData(props.patientId)
@@ -309,7 +340,9 @@ async function handleActionClick(eventType: string) {
       const patient: Patient = await composeFormData()
 
       let createdPatientId = 0
+      let createdPersonId = 0
       let response: any
+
       // return
       if (props.mode === 'edit' && props.patientId) {
         response = await handleActionEdit(
@@ -330,13 +363,15 @@ async function handleActionClick(eventType: string) {
 
       const data = (response?.body?.data ?? null) as PatientBase | null
       if (!data) return
+
       createdPatientId = data.id
+      createdPersonId = data.person_id!
 
       if (residentIdentityFile.value) {
-        void uploadAttachment(residentIdentityFile.value, createdPatientId, 'ktp')
+        void uploadAttachment(residentIdentityFile.value, createdPersonId, 'ktp')
       }
       if (familyCardFile.value) {
-        void uploadAttachment(familyCardFile.value, createdPatientId, 'kk')
+        void uploadAttachment(familyCardFile.value, createdPersonId, 'kk')
       }
 
       // If has callback provided redirect to callback with patientData
@@ -435,10 +470,16 @@ watch(
     {{ mode === 'edit' ? 'Edit Pasien' : 'Tambah Pasien' }}
   </div>
   <AppPatientEntryForm
-    :key="`patient-${formKey}`"
     ref="personPatientForm"
+    :key="`patient-${formKey}`"
     :is-readonly="isProcessing || isReadonly"
     :initial-values="patientFormInitialValues"
+    :language-options="languageOptions"
+    :ethnic-options="ethnicOptions"
+    :mode="mode"
+    :identity-file-url="identityFileUrl"
+    :family-card-file-url="familyCardFileUrl"
+    @preview="handlePreviewDoc"
   />
   <div class="h-6"></div>
   <AppPersonAddressEntryForm
@@ -483,6 +524,15 @@ watch(
   <div class="my-2 flex justify-end py-2">
     <Action @click="handleActionClick" />
   </div>
+
+  <!-- Dialog Preview Dokumen -->
+  <Dialog
+    v-model:open="isDocPreviewDialogOpen"
+    title="Preview Dokumen"
+    size="2xl"
+  >
+    <DocPreviewDialog :link="docPreviewUrl" />
+  </Dialog>
 </template>
 
 <style scoped>
diff --git a/app/models/ethnic.ts b/app/models/ethnic.ts
index e4c0a67d..0cb70dee 100644
--- a/app/models/ethnic.ts
+++ b/app/models/ethnic.ts
@@ -1,4 +1,4 @@
-import { type Base, genBase } from "./_base"
+import { type Base, genBase } from './_base'
 
 export interface Ethnic extends Base {
   code: string
diff --git a/app/models/language.ts b/app/models/language.ts
index 83958e5f..890bb6b0 100644
--- a/app/models/language.ts
+++ b/app/models/language.ts
@@ -1,11 +1,11 @@
-import { type Base, genBase } from "./_base"
+import { type Base, genBase } from './_base'
 
 export interface Language extends Base {
   code: string
   name: string
 }
 
-export function genMcuSrc(): Language {
+export function genLanguage(): Language {
   return {
     ...genBase(),
     code: '',
diff --git a/app/services/ethnic.service.ts b/app/services/ethnic.service.ts
new file mode 100644
index 00000000..b8a74584
--- /dev/null
+++ b/app/services/ethnic.service.ts
@@ -0,0 +1,44 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Ethnic } from '~/models/ethnic'
+
+const path = '/api/v1/ethnic'
+const name = 'ethnic'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(
+  params: any = null,
+  useCodeAsValue = false,
+): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: Ethnic) => ({
+      value: useCodeAsValue ? item.code : item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/language.service.ts b/app/services/language.service.ts
new file mode 100644
index 00000000..2f52d21d
--- /dev/null
+++ b/app/services/language.service.ts
@@ -0,0 +1,44 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Language } from '~/models/language'
+
+const path = '/api/v1/language'
+const name = 'language'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(
+  params: any = null,
+  useCodeAsValue = false,
+): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: Language) => ({
+      value: useCodeAsValue ? item.code : item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/patient.service.ts b/app/services/patient.service.ts
index 3d23d0d8..a7d98e0a 100644
--- a/app/services/patient.service.ts
+++ b/app/services/patient.service.ts
@@ -101,7 +101,7 @@ export async function removePatient(id: number) {
   }
 }
 
-export async function uploadAttachment(file: File, userId: number, key: UploadCodeKey) {
+export async function uploadAttachment(file: File, personId: number, key: UploadCodeKey) {
   try {
     const resolvedKey = uploadCode[key]
     if (!resolvedKey) {
@@ -110,11 +110,14 @@ export async function uploadAttachment(file: File, userId: number, key: UploadCo
 
     // siapkan form-data body
     const formData = new FormData()
-    formData.append('code', resolvedKey)
     formData.append('content', file)
+    formData.append('entityType_code', 'person')
+    formData.append('ref_id', String(personId))
+    // formData.append('upload_employee_id', String(userId))
+    formData.append('type_code', resolvedKey)
 
     // kirim via xfetch
-    const resp = await xfetch(`${mainUrl}/${userId}/upload`, 'POST', formData)
+    const resp = await xfetch(`/api/v1/upload-file`, 'POST', formData)
 
     // struktur hasil sama seperti patchPatient
     const result: any = {}