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

upd: report divisi

Browse Source 
Deskripsi:
- ui report divisi

No Issues
This commit is contained in:
amel
2025-03-10 12:07:41 +08:00
parent 6e543b3562
commit 60132177ae
6 changed files with 152 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/division/headerDivisionList.tsx
View File

@@ -6,6 +6,7 @@ import Styles from "@/constants/Styles"
import MenuItemRow from "../menuItemRow"
import { AntDesign, MaterialCommunityIcons } from "@expo/vector-icons"
import ModalFilter from "../modalFilter"
import { router } from "expo-router"
export default function HeaderRightDivisionList() {
const [isVisible, setVisible] = useState(false)
@@ -17,7 +18,7 @@ export default function HeaderRightDivisionList() {
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />}
title="Tambah Kegiatan"
title="Tambah Divisi"
onPress={() => {
setVisible(false)
// router.push('/project/create')
@@ -36,7 +37,7 @@ export default function HeaderRightDivisionList() {
title="Laporan"
onPress={() => {
setVisible(false)
// router.push('/project/create')
router.push('/division/report')
}}
/>
</View>

39
components/division/reportChartDocument.tsx Normal file
View File

@@ -0,0 +1,39 @@
import Styles from "@/constants/Styles";
import { Dimensions, Text, View } from "react-native";
import { BarChart } from "react-native-gifted-charts";
export default function ReportChartDocument() {
const barData = [
{ value: 23, label: 'Gambar', frontColor: '#fac858' },
{ value: 12, label: 'Dokumen', frontColor: '#92cc76' },
];
const width = Dimensions.get("window").width;
return (
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
<Text style={[Styles.textSubtitle, Styles.mv15]}>JUMLAH DOKUMEN</Text>
<BarChart
showFractionalValues={false}
showYAxisIndices
noOfSections={4}
maxValue={25}
data={barData}
isAnimated
width={width - 140}
barWidth={width * 0.25}
renderTooltip={(item: any, index: any) => {
return (
<View
style={{
alignItems: 'center',
justifyContent: 'center',
width: width * 0.25
}}>
<Text>{item.value}</Text>
</View>
);
}}
/>
</View>
)
}

39
components/division/reportChartEvent.tsx Normal file
View File

@@ -0,0 +1,39 @@
import Styles from "@/constants/Styles";
import { Dimensions, Text, View } from "react-native";
import { BarChart } from "react-native-gifted-charts";
export default function ReportChartEvent() {
const width = Dimensions.get("window").width;
const barData = [
{ value: 23, label: 'Akan Datang', frontColor: 'gray' },
{ value: 12, label: 'Selesai', frontColor: '#177AD5' },
];
return (
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
<Text style={[Styles.textSubtitle, Styles.mv15]}>ACARA DIVISI</Text>
<BarChart
showFractionalValues={false}
showYAxisIndices
noOfSections={4}
maxValue={25}
data={barData}
isAnimated
width={width - 140}
barWidth={width * 0.25}
renderTooltip={(item: any, index: any) => {
return (
<View
style={{
alignItems: 'center',
justifyContent: 'center',
width: width * 0.25
}}>
<Text>{item.value}</Text>
</View>
);
}}
/>
</View>
)
}

31
components/division/reportChartProgress.tsx Normal file
View File

@@ -0,0 +1,31 @@
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";
import { PieChart } from "react-native-gifted-charts";
export default function ReportChartProgress() {
const pieData = [
{ value: 54, text: "54%", color: '#177AD5' },
{ value: 40, text: "40%", color: '#92cc76' },
{ value: 20, text: "20%", color: '#ED6665' },
{ value: 0, text: "0%", color: '#fac858' },
];
return (
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
<Text style={[Styles.textSubtitle, Styles.mv15]}>PROGRES KEGIATAN</Text>
<PieChart
data={pieData}
showText
showValuesAsTooltipText
textColor="black"
radius={120}
textSize={15}
focusOnPress={false}
showValuesAsLabels
showTextBackground={false}
textBackgroundRadius={0}
isAnimated
/>
</View>
)
}

7
components/selectForm.tsx
View File

@@ -14,9 +14,10 @@ type Props = {
errorText?: string;
required?: boolean;
round?: boolean
bg?: 'white' | 'transparent'
};
export default function SelectForm({ label, value, placeholder, onPress, info, error, errorText, required, itemLeft, round }: Props) {
export default function SelectForm({ label, value, placeholder, onPress, info, error, errorText, required, itemLeft, round, bg }: Props) {
return (
<View style={[Styles.mb10]}>
{
@@ -28,7 +29,7 @@ export default function SelectForm({ label, value, placeholder, onPress, info, e
)
}
<Pressable onPressOut={onPress}>
<View style={[Styles.inputRoundForm, Styles.inputRoundFormRight, error && { borderColor: "red" }, round && Styles.round30, Styles.pv10]}>
<View style={[Styles.inputRoundForm, Styles.inputRoundFormRight, error && { borderColor: "red" }, round && Styles.round30, Styles.pv10, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }]}>
<Feather name="chevron-right" size={20} color="grey" />
{
value ? (
@@ -40,7 +41,7 @@ export default function SelectForm({ label, value, placeholder, onPress, info, e
</View>
</Pressable>
{error && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cError]}>{errorText}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05 , Styles.cGray]}>{info}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
</View>
)
}