upd: report divisi

Deskripsi:
- ui report divisi

No Issues

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