Merge pull request 'upd: link upload' (#10) from amalia/13-agustus-25 into join

Reviewed-on: bip/sistem-desa-mandiri#10

prisma/schema.prisma

@@ -202,6 +202,7 @@ model Project {
   ProjectFile    ProjectFile[]
   ProjectComment ProjectComment[]
   ProjectTask    ProjectTask[]
+  ProjectLink    ProjectLink[]
 }
 
 model ProjectMember {
@@ -228,6 +229,16 @@ model ProjectFile {
   updatedAt DateTime @updatedAt
 }
 
+model ProjectLink {
+  id        String   @id @default(cuid())
+  Project   Project  @relation(fields: [idProject], references: [id])
+  idProject String
+  link      String   @db.Text
+  isActive  Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
 model ProjectTask {
   id         String   @id @default(cuid())
   Project    Project  @relation(fields: [idProject], references: [id])
@@ -280,6 +291,7 @@ model Division {
   DivisionCalendar           DivisionCalendar[]
   DivisionCalendarReminder   DivisionCalendarReminder[]
   ContainerFileDivision      ContainerFileDivision[]
+  DivisionProjectLink        DivisionProjectLink[]
 }
 
 model DivisionMember {
@@ -309,6 +321,19 @@ model DivisionProject {
   DivisionProjectTask   DivisionProjectTask[]
   DivisionProjectMember DivisionProjectMember[]
   DivisionProjectFile   DivisionProjectFile[]
+  DivisionProjectLink   DivisionProjectLink[]
+}
+
+model DivisionProjectLink {
+  id              String          @id @default(cuid())
+  Division        Division        @relation(fields: [idDivision], references: [id])
+  idDivision      String
+  DivisionProject DivisionProject @relation(fields: [idProject], references: [id])
+  idProject       String
+  link            String          @db.Text
+  isActive        Boolean         @default(true)
+  createdAt       DateTime        @default(now())
+  updatedAt       DateTime        @updatedAt
 }
 
 model DivisionProjectTask {

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

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

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

@@ -1,6 +1,5 @@
-import { ListAnggotaDetailProject, ListFileDetailProject, ListTugasDetailProject, NavbarDetailProject, ProgressDetailProject } from '@/module/project';
+import { ListAnggotaDetailProject, ListFileDetailProject, ListLinkDetailProject, ListTugasDetailProject, NavbarDetailProject, ProgressDetailProject } from '@/module/project';
 import { Box } from '@mantine/core';
-import React from 'react';
 
 function Page() {
   return (
@@ -10,6 +9,7 @@ function Page() {
         <ProgressDetailProject />
         <ListTugasDetailProject />
         <ListFileDetailProject />
+        <ListLinkDetailProject />
         <ListAnggotaDetailProject />
       </Box>
     </Box>

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

@@ -0,0 +1,90 @@
+import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import { createLogUser } from "@/module/user";
+import { NextResponse } from "next/server";
+
+// ADD LINK PROJECT
+export async function POST(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 { link } = (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 insertLink = await prisma.projectLink.create({
+         data: {
+            idProject: id,
+            link: link
+         }
+      })
+
+      // create log user
+      const log = await createLogUser({ act: 'CREATE', desc: 'User menambah link kegiatan', table: 'projectLink', data: insertLink.id })
+      return NextResponse.json({ success: true, message: "Berhasil menambahkan link kegiatan" }, { status: 200 });
+
+   } catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal menambah link kegiatan, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
+   }
+}
+
+
+// DELETE LINK PROJECT
+export async function DELETE(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 { idLink } = (await request.json())
+
+      const data = await prisma.projectLink.count({
+         where: {
+            id: idLink
+         }
+      })
+
+      if (data == 0) {
+         return NextResponse.json(
+            {
+               success: false, message: "Gagal mendapatkan link, data tidak ditemukan",
+            },
+            { status: 404 }
+         );
+      }
+
+      const deleteLink = await prisma.projectLink.delete({
+         where: {
+            id: idLink
+         }
+      })
+
+      // create log user
+      const log = await createLogUser({ act: 'DELETE', desc: 'User menghapus link kegiatan', table: 'projectLink', data: String(idLink) })
+      return NextResponse.json({ success: true, message: "Berhasil menghapus link kegiatan" }, { status: 200 });
+
+   } catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal menghapus link kegiatan, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
+   }
+}

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

@@ -133,6 +133,17 @@ export async function GET(request: Request, context: { params: { id: string } })
             }))
 
             allData = fix
+        } else if (kategori == "link") {
+            const dataLink = await prisma.projectLink.findMany({
+                where: {
+                    isActive: true,
+                    idProject: String(id)
+                },
+                orderBy: {
+                    createdAt: 'asc'
+                }
+            })
+            allData = dataLink
         }
 
         return NextResponse.json({ success: true, message: "Berhasil mendapatkan kegiatan", data: allData, }, { status: 200 });

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

@@ -0,0 +1,95 @@
+import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import { createLogUser } from "@/module/user";
+import { NextResponse } from "next/server";
+
+// ADD LINK TASK DIVISI
+export async function POST(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 { link, idDivision } = (await request.json());
+
+      const data = await prisma.divisionProject.count({
+         where: {
+            id: id,
+         },
+      });
+
+      if (data == 0) {
+         return NextResponse.json(
+            {
+               success: false,
+               message: "Tambah link tugas gagal, data tugas tidak ditemukan",
+            },
+            { status: 404 }
+         );
+      }
+
+
+
+      const insertlink = await prisma.divisionProjectLink.create({
+         data: {
+            idProject: id,
+            link,
+            idDivision,
+         }
+      })
+
+
+      // create log user
+      const log = await createLogUser({ act: 'CREATE', desc: 'User menambahkan link tugas divisi', table: 'divisionProjectLink', data: insertlink.id })
+
+
+      return NextResponse.json({ success: true, message: "Berhasil menambahkan link tugas", }, { status: 200 });
+   } catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal menambah link tugas, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
+   }
+}
+
+
+// DELETE LINK TASK DIVISI
+export async function DELETE(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 { idLink } = (await request.json())
+
+      const data = await prisma.divisionProjectLink.count({
+         where: {
+            id: idLink
+         }
+      })
+
+      if (data == 0) {
+         return NextResponse.json(
+            {
+               success: false, message: "Gagal mendapatkan link, data tidak ditemukan",
+            },
+            { status: 404 }
+         );
+      }
+
+      const deleteLink = await prisma.divisionProjectLink.delete({
+         where: {
+            id: idLink
+         }
+      })
+
+      // create log user
+      const log = await createLogUser({ act: 'DELETE', desc: 'User menghapus link tugas divisi', table: 'divisionProjectLink', data: String(idLink) })
+      return NextResponse.json({ success: true, message: "Berhasil menghapus link tugas divisi" }, { status: 200 });
+
+   } catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal menghapus link tugas divisi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
+   }
+}

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

