upd: divisi

Deskripsi:
- input date

- laporan divisi

NoIssues

app/(application)/division/[id]/report.tsx

@@ -2,13 +2,105 @@ 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 { InputDate } from "@/components/inputDate"
 import Styles from "@/constants/Styles"
+import { apiGetDivisionReport } from "@/lib/api"
+import { stringToDate } from "@/lib/fun_stringToDate"
+import { useAuthSession } from "@/providers/AuthProvider"
+import dayjs from "dayjs"
 import { router, Stack, useLocalSearchParams } from "expo-router"
-import { SafeAreaView, ScrollView, View } from "react-native"
+import { useEffect, useState } from "react"
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
 
 export default function ReportDivision() {
-   const { id } = useLocalSearchParams()
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const { token, decryptToken } = useAuthSession();
+   const [showReport, setShowReport] = useState(false);
+   const [dataTable, setDataTable] = useState([])
+   const [dataChart, setDataChart] = useState({
+      progress: [],
+      event: [],
+      dokumen: [],
+   })
+   const [data, setData] = useState({
+      date: "",
+      dateEnd: "",
+   });
+   const [error, setError] = useState({
+      date: false,
+      dateEnd: false,
+   });
+
+   function validationForm( cat: "date" | "dateEnd", val: string) {
+      if (cat == "date") {
+         setData({ ...data, date: val, dateEnd: "" });
+         if (val == "" || val == "null") {
+            setError({ ...error, date: true, dateEnd: false });
+         } else {
+            setError({ ...error, date: false, dateEnd: true });
+         }
+      } else if (cat == "dateEnd") {
+         setData({ ...data, dateEnd: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, dateEnd: true });
+         } else {
+            setError({ ...error, dateEnd: false });
+         }
+         const dateEnd = stringToDate(val);
+         const date = stringToDate(data.date);
+         if (dateEnd < date) {
+            setError({ ...error, dateEnd: true });
+         } else {
+            setError({ ...error, dateEnd: false });
+         }
+      }
+   }
+
+   function checkForm() {
+      if (
+         Object.values(error).some((v) => v == true) == true ||
+         Object.values(data).some((v) => v == "") == true
+      ) {
+         setShowReport(false);
+      } else {
+         setShowReport(true);
+      }
+   }
+
+   useEffect(() => {
+      checkForm();
+   }, [error, data]);
+
+   async function handleReport() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDivisionReport({
+            user: hasil,
+            cat: "lainnya",
+            division: id,
+            date: dayjs(stringToDate(data.date)).format("YYYY-MM-DD"),
+            dateEnd: dayjs(stringToDate(data.dateEnd)).format("YYYY-MM-DD"),
+         });
+         if (response.success) {
+            setDataChart({
+               progress: response.data.progress,
+               event: response.data.event,
+               dokumen: response.data.dokumen,
+            })
+            setShowReport(true);
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      if (showReport) {
+         handleReport();
+      }
+   }, [showReport]);
 
    return (
       <SafeAreaView>
@@ -21,11 +113,34 @@ export default function ReportDivision() {
          />
          <ScrollView>
             <View style={[Styles.p15, Styles.mb100]}>
-               <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 />
+               <InputDate
+                  onChange={(val) => validationForm("date", val)}
+                  type="date"
+                  value={data.date}
+                  label="Tanggal Awal"
+                  required
+                  error={error.date}
+                  errorText="Tanggal awal tidak boleh kosong"
+                  placeholder="Pilih Tanggal Awal"
+               />
+               <InputDate
+                  onChange={(val) => validationForm("dateEnd", val)}
+                  type="date"
+                  value={data.dateEnd}
+                  label="Tanggal Akhir"
+                  required
+                  error={error.dateEnd}
+                  errorText="Tanggal akhir tidak boleh kosong atau lebih awal dari tanggal awal"
+                  placeholder="Pilih Tanggal Akhir"
+               />
+               {showReport && (
+                  <>
+                     <ReportChartProgress data={dataChart.progress} />
+                     <ReportChartDocument data={dataChart.dokumen} />
+                     <ReportChartEvent data={dataChart.event} />
+                  </>
+               )}
+
             </View>
          </ScrollView>
       </SafeAreaView>

app/(application)/division/report.tsx

@@ -2,38 +2,123 @@ 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 { InputDate } from "@/components/inputDate";
+import ModalSelect from "@/components/modalSelect";
 import SelectForm from "@/components/selectForm";
 import Styles from "@/constants/Styles";
+import { apiGetDivisionReport } from "@/lib/api";
+import { stringToDate } from "@/lib/fun_stringToDate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import dayjs from "dayjs";
 import { router, Stack } from "expo-router";
-import { useState } from "react";
-import { Button, SafeAreaView, ScrollView, View } from "react-native";
-import DateTimePickerModal from "react-native-modal-datetime-picker";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native";
 
 export default function Report() {
+   const { token, decryptToken } = useAuthSession();
    const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
+   const [showReport, setShowReport] = useState(false);
+   const [isSelect, setSelect] = useState(false);
+   const [dataTable, setDataTable] = useState([])
+   const [dataChart, setDataChart] = useState({
+      progress: [],
+      event: [],
+      dokumen: [],
+   })
+   const [data, setData] = useState({
+      group: "",
+      date: "",
+      dateEnd: "",
+   });
    const [error, setError] = useState({
       group: false,
       date: false,
       dateEnd: false,
    });
-   const [date, setDate] = useState("");
-   const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
 
-   const showDatePicker = () => {
-      setDatePickerVisibility(true);
-   };
+   function validationForm(
+      cat: "group" | "date" | "dateEnd",
+      val: string,
+      label?: string
+   ) {
+      if (cat == "group") {
+         setChooseGroup({ val, label: String(label) });
+         setData({ ...data, group: val, dateEnd: "", date: "" });
+         if (val == "" || val == "null") {
+            setError({ ...error, group: true });
+         } else {
+            setError({ ...error, group: false });
+         }
+      } else if (cat == "date") {
+         setData({ ...data, date: val, dateEnd: "" });
+         if (val == "" || val == "null") {
+            setError({ ...error, date: true, dateEnd: false });
+         } else {
+            setError({ ...error, date: false, dateEnd: true });
+         }
+      } else if (cat == "dateEnd") {
+         setData({ ...data, dateEnd: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, dateEnd: true });
+         } else {
+            setError({ ...error, dateEnd: false });
+         }
+         const dateEnd = stringToDate(val);
+         const date = stringToDate(data.date);
+         if (dateEnd < date) {
+            setError({ ...error, dateEnd: true });
+         } else {
+            setError({ ...error, dateEnd: false });
+         }
+      }
+   }
 
-   const hideDatePicker = () => {
-      setDatePickerVisibility(false);
-   };
+   function checkForm() {
+      if (
+         Object.values(error).some((v) => v == true) == true ||
+         Object.values(data).some((v) => v == "") == true
+      ) {
+         setShowReport(false);
+      } else {
+         setShowReport(true);
+      }
+   }
 
-   const handleConfirm = (date: any) => {
-      setDate(date);
-      hideDatePicker();
-   };
+   useEffect(() => {
+      checkForm();
+   }, [error, data]);
 
+   async function handleReport() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDivisionReport({
+            user: hasil,
+            cat: "lainnya",
+            division: "undefined",
+            date: dayjs(stringToDate(data.date)).format("YYYY-MM-DD"),
+            dateEnd: dayjs(stringToDate(data.dateEnd)).format("YYYY-MM-DD"),
+            group: chooseGroup.val,
+         });
+         if (response.success) {
+            setDataChart({
+               progress: response.data.progress,
+               event: response.data.event,
+               dokumen: response.data.dokumen,
+            })
+            setShowReport(true);
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
 
+   useEffect(() => {
+      if (showReport) {
+         handleReport();
+      }
+   }, [showReport]);
 
    return (
       <SafeAreaView>
@@ -58,41 +143,52 @@ export default function Report() {
                   placeholder="Pilih Lembaga Desa"
                   value={chooseGroup.label}
                   required
-                  onPress={() => { }}
+                  onPress={() => {
+                     setSelect(true);
+                  }}
                   error={error.group}
                   errorText="Lembaga Desa tidak boleh kosong"
                />
-               <Button title="Open" onPress={showDatePicker} />
-               {/* <DateTimePickerModal
-                  isVisible={isDatePickerVisible}
-                  mode="date"
-                  date={new Date()}
-                  onConfirm={handleConfirm}
-                  onCancel={hideDatePicker}
-               /> */}
-               <InputForm
-                  bg="white"
+               <InputDate
+                  onChange={(val) => validationForm("date", val)}
+                  type="date"
+                  value={data.date}
                   label="Tanggal Awal"
-                  type="default"
-                  placeholder="Pilih Tanggal Awal"
                   required
                   error={error.date}
                   errorText="Tanggal awal tidak boleh kosong"
+                  placeholder="Pilih Tanggal Awal"
                />
-               <InputForm
-                  bg="white"
+               <InputDate
+                  onChange={(val) => validationForm("dateEnd", val)}
+                  type="date"
+                  value={data.dateEnd}
                   label="Tanggal Akhir"
-                  type="default"
-                  placeholder="Pilih Tanggal Akhir"
                   required
                   error={error.dateEnd}
-                  errorText="Tanggal akhir tidak boleh kosong"
+                  errorText="Tanggal akhir tidak boleh kosong atau lebih awal dari tanggal awal"
+                  placeholder="Pilih Tanggal Akhir"
                />
-               <ReportChartProgress />
-               <ReportChartDocument />
-               <ReportChartEvent />
+               {showReport && (
+                  <>
+                     <ReportChartProgress data={dataChart.progress} />
+                     <ReportChartDocument data={dataChart.dokumen} />
+                     <ReportChartEvent data={dataChart.event} />
+                  </>
+               )}
             </View>
          </ScrollView>
+
+         <ModalSelect
+            category={"group"}
+            close={setSelect}
+            onSelect={(value) => {
+               validationForm("group", value.val, value.label);
+            }}
+            title={"Lembaga Desa"}
+            open={isSelect}
+            valChoose={chooseGroup.val}
+         />
       </SafeAreaView>
    );
 }