refactor: pecah lib/api.ts dan constants/Styles.ts per domain

- lib/api.ts (879 baris) → 13 file di lib/api/ per domain - constants/Styles.ts (1.275 baris) → 10 file di constants/styles/ per domain - tambah docs/FILE-HEALTH.md dan referensinya ke CLAUDE.md - kedua file lama tetap sebagai re-export — zero breaking changes
Merge pull request 'amalia/11-mei-26' (#47 ) from amalia/11-mei-26 into join
2026-05-12 10:34:31 +08:00 · 2026-05-11 17:34:52 +08:00 · 2026-05-11 17:18:47 +08:00 · 2026-05-11 17:15:52 +08:00 · 2026-05-11 17:11:05 +08:00 · 2026-05-11 16:34:46 +08:00
51 changed files with 2477 additions and 2064 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -31,3 +31,7 @@ See @docs/ARCHITECTURE.md
 ## Key Conventions

 See @docs/CONVENTIONS.md
+
+## File Health
+
+See @docs/FILE-HEALTH.md
--- 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
--- a/constants/styles/border.styles.ts
+++ b/constants/styles/border.styles.ts
@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+
+const BorderStyles = StyleSheet.create({
+   round05: { borderRadius: 5 },
+   round08: { borderRadius: 8 },
+   round10: { borderRadius: 10 },
+   round15: { borderRadius: 15 },
+   round20: { borderRadius: 20 },
+   round30: { borderRadius: 30 },
+   borderRight: { borderRightWidth: 1, borderRightColor: '#d6d8f6' },
+   borderLeft: { borderLeftWidth: 1, borderLeftColor: '#d6d8f6' },
+   borderBottom: { borderBottomWidth: 1, borderBottomColor: '#d6d8f6' },
+   borderTop: { borderTopWidth: 1, borderTopColor: '#d6d8f6' },
+   borderAll: { borderWidth: 1, borderColor: '#d6d8f6' },
+});
+
+export default BorderStyles;
--- a/constants/styles/button.styles.ts
+++ b/constants/styles/button.styles.ts
@@ -0,0 +1,44 @@
+import { StyleSheet } from "react-native";
+
+const ButtonStyles = StyleSheet.create({
+   btnIconHeader: { padding: 3 },
+   btnFiturMenu: { padding: 13, borderRadius: 15, borderWidth: 1 },
+   btnRound: {
+      backgroundColor: '#1F3C88',
+      borderWidth: 0,
+      borderColor: '#1F3C88',
+      alignItems: 'center',
+      borderRadius: 30,
+      marginTop: 15,
+      paddingVertical: 10,
+   },
+   btnTab: {
+      alignItems: 'center',
+      paddingVertical: 5,
+      paddingHorizontal: 15,
+      borderRadius: 20,
+      flexDirection: 'row',
+      justifyContent: 'center',
+   },
+   btnLainnya: {
+      alignSelf: 'flex-start',
+      backgroundColor: '#1F3C88',
+      paddingVertical: 5,
+      marginVertical: 5,
+   },
+   btnDisabled: { backgroundColor: '#d6d8f6' },
+   btnMenuRow: { width: '33%', alignItems: 'center' },
+   btnMenuRowMany: { alignItems: 'center', marginHorizontal: 10 },
+   wrapBtnTab: {
+      justifyContent: 'space-between',
+      flexDirection: 'row',
+      marginBottom: 10,
+      borderRadius: 20,
+      padding: 5,
+      borderWidth: 1,
+   },
+   labelStatus: { paddingHorizontal: 15, borderRadius: 10 },
+   labelStatusSmall: { paddingHorizontal: 10, borderRadius: 10 },
+});
+
+export default ButtonStyles;
--- a/constants/styles/card.styles.ts
+++ b/constants/styles/card.styles.ts
@@ -0,0 +1,159 @@
+import { StyleSheet } from "react-native";
+
+const CardStyles = StyleSheet.create({
+   wrapPaper: {
+      padding: 10,
+      backgroundColor: 'white',
+      borderRadius: 5,
+      shadowColor: '#171717',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0.1,
+      shadowRadius: 5,
+      elevation: 2,
+   },
+   shadowBox: {
+      shadowColor: '#171717',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0.1,
+      shadowRadius: 5,
+      elevation: 2,
+   },
+   noShadow: {
+      shadowColor: 'transparent',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      elevation: 0,
+   },
+   wrapGridContent: {
+      shadowColor: '#171717',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0.1,
+      shadowRadius: 5,
+      elevation: 2,
+      borderRadius: 5,
+      marginBottom: 15,
+   },
+   wrapGridCaraousel: {
+      width: '95%',
+      height: 200,
+      shadowColor: '#171717',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0.1,
+      shadowRadius: 5,
+      elevation: 2,
+      borderRadius: 5,
+      marginLeft: 5,
+      display: 'flex',
+   },
+   wrapHomeCarousel: {
+      shadowColor: '#171717',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.15,
+      shadowRadius: 8,
+      elevation: 5,
+   },
+   headerPaperGrid: {
+      paddingVertical: 25,
+      paddingHorizontal: 20,
+      alignItems: 'center',
+      borderTopStartRadius: 5,
+      borderTopEndRadius: 5,
+   },
+   contentPaperGrid: {
+      height: 125,
+      borderBottomEndRadius: 5,
+      borderBottomStartRadius: 5,
+      paddingHorizontal: 20,
+      justifyContent: 'space-evenly',
+   },
+   contentPaperGrid2: {
+      height: 100,
+      borderBottomEndRadius: 5,
+      borderBottomStartRadius: 5,
+      paddingHorizontal: 20,
+      paddingVertical: 15,
+      justifyContent: 'flex-start',
+   },
+   wrapGridItem: {
+      borderWidth: 1,
+      borderRadius: 5,
+      padding: 10,
+      flexDirection: 'row',
+      alignItems: 'center',
+      width: '48.5%',
+      marginBottom: 10,
+   },
+   listItemCard: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: 'transparent',
+      borderRadius: 10,
+      borderWidth: 1,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      gap: 12,
+   },
+   sectionCard: { borderRadius: 12, padding: 16, borderWidth: 1 },
+   sectionHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
+   sectionHeaderRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 10,
+   },
+   sectionIconBox: {
+      width: 30,
+      height: 30,
+      borderRadius: 8,
+      alignItems: 'center',
+      justifyContent: 'center',
+   },
+   sectionActionRow: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+   sectionBadge: { borderRadius: 10, paddingHorizontal: 8, paddingVertical: 2 },
+   wrapBar: { height: 20, backgroundColor: '#ccc', borderRadius: 10, margin: 0, width: '100%' },
+   contentBar: { height: 20, backgroundColor: '#3B82F6', borderRadius: 10 },
+   toastContainer: {
+      backgroundColor: 'white',
+      borderRadius: 10,
+      padding: 10,
+      width: '90%',
+      borderWidth: 1,
+      borderColor: '#d6d8f6',
+   },
+   loadingCenter: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 999,
+      backgroundColor: 'rgba(0,0,0,0.3)',
+   },
+   loadingBox: {
+      paddingVertical: 15,
+      paddingHorizontal: 40,
+      borderRadius: 5,
+      alignItems: 'center',
+      gap: 10,
+   },
+   caraoselContent: {
+      flex: 1,
+      justifyContent: "center",
+      marginHorizontal: 15,
+      borderRadius: 15,
+      backgroundColor: '#19345E',
+      display: 'flex',
+      width: '92%',
+      resizeMode: 'stretch',
+      overflow: 'hidden',
+   },
+   wrapItemDiscussion: { padding: 15, borderRadius: 5, borderBottomWidth: 1 },
+   wrapItemBorderBottom: { padding: 10, borderBottomWidth: 1 },
+   wrapItemBorderAll: { padding: 10, borderWidth: 1, borderRadius: 5, marginBottom: 5 },
+   wrapItemBorderNone: { padding: 10, marginBottom: 5 },
+});
+
+export default CardStyles;
--- a/constants/styles/component.styles.ts
+++ b/constants/styles/component.styles.ts
@@ -0,0 +1,135 @@
+import { StyleSheet } from "react-native";
+
+const ComponentStyles = StyleSheet.create({
+   // avatar
+   userProfileExtraSmall: { width: 35, height: 35, borderRadius: 100 },
+   userProfileSmall: { width: 48, height: 48, borderRadius: 100 },
+   userProfileBig: { width: 100, height: 100, borderRadius: 100 },
+   imgListBanner: { width: 100, height: 50, borderRadius: 5 },
+   iconContent: { padding: 10, borderRadius: 100, backgroundColor: '#E5E7EB' },
+
+   // chip
+   chip: {
+      paddingVertical: 5,
+      paddingHorizontal: 15,
+      borderRadius: 5,
+      borderWidth: 1,
+      borderColor: "transparent",
+      marginRight: 10,
+      marginBottom: 10,
+   },
+   chipSelected: { backgroundColor: "#f2f6ffff", borderColor: "#384288", borderWidth: 1 },
+   chipText: { fontSize: 16, color: "#222" },
+   chipTextSelected: { color: "white" },
+   checkIcon: {
+      position: "absolute",
+      top: -6,
+      left: -6,
+      backgroundColor: "#384288",
+      borderRadius: 10,
+      padding: 2,
+   },
+
+   // badge & progress
+   badgeCol: { alignItems: 'center', gap: 6 },
+   progressBadge: { borderRadius: 10, paddingHorizontal: 12, paddingVertical: 5, borderWidth: 1, alignItems: 'center' },
+   taskCountBadge: { borderRadius: 6, paddingHorizontal: 7, paddingVertical: 2 },
+   positionBadge: { borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3 },
+   textProgressPercent: { fontSize: 22, fontWeight: 'bold', lineHeight: 28 },
+   progressTrack: { height: 8, borderRadius: 4, overflow: 'hidden' },
+   progressFill: { height: '100%', borderRadius: 4 },
+   reportContent: { borderLeftWidth: 3, paddingLeft: 12 },
+   expandBtn: { flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start', marginTop: 8, gap: 4 },
+   fileGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+   fileCard: { width: '48%', borderRadius: 10, borderWidth: 1, padding: 12, flexDirection: 'row', alignItems: 'center', gap: 10 },
+
+   // calendar
+   signDate: { width: 20, height: 2, borderRadius: 3, marginTop: 3 },
+   selectedDate: { backgroundColor: '#238be6', borderRadius: 5 },
+   selectRangeDate: { backgroundColor: '#228be61f' },
+   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 },
+
+   // event item
+   itemEvent: { padding: 10, borderRadius: 10, flexDirection: 'row', alignContent: 'stretch', marginBottom: 10 },
+   dividerEvent: { width: 7, borderRadius: 5, marginRight: 10 },
+
+   // member
+   memberAvatarRing: { borderWidth: 3, borderColor: 'rgba(255,255,255,0.4)', borderRadius: 100 },
+   memberBadgeRow: { flexDirection: 'row', gap: 8, marginTop: 12 },
+   memberBadgeApprover: {
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      borderRadius: 20,
+      borderWidth: 1,
+      borderColor: 'rgba(255,255,255,0.6)',
+      backgroundColor: 'rgba(255,255,255,0.15)',
+   },
+   memberBadgePill: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 20 },
+   memberInfoRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 14 },
+   memberInfoIcon: { width: 36, alignItems: 'center' },
+   memberInfoContent: { flex: 1, marginLeft: 10 },
+
+   // discussion
+   discussionCard: { borderRadius: 10, borderWidth: 1, padding: 14 },
+   discussionIconCircle: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center', flexShrink: 0 },
+   discussionIconCircleLg: { width: 44, height: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center' },
+   discussionStatusPill: { alignSelf: 'flex-start', marginTop: 3, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 20, borderWidth: 1 },
+   discussionStatusText: { fontSize: 11, fontWeight: '600' },
+   discussionCardIndent: { marginLeft: 50 },
+   discussionSeparator: { height: 8 },
+   discussionCommentText: { fontSize: 12, marginLeft: 5 },
+   discussionDateText: { fontSize: 11 },
+   discussionCommentCard: { borderRadius: 10, borderWidth: 1, padding: 12, marginBottom: 8, flexDirection: 'row' },
+   discussionEditedText: { 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',
+   },
+});
+
+export default ComponentStyles;
--- a/constants/styles/header.styles.ts
+++ b/constants/styles/header.styles.ts
@@ -0,0 +1,23 @@
+import { StyleSheet } from "react-native";
+
+const HeaderStyles = StyleSheet.create({
+   headerContainer: { backgroundColor: '#19345E' },
+   headerApp: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+   },
+   headerTitle: { color: '#fff', fontSize: 18, fontWeight: '600' },
+   headerSide: { width: 40, alignItems: 'center' },
+   wrapHeadViewMember: {
+      backgroundColor: '#19345E',
+      paddingVertical: 30,
+      paddingHorizontal: 15,
+      alignItems: 'center',
+      borderBottomLeftRadius: 25,
+      borderBottomRightRadius: 25,
+   },
+});
+
+export default HeaderStyles;
--- a/constants/styles/index.ts
+++ b/constants/styles/index.ts
@@ -0,0 +1,26 @@
+import { StyleSheet } from "react-native";
+import SpacingStyles from './spacing.styles';
+import TypographyStyles from './typography.styles';
+import LayoutStyles from './layout.styles';
+import BorderStyles from './border.styles';
+import ButtonStyles from './button.styles';
+import InputStyles from './input.styles';
+import CardStyles from './card.styles';
+import ModalStyles from './modal.styles';
+import HeaderStyles from './header.styles';
+import ComponentStyles from './component.styles';
+
+const Styles = StyleSheet.create({
+   ...SpacingStyles,
+   ...TypographyStyles,
+   ...LayoutStyles,
+   ...BorderStyles,
+   ...ButtonStyles,
+   ...InputStyles,
+   ...CardStyles,
+   ...ModalStyles,
+   ...HeaderStyles,
+   ...ComponentStyles,
+});
+
+export default Styles;
--- a/constants/styles/input.styles.ts
+++ b/constants/styles/input.styles.ts
@@ -0,0 +1,35 @@
+import { StyleSheet } from "react-native";
+
+const InputStyles = StyleSheet.create({
+   inputRoundForm: {
+      borderRadius: 5,
+      borderColor: '#d6d8f6',
+      borderWidth: 1,
+      paddingVertical: 10,
+      paddingHorizontal: 15,
+   },
+   inputRoundFormLeft: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 0,
+   },
+   inputRoundFormRight: {
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      paddingVertical: 0,
+      justifyContent: 'space-between',
+   },
+   verificationCell: {
+      width: 50,
+      height: 50,
+      lineHeight: 45,
+      fontSize: 24,
+      borderWidth: 1,
+      borderRadius: 15,
+      borderColor: 'gray',
+      textAlign: 'center',
+   },
+   verificationFocusCell: { borderColor: '#19345E' },
+});
+
+export default InputStyles;
--- a/constants/styles/layout.styles.ts
+++ b/constants/styles/layout.styles.ts
@@ -0,0 +1,52 @@
+import { StyleSheet } from "react-native";
+
+const LayoutStyles = StyleSheet.create({
+   wrapLogin: { flex: 1, justifyContent: "flex-start", alignItems: "stretch", padding: 20 },
+   flex1: { flex: 1 },
+   flex2: { flex: 2 },
+   flexColumn: { flexDirection: 'column' },
+   rowOnly: { flexDirection: 'row' },
+   rowSpaceBetween: { justifyContent: 'space-between', flexDirection: 'row' },
+   rowSpaceBetweenReverse: { justifyContent: 'space-between', flexDirection: 'row-reverse' },
+   rowItemsCenter: { flexDirection: 'row', alignItems: 'center' },
+   justifySpaceBetween: { justifyContent: 'space-between' },
+   justifyCenter: { justifyContent: 'center' },
+   alignCenter: { alignItems: 'center' },
+   itemsCenter: { alignItems: 'center' },
+   alignStart: { alignItems: 'flex-start' },
+   contentItemCenter: { justifyContent: 'center', alignItems: 'center' },
+   h100: { height: '100%' },
+   w30: { width: '30%' },
+   w40: { width: '40%' },
+   w45: { width: '45%' },
+   w48: { width: '48%' },
+   w50: { width: '50%' },
+   w60: { width: '60%' },
+   w70: { width: '70%' },
+   w80: { width: '80%' },
+   w90: { width: '90%' },
+   w95: { width: '95%' },
+   w100: { width: '100%' },
+   posAbsolute: { position: 'absolute' },
+   absolute0: { position: 'absolute', bottom: 0 },
+   absoluteIcon: { top: 18, left: 20, position: 'absolute' },
+   absoluteIconPicker: {
+      backgroundColor: '#384288',
+      padding: 5,
+      borderRadius: 100,
+      bottom: 5,
+      right: 5,
+      position: 'absolute',
+   },
+   hidden: { position: 'absolute', opacity: 0, zIndex: -1 },
+   zIndex1: { zIndex: 1 },
+   zIndexMinus1: { zIndex: -1 },
+   resizeContain: { resizeMode: 'contain' },
+   resizeCover: { resizeMode: 'cover' },
+   resizeStretch: { resizeMode: 'stretch' },
+   animatedView: { width: '100%', overflow: 'hidden' },
+   wrapperAccordion: { width: '100%', position: 'absolute', display: 'flex', alignItems: 'center' },
+   bottomMenuSelectDocument: { paddingVertical: 10, position: 'absolute', width: '100%', bottom: 0 },
+});
+
+export default LayoutStyles;
--- a/constants/styles/modal.styles.ts
+++ b/constants/styles/modal.styles.ts
@@ -0,0 +1,140 @@
+import { StyleSheet } from "react-native";
+
+const ModalStyles = StyleSheet.create({
+   modalBgTransparant: { backgroundColor: 'rgba(0, 0, 0, 0.3)', flex: 1 },
+   modalContent: {
+      width: '100%',
+      paddingBottom: 20,
+      backgroundColor: 'white',
+      borderTopRightRadius: 18,
+      borderTopLeftRadius: 18,
+      position: 'absolute',
+      bottom: 0,
+   },
+   modalContentNew: {
+      width: '100%',
+      backgroundColor: 'white',
+      borderTopRightRadius: 18,
+      borderTopLeftRadius: 18,
+      paddingTop: 5,
+      paddingBottom: 5,
+      paddingHorizontal: 20,
+   },
+   modalFloatContent: {
+      backgroundColor: 'white',
+      borderRadius: 18,
+      paddingTop: 5,
+      paddingBottom: 10,
+      paddingHorizontal: 20,
+   },
+   titleContainer: {
+      backgroundColor: 'white',
+      borderTopRightRadius: 10,
+      borderTopLeftRadius: 10,
+      paddingHorizontal: 20,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 10,
+   },
+   titleContainerNew: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 10,
+   },
+   titleContainerModalFloat: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 10,
+   },
+   contentContainer: { height: '90%' },
+   itemSelectModal: {
+      padding: 10,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      borderBottomWidth: 1,
+      alignItems: 'center',
+   },
+   modalOverlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.6)',
+      justifyContent: 'center',
+      alignItems: 'center',
+   },
+   modalConfirmContainer: {
+      width: '80%',
+      borderRadius: 14,
+      overflow: 'hidden',
+      elevation: 2,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+   },
+   modalConfirmContent: { padding: 20, alignItems: 'center' },
+   modalConfirmTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 8, textAlign: 'center' },
+   modalConfirmMessage: { fontSize: 14, textAlign: 'center', lineHeight: 20 },
+   modalConfirmDivider: { height: 1, width: '100%' },
+   modalConfirmFooter: { flexDirection: 'row', height: 50 },
+   modalConfirmButton: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+   modalConfirmButtonText: { fontSize: 16 },
+   modalConfirmVerticalDivider: { width: 1, height: '100%' },
+   modalUpdateContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingHorizontal: 30,
+      overflow: 'hidden',
+   },
+   modalUpdateDecorativeCircle1: {
+      position: 'absolute',
+      width: 300,
+      height: 300,
+      borderRadius: 150,
+      backgroundColor: 'rgba(255, 255, 255, 0.05)',
+      top: -50,
+      right: -50,
+   },
+   modalUpdateDecorativeCircle2: {
+      position: 'absolute',
+      width: 200,
+      height: 200,
+      borderRadius: 100,
+      backgroundColor: 'rgba(255, 255, 255, 0.03)',
+      bottom: -30,
+      left: -30,
+   },
+   modalUpdateContent: { width: '100%', alignItems: 'flex-start', zIndex: 1 },
+   modalUpdateLogo: { width: 200, height: 100, marginBottom: 40, alignSelf: 'center' },
+   modalUpdateTextContainer: { marginBottom: 40 },
+   modalUpdateTitle: { fontSize: 32, fontWeight: 'bold', color: 'white', marginBottom: 20, lineHeight: 38 },
+   modalUpdateDescription: { fontSize: 16, color: 'white', lineHeight: 24 },
+   modalUpdateButtonContainer: { width: '100%', alignItems: 'center' },
+   modalUpdatePrimaryButton: {
+      width: '100%',
+      paddingVertical: 15,
+      borderRadius: 12,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: 15,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.2,
+      shadowRadius: 4,
+      elevation: 3,
+   },
+   modalUpdatePrimaryButtonText: { fontSize: 16, fontWeight: 'bold' },
+   modalUpdateSecondaryButton: { paddingVertical: 10 },
+   modalUpdateSecondaryButtonText: { fontSize: 16, color: 'white', fontWeight: '500' },
+   headerModalViewImg: {
+      paddingTop: 50,
+      paddingHorizontal: 16,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+   },
+});
+
+export default ModalStyles;
--- a/constants/styles/spacing.styles.ts
+++ b/constants/styles/spacing.styles.ts
@@ -0,0 +1,60 @@
+import { StyleSheet } from "react-native";
+
+const SpacingStyles = StyleSheet.create({
+   mb05: { marginBottom: 5 },
+   mb08: { marginBottom: 8 },
+   mb10: { marginBottom: 10 },
+   mb12: { marginBottom: 12 },
+   mb13: { marginBottom: 13 },
+   mb15: { marginBottom: 15 },
+   mb20: { marginBottom: 20 },
+   mb30: { marginBottom: 30 },
+   mb50: { marginBottom: 50 },
+   mb100: { marginBottom: 100 },
+   mt02: { marginTop: 2 },
+   mt05: { marginTop: 5 },
+   mt10: { marginTop: 10 },
+   mt15: { marginTop: 15 },
+   mt30: { marginTop: 30 },
+   mr05: { marginRight: 5 },
+   mr10: { marginRight: 10 },
+   ml05: { marginLeft: 5 },
+   ml10: { marginLeft: 10 },
+   ml15: { marginLeft: 15 },
+   ml20: { marginLeft: 20 },
+   ml25: { marginLeft: 25 },
+   mv05: { marginVertical: 5 },
+   mv10: { marginVertical: 10 },
+   mv15: { marginVertical: 15 },
+   mv50: { marginVertical: 50 },
+   mh03: { marginHorizontal: 3 },
+   mh05: { marginHorizontal: 5 },
+   mh10: { marginHorizontal: 10 },
+   mh15: { marginHorizontal: 15 },
+   p0: { padding: 0 },
+   p05: { padding: 5 },
+   p10: { padding: 10 },
+   p15: { padding: 15 },
+   p20: { padding: 20 },
+   pb05: { paddingBottom: 5 },
+   pb07: { paddingBottom: 7 },
+   pb10: { paddingBottom: 10 },
+   pb13: { paddingBottom: 13 },
+   pb15: { paddingBottom: 15 },
+   pb20: { paddingBottom: 20 },
+   pb50: { paddingBottom: 50 },
+   pb100: { paddingBottom: 100 },
+   ph05: { paddingHorizontal: 5 },
+   ph10: { paddingHorizontal: 10 },
+   ph15: { paddingHorizontal: 15 },
+   ph16: { paddingHorizontal: 16 },
+   ph20: { paddingHorizontal: 20 },
+   pv03: { paddingVertical: 3 },
+   pv05: { paddingVertical: 5 },
+   pv10: { paddingVertical: 10 },
+   pv14: { paddingVertical: 14 },
+   pv15: { paddingVertical: 15 },
+   pv20: { paddingVertical: 20 },
+});
+
+export default SpacingStyles;
--- a/constants/styles/typography.styles.ts
+++ b/constants/styles/typography.styles.ts
@@ -0,0 +1,28 @@
+import { StyleSheet } from "react-native";
+
+const TypographyStyles = StyleSheet.create({
+   textTitle: { fontSize: 32, fontWeight: 'bold', lineHeight: 32 },
+   textSubtitle: { fontSize: 20, fontWeight: 'bold' },
+   textSubtitle2: { fontSize: 20 },
+   textHeaderHome: { fontSize: 18, fontWeight: 'bold', flex: 1, color: 'white' },
+   textDefault: { fontSize: 15, lineHeight: 24 },
+   textDefaultSemiBold: { fontSize: 15, lineHeight: 24, fontWeight: '600' },
+   textMediumNormal: { fontSize: 13, lineHeight: 24 },
+   textMediumSemiBold: { fontSize: 13, lineHeight: 24, fontWeight: '600' },
+   textSmallSemiBold: { fontSize: 10, fontWeight: '600' },
+   textInformation: { fontSize: 12, fontWeight: 'light' },
+   textLink: { fontSize: 14, color: '#0a7ea4' },
+   textCenter: { textAlign: 'center' },
+   textWhite: { color: 'white' },
+   font16: { fontSize: 16 },
+   font26: { fontSize: 26 },
+   cError: { color: '#DB1514' },
+   cGray: { color: 'gray' },
+   cWhite: { color: 'white' },
+   cWhiteDimmed: { color: 'rgba(255,255,255,0.7)' },
+   cBlack: { color: 'black' },
+   cDefault: { color: '#19345E' },
+   cFolder: { color: '#f9cc40' },
+});
+
+export default TypographyStyles;
--- a/docs/FILE-HEALTH.md
+++ b/docs/FILE-HEALTH.md
@@ -0,0 +1,134 @@
+# FILE-HEALTH — Aturan Ukuran & Struktur File
+
+Aturan ini berlaku untuk semua file dalam project ini.
+Tujuan: menjaga file tetap kecil, kohesif, dan mudah diproses oleh AI maupun manusia.
+
+---
+
+## Batas Ukuran File
+
+| Tipe File | Maks Baris | Maks Karakter | Keterangan |
+|-----------|-----------|---------------|------------|
+| Route handler | 150 | 6.000 | Satu file = satu resource |
+| Service / use-case | 300 | 12.000 | Satu file = satu domain logic |
+| Repository / query | 250 | 10.000 | Pisah per entity |
+| Schema / validation | 200 | 8.000 | Pisah per domain |
+| Types / interfaces | 300 | 10.000 | Boleh agregat, tapi per modul |
+| Utility / helper | 200 | 8.000 | Satu concern per file |
+| Config | 100 | 4.000 | Tidak ada logic bisnis |
+| Test file | 400 | 16.000 | Satu file test per satu unit |
+
+> **Hard limit global:** Tidak ada file yang boleh melebihi **500 baris** atau **20.000 karakter**,
+> kecuali file yang di-generate otomatis (migration, seed, generated types).
+
+---
+
+## Aturan Wajib
+
+### 1. Satu File, Satu Tanggung Jawab
+- Setiap file harus bisa dijelaskan dalam satu kalimat pendek.
+- Jika penjelasannya butuh kata "dan" lebih dari sekali → **pecah file-nya**.
+
+### 2. Tidak Ada "God File"
+- Dilarang menaruh lebih dari satu route group dalam satu file handler.
+- Dilarang mencampur business logic dengan transport layer (HTTP, WS, queue).
+- Dilarang mencampur type definition dengan implementation dalam satu file yang panjang.
+
+### 3. Penamaan File Harus Eksplisit
+- Nama file harus mencerminkan isi secara tepat.
+- Hindari nama generik: `utils.ts`, `helpers.ts`, `common.ts`, `misc.ts`.
+- Gunakan pola: `[domain].[layer].ts` → contoh: `user.service.ts`, `payment.repository.ts`.
+
+### 4. Index File Hanya Untuk Re-export
+- File `index.ts` hanya boleh berisi re-export, **bukan** implementasi.
+- Maksimal 50 baris untuk file index.
+
+### 5. Tidak Ada Barrel Import yang Dalam
+- Hindari barrel yang mengimpor dari barrel lain lebih dari 2 level.
+- Ini membuat AI sulit trace dependency dengan akurat.
+
+---
+
+## Kapan Harus Pecah File
+
+Pecah file segera jika salah satu kondisi ini terpenuhi:
+
+- [ ] File melebihi batas karakter/baris di tabel di atas
+- [ ] Ada dua fungsi/class yang tidak saling bergantung dalam satu file
+- [ ] File mengandung lebih dari 3 exported symbol utama
+- [ ] File sulit diberi nama yang spesifik tanpa kata "dan"
+- [ ] Edit di satu bagian file sering menyebabkan konflik di bagian lain
+
+---
+
+## Pola Pemecahan File yang Dianjurkan
+
+### Service yang Terlalu Besar
+```
+// SEBELUM: user.service.ts (600 baris)
+
+// SESUDAH:
+user.service.ts          // orchestration, max 150 baris
+user.query.service.ts    // read operations
+user.command.service.ts  // write operations
+user.notification.service.ts // side effects
+```
+
+### Handler yang Terlalu Besar
+```
+// SEBELUM: user.route.ts (400 baris)
+
+// SESUDAH:
+user.route.ts            // route registration only
+user.handler.ts          // handler functions
+user.middleware.ts        // route-specific middleware
+```
+
+### Types yang Terlalu Besar
+```
+// SEBELUM: types.ts (500 baris)
+
+// SESUDAH:
+types/user.types.ts
+types/payment.types.ts
+types/shared.types.ts
+```
+
+---
+
+## Instruksi Khusus untuk AI
+
+Ketika bekerja dalam project ini, **Claude wajib**:
+
+1. **Menolak menambah kode** ke file yang sudah mendekati atau melebihi batas,
+   kecuali penambahannya memang sangat kecil (< 10 baris) dan kohesif.
+
+2. **Proaktif menyarankan refactor** saat mendeteksi file yang tumbuh tidak sehat,
+   sebelum menambahkan fitur baru ke file tersebut.
+
+3. **Tidak membuat "helper dump"** — setiap helper harus punya file sendiri
+   yang namanya spesifik, bukan ditumpuk ke file utils yang ada.
+
+4. **Selalu buat file baru** jika implementasi baru tidak secara alami masuk
+   ke salah satu file yang sudah ada.
+
+5. **Periksa ukuran file saat ini** sebelum mengedit — jika sudah > 80% dari
+   batas, sarankan pecah terlebih dahulu.
+
+---
+
+## Pengecualian
+
+File berikut **dikecualikan** dari aturan batas ukuran:
+
+- `*.generated.ts` — file hasil code generation (Prisma, tRPC, dll)
+- `*.migration.ts` / `*_migration.sql` — file migrasi database
+- `*.seed.ts` — file seeding data
+- File di folder `__fixtures__/` atau `__mocks__/`
+
+Pengecualian **tidak berlaku** untuk file konfigurasi runtime seperti
+`elysia.config.ts`, `app.ts`, atau `server.ts` — file ini tetap harus ringkas.
+
+---
+
+*Letakkan file ini di root project atau sertakan referensinya di `CLAUDE.md`.*
--- 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
@@ -1,870 +1 @@
-import axios, { AxiosError } from 'axios';
-import Constants from 'expo-constants';
-import { logError } from '@/lib/errorLogger';
-
-const api = axios.create({
-   baseURL: Constants?.expoConfig?.extra?.URL_API
-});
-
-api.interceptors.response.use(
-   (response) => response,
-   (error: AxiosError) => {
-      const status = error.response?.status;
-      const url = error.config?.url ?? 'unknown endpoint';
-      const description = `API error ${status ?? 'network'} on ${url}`;
-      logError(description, error);
-      return Promise.reject(error);
-   }
-);
-
-export const apiCheckPhoneLogin = async (body: { phone: string }) => {
-   const response = await api.post('/auth/login', body)
-   return response.data;
-}
-
-export const apiSendOtp = async (body: { phone: string, otp: number }) => {
-   const message = "Desa+\nMasukkan kode ini " + body.otp + " pada aplikasi Desa+ anda. Jangan berikan pada siapapun."
-   const textFix = encodeURIComponent(message)
-   const res = await fetch(
-      `${Constants.expoConfig?.extra?.URL_OTP}/api/wa/send-text`,
-      {
-         method: 'POST',
-         headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${Constants.expoConfig?.extra?.WA_SERVER_TOKEN}`,
-         },
-         body: JSON.stringify({
-            number: body.phone,
-            text: message
-         })
-      }
-   );
-
-   return res.status
-}
-
-export const apiGetProfile = async ({ id }: { id: string }) => {
-   const response = await api.get(`mobile/user/${id}`);
-   return response.data;
-};
-
-export const apiEditProfile = async (data: FormData) => {
-   const response = await api.put(`/mobile/user/profile`, data, {
-      headers: {
-         'Content-Type': 'multipart/form-data',
-      },
-   })
-   return response.data;
-};
-
-export const apiGetSearch = async ({ text, user }: { text: string, user: string }) => {
-   const response = await api.get(`mobile/home/search?search=${text}&user=${user}`);
-   return response.data;
-};
-
-export const apiGetBanner = async ({ user }: { user: string }) => {
-   const response = await api.get(`mobile/banner?user=${user}`);
-   return response.data;
-};
-
-export const apiCreateBanner = async (data: FormData) => {
-   const response = await api.post('mobile/banner', data,
-      {
-         headers: {
-            'Content-Type': 'multipart/form-data',
-         },
-      }
-   )
-   return response.data;
-};
-
-export const apiDeleteBanner = async (data: { user: string }, id: string) => {
-   const response = await api.delete(`mobile/banner/${id}`, { data })
-   return response.data;
-};
-
-export const apiGetBannerOne = async ({ user, id }: { user: string, id: string }) => {
-   const response = await api.get(`mobile/banner/${id}?user=${user}`);
-   return response.data;
-};
-
-export const apiEditBanner = async (data: FormData, id: string) => {
-   const response = await api.put(`mobile/banner/${id}`, data,
-      {
-         headers: {
-            'Content-Type': 'multipart/form-data',
-         },
-      }
-   )
-   return response.data;
-};
-
-
-export const apiGetDataHome = async ({ cat, user }: { cat: 'kegiatan' | 'division' | 'progress' | 'dokumen' | 'event' | 'discussion' | 'header' | 'check-late-project', user: string }) => {
-   const response = await api.get(`mobile/home?user=${user}&cat=${cat}`);
-   return response.data;
-};
-
-export const apiGetGroup = async ({ user, active, search }: { user: string, active: string, search: string }) => {
-   const response = await api.get(`mobile/group?user=${user}&active=${active}&search=${search}`);
-   return response.data;
-};
-
-export const apiCreateGroup = async (data: { user: string, name: string }) => {
-   const response = await api.post('mobile/group', data);
-   return response.data;
-};
-
-export const apiEditGroup = async (data: { user: string, name: string }, id: string) => {
-   const response = await api.put(`mobile/group/${id}`, data);
-   return response.data;
-};
-
-export const apiDeleteGroup = async (data: { user: string, isActive: boolean }, id: string) => {
-   const response = await api.delete(`mobile/group/${id}`, { data });
-   return response.data;
-};
-
-export const apiGetPosition = async ({ user, active, search, group }: { user: string, active: string, search: string, group?: string }) => {
-   const response = await api.get(`mobile/position?user=${user}&active=${active}&group=${group}&search=${search}`);
-   return response.data;
-};
-
-export const apiCreatePosition = async (data: { user: string, name: string, idGroup: string }) => {
-   const response = await api.post('mobile/position', data);
-   return response.data;
-};
-
-
-export const apiDeletePosition = async (data: { user: string, isActive: boolean }, id: string) => {
-   const response = await api.delete(`mobile/position/${id}`, { data });
-   return response.data;
-};
-
-export const apiEditPosition = async (data: { user: string, name: string, idGroup: string }, id: string) => {
-   const response = await api.put(`mobile/position/${id}`, data)
-   return response.data
-};
-
-export const apiGetUser = async ({ user, active, search, group, page }: { user: string, active: string, search: string, group?: string, page?: number }) => {
-   const response = await api.get(`mobile/user?user=${user}&active=${active}&group=${group}&search=${search}&page=${page}`);
-   return response.data;
-};
-
-
-export const apiCreateUser = async ({ data }: { data: FormData }) => {
-   const response = await api.post('/mobile/user', data, {
-      headers: {
-         'Content-Type': 'multipart/form-data',
-      },
-   })
-   return response.data;
-};
-
-export const apiDeleteUser = async (data: { user: string, isActive: boolean }, id: string) => {
-   const response = await api.delete(`mobile/user/${id}`, { data })
-   return response.data
-};
-
-export const apiToggleApprover = async (data: { user: string, isApprover: boolean }, id: string) => {
-   const response = await api.patch(`mobile/user/${id}`, data)
-   return response.data
-};
-
-export const apiEditUser = async (data: FormData, id: string) => {
-   const response = await api.put(`/mobile/user/${id}`, data, {
-      headers: {
-         'Content-Type': 'multipart/form-data',
-      },
-   })
-   return response.data;
-};
-
-export const apiGetDiscussionGeneral = async ({ user, active, search, group, page }: { user: string, active: string, search: string, group?: string, page?: number }) => {
-   const response = await api.get(`mobile/discussion-general?user=${user}&active=${active}&group=${group}&search=${search}&page=${page}`);
-   return response.data;
-};
-
-export const apiGetDiscussionGeneralOne = async ({ id, user, cat }: { id: string, user: string, cat: string }) => {
-   const response = await api.get(`mobile/discussion-general/${id}?user=${user}&cat=${cat}`);
-   return response.data;
-};
-
-export const apiSendDiscussionGeneralCommentar = async ({ id, data }: { id: string, data: { desc: string, user: string } }) => {
-   const response = await api.post(`/mobile/discussion-general/${id}/comment`, data)
-   return response.data;
-};
-
-export const apiDeleteDiscussionGeneralCommentar = async ({ id, data }: { id: string, data: { user: string } }) => {
-   const response = await api.delete(`/mobile/discussion-general/${id}/comment`, { data })
-   return response.data;
-};
-
-export const apiUpdateDiscussionGeneralCommentar = async ({ id, data }: { id: string, data: { desc: string, user: string } }) => {
-   const response = await api.put(`/mobile/discussion-general/${id}/comment`, data)
-   return response.data;
-};
-
-
-export const apiDeleteMemberDiscussionGeneral = async (data: { user: string, idUser: string }, id: string) => {
-   const response = await api.delete(`mobile/discussion-general/${id}/member`, { data });
-   return response.data;
-};
-
-
-export const apiUpdateStatusDiscussionGeneral = async ({ id, data }: { id: string, data: { status: number, user: string } }) => {
-   const response = await api.post(`/mobile/discussion-general/${id}`, data)
-   return response.data;
-};
-
-export const apiDeleteDiscussionGeneral = async (data: { user: string, active: boolean }, id: string) => {
-   const response = await api.delete(`mobile/discussion-general/${id}`, { data });
-   return response.data;
-};
-
-export const apiEditDiscussionGeneral = async (data: FormData, id: string) => {
-   const response = await api.put(`/mobile/discussion-general/${id}`, data, {
-      headers: {
-         'Content-Type': 'multipart/form-data',
-      },
-   })
-   return response.data;
-};
-
-// export const apiCreateDiscussionGeneral = async ({ data }: { data: { idGroup: string, title: string, desc: string, user: string, member: [] } }) => {
-//    const response = await api.post(`/mobile/discussion-general`, data)
-//    return response.data;
-// };
-
-export const apiCreateDiscussionGeneral = async (data: FormData) => {
-   // const response = await api.post(`/mobile/discussion-general`, data)
-   const response = await api.post(`/mobile/discussion-general`, data, {
-      headers: {
-         'Content-Type': 'multipart/form-data',
-      },
-   })
-   return response.data;
-};
-
-
-export const apiAddMemberDiscussionGeneral = async ({ data, id }: { data: { user: string, member: any[] }, id: string }) => {
-   const response = await api.post(`/mobile/discussion-general/${id}/member`, data)
-   return response.data;
-};
-
-export const apiGetAnnouncement = async ({ user, search, page }: { user: string, search: string, page?: number }) => {
-   const response = await api.get(`mobile/announcement?user=${user}&search=${search}&page=${page}`);
-   return response.data;
-};
-
-export const apiGetDivisionGroup = async ({ user }: { user: string }) => {
-   const response = await api.get(`mobile/group/get-division?user=${user}`);
-   return response.data;
-};
-
-// export const apiCreateAnnouncement = async ({ data }: { data: { title: string, desc: string, user: string, groups: any[] } }) => {
-//    const response = await api.post(`/mobile/announcement`, data)
-//    return response.data;
-// };
-
-export const apiCreateAnnouncement = async (data: FormData) => {
-   const response = await api.post(`/mobile/announcement`, data, {
-      headers: {
-         'Content-Type': 'multipart/form-data',
-      },
-   })
-   return response.data;
-};
-
-
-export const apiGetAnnouncementOne = async ({ user, id }: { user: string, id: string }) => {
-   const response = await api.get(`mobile/announcement/${id}?user=${user}`);
-   return response.data;
-};
-
-// export const apiEditAnnouncement = async (data: { title: string, desc: string, user: string, groups: any[], oldFile: any[] }, id: string) => {
-//    const response = await api.put(`/mobile/announcement/${id}`, data)
-//    return response.data;
-// };
-
-export const apiEditAnnouncement = async (data: FormData, id: string) => {
-   const response = await api.put(`/mobile/announcement/${id}`, data, {
-      headers: {
-         'Content-Type': 'multipart/form-data',
-      },
-   })
-   return response.data;
-};
-
-
-export const apiDeleteAnnouncement = async (data: { user: string }, id: string) => {
-   const response = await api.delete(`mobile/announcement/${id}`, { data })
-   return response.data
-};
-
-export const apiGetTahunProject = async ({ user }: { user: string }) => {
-   const response = await api.get(`mobile/project/tahun?user=${user}`);
-   return response.data;
-};
-
-export const apiGetProject = async ({ user, status, search, group, kategori, page, year }: { user: string, status: string, search: string, group?: string, kategori?: string, page?: number, year?: string }) => {
-   const response = await api.get(`mobile/project?user=${user}&status=${status}&group=${group}&search=${search}&cat=${kategori}&page=${page}&year=${year}`);
-   return response.data;
-};
-
-export const apiGetProjectOne = async ({ user, cat, id }: { user: string, cat: 'data' | 'progress' | 'task' | 'file' | 'member' | 'link', id: string }) => {
-   const response = await api.get(`mobile/project/${id}?user=${user}&cat=${cat}`);
-   return response.data;
-};
-
-export const apiEditProject = async (data: { name: string, user: string }, id: string) => {
-   const response = await api.put(`/mobile/project/${id}`, data)
-   return response.data;
-};
-
-export const apiReportProject = async (data: { report: string, user: string }, id: string) => {
-   const response = await api.put(`/mobile/project/${id}/lainnya`, data)
-   return response.data;
-};
-
-export const apiCreateProjectTask = async ({ data, id }: { data: { name: string, dateStart: string, user: string, dateEnd: string, dataDetail: any[] }, id: string }) => {
-   const response = await api.post(`/mobile/project/${id}`, data)
-   return response.data;
-};
-
-export const apiCancelProject = async (data: { user: string, reason: string }, id: string) => {
-   const response = await api.delete(`mobile/project/${id}`, { data })
-   return response.data
-};
-
-export const apiUpdateStatusProjectTask = async (data: { user: string, status: number, idProject: string }, id: string) => {
-   const response = await api.put(`mobile/project/detail/${id}`, data)
-   return response.data
-};
-
-export const apiDeleteProjectTask = async (data: { user: string, idProject: string }, id: string) => {
-   const response = await api.delete(`mobile/project/detail/${id}`, { data })
-   return response.data
-};
-
-export const apiGetProjectTask = async ({ user, id, cat }: { user: string, id: string, cat?: string }) => {
-   const response = await api.get(`mobile/project/detail/${id}?user=${user}${cat ? `&cat=${cat}` : ""}`);
-   return response.data;
-};
-
-export const apiEditProjectTask = async ({ data, id }: { data: { title: string, dateStart: string, user: string, dateEnd: string, dataDetail: any[] }, id: string }) => {
-   const response = await api.post(`/mobile/project/detail/${id}`, data)
-   return response.data;
-};
-
-export const apiDeleteProjectMember = async (data: { user: string, idUser: string }, id: string) => {
-   const response = await api.delete(`mobile/project/${id}/member`, { data })
-   return response.data
-};
-
-export const apiGetProjectTaskFile = async ({ user, id }: { user: string, id: string }) => {
-   const response = await api.get(`/mobile/project/task/file/${id}`, { params: { user } })
-   return response.data;
-};
-
-export const apiAddProjectTaskFile = async ({ data, id }: { data: FormData, id: string }) => {
-   const response = await api.post(`/mobile/project/task/file/${id}`, data, {
-      headers: { 'Content-Type': 'multipart/form-data' },
-   })
-   return response.data;
-};
-
-export const apiLinkProjectTaskFile = async ({ user, idFile, id }: { user: string, idFile: string, id: string }) => {
-   const response = await api.patch(`/mobile/project/task/file/${id}`, { user, idFile })
-   return response.data;
-};
-
-export const apiDeleteProjectTaskFile = async (data: { user: string }, id: string) => {
-   const response = await api.delete(`/mobile/project/task/file/${id}`, { data })
-   return response.data;
-};
-
-export const apiGetProjectTaskApprovals = async ({ user, id }: { user: string, id: string }) => {
-   const response = await api.get(`/mobile/project/task/${id}/approval`, { params: { user } })
-   return response.data;
-};
-
-export const apiSubmitProjectTask = async ({ user, id }: { user: string, id: string }) => {
-   const response = await api.post(`/mobile/project/task/${id}/approval`, { user })
-   return response.data;
-};
-
-export const apiApproveRejectProjectTask = async ({ user, id, action, note }: { user: string, id: string, action: 'approve' | 'reject', note?: string }) => {
-   const response = await api.put(`/mobile/project/task/${id}/approval`, { user, action, note })
-   return response.data;
-};
-
-
-export const apiAddMemberProject = async ({ data, id }: { data: { user: string, member: any[] }, id: string }) => {
-   const response = await api.post(`/mobile/project/${id}/member`, data)
-   return response.data;
-};
-
-export const apiCreateProject = async (data: FormData) => {
-   const response = await api.post(`/mobile/project`, data, {
-      headers: {
-         'Content-Type': 'multipart/form-data',
-      },
-   })
-   return response.data;
-};
-
-export const apiDeleteProject = async (data: { user: string }, id: string) => {
-   const response = await api.delete(`/mobile/project/${id}/lainnya`, { data })
-   return response.data;
-};
-
-export const apiAddLinkProject = async (data: { user: string, link: string }, id: string) => {
-   const response = await api.post(`/mobile/project/${id}/link`, data)
-   return response.data;
-};
-
-export const apiAddFileProject = async ({ data, id }: { data: FormData, id: string }) => {
-   const response = await api.post(`/mobile/project/file/${id}`, data,
-      {
-         headers: {
-            'Content-Type': 'multipart/form-data',
-         },
-      }
-   )
-   return response.data;
-};
-
-export const apiCheckFileProject = async ({ data, id }: { data: FormData, id: string }) => {
-   const response = await api.put(`/mobile/project/file/${id}`, data,
-      {
-         headers: {
-            'Content-Type': 'multipart/form-data',
-         },
-      }
-   )
-   return response.data;
-};
-
-export const apiDeleteFileProject = async (data: { user: string }, id: string) => {
-   const response = await api.delete(`/mobile/project/file/${id}`, { data })
-   return response.data;
-};
-
-export const apiDeleteLinkProject = async (data: { idLink: string, user: string }, id: string) => {
-   const response = await api.delete(`/mobile/project/${id}/link`, { data })
-   return response.data;
-};
-
-export const apiGetDivision = async ({ user, search, group, kategori, active, page }: { user: string, search: string, group?: string, kategori?: string, active?: string, page?: number }) => {
-   const response = await api.get(`mobile/division?user=${user}&active=${active}&group=${group}&search=${search}&cat=${kategori}&page=${page}`);
-   return response.data;
-};
-
-export const apiGetDivisionReport = async ({ user, cat, date, dateEnd, division, group }: { user: string, cat: 'table-progress' | 'lainnya', date: string, dateEnd: string, division: string, group?: string }) => {
-   const response = await api.get(`mobile/division/report?user=${user}&cat=${cat}&date=${date}&date-end=${dateEnd}&division=${division}&group=${group}`);
-   return response.data;
-};
-
-export const apiGetDivisionOneFeature = async ({ user, cat, id }: { user: string, cat: 'jumlah' | 'today-task' | 'new-file' | 'new-discussion' | 'check-member' | 'check-admin', id: string }) => {
-   const response = await api.get(`mobile/division/${id}/detail?user=${user}&cat=${cat}`);
-   return response.data;
-};
-
-export const apiGetDivisionOneDetail = async ({ user, id }: { user: string, id: string }) => {
-   const response = await api.get(`mobile/division/${id}?user=${user}`);
-   return response.data;
-};
-
-export const apiUpdateStatusAdminDivision = async (data: { user: string, id: string, isAdmin: boolean }, id: string) => {
-   const response = await api.put(`mobile/division/${id}/detail`, data)
-   return response.data
-};
-
-export const apiDeleteMemberDivision = async (data: { user: string, id: string }, id: string) => {
-   const response = await api.delete(`/mobile/division/${id}/detail`, { data })
-   return response.data;
-};
-
-export const apiAddMemberDivision = async ({ data, id }: { data: { user: string, member: any[] }, id: string }) => {
-   const response = await api.post(`/mobile/division/${id}/detail`, data)
-   return response.data;
-};
-
-export const apiEditDivision = async (data: { user: string, name: string, desc: string }, id: string) => {
-   const response = await api.put(`mobile/division/${id}`, data)
-   return response.data
-};
-
-export const apiUpdateStatusDivision = async ({ data, id }: { data: { user: string, isActive: boolean }, id: string }) => {
-   const response = await api.post(`/mobile/division/${id}/status`, data)
-   return response.data;
-};
-
-export const apiGetDivisionMember = async ({ user, id, search }: { user: string, id: string, search: string }) => {
-   const response = await api.get(`mobile/division/${id}/member?user=${user}&search=${search}`);
-   return response.data;
-};
-
-export const apiGetListDivisionByIdDivision = async ({ user, search, division }: { user: string, search: string, division: string }) => {
-   const response = await api.get(`mobile/division/more?user=${user}&search=${search}&division=${division}`);
-   return response.data;
-};
-
-export const apiCreateDivision = async (data: { data: { idGroup: string, name: string, desc: string }, member: [], admin: string[], user: string }) => {
-   const response = await api.post(`/mobile/division`, data)
-   return response.data;
-};
-
-export const apiCheckDivisionName = async (data: { data: { idGroup: string, name: string, desc: string }, user: string }) => {
-   const response = await api.put(`/mobile/division`, data)
-   return response.data;
-};
-
-export const apiGetDiscussion = async ({ user, search, division, active, page }: { user: string, search: string, division: string, active?: string, page?: number }) => {
-   const response = await api.get(`mobile/discussion?user=${user}&active=${active}&search=${search}&division=${division}&page=${page}`);
-   return response.data;
-};
-
-export const apiGetDiscussionOne = async ({ id, user, cat }: { id: string, user: string, cat: 'data' | 'comment' | 'file' }) => {
-   const response = await api.get(`mobile/discussion/${id}?user=${user}&cat=${cat}`);
-   return response.data;
-};
-
-export const apiSendDiscussionCommentar = async ({ data, id }: { data: { user: string, comment: string }, id: string }) => {
-   const response = await api.post(`/mobile/discussion/${id}/comment`, data)
-   return response.data;
-};
-
-export const apiEditDiscussionCommentar = async ({ data, id }: { data: { user: string, comment: string }, id: string }) => {
-   const response = await api.put(`/mobile/discussion/${id}/comment`, data)
-   return response.data;
-};
-
-export const apiDeleteDiscussionCommentar = async ({ data, id }: { data: { user: string }, id: string }) => {
-   const response = await api.delete(`/mobile/discussion/${id}/comment`, { data })
-   return response.data;
-};
-
-// export const apiEditDiscussion = async ({ data, id }: { data: { user: string, desc: string }, id: string }) => {
-//    const response = await api.post(`/mobile/discussion/${id}`, data)
-//    return response.data;
-// };
-
-export const apiEditDiscussion = async (data: FormData, id: string) => {
-   const response = await api.post(`/mobile/discussion/${id}`, data, {
-      headers: {
-         'Content-Type': 'multipart/form-data',
-      },
-   })
-   return response.data;
-};
-
-export const apiArchiveDiscussion = async (data: { user: string, active: boolean }, id: string) => {
-   const response = await api.put(`mobile/discussion/${id}`, data)
-   return response.data
-};
-
-export const apiOpenCloseDiscussion = async (data: { user: string, status: number }, id: string) => {
-   const response = await api.delete(`mobile/discussion/${id}`, { data })
-   return response.data
-};
-
-// export const apiCreateDiscussion = async ({ data }: { data: { user: string, desc: string, idDivision: string } }) => {
-//    const response = await api.post(`/mobile/discussion`, data)
-//    return response.data;
-// };
-
-export const apiCreateDiscussion = async (data: FormData) => {
-   const response = await api.post(`/mobile/discussion`, data, {
-      headers: {
-         'Content-Type': 'multipart/form-data',
-      },
-   })
-   return response.data;
-};
-
-export const apiGetCalendarByDateDivision = async ({ user, date, division }: { user: string, date: string, division: string, }) => {
-   const response = await api.get(`mobile/calendar?user=${user}&date=${date}&division=${division}`);
-   return response.data;
-};
-
-export const apiGetIndicatorCalendar = async ({ user, date, division }: { user: string, date: string, division: string, }) => {
-   const response = await api.get(`mobile/calendar/indicator?user=${user}&date=${date}&division=${division}`);
-   return response.data;
-};
-
-export const apiGetCalendarOne = async ({ user, id, cat }: { user: string, id: string, cat: 'data' | 'member' }) => {
-   const response = await api.get(`mobile/calendar/${id}?user=${user}&cat=${cat}`);
-   return response.data;
-};
-
-export const apiDeleteCalendarMember = async (data: { user: string, idUser: string }, id: string) => {
-   const response = await api.delete(`/mobile/calendar/${id}/member`, { data })
-   return response.data
-};
-
-export const apiAddMemberCalendar = async ({ data, id }: { data: { user: string, member: any[] }, id: string }) => {
-   const response = await api.post(`/mobile/calendar/${id}/member`, data)
-   return response.data;
-};
-
-export const apiDeleteCalendar = async (data: { user: string }, id: string) => {
-   const response = await api.delete(`/mobile/calendar/${id}`, { data })
-   return response.data
-};
-
-export const apiGetCalendarHistory = async ({ user, search, division, page }: { user: string, search: string, division: string, page?: number }) => {
-   const response = await api.get(`mobile/calendar/history?user=${user}&search=${search}&division=${division}&page=${page}`);
-   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;
-};
-
-export const apiUpdateCalendar = async ({ data, id }: { data: { title: string, desc: string, timeStart: string, timeEnd: string, dateStart: string, repeatEventTyper: string, repeatValue: number, linkMeet: string, user: string }, id: string }) => {
-   const response = await api.put(`/mobile/calendar/${id}`, data)
-   return response.data;
-};
-
-export const apiGetTask = async ({ user, status, search, division, page, year }: { user: string, status: string, search: string, division: string, page?: number, year?: string }) => {
-   const response = await api.get(`mobile/task?user=${user}&status=${status}&division=${division}&search=${search}&page=${page}&year=${year}`);
-   return response.data;
-};
-
-export const apiGetTahunTask = async ({ user, division }: { user: string, division: string }) => {
-   const response = await api.get(`mobile/task/tahun?user=${user}&division=${division}`);
-   return response.data;
-};
-
-export const apiGetTaskOne = async ({ user, cat, id }: { user: string, cat: 'data' | 'progress' | 'task' | 'file' | 'member' | 'link', id: string }) => {
-   const response = await api.get(`mobile/task/${id}?user=${user}&cat=${cat}`);
-   return response.data;
-};
-
-export const apiUpdateStatusTaskDivision = async (data: { user: string, status: number, idProject: string }, id: string) => {
-   const response = await api.put(`mobile/task/detail/${id}`, data)
-   return response.data
-};
-
-export const apiGetTaskTugas = async ({ user, id, cat }: { user: string, id: string, cat?: string }) => {
-   const response = await api.get(`mobile/task/detail/${id}?user=${user}${cat ? `&cat=${cat}` : ""}`);
-   return response.data;
-};
-
-export const apiEditTaskTugas = async ({ data, id }: { data: { title: string, dateStart: string, user: string, dateEnd: string, dataDetail: any[] }, id: string }) => {
-   const response = await api.post(`/mobile/task/detail/${id}`, data)
-   return response.data;
-};
-
-export const apiDeleteTaskTugas = async (data: { user: string, idProject: string }, id: string) => {
-   const response = await api.delete(`mobile/task/detail/${id}`, { data })
-   return response.data
-};
-
-export const apiDeleteFileTask = async (data: { user: string }, id: string) => {
-   const response = await api.delete(`/mobile/task/file/${id}`, { data })
-   return response.data;
-};
-
-export const apiDeleteLinkTask = async (data: { user: string, idLink: string }, id: string) => {
-   const response = await api.delete(`/mobile/task/${id}/link`, { data })
-   return response.data;
-};
-
-export const apiDeleteTaskMember = async (data: { user: string, idUser: string }, id: string) => {
-   const response = await api.delete(`mobile/task/${id}/member`, { data })
-   return response.data
-};
-
-export const apiCreateTaskTugas = async ({ data, id }: { data: { title: string, dateStart: string, user: string, dateEnd: string, idDivision: string, dataDetail: any[] }, id: string }) => {
-   const response = await api.post(`/mobile/task/${id}`, data)
-   return response.data;
-};
-
-export const apiCheckFileTask = async ({ data, id }: { data: FormData, id: string }) => {
-   const response = await api.put(`/mobile/task/file/${id}`, data,
-      {
-         headers: {
-            'Content-Type': 'multipart/form-data',
-         },
-      }
-   )
-   return response.data;
-};
-
-export const apiAddFileTask = async ({ data, id }: { data: FormData, id: string }) => {
-   const response = await api.post(`/mobile/task/file/${id}`, data,
-      {
-         headers: {
-            'Content-Type': 'multipart/form-data',
-         },
-      }
-   )
-   return response.data;
-};
-
-export const apiGetTaskTugasApprovals = async ({ user, id }: { user: string, id: string }) => {
-   const response = await api.get(`/mobile/task/tugas/${id}/approval`, { params: { user } })
-   return response.data;
-};
-
-export const apiSubmitTaskTugas = async ({ user, id }: { user: string, id: string }) => {
-   const response = await api.post(`/mobile/task/tugas/${id}/approval`, { user })
-   return response.data;
-};
-
-export const apiApproveRejectTaskTugas = async ({ user, id, action, note }: { user: string, id: string, action: 'approve' | 'reject', note?: string }) => {
-   const response = await api.put(`/mobile/task/tugas/${id}/approval`, { user, action, note })
-   return response.data;
-};
-
-export const apiGetTugasTaskFile = async ({ user, id }: { user: string, id: string }) => {
-   const response = await api.get(`/mobile/task/tugas/file/${id}`, { params: { user } })
-   return response.data;
-};
-
-export const apiAddTugasTaskFile = async ({ data, id }: { data: FormData, id: string }) => {
-   const response = await api.post(`/mobile/task/tugas/file/${id}`, data, {
-      headers: { 'Content-Type': 'multipart/form-data' },
-   })
-   return response.data;
-};
-
-export const apiLinkTugasTaskFile = async ({ user, idFile, id }: { user: string, idFile: string, id: string }) => {
-   const response = await api.patch(`/mobile/task/tugas/file/${id}`, { user, idFile })
-   return response.data;
-};
-
-export const apiDeleteTugasTaskFile = async (data: { user: string }, id: string) => {
-   const response = await api.delete(`/mobile/task/tugas/file/${id}`, { data })
-   return response.data;
-};
-
-export const apiEditTask = async (data: { title: string, user: string }, id: string) => {
-   const response = await api.put(`/mobile/task/${id}`, data)
-   return response.data;
-};
-
-export const apiReportTask = async (data: { report: string, user: string }, id: string) => {
-   const response = await api.put(`/mobile/task/${id}/lainnya`, data)
-   return response.data;
-};
-
-export const apiCancelTask = async (data: { user: string, reason: string }, id: string) => {
-   const response = await api.delete(`mobile/task/${id}`, { data })
-   return response.data
-};
-
-export const apiAddMemberTask = async ({ data, id }: { data: { user: string, member: any[], idDivision: string }, id: string }) => {
-   const response = await api.post(`/mobile/task/${id}/member`, data)
-   return response.data;
-};
-
-export const apiCreateTask = async (data: FormData) => {
-   const response = await api.post(`/mobile/task`, data, {
-      headers: {
-         'Content-Type': 'multipart/form-data',
-      },
-   })
-   return response.data;
-};
-
-export const apiDeleteTask = async (data: { user: string }, id: string) => {
-   const response = await api.delete(`/mobile/task/${id}/lainnya`, { data })
-   return response.data;
-};
-
-export const apiAddLinkTask = async (data: { user: string, link: string, idDivision: string }, id: string) => {
-   const response = await api.post(`/mobile/task/${id}/link`, data)
-   return response.data;
-};
-
-export const apiGetDocument = async ({ user, path, division, category }: { user: string, path: string, division: string, category: 'all' | 'folder' }) => {
-   const response = await api.get(`mobile/document?user=${user}&path=${path}&division=${division}&category=${category}`);
-   return response.data;
-};
-
-export const apiGetDocumentInformasi = async ({ user, item, cat }: { user: string, item: string, cat: 'share' | 'lainnya' }) => {
-   const response = await api.get(`mobile/document/more?user=${user}&item=${item}&cat=${cat}`);
-   return response.data;
-};
-
-export const apiDocumentRename = async (data: { name: string, user: string, id: string, path: string, idDivision: string, extension: string }) => {
-   const response = await api.put(`/mobile/document`, data)
-   return response.data;
-};
-
-export const apiDocumentDelete = async (data: { user: string, data: any[] }) => {
-   const response = await api.delete(`/mobile/document`, { data })
-   return response.data
-};
-
-export const apiCreateFolderDocument = async ({ data }: { data: { name: string, path: string, idDivision: string, user: string } }) => {
-   const response = await api.post(`/mobile/document`, data)
-   return response.data;
-};
-
-export const apiUploadFileDocument = async ({ data }: { data: FormData }) => {
-   const response = await api.post(`/mobile/document/upload`, data,
-      {
-         headers: {
-            'Content-Type': 'multipart/form-data',
-         },
-      }
-   )
-   return response.data;
-};
-
-export const apiMoveDocument = async (data: { path: string, dataItem: any[], user: string }) => {
-   const response = await api.post(`/mobile/document/more`, data)
-   return response.data;
-};
-
-export const apiCopyDocument = async (data: { path: string, dataItem: any[], user: string, idDivision: string }) => {
-   const response = await api.put(`/mobile/document/more`, data)
-   return response.data;
-};
-
-
-export const apiShareDocument = async (data: { dataDivision: any[], dataItem: any[], user: string }) => {
-   const response = await api.delete(`/mobile/document/more`, { data })
-   return response.data;
-};
-
-export const apiRegisteredToken = async (data: { user: string, token: string, category?: string }) => {
-   const response = await api.post(`/mobile/auth-token`, data)
-   return response.data;
-};
-
-export const apiUnregisteredToken = async (data: { user: string, token: string, category?: string }) => {
-   const response = await api.put(`/mobile/auth-token`, data)
-   return response.data;
-};
-
-export const apiGetCheckToken = async (data: { user: string, token: string }) => {
-   const response = await api.post(`mobile/auth-token/check`, data);
-   return response.data;
-};
-
-export const apiGetNotification = async ({ user, page }: { user: string, page?: number }) => {
-   const response = await api.get(`mobile/home/notification?user=${user}&page=${page}`);
-   return response.data;
-};
-
-export const apiReadOneNotification = async (data: { user: string, id: string }) => {
-   const response = await api.put(`/mobile/home/notification`, data)
-   return response.data;
-};
-
-export const apiReadAllNotification = async (data: { user: string }) => {
-   const response = await api.post(`/mobile/home/notification`, data)
-   return response.data;
-};
-
-export const apiGetVersion = async () => {
-   const response = await api.get(`mobile/version`);
-   return response.data;
-};
+export * from './api/index';
--- a/lib/api/announcement.api.ts
+++ b/lib/api/announcement.api.ts
@@ -0,0 +1,30 @@
+import api from './client';
+
+export const apiGetAnnouncement = async ({ user, search, page }: { user: string, search: string, page?: number }) => {
+   const response = await api.get(`mobile/announcement?user=${user}&search=${search}&page=${page}`);
+   return response.data;
+};
+
+export const apiCreateAnnouncement = async (data: FormData) => {
+   const response = await api.post(`/mobile/announcement`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiGetAnnouncementOne = async ({ user, id }: { user: string, id: string }) => {
+   const response = await api.get(`mobile/announcement/${id}?user=${user}`);
+   return response.data;
+};
+
+export const apiEditAnnouncement = async (data: FormData, id: string) => {
+   const response = await api.put(`/mobile/announcement/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiDeleteAnnouncement = async (data: { user: string }, id: string) => {
+   const response = await api.delete(`mobile/announcement/${id}`, { data })
+   return response.data
+};
--- a/lib/api/auth.api.ts
+++ b/lib/api/auth.api.ts
@@ -0,0 +1,46 @@
+import Constants from 'expo-constants';
+import api from './client';
+
+export const apiCheckPhoneLogin = async (body: { phone: string }) => {
+   const response = await api.post('/auth/login', body)
+   return response.data;
+}
+
+export const apiSendOtp = async (body: { phone: string, otp: number }) => {
+   const message = "Desa+\nMasukkan kode ini " + body.otp + " pada aplikasi Desa+ anda. Jangan berikan pada siapapun."
+   const res = await fetch(
+      `${Constants.expoConfig?.extra?.URL_OTP}/api/wa/send-text`,
+      {
+         method: 'POST',
+         headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${Constants.expoConfig?.extra?.WA_SERVER_TOKEN}`,
+         },
+         body: JSON.stringify({
+            number: body.phone,
+            text: message
+         })
+      }
+   );
+   return res.status
+}
+
+export const apiRegisteredToken = async (data: { user: string, token: string, category?: string }) => {
+   const response = await api.post(`/mobile/auth-token`, data)
+   return response.data;
+};
+
+export const apiUnregisteredToken = async (data: { user: string, token: string, category?: string }) => {
+   const response = await api.put(`/mobile/auth-token`, data)
+   return response.data;
+};
+
+export const apiGetCheckToken = async (data: { user: string, token: string }) => {
+   const response = await api.post(`mobile/auth-token/check`, data);
+   return response.data;
+};
+
+export const apiGetVersion = async () => {
+   const response = await api.get(`mobile/version`);
+   return response.data;
+};
--- a/lib/api/banner.api.ts
+++ b/lib/api/banner.api.ts
@@ -0,0 +1,30 @@
+import api from './client';
+
+export const apiGetBanner = async ({ user }: { user: string }) => {
+   const response = await api.get(`mobile/banner?user=${user}`);
+   return response.data;
+};
+
+export const apiCreateBanner = async (data: FormData) => {
+   const response = await api.post('mobile/banner', data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiDeleteBanner = async (data: { user: string }, id: string) => {
+   const response = await api.delete(`mobile/banner/${id}`, { data })
+   return response.data;
+};
+
+export const apiGetBannerOne = async ({ user, id }: { user: string, id: string }) => {
+   const response = await api.get(`mobile/banner/${id}?user=${user}`);
+   return response.data;
+};
+
+export const apiEditBanner = async (data: FormData, id: string) => {
+   const response = await api.put(`mobile/banner/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
--- a/lib/api/calendar.api.ts
+++ b/lib/api/calendar.api.ts
@@ -0,0 +1,56 @@
+import api from './client';
+
+export const apiGetCalendarByDateDivision = async ({ user, date, division }: { user: string, date: string, division: string }) => {
+   const response = await api.get(`mobile/calendar?user=${user}&date=${date}&division=${division}`);
+   return response.data;
+};
+
+export const apiGetIndicatorCalendar = async ({ user, date, division }: { user: string, date: string, division: string }) => {
+   const response = await api.get(`mobile/calendar/indicator?user=${user}&date=${date}&division=${division}`);
+   return response.data;
+};
+
+export const apiGetCalendarOne = async ({ user, id, cat }: { user: string, id: string, cat: 'data' | 'member' }) => {
+   const response = await api.get(`mobile/calendar/${id}?user=${user}&cat=${cat}`);
+   return response.data;
+};
+
+export const apiGetCalendarHistory = async ({ user, search, division, page }: { user: string, search: string, division: string, page?: number }) => {
+   const response = await api.get(`mobile/calendar/history?user=${user}&search=${search}&division=${division}&page=${page}`);
+   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;
+};
+
+export const apiUpdateCalendar = async ({ data, id }: { data: { title: string, desc: string, timeStart: string, timeEnd: string, dateStart: string, repeatEventTyper: string, repeatValue: number, linkMeet: string, user: string }, id: string }) => {
+   const response = await api.put(`/mobile/calendar/${id}`, data)
+   return response.data;
+};
+
+export const apiDeleteCalendar = async (data: { user: string }, id: string) => {
+   const response = await api.delete(`/mobile/calendar/${id}`, { data })
+   return response.data
+};
+
+export const apiAddMemberCalendar = async ({ data, id }: { data: { user: string, member: any[] }, id: string }) => {
+   const response = await api.post(`/mobile/calendar/${id}/member`, data)
+   return response.data;
+};
+
+export const apiDeleteCalendarMember = async (data: { user: string, idUser: string }, id: string) => {
+   const response = await api.delete(`/mobile/calendar/${id}/member`, { data })
+   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;
+};
--- a/lib/api/client.ts
+++ b/lib/api/client.ts
@@ -0,0 +1,20 @@
+import axios, { AxiosError } from 'axios';
+import Constants from 'expo-constants';
+import { logError } from '@/lib/errorLogger';
+
+const api = axios.create({
+   baseURL: Constants?.expoConfig?.extra?.URL_API
+});
+
+api.interceptors.response.use(
+   (response) => response,
+   (error: AxiosError) => {
+      const status = error.response?.status;
+      const url = error.config?.url ?? 'unknown endpoint';
+      const description = `API error ${status ?? 'network'} on ${url}`;
+      logError(description, error);
+      return Promise.reject(error);
+   }
+);
+
+export default api;
--- a/lib/api/discussion.api.ts
+++ b/lib/api/discussion.api.ts
@@ -0,0 +1,109 @@
+import api from './client';
+
+export const apiGetDiscussionGeneral = async ({ user, active, search, group, page }: { user: string, active: string, search: string, group?: string, page?: number }) => {
+   const response = await api.get(`mobile/discussion-general?user=${user}&active=${active}&group=${group}&search=${search}&page=${page}`);
+   return response.data;
+};
+
+export const apiGetDiscussionGeneralOne = async ({ id, user, cat }: { id: string, user: string, cat: string }) => {
+   const response = await api.get(`mobile/discussion-general/${id}?user=${user}&cat=${cat}`);
+   return response.data;
+};
+
+export const apiCreateDiscussionGeneral = async (data: FormData) => {
+   const response = await api.post(`/mobile/discussion-general`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiEditDiscussionGeneral = async (data: FormData, id: string) => {
+   const response = await api.put(`/mobile/discussion-general/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiDeleteDiscussionGeneral = async (data: { user: string, active: boolean }, id: string) => {
+   const response = await api.delete(`mobile/discussion-general/${id}`, { data });
+   return response.data;
+};
+
+export const apiUpdateStatusDiscussionGeneral = async ({ id, data }: { id: string, data: { status: number, user: string } }) => {
+   const response = await api.post(`/mobile/discussion-general/${id}`, data)
+   return response.data;
+};
+
+export const apiSendDiscussionGeneralCommentar = async ({ id, data }: { id: string, data: { desc: string, user: string } }) => {
+   const response = await api.post(`/mobile/discussion-general/${id}/comment`, data)
+   return response.data;
+};
+
+export const apiUpdateDiscussionGeneralCommentar = async ({ id, data }: { id: string, data: { desc: string, user: string } }) => {
+   const response = await api.put(`/mobile/discussion-general/${id}/comment`, data)
+   return response.data;
+};
+
+export const apiDeleteDiscussionGeneralCommentar = async ({ id, data }: { id: string, data: { user: string } }) => {
+   const response = await api.delete(`/mobile/discussion-general/${id}/comment`, { data })
+   return response.data;
+};
+
+export const apiAddMemberDiscussionGeneral = async ({ data, id }: { data: { user: string, member: any[] }, id: string }) => {
+   const response = await api.post(`/mobile/discussion-general/${id}/member`, data)
+   return response.data;
+};
+
+export const apiDeleteMemberDiscussionGeneral = async (data: { user: string, idUser: string }, id: string) => {
+   const response = await api.delete(`mobile/discussion-general/${id}/member`, { data });
+   return response.data;
+};
+
+export const apiGetDiscussion = async ({ user, search, division, active, page }: { user: string, search: string, division: string, active?: string, page?: number }) => {
+   const response = await api.get(`mobile/discussion?user=${user}&active=${active}&search=${search}&division=${division}&page=${page}`);
+   return response.data;
+};
+
+export const apiGetDiscussionOne = async ({ id, user, cat }: { id: string, user: string, cat: 'data' | 'comment' | 'file' }) => {
+   const response = await api.get(`mobile/discussion/${id}?user=${user}&cat=${cat}`);
+   return response.data;
+};
+
+export const apiCreateDiscussion = async (data: FormData) => {
+   const response = await api.post(`/mobile/discussion`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiEditDiscussion = async (data: FormData, id: string) => {
+   const response = await api.post(`/mobile/discussion/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiArchiveDiscussion = async (data: { user: string, active: boolean }, id: string) => {
+   const response = await api.put(`mobile/discussion/${id}`, data)
+   return response.data
+};
+
+export const apiOpenCloseDiscussion = async (data: { user: string, status: number }, id: string) => {
+   const response = await api.delete(`mobile/discussion/${id}`, { data })
+   return response.data
+};
+
+export const apiSendDiscussionCommentar = async ({ data, id }: { data: { user: string, comment: string }, id: string }) => {
+   const response = await api.post(`/mobile/discussion/${id}/comment`, data)
+   return response.data;
+};
+
+export const apiEditDiscussionCommentar = async ({ data, id }: { data: { user: string, comment: string }, id: string }) => {
+   const response = await api.put(`/mobile/discussion/${id}/comment`, data)
+   return response.data;
+};
+
+export const apiDeleteDiscussionCommentar = async ({ data, id }: { data: { user: string }, id: string }) => {
+   const response = await api.delete(`/mobile/discussion/${id}/comment`, { data })
+   return response.data;
+};
--- a/lib/api/division.api.ts
+++ b/lib/api/division.api.ts
@@ -0,0 +1,66 @@
+import api from './client';
+
+export const apiGetDivision = async ({ user, search, group, kategori, active, page }: { user: string, search: string, group?: string, kategori?: string, active?: string, page?: number }) => {
+   const response = await api.get(`mobile/division?user=${user}&active=${active}&group=${group}&search=${search}&cat=${kategori}&page=${page}`);
+   return response.data;
+};
+
+export const apiGetDivisionReport = async ({ user, cat, date, dateEnd, division, group }: { user: string, cat: 'table-progress' | 'lainnya', date: string, dateEnd: string, division: string, group?: string }) => {
+   const response = await api.get(`mobile/division/report?user=${user}&cat=${cat}&date=${date}&date-end=${dateEnd}&division=${division}&group=${group}`);
+   return response.data;
+};
+
+export const apiGetDivisionOneFeature = async ({ user, cat, id }: { user: string, cat: 'jumlah' | 'today-task' | 'new-file' | 'new-discussion' | 'check-member' | 'check-admin', id: string }) => {
+   const response = await api.get(`mobile/division/${id}/detail?user=${user}&cat=${cat}`);
+   return response.data;
+};
+
+export const apiGetDivisionOneDetail = async ({ user, id }: { user: string, id: string }) => {
+   const response = await api.get(`mobile/division/${id}?user=${user}`);
+   return response.data;
+};
+
+export const apiCreateDivision = async (data: { data: { idGroup: string, name: string, desc: string }, member: [], admin: string[], user: string }) => {
+   const response = await api.post(`/mobile/division`, data)
+   return response.data;
+};
+
+export const apiCheckDivisionName = async (data: { data: { idGroup: string, name: string, desc: string }, user: string }) => {
+   const response = await api.put(`/mobile/division`, data)
+   return response.data;
+};
+
+export const apiEditDivision = async (data: { user: string, name: string, desc: string }, id: string) => {
+   const response = await api.put(`mobile/division/${id}`, data)
+   return response.data
+};
+
+export const apiUpdateStatusDivision = async ({ data, id }: { data: { user: string, isActive: boolean }, id: string }) => {
+   const response = await api.post(`/mobile/division/${id}/status`, data)
+   return response.data;
+};
+
+export const apiGetDivisionMember = async ({ user, id, search }: { user: string, id: string, search: string }) => {
+   const response = await api.get(`mobile/division/${id}/member?user=${user}&search=${search}`);
+   return response.data;
+};
+
+export const apiGetListDivisionByIdDivision = async ({ user, search, division }: { user: string, search: string, division: string }) => {
+   const response = await api.get(`mobile/division/more?user=${user}&search=${search}&division=${division}`);
+   return response.data;
+};
+
+export const apiUpdateStatusAdminDivision = async (data: { user: string, id: string, isAdmin: boolean }, id: string) => {
+   const response = await api.put(`mobile/division/${id}/detail`, data)
+   return response.data
+};
+
+export const apiDeleteMemberDivision = async (data: { user: string, id: string }, id: string) => {
+   const response = await api.delete(`/mobile/division/${id}/detail`, { data })
+   return response.data;
+};
+
+export const apiAddMemberDivision = async ({ data, id }: { data: { user: string, member: any[] }, id: string }) => {
+   const response = await api.post(`/mobile/division/${id}/detail`, data)
+   return response.data;
+};
--- a/lib/api/document.api.ts
+++ b/lib/api/document.api.ts
@@ -0,0 +1,48 @@
+import api from './client';
+
+export const apiGetDocument = async ({ user, path, division, category }: { user: string, path: string, division: string, category: 'all' | 'folder' }) => {
+   const response = await api.get(`mobile/document?user=${user}&path=${path}&division=${division}&category=${category}`);
+   return response.data;
+};
+
+export const apiGetDocumentInformasi = async ({ user, item, cat }: { user: string, item: string, cat: 'share' | 'lainnya' }) => {
+   const response = await api.get(`mobile/document/more?user=${user}&item=${item}&cat=${cat}`);
+   return response.data;
+};
+
+export const apiDocumentRename = async (data: { name: string, user: string, id: string, path: string, idDivision: string, extension: string }) => {
+   const response = await api.put(`/mobile/document`, data)
+   return response.data;
+};
+
+export const apiDocumentDelete = async (data: { user: string, data: any[] }) => {
+   const response = await api.delete(`/mobile/document`, { data })
+   return response.data
+};
+
+export const apiCreateFolderDocument = async ({ data }: { data: { name: string, path: string, idDivision: string, user: string } }) => {
+   const response = await api.post(`/mobile/document`, data)
+   return response.data;
+};
+
+export const apiUploadFileDocument = async ({ data }: { data: FormData }) => {
+   const response = await api.post(`/mobile/document/upload`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiMoveDocument = async (data: { path: string, dataItem: any[], user: string }) => {
+   const response = await api.post(`/mobile/document/more`, data)
+   return response.data;
+};
+
+export const apiCopyDocument = async (data: { path: string, dataItem: any[], user: string, idDivision: string }) => {
+   const response = await api.put(`/mobile/document/more`, data)
+   return response.data;
+};
+
+export const apiShareDocument = async (data: { dataDivision: any[], dataItem: any[], user: string }) => {
+   const response = await api.delete(`/mobile/document/more`, { data })
+   return response.data;
+};
--- a/lib/api/group.api.ts
+++ b/lib/api/group.api.ts
@@ -0,0 +1,46 @@
+import api from './client';
+
+export const apiGetGroup = async ({ user, active, search }: { user: string, active: string, search: string }) => {
+   const response = await api.get(`mobile/group?user=${user}&active=${active}&search=${search}`);
+   return response.data;
+};
+
+export const apiCreateGroup = async (data: { user: string, name: string }) => {
+   const response = await api.post('mobile/group', data);
+   return response.data;
+};
+
+export const apiEditGroup = async (data: { user: string, name: string }, id: string) => {
+   const response = await api.put(`mobile/group/${id}`, data);
+   return response.data;
+};
+
+export const apiDeleteGroup = async (data: { user: string, isActive: boolean }, id: string) => {
+   const response = await api.delete(`mobile/group/${id}`, { data });
+   return response.data;
+};
+
+export const apiGetDivisionGroup = async ({ user }: { user: string }) => {
+   const response = await api.get(`mobile/group/get-division?user=${user}`);
+   return response.data;
+};
+
+export const apiGetPosition = async ({ user, active, search, group }: { user: string, active: string, search: string, group?: string }) => {
+   const response = await api.get(`mobile/position?user=${user}&active=${active}&group=${group}&search=${search}`);
+   return response.data;
+};
+
+export const apiCreatePosition = async (data: { user: string, name: string, idGroup: string }) => {
+   const response = await api.post('mobile/position', data);
+   return response.data;
+};
+
+export const apiDeletePosition = async (data: { user: string, isActive: boolean }, id: string) => {
+   const response = await api.delete(`mobile/position/${id}`, { data });
+   return response.data;
+};
+
+export const apiEditPosition = async (data: { user: string, name: string, idGroup: string }, id: string) => {
+   const response = await api.put(`mobile/position/${id}`, data)
+   return response.data
+};
--- a/lib/api/home.api.ts
+++ b/lib/api/home.api.ts
@@ -0,0 +1,26 @@
+import api from './client';
+
+export const apiGetDataHome = async ({ cat, user }: { cat: 'kegiatan' | 'division' | 'progress' | 'dokumen' | 'event' | 'discussion' | 'header' | 'check-late-project', user: string }) => {
+   const response = await api.get(`mobile/home?user=${user}&cat=${cat}`);
+   return response.data;
+};
+
+export const apiGetSearch = async ({ text, user }: { text: string, user: string }) => {
+   const response = await api.get(`mobile/home/search?search=${text}&user=${user}`);
+   return response.data;
+};
+
+export const apiGetNotification = async ({ user, page }: { user: string, page?: number }) => {
+   const response = await api.get(`mobile/home/notification?user=${user}&page=${page}`);
+   return response.data;
+};
+
+export const apiReadOneNotification = async (data: { user: string, id: string }) => {
+   const response = await api.put(`/mobile/home/notification`, data)
+   return response.data;
+};
+
+export const apiReadAllNotification = async (data: { user: string }) => {
+   const response = await api.post(`/mobile/home/notification`, data)
+   return response.data;
+};
--- a/lib/api/index.ts
+++ b/lib/api/index.ts
@@ -0,0 +1,12 @@
+export * from './auth.api';
+export * from './user.api';
+export * from './group.api';
+export * from './banner.api';
+export * from './home.api';
+export * from './announcement.api';
+export * from './project.api';
+export * from './division.api';
+export * from './discussion.api';
+export * from './calendar.api';
+export * from './task.api';
+export * from './document.api';
--- a/lib/api/project.api.ts
+++ b/lib/api/project.api.ts
@@ -0,0 +1,144 @@
+import api from './client';
+
+export const apiGetTahunProject = async ({ user }: { user: string }) => {
+   const response = await api.get(`mobile/project/tahun?user=${user}`);
+   return response.data;
+};
+
+export const apiGetProject = async ({ user, status, search, group, kategori, page, year }: { user: string, status: string, search: string, group?: string, kategori?: string, page?: number, year?: string }) => {
+   const response = await api.get(`mobile/project?user=${user}&status=${status}&group=${group}&search=${search}&cat=${kategori}&page=${page}&year=${year}`);
+   return response.data;
+};
+
+export const apiGetProjectOne = async ({ user, cat, id }: { user: string, cat: 'data' | 'progress' | 'task' | 'file' | 'member' | 'link', id: string }) => {
+   const response = await api.get(`mobile/project/${id}?user=${user}&cat=${cat}`);
+   return response.data;
+};
+
+export const apiCreateProject = async (data: FormData) => {
+   const response = await api.post(`/mobile/project`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiEditProject = async (data: { name: string, user: string }, id: string) => {
+   const response = await api.put(`/mobile/project/${id}`, data)
+   return response.data;
+};
+
+export const apiReportProject = async (data: { report: string, user: string }, id: string) => {
+   const response = await api.put(`/mobile/project/${id}/lainnya`, data)
+   return response.data;
+};
+
+export const apiCancelProject = async (data: { user: string, reason: string }, id: string) => {
+   const response = await api.delete(`mobile/project/${id}`, { data })
+   return response.data
+};
+
+export const apiDeleteProject = async (data: { user: string }, id: string) => {
+   const response = await api.delete(`/mobile/project/${id}/lainnya`, { data })
+   return response.data;
+};
+
+export const apiAddMemberProject = async ({ data, id }: { data: { user: string, member: any[] }, id: string }) => {
+   const response = await api.post(`/mobile/project/${id}/member`, data)
+   return response.data;
+};
+
+export const apiDeleteProjectMember = async (data: { user: string, idUser: string }, id: string) => {
+   const response = await api.delete(`mobile/project/${id}/member`, { data })
+   return response.data
+};
+
+export const apiAddLinkProject = async (data: { user: string, link: string }, id: string) => {
+   const response = await api.post(`/mobile/project/${id}/link`, data)
+   return response.data;
+};
+
+export const apiDeleteLinkProject = async (data: { idLink: string, user: string }, id: string) => {
+   const response = await api.delete(`/mobile/project/${id}/link`, { data })
+   return response.data;
+};
+
+export const apiAddFileProject = async ({ data, id }: { data: FormData, id: string }) => {
+   const response = await api.post(`/mobile/project/file/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiCheckFileProject = async ({ data, id }: { data: FormData, id: string }) => {
+   const response = await api.put(`/mobile/project/file/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiDeleteFileProject = async (data: { user: string }, id: string) => {
+   const response = await api.delete(`/mobile/project/file/${id}`, { data })
+   return response.data;
+};
+
+export const apiCreateProjectTask = async ({ data, id }: { data: { name: string, dateStart: string, user: string, dateEnd: string, dataDetail: any[] }, id: string }) => {
+   const response = await api.post(`/mobile/project/${id}`, data)
+   return response.data;
+};
+
+export const apiUpdateStatusProjectTask = async (data: { user: string, status: number, idProject: string }, id: string) => {
+   const response = await api.put(`mobile/project/detail/${id}`, data)
+   return response.data
+};
+
+export const apiDeleteProjectTask = async (data: { user: string, idProject: string }, id: string) => {
+   const response = await api.delete(`mobile/project/detail/${id}`, { data })
+   return response.data
+};
+
+export const apiGetProjectTask = async ({ user, id, cat }: { user: string, id: string, cat?: string }) => {
+   const response = await api.get(`mobile/project/detail/${id}?user=${user}${cat ? `&cat=${cat}` : ""}`);
+   return response.data;
+};
+
+export const apiEditProjectTask = async ({ data, id }: { data: { title: string, dateStart: string, user: string, dateEnd: string, dataDetail: any[] }, id: string }) => {
+   const response = await api.post(`/mobile/project/detail/${id}`, data)
+   return response.data;
+};
+
+export const apiGetProjectTaskFile = async ({ user, id }: { user: string, id: string }) => {
+   const response = await api.get(`/mobile/project/task/file/${id}`, { params: { user } })
+   return response.data;
+};
+
+export const apiAddProjectTaskFile = async ({ data, id }: { data: FormData, id: string }) => {
+   const response = await api.post(`/mobile/project/task/file/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiLinkProjectTaskFile = async ({ user, idFile, id }: { user: string, idFile: string, id: string }) => {
+   const response = await api.patch(`/mobile/project/task/file/${id}`, { user, idFile })
+   return response.data;
+};
+
+export const apiDeleteProjectTaskFile = async (data: { user: string }, id: string) => {
+   const response = await api.delete(`/mobile/project/task/file/${id}`, { data })
+   return response.data;
+};
+
+export const apiGetProjectTaskApprovals = async ({ user, id }: { user: string, id: string }) => {
+   const response = await api.get(`/mobile/project/task/${id}/approval`, { params: { user } })
+   return response.data;
+};
+
+export const apiSubmitProjectTask = async ({ user, id }: { user: string, id: string }) => {
+   const response = await api.post(`/mobile/project/task/${id}/approval`, { user })
+   return response.data;
+};
+
+export const apiApproveRejectProjectTask = async ({ user, id, action, note }: { user: string, id: string, action: 'approve' | 'reject', note?: string }) => {
+   const response = await api.put(`/mobile/project/task/${id}/approval`, { user, action, note })
+   return response.data;
+};
--- a/lib/api/task.api.ts
+++ b/lib/api/task.api.ts
@@ -0,0 +1,144 @@
+import api from './client';
+
+export const apiGetTask = async ({ user, status, search, division, page, year }: { user: string, status: string, search: string, division: string, page?: number, year?: string }) => {
+   const response = await api.get(`mobile/task?user=${user}&status=${status}&division=${division}&search=${search}&page=${page}&year=${year}`);
+   return response.data;
+};
+
+export const apiGetTahunTask = async ({ user, division }: { user: string, division: string }) => {
+   const response = await api.get(`mobile/task/tahun?user=${user}&division=${division}`);
+   return response.data;
+};
+
+export const apiGetTaskOne = async ({ user, cat, id }: { user: string, cat: 'data' | 'progress' | 'task' | 'file' | 'member' | 'link', id: string }) => {
+   const response = await api.get(`mobile/task/${id}?user=${user}&cat=${cat}`);
+   return response.data;
+};
+
+export const apiCreateTask = async (data: FormData) => {
+   const response = await api.post(`/mobile/task`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiEditTask = async (data: { title: string, user: string }, id: string) => {
+   const response = await api.put(`/mobile/task/${id}`, data)
+   return response.data;
+};
+
+export const apiReportTask = async (data: { report: string, user: string }, id: string) => {
+   const response = await api.put(`/mobile/task/${id}/lainnya`, data)
+   return response.data;
+};
+
+export const apiCancelTask = async (data: { user: string, reason: string }, id: string) => {
+   const response = await api.delete(`mobile/task/${id}`, { data })
+   return response.data
+};
+
+export const apiDeleteTask = async (data: { user: string }, id: string) => {
+   const response = await api.delete(`/mobile/task/${id}/lainnya`, { data })
+   return response.data;
+};
+
+export const apiAddMemberTask = async ({ data, id }: { data: { user: string, member: any[], idDivision: string }, id: string }) => {
+   const response = await api.post(`/mobile/task/${id}/member`, data)
+   return response.data;
+};
+
+export const apiDeleteTaskMember = async (data: { user: string, idUser: string }, id: string) => {
+   const response = await api.delete(`mobile/task/${id}/member`, { data })
+   return response.data
+};
+
+export const apiAddLinkTask = async (data: { user: string, link: string, idDivision: string }, id: string) => {
+   const response = await api.post(`/mobile/task/${id}/link`, data)
+   return response.data;
+};
+
+export const apiDeleteLinkTask = async (data: { user: string, idLink: string }, id: string) => {
+   const response = await api.delete(`/mobile/task/${id}/link`, { data })
+   return response.data;
+};
+
+export const apiAddFileTask = async ({ data, id }: { data: FormData, id: string }) => {
+   const response = await api.post(`/mobile/task/file/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiCheckFileTask = async ({ data, id }: { data: FormData, id: string }) => {
+   const response = await api.put(`/mobile/task/file/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiDeleteFileTask = async (data: { user: string }, id: string) => {
+   const response = await api.delete(`/mobile/task/file/${id}`, { data })
+   return response.data;
+};
+
+export const apiUpdateStatusTaskDivision = async (data: { user: string, status: number, idProject: string }, id: string) => {
+   const response = await api.put(`mobile/task/detail/${id}`, data)
+   return response.data
+};
+
+export const apiGetTaskTugas = async ({ user, id, cat }: { user: string, id: string, cat?: string }) => {
+   const response = await api.get(`mobile/task/detail/${id}?user=${user}${cat ? `&cat=${cat}` : ""}`);
+   return response.data;
+};
+
+export const apiCreateTaskTugas = async ({ data, id }: { data: { title: string, dateStart: string, user: string, dateEnd: string, idDivision: string, dataDetail: any[] }, id: string }) => {
+   const response = await api.post(`/mobile/task/${id}`, data)
+   return response.data;
+};
+
+export const apiEditTaskTugas = async ({ data, id }: { data: { title: string, dateStart: string, user: string, dateEnd: string, dataDetail: any[] }, id: string }) => {
+   const response = await api.post(`/mobile/task/detail/${id}`, data)
+   return response.data;
+};
+
+export const apiDeleteTaskTugas = async (data: { user: string, idProject: string }, id: string) => {
+   const response = await api.delete(`mobile/task/detail/${id}`, { data })
+   return response.data
+};
+
+export const apiGetTugasTaskFile = async ({ user, id }: { user: string, id: string }) => {
+   const response = await api.get(`/mobile/task/tugas/file/${id}`, { params: { user } })
+   return response.data;
+};
+
+export const apiAddTugasTaskFile = async ({ data, id }: { data: FormData, id: string }) => {
+   const response = await api.post(`/mobile/task/tugas/file/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiLinkTugasTaskFile = async ({ user, idFile, id }: { user: string, idFile: string, id: string }) => {
+   const response = await api.patch(`/mobile/task/tugas/file/${id}`, { user, idFile })
+   return response.data;
+};
+
+export const apiDeleteTugasTaskFile = async (data: { user: string }, id: string) => {
+   const response = await api.delete(`/mobile/task/tugas/file/${id}`, { data })
+   return response.data;
+};
+
+export const apiGetTaskTugasApprovals = async ({ user, id }: { user: string, id: string }) => {
+   const response = await api.get(`/mobile/task/tugas/${id}/approval`, { params: { user } })
+   return response.data;
+};
+
+export const apiSubmitTaskTugas = async ({ user, id }: { user: string, id: string }) => {
+   const response = await api.post(`/mobile/task/tugas/${id}/approval`, { user })
+   return response.data;
+};
+
+export const apiApproveRejectTaskTugas = async ({ user, id, action, note }: { user: string, id: string, action: 'approve' | 'reject', note?: string }) => {
+   const response = await api.put(`/mobile/task/tugas/${id}/approval`, { user, action, note })
+   return response.data;
+};
--- a/lib/api/user.api.ts
+++ b/lib/api/user.api.ts
@@ -0,0 +1,42 @@
+import api from './client';
+
+export const apiGetProfile = async ({ id }: { id: string }) => {
+   const response = await api.get(`mobile/user/${id}`);
+   return response.data;
+};
+
+export const apiEditProfile = async (data: FormData) => {
+   const response = await api.put(`/mobile/user/profile`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiGetUser = async ({ user, active, search, group, page }: { user: string, active: string, search: string, group?: string, page?: number }) => {
+   const response = await api.get(`mobile/user?user=${user}&active=${active}&group=${group}&search=${search}&page=${page}`);
+   return response.data;
+};
+
+export const apiCreateUser = async ({ data }: { data: FormData }) => {
+   const response = await api.post('/mobile/user', data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiDeleteUser = async (data: { user: string, isActive: boolean }, id: string) => {
+   const response = await api.delete(`mobile/user/${id}`, { data })
+   return response.data
+};
+
+export const apiToggleApprover = async (data: { user: string, isApprover: boolean }, id: string) => {
+   const response = await api.patch(`mobile/user/${id}`, data)
+   return response.data
+};
+
+export const apiEditUser = async (data: FormData, id: string) => {
+   const response = await api.put(`/mobile/user/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-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",
Author	SHA1	Message	Date
amaliadwiy	d299484a98	refactor: pecah lib/api.ts dan constants/Styles.ts per domain - lib/api.ts (879 baris) → 13 file di lib/api/ per domain - constants/Styles.ts (1.275 baris) → 10 file di constants/styles/ per domain - tambah docs/FILE-HEALTH.md dan referensinya ke CLAUDE.md - kedua file lama tetap sebagai re-export — zero breaking changes	2026-05-12 10:34:31 +08:00
amaliadwiy	003d92e4e3	Merge pull request 'amalia/11-mei-26' (#47 ) from amalia/11-mei-26 into join Reviewed-on: #47	2026-05-11 17:34:52 +08:00
amaliadwiy	18f548ed5c	chore: update Podfile.lock	2026-05-11 17:18:47 +08:00
amaliadwiy	906a619593	revert: kembalikan penyimpanan token ke AsyncStorage	2026-05-11 17:15:52 +08:00
amaliadwiy	af2048b4cd	fix: ganti penyimpanan token dari AsyncStorage ke SecureStore Token autentikasi kini disimpan di Keychain (iOS) / Keystore (Android) sehingga otomatis terhapus saat uninstall dan tidak bisa dipulihkan lewat Google Backup. @notification_permission tetap di AsyncStorage karena bukan data sensitif.	2026-05-11 17:11:05 +08:00
amaliadwiy	7341f378dd	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	2026-05-11 16:34:46 +08:00
amaliadwiy	84935e8188	feat: tambah fitur kalender umum village dengan indikator per jenis event - Tambah halaman /village-calendar dengan monthly grid dan agenda view - Tampilkan acara divisi (DivisionCalendarReminder) dan kegiatan (ProjectTask) se-village - Indikator dot dua warna pada kalender: ungu untuk acara divisi, biru-abu untuk kegiatan - Tambah endpoint apiGetVillageCalendarByDate dan apiGetVillageCalendarIndicator - Tambah menu Kalender di halaman /feature dengan grid layout flexWrap - Sesuaikan warna EventItem dengan TYPE_COLORS village-calendar - Pindahkan inline style ke Styles.ts sebagai class baru	2026-05-11 15:19:21 +08:00
amaliadwiy	74d8b8ef31	Merge pull request 'amalia/08-mei-26' (#46 ) from amalia/08-mei-26 into join Reviewed-on: #46	2026-05-11 10:17:25 +08:00