@@ -150,6 +150,18 @@ export async function GET(request: Request, context: { params: { id: string } })
          }))
 
          allData = fix
+      } else if (kategori == "link") {
+         const dataLink = await prisma.divisionProjectLink.findMany({
+            where: {
+               isActive: true,
+               idProject: String(id)
+            },
+            orderBy: {
+               createdAt: 'asc'
+            }
+         })
+
+         allData = dataLink
       }
 
       return NextResponse.json({ success: true, message: "Berhasil mendapatkan tugas divisi", data: allData }, { status: 200 });

src/lib/urlCompleted.ts

@@ -0,0 +1,7 @@
+export function urlCompleted(url: string) {
+   if (url.startsWith("http://") || url.startsWith("https://")) {
+      return url
+   } else {
+      return `https://${url}`
+   }
+}

src/module/project/index.ts

@@ -15,6 +15,7 @@ import AddMemberDetailProject from "./ui/add_member_detail_project";
 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";
 
 export { ViewDateEndTask }
 export { CreateUsersProject }
@@ -31,4 +32,5 @@ export { CancelProject }
 export { AddMemberDetailProject }
 export { CreateProject }
 export { AddFileDetailProject }
-export { WrapLayoutProject }
+export { WrapLayoutProject }
+export { ListLinkDetailProject }

src/module/project/lib/api_project.ts

