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

upd: skeleton loading

Browse Source 
Deskripsi:
- home
- list lembaga desa
- list jabatan
- list member
- detail member

No Issues
This commit is contained in:
amel
2025-06-02 17:25:52 +08:00
parent d9a9c821ea
commit 36294ec4eb
13 changed files with 410 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
components/home/chartProgresHome.tsx
View File

@@ -4,6 +4,7 @@ import { useAuthSession } from "@/providers/AuthProvider";
import { useEffect, useState } from "react";
import { Text, View } from "react-native";
import { PieChart } from "react-native-gifted-charts";
import Skeleton from "../skeleton";
type Props = {
value: number;
@@ -14,9 +15,11 @@ type Props = {
export default function ChartProgresHome() {
const { decryptToken, token } = useAuthSession()
const [data, setData] = useState<Props>([])
const [loading, setLoading] = useState(true)
async function handleData() {
try {
setLoading(true)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDataHome({ cat: "progress", user: hasil })
const convertedArray = response.data.map((item: { color: any; text: any; value: any; }) => ({
@@ -27,6 +30,8 @@ export default function ChartProgresHome() {
setData(convertedArray)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
@@ -37,44 +42,50 @@ export default function ChartProgresHome() {
return (
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
<Text style={[Styles.textSubtitle, Styles.mv15]}>PROGRES KEGIATAN</Text>
<PieChart
data={data}
showText
showValuesAsTooltipText
textColor="black"
radius={120}
textSize={15}
focusOnPress={false}
showValuesAsLabels
showTextBackground={false}
textBackgroundRadius={0}
isAnimated
/>
{
loading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
:
<>
<PieChart
data={data}
showText
showValuesAsTooltipText
textColor="black"
radius={120}
textSize={15}
focusOnPress={false}
showValuesAsLabels
showTextBackground={false}
textBackgroundRadius={0}
isAnimated
/>
<View style={[Styles.mt15]}>
<View style={[Styles.rowSpaceBetween, Styles.w80]}>
<View style={[Styles.rowItemsCenter, Styles.w60]}>
<View style={[Styles.iconContent, { backgroundColor: '#177AD5' }]}></View>
<Text style={[Styles.textInformation, Styles.ml10]}>Segera Dikerjakan</Text>
</View>
<View style={[Styles.mt15]}>
<View style={[Styles.rowSpaceBetween, Styles.w80]}>
<View style={[Styles.rowItemsCenter, Styles.w60]}>
<View style={[Styles.iconContent, { backgroundColor: '#177AD5' }]}></View>
<Text style={[Styles.textInformation, Styles.ml10]}>Segera Dikerjakan</Text>
</View>
<View style={[Styles.rowItemsCenter, Styles.w50]}>
<View style={[Styles.iconContent, { backgroundColor: '#92cc76' }]}></View>
<Text style={[Styles.textInformation, Styles.ml10]}>Selesai</Text>
</View>
</View>
<View style={[Styles.rowSpaceBetween, Styles.w80, Styles.mt10]}>
<View style={[Styles.rowItemsCenter, Styles.w60]}>
<View style={[Styles.iconContent, { backgroundColor: '#fac858' }]}></View>
<Text style={[Styles.textInformation, Styles.ml10]}>Dikerjakan</Text>
</View>
<View style={[Styles.rowItemsCenter, Styles.w50]}>
<View style={[Styles.iconContent, { backgroundColor: '#92cc76' }]}></View>
<Text style={[Styles.textInformation, Styles.ml10]}>Selesai</Text>
</View>
</View>
<View style={[Styles.rowSpaceBetween, Styles.w80, Styles.mt10]}>
<View style={[Styles.rowItemsCenter, Styles.w60]}>
<View style={[Styles.iconContent, { backgroundColor: '#fac858' }]}></View>
<Text style={[Styles.textInformation, Styles.ml10]}>Dikerjakan</Text>
</View>
<View style={[Styles.rowItemsCenter, Styles.w50]}>
<View style={[Styles.iconContent, { backgroundColor: '#ED6665' }]}></View>
<Text style={[Styles.textInformation, Styles.ml10]}>Dibatalkan</Text>
</View>
</View>
</View>
<View style={[Styles.rowItemsCenter, Styles.w50]}>
<View style={[Styles.iconContent, { backgroundColor: '#ED6665' }]}></View>
<Text style={[Styles.textInformation, Styles.ml10]}>Dibatalkan</Text>
</View>
</View>
</View>
</>
}
</View>
)
}