upd: project

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

No Issues

app/(application)/division/[id]/(fitur-division)/task/index.tsx

@@ -104,21 +104,21 @@ export default function ListTask() {
 
                      <View>
                         <PaperGridContent onPress={() => { router.push('./task/321') }} content="page" title="Pembangunan Jembatan" headerColor="primary">
-                           <ProgressBar value={0}/>
+                           <ProgressBar category="page" value={0}/>
                            <View style={[Styles.rowSpaceBetween]}>
                               <Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
                               <LabelStatus size="default" category="primary" text="SEGERA" />
                            </View>
                         </PaperGridContent>
                         <PaperGridContent content="page" title="Pembangunan Jembatan" headerColor="primary">
-                           <ProgressBar value={0}/>
+                           <ProgressBar category="page" value={0}/>
                            <View style={[Styles.rowSpaceBetween]}>
                               <Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
                               <LabelStatus size="default" category="primary" text="SEGERA" />
                            </View>
                         </PaperGridContent>
                         <PaperGridContent content="page" title="Pembangunan Jembatan" headerColor="primary">
-                           <ProgressBar value={0}/>
+                           <ProgressBar category="page" value={0}/>
                            <View style={[Styles.rowSpaceBetween]}>
                               <Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
                               <LabelStatus size="default" category="primary" text="SEGERA" />

app/(application)/project/index.tsx

@@ -6,14 +6,62 @@ import PaperGridContent from "@/components/paperGridContent";
 import ProgressBar from "@/components/progressBar";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
-import { AntDesign, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { apiGetProject } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import {
+   AntDesign,
+   Ionicons,
+   MaterialCommunityIcons,
+} from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native";
+import { useSelector } from "react-redux";
+
+type Props = {
+   id: string;
+   title: string;
+   desc: string;
+   status: number;
+   member: number;
+   progress: number;
+   createdAt: string;
+};
 
 export default function ListProject() {
-   const { status } = useLocalSearchParams<{ status: string }>()
+   const { status, group } = useLocalSearchParams<{
-   const [isList, setList] = useState(false)
+      status?: string;
+      group?: string;
+   }>();
+   const { token, decryptToken } = useAuthSession();
+   const entityUser = useSelector((state: any) => state.user);
+   const [search, setSearch] = useState("");
+   const [nameGroup, setNameGroup] = useState("");
+   const [data, setData] = useState<Props[]>([]);
+   const [isList, setList] = useState(false);
+
+   async function handleLoad() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetProject({
+            user: hasil,
+            status: String(status),
+            search: search,
+            group: String(group),
+         });
+
+         if (response.success) {
+            setData(response.data);
+            setNameGroup(response.filter.name);
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      handleLoad();
+   }, [status, search, group]);
 
    return (
       <SafeAreaView>
@@ -21,118 +69,165 @@ export default function ListProject() {
             <View style={[Styles.p15, Styles.mb100]}>
                <ScrollView horizontal style={[Styles.mb10]}>
                   <ButtonTab
-                     active={status}
+                     active={String(status)}
                      value="0"
-                     onPress={() => { router.push('/project?status=0') }}
+                     onPress={() => {
+                        router.push(
+                           `/project?status=0&group=${group}&search=${search}`
+                        );
+                     }}
                      label="Segera"
-                     icon={<MaterialCommunityIcons name="clock-alert-outline" color={status == "0" ? 'white' : 'black'} size={20} />}
+                     icon={
-                     n={4} />
+                        <MaterialCommunityIcons
+                           name="clock-alert-outline"
+                           color={status == "0" ? "white" : "black"}
+                           size={20}
+                        />
+                     }
+                     n={4}
+                  />
                   <ButtonTab
-                     active={status}
+                     active={String(status)}
                      value="1"
-                     onPress={() => { router.push('/project?status=1') }}
+                     onPress={() => {
+                        router.push(
+                           `/project?status=1&group=${group}&search=${search}`
+                        );
+                     }}
                      label="Dikerjakan"
-                     icon={<MaterialCommunityIcons name="progress-check" color={status == "1" ? 'white' : 'black'} size={20} />}
+                     icon={
-                     n={4} />
+                        <MaterialCommunityIcons
+                           name="progress-check"
+                           color={status == "1" ? "white" : "black"}
+                           size={20}
+                        />
+                     }
+                     n={4}
+                  />
                   <ButtonTab
-                     active={status}
+                     active={String(status)}
                      value="2"
-                     onPress={() => { router.push('/project?status=2') }}
+                     onPress={() => {
+                        router.push(
+                           `/project?status=2&group=${group}&search=${search}`
+                        );
+                     }}
                      label="Selesai"
-                     icon={<Ionicons name="checkmark-done-circle-outline" color={status == "2" ? 'white' : 'black'} size={20} />}
+                     icon={
-                     n={4} />
+                        <Ionicons
+                           name="checkmark-done-circle-outline"
+                           color={status == "2" ? "white" : "black"}
+                           size={20}
+                        />
+                     }
+                     n={4}
+                  />
                   <ButtonTab
-                     active={status}
+                     active={String(status)}
                      value="3"
-                     onPress={() => { router.push('/project?status=3') }}
+                     onPress={() => {
+                        router.push(
+                           `/project?status=3&group=${group}&search=${search}`
+                        );
+                     }}
                      label="Batal"
-                     icon={<AntDesign name="closecircleo" color={status == "3" ? 'white' : 'black'} size={20} />}
+                     icon={
-                     n={4} />
+                        <AntDesign
+                           name="closecircleo"
+                           color={status == "3" ? "white" : "black"}
+                           size={20}
+                        />
+                     }
+                     n={4}
+                  />
                </ScrollView>
                <View style={[Styles.rowSpaceBetween]}>
-                  <InputSearch width={68} />
+                  <InputSearch width={68} onChange={setSearch} />
-                  <Pressable onPress={() => { setList(!isList) }}>
+                  <Pressable
-                     <MaterialCommunityIcons name={isList ? 'format-list-bulleted' : 'view-grid'} color={"black"} size={30} />
+                     onPress={() => {
+                        setList(!isList);
+                     }}
+                  >
+                     <MaterialCommunityIcons
+                        name={isList ? "format-list-bulleted" : "view-grid"}
+                        color={"black"}
+                        size={30}
+                     />
                   </Pressable>
                </View>
+               {(entityUser.role == "supadmin" ||
+                  entityUser.role == "developer") && (
                      <View style={[Styles.mv05]}>
-                  <Text>Filter : Dinas</Text>
+                        <Text>Filter : {nameGroup}</Text>
                      </View>
-               {
+                  )}
-                  isList
+               {isList ? (
-                     ?
                   <View>
+                     {data.map((item, index) => {
+                        return (
                            <BorderBottomItem
+                              key={index}
                               onPress={() => { }}
                               borderType="bottom"
                               icon={
-                              <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                                 <View
-                                 <AntDesign name="areachart" size={25} color={'#384288'} />
+                                    style={[Styles.iconContent, ColorsStatus.lightGreen]}
-                              </View>
+                                 >
-                           }
+                                    <AntDesign
-                           title="Pembangunan Jembatan"
+                                       name="areachart"
-                        />
+                                       size={25}
-                        <BorderBottomItem
+                                       color={"#384288"}
-                           onPress={() => { }}
-                           borderType="bottom"
-                           icon={
-                              <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                 <AntDesign name="areachart" size={25} color={'#384288'} />
-                              </View>
-                           }
-                           title="Pembangunan Jembatan"
-                        />
-                        <BorderBottomItem
-                           onPress={() => { }}
-                           borderType="bottom"
-                           icon={
-                              <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                 <AntDesign name="areachart" size={25} color={'#384288'} />
-                              </View>
-                           }
-                           title="Pembangunan Jembatan"
-                        />
-                        <BorderBottomItem
-                           onPress={() => { }}
-                           borderType="bottom"
-                           icon={
-                              <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                 <AntDesign name="areachart" size={25} color={'#384288'} />
-                              </View>
-                           }
-                           title="Pembangunan Jembatan"
                                     />
                                  </View>
-                     :
+                              }
-
+                              title={item.title}
+                           />
+                        );
+                     })}
+                  </View>
+               ) : (
                   <View>
-                        <PaperGridContent onPress={() => { router.push('/project/234') }} content="page" title="Pembangunan Jembatan" headerColor="primary">
+                     {data.map((item, index) => {
-                           <ProgressBar value={0} />
+                        return (
+                           <PaperGridContent
+                              key={index}
+                              onPress={() => {
+                                 router.push(`/project/${item.id}`);
+                              }}
+                              content="page"
+                              title={item.title}
+                              headerColor="primary"
+                           >
+                              <ProgressBar value={item.progress} category="page" />
                               <View style={[Styles.rowSpaceBetween]}>
-                              <Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
+                                 <Text style={[Styles.textDefault, Styles.cGray]}>
-                              <LabelStatus size="default" category="primary" text="SEGERA" />
+                                    {item.createdAt}
-                           </View>
+                                 </Text>
-                        </PaperGridContent>
+                                 <LabelStatus
-                        <PaperGridContent content="page" title="Pembangunan Jembatan" headerColor="primary">
+                                    size="default"
-                           <ProgressBar value={0} />
+                                    category={
-                           <View style={[Styles.rowSpaceBetween]}>
+                                       item.status === 0 ? 'primary' :
-                              <Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
+                                          item.status === 1 ? 'warning' :
-                              <LabelStatus size="default" category="primary" text="SEGERA" />
+                                             item.status === 2 ? 'success' :
-                           </View>
+                                                item.status === 3 ? 'error' :
-                        </PaperGridContent>
+                                                   'primary'
-                        <PaperGridContent content="page" title="Pembangunan Jembatan" headerColor="primary">
-                           <ProgressBar value={0} />
-                           <View style={[Styles.rowSpaceBetween]}>
-                              <Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
-                              <LabelStatus size="default" category="primary" text="SEGERA" />
-                           </View>
-                        </PaperGridContent>
-                     </View>
-
                                     }
-
+                                    text={
+                                       item.status === 0 ? 'SEGERA' :
+                                          item.status === 1 ? 'DIKERJAKAN' :
+                                             item.status === 2 ? 'SELESAI' :
+                                                item.status === 3 ? 'DIBATALKAN' :
+                                                   'SEGERA'
+                                    }
+                                 />
+                              </View>
+                           </PaperGridContent>
+                        );
+                     })}
+                  </View>
+               )}
             </View>
          </ScrollView>
       </SafeAreaView>
-   )
+   );
 }

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,
+                     <LabelStatus
-                     data[index].status === 0 ? ColorsStatus.primary :
+                        size="default"
-                        data[index].status === 1 ? ColorsStatus.warning :
+                        category={
-                           data[index].status === 2 ? ColorsStatus.success :
+                           data[index].status === 0 ? 'primary' :
-                              data[index].status === 3 ? ColorsStatus.error :
+                              data[index].status === 1 ? 'warning' :
-                                 ColorsStatus.primary
+                                 data[index].status === 2 ? 'success' :
-                     ]}>
+                                    data[index].status === 3 ? 'error' :
-                        <Text style={[Styles.textMediumSemiBold, Styles.cWhite]}>
+                                       'primary'
-                           {
+                        }
+                        text={
                            data[index].status === 0 ? 'SEGERA' :
                               data[index].status === 1 ? 'DIKERJAKAN' :
                                  data[index].status === 2 ? 'SELESAI' :
                                     data[index].status === 3 ? 'DIBATALKAN' :
-                                          "SEGERA"
+                                       'SEGERA'
                         }
-                        </Text>
+                     />
-                     </View>
                   </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,6 +55,17 @@ export default function ModalFilter({ open, close, page }: Props) {
             <ScrollView>
                <View>
                   {
+                     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>
@@ -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
+         // carousel:: 100% = 255
-         toValue: value / 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,21 +1,26 @@
-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}>
+               {
+                  entityUser.role != "user" && entityUser.role != "coadmin" &&
                   <MenuItemRow
                      icon={<AntDesign name="pluscircle" color="black" size={25} />}
                      title="Tambah Kegiatan"
@@ -24,6 +29,7 @@ export default function HeaderRightProjectList() {
                         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>
    )

lib/api.ts

@@ -232,3 +232,8 @@ export const apiDeleteAnnouncement = async (data: { user: string }, id: string)
    const response = await api.delete(`mobile/announcement/${id}`, { data })
    return response.data
 };
+
+export const apiGetProject = async ({ user, status, search, group, kategori }: { user: string, status: string, search: string, group?: string, kategori?: string }) => {
+   const response = await api.get(`mobile/project?user=${user}&status=${status}&group=${group}&search=${search}&cat=${kategori}`);
+   return response.data;
+};