upd: fitur baru task divisi

Deskripsi;
- tampilan list detail tugas task divisi
- tampilan tambah detail tugas task divisi
- tampilan edit detail tugas task divisi
- tampilan tambah data task divisi > detail tugas
- integrasi api get data list detail tugas task divisi
- integrasi api tambah dtail tugas task divisi
- integrasi api edit detail tugas task divisi
- integrasi api tambah data task divisi > detail tugas

NO Issues'

app/(application)/division/[id]/(fitur-division)/task/[detail]/add-task.tsx

@@ -1,25 +1,28 @@
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import { InputForm } from "@/components/inputForm";
+import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiCreateTaskTugas } from "@/lib/api";
+import { formatDateOnly } from "@/lib/fun_formatDateOnly";
+import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
-import dayjs from "dayjs";
+import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import 'intl';
 import 'intl/locale-data/jsonp/id';
+import moment from "moment";
 import { useEffect, useState } from "react";
 import {
-   KeyboardAvoidingView, Platform, SafeAreaView,
+   KeyboardAvoidingView, Platform, Pressable, SafeAreaView,
    ScrollView,
    View
 } from "react-native";
 import Toast from "react-native-toast-message";
 import DateTimePicker, { DateType } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
-import { useHeaderHeight } from '@react-navigation/elements';
 
 export default function TaskDivisionAddTask() {
    const { token, decryptToken } = useAuthSession();
@@ -38,12 +41,13 @@ export default function TaskDivisionAddTask() {
       endDate: false,
       title: false,
    });
-   const [title, setTitle] = useState("");
+   const [title, setTitle] = useState("")
+   const [dataDetail, setDataDetail] = useState<any>([])
+   const [modalDetail, setModalDetail] = useState(false)
+   const [dsbButton, setDsbButton] = useState(true)
 
