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

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") &&
                 <>