upd: project

Deskripsi:
- load page project
- pencarian project
- filter group project
- update label status pada project home

No Issues

components/home/projectHome.tsx

@@ -1,4 +1,3 @@
-import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetDataHome } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
@@ -6,6 +5,7 @@ import { router } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { Dimensions, Text, View } from "react-native";
 import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
+import LabelStatus from "../labelStatus";
 import PaperGridContent from "../paperGridContent";
 import ProgressBar from "../progressBar";
 
@@ -55,26 +55,26 @@ export default function ProjectHome() {
             vertical={false}
             renderItem={({ index }) => (
                <PaperGridContent content="carousel" onPress={() => { router.push(`/project/${data[index].id}`) }} title={data[index].title} headerColor="primary">
-                  <ProgressBar value={data[index].progress}/>
+                  <ProgressBar value={data[index].progress} category="carousel" />
                   <View style={[Styles.rowSpaceBetween]}>
                      <Text style={[Styles.textDefault, Styles.cGray]}>{data[index].createdAt}</Text>
-                     <View style={[Styles.labelStatus,
-                     data[index].status === 0 ? ColorsStatus.primary :
-                        data[index].status === 1 ? ColorsStatus.warning :
-                           data[index].status === 2 ? ColorsStatus.success :
-                              data[index].status === 3 ? ColorsStatus.error :
-                                 ColorsStatus.primary
-                     ]}>
-                        <Text style={[Styles.textMediumSemiBold, Styles.cWhite]}>
-                           {
-                              data[index].status === 0 ? 'SEGERA' :
-                                 data[index].status === 1 ? 'DIKERJAKAN' :
-                                    data[index].status === 2 ? 'SELESAI' :
-                                       data[index].status === 3 ? 'DIBATALKAN' :
-                                          "SEGERA"
-                           }
-                        </Text>
-                     </View>
+                     <LabelStatus
+                        size="default"
+                        category={
+                           data[index].status === 0 ? 'primary' :
+                              data[index].status === 1 ? 'warning' :
+                                 data[index].status === 2 ? 'success' :
+                                    data[index].status === 3 ? 'error' :
+                                       'primary'
+                        }
+                        text={
+                           data[index].status === 0 ? 'SEGERA' :
+                              data[index].status === 1 ? 'DIKERJAKAN' :
+                                 data[index].status === 2 ? 'SELESAI' :
+                                    data[index].status === 3 ? 'DIBATALKAN' :
+                                       'SEGERA'
+                        }
+                     />
                   </View>
                </PaperGridContent>
             )}

components/modalFilter.tsx

@@ -15,9 +15,20 @@ type Props = {
    open: boolean,
    close: (value: boolean) => void
    page: 'position' | 'member' | 'discussion' | 'project' | 'division'
+   category?: 'filter-group' | 'filter-data'
 }
 
-export default function ModalFilter({ open, close, page }: Props) {
+export default function ModalFilter({ open, close, page, category }: Props) {
+   const data = [
+      {
+         id: "data-saya",
+         name: "Kegiatan Saya",
+      },
+      {
+         id: "semua",
+         name: "Semua Kegiatan",
+      },
+   ]
    const { token, decryptToken } = useAuthSession()
    const dispatch = useDispatch()
    const entities = useSelector((state: any) => state.filterGroup)
@@ -44,14 +55,25 @@ export default function ModalFilter({ open, close, page }: Props) {
             <ScrollView>
                <View>
                   {
-                     entities.map((item: any, index: any) => (
-                        <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { setChooseGroup(item.id) }}>
-                           <Text style={[chooseGroup == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
-                           {
-                              chooseGroup == item.id && <AntDesign name="check" size={20} />
-                           }
-                        </Pressable>
-                     ))
+                     category == "filter-data"
+                        ?
+                        data.map((item: any, index: any) => (
+                           <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { setChooseGroup(item.id) }}>
+                              <Text style={[chooseGroup == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
+                              {
+                                 chooseGroup == item.id && <AntDesign name="check" size={20} />
+                              }
+                           </Pressable>
+                        ))
+                        :
+                        entities.map((item: any, index: any) => (
+                           <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { setChooseGroup(item.id) }}>
+                              <Text style={[chooseGroup == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
+                              {
+                                 chooseGroup == item.id && <AntDesign name="check" size={20} />
+                              }
+                           </Pressable>
+                        ))
                   }
                </View>
             </ScrollView>
@@ -59,7 +81,11 @@ export default function ModalFilter({ open, close, page }: Props) {
                <ButtonForm text="Terapkan" onPress={() => {
                   close(false)
                   page == 'project' ?
-                     router.push(`/${page}?status=0`)
+                     category == "filter-data"
+                        ?
+                        router.push(`/${page}?status=0&cat=${chooseGroup}`)
+                        :
+                        router.push(`/${page}?status=0&group=${chooseGroup}`)
                      :
                      router.push(`/${page}?active=true&group=${chooseGroup}`)
                }} />

components/progressBar.tsx

@@ -6,20 +6,24 @@ import { Animated, View } from "react-native";
 type Props = {
    margin?: number
    value: number
+   category: "page" | "carousel"
 }
 
-export default function ProgressBar({ margin, value }: Props) {
+export default function ProgressBar({ margin, value, category }: Props) {
    const [progress, setProgress] = useState(new Animated.Value(0));
+   const [totalProgress, setTotalProgress] = useState(category == 'carousel' ? 255 : 290);
 
 
    useEffect(() => {
       Animated.timing(progress, {
-         // 100% = 255
-         toValue: value / 100 * 255,
+         // carousel:: 100% = 255
+         // page:: 100% = 290
+         toValue: value / 100 * totalProgress,
          duration: 1000,
          useNativeDriver: false
       }).start();
-   }, []);
+   }, [value]);
+
 
    return (
       <View style={[Styles.contentItemCenter]}>

components/project/headerProjectList.tsx

@@ -1,29 +1,35 @@
-import { useState } from "react"
-import ButtonMenuHeader from "../buttonMenuHeader"
-import DrawerBottom from "../drawerBottom"
-import { View } from "react-native"
 import Styles from "@/constants/Styles"
-import MenuItemRow from "../menuItemRow"
 import { AntDesign } from "@expo/vector-icons"
 import { router } from "expo-router"
+import { useState } from "react"
+import { View } from "react-native"
+import { useSelector } from "react-redux"
+import ButtonMenuHeader from "../buttonMenuHeader"
+import DrawerBottom from "../drawerBottom"
+import MenuItemRow from "../menuItemRow"
 import ModalFilter from "../modalFilter"
 
 export default function HeaderRightProjectList() {
    const [isVisible, setVisible] = useState(false)
    const [isFilter, setFilter] = useState(false)
+   const entityUser = useSelector((state: any) => state.user)
+
    return (
       <>
          <ButtonMenuHeader onPress={() => { setVisible(true) }} />
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
-               <MenuItemRow
-                  icon={<AntDesign name="pluscircle" color="black" size={25} />}
-                  title="Tambah Kegiatan"
-                  onPress={() => {
-                     setVisible(false)
-                     router.push('/project/create')
-                  }}
-               />
+               {
+                  entityUser.role != "user" && entityUser.role != "coadmin" &&
+                  <MenuItemRow
+                     icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                     title="Tambah Kegiatan"
+                     onPress={() => {
+                        setVisible(false)
+                        router.push('/project/create')
+                     }}
+                  />
+               }
                <MenuItemRow
                   icon={<AntDesign name="filter" color="black" size={25} />}
                   title="Filter"
@@ -34,7 +40,12 @@ export default function HeaderRightProjectList() {
                />
             </View>
          </DrawerBottom>
-         <ModalFilter close={() => { setFilter(false) }} open={isFilter} page="project" />
+         <ModalFilter
+            close={() => { setFilter(false) }}
+            open={isFilter}
+            page="project"
+            category={entityUser.role == "supadmin" || entityUser.role == "developer" ? "filter-group" : "filter-data"}
+         />
       </>
    )
 }

components/sectionProgress.tsx

@@ -16,7 +16,7 @@ export default function SectionProgress({ text }: Props) {
          </View>
          <View style={[Styles.ml10, { flex: 1 }]}>
             <Text style={[Styles.mb05]}>{text}</Text>
-            <ProgressBar margin={0} />
+            <ProgressBar margin={0} category="page" value={50} />
          </View>
       </View>
    )