upd: report divisi

Deskripsi:
- ui report divisi

No Issues

app/(application)/division/report.tsx

@@ -0,0 +1,36 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ReportChartDocument from "@/components/division/reportChartDocument";
+import ReportChartEvent from "@/components/division/reportChartEvent";
+import ReportChartProgress from "@/components/division/reportChartProgress";
+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, View } from "react-native";
+
+export default function Report() {
+   const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Laporan Divisi',
+               headerTitleAlign: 'center',
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <SelectForm bg="white" label="Lembaga Desa" placeholder="Pilih Lembaga Desa" value={chooseGroup.label} required onPress={() => { }} />
+               <InputForm bg="white" label="Tanggal Awal" type="default" placeholder="Pilih Tanggal Awal" required />
+               <InputForm bg="white" label="Tanggal Akhir" type="default" placeholder="Pilih Tanggal Akhir" required />
+               <ReportChartProgress />
+               <ReportChartDocument />
+               <ReportChartEvent />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

components/division/headerDivisionList.tsx

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

components/division/reportChartDocument.tsx

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

components/division/reportChartEvent.tsx

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

components/division/reportChartProgress.tsx

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

components/selectForm.tsx

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