From fad89fc910d647aec16b5e1098e3b6aadd464199 Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Thu, 7 May 2026 16:16:21 +0800
Subject: [PATCH] feat: persist view mode (grid/list) across division, project,
 dan division/task

- Simpan preferensi tampilan ke AsyncStorage dengan key 'division_view_mode'
- Load preferensi saat halaman dibuka agar tidak reset
- Samakan style list item division/task dengan project (bg transparent, icon hitam)
- Sejajarkan toggle dengan input pencarian pada halaman division/task
---
 .../[id]/(fitur-division)/task/index.tsx      | 26 +++++++++++++------
 app/(application)/division/index.tsx          | 19 ++++++++++----
 app/(application)/project/index.tsx           | 19 ++++++++++----
 3 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/app/(application)/division/[id]/(fitur-division)/task/index.tsx b/app/(application)/division/[id]/(fitur-division)/task/index.tsx
index ada348b..b946d3b 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/index.tsx
@@ -21,6 +21,7 @@ import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { Pressable, RefreshControl, ScrollView, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 type Props = {
    id: string;
@@ -36,6 +37,18 @@ export default function ListTask() {
    const { id, status, year } = useLocalSearchParams<{ id: string; status: string; year: string }>()
    const [isList, setList] = useState(false)
    const { token, decryptToken } = useAuthSession()
+
+   useEffect(() => {
+      AsyncStorage.getItem('division_view_mode').then((val) => {
+         if (val !== null) setList(val === 'list')
+      })
+   }, [])
+
+   function toggleView() {
+      const next = !isList
+      setList(next)
+      AsyncStorage.setItem('division_view_mode', next ? 'list' : 'grid')
+   }
    const [data, setData] = useState<Props[]>([])
    const [search, setSearch] = useState("")
    const update = useSelector((state: any) => state.taskUpdate)
@@ -172,13 +185,9 @@ export default function ListTask() {
                   n={4}
                />
             </ScrollView>
-            <View style={[Styles.rowSpaceBetween]}>
+            <View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>
                <InputSearch width={68} onChange={setSearch} />
-               <Pressable
-                  onPress={() => {
-                     setList(!isList);
-                  }}
-               >
+               <Pressable onPress={toggleView}>
                   <MaterialCommunityIcons
                      name={isList ? "format-list-bulleted" : "view-grid"}
                      color={colors.text}
@@ -219,9 +228,10 @@ export default function ListTask() {
                                        router.push(`./task/${item.id}`);
                                     }}
                                     borderType="bottom"
+                                    bgColor="transparent"
                                     icon={
-                                       <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                          <AntDesign name="areachart" size={25} color={"#384288"} />
+                                       <View style={[Styles.iconContent]}>
+                                          <AntDesign name="areachart" size={25} color={"black"} />
                                        </View>
                                     }
                                     title={item.title}
diff --git a/app/(application)/division/index.tsx b/app/(application)/division/index.tsx
index 40bbc82..05a6afd 100644
--- a/app/(application)/division/index.tsx
+++ b/app/(application)/division/index.tsx
@@ -17,6 +17,7 @@ import {
    Ionicons,
    MaterialCommunityIcons
 } from "@expo/vector-icons";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useMemo, useState } from "react";
@@ -37,6 +38,18 @@ export default function ListDivision() {
       cat?: string;
    }>();
    const [isList, setList] = useState(false);
+
+   useEffect(() => {
+      AsyncStorage.getItem('division_view_mode').then((val) => {
+         if (val !== null) setList(val === 'list')
+      })
+   }, [])
+
+   function toggleView() {
+      const next = !isList
+      setList(next)
+      AsyncStorage.setItem('division_view_mode', next ? 'list' : 'grid')
+   }
    const entityUser = useSelector((state: any) => state.user)
    const { token, decryptToken } = useAuthSession()
    const { colors } = useTheme();
@@ -184,11 +197,7 @@ export default function ListDivision() {
 
             <View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>
                <InputSearch width={68} onChange={setSearch} />
-               <Pressable
-                  onPress={() => {
-                     setList(!isList);
-                  }}
-               >
+               <Pressable onPress={toggleView}>
                   <MaterialCommunityIcons
                      name={isList ? "format-list-bulleted" : "view-grid"}
                      color={colors.text}
diff --git a/app/(application)/project/index.tsx b/app/(application)/project/index.tsx
index f283d04..23b44f8 100644
--- a/app/(application)/project/index.tsx
+++ b/app/(application)/project/index.tsx
@@ -23,6 +23,7 @@ import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useMemo, useState } from "react";
 import { Pressable, RefreshControl, ScrollView, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 type Props = {
    id: string;
@@ -50,6 +51,18 @@ export default function ListProject() {
    const [search, setSearch] = useState("")
    const [isList, setList] = useState(false)
    const update = useSelector((state: any) => state.projectUpdate)
+
+   useEffect(() => {
+      AsyncStorage.getItem('division_view_mode').then((val) => {
+         if (val !== null) setList(val === 'list')
+      })
+   }, [])
+
+   function toggleView() {
+      const next = !isList
+      setList(next)
+      AsyncStorage.setItem('division_view_mode', next ? 'list' : 'grid')
+   }
    const queryClient = useQueryClient()
    const [refreshing, setRefreshing] = useState(false)
 
@@ -188,11 +201,7 @@ export default function ListProject() {
 
             <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter]}>
                <InputSearch width={68} onChange={setSearch} />
-               <Pressable
-                  onPress={() => {
-                     setList(!isList);
-                  }}
-               >
+               <Pressable onPress={toggleView}>
                   <MaterialCommunityIcons
                      name={isList ? "format-list-bulleted" : "view-grid"}
                      color={colors.text}