upd: laporan kegiatan

Deskripsi:
- update  struktur database
- api update laporan kegiatan project
- tampilan laporan kegiatan project
- form update laporan kegiatan project
- integrasi api update laporan kegiatan project
- api update laporan kegiatan tugas divisi
- tampilan laporan kegiatan tugas divisi
- form update laporan kegiatan tugas divisi
- integrasi api update laporan kegiatan tugas divisi

No Issues

prisma/schema.prisma

@@ -113,7 +113,6 @@ model User {
   Announcement               Announcement[]
   Project                    Project[]
   ProjectMember              ProjectMember[]
-  ProjectComment             ProjectComment[]
   UserLog                    UserLog[]
   Division                   Division[]
   DivisionMember             DivisionMember[]
@@ -184,25 +183,25 @@ model AnnouncementMember {
 }
 
 model Project {
-  id             String           @id @default(cuid())
+  id            String          @id @default(cuid())
-  Village        Village          @relation(fields: [idVillage], references: [id])
+  Village       Village         @relation(fields: [idVillage], references: [id])
-  idVillage      String
+  idVillage     String
-  Group          Group            @relation(fields: [idGroup], references: [id])
+  Group         Group           @relation(fields: [idGroup], references: [id])
-  idGroup        String
+  idGroup       String
-  title          String
+  title         String
-  status         Int              @default(0) // 0 = pending, 1 = ongoing, 2 = done, 3 = cancelled
+  status        Int             @default(0) // 0 = pending, 1 = ongoing, 2 = done, 3 = cancelled
-  desc           String?          @db.Text
+  desc          String?         @db.Text
-  reason         String?          @db.Text
+  reason        String?         @db.Text
-  isActive       Boolean          @default(true)
+  report        String?         @db.Text
-  User           User             @relation(fields: [createdBy], references: [id])
+  isActive      Boolean         @default(true)
-  createdBy      String
+  User          User            @relation(fields: [createdBy], references: [id])
-  createdAt      DateTime         @default(now())
+  createdBy     String
-  updatedAt      DateTime         @updatedAt
+  createdAt     DateTime        @default(now())
-  ProjectMember  ProjectMember[]
+  updatedAt     DateTime        @updatedAt
-  ProjectFile    ProjectFile[]
+  ProjectMember ProjectMember[]
-  ProjectComment ProjectComment[]
+  ProjectFile   ProjectFile[]
-  ProjectTask    ProjectTask[]
+  ProjectTask   ProjectTask[]
-  ProjectLink    ProjectLink[]
+  ProjectLink   ProjectLink[]
 }
 
 model ProjectMember {
@@ -254,18 +253,6 @@ model ProjectTask {
   updatedAt  DateTime @updatedAt
 }
 
-model ProjectComment {
-  id        String   @id @default(cuid())
-  Project   Project  @relation(fields: [idProject], references: [id])
-  idProject String
-  User      User     @relation(fields: [createdBy], references: [id])
-  createdBy String
-  comment   String   @db.Text
-  isActive  Boolean  @default(true)
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-}
-
 model Division {
   id                         String                       @id @default(cuid())
   Village                    Village                      @relation(fields: [idVillage], references: [id])
@@ -314,6 +301,7 @@ model DivisionProject {
   title                 String
   desc                  String?                 @db.Text
   reason                String?                 @db.Text
+  report                String?                 @db.Text
   status                Int                     @default(0) // 0 = pending, 1 = ongoing, 2 = done, 3 = cancelled
   isActive              Boolean                 @default(true)
   createdAt             DateTime                @default(now())

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

@@ -1,4 +1,4 @@
-import { ListAnggotaDetailTask, ListFileDetailTask, ListLinkDetailTask, ListTugasDetailTask, NavbarDetailDivisionTask, ProgressDetailTask } from "@/module/task"
+import { ListAnggotaDetailTask, ListFileDetailTask, ListLinkDetailTask, ListReportDetailTask, ListTugasDetailTask, NavbarDetailDivisionTask, ProgressDetailTask } from "@/module/task"
 import { Box } from "@mantine/core"
 
 function Page() {
@@ -7,6 +7,7 @@ function Page() {
          <NavbarDetailDivisionTask />
          <Box p={20}>
             <ProgressDetailTask />
+            <ListReportDetailTask />
             <ListTugasDetailTask />
             <ListFileDetailTask />
             <ListLinkDetailTask />

src/app/(application)/division/[id]/(fitur-division)/task/[detail]/report/page.tsx

@@ -0,0 +1,8 @@
+import { AddReportTask } from "@/module/task"
+
+function Page() {
+   return (
+      <AddReportTask />
+   )
+}
+export default Page

src/app/(application)/project/[id]/page.tsx

@@ -1,4 +1,4 @@
-import { ListAnggotaDetailProject, ListFileDetailProject, ListLinkDetailProject, ListTugasDetailProject, NavbarDetailProject, ProgressDetailProject } from '@/module/project';
+import { ListAnggotaDetailProject, ListFileDetailProject, ListLinkDetailProject, ListReportDetailProject, ListTugasDetailProject, NavbarDetailProject, ProgressDetailProject } from '@/module/project';
 import { Box } from '@mantine/core';
 
 function Page() {
@@ -7,6 +7,7 @@ function Page() {
       <NavbarDetailProject />
       <Box p={20}>
         <ProgressDetailProject />
+        <ListReportDetailProject />
         <ListTugasDetailProject />
         <ListFileDetailProject />
         <ListLinkDetailProject />

src/app/(application)/project/[id]/report/page.tsx

@@ -0,0 +1,9 @@
+import { AddReportProject } from "@/module/project";
+
+function Page() {
+   return (
+      <AddReportProject />
+   );
+}
+
+export default Page;

src/app/api/project/[id]/lainnya/route.ts

@@ -45,4 +45,50 @@ export async function DELETE(request: Request, context: { params: { id: string }
       console.error(error);
       return NextResponse.json({ success: false, message: "Gagal menghapus kegiatan, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
    }
+}
+
+// EDIT PROJECT REPORT
+export async function PUT(request: Request, context: { params: { id: string } }) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+
+      const { id } = context.params
+      const { report } = await request.json()
+
+      const data = await prisma.project.count({
+         where: {
+            id: id
+         }
+      })
+
+      if (data == 0) {
+         return NextResponse.json(
+            {
+               success: false, message: "Gagal mendapatkan kegiatan, data tidak ditemukan",
+            },
+            { status: 404 }
+         );
+      }
+
+      const dataCreate = await prisma.project.update({
+         where: {
+            id
+         },
+         data: {
+            report: report
+         }
+      })
+
+      // create log user
+      const log = await createLogUser({ act: 'UPDATE', desc: 'User mengupdate laporan kegiatan', table: 'project', data: String(id) })
+
+      return NextResponse.json({ success: true, message: "Laporan kegiatan berhasil diupdate" }, { status: 200 });
+
+   } catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mengupdate kegiatan, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
+   }
 }

src/app/api/task/[id]/lainnya/route.ts

@@ -45,4 +45,52 @@ export async function DELETE(request: Request, context: { params: { id: string }
       console.error(error);
       return NextResponse.json({ success: false, message: "Gagal menghapus tugas, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
    }
+}
+
+
+// EDIT TASK REPORT
+export async function PUT(request: Request, context: { params: { id: string } }) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+
+      const { id } = context.params
+      const { report } = await request.json()
+
+
+      const data = await prisma.divisionProject.count({
+         where: {
+            id: id
+         }
+      })
+
+      if (data == 0) {
+         return NextResponse.json(
+            {
+               success: false, message: "Gagal mendapatkan kegiatan, data tidak ditemukan",
+            },
+            { status: 404 }
+         );
+      }
+
+      const dataCreate = await prisma.divisionProject.update({
+         where: {
+            id
+         },
+         data: {
+            report: report
+         }
+      })
+
+      // create log user
+      const log = await createLogUser({ act: 'UPDATE', desc: 'User mengupdate laporan tugas divisi', table: 'divisionProject', data: String(id) })
+
+      return NextResponse.json({ success: true, message: "Laporan tugas divisi berhasil diupdate" }, { status: 200 });
+
+   } catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mengupdate laporan tugas divisi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
+   }
 }

src/module/project/index.ts

@@ -5,7 +5,6 @@ import NavbarDetailProject from "./ui/navbar_detail_project";
 import ProgressDetailProject from "./ui/progress_detail_project";
 import ListTugasDetailProject from "./ui/list_tugas_detail_project";
 import ListFileDetailProject from "./ui/list_file_detail_project";
-import LiatAnggotaDetailProject from "./ui/list_anggota_detail_project";
 import EditTaskProject from "./ui/edit_task_project";
 import EditDetailTaskProject from "./ui/edit_detail_task_project";
 import ListAnggotaDetailProject from "./ui/list_anggota_detail_project";
@@ -16,6 +15,8 @@ import CreateProject from "./ui/create_project";
 import AddFileDetailProject from "./ui/add_file_detail_project";
 import WrapLayoutProject from "./ui/wrap_project";
 import ListLinkDetailProject from "./ui/list_link_detail_project";
+import AddReportProject from "./ui/add_report_project";
+import ListReportDetailProject from "./ui/list_report_project";
 
 export { ViewDateEndTask }
 export { CreateUsersProject }
@@ -33,4 +34,6 @@ export { AddMemberDetailProject }
 export { CreateProject }
 export { AddFileDetailProject }
 export { WrapLayoutProject }
-export { ListLinkDetailProject }
+export { ListLinkDetailProject }
+export { AddReportProject }
+export { ListReportDetailProject }

src/module/project/lib/api_project.ts

@@ -122,6 +122,17 @@ export const funEditProject = async (path: string, data: { name: string }) => {
     return await response.json().catch(() => null);
 }
 
+export const funEditReportProject = async (path: string, data: { report: string }) => {
+    const response = await fetch(`/api/project/${path}/lainnya`, {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
+}
+
 
 export const funDeleteFileProject = async (path: string) => {
     const response = await fetch(`/api/project/file/${path}`, {

src/module/project/ui/add_report_project.tsx

@@ -0,0 +1,157 @@
+"use client"
+import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, rem, Skeleton, Stack, Textarea } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { useWibuRealtime } from 'wibu-realtime';
+import { funEditReportProject, funGetOneProjectById } from '../lib/api_project';
+
+export default function AddReportProject() {
+   const router = useRouter()
+   const [report, setReport] = useState("")
+   const [openModal, setOpenModal] = useState(false)
+   const param = useParams<{ id: string }>()
+   const [loading, setLoading] = useState(true)
+   const [loadingSubmit, setLoadingSubmit] = useState(false)
+   const tema = useHookstate(TEMA)
+   const [touched, setTouched] = useState({
+      report: false,
+   });
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
+
+   async function onSubmit() {
+      try {
+         setLoadingSubmit(true)
+         const res = await funEditReportProject(param.id, { report })
+         if (res.success) {
+            setDataRealtime([{
+               category: "project-report",
+               id: param.id,
+            }])
+            toast.success(res.message)
+            router.push("./")
+         } else {
+            toast.error(res.message)
+         }
+      } catch (error) {
+         console.error(error)
+         toast.error("Gagal mengedit Laporan Kegiatan, coba lagi nanti")
+      } finally {
+         setLoadingSubmit(false)
+         setOpenModal(false)
+      }
+   }
+
+   function onCheck() {
+      if (report == "") {
+         setTouched({ ...touched, report: true })
+         return false
+      }
+      setOpenModal(true)
+   }
+
+
+
+   function onValidation(kategori: string, val: string) {
+      if (kategori == 'report') {
+         setReport(val)
+         if (val === "") {
+            setTouched({ ...touched, report: true })
+         } else {
+            setTouched({ ...touched, report: false })
+         }
+      }
+   }
+
+   async function getOneData() {
+      try {
+         setLoading(true)
+         const res = await funGetOneProjectById(param.id, 'data');
+         if (res.success) {
+            setReport(res.data.report);
+         } else {
+            toast.error(res.message);
+         }
+         setLoading(false);
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
+      } finally {
+         setLoading(false);
+      }
+   }
+
+   useShallowEffect(() => {
+      getOneData();
+   }, [param.id])
+
+
+   return (
+      <Box >
+         <LayoutNavbarNew back="" title={"Laporan Kegiatan"} menu />
+         <Box p={20}>
+            <Stack pt={15}>
+               {loading ?
+                  <Skeleton height={150} mt={20} radius={10} />
+                  :
+                  <Textarea placeholder="Laporan Kegiatan" label="Laporan Kegiatan" size="md" radius={10}
+                     value={report}
+                     required
+                     error={
+                        touched.report && (
+                           report == "" ? "Laporan Tidak Boleh Kosong" : null
+                        )
+                     }
+                     onChange={(e) => { onValidation('report', e.currentTarget.value) }}
+                     styles={{
+                        input: {
+                           height: "30vh"
+                        }
+                     }}
+                  />
+               }
+            </Stack>
+         </Box>
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${tema.get().bgUtama}`,
+         }}>
+            {loading ?
+               <Skeleton height={50} radius={30} />
+               :
+               <Button
+                  c={"white"}
+                  bg={Object.values(touched).some((v) => v == true) || report == "" || report == null ? 'gray' : tema.get().utama}
+                  size="lg"
+                  radius={30}
+                  fullWidth
+                  onClick={() => { onCheck() }}
+                  disabled={Object.values(touched).some((v) => v == true) || report == "" || report == null ? true : false}
+               >
+                  Simpan
+               </Button>
+            }
+         </Box>
+
+
+         <LayoutModal opened={openModal} loading={loadingSubmit} onClose={() => setOpenModal(false)}
+            description="Apakah Anda yakin ingin mengedit Laporan Kegiatan ini?"
+            onYes={(val) => {
+               if (val) {
+                  onSubmit()
+               } else {
+                  setOpenModal(false)
+               }
+            }} />
+      </Box>
+   );
+}
+

src/module/project/ui/list_report_project.tsx

@@ -0,0 +1,82 @@
+'use client'
+import { keyWibu, TEMA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box, Spoiler, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { useWibuRealtime } from 'wibu-realtime';
+import { funGetOneProjectById } from '../lib/api_project';
+import { globalRefreshProject } from '../lib/val_project';
+
+export default function ListReportDetailProject() {
+   const [isData, setData] = useState("")
+   const param = useParams<{ id: string }>()
+   const refresh = useHookstate(globalRefreshProject)
+   const tema = useHookstate(TEMA)
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
+
+
+   async function getOneData() {
+      try {
+         const res = await funGetOneProjectById(param.id, 'data');
+         if (res.success) {
+            setData(res.data.report)
+         } else {
+            toast.error(res.message);
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan list Laporan Kegiatan, coba lagi nanti");
+      }
+   }
+
+   useShallowEffect(() => {
+      getOneData();
+   }, [param.id])
+
+
+   useShallowEffect(() => {
+      if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-report' && i.id == param.id)) {
+         refresh.set(true)
+         getOneData()
+      }
+
+   }, [dataRealTime])
+
+   return (
+      <>
+         {
+            isData != "" && isData != null
+            &&
+            <Box pt={20}>
+               <Text fw={"bold"} c={tema.get().utama}>
+                  Laporan Kegiatan
+               </Text>
+               <Box
+                  bg={"white"}
+                  style={{
+                     borderRadius: 10,
+                     border: `1px solid ${"#D6D8F6"}`,
+                  }}
+                  pt={10}
+                  pb={10}
+                  pl={20}
+                  pr={20}
+               >
+                  <Spoiler maxHeight={50} showLabel="Lihat Detail" hideLabel="Tutup Detail">
+                     <Text style={{ overflowWrap: "break-word", whiteSpace: "pre-line" }}>
+                        {isData}
+                     </Text>
+                  </Spoiler>
+               </Box>
+            </Box>
+         }
+      </>
+   );
+}
+

src/module/project/ui/navbar_detail_project.tsx

@@ -8,6 +8,7 @@ import { useShallowEffect } from '@mantine/hooks';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
+import { AiFillFileText } from 'react-icons/ai';
 import { FaFileCirclePlus, FaPencil, FaTrash, FaUsers } from 'react-icons/fa6';
 import { HiMenu } from 'react-icons/hi';
 import { IoAddCircle } from 'react-icons/io5';
@@ -138,7 +139,7 @@ export default function NavbarDetailProject() {
           </ActionIcon>
       } />
 
-      <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
+      <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)} size='md'>
         <Box>
           <Stack pt={10}>
             <SimpleGrid
@@ -206,6 +207,26 @@ export default function NavbarDetailProject() {
                 </Box>
               </Flex>
 
+              <Flex justify={'center'} align={'center'} direction={'column'}
+                style={{
+                  cursor: 'pointer'
+                }}
+                onClick={() => {
+                  if (reason == null) {
+                    router.push(param.id + '/report')
+                  } else {
+                    null
+                  }
+                }}
+              >
+                <Box>
+                  <AiFillFileText size={30} color={reason == null ? tema.get().utama : "gray"} />
+                </Box>
+                <Box>
+                  <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Laporan</Text>
+                </Box>
+              </Flex>
+
               {
                 (roleLogin.get() != "user" && roleLogin.get() != "coadmin") &&
                 <>

src/module/task/index.ts

@@ -1,6 +1,7 @@
 import AddDetailTask from "./ui/add_detail_task";
 import AddFileDetailTask from "./ui/add_file_detail_task";
 import AddMemberDetailTask from "./ui/add_member_detail_task";
+import AddReportTask from "./ui/add_report_detail_task";
 import CancelTask from "./ui/cancel_task";
 import ViewDateEndTask from "./ui/create_date_end_task";
 import CreateTask from "./ui/create_task";
@@ -8,6 +9,7 @@ import CreateUsersProject from "./ui/create_users_project";
 import ListAnggotaDetailTask from "./ui/detail_list_anggota_task";
 import ListFileDetailTask from "./ui/detail_list_file_task";
 import ListLinkDetailTask from "./ui/detail_list_link_task";
+import ListReportDetailTask from "./ui/detail_list_report_task";
 import ListTugasDetailTask from "./ui/detail_list_tugas_task";
 import ProgressDetailTask from "./ui/detail_progress_task";
 import EditDetailTask from "./ui/edit_detail_task";
@@ -34,4 +36,6 @@ export { AddMemberDetailTask }
 export { CancelTask }
 export { EditTask }
 export { AddFileDetailTask }
-export { ListLinkDetailTask }
+export { ListLinkDetailTask }
+export { AddReportTask }
+export { ListReportDetailTask }

src/module/task/lib/api_task.ts

@@ -61,6 +61,17 @@ export const funEditDetailTask = async (path: string, data: IFormDateTask) => {
    return await response.json().catch(() => null);
 };
 
+export const funEditReportTask = async (path: string, data: { report: string }) => {
+   const response = await fetch(`/api/task/${path}/lainnya`, {
+      method: "PUT",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
+};
+
 
 export const funCreateDetailTask = async (path: string, data: IFormAddDetailTask) => {
    const response = await fetch(`/api/task/${path}`, {

src/module/task/ui/add_report_detail_task.tsx

@@ -0,0 +1,156 @@
+"use client"
+import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, rem, Skeleton, Stack, Textarea } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { useWibuRealtime } from 'wibu-realtime';
+import { funEditReportTask, funGetTaskDivisionById } from '../lib/api_task';
+
+export default function AddReportTask() {
+   const router = useRouter()
+   const [report, setReport] = useState("")
+   const [openModal, setOpenModal] = useState(false)
+   const param = useParams<{ id: string, detail: string }>()
+   const [loading, setLoading] = useState(true)
+   const [loadingSubmit, setLoadingSubmit] = useState(false)
+   const tema = useHookstate(TEMA)
+   const [touched, setTouched] = useState({
+      report: false,
+   });
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
+
+   async function onSubmit() {
+      try {
+         setLoadingSubmit(true)
+         const res = await funEditReportTask(param.detail, { report })
+         if (res.success) {
+            setDataRealtime([{
+               category: "tugas-detail-report",
+               id: param.detail,
+            }])
+            toast.success(res.message)
+            router.push("./")
+         } else {
+            toast.error(res.message)
+         }
+      } catch (error) {
+         console.error(error)
+         toast.error("Gagal mengedit Laporan Kegiatan, coba lagi nanti")
+      } finally {
+         setLoadingSubmit(false)
+         setOpenModal(false)
+      }
+   }
+
+   function onCheck() {
+      if (report == "") {
+         setTouched({ ...touched, report: true })
+         return false
+      }
+      setOpenModal(true)
+   }
+
+
+
+   function onValidation(kategori: string, val: string) {
+      if (kategori == 'report') {
+         setReport(val)
+         if (val === "") {
+            setTouched({ ...touched, report: true })
+         } else {
+            setTouched({ ...touched, report: false })
+         }
+      }
+   }
+
+   async function getOneData() {
+      try {
+         setLoading(true)
+         const res = await funGetTaskDivisionById(param.detail, 'data');
+         if (res.success) {
+            setReport(res.data.report);
+         } else {
+            toast.error(res.message);
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan data Tugas, coba lagi nanti");
+      } finally {
+         setLoading(false);
+      }
+   }
+
+   useShallowEffect(() => {
+      getOneData();
+   }, [param.detail])
+
+
+   return (
+      <Box >
+         <LayoutNavbarNew back="" title={"Laporan Kegiatan"} menu />
+         <Box p={20}>
+            <Stack pt={15}>
+               {loading ?
+                  <Skeleton height={150} mt={20} radius={10} />
+                  :
+                  <Textarea placeholder="Laporan Kegiatan" label="Laporan Kegiatan" size="md" radius={10}
+                     value={report}
+                     required
+                     error={
+                        touched.report && (
+                           report == "" ? "Laporan Tidak Boleh Kosong" : null
+                        )
+                     }
+                     onChange={(e) => { onValidation('report', e.currentTarget.value) }}
+                     styles={{
+                        input: {
+                           height: "30vh"
+                        }
+                     }}
+                  />
+               }
+            </Stack>
+         </Box>
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${tema.get().bgUtama}`,
+         }}>
+            {loading ?
+               <Skeleton height={50} radius={30} />
+               :
+               <Button
+                  c={"white"}
+                  bg={Object.values(touched).some((v) => v == true) || report == "" || report == null ? 'gray' : tema.get().utama}
+                  size="lg"
+                  radius={30}
+                  fullWidth
+                  onClick={() => { onCheck() }}
+                  disabled={Object.values(touched).some((v) => v == true) || report == "" || report == null ? true : false}
+               >
+                  Simpan
+               </Button>
+            }
+         </Box>
+
+
+         <LayoutModal opened={openModal} loading={loadingSubmit} onClose={() => setOpenModal(false)}
+            description="Apakah Anda yakin ingin mengedit Laporan Kegiatan ini?"
+            onYes={(val) => {
+               if (val) {
+                  onSubmit()
+               } else {
+                  setOpenModal(false)
+               }
+            }} />
+      </Box>
+   );
+}
+

src/module/task/ui/detail_list_report_task.tsx

@@ -0,0 +1,83 @@
+'use client'
+import { keyWibu, TEMA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box, Spoiler, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { useWibuRealtime } from 'wibu-realtime';
+import { funGetTaskDivisionById } from '../lib/api_task';
+import { globalRefreshTask } from '../lib/val_task';
+
+
+export default function ListReportDetailTask() {
+   const [isData, setData] = useState("")
+   const param = useParams<{ id: string, detail: string }>()
+   const refresh = useHookstate(globalRefreshTask)
+   const tema = useHookstate(TEMA)
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
+
+
+   async function getOneData() {
+      try {
+         const res = await funGetTaskDivisionById(param.detail, 'data');
+         if (res.success) {
+            setData(res.data.report)
+         } else {
+            toast.error(res.message);
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan list Laporan Kegiatan, coba lagi nanti");
+      }
+   }
+
+   useShallowEffect(() => {
+      getOneData();
+   }, [param.detail])
+
+
+   useShallowEffect(() => {
+      if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-report' && i.id == param.detail)) {
+         refresh.set(true)
+         getOneData()
+      }
+
+   }, [dataRealTime])
+
+   return (
+      <>
+         {
+            isData != "" && isData != null
+            &&
+            <Box pt={20}>
+               <Text fw={"bold"} c={tema.get().utama}>
+                  Laporan Kegiatan
+               </Text>
+               <Box
+                  bg={"white"}
+                  style={{
+                     borderRadius: 10,
+                     border: `1px solid ${"#D6D8F6"}`,
+                  }}
+                  pt={10}
+                  pb={10}
+                  pl={20}
+                  pr={20}
+               >
+                  <Spoiler maxHeight={50} showLabel="Lihat Detail" hideLabel="Tutup Detail">
+                     <Text style={{ overflowWrap: "break-word", whiteSpace: "pre-line" }}>
+                        {isData}
+                     </Text>
+                  </Spoiler>
+               </Box>
+            </Box>
+         }
+      </>
+   );
+}
+

src/module/task/ui/navbar_detail_division_task.tsx

@@ -9,6 +9,7 @@ import { useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
+import { AiFillFileText } from "react-icons/ai";
 import { FaFileCirclePlus, FaPencil, FaTrash, FaUsers } from "react-icons/fa6";
 import { HiMenu } from "react-icons/hi";
 import { IoAddCircle } from "react-icons/io5";
@@ -138,7 +139,7 @@ export default function NavbarDetailDivisionTask() {
          } />
 
 
-         <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
+         <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)} size='md'>
             <Box>
                <Stack pt={10}>
                   <SimpleGrid
@@ -206,6 +207,26 @@ export default function NavbarDetailDivisionTask() {
                         </Box>
                      </Flex>
 
+                     <Flex justify={'center'} align={'center'} direction={'column'}
+                        style={{
+                           cursor: 'pointer'
+                        }}
+                        onClick={() => {
+                           if (reason == null) {
+                              router.push(param.detail + '/report')
+                           } else {
+                              null
+                           }
+                        }}
+                     >
+                        <Box>
+                           <AiFillFileText size={30} color={reason == null ? tema.get().utama : "gray"} />
+                        </Box>
+                        <Box>
+                           <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Laporan</Text>
+                        </Box>
+                     </Flex>
+
                      {
                         (roleLogin.get() != "user" && roleLogin.get() != "coadmin") || adminLogin.get() ?
                            <>