feat: tambah sistem guide onboarding per fitur dengan GuideOverlay

- Buat komponen GuideOverlay dengan animasi fade+slide, arrow tooltip, dan dot indicator
- Buat hook useGuide untuk menyimpan state guide per fitur via AsyncStorage
- Sentralisasi semua step guide di lib/guideSteps.ts
- Pasang guide pada 12 halaman: village-calendar, project detail, banner, group, position, member, announcement, discussion, division calendar/document/discussion, dan division task detail
- Posisi card menggunakan cardTopRatio (rasio layar) untuk kompatibilitas berbagai ukuran device
- Tambah styles guide dan village calendar di constants/Styles.ts

app/(application)/division/[id]/(fitur-division)/calendar/index.tsx

@@ -1,4 +1,5 @@
 import AppHeader from "@/components/AppHeader";
+import GuideOverlay from "@/components/GuideOverlay";
 import HeaderRightCalendarList from "@/components/calendar/headerCalendarList";
 import ItemDateCalendar from "@/components/calendar/itemDateCalendar";
 import EventItem from "@/components/eventItem";
@@ -6,6 +7,8 @@ import Skeleton from "@/components/skeleton";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiGetCalendarByDateDivision, apiGetIndicatorCalendar } from "@/lib/api";
+import { GUIDE_DIVISION_CALENDAR } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
 import { Feather } from "@expo/vector-icons";
@@ -46,6 +49,7 @@ export default function CalendarDivision() {
    const [loading, setLoading] = useState(true)
    const [loadingBtn, setLoadingBtn] = useState(false)
    const [refreshing, setRefreshing] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('division-calendar')
 
 
    async function handleLoad(loading: boolean) {
@@ -150,6 +154,7 @@ export default function CalendarDivision() {
                )
             }}
          />
+         <GuideOverlay visible={guideVisible} steps={GUIDE_DIVISION_CALENDAR} onDismiss={dismissGuide} />
          <ScrollView
             refreshControl={
                <RefreshControl

app/(application)/division/[id]/(fitur-division)/discussion/index.tsx

@@ -1,3 +1,4 @@
+import GuideOverlay from "@/components/GuideOverlay";
 import ButtonTab from "@/components/buttonTab";
 import ImageUser from "@/components/imageNew";
 import InputSearch from "@/components/inputSearch";
@@ -7,6 +8,8 @@ import WrapTab from "@/components/wrapTab";
 import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiGetDiscussion, apiGetDivisionOneFeature } from "@/lib/api";
+import { GUIDE_DIVISION_DISCUSSION } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather } from "@expo/vector-icons";
@@ -43,6 +46,7 @@ export default function DiscussionDivision() {
    const [isMemberDivision, setIsMemberDivision] = useState(false)
    const [isAdminDivision, setIsAdminDivision] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('division-discussion')
 
    async function handleCheckMember() {
       try {
@@ -96,6 +100,7 @@ export default function DiscussionDivision() {
 
    return (
       <View style={[Styles.flex1, { backgroundColor: colors.background }]}>
+         <GuideOverlay visible={guideVisible} steps={GUIDE_DIVISION_DISCUSSION} onDismiss={dismissGuide} />
          {((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) && (
             <View style={[Styles.ph15, { paddingTop: 12 }]}>
                <WrapTab>

app/(application)/division/[id]/(fitur-division)/document/index.tsx

@@ -1,3 +1,4 @@
+import GuideOverlay from "@/components/GuideOverlay";
 import ModalConfirmation from "@/components/ModalConfirmation";
 import AppHeader from "@/components/AppHeader";
 import { ButtonHeader } from "@/components/buttonHeader";
@@ -22,6 +23,8 @@ import {
    apiShareDocument,
 } from "@/lib/api";
 import { setUpdateDokumen } from "@/lib/dokumenUpdate";
+import { GUIDE_DIVISION_DOCUMENT } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
 import {
@@ -90,6 +93,7 @@ export default function DocumentDivision() {
    const [isMemberDivision, setIsMemberDivision] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
    const [showDeleteModal, setShowDeleteModal] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('division-document')
    const [bodyRename, setBodyRename] = useState({
       id: "",
       name: "",
@@ -415,6 +419,7 @@ export default function DocumentDivision() {
                )
             }}
          />
+         <GuideOverlay visible={guideVisible} steps={GUIDE_DIVISION_DOCUMENT} onDismiss={dismissGuide} />
          <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
          <ScrollView
             refreshControl={

app/(application)/division/[id]/(fitur-division)/task/[detail]/index.tsx

@@ -1,4 +1,5 @@
 import AppHeader from "@/components/AppHeader";
+import GuideOverlay from "@/components/GuideOverlay";
 import SectionCancel from "@/components/sectionCancel";
 import SectionProgress from "@/components/sectionProgress";
 import HeaderRightTaskDetail from "@/components/task/headerTaskDetail";
@@ -9,6 +10,8 @@ import SectionReportTask from "@/components/task/sectionReportTask";
 import SectionTanggalTugasTask from "@/components/task/sectionTanggalTugasTask";
 import Styles from "@/constants/Styles";
 import { apiGetDivisionOneFeature, apiGetTaskOne } from "@/lib/api";
+import { GUIDE_PROJECT_DETAIL } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -36,6 +39,7 @@ export default function DetailTaskDivision() {
    const update = useSelector((state: any) => state.taskUpdate)
    const [refreshing, setRefreshing] = useState(false)
    const [isMemberDivision, setIsMemberDivision] = useState(false);
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('division-task-detail')
    const [isAdminDivision, setIsAdminDivision] = useState(false);
    const entityUser = useSelector((state: any) => state.user);
 
@@ -139,6 +143,7 @@ export default function DetailTaskDivision() {
                )
             }}
          />
+         <GuideOverlay visible={guideVisible} steps={GUIDE_PROJECT_DETAIL} onDismiss={dismissGuide} />
          <ScrollView
             refreshControl={
                <RefreshControl