diff --git a/app/(application)/division/report.tsx b/app/(application)/division/report.tsx
index 7010d70..8bfb483 100644
--- a/app/(application)/division/report.tsx
+++ b/app/(application)/division/report.tsx
@@ -7,30 +7,92 @@ 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";
+import { Button, SafeAreaView, ScrollView, View } from "react-native";
+import DateTimePickerModal from "react-native-modal-datetime-picker";
 
 export default function Report() {
-   const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
+   const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
+   const [error, setError] = useState({
+      group: false,
+      date: false,
+      dateEnd: false,
+   });
+   const [date, setDate] = useState("");
+   const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
+
+   const showDatePicker = () => {
+      setDatePickerVisibility(true);
+   };
+
+   const hideDatePicker = () => {
+      setDatePickerVisibility(false);
+   };
+
+   const handleConfirm = (date: any) => {
+      setDate(date);
+      hideDatePicker();
+   };
+
+
 
    return (
       <SafeAreaView>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Laporan Divisi',
-               headerTitleAlign: 'center',
+               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 />
+               <SelectForm
+                  bg="white"
+                  label="Lembaga Desa"
+                  placeholder="Pilih Lembaga Desa"
+                  value={chooseGroup.label}
+                  required
+                  onPress={() => { }}
+                  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"
+                  label="Tanggal Awal"
+                  type="default"
+                  placeholder="Pilih Tanggal Awal"
+                  required
+                  error={error.date}
+                  errorText="Tanggal awal tidak boleh kosong"
+               />
+               <InputForm
+                  bg="white"
+                  label="Tanggal Akhir"
+                  type="default"
+                  placeholder="Pilih Tanggal Akhir"
+                  required
+                  error={error.dateEnd}
+                  errorText="Tanggal akhir tidak boleh kosong"
+               />
                <ReportChartProgress />
                <ReportChartDocument />
                <ReportChartEvent />
             </View>
          </ScrollView>
       </SafeAreaView>
-   )
-}
\ No newline at end of file
+   );
+}
diff --git a/bun.lockb b/bun.lockb
index 1661502..42421b4 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/lib/api.ts b/lib/api.ts
index 0f37f54..c774c69 100644
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -352,4 +352,9 @@ export const apiDeleteFileProject = async (data: { user: string }, id: string) =
 export const apiGetDivision = async ({ user, search, group, kategori, active }: { user: string, search: string, group?: string, kategori?: string, active?: string }) => {
    const response = await api.get(`mobile/division?user=${user}&active=${active}&group=${group}&search=${search}&cat=${kategori}`);
    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 }) => {
+   const response = await api.get(`mobile/division/report?user=${user}&cat=${cat}&date=${date}&date-end=${dateEnd}&division=${division}&group=${group}`);
+   return response.data;
 };
\ No newline at end of file
diff --git a/package.json b/package.json
index 3eabab8..ac30e4a 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
     "@react-native-async-storage/async-storage": "^2.1.2",
+    "@react-native-community/datetimepicker": "8.3.0",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",
     "@reduxjs/toolkit": "^2.7.0",
@@ -57,6 +58,7 @@
     "react-native-gifted-charts": "^1.4.57",
     "react-native-image-picker": "^8.2.1",
     "react-native-modal": "^14.0.0-rc.1",
+    "react-native-modal-datetime-picker": "^18.0.0",
     "react-native-otp-entry": "^1.8.4",
     "react-native-reanimated": "~3.17.4",
     "react-native-reanimated-carousel": "^4.0.2",