wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #6 from bipproduction/amalia/05-mar-25

Browse Source 
Amalia/05 mar 25
This commit is contained in:
Amalia
2025-03-05 15:39:26 +08:00
committed by GitHub
parent 08a9578d1f 8806f33a8d
commit ca1e786a01
22 changed files with 679 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/(application)/_layout.tsx
View File

@@ -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" />
</>

73
app/(application)/banner/[id].tsx Normal file
View File

@@ -0,0 +1,73 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi"
import ButtonBackHeader from "@/components/buttonBackHeader"
import { ButtonForm } from "@/components/buttonForm"
import { InputForm } from "@/components/inputForm"
import Styles from "@/constants/Styles"
import { Entypo } from "@expo/vector-icons"
import * as ImagePicker from 'expo-image-picker'
import { router, Stack } from "expo-router"
import { useState } from "react"
import { Image, Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
export default function EditBanner() {
const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined)
const pickImageAsync = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ['images'],
allowsEditing: false,
quality: 1,
});
if (!result.canceled) {
setSelectedImage(result.assets[0].uri);
} else {
alert('Tidak ada gambar yang dipilih');
}
};
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Edit Banner',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.mb15]}>
{
selectedImage != undefined ? (
<Pressable onPress={pickImageAsync}>
<Image src={selectedImage} style={{ resizeMode: 'contain', width: '100%', height: 100 }} />
</Pressable>
) : (
<Pressable onPress={pickImageAsync} style={[Styles.wrapPaper, Styles.contentItemCenter]}>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Entypo name="image" size={50} color={'#aeaeae'} />
<Text style={[Styles.textInformation]}>Mohon unggah gambar dalam resolusi 1535 x 450 piksel untuk memastikan</Text>
</View>
</Pressable>
)
}
</View>
<InputForm label="Judul" type="numeric" placeholder="Judul" required />
<ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin mengubah data?',
onPress: () => {
ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
router.push('/banner')
}
})
}} />
</View>
</ScrollView>
</SafeAreaView>
)
}

73
app/(application)/banner/create.tsx Normal file
View File

@@ -0,0 +1,73 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ButtonForm } from "@/components/buttonForm";
import { InputForm } from "@/components/inputForm";
import Styles from "@/constants/Styles";
import { Entypo } from "@expo/vector-icons";
import * as ImagePicker from 'expo-image-picker';
import { router, Stack } from "expo-router";
import { useState } from "react";
import { Image, Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
export default function CreateBanner() {
const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined)
const pickImageAsync = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ['images'],
allowsEditing: false,
quality: 1,
});
if (!result.canceled) {
setSelectedImage(result.assets[0].uri);
} else {
alert('Tidak ada gambar yang dipilih');
}
};
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Tambah Banner',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.mb15]}>
{
selectedImage != undefined ? (
<Pressable onPress={pickImageAsync}>
<Image src={selectedImage} style={{ resizeMode: 'contain', width: '100%', height:100 }} />
</Pressable>
) : (
<Pressable onPress={pickImageAsync} style={[Styles.wrapPaper, Styles.contentItemCenter]}>
<View style={{justifyContent:'center', alignItems:'center'}}>
<Entypo name="image" size={50} color={'#aeaeae'} />
<Text style={[Styles.textInformation]}>Mohon unggah gambar dalam resolusi 1535 x 450 piksel untuk memastikan</Text>
</View>
</Pressable>
)
}
</View>
<InputForm label="Judul" type="numeric" placeholder="Judul" required />
<ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menambahkan data?',
onPress: () => {
ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
router.push('/banner')
}
})
}} />
</View>
</ScrollView>
</SafeAreaView>
)
}

98
app/(application)/banner/index.tsx Normal file
View File

