upd: divisi

Deskripsi: - input date - laporan divisi NoIssues
2025-05-28 16:52:01 +08:00
parent 749afcf0eb
commit 088baec9b0
11 changed files with 353 additions and 61 deletions
--- a/android/.kotlin/errors/errors-1748403150221.log
+++ b/android/.kotlin/errors/errors-1748403150221.log
@@ -0,0 +1,4 @@
+kotlin version: 2.0.21
+error message: The daemon has terminated unexpectedly on startup attempt #1 with error code: 0. The daemon process output:
+    1. Kotlin compile daemon is ready
+
--- a/app/(application)/division/[id]/report.tsx
+++ b/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>
--- a/app/(application)/division/report.tsx
+++ b/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>
   );
 }
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/division/reportChartDocument.tsx
+++ b/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
--- a/components/division/reportChartEvent.tsx
+++ b/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}
--- a/components/division/reportChartProgress.tsx
+++ b/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"
--- a/components/inputDate.tsx
+++ b/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)}
+               />
+            )
+         }
+      </>
+   )
+}
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -354,7 +354,7 @@ export const apiGetDivision = async ({ user, search, group, kategori, active }:
   return response.data;
 };

-export const apiGetDivisionReport = async ({ user, cat, date, dateEnd, division, group }: { user: string, cat: string, date: string, dateEnd: string, division: string, group?: string }) => {
+export const apiGetDivisionReport = async ({ user, cat, date, dateEnd, division, group }: { user: string, cat: 'table-progress' | 'lainnya', date: string, dateEnd: string, division: string, group?: string }) => {
   const response = await api.get(`mobile/division/report?user=${user}&cat=${cat}&date=${date}&date-end=${dateEnd}&division=${division}&group=${group}`);
   return response.data;
 };
--- a/lib/fun_stringToDate.ts
+++ b/lib/fun_stringToDate.ts
@@ -0,0 +1,4 @@
+export function stringToDate(date: string) {
+   const [dd, mm, yyyy] = date.split('-');
+   return new Date(Number(yyyy), Number(mm) - 1, Number(dd))
+}
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
    "react-native": "0.79.2",
    "react-native-blob-util": "^0.21.2",
    "react-native-confirmation-code-field": "^7.4.0",
+    "react-native-date-picker": "^5.0.12",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "~2.24.0",
    "react-native-gifted-charts": "^1.4.57",
@@ -68,7 +69,7 @@
    "react-native-svg": "15.11.2",
    "react-native-ui-datepicker": "^3.0.5",
    "react-native-web": "^0.20.0",
-    "react-native-webview": "13.13.5",
+    "react-native-webview": "13.12.5",
    "react-redux": "^9.2.0",
    "redux": "^5.0.1"
  },