2026-05-11 17:34:53 +08:00
24 changed files with 911 additions and 20 deletions
--- a/app/(application)/announcement/index.tsx
+++ b/app/(application)/announcement/index.tsx
@@ -1,9 +1,12 @@
+import GuideOverlay from "@/components/GuideOverlay";
 import BorderBottomItem from "@/components/borderBottomItem";
 import InputSearch from "@/components/inputSearch";
 import SkeletonContent from "@/components/skeletonContent";
 import Text from '@/components/Text';
 import Styles from "@/constants/Styles";
 import { apiGetAnnouncement } from "@/lib/api";
+import { GUIDE_ANNOUNCEMENT } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialIcons } from "@expo/vector-icons";
@@ -25,6 +28,7 @@ export default function Announcement() {
   const { colors } = useTheme();
   const [search, setSearch] = useState('')
   const update = useSelector((state: any) => state.announcementUpdate)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('announcement')
   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)

   // TanStack Query Infinite Query
@@ -78,6 +82,7 @@ export default function Announcement() {

   return (
      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
+         <GuideOverlay visible={guideVisible} steps={GUIDE_ANNOUNCEMENT} onDismiss={dismissGuide} />
         <View>
            <InputSearch onChange={setSearch} />
         </View>
--- a/app/(application)/banner/index.tsx
+++ b/app/(application)/banner/index.tsx
@@ -1,5 +1,5 @@
-import styles from "@/components/AppHeader"
 import AppHeader from "@/components/AppHeader"
+import GuideOverlay from "@/components/GuideOverlay"
 import HeaderRightBannerList from "@/components/banner/headerBannerList"
 import BorderBottomItem from "@/components/borderBottomItem"
 import DrawerBottom from "@/components/drawerBottom"
@@ -12,6 +12,8 @@ import { ConstEnv } from "@/constants/ConstEnv"
 import Styles from "@/constants/Styles"
 import { apiDeleteBanner, apiGetBanner } from "@/lib/api"
 import { setEntities } from "@/lib/bannerSlice"
+import { GUIDE_BANNER } from "@/lib/guideSteps"
+import { useGuide } from "@/lib/useGuide"
 import { useAuthSession } from "@/providers/AuthProvider"
 import { useTheme } from "@/providers/ThemeProvider"
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
@@ -44,6 +46,7 @@ export default function BannerList() {
   const dispatch = useDispatch()
   const [refreshing, setRefreshing] = useState(false)
   const [loadingOpen, setLoadingOpen] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('banner')
   const [viewImg, setViewImg] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const queryClient = useQueryClient()
@@ -147,6 +150,7 @@ export default function BannerList() {
               )
            }}
         />
+         <GuideOverlay visible={guideVisible} steps={GUIDE_BANNER} onDismiss={dismissGuide} />
         <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
         <ScrollView
            refreshControl={
--- a/app/(application)/discussion/index.tsx
+++ b/app/(application)/discussion/index.tsx
@@ -1,3 +1,4 @@
+import GuideOverlay from "@/components/GuideOverlay";
 import ButtonTab from "@/components/buttonTab";
 import InputSearch from "@/components/inputSearch";
 import LabelStatus from "@/components/labelStatus";
@@ -6,6 +7,8 @@ import Text from "@/components/Text";
 import WrapTab from "@/components/wrapTab";
 import Styles from "@/constants/Styles";
 import { apiGetDiscussionGeneral } from "@/lib/api";
+import { GUIDE_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";
@@ -34,6 +37,7 @@ export default function Discussion() {
   const queryClient = useQueryClient()
   const [status, setStatus] = useState<'true' | 'false'>(active == 'false' ? 'false' : 'true')
   const [refreshing, setRefreshing] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('discussion')

   const {
      data,
@@ -85,6 +89,7 @@ export default function Discussion() {

   return (
      <View style={[Styles.flex1, { backgroundColor: colors.background }]}>
+         <GuideOverlay visible={guideVisible} steps={GUIDE_DISCUSSION} onDismiss={dismissGuide} />
         {/* Header controls */}
         <View style={[Styles.ph15, { paddingTop: 12 }]}>
            {entityUser.role != "user" && entityUser.role != "coadmin" && (
--- a/app/(application)/division/[id]/(fitur-division)/calendar/index.tsx
+++ b/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
--- a/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
+++ b/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>
--- a/app/(application)/division/[id]/(fitur-division)/document/index.tsx
+++ b/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={
--- a/app/(application)/division/[id]/(fitur-division)/task/[detail]/index.tsx
+++ b/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
--- a/app/(application)/feature.tsx
+++ b/app/(application)/feature.tsx
@@ -23,13 +23,12 @@ export default function Feature() {
            }}
         />
         <View style={[Styles.p15]}>
-            <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap', rowGap: 20 }}>
               <ButtonFiturMenu icon={<Feather name="users" size={30} color={colors.icon} />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
               <ButtonFiturMenu icon={<Feather name="bar-chart" size={30} color={colors.icon} />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
               <ButtonFiturMenu icon={<Ionicons name="megaphone-outline" size={30} color={colors.icon} />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
               <ButtonFiturMenu icon={<Ionicons name="chatbubbles-outline" size={30} color={colors.icon} />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
-            </View>
-            <View style={[Styles.rowSpaceBetween, Styles.mb15, (entityUser.role == 'cosupadmin' ? Styles.w70 : entityUser.role == 'supadmin' || entityUser.role == 'developer' ? Styles.w100 : Styles.w40)]}>
+               <ButtonFiturMenu icon={<Feather name="calendar" size={30} color={colors.icon} />} text="Kalender" onPress={() => { router.push('/village-calendar') }} />
               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-group-outline" size={30} color={colors.icon} />} text="Anggota" onPress={() => { router.push('/member') }} />
               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie-outline" size={30} color={colors.icon} />} text="Jabatan" onPress={() => { router.push('/position') }} />
               {
@@ -39,7 +38,6 @@ export default function Feature() {
                  (entityUser.role == "supadmin" || entityUser.role == "developer") &&
                  <>
                     <ButtonFiturMenu icon={<Ionicons name="bookmarks-outline" size={30} color={colors.icon} />} text="Lembaga Desa" onPress={() => { router.push('/group') }} />
-                     {/* <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={30} color={colors.icon} />} text="Tema" onPress={() => { }} /> */}
                     <ButtonFiturMenu icon={<Ionicons name="images-outline" size={30} color={colors.icon} />} text="Banner" onPress={() => { router.push('/banner') }} />
                  </>
               }
--- a/app/(application)/group/index.tsx
+++ b/app/(application)/group/index.tsx
@@ -1,3 +1,4 @@
+import GuideOverlay from "@/components/GuideOverlay";
 import ModalConfirmation from "@/components/ModalConfirmation";
 import BorderBottomItem from "@/components/borderBottomItem";
 import { ButtonForm } from "@/components/buttonForm";
@@ -12,6 +13,8 @@ import WrapTab from "@/components/wrapTab";
 import Styles from "@/constants/Styles";
 import { apiDeleteGroup, apiEditGroup, apiGetGroup } from "@/lib/api";
 import { setUpdateGroup } from "@/lib/groupSlice";
+import { GUIDE_GROUP } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
@@ -41,6 +44,7 @@ export default function Index() {
   const [titleChoose, setTitleChoose] = useState('')
   const queryClient = useQueryClient()
   const [refreshing, setRefreshing] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('group')

   const dispatch = useDispatch()
   const update = useSelector((state: any) => state.groupUpdate)
@@ -136,6 +140,7 @@ export default function Index() {

   return (
      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+         <GuideOverlay visible={guideVisible} steps={GUIDE_GROUP} onDismiss={dismissGuide} />
         <View style={[Styles.mb10]}>
            <WrapTab>
               <ButtonTab
--- a/app/(application)/member/index.tsx
+++ b/app/(application)/member/index.tsx
@@ -1,3 +1,4 @@
+import GuideOverlay from "@/components/GuideOverlay";
 import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonTab from "@/components/buttonTab";
 import ImageUser from "@/components/imageNew";
@@ -9,6 +10,8 @@ import WrapTab from "@/components/wrapTab";
 import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiGetUser } from "@/lib/api";
+import { GUIDE_MEMBER } 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";
@@ -42,6 +45,7 @@ export default function Index() {
   const queryClient = useQueryClient()
   const [status, setStatus] = useState<'true' | 'false'>(active == 'false' ? 'false' : 'true')
   const [refreshing, setRefreshing] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('member')

   // TanStack Query for Members with Infinite Scroll
   const {
@@ -117,6 +121,7 @@ export default function Index() {

   return (
      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+         <GuideOverlay visible={guideVisible} steps={GUIDE_MEMBER} onDismiss={dismissGuide} />
         <View>
            <WrapTab>
               <ButtonTab
--- a/app/(application)/position/index.tsx
+++ b/app/(application)/position/index.tsx
@@ -1,3 +1,4 @@
+import GuideOverlay from "@/components/GuideOverlay";
 import BorderBottomItem from "@/components/borderBottomItem";
 import { ButtonForm } from "@/components/buttonForm";
 import ButtonTab from "@/components/buttonTab";
@@ -13,6 +14,8 @@ import WrapTab from "@/components/wrapTab";
 import Styles from "@/constants/Styles";
 import { apiDeletePosition, apiEditPosition, apiGetPosition } from "@/lib/api";
 import { setUpdatePosition } from "@/lib/positionSlice";
+import { GUIDE_POSITION } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
@@ -48,6 +51,7 @@ export default function Index() {
   const queryClient = useQueryClient()
   const [refreshing, setRefreshing] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('position')

   const dispatch = useDispatch()
   const update = useSelector((state: any) => state.positionUpdate)
@@ -160,6 +164,7 @@ export default function Index() {

   return (
      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
+         <GuideOverlay visible={guideVisible} steps={GUIDE_POSITION} onDismiss={dismissGuide} />
         <View>
            <WrapTab>
               <ButtonTab
--- a/app/(application)/project/[id]/index.tsx
+++ b/app/(application)/project/[id]/index.tsx
@@ -1,4 +1,5 @@
 import AppHeader from "@/components/AppHeader";
+import GuideOverlay from "@/components/GuideOverlay";
 import HeaderRightProjectDetail from "@/components/project/headerProjectDetail";
 import SectionFile from "@/components/project/sectionFile";
 import SectionLink from "@/components/project/sectionLink";
@@ -9,6 +10,8 @@ import SectionCancel from "@/components/sectionCancel";
 import SectionProgress from "@/components/sectionProgress";
 import Styles from "@/constants/Styles";
 import { apiGetProjectOne } 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";
@@ -43,6 +46,7 @@ export default function DetailProject() {
   const [isMember, setIsMember] = useState(false)
   const entityUser = useSelector((state: any) => state.user)
   const [refreshing, setRefreshing] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('project-detail')

   async function handleLoad(cat: 'data' | 'progress') {
      try {
@@ -129,6 +133,7 @@ export default function DetailProject() {
               )
            }}
         />
+         <GuideOverlay visible={guideVisible} steps={GUIDE_PROJECT_DETAIL} onDismiss={dismissGuide} />
         <ScrollView
            style={[Styles.h100, { backgroundColor: colors.background }]}
            refreshControl={
--- a/app/(application)/village-calendar/index.tsx
+++ b/app/(application)/village-calendar/index.tsx
@@ -0,0 +1,304 @@
+import AppHeader from "@/components/AppHeader";
+import ItemDateCalendar from "@/components/calendar/itemDateCalendar";
+import GuideOverlay from "@/components/GuideOverlay";
+import Skeleton from "@/components/skeleton";
+import Text from "@/components/Text";
+import Styles from "@/constants/Styles";
+import { apiGetVillageCalendarByDate, apiGetVillageCalendarIndicator } from "@/lib/api";
+import { GUIDE_VILLAGE_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";
+import { router, Stack } from "expo-router";
+import 'intl';
+import 'intl/locale-data/jsonp/id';
+import moment from "moment";
+import "moment/locale/id";
+import { useEffect, useState } from "react";
+import { Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import Datepicker, {
+   CalendarComponents,
+   CalendarDay
+} from "react-native-ui-datepicker";
+moment.locale('id');
+
+type EventItem = {
+   id: string;
+   type: 'calendar' | 'task';
+   title: string;
+   desc: string;
+   dateStart: string;
+   dateEnd: string;
+   timeStart: string | null;
+   timeEnd: string | null;
+   divisionName: string | null;
+   projectName: string | null;
+   idDivision: string | null;
+   idRef: string;
+};
+
+const TYPE_COLORS = {
+   calendar: {
+      light: { bg: '#A9B5DF', stick: '#7886C7' },
+      dark: { bg: '#2D2B5E', stick: '#7886C7' },
+   },
+   task: {
+      light: { bg: '#D6E6F2', stick: '#94B4C1' },
+      dark: { bg: '#1C3347', stick: '#94B4C1' },
+   },
+};
+
+function VillageEventItem({ item, onPress }: { item: EventItem; onPress: () => void }) {
+   const { activeTheme, colors } = useTheme();
+   const palette = TYPE_COLORS[item.type][activeTheme === 'dark' ? 'dark' : 'light'];
+
+   return (
+      <Pressable
+         style={[Styles.itemEvent, { backgroundColor: palette.bg }]}
+         onPress={onPress}
+      >
+         <View style={[Styles.dividerEvent, { backgroundColor: palette.stick }]} />
+         <View style={[Styles.flex1]}>
+            {item.timeStart ? (
+               <Text style={[Styles.textMediumNormal, { color: activeTheme === 'dark' ? '#ffffff' : '#000000' }]}>
+                  {item.timeStart} - {item.timeEnd}
+               </Text>
+            ) : (
+               <Text style={[Styles.textMediumNormal, { color: activeTheme === 'dark' ? '#ffffff' : '#000000' }]}>
+                  {moment(item.dateStart).format('D MMM YYYY')} – {moment(item.dateEnd).format('D MMM YYYY')}
+               </Text>
+            )}
+            <Text numberOfLines={1} ellipsizeMode="tail" style={[Styles.textDefaultSemiBold, { color: colors.text }]}>
+               {item.title}
+            </Text>
+            <View style={[Styles.rowItemsCenter]}>
+               <View style={[Styles.villageEventBadge, { backgroundColor: palette.stick }]}>
+                  <Text style={[Styles.textSmallSemiBold, { color: '#ffffff' }]}>
+                     {item.type === 'calendar' ? 'Divisi' : 'Kegiatan'}
+                  </Text>
+               </View>
+               <Text numberOfLines={1} ellipsizeMode="tail" style={[Styles.textMediumNormal, { color: activeTheme === 'dark' ? '#ffffff' : '#000000', flex: 1 }]}>
+                  {item.type === 'calendar' ? item.divisionName : item.projectName}
+               </Text>
+            </View>
+         </View>
+      </Pressable>
+   );
+}
+
+
+export default function VillageCalendar() {
+   const { colors, activeTheme } = useTheme();
+   const { token, decryptToken } = useAuthSession();
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('village-calendar');
+   const [selected, setSelected] = useState<any>(new Date());
+   const [data, setData] = useState<EventItem[]>([]);
+   const [dataIndicator, setDataIndicator] = useState<{ calendar: string[], task: string[] }>({ calendar: [], task: [] });
+   const [month, setMonth] = useState<number>(new Date().getMonth());
+   const [loading, setLoading] = useState(true);
+   const [loadingBtn, setLoadingBtn] = useState(false);
+   const [refreshing, setRefreshing] = useState(false);
+
+   async function handleLoad(showLoading: boolean) {
+      try {
+         setLoading(showLoading);
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetVillageCalendarByDate({
+            user: hasil,
+            date: moment(selected).format("YYYY-MM-DD"),
+         });
+         setData(response.data);
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false);
+      }
+   }
+
+   async function handleLoadIndicator() {
+      try {
+         setLoadingBtn(true);
+         const newDate = new Date(selected?.getFullYear(), month, 1);
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetVillageCalendarIndicator({
+            user: hasil,
+            date: moment(newDate).format("YYYY-MM-DD"),
+         });
+         setDataIndicator(response.data ?? { calendar: [], task: [] });
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setTimeout(() => setLoadingBtn(false), 500);
+      }
+   }
+
+   useEffect(() => {
+      handleLoad(true);
+   }, [selected]);
+
+   useEffect(() => {
+      handleLoadIndicator();
+   }, [month]);
+
+   const handleRefresh = async () => {
+      setRefreshing(true);
+      handleLoad(false);
+      handleLoadIndicator();
+      await new Promise(resolve => setTimeout(resolve, 1500));
+      setRefreshing(false);
+   };
+
+   function handlePressEvent(item: EventItem) {
+      if (item.type === 'calendar') {
+         router.push(`/division/${item.idDivision}/calendar/${item.id}` as any);
+      } else {
+         router.push(`/project/${item.idRef}` as any);
+      }
+   }
+
+   const calendarEvents = data.filter(e => e.type === 'calendar');
+   const taskEvents = data.filter(e => e.type === 'task');
+
+   const components: CalendarComponents = {
+      Day: (day: CalendarDay) => {
+         const today = moment(String(day.date)).format("YYYY-MM-DD");
+         return (
+            <ItemDateCalendar
+               text={day.text}
+               isSelected={day.isSelected}
+               isSignCalendar={dataIndicator.calendar.includes(today)}
+               isSignTask={dataIndicator.task.includes(today)}
+               onPress={() => setSelected(new Date(today))}
+            />
+         );
+      },
+      IconNext: (
+         <Pressable onPress={() => !loadingBtn && setMonth(month + 1)}>
+            <Feather name="chevron-right" size={20} color={loadingBtn ? 'gray' : colors.text} />
+         </Pressable>
+      ),
+      IconPrev: (
+         <Pressable onPress={() => !loadingBtn && setMonth(month - 1)}>
+            <Feather name="chevron-left" size={20} color={loadingBtn ? 'gray' : colors.text} />
+         </Pressable>
+      ),
+   };
+
+   return (
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+         <Stack.Screen
+            options={{
+               headerShown: true,
+               header: () => (
+                  <AppHeader
+                     title="Kalender"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                  />
+               ),
+            }}
+         />
+         <GuideOverlay
+            visible={guideVisible}
+            steps={GUIDE_VILLAGE_CALENDAR}
+            onDismiss={dismissGuide}
+         />
+         <ScrollView
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+                  tintColor={colors.icon}
+               />
+            }
+            style={[Styles.h100]}
+         >
+            <View style={[Styles.p15]}>
+               {/* Calendar grid */}
+               <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                  <Datepicker
+                     components={components}
+                     mode="single"
+                     date={selected}
+                     month={month}
+                     onMonthChange={(m) => setMonth(m)}
+                     styles={{
+                        selected: Styles.selectedDate,
+                        month_label: { color: colors.text },
+                        month_selector_label: { color: colors.text },
+                        year_label: { color: colors.text },
+                        year_selector_label: { color: colors.text },
+                        day_label: { color: colors.text },
+                        time_label: { color: colors.text },
+                        weekday_label: { color: colors.text },
+                     }}
+                  />
+               </View>
+
+               {/* Legend */}
+               <View style={[Styles.rowItemsCenter, Styles.villageEventLegendRow]}>
+                  <View style={[Styles.rowItemsCenter, Styles.villageEventLegendItem]}>
+                     <View style={[Styles.villageEventLegendDot, { backgroundColor: '#7886C7' }]} />
+                     <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Acara Divisi</Text>
+                  </View>
+                  <View style={[Styles.rowItemsCenter, Styles.villageEventLegendItem]}>
+                     <View style={[Styles.villageEventLegendDot, { backgroundColor: '#94B4C1' }]} />
+                     <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Kegiatan</Text>
+                  </View>
+               </View>
+
+               {/* Calendar events */}
+               <View style={[Styles.mb15, Styles.mt10]}>
+                  <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Acara Divisi</Text>
+                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                     {loading ? (
+                        <>
+                           <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+                           <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+                        </>
+                     ) : calendarEvents.length > 0 ? (
+                        calendarEvents.map((item, index) => (
+                           <VillageEventItem
+                              key={index}
+                              item={item}
+                              onPress={() => handlePressEvent(item)}
+                           />
+                        ))
+                     ) : (
+                        <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>
+                           Tidak ada acara
+                        </Text>
+                     )}
+                  </View>
+               </View>
+
+               {/* Task events */}
+               <View style={[Styles.mb15]}>
+                  <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Kegiatan</Text>
+                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                     {loading ? (
+                        <>
+                           <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+                           <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+                        </>
+                     ) : taskEvents.length > 0 ? (
+                        taskEvents.map((item, index) => (
+                           <VillageEventItem
+                              key={index}
+                              item={item}
+                              onPress={() => handlePressEvent(item)}
+                           />
+                        ))
+                     ) : (
+                        <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>
+                           Tidak ada kegiatan
+                        </Text>
+                     )}
+                  </View>
+               </View>
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   );
+}
--- a/bun.lock
+++ b/bun.lock
@@ -46,6 +46,7 @@
        "expo-modules-core": "^2.5.0",
        "expo-notifications": "~0.31.3",
        "expo-router": "~5.1.4",
+        "expo-secure-store": "~14.2.4",
        "expo-sharing": "^13.1.5",
        "expo-splash-screen": "~0.30.8",
        "expo-status-bar": "~2.2.3",
@@ -1103,6 +1104,8 @@

    "expo-router": ["expo-router@5.1.11", "", { "dependencies": { "@expo/metro-runtime": "5.0.5", "@expo/schema-utils": "^0.1.0", "@expo/server": "^0.6.3", "@radix-ui/react-slot": "1.2.0", "@react-navigation/bottom-tabs": "^7.3.10", "@react-navigation/native": "^7.1.6", "@react-navigation/native-stack": "^7.3.10", "client-only": "^0.0.1", "invariant": "^2.2.4", "react-fast-compare": "^3.2.2", "react-native-is-edge-to-edge": "^1.1.6", "semver": "~7.6.3", "server-only": "^0.0.1", "shallowequal": "^1.1.0" }, "peerDependencies": { "@react-navigation/drawer": "^7.3.9", "expo": "*", "expo-constants": "*", "expo-linking": "*", "react-native-reanimated": "*", "react-native-safe-area-context": "*", "react-native-screens": "*", "react-server-dom-webpack": "~19.0.4 || ~19.1.5 || ~19.2.4" }, "optionalPeers": ["@react-navigation/drawer", "react-native-reanimated", "react-server-dom-webpack"] }, "sha512-6YQGqQM2rviVSiU6++hrJDPMByHZ7Oiux4XmgoSaGdaHku5QOn9911f2puEUZh2H9ALKBipw5v3ZkrECBd6Zbw=="],

+    "expo-secure-store": ["expo-secure-store@14.2.4", "", { "peerDependencies": { "expo": "*" } }, "sha512-ePaz4fnTitJJZjAiybaVYGfLWWyaEtepZC+vs9ZBMhQMfG5HUotIcVsDaSo3FnwpHmgwsLVPY2qFeryI6AtULw=="],
+
    "expo-sharing": ["expo-sharing@13.1.5", "", { "peerDependencies": { "expo": "*" } }, "sha512-X/5sAEiWXL2kdoGE3NO5KmbfcmaCWuWVZXHu8OQef7Yig4ZgHFkGD11HKJ5KqDrDg+SRZe4ISd6MxE7vGUgm4w=="],

    "expo-splash-screen": ["expo-splash-screen@0.30.10", "", { "dependencies": { "@expo/prebuild-config": "^9.0.10" }, "peerDependencies": { "expo": "*" } }, "sha512-Tt9va/sLENQDQYeOQ6cdLdGvTZ644KR3YG9aRlnpcs2/beYjOX1LHT510EGzVN9ljUTg+1ebEo5GGt2arYtPjw=="],
--- a/components/GuideOverlay.tsx
+++ b/components/GuideOverlay.tsx
@@ -0,0 +1,159 @@
+import Text from '@/components/Text';
+import Styles from '@/constants/Styles';
+import { useTheme } from '@/providers/ThemeProvider';
+import { Feather } from '@expo/vector-icons';
+import React, { useEffect, useRef, useState } from 'react';
+import {
+   Animated,
+   Dimensions,
+   Modal,
+   TouchableOpacity,
+   View,
+} from 'react-native';
+
+export type GuideStep = {
+   title: string;
+   description: string;
+   // posisi card: pixel absolut atau rasio layar (0.0-1.0), rasio lebih aman untuk layout dinamis
+   cardTop?: number;
+   cardTopRatio?: number;
+   // arrow menunjuk ke atas (elemen ada di atas card) atau ke bawah (elemen ada di bawah card)
+   arrowDirection?: 'up' | 'down' | 'none';
+   // offset horizontal arrow dari kiri card (0.0-1.0), default 0.5 = tengah
+   arrowOffset?: number;
+};
+
+type Props = {
+   visible: boolean;
+   steps: GuideStep[];
+   onDismiss: () => void;
+};
+
+const { height: SCREEN_H } = Dimensions.get('window');
+const CARD_MARGIN = 24;
+
+export default function GuideOverlay({ visible, steps, onDismiss }: Props) {
+   const { colors } = useTheme();
+   const [currentStep, setCurrentStep] = useState(0);
+   const fadeAnim = useRef(new Animated.Value(0)).current;
+   const slideAnim = useRef(new Animated.Value(20)).current;
+
+   const step = steps[currentStep];
+   const isLast = currentStep === steps.length - 1;
+
+   const arrowDirection = step?.arrowDirection ?? 'none';
+   const arrowOffset = step?.arrowOffset ?? 0.5;
+   const cardTop = step?.cardTopRatio != null
+      ? SCREEN_H * step.cardTopRatio
+      : (step?.cardTop ?? SCREEN_H * 0.35);
+
+   const cardPositionStyle = { top: cardTop };
+
+   useEffect(() => {
+      if (visible) {
+         setCurrentStep(0);
+         Animated.parallel([
+            Animated.timing(fadeAnim, { toValue: 1, duration: 300, useNativeDriver: true }),
+            Animated.timing(slideAnim, { toValue: 0, duration: 300, useNativeDriver: true }),
+         ]).start();
+      } else {
+         fadeAnim.setValue(0);
+         slideAnim.setValue(20);
+      }
+   }, [visible]);
+
+   function animateStep(next: number) {
+      Animated.sequence([
+         Animated.timing(slideAnim, { toValue: 12, duration: 120, useNativeDriver: true }),
+         Animated.timing(slideAnim, { toValue: 0, duration: 180, useNativeDriver: true }),
+      ]).start();
+      setCurrentStep(next);
+   }
+
+   if (!visible) return null;
+
+   return (
+      <Modal transparent visible={visible} animationType="none" onRequestClose={onDismiss}>
+         <Animated.View style={[Styles.guideOverlay, { opacity: fadeAnim }]}>
+            <Animated.View
+               style={[
+                  Styles.guideCard,
+                  { backgroundColor: colors.modalBackground, transform: [{ translateY: slideAnim }] },
+                  cardPositionStyle,
+               ]}
+            >
+               {/* Arrow atas — menunjuk ke elemen di atas card */}
+               {arrowDirection === 'up' && (
+                  <View style={[Styles.guideArrowUp, {
+                     left: `${arrowOffset * 100}%` as any,
+                     borderBottomColor: colors.modalBackground,
+                  }]} />
+               )}
+
+               {/* Header */}
+               <View style={[Styles.rowItemsCenter, Styles.rowSpaceBetween, Styles.mb10]}>
+                  <View style={[Styles.guideBadge, { backgroundColor: colors.icon + '20' }]}>
+                     <Text style={[Styles.textSmallSemiBold, { color: colors.icon }]}>
+                        {currentStep + 1} / {steps.length}
+                     </Text>
+                  </View>
+                  <TouchableOpacity onPress={onDismiss} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+                     <Feather name="x" size={18} color={colors.dimmed} />
+                  </TouchableOpacity>
+               </View>
+
+               {/* Content */}
+               <Text style={[Styles.textDefaultSemiBold, Styles.mb05, { color: colors.text }]}>
+                  {step.title}
+               </Text>
+               <Text style={[Styles.textMediumNormal, { color: colors.text, lineHeight: 20 }]}>
+                  {step.description}
+               </Text>
+
+               {/* Dot indicator */}
+               <View style={[Styles.rowItemsCenter, Styles.guideDotRow]}>
+                  {steps.map((_, i) => (
+                     <View
+                        key={i}
+                        style={[Styles.guideDot, {
+                           backgroundColor: i === currentStep ? colors.icon : colors.icon + '30',
+                        }]}
+                     />
+                  ))}
+               </View>
+
+               {/* Footer */}
+               <View style={[Styles.rowItemsCenter, Styles.rowSpaceBetween, Styles.mt10]}>
+                  {currentStep > 0 ? (
+                     <TouchableOpacity onPress={() => animateStep(currentStep - 1)} style={Styles.guideButtonSecondary}>
+                        <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Kembali</Text>
+                     </TouchableOpacity>
+                  ) : (
+                     <TouchableOpacity onPress={onDismiss}>
+                        <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Lewati</Text>
+                     </TouchableOpacity>
+                  )}
+
+                  <TouchableOpacity
+                     onPress={() => isLast ? onDismiss() : animateStep(currentStep + 1)}
+                     style={[Styles.guideButtonPrimary, { backgroundColor: colors.icon }]}
+                  >
+                     <Text style={[Styles.textMediumSemiBold, { color: '#ffffff' }]}>
+                        {isLast ? 'Selesai' : 'Lanjut'}
+                     </Text>
+                     {!isLast && <Feather name="arrow-right" size={14} color="#ffffff" style={{ marginLeft: 4 }} />}
+                  </TouchableOpacity>
+               </View>
+
+               {/* Arrow bawah — menunjuk ke elemen di bawah card */}
+               {arrowDirection === 'down' && (
+                  <View style={[Styles.guideArrowDown, {
+                     left: `${arrowOffset * 100}%` as any,
+                     borderTopColor: colors.modalBackground,
+                  }]} />
+               )}
+            </Animated.View>
+         </Animated.View>
+      </Modal>
+   );
+}
--- a/components/buttonFiturMenu.tsx
+++ b/components/buttonFiturMenu.tsx
@@ -14,11 +14,11 @@ export function ButtonFiturMenu({ onPress, icon, text }: Props) {
   const { colors } = useTheme();
   return (
      <TouchableWithoutFeedback onPress={onPress}>
-         <View style={{ alignItems: 'center' }}>
+         <View style={{ alignItems: 'center', width: '25%' }}>
            <View style={[Styles.btnFiturMenu, { backgroundColor: colors.card, borderColor: colors.icon + '20', shadowColor: colors.text }]}>
               {icon}
            </View>
-            <Text style={[Styles.mt05, { color: colors.text }]}>{text}</Text>
+            <Text style={[Styles.mt05, { color: colors.text, textAlign: 'center', fontSize: 12 }]}>{text}</Text>
         </View>
      </TouchableWithoutFeedback>
   )
--- a/components/calendar/itemDateCalendar.tsx
+++ b/components/calendar/itemDateCalendar.tsx
@@ -6,19 +6,28 @@ import Text from "../Text";
 type Props = {
   text: string;
   isSelected: boolean;
-   isSign: boolean;
+   isSign?: boolean;
+   isSignCalendar?: boolean;
+   isSignTask?: boolean;
   onPress?: () => void;
 }

-
-export default function ItemDateCalendar({ text, isSelected, isSign, onPress }: Props) {
+export default function ItemDateCalendar({ text, isSelected, isSign, isSignCalendar, isSignTask, onPress }: Props) {
   const { colors } = useTheme()
+
+   const showMulti = isSignCalendar !== undefined || isSignTask !== undefined;
+
   return (
-      <>
-         <Pressable style={{ alignItems: 'center' }} onPress={onPress}>
-            <Text style={[isSelected ? Styles.cWhite : { color: colors.text }]}>{text}</Text>
-            <View style={[Styles.signDate, { backgroundColor: isSign ? 'red' : 'transparent' }]}></View>
-         </Pressable>
-      </>
+      <Pressable style={Styles.contentItemCenter} onPress={onPress}>
+         <Text style={[isSelected ? Styles.cWhite : { color: colors.text }]}>{text}</Text>
+         {showMulti ? (
+            <View style={Styles.calendarDotRow}>
+               <View style={[Styles.calendarDot, { backgroundColor: isSignCalendar ? (isSelected ? 'white' : '#7886C7') : 'transparent' }]} />
+               <View style={[Styles.calendarDot, { backgroundColor: isSignTask ? (isSelected ? 'white' : '#94B4C1') : 'transparent' }]} />
+            </View>
+         ) : (
+            <View style={[Styles.signDate, { backgroundColor: isSign ? 'red' : 'transparent' }]} />
+         )}
+      </Pressable>
   )
 }
--- a/components/eventItem.tsx
+++ b/components/eventItem.tsx
@@ -17,16 +17,16 @@ export default function EventItem({ category, title, user, jamAwal, jamAkhir, on

   const getBackgroundColor = (cat: 'purple' | 'orange') => {
      if (activeTheme === 'dark') {
-         return cat === 'orange' ? '#547792' : '#1D546D';
+         return cat === 'purple' ? '#2D2B5E' : '#1C3347';
      }
-      return cat === 'orange' ? '#D6E6F2' : '#A9B5DF';
+      return cat === 'purple' ? '#A9B5DF' : '#D6E6F2';
   };

   const getStickColor = (cat: 'purple' | 'orange') => {
      if (activeTheme === 'dark') {
-         return cat === 'orange' ? '#94B4C1' : '#5F9598';
+         return cat === 'purple' ? '#7886C7' : '#94B4C1';
      }
-      return cat === 'orange' ? '#F5F5F5' : '#7886C7';
+      return cat === 'purple' ? '#7886C7' : '#94B4C1';
   };

   return (
--- a/constants/Styles.ts
+++ b/constants/Styles.ts
@@ -1169,6 +1169,108 @@ const Styles = StyleSheet.create({
      fontSize: 10,
      fontStyle: 'italic',
   },
+
+   // guide overlay
+   guideOverlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0,0,0,0.6)',
+      justifyContent: 'center',
+      alignItems: 'center',
+   },
+   guideCard: {
+      position: 'absolute',
+      left: 24,
+      right: 24,
+      borderRadius: 16,
+      padding: 20,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.2,
+      shadowRadius: 12,
+      elevation: 8,
+   },
+   guideBadge: {
+      paddingHorizontal: 8,
+      paddingVertical: 3,
+      borderRadius: 20,
+   },
+   guideDotRow: {
+      marginTop: 16,
+      gap: 6,
+      justifyContent: 'center',
+   },
+   guideDot: {
+      width: 6,
+      height: 6,
+      borderRadius: 3,
+   },
+   guideButtonPrimary: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+      borderRadius: 20,
+   },
+   guideButtonSecondary: {
+      paddingHorizontal: 4,
+      paddingVertical: 8,
+   },
+   guideArrowUp: {
+      position: 'absolute',
+      top: -10,
+      marginLeft: -8,
+      width: 0,
+      height: 0,
+      borderLeftWidth: 8,
+      borderRightWidth: 8,
+      borderBottomWidth: 10,
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent',
+   },
+   guideArrowDown: {
+      position: 'absolute',
+      bottom: -10,
+      marginLeft: -8,
+      width: 0,
+      height: 0,
+      borderLeftWidth: 8,
+      borderRightWidth: 8,
+      borderTopWidth: 10,
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent',
+   },
+
+   // village calendar & itemDateCalendar
+   calendarDotRow: {
+      flexDirection: 'row',
+      gap: 2,
+      height: 6,
+      marginTop: 1,
+   },
+   calendarDot: {
+      width: 5,
+      height: 5,
+      borderRadius: 3,
+   },
+   villageEventLegendRow: {
+      marginTop: 10,
+      marginBottom: 4,
+      gap: 16,
+   },
+   villageEventLegendItem: {
+      gap: 6,
+   },
+   villageEventLegendDot: {
+      width: 10,
+      height: 10,
+      borderRadius: 5,
+   },
+   villageEventBadge: {
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      borderRadius: 4,
+      marginRight: 6,
+   },
 })

 export default Styles;
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -318,6 +318,8 @@ PODS:
    - ReactCommon/turbomodule/bridging
    - ReactCommon/turbomodule/core
    - Yoga
+  - ExpoSecureStore (14.2.4):
+    - ExpoModulesCore
  - ExpoSharing (13.1.5):
    - ExpoModulesCore
  - ExpoSplashScreen (0.30.10):
@@ -2247,6 +2249,7 @@ DEPENDENCIES:
  - ExpoLinking (from `../node_modules/expo-linking/ios`)
  - ExpoMediaLibrary (from `../node_modules/expo-media-library/ios`)
  - ExpoModulesCore (from `../node_modules/expo-modules-core`)
+  - ExpoSecureStore (from `../node_modules/expo-secure-store/ios`)
  - ExpoSharing (from `../node_modules/expo-sharing/ios`)
  - ExpoSplashScreen (from `../node_modules/expo-splash-screen/ios`)
  - ExpoSymbols (from `../node_modules/expo-symbols/ios`)
@@ -2420,6 +2423,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/expo-media-library/ios"
  ExpoModulesCore:
    :path: "../node_modules/expo-modules-core"
+  ExpoSecureStore:
+    :path: "../node_modules/expo-secure-store/ios"
  ExpoSharing:
    :path: "../node_modules/expo-sharing/ios"
  ExpoSplashScreen:
@@ -2630,6 +2635,7 @@ SPEC CHECKSUMS:
  ExpoLinking: d5c183998ca6ada66ff45e407e0f965b398a8902
  ExpoMediaLibrary: 0daf5e811e00daa47690f5da2989e71ff7de56e0
  ExpoModulesCore: 272bc6c06ddd9c4bee2048acc57891cab3700627
+  ExpoSecureStore: 3f1b632d6d40bcc62b4983ef9199cd079592a50a
  ExpoSharing: b0377be82430d07398c6a4cd60b5a15696accbd3
  ExpoSplashScreen: 1c22c5d37647106e42d4ae1582bb6d0dda3b2385
  ExpoSymbols: c5612a90fb9179cdaebcd19bea9d8c69e5d3b859
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -619,6 +619,16 @@ export const apiGetCalendarHistory = async ({ user, search, division, page }: {
   return response.data;
 };

+export const apiGetVillageCalendarByDate = async ({ user, date }: { user: string, date: string }) => {
+   const response = await api.get(`mobile/village-calendar?user=${user}&date=${date}`);
+   return response.data;
+};
+
+export const apiGetVillageCalendarIndicator = async ({ user, date }: { user: string, date: string }) => {
+   const response = await api.get(`mobile/village-calendar/indicator?user=${user}&date=${date}`);
+   return response.data;
+};
+
 export const apiCreateCalendar = async ({ data }: { data: { idDivision: string, title: string, desc: string, timeStart: string, timeEnd: string, dateStart: string, repeatEventTyper: string, repeatValue: string, linkMeet: string, member: any[], user: string } }) => {
   const response = await api.post(`/mobile/calendar`, data)
   return response.data;
--- a/lib/guideSteps.ts
+++ b/lib/guideSteps.ts
@@ -0,0 +1,217 @@
+import { GuideStep } from "@/components/GuideOverlay";
+
+export const GUIDE_VILLAGE_CALENDAR: GuideStep[] = [
+   {
+      title: 'Kalender Umum',
+      description: 'Halaman ini menampilkan semua acara divisi dan kegiatan yang ada di desa kamu dalam satu kalender.',
+      cardTopRatio: 0.58,
+      arrowDirection: 'up',
+      arrowOffset: 0.5,
+   },
+   {
+      title: 'Pilih Tanggal',
+      description: 'Ketuk tanggal pada kalender untuk melihat acara dan kegiatan yang berlangsung pada hari tersebut.',
+      cardTopRatio: 0.58,
+      arrowDirection: 'up',
+      arrowOffset: 0.5,
+   },
+   {
+      title: 'Indikator Dot',
+      description: 'Titik ungu menandakan ada acara divisi, titik biru-abu menandakan ada kegiatan pada tanggal tersebut.',
+      cardTopRatio: 0.63,
+      arrowDirection: 'up',
+      arrowOffset: 0.12,
+   },
+   {
+      title: 'Detail Event',
+      description: 'Ketuk salah satu acara atau kegiatan di bawah untuk melihat detail lengkapnya.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'down',
+      arrowOffset: 0.5,
+   },
+];
+
+export const GUIDE_DIVISION_DISCUSSION: GuideStep[] = [
+   {
+      title: 'Diskusi Divisi',
+      description: 'Halaman ini menampilkan semua topik diskusi dalam divisi. Setiap card menunjukkan pembuat, deskripsi singkat, jumlah komentar, dan status diskusi.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+   {
+      title: 'Buka Diskusi',
+      description: 'Ketuk salah satu diskusi untuk membaca detail dan ikut berkomentar.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+];
+
+export const GUIDE_DIVISION_DOCUMENT: GuideStep[] = [
+   {
+      title: 'Dokumen Divisi',
+      description: 'Halaman ini menampilkan semua file dan folder dokumen milik divisi kamu.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+   {
+      title: 'Buka File atau Folder',
+      description: 'Ketuk folder untuk masuk ke dalamnya, atau ketuk file untuk langsung membukanya.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+   {
+      title: 'Pilih & Kelola',
+      description: 'Centang file atau folder untuk memilihnya, lalu gunakan menu di bawah untuk menghapus, mengganti nama, atau membagikan ke divisi lain.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+];
+
+export const GUIDE_DIVISION_CALENDAR: GuideStep[] = [
+   {
+      title: 'Kalender Divisi',
+      description: 'Halaman ini menampilkan semua acara yang ada di divisi kamu dalam satu kalender.',
+      cardTopRatio: 0.50,
+      arrowDirection: 'none',
+      arrowOffset: 0.5,
+   },
+   {
+      title: 'Indikator Acara',
+      description: 'Garis di bawah tanggal menandakan ada acara pada hari tersebut. Ketuk tanggal untuk melihat daftarnya.',
+      cardTopRatio: 0.50,
+      arrowDirection: 'none',
+      arrowOffset: 0.55,
+   },
+   {
+      title: 'Detail Acara',
+      description: 'Ketuk salah satu acara di bawah kalender untuk melihat detail lengkapnya.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'down',
+      arrowOffset: 0.55,
+   },
+];
+
+export const GUIDE_DISCUSSION: GuideStep[] = [
+   {
+      title: 'Daftar Diskusi',
+      description: 'Halaman ini menampilkan semua topik diskusi. Setiap card menunjukkan judul, deskripsi singkat, jumlah komentar, dan status diskusi.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+   {
+      title: 'Buka Diskusi',
+      description: 'Ketuk salah satu diskusi untuk membaca detail dan ikut berkomentar.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+];
+
+export const GUIDE_ANNOUNCEMENT: GuideStep[] = [
+   {
+      title: 'Daftar Pengumuman',
+      description: 'Halaman ini menampilkan semua pengumuman yang ada di desamu.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+   {
+      title: 'Detail Pengumuman',
+      description: 'Ketuk salah satu pengumuman untuk membaca isi lengkapnya.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+];
+
+export const GUIDE_MEMBER: GuideStep[] = [
+   {
+      title: 'Daftar Anggota',
+      description: 'Halaman ini menampilkan semua anggota desa. Gunakan tab untuk memfilter anggota aktif atau tidak aktif.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+   {
+      title: 'Detail Anggota',
+      description: 'Ketuk salah satu anggota untuk melihat informasi lengkapnya seperti NIK, jabatan, lembaga, dan kontak.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+];
+
+export const GUIDE_POSITION: GuideStep[] = [
+   {
+      title: 'Daftar Jabatan',
+      description: 'Halaman ini menampilkan semua jabatan yang terdaftar. Gunakan tab untuk memfilter jabatan aktif atau tidak aktif.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+   {
+      title: 'Menu Aksi',
+      description: 'Ketuk salah satu jabatan untuk membuka menu aksi — kamu bisa mengaktifkan/menonaktifkan atau mengedit nama jabatan.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+];
+
+export const GUIDE_GROUP: GuideStep[] = [
+   {
+      title: 'Daftar Lembaga Desa',
+      description: 'Halaman ini menampilkan semua lembaga desa yang terdaftar. Gunakan tab untuk memfilter yang aktif atau tidak aktif.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+   {
+      title: 'Menu Aksi',
+      description: 'Ketuk salah satu lembaga untuk membuka menu aksi — kamu bisa mengaktifkan/menonaktifkan atau mengedit nama lembaga.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+];
+
+export const GUIDE_BANNER: GuideStep[] = [
+   {
+      title: 'Daftar Banner',
+      description: 'Halaman ini menampilkan semua banner yang ada di desa kamu.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+   {
+      title: 'Buka Menu Aksi',
+      description: 'Ketuk salah satu banner untuk membuka menu aksi — kamu bisa melihat, mengedit, atau menghapus banner.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+   {
+      title: 'Tambah Banner',
+      description: 'Ketuk tombol tambah di pojok kanan atas untuk menambahkan banner baru.',
+      cardTopRatio: 0.15,
+      arrowDirection: 'up',
+      arrowOffset: 1.05,
+   },
+];
+
+export const GUIDE_PROJECT_DETAIL: GuideStep[] = [
+   {
+      title: 'Detail Kegiatan',
+      description: 'Halaman ini menampilkan informasi lengkap sebuah kegiatan, mulai dari progress, tugas, file, hingga anggota.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+   {
+      title: 'Progress Kegiatan',
+      description: 'Bar ini menunjukkan seberapa banyak tugas yang sudah diselesaikan dari total tugas yang ada.',
+      cardTopRatio: 0.28,
+      arrowDirection: 'up',
+      arrowOffset: 0.5,
+   },
+   {
+      title: 'Daftar Tugas',
+      description: 'Semua tugas dalam kegiatan ini ditampilkan di sini. Ketuk tugas untuk melihat detail atau mengubah statusnya.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+   {
+      title: 'File & Tautan',
+      description: 'File dan tautan pendukung kegiatan tersedia di bagian bawah. Scroll ke bawah untuk mengaksesnya.',
+      cardTopRatio: 0.35,
+      arrowDirection: 'none',
+   },
+];
--- a/lib/useGuide.ts
+++ b/lib/useGuide.ts
@@ -0,0 +1,28 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useEffect, useState } from 'react';
+
+const KEY_PREFIX = '@guide:';
+
+export function useGuide(featureKey: string) {
+   const [visible, setVisible] = useState(false);
+   const [checked, setChecked] = useState(false);
+
+   useEffect(() => {
+      AsyncStorage.getItem(KEY_PREFIX + featureKey).then((val) => {
+         if (!val) setVisible(true);
+         setChecked(true);
+      });
+   }, [featureKey]);
+
+   async function dismiss() {
+      setVisible(false);
+      await AsyncStorage.setItem(KEY_PREFIX + featureKey, 'done');
+   }
+
+   async function reset() {
+      await AsyncStorage.removeItem(KEY_PREFIX + featureKey);
+      setVisible(true);
+   }
+
+   return { visible: checked && visible, dismiss, reset };
+}
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
    "expo-modules-core": "^2.5.0",
    "expo-notifications": "~0.31.3",
    "expo-router": "~5.1.4",
+    "expo-secure-store": "~14.2.4",
    "expo-sharing": "^13.1.5",
    "expo-splash-screen": "~0.30.8",
    "expo-status-bar": "~2.2.3",