upd: divisi

Deskripsi:
- input date

- laporan divisi

NoIssues

components/division/reportChartDocument.tsx

@@ -2,10 +2,11 @@ import Styles from "@/constants/Styles";
 import { Dimensions, Text, View } from "react-native";
 import { BarChart } from "react-native-gifted-charts";
 
-export default function ReportChartDocument() {
+export default function ReportChartDocument({ data }: { data: { label: string; value: number; }[] }) {
+   const maxValue = Math.max(...data.map(i => i.value))
    const barData = [
-      { value: 23, label: 'Gambar', frontColor: '#fac858' },
-      { value: 12, label: 'Dokumen', frontColor: '#92cc76' },
+      { value: 23, label: 'Gambar', },
+      { value: 12, label: 'Dokumen' },
    ];
    const width = Dimensions.get("window").width;
 
@@ -15,12 +16,13 @@ export default function ReportChartDocument() {
          <BarChart
             showFractionalValues={false}
             showYAxisIndices
-            noOfSections={4}
-            maxValue={25}
-            data={barData}
+            noOfSections={maxValue < 5 ? 2 : 4}
+            maxValue={maxValue}
+            data={data}
             isAnimated
             width={width - 140}
             barWidth={width * 0.25}
+            frontColor="#fac858"
             renderTooltip={(item: any, index: any) => {
                return (
                   <View

components/division/reportChartEvent.tsx

@@ -2,11 +2,12 @@ import Styles from "@/constants/Styles";
 import { Dimensions, Text, View } from "react-native";
 import { BarChart } from "react-native-gifted-charts";
 
-export default function ReportChartEvent() {
+export default function ReportChartEvent({ data }: { data: { label: string; value: number; }[] }) {
    const width = Dimensions.get("window").width;
+   const maxValue = Math.max(...data.map(i => i.value))
    const barData = [
-      { value: 23, label: 'Akan Datang', frontColor: 'gray' },
-      { value: 12, label: 'Selesai', frontColor: '#177AD5' },
+      { value: 23, label: 'Akan Datang', },
+      { value: 12, label: 'Selesai' },
    ];
 
    return (
@@ -15,9 +16,10 @@ export default function ReportChartEvent() {
          <BarChart
             showFractionalValues={false}
             showYAxisIndices
-            noOfSections={4}
-            maxValue={25}
-            data={barData}
+            noOfSections={maxValue < 5 ? 2 : 4}
+            maxValue={maxValue}
+            frontColor="#177AD5"
+            data={data}
             isAnimated
             width={width - 140}
             barWidth={width * 0.25}

components/division/reportChartProgress.tsx

@@ -2,7 +2,7 @@ import Styles from "@/constants/Styles";
 import { Text, View } from "react-native";
 import { PieChart } from "react-native-gifted-charts";
 
-export default function ReportChartProgress() {
+export default function ReportChartProgress({ data }: { data: { color: string; text: string; value: number; }[] }) {
    const pieData = [
       { value: 54, text: "54%", color: '#177AD5' },
       { value: 40, text: "40%", color: '#92cc76' },
@@ -14,7 +14,7 @@ export default function ReportChartProgress() {
       <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
          <Text style={[Styles.textSubtitle, Styles.mv15]}>PROGRES KEGIATAN</Text>
          <PieChart
-            data={pieData}
+            data={data}
             showText
             showValuesAsTooltipText
             textColor="black"

components/inputDate.tsx

@@ -0,0 +1,68 @@
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { stringToDate } from "@/lib/fun_stringToDate";
+import DateTimePicker from "@react-native-community/datetimepicker";
+import dayjs from "dayjs";
+import { useState } from "react";
+import { Pressable, Text, View } from "react-native";
+
+type Props = {
+   label?: string;
+   placeholder?: string;
+   onChange: (val: string) => void;
+   info?: string;
+   error?: boolean;
+   errorText?: string;
+   required?: boolean;
+   type: 'date' | 'datetime' | 'time'
+   round?: boolean
+   width?: number
+   bg?: 'white' | 'transparent'
+   value?: string
+   disable?: boolean
+};
+
+
+export function InputDate({ label, value, placeholder, onChange, info, disable, error, errorText, required, type, round, width, }: Props) {
+   const [modal, setModal] = useState(false);
+
+   const onChangeDate = ({ type }: { type: string }, selectedDate: any) => {
+      if (type === "set") {
+         onChange(dayjs(selectedDate).format("DD-MM-YYYY"))
+         setModal(false)
+      } else {
+         setModal(false);
+      }
+   };
+
+   return (
+      <>
+         <View style={[Styles.mb10]}>
+            {
+               label != undefined && (
+                  <Text style={[Styles.mb05, error && Styles.cError]}>
+                     {label}
+                     {required && (<Text style={Styles.cError}>*</Text>)}
+                  </Text>
+               )
+            }
+            <Pressable style={[Styles.inputRoundForm, disable && ColorsStatus.gray, error && { borderColor: "red" }, { backgroundColor: 'white' }]} onPress={() => setModal(true)} disabled={disable}>
+               <Text style={!value && [Styles.cGray]}>{value ? value : placeholder}</Text>
+            </Pressable>
+            {error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
+            {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
+         </View>
+         {
+            modal && (
+               <DateTimePicker
+                  value={value ? stringToDate(value) : new Date()}
+                  mode={type}
+                  display="default"
+                  onChange={onChangeDate}
+                  onTouchCancel={() => setModal(false)}
+               />
+            )
+         }
+      </>
+   )
+}