upd: projeect

Deskripsi:
- ui list project
- ui grid project
- ui create project

No Issues

app/(application)/_layout.tsx

@@ -1,6 +1,7 @@
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import HeaderDiscussionGeneral from "@/components/discussion_general/headerDiscussionGeneral";
 import HeaderMemberList from "@/components/member/headerMemberList";
+import HeaderRightProjectList from "@/components/project/headerProjectList";
 import { Headers } from "@/constants/Headers";
 import { router, Stack } from "expo-router";
 import { StatusBar } from 'expo-status-bar';
@@ -28,6 +29,12 @@ export default function RootLayout() {
                headerTitleAlign: 'center',
                headerRight: () => <HeaderDiscussionGeneral />
             }} />
+            <Stack.Screen name="project/index" options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               title: 'Kegiatan',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightProjectList />
+            }} />
          </Stack>
          <StatusBar style="light" />
       </>

app/(application)/feature.tsx

@@ -18,7 +18,7 @@ export default function Feature() {
          <View style={[Styles.p15]}>
             <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
                <ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color="black" />} text="Divisi" />
-               <ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" />
+               <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={<Ionicons name="chatbubbles-sharp" size={35} color="black" />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
             </View>

app/(application)/project/[id]/index.tsx

@@ -0,0 +1,29 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import HeaderRightProjectDetail from "@/components/project/headerProjectDetail";
+import SectionProgress from "@/components/sectionProgress";
+import SectionTanggalTugas from "@/components/sectionTanggalTugas";
+import Styles from "@/constants/Styles";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { SafeAreaView, ScrollView, Text, View } from "react-native";
+
+export default function DetailProject() {
+   const { id } = useLocalSearchParams()
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Judul Kegiatan',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightProjectDetail id={id} />,
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15]}>
+               <SectionProgress text="Kemajuan Kegiatan 50%" />
+               <SectionTanggalTugas />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

app/(application)/project/create.tsx

@@ -0,0 +1,47 @@
+import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import { ButtonForm } from "@/components/buttonForm";
+import ButtonSelect from "@/components/buttonSelect";
+import { InputForm } from "@/components/inputForm";
+import SelectForm from "@/components/selectForm";
+import Styles from "@/constants/Styles";
+import { router, Stack } from "expo-router";
+import { useState } from "react";
+import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+
+export default function CreateProject() {
+   const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Tambah Kegiatan',
+               headerTitleAlign: 'center',
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <SelectForm label="Lembaga Desa" placeholder="Pilih Lembaga Desa" value={chooseGroup.label} required onPress={() => { }} />
+               <InputForm label="Kegiatan" type="default" placeholder="Nama Kegiatan" required />
+               <ButtonSelect value="Tambah Tanggal & Tugas" />
+               <ButtonSelect value="Upload File" />
+               <ButtonSelect value="Tambah Anggota" />
+               <ButtonForm
+                  text="SIMPAN"
+                  onPress={() => {
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah anda yakin ingin menambahkan data?',
+                        onPress: () => {
+                           ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+                           router.push('/project?status=0')
+                        }
+                     })
+                  }} />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

app/(application)/project/index.tsx

