style : update documents

src/app/(application)/(detail-division)/document/page.tsx

@@ -1,7 +1,11 @@
 import { ViewDocumentDivision } from '@/module/division_new';
+import ListDocumentsDivision from '@/module/division_new/_division_fitur/document/components/list_documents_division';
 import React from 'react';
 
-function Page() {
+function Page({ searchParams }: { searchParams: any }) {
+  if (searchParams.page == "list-document")
+    return <ListDocumentsDivision />;
+  
   return (
     <ViewDocumentDivision/>
   );

src/app/(application)/(detail-division)/task/create/page.tsx

@@ -13,3 +13,4 @@ function Page({ searchParams }: { searchParams: any }) {
 }
 
 export default Page
+// onClick={() => router.push('/document?page=list-document')}

src/module/division_new/_division_fitur/document/components/list_documents_division.tsx

@@ -1,89 +1,80 @@
-import { ActionIcon, Box, Checkbox, Divider, Flex, Grid, Group, Text } from '@mantine/core';
+"use client";
-import React from 'react';
+import { LayoutNavbarNew } from "@/module/_global";
+import {
+  ActionIcon,
+  Box,
+  Checkbox,
+  Divider,
+  Flex,
+  Grid,
+  Group,
+  Text,
+} from "@mantine/core";
+import React from "react";
 import { FcDocument, FcFolder, FcImageFile } from "react-icons/fc";
 
 const dataDocuments = [
   {
-    id: 1,
+    id: 3,
-    name: 'Administrasi',
+    name: "Berkas Kerja",
-    date: '18/06/2024 14.00 PM',
+    date: "18/06/2024 14.00 PM",
-    icon: <FcFolder size={60} />
+    icon: <FcDocument size={60} />,
-  },
-  {
-    id: 2,
-    name: 'Administrasi',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcFolder size={60} />
   },
   {
     id: 3,
-    name: 'Administrasi',
+    name: "Berkas Kerja",
-    date: '18/06/2024 14.00 PM',
+    date: "18/06/2024 14.00 PM",
-    icon: <FcFolder size={60} />
+    icon: <FcDocument size={60} />,
   },
   {
     id: 3,
-    name: 'Berkas Kerja',
+    name: "Image Kegiatan",
-    date: '18/06/2024 14.00 PM',
+    date: "18/06/2024 14.00 PM",
-    icon: <FcDocument size={60} />
+    icon: <FcImageFile size={60} />,
   },
   {
     id: 3,
-    name: 'Berkas Kerja',
+    name: "Image Pelaksanaan",
-    date: '18/06/2024 14.00 PM',
+    date: "18/06/2024 14.00 PM",
-    icon: <FcDocument size={60} />
+    icon: <FcImageFile size={60} />,
   },
-  {
+];
-    id: 3,
-    name: 'Image Kegiatan',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcImageFile size={60} />
-  },
-  {
-    id: 3,
-    name: 'Image Pelaksanaan',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcImageFile size={60} />
-  },
-]
 
 export default function ListDocumentsDivision() {
   return (
     <Box>
+      <LayoutNavbarNew
+        back=""
+        title="Divisi kerohanian"
+        menu
+      />
       <Box p={20}>
         {dataDocuments.map((v, i) => {
           return (
             <Box key={i}>
               <Box mt={10} mb={10}>
-                <Grid align='center'>
+                <Grid align="center">
                   <Grid.Col span={10}>
                     <Group gap={20}>
-                      <Box>
+                      <Box>{v.icon}</Box>
-                        {v.icon}
+                      <Flex direction={"column"}>
-                      </Box>
-                      <Flex direction={'column'}>
                         <Text>{v.name}</Text>
                         <Text fz={10}>{v.date}</Text>
                       </Flex>
                     </Group>
                   </Grid.Col>
                   <Grid.Col span={2}>
-                    <Group justify='flex-end'>
+                    <Group justify="flex-end">
-                      <Checkbox
+                      <Checkbox color="teal" radius="lg" size="md" />
-                        color="teal"
-                        radius="lg"
-                        size="md"
-                      />
                     </Group>
                   </Grid.Col>
                 </Grid>
               </Box>
               <Divider size="xs" />
             </Box>
-          )
+          );
         })}
       </Box>
     </Box>
   );
 }
-

src/module/division_new/_division_fitur/document/components/ui/navbar_document_division.tsx

@@ -14,6 +14,7 @@ import { MdOutlineMoreHoriz } from 'react-icons/md';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import toast from 'react-hot-toast';
 import DrawerMore from './drawer_more';