@@ -1,4 +1,4 @@
-import { IFormAddDetailproject, IFormAddMemberProject, IFormDateProject, NewIFormDateProject } from "./type_project";
+import { IFormAddDetailproject, IFormAddMemberProject, NewIFormDateProject } from "./type_project";
 
 
 export const funGetAllProject = async (path?: string) => {
@@ -149,6 +149,17 @@ export const funAddFileProject = async (path: string, data: FormData) => {
     return await response.json().catch(() => null);
 };
 
+export const funDeleteLinkProject = async (path: string, data: { idLink: string }) => {
+    const response = await fetch(`/api/project/${path}/link`, {
+        method: "DELETE",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
+};
+
 export const funDeleteProject = async (path: string) => {
     const response = await fetch(`/api/project/${path}/lainnya`, {
         method: "DELETE",
@@ -159,3 +170,14 @@ export const funDeleteProject = async (path: string) => {
     return await response.json().catch(() => null);
 };
 
+
+export const funAddLinkProject = async (path: string, data: {link: string}) => {
+    const response = await fetch(`/api/project/${path}/link`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
+}

src/module/project/lib/type_project.ts

@@ -20,7 +20,13 @@ export interface IDataFileProject {
   id: string
   name: string
   extension: string
-  idStorage:string
+  idStorage: string
+}
+
+
+export interface IDataLinkProject {
+  id: string
+  link: string
 }
 
 export interface IDataMemberProject {
@@ -46,7 +52,7 @@ export interface IFormDateProject {
   title: string,
 }
 
-export interface NewIFormDateProject{
+export interface NewIFormDateProject {
   dateStart: string,
   dateEnd: string,
   title: string,

src/module/project/ui/list_link_detail_project.tsx

@@ -0,0 +1,231 @@
+'use client'
+import { urlCompleted } from '@/lib/urlCompleted';
+import { globalRole, keyWibu, LayoutDrawer, TEMA } from '@/module/_global';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import { useHookstate } from '@hookstate/core';
+import { Box, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { FaTrash } from 'react-icons/fa6';
+import { LuLink } from 'react-icons/lu';
+import { RiExternalLinkLine } from 'react-icons/ri';
+import { useWibuRealtime } from 'wibu-realtime';
+import { funDeleteLinkProject, funGetOneProjectById } from '../lib/api_project';
+import { IDataLinkProject } from '../lib/type_project';
+import { globalIsMemberProject } from '../lib/val_project';
+
+export default function ListLinkDetailProject() {
+   const [isData, setData] = useState<IDataLinkProject[]>([])
+   const param = useParams<{ id: string }>()
+   const [loading, setLoading] = useState(true)
+   const [loadingDelete, setLoadingDelete] = useState(false)
+   const [idData, setIdData] = useState('')
+   const [linkData, setLinkData] = useState('')
+   const [openDrawer, setOpenDrawer] = useState(false)
+   const [isOpenModal, setOpenModal] = useState(false)
+   const tema = useHookstate(TEMA)
+   const roleLogin = useHookstate(globalRole)
+   const memberProject = useHookstate(globalIsMemberProject)
+   const isMobile = useMediaQuery("(max-width: 350px)");
+   const [reason, setReason] = useState("")
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
+
+   async function getOneDataCancel() {
+      try {
+         const res = await funGetOneProjectById(param.id, 'data');
+         if (res.success) {
+            setReason(res.data.reason);
+         } else {
+            toast.error(res.message);
+         }
+
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
+      }
+   }
+
+   useShallowEffect(() => {
+      getOneDataCancel();
+   }, [param.id])
+
+   async function getOneData(loading: boolean) {
+      try {
+         setLoading(loading)
+         const res = await funGetOneProjectById(param.id, 'link');
+         if (res.success) {
+            setData(res.data)
+         } else {
+            toast.error(res.message);
+         }
+
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan link kegiatan, coba lagi nanti");
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   useShallowEffect(() => {
+      getOneData(true);
+   }, [param.id])
+
+
+   async function onDelete() {
+      try {
+         setLoadingDelete(true)
+         const res = await funDeleteLinkProject(param.id, { idLink: idData });
+         if (res.success) {
+            setDataRealtime([{
+               category: "project-detail-link",
+               id: param.id,
+            }])
+            toast.success(res.message)
+            getOneData(false)
+            setIdData("")
+            setOpenDrawer(false)
+         } else {
+            toast.error(res.message);
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal menghapus link, coba lagi nanti");
+      } finally {
+         setOpenModal(false)
+         setLoadingDelete(false)
+      }
+
+   }
+
+   useShallowEffect(() => {
+      if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-link' && i.id == param.id)) {
+         getOneData(false)
+      } else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-status' && i.id == param.id)) {
+         getOneDataCancel()
+      }
+   }, [dataRealTime])
+
+   return (
+      <>
+         {
+            isData.length > 0
+            &&
+            <Box pt={20}>
+               <Text fw={'bold'} c={tema.get().utama}>Link</Text>
+               <Box bg={"white"} style={{
+                  borderRadius: 10,
+                  border: `1px solid ${"#D6D8F6"}`,
+                  padding: 20
+               }}>
+                  {
+                     isData.map((item, index) => {
+                        return (
+                           <Box
+                              key={index}
+                              style={{
+                                 borderRadius: 10,
+                                 border: `1px solid ${"#D6D8F6"}`,
+                                 padding: 10
+                              }}
+                              mb={10}
+
+                              onClick={() => {
+                                 setLinkData(item.link)
+                                 setIdData(item.id)
+                                 setOpenDrawer(true)
+                              }}
+                           >
+                              <Grid justify='center' align='center'>
+                                 <Grid.Col span={{
+                                    base: 1.5,
+                                    xs: 1,
+                                    sm: 1,
+                                    md: 1,
+                                    lg: 1,
+                                    xl: 1,
+                                 }}>
+                                    <LuLink size={30} />
+                                 </Grid.Col>
+                                 <Grid.Col
+                                    span={{
+                                       base: 10.5,
+                                       xs: 11,
+                                       sm: 11,
+                                       md: 11,
+                                       lg: 11,
+                                       xl: 11,
+                                    }}
+                                 >
+                                    <Text style={{
+                                       overflowWrap: "break-word"
+                                    }} pl={isMobile ? 10 : 0} truncate="end">{item.link}</Text>
+                                 </Grid.Col>
+                              </Grid>
+                              <Group>
+                              </Group>
+                           </Box>
+                        )
+                     })
+                  }
+               </Box>
+
+
+               <LayoutDrawer opened={openDrawer} title={<Text truncate="end">Menu</Text>} onClose={() => setOpenDrawer(false)}>
+                  <Box>
+                     <Stack pt={10}>
+                        <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
+                           {
+                              <Flex onClick={() => { window.open(urlCompleted(linkData), '_blank', 'noopener,noreferrer') }} justify={'center'} align={'center'} direction={'column'} >
+                                 <Box>
+                                    <RiExternalLinkLine size={30} color={tema.get().utama} />
+                                 </Box>
+                                 <Box>
+                                    <Text c={tema.get().utama}>Buka Link</Text>
+                                 </Box>
+                              </Flex>
+                           }
+
+                           {
+                              (roleLogin.get() == "user" || roleLogin.get() == "coadmin") && !memberProject.get() ? <></>
+                                 :
+                                 <Flex onClick={() => {
+                                    reason == null ?
+                                       setOpenModal(true)
+                                       : setOpenModal(false)
+                                 }} justify={'center'} align={'center'} direction={'column'} >
+                                    <Box>
+                                       <FaTrash size={30} color={reason == null ? tema.get().utama : "gray"} />
+                                    </Box>
+                                    <Box>
+                                       <Text c={reason == null ? tema.get().utama : "gray"}>Hapus</Text>
+                                    </Box>
+                                 </Flex>
+                           }
+                        </SimpleGrid>
+                     </Stack>
+                  </Box>
+               </LayoutDrawer>
+
+
+               <LayoutModal loading={loadingDelete} opened={isOpenModal} onClose={() => setOpenModal(false)}
+                  description="Apakah Anda yakin ingin menghapus link ini? Link yang dihapus tidak dapat dikembalikan"
+                  onYes={(val) => {
+                     if (val) {
+                        onDelete()
+                     } else {
+                        setOpenModal(false)
+                     }
+                  }} />
+
+            </Box>
+         }
+      </>
+   );
+}
+

src/module/project/ui/navbar_detail_project.tsx

@@ -3,7 +3,7 @@ import { globalRole, keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from '@/modu
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { funGetUserByCookies } from '@/module/auth';
 import { useHookstate } from '@hookstate/core';
-import { ActionIcon, Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
+import { ActionIcon, Box, Button, Flex, Grid, Modal, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -11,9 +11,10 @@ import toast from 'react-hot-toast';
 import { FaFileCirclePlus, FaPencil, FaTrash, FaUsers } from 'react-icons/fa6';
 import { HiMenu } from 'react-icons/hi';
 import { IoAddCircle } from 'react-icons/io5';
+import { LuLink } from 'react-icons/lu';
 import { MdCancel } from 'react-icons/md';
 import { useWibuRealtime } from 'wibu-realtime';
-import { funDeleteProject, funGetOneProjectById } from '../lib/api_project';
+import { funAddLinkProject, funDeleteProject, funGetOneProjectById } from '../lib/api_project';
 import { globalIsMemberProject } from '../lib/val_project';
 
 export default function NavbarDetailProject() {
@@ -28,7 +29,10 @@ export default function NavbarDetailProject() {
   const tema = useHookstate(TEMA)
   const [reason, setReason] = useState("")
   const [openModal, setOpenModal] = useState(false)
+  const [openNewLink, setOpenNewLink] = useState(false)
   const [loadingModal, setLoadingModal] = useState(false)
+  const [loadingLink, setLoadingLink] = useState(false)
+  const [valLink, setValLink] = useState("")
   const [dataRealTime, setDataRealtime] = useWibuRealtime({
     WIBU_REALTIME_TOKEN: keyWibu,
     project: "sdm"
@@ -52,6 +56,30 @@ export default function NavbarDetailProject() {
     }
   }
 
+  async function addLinkProject() {
+    try {
+      setLoadingLink(true)
+      const res = await funAddLinkProject(param.id, { link: valLink });
+      if (res.success) {
+        setDataRealtime([{
+          category: "project-detail-link",
+          id: param.id,
+          user: res.user
+        }])
+        toast.success(res.message)
+      } else {
+        toast.error(res.message)
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal menambahkan link, coba lagi nanti");
+    } finally {
+      setLoadingLink(false)
+      setOpenNewLink(false)
+      setValLink("")
+    }
+  }
+
   async function deleteDataProject() {
     try {
       setLoadingModal(true)
@@ -157,6 +185,27 @@ export default function NavbarDetailProject() {
                 </Box>
               </Flex>
 
+              <Flex justify={'center'} align={'center'} direction={'column'}
+                style={{
+                  cursor: 'pointer'
+                }}
+                onClick={() => {
+                  if (reason == null) {
+                    setOpen(false)
+                    setOpenNewLink(true)
+                  } else {
+                    null
+                  }
+                }}
+              >
+                <Box>
+                  <LuLink size={30} color={reason == null ? tema.get().utama : "gray"} />
+                </Box>
+                <Box>
+                  <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Tambah link</Text>
+                </Box>
+              </Flex>
+
               {
                 (roleLogin.get() != "user" && roleLogin.get() != "coadmin") &&
                 <>
@@ -229,11 +278,50 @@ export default function NavbarDetailProject() {
             </SimpleGrid>
           </Stack>
         </Box>
-      </LayoutDrawer>
+      </LayoutDrawer >
 
       <LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
         description="Apakah Anda yakin ingin menghapus kegiatan ini?"
         onYes={(val) => { val ? deleteDataProject() : setOpenModal(false) }} />
+
+      <Modal styles={{
+        body: {
+          borderRadius: 20
+        },
+        content: {
+          borderRadius: 20,
+          border: `2px solid ${"#828AFC"}`
+        }
+      }} opened={openNewLink} onClose={() => setOpenNewLink(false)} centered withCloseButton={false}>
+        <Box p={20}>
+          <Text ta={"center"} fw={"bold"}>Tambah Link</Text>
+          <Box mt={20} mb={20}>
+            <TextInput
+              styles={{
+                input: {
+                  color: tema.get().utama,
+                  borderRadius: '#828AFC',
+                  borderColor: '#828AFC',
+                },
+              }}
+              size="md"
+              radius={10}
+              placeholder="Masukkan link"
+              value={valLink}
+              onChange={(e) => setValLink(e.target.value)}
+            />
+          </Box>
+          <Grid mt={40}>
+            <Grid.Col span={6}>
+              <Button variant="subtle" fullWidth color='#969494' onClick={() => setOpenNewLink(false)}>Batalkan</Button>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Button loading={loadingLink} disabled={loadingLink || valLink == "" ? true : false} variant="subtle" fullWidth color={tema.get().utama} onClick={() => { addLinkProject() }}>Tambah</Button>
+            </Grid.Col>
+          </Grid>
+        </Box>
+      </Modal>
+
     </>
   );
 }

src/module/task/index.ts

@@ -7,6 +7,7 @@ import CreateTask from "./ui/create_task";
 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 ListTugasDetailTask from "./ui/detail_list_tugas_task";
 import ProgressDetailTask from "./ui/detail_progress_task";
 import EditDetailTask from "./ui/edit_detail_task";
@@ -32,4 +33,5 @@ export { AddDetailTask }
 export { AddMemberDetailTask }
 export { CancelTask }
 export { EditTask }
-export { AddFileDetailTask }
+export { AddFileDetailTask }
+export { ListLinkDetailTask }

src/module/task/lib/api_task.ts

@@ -154,4 +154,27 @@ export const funDeleteTask = async (path: string) => {
       },
    });
    return await response.json().catch(() => null);
-};
+};
+
+export const funAddLinkTask = async (path: string, data: { link: string, idDivision: string }) => {
+   const response = await fetch(`/api/task/${path}/link`, {
+      method: "POST",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
+};
+
+
+export const funDeleteLinkTask = async (path: string, data: { idLink: string }) => {
+   const response = await fetch(`/api/task/${path}/link`, {
+      method: "DELETE",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
+};

src/module/task/lib/type_task.ts

@@ -70,4 +70,9 @@ export interface IDataFileTaskDivision {
    extension: string,
    nameInStorage: string,
    idStorage: string
-}
+}
+
+export interface IDataLinkTaskDivision {
+   id: string
+   link: string
+}

src/module/task/ui/detail_list_link_task.tsx

@@ -0,0 +1,230 @@
+'use client'
+import { urlCompleted } from '@/lib/urlCompleted';
+import { globalRole, keyWibu, LayoutDrawer, TEMA } from '@/module/_global';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import { globalIsMemberDivision } from '@/module/division_new';
+import { useHookstate } from '@hookstate/core';
+import { Box, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { FaTrash } from 'react-icons/fa6';
+import { LuLink } from 'react-icons/lu';
+import { RiExternalLinkLine } from 'react-icons/ri';
+import { useWibuRealtime } from 'wibu-realtime';
+import { funDeleteLinkTask, funGetTaskDivisionById } from '../lib/api_task';
+import { IDataLinkTaskDivision } from '../lib/type_task';
+
+export default function ListLinkDetailTask() {
+   const isMobile = useMediaQuery("(max-width: 350px)");
+   const roleLogin = useHookstate(globalRole)
+   const memberDivision = useHookstate(globalIsMemberDivision)
+   const [isData, setData] = useState<IDataLinkTaskDivision[]>([])
+   const [loading, setLoading] = useState(true)
+   const param = useParams<{ id: string, detail: string }>()
+   const [openDrawer, setOpenDrawer] = useState(false)
+   const [isOpenModal, setOpenModal] = useState(false)
+   const [loadingModal, setLoadingModal] = useState(false)
+   const [linkData, setLinkData] = useState('')
+   const [idData, setIdData] = useState('')
+   const tema = useHookstate(TEMA)
+   const [reason, setReason] = useState("")
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
+
+
+   async function getOneDataCancel() {
+      try {
+         const res = await funGetTaskDivisionById(param.detail, 'data');
+         if (res.success) {
+            setReason(res.data.reason);
+         } else {
+            toast.error(res.message);
+         }
+
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan data tugas divisi, coba lagi nanti");
+      }
+   }
+
+   useShallowEffect(() => {
+      getOneDataCancel();
+   }, [param.detail])
+
+   async function getOneData(loading: boolean) {
+      try {
+         setLoading(loading)
+         const res = await funGetTaskDivisionById(param.detail, 'link');
+         if (res.success) {
+            setData(res.data)
+         } else {
+            toast.error(res.message);
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan file tugas divisi, coba lagi nanti");
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   useShallowEffect(() => {
+      getOneData(true);
+   }, [param.detail])
+
+
+   async function onDelete() {
+      try {
+         setLoadingModal(true)
+         const res = await funDeleteLinkTask(param.detail, { idLink: idData });
+         if (res.success) {
+            setDataRealtime([{
+               category: "tugas-detail-link",
+               id: param.detail,
+            }])
+            toast.success(res.message)
+            getOneData(false)
+            setIdData("")
+            setOpenDrawer(false)
+         } else {
+            toast.error(res.message);
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal menghapus file, coba lagi nanti");
+      } finally {
+         setLoadingModal(false)
+         setOpenModal(false)
+      }
+   }
+
+   useShallowEffect(() => {
+      if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-link' && i.id == param.detail)) {
+         getOneData(false)
+      } else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-status' && i.id == param.detail)) {
+         getOneDataCancel()
+      }
+   }, [dataRealTime])
+
+   return (
+      <>
+         {
+            isData.length > 0
+            &&
+            <Box pt={20}>
+               <Text fw={'bold'} c={tema.get().utama}>Link</Text>
+               <Box bg={"white"} style={{
+                  borderRadius: 10,
+                  border: `1px solid ${"#D6D8F6"}`,
+                  padding: 20
+               }}>
+                  {
+                     isData.map((item, index) => {
+                        return (
+                           <Box
+                              key={index}
+                              style={{
+                                 borderRadius: 10,
+                                 border: `1px solid ${"#D6D8F6"}`,
+                                 padding: 10
+                              }}
+                              mb={10}
+
+                              onClick={() => {
+                                 setLinkData(item.link)
+                                 setIdData(item.id)
+                                 setOpenDrawer(true)
+                              }}
+                           >
+                              <Grid justify='center' align='center'>
+                                 <Grid.Col span={{
+                                    base: 1.5,
+                                    xs: 1,
+                                    sm: 1,
+                                    md: 1,
+                                    lg: 1,
+                                    xl: 1,
+                                 }}>
+                                    <LuLink size={30} />
+                                 </Grid.Col>
+                                 <Grid.Col
+                                    span={{
+                                       base: 10.5,
+                                       xs: 11,
+                                       sm: 11,
+                                       md: 11,
+                                       lg: 11,
+                                       xl: 11,
+                                    }}
+                                 >
+                                    <Text style={{
+                                       overflowWrap: "break-word"
+                                    }} pl={isMobile ? 10 : 0} truncate="end">{item.link}</Text>
+                                 </Grid.Col>
+                              </Grid>
+                              <Group>
+                              </Group>
+                           </Box>
+                        )
+                     })
+                  }
+               </Box>
+
+
+               <LayoutDrawer opened={openDrawer} title={<Text truncate="end">Menu</Text>} onClose={() => setOpenDrawer(false)}>
+                  <Box>
+                     <Stack pt={10}>
+                        <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
+                           {
+                              <Flex onClick={() => { window.open(urlCompleted(linkData), '_blank', 'noopener,noreferrer') }} justify={'center'} align={'center'} direction={'column'} >
+                                 <Box>
+                                    <RiExternalLinkLine size={30} color={tema.get().utama} />
+                                 </Box>
+                                 <Box>
+                                    <Text c={tema.get().utama}>Buka Link</Text>
+                                 </Box>
+                              </Flex>
+                           }
+
+                           {
+                              (roleLogin.get() == "user" || roleLogin.get() == "coadmin") && !memberDivision.get() ? <></>
+                                 :
+                                 <Flex onClick={() => {
+                                    reason == null ?
+                                       setOpenModal(true)
+                                       : setOpenModal(false)
+                                 }} justify={'center'} align={'center'} direction={'column'} >
+                                    <Box>
+                                       <FaTrash size={30} color={reason == null ? tema.get().utama : "gray"} />
+                                    </Box>
+                                    <Box>
+                                       <Text c={reason == null ? tema.get().utama : "gray"}>Hapus</Text>
+                                    </Box>
+                                 </Flex>
+                           }
+                        </SimpleGrid>
+                     </Stack>
+                  </Box>
+               </LayoutDrawer>
+
+
+               <LayoutModal loading={loadingModal} opened={isOpenModal} onClose={() => setOpenModal(false)}
+                  description="Apakah Anda yakin ingin menghapus link ini? Link yang dihapus tidak dapat dikembalikan"
+                  onYes={(val) => {
+                     if (val) {
+                        onDelete()
+                     } else {
+                        setOpenModal(false)
+                     }
+                  }} />
+
+            </Box>
+         }
+      </>
+   );
+}
+

src/module/task/ui/navbar_detail_division_task.tsx

@@ -1,8 +1,10 @@
 'use client'
 import { globalRole, keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { funGetUserByCookies } from "@/module/auth";
 import { globalIsAdminDivision, globalIsMemberDivision } from "@/module/division_new";
 import { useHookstate } from "@hookstate/core";
-import { ActionIcon, Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
+import { ActionIcon, Box, Button, Flex, Grid, Modal, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
@@ -10,11 +12,10 @@ import toast from "react-hot-toast";
 import { FaFileCirclePlus, FaPencil, FaTrash, FaUsers } from "react-icons/fa6";
 import { HiMenu } from "react-icons/hi";
 import { IoAddCircle } from "react-icons/io5";
+import { LuLink } from "react-icons/lu";
 import { MdCancel } from "react-icons/md";
-import { funDeleteTask, funGetTaskDivisionById } from "../lib/api_task";
 import { useWibuRealtime } from "wibu-realtime";
-import LayoutModal from "@/module/_global/layout/layout_modal";
+import { funAddLinkTask, funDeleteTask, funGetTaskDivisionById } from "../lib/api_task";
-import { funGetUserByCookies } from "@/module/auth";
 
 export default function NavbarDetailDivisionTask() {
    const router = useRouter()
@@ -29,6 +30,9 @@ export default function NavbarDetailDivisionTask() {
    const [isUser, setUser] = useState('')
    const [loadingModal, setLoadingModal] = useState(false)
    const [openModal, setOpenModal] = useState(false)
+   const [openNewLink, setOpenNewLink] = useState(false)
+   const [valLink, setValLink] = useState("")
+   const [loadingLink, setLoadingLink] = useState(false)
    const [dataRealTime, setDataRealtime] = useWibuRealtime({
       WIBU_REALTIME_TOKEN: keyWibu,
       project: "sdm"
@@ -80,6 +84,29 @@ export default function NavbarDetailDivisionTask() {
       getOneData();
    }, [param.detail])
 
+   async function addLinkProject() {
+      try {
+         setLoadingLink(true)
+         const res = await funAddLinkTask(param.detail, { link: valLink, idDivision: param.id });
+         if (res.success) {
+            setDataRealtime([{
+               category: "tugas-detail-link",
+               id: param.detail,
+            }])
+            toast.success(res.message)
+         } else {
+            toast.error(res.message)
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal menambahkan link, coba lagi nanti");
+      } finally {
+         setLoadingLink(false)
+         setOpenNewLink(false)
+         setValLink("")
+      }
+   }
+
 
    useShallowEffect(() => {
       if (dataRealTime && dataRealTime.some((i: any) => (i.category == 'tugas-detail' || i.category == 'tugas-detail-status') && i.id == param.detail)) {
@@ -158,6 +185,27 @@ export default function NavbarDetailDivisionTask() {
                         </Box>
                      </Flex>
 
+                     <Flex justify={'center'} align={'center'} direction={'column'}
+                        style={{
+                           cursor: 'pointer'
+                        }}
+                        onClick={() => {
+                           if (reason == null) {
+                              setOpen(false)
+                              setOpenNewLink(true)
+                           } else {
+                              null
+                           }
+                        }}
+                     >
+                        <Box>
+                           <LuLink size={30} color={reason == null ? tema.get().utama : "gray"} />
+                        </Box>
+                        <Box>
+                           <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Tambah link</Text>
+                        </Box>
+                     </Flex>
+
                      {
                         (roleLogin.get() != "user" && roleLogin.get() != "coadmin") || adminLogin.get() ?
                            <>
@@ -239,7 +287,46 @@ export default function NavbarDetailDivisionTask() {
 
          <LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
             description="Apakah Anda yakin ingin menghapus tugas divisi ini?"
-            onYes={(val) => { val ? deleteDataProject() : setOpenModal(false) }} />
+            onYes={(val) => { val ? deleteDataProject() : setOpenModal(false) }}
+         />
+
+         <Modal styles={{
+            body: {
+               borderRadius: 20
+            },
+            content: {
+               borderRadius: 20,
+               border: `2px solid ${"#828AFC"}`
+            }
+         }} opened={openNewLink} onClose={() => setOpenNewLink(false)} centered withCloseButton={false}>
+            <Box p={20}>
+               <Text ta={"center"} fw={"bold"}>Tambah Link</Text>
+               <Box mt={20} mb={20}>
+                  <TextInput
+                     styles={{
+                        input: {
+                           color: tema.get().utama,
+                           borderRadius: '#828AFC',
+                           borderColor: '#828AFC',
+                        },
+                     }}
+                     size="md"
+                     radius={10}
+                     placeholder="Masukkan link"
+                     value={valLink}
+                     onChange={(e) => setValLink(e.target.value)}
+                  />
+               </Box>
+               <Grid mt={40}>
+                  <Grid.Col span={6}>
+                     <Button variant="subtle" fullWidth color='#969494' onClick={() => setOpenNewLink(false)}>Batalkan</Button>
+                  </Grid.Col>
+                  <Grid.Col span={6}>
+                     <Button loading={loadingLink} disabled={loadingLink || valLink == "" ? true : false} variant="subtle" fullWidth color={tema.get().utama} onClick={() => { addLinkProject() }}>Tambah</Button>
+                  </Grid.Col>
+               </Grid>
+            </Box>
+         </Modal>
       </>
    )
 }