upd: redesign aplikasi

Deskripsi:
- update home, profile dll
- blm selesai

NO Issues

components/home/carouselHome2.tsx

@@ -0,0 +1,143 @@
+import { ConstEnv } from "@/constants/ConstEnv";
+import Styles from "@/constants/Styles";
+import { apiGetBanner, apiGetProfile } from "@/lib/api";
+import { setEntities } from "@/lib/bannerSlice";
+import { setEntityUser } from "@/lib/userSlice";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
+import { AntDesign, Feather, FontAwesome5, Ionicons, MaterialCommunityIcons, MaterialIcons, } from "@expo/vector-icons";
+import { router } from "expo-router";
+import React, { useEffect } from "react";
+import { Dimensions, Image, View } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
+import { useDispatch, useSelector } from "react-redux";
+import { ButtonFiturMenu } from "../buttonFiturMenu";
+import Text from "../Text";
+
+export default function CaraouselHome2({ refreshing }: { refreshing: boolean }) {
+   const { decryptToken, token } = useAuthSession()
+   const { colors } = useTheme();
+   const ref = React.useRef<ICarouselInstance>(null);
+   const width = Dimensions.get("window").width;
+   const progress = useSharedValue<number>(0);
+   const dispatch = useDispatch()
+   const entities = useSelector((state: any) => state.banner)
+   const entityUser = useSelector((state: any) => state.user)
+
+   async function handleBannerView() {
+      const hasil = await decryptToken(String(token?.current))
+      apiGetBanner({ user: hasil }).then((data) => {
+         if (data.data.length > 0) {
+            dispatch(setEntities(data.data))
+         } else {
+            dispatch(setEntities([]))
+         }
+      })
+   }
+
+   async function handleUser() {
+      const hasil = await decryptToken(String(token?.current))
+      const response = await apiGetProfile({ id: hasil })
+      dispatch(setEntityUser({ role: response.data.idUserRole, admin: false }))
+   }
+
+   useEffect(() => {
+      if (refreshing)
+         handleBannerView()
+   }, [refreshing]);
+
+   useEffect(() => {
+      handleBannerView()
+   }, [dispatch]);
+
+   useEffect(() => {
+      handleUser()
+   }, []);
+
+   return (
+      <View
+         style={[
+            Styles.mv15,
+            Styles.p15,
+            Styles.round05,
+            { backgroundColor: colors.card },
+            Styles.wrapHomeCarousel
+         ]}
+      >
+         {/* WRAPPER CAROUSEL */}
+         <View
+            style={{
+               justifyContent: 'center',  // ⬅️ vertical center
+               alignItems: 'center',
+            }}
+         >
+            {entities.length > 0 ? (
+               <Carousel
+                  ref={ref}
+                  width={width - 30} // ⬅️ biar ga nabrak padding hijau
+                  height={width / 2.6}
+                  data={entities}
+                  loop
+                  autoPlay
+                  autoPlayInterval={5000}
+                  onProgressChange={progress}
+                  renderItem={({ index }) => (
+                     <Image
+                        source={{ uri: `${ConstEnv.url_storage}/files/${entities[index].image}` }}
+                        style={[
+                           Styles.caraoselContent,
+                           Styles.round05,
+                           {
+                              backgroundColor: colors.primary
+                           },
+                        ]}
+                        resizeMode="cover"
+                     />
+                  )}
+               />
+            ) : (
+               <View
+                  style={[
+                     Styles.caraoselContent,
+                     {
+                        height: width / 2.5,
+                        backgroundColor: colors.primary,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                     },
+                  ]}
+               >
+                  <Text style={[Styles.textDefault, Styles.cWhite]}>BANNER</Text>
+               </View>
+            )}
+         </View>
+
+         {/* FITUR */}
+         <View style={[Styles.mt15]}>
+            <View style={Styles.rowSpaceBetween}>
+               <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="grid-outline" size={30} color={colors.icon} />}
+                  text="Semua"
+                  onPress={() => router.push('/feature')}
+               />
+            </View>
+         </View>
+      </View>
+   )
+}