@@ -0,0 +1,98 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi"
import HeaderRightBannerList from "@/components/banner/headerBannerList"
import BorderBottomItem from "@/components/borderBottomItem"
import ButtonBackHeader from "@/components/buttonBackHeader"
import DrawerBottom from "@/components/drawerBottom"
import MenuItemRow from "@/components/menuItemRow"
import Styles from "@/constants/Styles"
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
import { router, Stack } from "expo-router"
import { useState } from "react"
import { Image, SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
export default function BannerList() {
const [isModal, setModal] = useState(false)
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Banner',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightBannerList />
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<BorderBottomItem
onPress={() => { setModal(true) }}
borderType="all"
icon={
<Image
source={require("../../../assets/images/bg.png")}
style={[Styles.imgListBanner]}
/>
}
title="Banner 1"
/>
<BorderBottomItem
onPress={() => { setModal(true) }}
borderType="all"
icon={
<Image
source={require("../../../assets/images/bg.png")}
style={[Styles.imgListBanner]}
/>
}
title="Banner 2"
/>
<BorderBottomItem
onPress={() => { setModal(true) }}
borderType="all"
icon={
<Image
source={require("../../../assets/images/bg.png")}
style={[Styles.imgListBanner]}
/>
}
title="Banner 3"
/>
</View>
</ScrollView>
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
title="Edit"
onPress={() => {
setModal(false)
router.push('/banner/784')
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />}
title="Lihat File"
onPress={() => { }}
/>
<MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />}
title="Hapus"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menghapus data?',
onPress: () => {
setModal(false)
ToastAndroid.show('Berhasil menghapus data', ToastAndroid.SHORT)
}
})
}}
/>
</View>
</DrawerBottom>
</SafeAreaView>
)
}

4
app/(application)/feature.tsx
View File

@@ -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>
@@ -29,7 +29,7 @@ export default function Feature() {
<ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color="black" />} text="Tema" onPress={() => { }} />
</View>
<View style={[Styles.rowSpaceBetween, Styles.mb15]}>
<ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" />
<ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" onPress={() => { router.push('/banner') }} />
</View>
</View>
</SafeAreaView>

29
app/(application)/project/[id]/index.tsx Normal file
View File

@@ -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>
)
}

47
app/(application)/project/create.tsx Normal file
View File

@@ -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>
)
}

138
app/(application)/project/index.tsx Normal file
View File

@@ -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>
)
}

BIN
assets/images/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 481 KiB

29
components/banner/headerBannerList.tsx Normal file
View File

@@ -0,0 +1,29 @@
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";
export default function HeaderRightBannerList() {
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 Banner"
onPress={() => {
setVisible(false)
router.push('/banner/create')
}}
/>
</View>
</DrawerBottom>
</>
)
}

2
components/buttonTab.tsx
View File

@@ -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>

2
components/home/fiturHome.tsx
View File

@@ -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>

7
components/inputForm.tsx
View File

@@ -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>)}

3
components/inputSearch.tsx
View File

@@ -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}
/>
)
}

7
components/modalFilter.tsx
View File

@@ -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>

23
components/paperGridContent.tsx
View File

@@ -1,23 +1,26 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";
import ProgressBar from "./progressBar";
import { Pressable, Text, View } from "react-native";
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]}>
<View style={[Styles.headerPaperGrid]}>
<Text style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite]}>{title}</Text>
<Pressable onPress={onPress}>
<View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : ColorsStatus.primary]}>
<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]}>
{children}
</View>
</View>
</Pressable>
)
}

9
components/progressBar.tsx
View File

@@ -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>
)

66
components/project/headerProjectDetail.tsx Normal file
View File

@@ -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>
</>
)
}

40
components/project/headerProjectList.tsx Normal file
View File

@@ -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" />
</>
)
}

23
components/sectionProgress.tsx Normal file
View File

@@ -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>
)
}

13
components/sectionTanggalTugas.tsx Normal file
View File

@@ -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>
)
}

7
constants/Styles.ts
View File

@@ -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,
@@ -312,6 +314,11 @@ const Styles = StyleSheet.create({
height: 100,
borderRadius: 100
},
imgListBanner: {
width: 100,
height: 50,
borderRadius: 5
},
iconContent: {
padding: 10,
borderRadius: 100,