@@ -0,0 +1,138 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonTab from "@/components/buttonTab";
+import InputSearch from "@/components/inputSearch";
+import LabelStatus from "@/components/labelStatus";
+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 { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native";
+
+export default function ListProject() {
+   const { status } = useLocalSearchParams<{ status: string }>()
+   const [isList, setList] = useState(false)
+
+   return (
+      <SafeAreaView>
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <ScrollView horizontal style={[Styles.mb10]}>
+                  <ButtonTab
+                     active={status}
+                     value="0"
+                     onPress={() => { router.push('/project?status=0') }}
+                     label="Segera"
+                     icon={<MaterialCommunityIcons name="clock-alert-outline" color={status == "0" ? 'white' : 'black'} size={20} />}
+                     n={4} />
+                  <ButtonTab
+                     active={status}
+                     value="1"
+                     onPress={() => { router.push('/project?status=1') }}
+                     label="Dikerjakan"
+                     icon={<MaterialCommunityIcons name="progress-check" color={status == "1" ? 'white' : 'black'} size={20} />}
+                     n={4} />
+                  <ButtonTab
+                     active={status}
+                     value="2"
+                     onPress={() => { router.push('/project?status=2') }}
+                     label="Selesai"
+                     icon={<Ionicons name="checkmark-done-circle-outline" color={status == "2" ? 'white' : 'black'} size={20} />}
+                     n={4} />
+                  <ButtonTab
+                     active={status}
+                     value="3"
+                     onPress={() => { router.push('/project?status=3') }}
+                     label="Batal"
+                     icon={<AntDesign name="closecircleo" color={status == "3" ? 'white' : 'black'} size={20} />}
+                     n={4} />
+               </ScrollView>
+               <View style={[Styles.rowSpaceBetween]}>
+                  <InputSearch width={68} />
+                  <Pressable onPress={() => { setList(!isList) }}>
+                     <MaterialCommunityIcons name={isList ? 'format-list-bulleted' : 'view-grid'} color={"black"} size={30} />
+                  </Pressable>
+               </View>
+               <View style={[Styles.mv05]}>
+                  <Text>Filter : Dinas</Text>
+               </View>
+               {
+                  isList
+                     ?
+                     <View>
+                        <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"
+                        />
+                        <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>
+                     :
+
+                     <View>
+                        <PaperGridContent onPress={() => { router.push('/project/234') }} content="page" title="Pembangunan Jembatan" headerColor="primary">
+                           <ProgressBar />
+                           <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 />
+                           <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 />
+                           <View style={[Styles.rowSpaceBetween]}>
+                              <Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
+                              <LabelStatus size="default" category="primary" text="SEGERA" />
+                           </View>
+                        </PaperGridContent>
+                     </View>
+
+               }
+
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

components/buttonTab.tsx

@@ -15,7 +15,7 @@ type Props = {
 
 export default function ButtonTab({ active, value, onPress, label, n, icon }: Props) {
    return (
-      <TouchableOpacity style={[Styles.btnTab, (active == value) ? ColorsStatus.orange : ColorsStatus.white, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}>
+      <TouchableOpacity style={[Styles.btnTab, (active == value) && ColorsStatus.orange, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}>
          {icon}
          <Text style={[Styles.textMediumSemiBold, Styles.ml10, { color: active == value ? 'white' : 'black' }]}>{label}</Text>
       </TouchableOpacity>

components/home/fiturHome.tsx

@@ -11,7 +11,7 @@ export default function FiturHome() {
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Fitur</Text>
          <View style={[Styles.rowSpaceBetween]}>
             <ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color="black" />} text="Divisi" />
-            <ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" />
+            <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') }} />
          </View>

components/inputForm.tsx

@@ -1,5 +1,5 @@
 import Styles from "@/constants/Styles";
-import { View, TextInput, Text } from "react-native";
+import { View, TextInput, Text, Dimensions } from "react-native";
 
 type Props = {
    label?: string;
@@ -13,10 +13,12 @@ type Props = {
    required?: boolean;
    type: 'default' | 'visible-password' | 'numeric'
    round?: boolean
+   width?: number
 };
 
 
-export function InputForm({ label, placeholder, onChange, info, error, errorText, required, itemLeft, itemRight, type, round }: Props) {
+export function InputForm({ label, placeholder, onChange, info, error, errorText, required, itemLeft, itemRight, type, round, width }: Props) {
+   const lebar = Dimensions.get("window").width;
 
    if (itemLeft != undefined || itemRight != undefined) {
       return (
@@ -35,6 +37,7 @@ export function InputForm({ label, placeholder, onChange, info, error, errorText
                   placeholder={placeholder}
                   keyboardType={type}
                   onChangeText={onChange}
+                  style={{ width: width && lebar * width / 100 }}
                />
             </View>
             {error && (<Text style={[Styles.textInformation, Styles.cError]}>{errorText}</Text>)}

components/inputSearch.tsx

@@ -1,7 +1,7 @@
 import { Feather } from "@expo/vector-icons";
 import { InputForm } from "./inputForm";
 
-export default function InputSearch({ onChange }: { onChange?: (val: string) => void }) {
+export default function InputSearch({ onChange, width }: { onChange?: (val: string) => void, width?: number }) {
    return (
       <InputForm
          type="default"
@@ -9,6 +9,7 @@ export default function InputSearch({ onChange }: { onChange?: (val: string) =>
          round
          itemLeft={<Feather name="search" size={20} color="grey" />}
          onChange={onChange}
+         width={width}
       />
    )
 }

components/modalFilter.tsx

@@ -9,7 +9,7 @@ import { router } from "expo-router"
 type Props = {
    open: boolean,
    close: (value: boolean) => void
-   page: 'position' | 'member' | 'discussion'
+   page: 'position' | 'member' | 'discussion' | 'project'
 }
 
 export default function ModalFilter({ open, close, page }: Props) {
@@ -34,7 +34,10 @@ export default function ModalFilter({ open, close, page }: Props) {
             <View>
                <ButtonForm text="Terapkan" onPress={() => {
                   close(false)
-                  router.push(`/${page}?active=true`)
+                  page == 'project' ?
+                     router.push(`/${page}?status=0`)
+                     :
+                     router.push(`/${page}?active=true`)
                }} />
             </View>
          </View>

components/paperGridContent.tsx

@@ -1,23 +1,26 @@
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
-import { Text, View } from "react-native";
+import { Pressable, Text, View } from "react-native";
-import ProgressBar from "./progressBar";
 
 type Props = {
    content: 'carousel' | 'page';
    children: React.ReactNode;
    title: string
    headerColor: 'primary' | 'warning'
+   onPress?: () => void
 };
-export default function PaperGridContent({ content, children, title, headerColor }: Props) {
+export default function PaperGridContent({ content, children, title, headerColor, onPress }: Props) {
    return (
-      <View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : ColorsStatus.primary]}>
+      <Pressable onPress={onPress}>
-         <View style={[Styles.headerPaperGrid]}>
+         <View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : ColorsStatus.primary]}>
-            <Text style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite]}>{title}</Text>
+            <View style={[Styles.headerPaperGrid]}>
+               <Text style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite]}>{title}</Text>
+            </View>
+            <View style={[Styles.contentPaperGrid]}>
+               {children}
+            </View>
          </View>
-         <View style={[Styles.contentPaperGrid]}>
+      </Pressable>
-            {children}
+
-         </View>
-      </View>
    )
 }

components/progressBar.tsx

@@ -2,7 +2,12 @@ import Styles from "@/constants/Styles";
 import { useEffect, useState } from "react";
 import { Animated, Text, View } from "react-native";
 
-export default function ProgressBar() {
+
+type Props = {
+   margin?: number
+}
+
+export default function ProgressBar({ margin }: Props) {
    const [progress, setProgress] = useState(new Animated.Value(0));
 
 
@@ -16,7 +21,7 @@ export default function ProgressBar() {
    }, []);
 
    return (
-      <View style={Styles.wrapBar}>
+      <View style={[Styles.wrapBar, { margin: margin && margin }]}>
          <Animated.View style={[Styles.contentBar, { width: progress }]} />
       </View>
    )

components/project/headerProjectDetail.tsx

@@ -0,0 +1,66 @@
+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, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
+
+type Props = {
+   id: string | string[]
+}
+
+export default function HeaderRightProjectDetail({ id }: Props) {
+   const [isVisible, setVisible] = useState(false)
+
+   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 Tugas"
+                  onPress={() => {
+
+                  }}
+               />
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="file-plus" color="black" size={25} />}
+                  title="Tambah File"
+                  onPress={() => {
+
+                  }}
+               />
+
+               <MenuItemRow
+                  icon={<MaterialIcons name="groups" color="black" size={25} />}
+                  title="Tambah Anggota"
+                  onPress={() => {
+                     setVisible(false)
+                     // router.push(`/discussion/member/${id}`)
+                  }}
+               />
+
+            </View>
+            <View style={[Styles.rowItemsCenter, Styles.mt15]}>
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  title="Edit"
+                  onPress={() => {
+                     setVisible(false)
+                     // router.push(`/discussion/edit/${id}`)
+                  }}
+               />
+               <MenuItemRow
+                  icon={<MaterialIcons name="close" color="black" size={25} />}
+                  title="Batal"
+                  onPress={() => {
+
+                  }}
+               />
+            </View>
+         </DrawerBottom>
+      </>
+   )
+}

components/project/headerProjectList.tsx

@@ -0,0 +1,40 @@
+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 ModalFilter from "../modalFilter"
+
+export default function HeaderRightProjectList() {
+   const [isVisible, setVisible] = useState(false)
+   const [isFilter, setFilter] = useState(false)
+   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')
+                  }}
+               />
+               <MenuItemRow
+                  icon={<AntDesign name="filter" color="black" size={25} />}
+                  title="Filter"
+                  onPress={() => {
+                     setVisible(false)
+                     setFilter(true)
+                  }}
+               />
+            </View>
+         </DrawerBottom>
+         <ModalFilter close={() => { setFilter(false) }} open={isFilter} page="project" />
+      </>
+   )
+}

components/sectionProgress.tsx

@@ -0,0 +1,23 @@
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { AntDesign } from "@expo/vector-icons";
+import { Text, View } from "react-native";
+import ProgressBar from "./progressBar";
+
+type Props = {
+   text: string
+}
+
+export default function SectionProgress({ text }: Props) {
+   return (
+      <View style={[ColorsStatus.lightGreen, Styles.p15, { flexDirection: 'row', borderRadius: 10, alignItems: 'center' }]}>
+         <View style={[Styles.iconContent, ColorsStatus.orange, { alignItems: 'center', justifyContent: 'center' }]}>
+            <AntDesign name="areachart" size={30} color={'#384288'} />
+         </View>
+         <View style={[Styles.ml10, { flex: 1 }]}>
+            <Text style={[Styles.mb05]}>{text}</Text>
+            <ProgressBar margin={0} />
+         </View>
+      </View>
+   )
+}

components/sectionTanggalTugas.tsx

@@ -0,0 +1,13 @@
+import Styles from "@/constants/Styles";
+import { Text, View } from "react-native";
+
+export default function SectionTanggalTugas() {
+   return (
+      <View style={[Styles.mb15]}>
+         <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Tanggal Dan Tugas</Text>
+         <View style={[Styles.wrapPaper]}>
+            
+         </View>
+      </View>
+   )
+}

constants/Styles.ts

@@ -217,6 +217,7 @@ const Styles = StyleSheet.create({
       shadowRadius: 3,
       elevation: 10,
       borderRadius: 15,
+      marginBottom:15
    },
    wrapGridCaraousel: {
       width: '80%',
@@ -247,6 +248,7 @@ const Styles = StyleSheet.create({
       backgroundColor: '#ccc',
       borderRadius: 10,
       margin: 10,
+      width:'90%'
    },
    contentBar: {
       height: 20,