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

upd: skeleton

Browse Source 
Deskripsi:
- diskusi umum
- detail diskusi umum
- list pengumuman
- detail pengumuman
- list kegiatan
- detail kegiatan

No Issues
This commit is contained in:
amel
2025-06-03 17:43:45 +08:00
parent 36294ec4eb
commit 1e6a6d08ae
20 changed files with 541 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
app/(application)/announcement/[id].tsx
View File

@@ -1,9 +1,10 @@
import HeaderRightAnnouncementDetail from "@/components/announcement/headerAnnouncementDetail";
import ButtonBackHeader from "@/components/buttonBackHeader";
import Skeleton from "@/components/skeleton";
import Styles from "@/constants/Styles";
import { apiGetAnnouncementOne } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { AntDesign, Entypo, MaterialIcons } from "@expo/vector-icons";
import { Entypo, MaterialIcons } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { Dimensions, SafeAreaView, ScrollView, Text, View } from "react-native";
@@ -24,22 +25,31 @@ export default function DetailAnnouncement() {
const update = useSelector((state: any) => state.announcementUpdate)
const entityUser = useSelector((state: any) => state.user)
const contentWidth = Dimensions.get('window').width
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 2 }, (_, index) => index)
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetAnnouncementOne({ id: id, user: hasil })
setData(response.data)
setDataMember(response.member)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
useEffect(() => {
handleLoad()
handleLoad(false)
}, [update])
useEffect(() => {
handleLoad(true)
}, [])
return (
<SafeAreaView>
<Stack.Screen
@@ -53,37 +63,66 @@ export default function DetailAnnouncement() {
<ScrollView>
<View style={[Styles.p15]}>
<View style={[Styles.wrapPaper]}>
<View style={Styles.rowItemsCenter}>
<MaterialIcons name="campaign" size={30} color="black" style={Styles.mr05} />
<Text style={[Styles.textDefaultSemiBold]}>{data?.title}</Text>
</View>
<View style={[Styles.mt10]}>
<RenderHTML
contentWidth={contentWidth}
source={{ html: data?.desc }}
/>
</View>
{
loading ?
<View>
<View style={[Styles.rowOnly]}>
<Skeleton width={30} height={30} borderRadius={10} />
<View style={[{ flex: 1 }, Styles.ph05]}>
<Skeleton width={100} widthType="percent" height={30} borderRadius={10} />
</View>
</View>
<Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
<Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
<Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
</View>
:
<>
<View style={Styles.rowItemsCenter}>
<MaterialIcons name="campaign" size={30} color="black" style={Styles.mr05} />
<Text style={[Styles.textDefaultSemiBold]}>{data?.title}</Text>
</View>
<View style={[Styles.mt10]}>
<RenderHTML
contentWidth={contentWidth}
source={{ html: data?.desc }}
/>
</View>
</>
}
</View>
<View style={[Styles.wrapPaper, Styles.mv15]}>
{
Object.keys(dataMember).map((v: any, i: any) => {
return (
<View key={i} style={[Styles.mb05]}>
<Text style={[Styles.textDefaultSemiBold]}>{dataMember[v]?.[0].group}</Text>
{
dataMember[v].map((item: any, x: any) => {
return (
<View key={x} style={[Styles.rowItemsCenter]}>
<Entypo name="dot-single" size={24} color="black" />
<Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{item.division}</Text>
</View>
)
})
}
loading ?
arrSkeleton.map((item, index) => {
return (
<View key={index}>
<Skeleton width={30} widthType="percent" height={10} borderRadius={10} />
<Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
<Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
</View>
)
})
:
Object.keys(dataMember).map((v: any, i: any) => {
return (
<View key={i} style={[Styles.mb05]}>
<Text style={[Styles.textDefaultSemiBold]}>{dataMember[v]?.[0].group}</Text>
{
dataMember[v].map((item: any, x: any) => {
return (
<View key={x} style={[Styles.rowItemsCenter, Styles.w90]}>
<Entypo name="dot-single" size={24} color="black" />
<Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{item.division}</Text>
</View>
)
})
}
</View>
)
})
</View>
)
})
}
</View>
</View>

57
app/(application)/announcement/index.tsx
View File

@@ -2,6 +2,7 @@ import HeaderRightAnnouncementList from "@/components/announcement/headerAnnounc
import BorderBottomItem from "@/components/borderBottomItem";
import ButtonBackHeader from "@/components/buttonBackHeader";
import InputSearch from "@/components/inputSearch";
import SkeletonContent from "@/components/skeletonContent";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetAnnouncement } from "@/lib/api";
@@ -26,20 +27,29 @@ export default function Announcement() {
const [search, setSearch] = useState('')
const entityUser = useSelector((state: any) => state.user)
const update = useSelector((state: any) => state.announcementUpdate)
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetAnnouncement({ user: hasil, search: search })
setData(response.data)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
useEffect(() => {
handleLoad()
}, [search, update])
handleLoad(false)
}, [update])
useEffect(() => {
handleLoad(true)
}, [search])
return (
<SafeAreaView>
@@ -56,27 +66,34 @@ export default function Announcement() {
<View style={[Styles.p15, Styles.mb100]}>
<InputSearch onChange={setSearch} />
{
data.length > 0
?
data.map((item, index) => {
loading ?
arrSkeleton.map((item, index) => {
return (
<BorderBottomItem
key={index}
onPress={() => { router.push(`/announcement/${item.id}`) }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="campaign" size={25} color={'#384288'} />
</View>
}
title={item.title}
desc={item.desc.replace(/<[^>]*>?/gm, '')}
rightTopInfo={item.createdAt}
/>
<SkeletonContent key={index} />
)
})
:
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada pengumuman</Text>
data.length > 0
?
data.map((item, index) => {
return (
<BorderBottomItem
key={index}
onPress={() => { router.push(`/announcement/${item.id}`) }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="campaign" size={25} color={'#384288'} />
</View>
}
title={item.title}
desc={item.desc.replace(/<[^>]*>?/gm, '')}
rightTopInfo={item.createdAt}
/>
)
})
:
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada pengumuman</Text>
}
</View>
</ScrollView>

118
app/(application)/discussion/[id].tsx
View File

@@ -4,6 +4,8 @@ import HeaderRightDiscussionGeneralDetail from "@/components/discussion_general/
import ImageUser from "@/components/imageNew";
import { InputForm } from "@/components/inputForm";
import LabelStatus from "@/components/labelStatus";
import Skeleton from "@/components/skeleton";
import SkeletonContent from "@/components/skeletonContent";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetDiscussionGeneralOne, apiSendDiscussionGeneralCommentar } from "@/lib/api";
@@ -41,12 +43,22 @@ export default function DetailDiscussionGeneral() {
const [memberDiscussion, setMemberDiscussion] = useState(false)
const [komentar, setKomentar] = useState('')
const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
const [loading, setLoading] = useState(true)
const [loadingKomentar, setLoadingKomentar] = useState(true)
const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
async function handleLoad(cat: 'detail' | 'komentar' | 'cek-anggota') {
async function handleLoad(cat: 'detail' | 'komentar' | 'cek-anggota', loading: boolean) {
try {
if (cat == "detail") {
setLoading(loading)
} else if (cat == "komentar") {
setLoadingKomentar(loading)
}
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDiscussionGeneralOne({ id: id, user: hasil, cat })
if (cat == 'detail') {
setData(response.data)
} else if (cat == 'komentar') {
@@ -54,17 +66,27 @@ export default function DetailDiscussionGeneral() {
} else if (cat == 'cek-anggota') {
setMemberDiscussion(response.data)
}
} catch (error) {
console.error(error)
} finally {
setLoading(false)
setLoadingKomentar(false)
}
}
useEffect(() => {
handleLoad('detail')
handleLoad('komentar')
handleLoad('cek-anggota')
handleLoad('detail', false)
handleLoad('komentar', false)
handleLoad('cek-anggota', false)
}, [update]);
useEffect(() => {
handleLoad('detail', true)
handleLoad('komentar', true)
handleLoad('cek-anggota', true)
}, []);
async function handleKomentar() {
try {
if (komentar != '') {
@@ -72,7 +94,7 @@ export default function DetailDiscussionGeneral() {
const response = await apiSendDiscussionGeneralCommentar({ id: id, data: { desc: komentar, user: hasil } })
if (response.success) {
setKomentar('')
handleLoad('komentar')
handleLoad('komentar', false)
}
}
} catch (error) {
@@ -93,45 +115,57 @@ export default function DetailDiscussionGeneral() {
<View style={{ flex: 1 }}>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<BorderBottomItem
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title={data?.title}
subtitle={
!data?.isActive ?
<LabelStatus category='warning' text='ARSIP' size="small" />
:
<LabelStatus category={data.status == 1 ? 'success' : 'error'} text={data.status == 1 ? 'BUKA' : 'TUTUP'} size="small" />
}
rightTopInfo={data?.createdAt}
desc={data?.desc}
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>{dataKomentar.length} Komentar</Text>
</View>
}
/>
{
loading ?
<SkeletonContent />
:
<BorderBottomItem
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title={data?.title}
subtitle={
!data?.isActive ?
<LabelStatus category='warning' text='ARSIP' size="small" />
:
<LabelStatus category={data.status == 1 ? 'success' : 'error'} text={data.status == 1 ? 'BUKA' : 'TUTUP'} size="small" />
}
rightTopInfo={data?.createdAt}
desc={data?.desc}
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>{dataKomentar.length} Komentar</Text>
</View>
}
/>
}
<View style={[Styles.p15]}>
{
dataKomentar.map((item, i) => {
return (
<BorderBottomItem
key={i}
borderType="bottom"
icon={
<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="xs" />
}
title={item.username}
rightTopInfo={item.createdAt}
desc={item.comment}
/>
)
})
loadingKomentar ?
arrSkeleton.map((item: any, i: number) => {
return (
<Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
)
})
:
dataKomentar.map((item, i) => {
return (
<BorderBottomItem
key={i}
borderType="bottom"
icon={
<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="xs" />
}
title={item.username}
rightTopInfo={item.createdAt}
desc={item.comment}
/>
)
})
}
</View>
</View>

78
app/(application)/discussion/index.tsx
View File

@@ -2,6 +2,7 @@ import BorderBottomItem from "@/components/borderBottomItem";
import ButtonTab from "@/components/buttonTab";
import InputSearch from "@/components/inputSearch";
import LabelStatus from "@/components/labelStatus";
import SkeletonContent from "@/components/skeletonContent";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetDiscussionGeneral } from "@/lib/api";
@@ -30,21 +31,30 @@ export default function Discussion() {
const [nameGroup, setNameGroup] = useState('')
const [data, setData] = useState<Props[]>([])
const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDiscussionGeneral({ user: hasil, active: String(active), search: search, group: String(group) })
setData(response.data)
setNameGroup(response.filter.name)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
useEffect(() => {
handleLoad()
}, [active, search, group, update])
handleLoad(true)
}, [active, search, group])
useEffect(() => {
handleLoad(false)
}, [update])
return (
<SafeAreaView>
@@ -75,37 +85,45 @@ export default function Discussion() {
}
<View>
{
data.length > 0
?
data.map((item: any, i: number) => {
loading ?
arrSkeleton.map((item: any, i: number) => {
return (
<BorderBottomItem
key={i}
onPress={() => { router.push(`/discussion/${item.id}`) }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title={item.title}
subtitle={
active != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
}
rightTopInfo={item.createdAt}
desc={item.desc}
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
</View>
}
rightBottomInfo={`${item.total_komentar} Komentar`}
/>
<SkeletonContent key={i} />
)
})
:
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
data.length > 0
?
data.map((item: any, i: number) => {
return (
<BorderBottomItem
key={i}
onPress={() => { router.push(`/discussion/${item.id}`) }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title={item.title}
subtitle={
active != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
}
rightTopInfo={item.createdAt}
desc={item.desc}
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
</View>
}
rightBottomInfo={`${item.total_komentar} Komentar`}
/>
)
})
:
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
}
</View>
</View>

59
app/(application)/discussion/member/[id].tsx
View File

@@ -4,6 +4,7 @@ import ButtonBackHeader from "@/components/buttonBackHeader";
import DrawerBottom from "@/components/drawerBottom";
import ImageUser from "@/components/imageNew";
import MenuItemRow from "@/components/menuItemRow";
import SkeletonTwoItem from "@/components/skeletonTwoItem";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiDeleteMemberDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api";
@@ -28,28 +29,37 @@ export default function MemberDiscussionDetail() {
const [isModal, setModal] = useState(false)
const [chooseUser, setChooseUser] = useState({ idUser: '', name: '', img: '' })
const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDiscussionGeneralOne({ id: id, user: hasil, cat: 'anggota' })
setData(response.data)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
useEffect(() => {
handleLoad(false)
}, [update]);
useEffect(() => {
handleLoad()
}, [update]);
handleLoad(true)
}, []);
async function handleDeleteUser() {
try {
const hasil = await decryptToken(String(token?.current))
await apiDeleteMemberDiscussionGeneral({ user: hasil, idUser: chooseUser.idUser }, id)
ToastAndroid.show("Berhasil mengelluarkan anggota dari diskusi", ToastAndroid.SHORT)
handleLoad()
ToastAndroid.show("Berhasil mengeluarkan anggota dari diskusi", ToastAndroid.SHORT)
handleLoad(false)
} catch (error) {
console.error(error)
} finally {
@@ -84,22 +94,29 @@ export default function MemberDiscussionDetail() {
/>
}
{
data.map((item, index) => {
return (
<BorderBottomItem
key={index}
borderType="bottom"
icon={
<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
}
title={item.name}
onPress={() => {
setChooseUser(item)
setModal(true)
}}
/>
)
})
loading ?
arrSkeleton.map((item, index) => {
return (
<SkeletonTwoItem key={index} />
)
})
:
data.map((item, index) => {
return (
<BorderBottomItem
key={index}
borderType="bottom"
icon={
<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
}
title={item.name}
onPress={() => {
setChooseUser(item)
setModal(true)
}}
/>
)
})
}
</View>
</View>

8
app/(application)/group/index.tsx
View File

@@ -84,13 +84,15 @@ export default function Index() {
}
}
useEffect(() => {
handleLoad(false)
}, [update])
useEffect(() => {
handleLoad(true)
}, [active, search])
useEffect(() => {
handleLoad(false)
}, [update])
return (

9
app/(application)/position/index.tsx
View File

@@ -59,15 +59,16 @@ export default function Index() {
}
}
useEffect(() => {
handleLoad(true)
}, [active, search, group])
useEffect(() => {
handleLoad(false)
}, [update])
useEffect(() => {
handleLoad(true)
}, [active, search, group])
function handleChooseData(id: string, name: string, active: boolean, group: string) {
setChooseData({ id, name, active, idGroup: group })
setModal(true)

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

@@ -78,7 +78,7 @@ export default function DetailProject() {
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: loading ? 'Loading...' : data?.title,
headerTitle: loading ? 'Loading... ' : data?.title,
headerTitleAlign: 'center',
headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMember ? null : <HeaderRightProjectDetail id={id} status={data?.status} />,
}}

172
app/(application)/project/index.tsx
View File

@@ -4,6 +4,8 @@ import InputSearch from "@/components/inputSearch";
import LabelStatus from "@/components/labelStatus";
import PaperGridContent from "@/components/paperGridContent";
import ProgressBar from "@/components/progressBar";
import Skeleton from "@/components/skeleton";
import SkeletonTwoItem from "@/components/skeletonTwoItem";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetProject } from "@/lib/api";
@@ -41,9 +43,12 @@ export default function ListProject() {
const [data, setData] = useState<Props[]>([]);
const [isList, setList] = useState(false);
const update = useSelector((state: any) => state.projectUpdate)
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetProject({
user: hasil,
@@ -59,12 +64,19 @@ export default function ListProject() {
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
useEffect(() => {
handleLoad();
}, [status, search, group, cat, update.data]);
handleLoad(false);
}, [update.data]);
useEffect(() => {
handleLoad(true);
}, [status, search, group, cat]);
return (
<SafeAreaView>
@@ -75,7 +87,7 @@ export default function ListProject() {
active={String(status)}
value="0"
onPress={() => {
router.push(
router.replace(
`/project?status=0&group=${group}&search=${search}&cat=${cat}`
);
}}
@@ -93,7 +105,7 @@ export default function ListProject() {
active={String(status)}
value="1"
onPress={() => {
router.push(
router.replace(
`/project?status=1&group=${group}&search=${search}&cat=${cat}`
);
}}
@@ -111,7 +123,7 @@ export default function ListProject() {
active={String(status)}
value="2"
onPress={() => {
router.push(
router.replace(
`/project?status=2&group=${group}&search=${search}&cat=${cat}`
);
}}
@@ -129,7 +141,7 @@ export default function ListProject() {
active={String(status)}
value="3"
onPress={() => {
router.push(
router.replace(
`/project?status=3&group=${group}&search=${search}&cat=${cat}`
);
}}
@@ -171,77 +183,87 @@ export default function ListProject() {
</Text>
</View>
{
data.length > 0
?
isList ? (
<View>
{data.map((item, index) => {
return (
<BorderBottomItem
key={index}
onPress={() => { router.push(`/project/${item.id}`); }}
borderType="bottom"
icon={
<View
style={[Styles.iconContent, ColorsStatus.lightGreen]}
>
<AntDesign
name="areachart"
size={25}
color={"#384288"}
loading ?
isList ?
arrSkeleton.map((item, index) => (
<SkeletonTwoItem key={index} />
))
:
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
))
:
data.length > 0
?
isList ? (
<View>
{data.map((item, index) => {
return (
<BorderBottomItem
key={index}
onPress={() => { router.push(`/project/${item.id}`); }}
borderType="bottom"
icon={
<View
style={[Styles.iconContent, ColorsStatus.lightGreen]}
>
<AntDesign
name="areachart"
size={25}
color={"#384288"}
/>
</View>
}
title={item.title}
/>
);
})}
</View>
) : (
<View>
{data.map((item, index) => {
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]}>
{item.createdAt}
</Text>
<LabelStatus
size="default"
category={
item.status === 0 ? 'primary' :
item.status === 1 ? 'warning' :
item.status === 2 ? 'success' :
item.status === 3 ? 'error' :
'primary'
}
text={
item.status === 0 ? 'SEGERA' :
item.status === 1 ? 'DIKERJAKAN' :
item.status === 2 ? 'SELESAI' :
item.status === 3 ? 'DIBATALKAN' :
'SEGERA'
}
/>
</View>
}
title={item.title}
/>
);
})}
</PaperGridContent>
);
})}
</View>
)
:
<View style={[Styles.mt15]}>
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada kegiatan</Text>
</View>
) : (
<View>
{data.map((item, index) => {
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]}>
{item.createdAt}
</Text>
<LabelStatus
size="default"
category={
item.status === 0 ? 'primary' :
item.status === 1 ? 'warning' :
item.status === 2 ? 'success' :
item.status === 3 ? 'error' :
'primary'
}
text={
item.status === 0 ? 'SEGERA' :
item.status === 1 ? 'DIKERJAKAN' :
item.status === 2 ? 'SELESAI' :
item.status === 3 ? 'DIBATALKAN' :
'SEGERA'
}
/>
</View>
</PaperGridContent>
);
})}
</View>
)
:
<View style={[Styles.mt15]}>
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada kegiatan</Text>
</View>
}
</View>
</ScrollView>