-   const from = range.startDate
+   const from = formatDateOnly(range.startDate);
-      ? dayjs(range.startDate).format("DD-MM-YYYY")
+   const to = formatDateOnly(range.endDate);
-      : "";
-   const to = range.endDate ? dayjs(range.endDate).format("DD-MM-YYYY") : "";
 
    function checkAll() {
       if (
@@ -72,21 +76,49 @@ export default function TaskDivisionAddTask() {
       }
    }
 
+
+   function checkButton() {
+      if (range.startDate == null || range.endDate == null || range.startDate == undefined || range.endDate == undefined) {
+         setDsbButton(true)
+         setDataDetail([])
+      } else {
+         setDsbButton(false)
+         const awal = formatDateOnly(range.startDate, "YYYY-MM-DD")
+         const akhir = formatDateOnly(range.endDate, "YYYY-MM-DD")
+         const datanya = getDatesInRange(awal, akhir)
+         setDataDetail(datanya.map((item: any) => ({
+            date: item,
+            timeStart: null,
+            timeEnd: null,
+         })))
+      }
+   }
+
    useEffect(() => {
       checkAll();
    }, [from, to, title, error]);
 
+   useEffect(() => {
+      checkButton()
+   }, [range])
+
    async function handleCreate() {
       try {
          setLoading(true)
+         const dataDetailFix = dataDetail.map((item: any) => ({
+            date: moment(item.date, "DD-MM-YYYY").format("YYYY-MM-DD"),
+            timeStart: item.timeStart,
+            timeEnd: item.timeEnd,
+         }))
          const hasil = await decryptToken(String(token?.current));
          const response = await apiCreateTaskTugas({
             data: {
                title,
-               dateStart: dayjs(range.startDate).format("YYYY-MM-DD"),
+               dateStart: formatDateOnly(range.startDate, "YYYY-MM-DD"),
-               dateEnd: dayjs(range.endDate).format("YYYY-MM-DD"),
+               dateEnd: formatDateOnly(range.endDate, "YYYY-MM-DD"),
                user: hasil,
                idDivision: id,
+               dataDetail: dataDetailFix,
             },
             id: detail,
          });
@@ -177,6 +209,13 @@ export default function TaskDivisionAddTask() {
                      {
                         (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
                      }
+                     <Pressable
+                        style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
+                        disabled={dsbButton}
+                        onPress={() => { setModalDetail(true) }}
+                     >
+                        <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
+                     </Pressable>
                   </View>
                   <InputForm
                      label="Judul Tugas"
@@ -194,7 +233,14 @@ export default function TaskDivisionAddTask() {
                </View>
             </ScrollView>
          </KeyboardAvoidingView>
-
+         <ModalAddDetailTugasTask
+            isVisible={modalDetail}
+            setVisible={setModalDetail}
+            dataTanggal={dataDetail}
+            onSubmit={(data) => {
+               setDataDetail(data)
+            }}
+         />
       </SafeAreaView>
    );
 }

app/(application)/division/[id]/(fitur-division)/task/create/task.tsx

@@ -1,17 +1,22 @@
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import { InputForm } from "@/components/inputForm";
+import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
+import { formatDateOnly } from "@/lib/fun_formatDateOnly";
+import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setTaskCreate } from "@/lib/taskCreate";
-import dayjs from "dayjs";
+import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack } from "expo-router";
 import 'intl';
 import 'intl/locale-data/jsonp/id';
+import moment from "moment";
 import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
    Platform,
+   Pressable,
    SafeAreaView,
    ScrollView,
    View
@@ -20,7 +25,6 @@ import DateTimePicker, {
    DateType
 } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
-import { useHeaderHeight } from '@react-navigation/elements';
 
 export default function CreateTaskAddTugas() {
    const headerHeight = useHeaderHeight();
@@ -37,11 +41,12 @@ export default function CreateTaskAddTugas() {
    })
    const [title, setTitle] = useState('');
    const taskCreate = useSelector((state: any) => state.taskCreate)
+   const [dsbButton, setDsbButton] = useState(true)
+   const [dataDetail, setDataDetail] = useState<any>([])
+   const [modalDetail, setModalDetail] = useState(false)
 
-   const from = range.startDate
+   const from = formatDateOnly(range.startDate, "DD-MM-YYYY")
-      ? dayjs(range.startDate).format("DD-MM-YYYY")
+   const to = formatDateOnly(range.endDate, "DD-MM-YYYY")
-      : "";
-   const to = range.endDate ? dayjs(range.endDate).format("DD-MM-YYYY") : "";
 
    function checkAll() {
       if (from == "" || to == "" || title == "" || title == "null" || error.startDate || error.endDate || error.title) {
@@ -62,18 +67,45 @@ export default function CreateTaskAddTugas() {
       }
    }
 
+   function checkButton() {
+      if (range.startDate == null || range.endDate == null || range.startDate == undefined || range.endDate == undefined) {
+         setDsbButton(true)
+         setDataDetail([])
+      } else {
+         setDsbButton(false)
+         const awal = formatDateOnly(range.startDate, "YYYY-MM-DD")
+         const akhir = formatDateOnly(range.endDate, "YYYY-MM-DD")
+         const datanya = getDatesInRange(awal, akhir)
+         setDataDetail(datanya.map((item: any) => ({
+            date: item,
+            timeStart: null,
+            timeEnd: null,
+         })))
+      }
+   }
+
    useEffect(() => {
       checkAll()
    }, [from, to, title, error])
 
+   useEffect(() => {
+      checkButton()
+   }, [range])
+
    async function handleCreate() {
       try {
+         const dataDetailFix = dataDetail.map((item: any) => ({
+            date: moment(item.date, "DD-MM-YYYY").format("YYYY-MM-DD"),
+            timeStart: item.timeStart,
+            timeEnd: item.timeEnd,
+         }))
          dispatch(setTaskCreate([...taskCreate, {
             title: title,
             dateStart: from,
             dateEnd: to,
-            dateStartFix: dayjs(range.startDate).format("YYYY-MM-DD"),
+            dateStartFix: formatDateOnly(range.startDate, "YYYY-MM-DD"),
-            dateEndFix: dayjs(range.endDate).format("YYYY-MM-DD"),
+            dateEndFix: formatDateOnly(range.endDate, "YYYY-MM-DD"),
+            dataDetail: dataDetailFix
          }]))
          router.back();
       } catch (error) {
@@ -151,6 +183,13 @@ export default function CreateTaskAddTugas() {
                      {
                         (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
                      }
+                     <Pressable
+                        style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
+                        disabled={dsbButton}
+                        onPress={() => { setModalDetail(true) }}
+                     >
+                        <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
+                     </Pressable>
                   </View>
                   <InputForm
                      label="Judul Tugas"
@@ -168,6 +207,14 @@ export default function CreateTaskAddTugas() {
                </View>
             </ScrollView>
          </KeyboardAvoidingView>
+         <ModalAddDetailTugasTask
+            isVisible={modalDetail}
+            setVisible={setModalDetail}
+            dataTanggal={dataDetail}
+            onSubmit={(data) => {
+               setDataDetail(data)
+            }}
+         />
       </SafeAreaView>
    );
 }

app/(application)/division/[id]/(fitur-division)/task/update/[detail].tsx

@@ -1,20 +1,24 @@
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import { InputForm } from "@/components/inputForm";
+import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiEditTaskTugas, apiGetTaskTugas } from "@/lib/api";
+import { formatDateOnly } from "@/lib/fun_formatDateOnly";
+import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useHeaderHeight } from '@react-navigation/elements';
-import dayjs from "dayjs";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import 'intl';
 import 'intl/locale-data/jsonp/id';
+import moment from "moment";
 import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
    Platform,
+   Pressable,
    SafeAreaView,
    ScrollView,
    View
@@ -38,6 +42,9 @@ export default function UpdateProjectTaskDivision() {
    const [year, setYear] = useState<any>();
    const [loading, setLoading] = useState(true);
    const [disableBtn, setDisableBtn] = useState(false);
+   const [dataDetail, setDataDetail] = useState<any>([])
+   const [modalDetail, setModalDetail] = useState(false)
+   const [dsbButton, setDsbButton] = useState(true)
    const [title, setTitle] = useState("");
    const [error, setError] = useState({
       startDate: false,
@@ -45,10 +52,8 @@ export default function UpdateProjectTaskDivision() {
       title: false,
    });
 
-   const from = range.startDate
+   const from = formatDateOnly(range.startDate);
-      ? dayjs(range.startDate).format("DD-MM-YYYY")
+   const to = formatDateOnly(range.endDate);
-      : "";
-   const to = range.endDate ? dayjs(range.endDate).format("DD-MM-YYYY") : "";
 
    async function handleLoad() {
       try {
@@ -65,6 +70,22 @@ export default function UpdateProjectTaskDivision() {
          });
          setMonth(new Date(response.data.dateStart).getMonth());
          setYear(new Date(response.data.dateStart).getFullYear());
+
+         const response2 = await apiGetTaskTugas({
+            user: hasil,
+            id: detail,
+            cat: "detailTask"
+         });
+         if (response2.data.length == 0) {
+            const datanya = getDatesInRange(response.data.dateStart, response.data.dateEnd)
+            setDataDetail(datanya.map((item: any) => ({
+               date: item,
+               timeStart: null,
+               timeEnd: null,
+            })))
+         } else {
+            setDataDetail(response2.data)
+         }
       } catch (error) {
          console.error(error);
       } finally {
@@ -79,8 +100,22 @@ export default function UpdateProjectTaskDivision() {
    async function handleEdit() {
       try {
          setLoadingSubmit(true)
+         const dataDetailFix = dataDetail.map((item: any) => ({
+            date: moment(item.date, "DD-MM-YYYY").format("YYYY-MM-DD"),
+            timeStart: item.timeStart,
+            timeEnd: item.timeEnd,
+         }))
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiEditTaskTugas({ data: { title, dateStart: dayjs(range.startDate).format("YYYY-MM-DD"), dateEnd: dayjs(range.endDate).format("YYYY-MM-DD"), user: hasil }, id: detail });
+         const response = await apiEditTaskTugas({
+            data: {
+               title,
+               dateStart: formatDateOnly(range.startDate, "YYYY-MM-DD"),
+               dateEnd: formatDateOnly(range.endDate, "YYYY-MM-DD"),
+               user: hasil,
+               dataDetail: dataDetailFix
+            },
+            id: detail
+         });
          if (response.success) {
             dispatch(setUpdateTask({ ...update, task: !update.task }))
             Toast.show({ type: 'small', text1: 'Berhasil mengubah data', })
@@ -123,10 +158,33 @@ export default function UpdateProjectTaskDivision() {
       }
    }
 
+
+   function checkButton() {
+      if (range.startDate == null || range.endDate == null || range.startDate == undefined || range.endDate == undefined) {
+         setDsbButton(true)
+         setDataDetail([])
+      } else {
+         setDsbButton(false)
+         const awal = formatDateOnly(range.startDate, "YYYY-MM-DD")
+         const akhir = formatDateOnly(range.endDate, "YYYY-MM-DD")
+         const datanya = getDatesInRange(awal, akhir)
+         setDataDetail(datanya.map((item: any) => ({
+            date: item,
+            timeStart: null,
+            timeEnd: null,
+         })))
+      }
+   }
+
    useEffect(() => {
       checkAll();
    }, [from, to, title, error]);
 
+
+   useEffect(() => {
+      checkButton()
+   }, [range])
+
    return (
       <SafeAreaView>
          <Stack.Screen
@@ -205,6 +263,13 @@ export default function UpdateProjectTaskDivision() {
                            Tanggal tidak boleh kosong
                         </Text>
                      )}
+                     <Pressable
+                        style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
+                        disabled={dsbButton}
+                        onPress={() => { setModalDetail(true) }}
+                     >
+                        <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
+                     </Pressable>
                   </View>
                   <InputForm
                      label="Judul Tugas"
@@ -222,7 +287,14 @@ export default function UpdateProjectTaskDivision() {
                </View>
             </ScrollView>
          </KeyboardAvoidingView>
-
+         <ModalAddDetailTugasTask
+            isVisible={modalDetail}
+            setVisible={setModalDetail}
+            dataTanggal={dataDetail}
+            onSubmit={(data) => {
+               setDataDetail(data)
+            }}
+         />
       </SafeAreaView>
    );
 }

components/task/modalAddDetailTugasTask.tsx

@@ -0,0 +1,135 @@
+import Styles from "@/constants/Styles";
+import { stringToDateTime } from "@/lib/fun_stringToDate";
+import { useEffect, useState } from "react";
+import { Dimensions, View, VirtualizedList } from "react-native";
+import { InputDate } from "../inputDate";
+import ModalFloat from "../modalFloat";
+import Text from "../Text";
+
+interface Props {
+   date: string;
+   timeStart: string;
+   timeEnd: string;
+}
+
+export default function ModalAddDetailTugasTask({ isVisible, setVisible, dataTanggal, onSubmit }: { isVisible: boolean, setVisible: (value: boolean) => void, dataTanggal: Props[], onSubmit: (data: Props[]) => void }) {
+   const [data, setData] = useState<Props[]>(dataTanggal)
+   const tinggiScreen = Dimensions.get("window").height;
+   const tinggiFix = tinggiScreen * 70 / 100;
+   const [error, setError] = useState<any>([])
+
+   useEffect(() => {
+      if (isVisible) {
+         setData(dataTanggal)
+         setError([])
+      }
+   }, [isVisible, dataTanggal])
+
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      date: data[index].date,
+      timeStart: data[index].timeStart,
+      timeEnd: data[index].timeEnd,
+   })
+
+   function settingError(date: string, cat: 'timeStart' | 'timeEnd', val: boolean) {
+      const ada = error.find((item: any) => item.date == date)
+      if (ada) {
+         setError(error.map((item: any) => {
+            if (item.date == date) {
+               return { ...item, [cat]: val }
+            }
+            return item
+         }))
+      } else {
+         setError([...error, { date, [cat]: val }])
+      }
+   }
+
+   function validationForm(cat: "timeStart" | "timeEnd", val: string, date: string) {
+      if (cat == "timeEnd") {
+         const start = stringToDateTime("", String(data.find((item) => item.date == date)?.timeStart))
+         const end = stringToDateTime("", val)
+         const timestampAwal = start.getTime()
+         const timestampAkhir = end.getTime()
+         if (val == "" || val == null || timestampAwal > timestampAkhir) {
+            settingError(date, "timeEnd", true)
+         } else {
+            settingError(date, "timeEnd", false)
+         }
+      } else {
+         const end = stringToDateTime("", String(data.find((item) => item.date == date)?.timeEnd))
+         const start = stringToDateTime("", val)
+         const timestampAwal = start.getTime()
+         const timestampAkhir = end.getTime()
+
+         if (val == "" || val == null || timestampAwal > timestampAkhir) {
+            settingError(date, "timeEnd", true)
+         } else {
+            settingError(date, "timeEnd", false)
+         }
+      }
+
+      setData(data.map((item) => {
+         if (item.date == date) {
+            return { ...item, [cat]: val }
+         }
+         return item
+      }))
+   }
+
+   return (
+      <ModalFloat
+         title="Detail Tanggal dan Waktu Tugas"
+         isVisible={isVisible}
+         setVisible={setVisible}
+         disableSubmit={Object.values(error).some((val: any) => val.timeEnd == true || val.timeStart == true)}
+         onSubmit={() => {
+            onSubmit(data)
+            setVisible(false)
+         }}
+      >
+         <View style={[{ height: tinggiFix }]} >
+            <VirtualizedList
+               data={data}
+               getItemCount={() => data.length}
+               getItem={getItem}
+               renderItem={({ item, index }: { item: Props, index: number }) => {
+                  return (
+                     <View key={index} style={[Styles.borderBottom, Styles.pv05]}>
+                        <Text style={[Styles.textDefaultSemiBold]}>{item.date}</Text>
+                        <View style={[Styles.rowSpaceBetween]}>
+                           <View style={[{ width: "48%" }]}>
+                              <InputDate
+                                 mode="time"
+                                 onChange={(val) => { validationForm("timeStart", val, item.date) }}
+                                 value={item.timeStart}
+                                 label="Waktu Awal"
+                                 placeholder="--:--"
+                                 error={error.find((error: any) => error.date == item.date)?.timeStart}
+                                 errorText="Waktu awal tidak valid"
+                              />
+                           </View>
+                           <View style={[{ width: "48%" }]}>
+                              <InputDate
+                                 onChange={(val) => { validationForm("timeEnd", val, item.date) }}
+                                 mode="time"
+                                 value={item.timeEnd}
+                                 label="Waktu Akhir"
+                                 placeholder="--:--"
+                                 error={error.find((error: any) => error.date == item.date)?.timeEnd}
+                                 errorText="Waktu akhir harus lebih dari waktu awal"
+                              />
+                           </View>
+                        </View>
+                     </View>
+                  )
+               }}
+               keyExtractor={(item, index) => String(index)}
+               showsVerticalScrollIndicator={false}
+            />
+         </View>
+
+      </ModalFloat>
+   )
+}

components/task/modalListDetailTugasTask.tsx

@@ -0,0 +1,116 @@
+import Styles from "@/constants/Styles";
+import { apiGetProjectTask, apiGetTaskTugas } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { useEffect, useState } from "react";
+import { Dimensions, View, VirtualizedList } from "react-native";
+import { InputDate } from "../inputDate";
+import ModalFloat from "../modalFloat";
+import Skeleton from "../skeleton";
+import Text from "../Text";
+
+interface Props {
+   id: string;
+   date: string;
+   timeStart: string;
+   timeEnd: string;
+}
+
+export default function ModalListDetailTugasTask({ isVisible, setVisible, idTask }: { isVisible: boolean, setVisible: (value: boolean) => void, idTask: string }) {
+   const [data, setData] = useState<Props[]>([])
+   const [loading, setLoading] = useState(false)
+   const { token, decryptToken } = useAuthSession()
+   const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
+   const tinggiScreen = Dimensions.get("window").height;
+   const tinggiFix = tinggiScreen * 70 / 100;
+
+
+
+   async function getData() {
+      try {
+         setLoading(true)
+         const hasil = await decryptToken(String(token?.current));
+         const res = await apiGetTaskTugas({ user: hasil, id: idTask, cat: "detailTask" })
+         setData(res.data)
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   useEffect(() => {
+      if (isVisible) {
+         getData()
+      }
+   }, [isVisible, idTask])
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      date: data[index].date,
+      timeStart: data[index].timeStart,
+      timeEnd: data[index].timeEnd,
+   })
+
+   return (
+      <ModalFloat
+         title="Detail Tanggal dan Waktu Tugas"
+         isVisible={isVisible}
+         setVisible={setVisible}
+         buttonHide
+      >
+         <View style={[{ height: tinggiFix }]} >
+            {
+               loading ?
+                  arrSkeleton.map((item: any, i: number) => {
+                     return (
+                        <Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
+                     )
+                  })
+                  :
+                  data.length > 0 ?
+                     (
+                        <VirtualizedList
+                           data={data}
+                           getItemCount={() => data.length}
+                           getItem={getItem}
+                           renderItem={({ item, index }: { item: Props, index: number }) => {
+                              return (
+                                 <View key={index} style={[Styles.borderBottom, Styles.pv05]}>
+                                    <Text style={[Styles.textDefaultSemiBold]}>{item.date}</Text>
+                                    <View style={[Styles.rowSpaceBetween]}>
+                                       <View style={[{ width: "48%" }]}>
+                                          <InputDate
+                                             mode="time"
+                                             disable
+                                             onChange={(val) => { }}
+                                             value={item.timeStart}
+                                             label="Waktu Awal"
+                                             placeholder="--:--"
+                                          />
+                                       </View>
+                                       <View style={[{ width: "48%" }]}>
+                                          <InputDate
+                                             onChange={(val) => { }}
+                                             mode="time"
+                                             value={item.timeEnd}
+                                             label="Waktu Akhir"
+                                             placeholder="--:--"
+                                             disable
+                                          />
+                                       </View>
+                                    </View>
+                                 </View>
+                              )
+                           }}
+                           keyExtractor={(item, index) => String(index)}
+                           showsVerticalScrollIndicator={false}
+                        />
+                     )
+                     :
+                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]} >Tidak ada data</Text>
+            }
+         </View>
+
+      </ModalFloat>
+   )
+}

components/task/sectionTanggalTugasTask.tsx

@@ -15,6 +15,7 @@ import MenuItemRow from "../menuItemRow";
 import ModalSelect from "../modalSelect";
 import SkeletonTask from "../skeletonTask";
 import Text from "../Text";
+import ModalListDetailTugasTask from "./modalListDetailTugasTask";
 
 
 type Props = {
@@ -25,7 +26,7 @@ type Props = {
    dateEnd: string;
 }
 
-export default function SectionTanggalTugasTask({refreshing}: {refreshing: boolean}) {
+export default function SectionTanggalTugasTask({ refreshing }: { refreshing: boolean }) {
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.taskUpdate)
    const [isModal, setModal] = useState(false)
@@ -33,6 +34,7 @@ export default function SectionTanggalTugasTask({refreshing}: {refreshing: boole
    const { token, decryptToken } = useAuthSession()
    const [loading, setLoading] = useState(true)
    const arrSkeleton = Array.from({ length: 5 })
+   const [modalDetail, setModalDetail] = useState(false)
    const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
    const [data, setData] = useState<Props[]>([])
    const [tugas, setTugas] = useState({
@@ -171,7 +173,24 @@ export default function SectionTanggalTugasTask({refreshing}: {refreshing: boole
                      router.push(`./update/${tugas.id}`)
                   }}
                />
-
+               <MenuItemRow
+                  icon={
+                     <MaterialCommunityIcons
+                        name="clock-time-three-outline"
+                        color="black"
+                        size={25}
+                     />
+                  }
+                  title="Detail Waktu"
+                  onPress={() => {
+                     setModal(false);
+                     setTimeout(() => {
+                        setModalDetail(true)
+                     }, 600)
+                  }}
+               />
+            </View>
+            <View style={[Styles.rowItemsCenter, Styles.mt15]}>
                <MenuItemRow
                   icon={<Ionicons name="trash" color="black" size={25} />}
                   title="Hapus Tugas"
@@ -198,6 +217,12 @@ export default function SectionTanggalTugasTask({refreshing}: {refreshing: boole
             open={isSelect}
             valChoose={String(tugas.status)}
          />
+
+         <ModalListDetailTugasTask
+            isVisible={modalDetail}
+            setVisible={setModalDetail}
+            idTask={tugas.id}
+         />
       </>
    )
 }

lib/api.ts

@@ -529,12 +529,12 @@ export const apiUpdateStatusTaskDivision = async (data: { user: string, status:
    return response.data
 };
 
-export const apiGetTaskTugas = async ({ user, id }: { user: string, id: string }) => {
+export const apiGetTaskTugas = async ({ user, id, cat }: { user: string, id: string, cat?: string }) => {
-   const response = await api.get(`mobile/task/detail/${id}?user=${user}`);
+   const response = await api.get(`mobile/task/detail/${id}?user=${user}${cat ? `&cat=${cat}` : ""}`);
    return response.data;
 };
 
-export const apiEditTaskTugas = async ({ data, id }: { data: { title: string, dateStart: string, user: string, dateEnd: string }, id: string }) => {
+export const apiEditTaskTugas = async ({ data, id }: { data: { title: string, dateStart: string, user: string, dateEnd: string, dataDetail: any[] }, id: string }) => {
    const response = await api.post(`/mobile/task/detail/${id}`, data)
    return response.data;
 };
@@ -559,7 +559,7 @@ export const apiDeleteTaskMember = async (data: { user: string, idUser: string }
    return response.data
 };
 
-export const apiCreateTaskTugas = async ({ data, id }: { data: { title: string, dateStart: string, user: string, dateEnd: string, idDivision: string }, id: string }) => {
+export const apiCreateTaskTugas = async ({ data, id }: { data: { title: string, dateStart: string, user: string, dateEnd: string, idDivision: string, dataDetail: any[] }, id: string }) => {
    const response = await api.post(`/mobile/task/${id}`, data)
    return response.data;
 };