+import { useRouter } from 'next/navigation';
 
 const dataDocuments = [
   {
@@ -68,6 +69,7 @@ const dataDocuments = [
 
 export default function NavbarDocumentDivision() {
   const [isChecked, setIsChecked] = useState(false);
+  const router = useRouter()
 
   const handleCheckboxChange = () => {
     setIsChecked(!isChecked);
@@ -148,7 +150,7 @@ export default function NavbarDocumentDivision() {
               <Box key={i}>
                 <Box mt={10} mb={10}>
                   <Grid align='center' >
-                    <Grid.Col span={10}>
+                    <Grid.Col span={10} onClick={() => router.push('/document?page=list-document')}>
                       <Group gap={20}>
                         <Box>
                           {v.icon}

src/module/division_new/components/detail_division/list_discussion.tsx

@@ -1,61 +1,74 @@
-import { WARNA } from "@/module/_global"
+"use client"
-import { Box, Group, Text } from "@mantine/core"
+import { WARNA } from "@/module/_global";
-import { CiUser, CiClock2 } from "react-icons/ci"
+import { Box, Group, Text } from "@mantine/core";
-import { GoDiscussionClosed } from "react-icons/go"
+import { useRouter } from "next/navigation";
-
+import { CiUser, CiClock2 } from "react-icons/ci";
+import { GoDiscussionClosed } from "react-icons/go";
 
 const dataDiskusi = [
   {
     id: 1,
-       judul: 'Mengatasi Limbah Makanan ',
+    judul: "Mengatasi Limbah Makanan ",
-       user: 'Fibra Marcell',
+    user: "Fibra Marcell",
-       date: '21 Juni 2024'
+    date: "21 Juni 2024",
   },
   {
     id: 2,
-       judul: 'Pentingnya Menjaga Kelestarian Hutan ',
+    judul: "Pentingnya Menjaga Kelestarian Hutan ",
-       user: 'Bayu Tegar',
+    user: "Bayu Tegar",
-       date: '15 Juni 2024'
+    date: "15 Juni 2024",
   },
   {
     id: 3,
-       judul: 'Mengatasi Limbah Industri ',
+    judul: "Mengatasi Limbah Industri ",
-       user: 'Nian Putri',
+    user: "Nian Putri",
-       date: '11 Mei 2024'
+    date: "11 Mei 2024",
   },
   {
     id: 4,
-       judul: 'Manfaat Sampah Plastik',
+    judul: "Manfaat Sampah Plastik",
-       user: 'Budi Prasetyo',
+    user: "Budi Prasetyo",
-       date: '10 Mei 2024'
+    date: "10 Mei 2024",
   },
-]
+];
 
 export default function ListDiscussionOnDetailDivision() {
+  const router = useRouter();
   return (
     <>
       <Box pt={10}>
-            <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Diskusi Terbaru</Text>
+        <Text c={WARNA.biruTua} mb={10} fw={"bold"} fz={16}>
-            <Box bg={"white"} style={{
+          Diskusi Terbaru
+        </Text>
+        <Box
+          bg={"white"}
+          style={{
             borderRadius: 10,
             border: `1px solid ${"#D6D8F6"}`,
-               padding: 20
+            padding: 20,
-            }}>
+          }}
-               {
+        >
-                  dataDiskusi.map((v, i) => {
+          {dataDiskusi.map((v, i) => {
             return (
-                        <Box key={i} style={{
+              <Box
+                key={i}
+                style={{
                   borderRadius: 10,
                   border: `1px solid ${"#D6D8F6"}`,
-                           padding: 10
+                  padding: 10,
-                        }} mb={10}>
+                }}
+                mb={10}
+                onClick={() => router.push(`/discussion/${v.id}`)}
+              >
                 <Group>
                   <GoDiscussionClosed size={25} />
                   <Box w={{ base: 230, md: 400 }}>
-                                 <Text fw={'bold'} truncate="end">{v.judul}</Text>
+                    <Text fw={"bold"} truncate="end">
+                      {v.judul}
+                    </Text>
                   </Box>
                 </Group>
-                           <Group justify="space-between" mt={20} c={'#8C8C8C'}>
+                <Group justify="space-between" mt={20} c={"#8C8C8C"}>
                   <Group gap={5} align="center">
                     <CiUser size={18} />
                     <Text fz={13}>{v.user}</Text>
@@ -66,11 +79,10 @@ export default function ListDiscussionOnDetailDivision() {
                   </Group>
                 </Group>
               </Box>
-                     )
+            );
-                  })
+          })}
-               }
         </Box>
       </Box>
     </>
-   )
+  );
 }

src/module/division_new/components/detail_division/list_document.tsx

@@ -3,6 +3,7 @@ import { WARNA } from "@/module/_global";
 import { Carousel } from "@mantine/carousel";
 import { Box, Image, Text, Center, Paper, Stack, UnstyledButton } from "@mantine/core";
 import * as ICON from '../../../division/lib/file_icon'
+import { useRouter } from "next/navigation";
 
 const iconContainer = (icon: string) => 'data:image/svg+xml;base64,' + btoa(icon)
 
@@ -41,13 +42,14 @@ const listDocument = [
 ]
 
 export default function ListDocumentOnDetailDivision() {
+   const router = useRouter()
    return (
       <Box pt={10}>
          <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Dokumen Terbaru</Text>
          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
             {
                listDocument.map((v) => <Carousel.Slide key={v.id}>
-                  <UnstyledButton>
+                  <UnstyledButton onClick={() => router.push(`/document`)}>
                      <Stack gap={0}>
                         <Paper withBorder shadow="sm" radius={12} >
                            <Center p={"md"}>

src/module/division_new/components/detail_division/list_task.tsx

@@ -2,6 +2,7 @@
 import { WARNA } from "@/module/_global";
 import { Carousel } from "@mantine/carousel";
 import { Avatar, Box, Group, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
 import { CiClock2 } from "react-icons/ci";
 import { MdAccountCircle } from "react-icons/md";
 
@@ -33,13 +34,14 @@ const dataTask = [
 ]
 
 export default function ListTaskOnDetailDivision() {
+   const router = useRouter()
    return (
       <Box pt={10}>
          <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Tugas Hari Ini</Text>
          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
             {dataTask.map((v, i) =>
                <Carousel.Slide key={v.id}>
-                  <Box p={20} w={{ base: 300, md: 400 }} bg={WARNA.biruTua} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
+                  <Box p={20} w={{ base: 300, md: 400 }} onClick={() => router.push(`/task/${v.id}`)} bg={WARNA.biruTua} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
                      <Text fw={'bold'} c={WARNA.bgWhite} truncate="end">{v.title}</Text>
                      <Group justify="space-between" mt={20} c={'#aeaeae'}>
                         <Group gap={5} align="center">