src/components/PopupPrivacy.vue

@@ -16,26 +16,41 @@ const modal = defineModel<boolean>('modal', {
 
 // Privacy content data
 const privacyContent = {
-  title: 'ประกาศความเป็นส่วนตัว',
+  title: 'การคุ้มครองข้อมูลส่วนบุคคล',
   mainText:
-    'ประกาศความเป็นส่วนตัวสำหรับการลงเวลาปฏิบัติราชการผ่านระบบอิเล็กทรอนิกส์ในระบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร (BMA – HRMS)',
+    'ระบบนี้มีการเก็บ และใช้ภาพถ่ายของท่าน เพื่อยืนยันตัวตนในการลงเวลาปฏิบัติราชการ ข้อมูลจะถูกใช้เฉพาะตามวัตถุประสงค์ของระบบ และจัดเก็บอย่างปลอดภัยตามกฎหมายคุ้มครองข้อมูลส่วนบุคคล (PDPA)',
   warningText: '* หากท่านไม่กดยอมรับ อาจทำให้ไม่สามารถใช้งานระบบได้',
   detailIntro:
-    'กรุงเทพมหานครเก็บรวบรวมและใช้ข้อมูลส่วนบุคคลของท่าน ได้แก่ ข้อมูลวันและเวลาลงเวลาปฏิบัติราชการ พิกัดสถานที่ ณ ขณะลงเวลา ภาพถ่าย ณ ขณะลงเวลา ข้อมูลหน่วยงานหรือสถานที่ปฏิบัติงาน และข้อมูลทางเทคนิคที่จำเป็นต่อการใช้งานระบบ เพื่อวัตถุประสงค์ในการยืนยันการมาปฏิบัติราชการ ป้องกันการลงเวลาแทนกัน ตรวจสอบความถูกต้องของข้อมูล บริหารวันและเวลาปฏิบัติราชการ การลา การประเมินผลการปฏิบัติราชการ การพิจารณาเลื่อนเงินเดือน ตลอดจนการบริหารทรัพยากรบุคคลตามกฎหมาย กฎ ระเบียบ และหลักเกณฑ์ที่เกี่ยวข้อง',
+    'ข้าพเจ้าตกลงให้กรุงเทพมหานครเก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคลประเภทภาพถ่ายของข้าพเจ้า ซึ่งได้มาจากการใช้งานระบบลงเวลาปฏิบัติราชการอิเล็กทรอนิกส์ ของระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร (BMA - HRMS) ทั้งนี้ เพื่อวัตถุประสงค์ดังต่อไปนี้',
-
+  purposes: {
-  paragraphs: [
+    title: 'วัตถุประสงค์การใช้ข้อมูล',
-    'การเก็บรวบรวมและใช้ข้อมูลดังกล่าวเป็นการดำเนินการโดยอาศัยฐานการปฏิบัติหน้าที่ในการดำเนินภารกิจเพื่อประโยชน์สาธารณะหรือการใช้อำนาจรัฐตามมาตรา 24 (4) และฐานการปฏิบัติตามกฎหมายของ ผู้ควบคุมข้อมูลส่วนบุคคลตามมาตรา 24 (6) แห่งพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 โดยมิได้อาศัยความยินยอมของเจ้าของข้อมูลส่วนบุคคล',
+    items: [
-    'ระบบจะเข้าถึงข้อมูลพิกัดและกล้องถ่ายภาพเฉพาะในขณะที่ท่านดำเนินการลงเวลาเข้าและออกจากการปฏิบัติราชการเท่านั้น โดยไม่มีการติดตามหรือบันทึกพิกัดของท่านอย่างต่อเนื่องภายหลังจากการลงเวลาเสร็จสิ้น',
+      'เพื่อยืนยันตัวตนของผู้ปฏิบัติงานในการบันทึกเวลาเข้า-ออกการปฏิบัติราชการ',
-    'กรุงเทพมหานครจะเก็บรักษาข้อมูลภาพถ่าย พิกัด ณ ขณะลงเวลา และข้อมูลรายละเอียดการลงเวลาไว้ตามรอบการประเมินผลการปฏิบัติราชการเป็นระยะเวลาไม่เกิน 6 เดือนนับแต่วันที่เก็บรวบรวม หรือจนกว่าการตรวจสอบข้อมูลในรอบการประเมินนั้นจะแล้วเสร็จ แล้วแต่ระยะเวลาใดจะยาวกว่า เมื่อครบกำหนด กรุงเทพมหานครจะลบ ทำลาย หรือทำให้ข้อมูลดังกล่าวไม่สามารถระบุตัวบุคคลได้ตามวิธีการและมาตรการรักษาความมั่นคงปลอดภัยที่กำหนด',
+      'เพื่อใช้เป็นหลักฐานประกอบการบริหารงานด้านทรัพยากรบุคคล การจ่ายค่าตอบแทน และการกำกับ ดูแลการปฏิบัติราชการ',
-    'กรณีข้อมูลดังกล่าวเกี่ยวข้องกับการร้องเรียน การโต้แย้ง การตรวจสอบ การดำเนินการทางวินัยการอุทธรณ์ การดำเนินคดี หรือการใช้สิทธิเรียกร้องตามกฎหมาย กรุงเทพมหานครอาจเก็บรักษาข้อมูลไว้เกินกว่า 6 เดือนได้เท่าที่จำเป็น จนกว่ากระบวนการดังกล่าวจะถึงที่สุดหรือพ้นระยะเวลาที่กฎหมายกำหนด',
+      'เพื่อรักษาความถูกต้อง โปร่งใส และป้องกันการทุจริตในการบันทึกเวลาการปฏิบัติงาน',
-    'ทั้งนี้ ข้อมูลสรุปเกี่ยวกับวันเวลาปฏิบัติราชการ การลา การมาสาย การขาดราชการ ผลการประเมินผลการปฏิบัติราชการ และผลการพิจารณาเลื่อนเงินเดือน ซึ่งเป็นส่วนหนึ่งของทะเบียนประวัติหรือเอกสารด้านการบริหารทรัพยากรบุคคล อาจได้รับการเก็บรักษาตามระยะเวลาที่กฎหมาย ระเบียบ หลักเกณฑ์งานบุคคล และระเบียบงานสารบรรณกำหนด ซึ่งอาจมีระยะเวลาแตกต่างจากข้อมูลภาพถ่ายและพิกัดที่ใช้ประกอบการลงเวลา',
-    'กรุงเทพมหานครจะจำกัดการเข้าถึงข้อมูลเฉพาะเจ้าหน้าที่หรือผู้ปฏิบัติงานที่มีหน้าที่เกี่ยวข้อง และจะไม่นำข้อมูลไปใช้หรือเปิดเผยเพื่อวัตถุประสงค์อื่นที่ไม่สอดคล้องกับวัตถุประสงค์ที่ได้แจ้งไว้ เว้นแต่เป็นกรณีที่กฎหมายกำหนดหรืออนุญาตให้ดำเนินการได้',
-    'ท่านมีสิทธิขอเข้าถึง ขอรับสำเนา ขอแก้ไข ขอคัดค้าน ขอระงับการใช้ หรือขอให้ลบข้อมูลส่วนบุคคลของท่านได้ตามหลักเกณฑ์และเงื่อนไขที่พระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 กำหนด โดยการใช้สิทธิดังกล่าวไม่กระทบต่อหน้าที่ในการลงเวลาปฏิบัติราชการและการปฏิบัติตามกฎหมาย กฎ ระเบียบ และหลักเกณฑ์ของกรุงเทพมหานคร',
     ],
+  },
+  understanding: {
+    items: [
+      'การเก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคลดังกล่าว จะดำเนินการ เท่าที่จำเป็นตามวัตถุประสงค์ที่ระบุไว้เท่านั้น',
+      'หน่วยงานจะจัดให้มีมาตรการรักษาความมั่นคงปลอดภัยของข้อมูลส่วนบุคคล ตามที่กฎหมายกำหนด',
+      'ข้อมูลส่วนบุคคลของข้าพเจ้าจะถูกเก็บรักษา ตามระยะเวลาที่จำเป็น ต่อการปฏิบัติงานหรือเป็นไปตามที่กฎหมายกำหนด',
+    ],
+  },
+  rights: {
+    title:
+      'ข้าพเจ้าทราบถึง สิทธิของเจ้าของข้อมูลส่วนบุคคล ตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. ๒๕๖๒ ได้แก่',
+    items: [
+      'สิทธิขอเข้าถึงและขอรับสำเนาข้อมูล',
+      'สิทธิขอแก้ไขข้อมูลให้ถูกต้อง',
+      'สิทธิขอถอนความยินยอม (ทั้งนี้ การถอนความยินยอมอาจส่งผลต่อการใช้งานระบบลงเวลาการปฏิบัติราชการ)',
+      'สิทธิร้องเรียนต่อคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล',
+    ],
+  },
   consentText:
-    'ข้าพเจ้าได้รับทราบประกาศความเป็นส่วนตัวเกี่ยวกับการลงเวลาปฏิบัติราชการผ่านระบบอิเล็กทรอนิกส์แล้ว',
+    'ข้าพเจ้าได้อ่านและเข้าใจรายละเอียดทั้งหมดแล้ว และยินยอมให้เก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคล ประเภทภาพถ่ายของข้าพเจ้า ตามที่ระบุไว้ข้างต้นโดยสมัครใจ',
   buttons: {
-    accept: 'รับทราบและดำเนินการต่อ',
+    accept: 'ยอมรับ',
     decline: 'ไม่ยอมรับ',
   },
 }
@@ -82,8 +97,7 @@ const toggleDetails = () => {
 
 const checkIfScrollable = () => {
   nextTick(() => {
-    const container =
+    const container = (scrollContainer.value as any)?.$el || scrollContainer.value
-      (scrollContainer.value as any)?.$el || scrollContainer.value
     if (container) {
       const { scrollHeight, clientHeight } = container
 
@@ -153,19 +167,51 @@ const checkIfScrollable = () => {
             {{ privacyContent.detailIntro }}
           </p>
 
-          <!-- เนื้อหาประกาศความเป็นส่วนตัว -->
+          <!-- วัตถุประสงค์ -->
           <div class="q-mb-md">
-            <p
+            <ol class="q-pl-lg list-style">
-              v-for="(paragraph, index) in privacyContent.paragraphs"
+              <li
+                v-for="(item, index) in privacyContent.purposes.items"
                 :key="`p-${index}`"
-              class="q-mb-sm"
+                class="q-mb-xs"
               >
-              {{ paragraph }}
+                {{ item }}
-            </p>
+              </li>
+            </ol>
           </div>
 
+          <!-- ข้าพเจ้าทราบและเข้าใจว่า -->
+          <div class="q-mx-sm">
+            ข้าพเจ้าทราบและเข้าใจว่า
+            <ul class="q-mt-sm">
+              <li
+                v-for="(item, index) in privacyContent.understanding.items"
+                :key="`u-${index}`"
+                class="q-mb-xs"
+              >
+                {{ item }}
+              </li>
+            </ul>
+          </div>
+
+          <!-- สิทธิ์ของเจ้าของข้อมูล -->
+          <div>
+            <p>
+              {{ privacyContent.rights.title }}
+            </p>
+            <ul>
+              <li
+                v-for="(item, index) in privacyContent.rights.items"
+                :key="`r-${index}`"
+                class="q-mb-xs"
+              >
+                {{ item }}
+              </li>
+            </ul>
+
             <p class="consent-text q-mt-lg">{{ privacyContent.consentText }}</p>
           </div>
+        </div>
       </q-card-section>
 
       <!-- Fixed Bottom Section -->

src/views/HomeView.vue

@@ -1298,10 +1298,7 @@ watch(notificationCounter, () => {
 
           <div class="col-12 text-grey-9">
             <div class="col-12 row justify-center">
-              <div
+              <div class="col-12 row q-pt-md justify-center gt-xs">
-                v-if="$q.screen.gt.xs"
-                class="col-12 row q-pt-md justify-center"
-              >
                 <div
                   class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
                 >
@@ -1351,7 +1348,7 @@ watch(notificationCounter, () => {
                     {{ crossDayCheckoutWarning }}
                   </q-banner>
                 </div>
-                <div v-if="$q.screen.gt.xs" class="col-xs-12 col-sm-8">
+                <div class="col-xs-12 col-sm-8 gt-xs">
                   <div class="col-12">
                     <MapCheck
                       ref="mapRefDesktop"
@@ -1856,7 +1853,7 @@ watch(notificationCounter, () => {
   </q-page>
 
   <!--  top page sticky  หน้ามือถือ-->
-  <q-page-sticky expand position="top" v-show="$q.screen.xs">
+  <q-page-sticky expand position="top" v-if="$q.screen.xs">
     <div
       class="row q-col-gutter-sm col bg-white col-12 q-pa-md"
       style="height: 100px"

src/views/MainView.vue

@@ -178,32 +178,31 @@ const landingPageUrl = ref<string>(configParam.landingPageUrl)
 /** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/
 async function fetchKeycloakPosition() {
   // เช็คว่ามีข้อมูลใน store อยู่แล้วหรือไม่ (จาก localStorage)
-  // จะช่วยลดจำนวนครั้งในการเรียก API และปรับปรุงประสิทธิภาพของแอปพลิเคชัน
+  const existingData = positionKeycloakStore.dataPositionKeycloak
-  // const existingData = positionKeycloakStore.dataPositionKeycloak
 
-  // if (existingData) {
+  if (existingData) {
-  //   // มีข้อมูลอยู่แล้ว ใช้ข้อมูลเดิม
+    // มีข้อมูลอยู่แล้ว ใช้ข้อมูลเดิม
 
-  //   // เช็คว่ามีข้อมูลสังกัด (organization) หรือไม่
+    // เช็คว่ามีข้อมูลสังกัด (organization) หรือไม่
-  //   const hasOrganization =
+    const hasOrganization =
-  //     existingData.organization &&
+      existingData.organization &&
-  //     (existingData.organization.root ||
+      (existingData.organization.root ||
-  //       existingData.organization.child1 ||
+        existingData.organization.child1 ||
-  //       existingData.organization.child2 ||
+        existingData.organization.child2 ||
-  //       existingData.organization.child3 ||
+        existingData.organization.child3 ||
-  //       existingData.organization.child4)
+        existingData.organization.child4)
 
-  //   if (!hasOrganization) {
+    if (!hasOrganization) {
-  //     // ไม่มีข้อมูลสังกัด redirect ไปหน้า NoPosition
+      // ไม่มีข้อมูลสังกัด redirect ไปหน้า NoPosition
-  //     router.replace('/no-position')
+      router.replace('/no-position')
-  //     return
+      return
-  //   }
+    }
 
-  //   privacyStore.modalPrivacy = !existingData.privacyCheckin
+    privacyStore.modalPrivacy = !existingData.privacyCheckin
-  //   privacyStore.setAccepted(existingData.privacyCheckin)
+    privacyStore.setAccepted(existingData.privacyCheckin)
 
-  //   return
+    return
-  // }
+  }
 
   // ไม่มีข้อมูล ให้ fetch จาก API
   await http