components/home/chartProgresHome.tsx

@@ -58,7 +58,7 @@ export default function ChartProgresHome({ refreshing }: { refreshing: boolean }
                      data={data}
                      showText
                      showValuesAsTooltipText
-                     textColor={colors.text}
+                     textColor={'black'}
                      radius={120}
                      textSize={15}
                      focusOnPress={false}

components/home/discussionHome.tsx

@@ -7,6 +7,7 @@ import { View } from "react-native";
 import DiscussionItem from "../discussionItem";
 import Skeleton from "../skeleton";
 import Text from "../Text";
+import { useTheme } from "@/providers/ThemeProvider";
 
 type Props = {
    id: string
@@ -21,6 +22,7 @@ export default function DisccussionHome({ refreshing }: { refreshing: boolean })
    const { decryptToken, token } = useAuthSession()
    const [data, setData] = useState<Props[]>([])
    const [loading, setLoading] = useState(true)
+   const { colors } = useTheme();
 
 
    async function handleData(loading: boolean) {
@@ -48,7 +50,7 @@ export default function DisccussionHome({ refreshing }: { refreshing: boolean })
    return (
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
-         <View style={[Styles.wrapPaper]}>
+         <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0]}>
             {
                loading ?
                   <>

components/home/fiturHome.tsx

@@ -13,10 +13,10 @@ export default function FiturHome() {
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Fitur</Text>
          <View style={[Styles.rowSpaceBetween]}>
-            <ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color="black" />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
-            <ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
-            <ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color="black" />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
-            <ButtonFiturMenu icon={<MaterialCommunityIcons name="view-grid" size={35} color="black" />} text="Semua" onPress={() => { router.push('/feature') }} />
+            <ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color={colors.icon} />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
+            <ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color={colors.icon} />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
+            <ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color={colors.icon} />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
+            <ButtonFiturMenu icon={<MaterialCommunityIcons name="view-grid" size={35} color={colors.icon} />} text="Semua" onPress={() => { router.push('/feature') }} />
          </View>
       </View>
    )

components/home/headerRightHome.tsx

@@ -29,7 +29,7 @@ export function HeaderRightHome() {
 
 
    return (
-      <View style={[Styles.rowSpaceBetween, { width: 140 }]}>
+      <View style={[Styles.rowSpaceBetween, { width: 90 }]}>
          <ButtonHeader item={<Feather name="search" size={18} color="white" />} onPress={() => { router.push('/search') }} />
          <ButtonHeader valueTop={notification > 0 ? true : false} item={<Feather name="bell" size={18} color="white" />} onPress={() => { router.push('/notification') }} />
          <ButtonHeader item={<Feather name="user" size={18} color="white" />} onPress={() => { router.push('/profile') }} />

components/home/projectHome.tsx

@@ -10,6 +10,7 @@ import PaperGridContent from "../paperGridContent";
 import ProgressBar from "../progressBar";
 import Skeleton from "../skeleton";
 import Text from "../Text";
+import { useTheme } from "@/providers/ThemeProvider";
 
 type Props = {
    id: string
@@ -26,6 +27,7 @@ export default function ProjectHome({ refreshing }: { refreshing: boolean }) {
    const width = Dimensions.get("window").width;
    const [data, setData] = useState<Props[]>([])
    const [loading, setLoading] = useState(true)
+   const { colors } = useTheme();
 
    async function handleData(loading: boolean) {
       try {
@@ -72,7 +74,7 @@ export default function ProjectHome({ refreshing }: { refreshing: boolean }) {
                         <PaperGridContent titleTail={1} content="carousel" onPress={() => { router.push(`/project/${data[index].id}`) }} title={data[index].title} headerColor="primary">
                            <ProgressBar value={data[index].progress} category="carousel" />
                            <View style={[Styles.rowSpaceBetween]}>
-                              <Text style={[Styles.textDefault, Styles.cGray]}>{data[index].createdAt}</Text>
+                              <Text style={[Styles.textDefault, { color: colors.dimmed }]}>{data[index].createdAt}</Text>
                               <LabelStatus
                                  size="default"
                                  category={