style: update skelaton

src/module/calender/ui/date_event_division.tsx

@@ -1,5 +1,5 @@
 import { WARNA } from '@/module/_global';
-import { Box, Divider, Group, Indicator, Text } from '@mantine/core';
+import { Box, Divider, Group, Indicator, Skeleton, Text } from '@mantine/core';
 import { DatePicker, DatePickerProps } from '@mantine/dates';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -7,6 +7,7 @@ import { funGetAllCalender } from '../lib/api_calender';
 import { useSetState, useShallowEffect } from '@mantine/hooks';
 import { IDataCalender } from '../lib/type_calender';
 import moment from 'moment';
+import _ from 'lodash';
 
 
 export default function DateEventDivision() {
@@ -14,13 +15,18 @@ export default function DateEventDivision() {
   const router = useRouter()
   const param = useParams<{ id: string, detail: string }>()
   const [isDate, setDate] = useSetState<any>(moment().format('YYYY-MM-DD'))
+  const [loading, setLoading] = useState(true)
 
   const getData = async (tgl: any) => {
     try {
+      setLoading(true)
       const response = await funGetAllCalender('?division=' + param.id + '&date=' + tgl)
       setData(response.data)
+      setLoading(false)
     } catch (error) {
       console.log(error)
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -60,7 +66,21 @@ export default function DateEventDivision() {
         <Text mb={10} mt={20} fw={"bold"}>
           Event
         </Text>
-        {isData.length > 0 ? (
+        {loading ? 
+          Array(6)
+          .fill(null)
+          .map((_, i) => (
+            <Box key={i} mb={10}>
+              <Skeleton height={100} width={"100%"} radius={"md"} />
+            </Box>
+          ))
+          :
+          _.isEmpty(isData)
+            ?
+            <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '20vh' }}>
+              <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada event</Text>
+            </Box>
+            :
             isData.map((event, index) => {
               const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
               const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
@@ -81,9 +101,7 @@ export default function DateEventDivision() {
                 </Box>
               )
             })
-        ) : (
+        }
-          <Text c={WARNA.biruTua}>Tidak ada event</Text>
-        )}
       </Box>
     </Box>
   );

src/module/calender/ui/history_division_calender.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Box, Center, Flex, Grid, Group, Text, TextInput } from '@mantine/core';
+import { Box, Center, Flex, Grid, Group, Skeleton, Text, TextInput } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -9,63 +9,25 @@ import { funGetAllCalender, funGetHostory } from '../lib/api_calender';
 import { useShallowEffect } from '@mantine/hooks';
 import moment from 'moment';
 import "moment/locale/id";
-
+import _ from 'lodash';
-const history = [
-  {
-    dateStart: "21",
-    data: [
-      {
-        id: 1,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "10.00",
-        status: "Selesai",
-      },
-      {
-        id: 2,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "13.00 - 14.00",
-      },
-    ]
-  },
-  {
-    dateStart: "21",
-    data: [
-      {
-        id: 1,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "10.00",
-      },
-      {
-        id: 1,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "13.00",
-      },
-      {
-        id: 1,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "15.00",
-      },
-    ]
-  },
-]
 
 export default function HistoryDivisionCalender() {
   const [isData, setData] = useState<IHistoryCalender[]>([])
   const router = useRouter()
   const param = useParams<{ id: string, detail: string }>()
   const [searchQuery, setSearchQuery] = useState('')
+  const [loading, setLoading] = useState(true)
 
   const getData = async () => {
     try {
+      setLoading(true)
       const response = await funGetHostory('?division=' + param.id + '&search=' + searchQuery)
       setData(response.data)
+      setLoading(false)
     } catch (error) {
       console.log(error)
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -74,7 +36,7 @@ export default function HistoryDivisionCalender() {
   }, [searchQuery])
   return (
     <Box>
-      <LayoutNavbarNew back="/calender" title="Riwayat kalender" menu />
+      <LayoutNavbarNew back={`/division/${param.id}/calender/`} title="Riwayat kalender" menu />
       <Box p={20}>
         <TextInput
           styles={{
@@ -96,7 +58,37 @@ export default function HistoryDivisionCalender() {
             borderRadius: 10,
             padding: 20
           }}>
-            {isData.map((v, i) => {
+            {loading ?
+              Array(6)
+                .fill(null)
+                .map((_, i) => (
+                  <Box key={i} mb={10}>
+                    <Grid >
+                      <Grid.Col span={2}>
+                        <Flex justify={"center"} direction={'column'}>
+                          <Skeleton height={30} width={"100%"} radius={"md"} />
+                          <Skeleton height={20} width={"100%"} radius={"md"} mt={10} />
+                        </Flex>
+                      </Grid.Col>
+                      <Grid.Col span={'auto'}>
+                        {[...Array(1)].map((_, x) => (
+                          <Box mb={10} key={x}>
+                            <Skeleton height={20} width={"100%"} radius={"md"} />
+                            <Skeleton height={20} width={"100%"} radius={"md"} mt={10} />
+                          </Box>
+                        ))}
+                      </Grid.Col>
+                    </Grid>
+                  </Box>
+                ))
+              :
+              _.isEmpty(isData)
+              ?
+              <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
+                 <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada history</Text>
+              </Box>
+              :
+              isData.map((v, i) => {
                 return (
                   <Grid key={i}>
                     <Grid.Col span={2}>
@@ -117,7 +109,8 @@ export default function HistoryDivisionCalender() {
                     </Grid.Col>
                   </Grid>
                 )
-            })}
+              })
+            }
           </Box>
         </Box>
       </Box>

src/module/calender/ui/navbar_create_division_calender.tsx

@@ -22,6 +22,15 @@ export default function NavbarCreateDivisionCalender() {
   const memberValue = memberUser.get() as IFormMemberCalender[]
   const [openMember, setOpenMember] = useState(false)
   const param = useParams<{ id: string, detail: string }>()
+  const [touched, setTouched] = useState({
+    title: false,
+    dateStart: false,
+    timeStart: false,
+    timeEnd: false,
+    linkMeet: false,
+    repeatEventTyper: false,
+    desc: false
+  })
   const [isData, setData] = useState({
     idDivision: "",
     title: "",
@@ -89,6 +98,7 @@ export default function NavbarCreateDivisionCalender() {
       <Box p={20}>
         <Stack>
           <TextInput
+            required
             styles={{
               input: {
                 border: `1px solid ${"#D6D8F6"}`,
@@ -96,12 +106,19 @@ export default function NavbarCreateDivisionCalender() {
               },
             }}
             size="md"
-            placeholder="Event Nama"
+            placeholder="Nama Acara"
-            label="Event Nama"
+            label="Nama Acara"
             value={isData.title}
             onChange={(event) => setData({ ...isData, title: event.target.value })}
+            onBlur={() => setTouched({ ...touched, title: true })}
+            error={
+              touched.title && (
+                isData.title == "" ? "Nama Acara Tidak Boleh Kosong" : null
+              )
+            }
           />
           <DateInput
+            required
             styles={{
               input: {
                 border: `1px solid ${"#D6D8F6"}`,
@@ -117,11 +134,18 @@ export default function NavbarCreateDivisionCalender() {
             placeholder="Input Tanggal"
             label="Tanggal"
             minDate={new Date()}
+            onBlur={() => setTouched({ ...touched, dateStart: true })}
+            error={
+              touched.dateStart && (
+                isData.dateStart == "" ? "Tanggal Tidak Boleh Kosong" : null
+              )
+            }
           />
           <SimpleGrid
             cols={{ base: 2, sm: 2, lg: 2 }}
           >
             <TimeInput
+              required
               styles={{
                 input: {
                   border: `1px solid ${"#D6D8F6"}`,
@@ -132,8 +156,15 @@ export default function NavbarCreateDivisionCalender() {
               label="Waktu Awal"
               value={isData.timeStart}
               onChange={(event) => setData({ ...isData, timeStart: event.target.value })}
+              onBlur={() => setTouched({ ...touched, timeStart: true })}
+              error={
+                touched.timeStart && (
+                  isData.timeStart == "" ? "Waktu Awal Tidak Boleh Kosong" : null
+                )
+              }
             />
             <TimeInput
+              required
               styles={{
                 input: {
                   border: `1px solid ${"#D6D8F6"}`,
@@ -144,9 +175,16 @@ export default function NavbarCreateDivisionCalender() {
               label="Waktu Akhir"
               value={isData.timeEnd}
               onChange={(event) => setData({ ...isData, timeEnd: event.target.value })}
+              onBlur={() => setTouched({ ...touched, timeEnd: true })}
+              error={
+                touched.timeEnd && (
+                  isData.timeEnd == "" ? "Waktu Akhir Tidak Boleh Kosong" : null
+                )
+              }
             />
           </SimpleGrid>
           <TextInput
+            required
             styles={{
               input: {
                 border: `1px solid ${"#D6D8F6"}`,
@@ -158,8 +196,15 @@ export default function NavbarCreateDivisionCalender() {
             label="Link Meet"
             value={isData.linkMeet}
             onChange={(event) => setData({ ...isData, linkMeet: event.target.value })}
+            onBlur={() => setTouched({ ...touched, linkMeet: true })}
+            error={
+              touched.linkMeet && (
+                isData.linkMeet == "" ? "Link Meet Tidak Boleh Kosong" : null
+              )
+            }
           />
           <Select
+            required
             styles={{
               input: {
                 border: `1px solid ${"#D6D8F6"}`,
@@ -180,20 +225,13 @@ export default function NavbarCreateDivisionCalender() {
             onChange={(val: any) =>
               setData({ ...isData, repeatEventTyper: val })
             }
+            onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
+            error={
+              touched.repeatEventTyper && (
+                isData.repeatEventTyper == "" ? "Ulangi Event Tidak Boleh Kosong" : null
+              )
+            }
           />
-          <Box mt={5} onClick={() => setOpenMember(true)}>
-            <Group
-              justify="space-between"
-              p={10}
-              style={{
-                border: `1px solid ${"#D6D8F6"}`,
-                borderRadius: 10,
-              }}
-            >
-              <Text>Tambah Anggota</Text>
-              <IoIosArrowDropright size={25} />
-            </Group>
-          </Box>
           <Textarea styles={{
             input: {
               border: `1px solid ${"#D6D8F6"}`,
@@ -204,6 +242,19 @@ export default function NavbarCreateDivisionCalender() {
             size="md" placeholder='Deskripsi' label="Deskripsi"
             onChange={(event) => setData({ ...isData, desc: event.target.value })}
           />
+          <Box mt={5} onClick={() => setOpenMember(true)}>
+            <Group
+              justify="space-between"
+              p={10}
+              style={{
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              }}
+            >
+              <Text>Tambah Anggota *</Text>
+              <IoIosArrowDropright size={25} />
+            </Group>
+          </Box>
           {
             memberUser.length > 0 &&
             <Box pt={30}>
@@ -248,7 +299,6 @@ export default function NavbarCreateDivisionCalender() {
               </Box>
             </Box>
           }
-
           <Box mt={"xl"}>
             <Button
               c={"white"}
@@ -256,7 +306,20 @@ export default function NavbarCreateDivisionCalender() {
               size="lg"
               radius={30}
               fullWidth
-              onClick={() => setModal(true)}
+              onClick={() => {
+                if (
+                  isData.title !== "" &&
+                  isData.dateStart !== " " &&
+                  isData.timeStart !== "" &&
+                  isData.timeEnd !== "" &&
+                  isData.linkMeet !== "" &&
+                  isData.repeatEventTyper !== ""
+                ) {
+                  setModal(true);
+                } else {
+                  toast.error("Mohon lengkapi semua form");
+                }
+              }}
             >
               Simpan
             </Button>

src/module/discussion/ui/detail_discussion.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput } from "@mantine/core";
+import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
 import { SkeletonDetailDiscussionComment, SkeletonDetailDiscussionMember, SkeletonSingle, WARNA } from "@/module/_global";
 import { GrChatOption } from "react-icons/gr";
 import { LuSendHorizonal } from "react-icons/lu";
@@ -10,7 +10,7 @@ import { useShallowEffect } from "@mantine/hooks";
 import { IDetailDiscussion } from "../lib/type_discussion";
 import moment from "moment";
 import "moment/locale/id";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import toast from "react-hot-toast";
 
 export default function DetailDiscussion({ id, idDivision }: { id: string, idDivision: string }) {
@@ -18,6 +18,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
    const [isComent, setIsComent] = useState("")
    const param = useParams<{ id: string, detail: string }>()
    const [isLoad, setIsLoad] = useState(true)
+   const router = useRouter()
 
    const getData = async () => {
       try {
@@ -77,8 +78,8 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                               <Group>
                                  <Skeleton width={60} height={60} radius={100} />
                                  <Box>
-                                    <Skeleton width={"50%"} height={20} radius={"md"} />
+                                    <Skeleton width={100} height={20} radius={"md"} />
-                                    <Skeleton width={"50%"} height={20} radius={"md"} />
+                                    <Skeleton mt={8} width={60} height={20} radius={"md"} />
                                  </Box>
                               </Group>
                               <Skeleton width={"50%"} height={20} radius={"md"} />
@@ -109,7 +110,16 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                      <Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
                   </Flex>
                   <Box mt={10}>
-                     <Text fw={"bold"}>{isData?.desc}</Text>
+                     <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                        <Text
+                           style={{
+                              overflowWrap: "break-word"
+                           }}
+                           fw={"bold"}
+                        >
+                           {isData?.desc}
+                        </Text>
+                     </Spoiler>
                   </Box>
                   <Group justify="space-between" mt={20} c={'#8C8C8C'}>
                      {isData?.totalComments ? <Group gap={5} align="center">
@@ -135,8 +145,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                                  <Group>
                                     <Skeleton width={40} height={40} radius={100} />
                                     <Box>
-                                       <Skeleton width={"50%"} height={20} radius={"md"} />
+                                       <Skeleton width={60} height={20} radius={"md"} />
-                                       <Skeleton width={"50%"} height={20} radius={"md"} />
                                     </Box>
                                  </Group>
                                  <Skeleton width={"50%"} height={20} radius={"md"} />
@@ -170,7 +179,17 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                               </Group>
                               <Text c={"grey"} fz={13}>{moment(v.createdAt).format("LL")}</Text>
                            </Flex>
-                           <Box mt={10}>{v.comment}</Box>
+                           <Box mt={10}>
+                              <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                                 <Text
+                                    style={{
+                                       overflowWrap: "break-word"
+                                    }}
+                                 >
+                                    {v.comment}
+                                 </Text>
+                              </Spoiler>
+                           </Box>
                            <Box mt={20}>
                               <Divider size={"xs"} />
                            </Box>
@@ -182,12 +201,14 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
             {isLoad ?
                <Skeleton width={"100%"} height={50} radius={100} />
                :
-            <Box h={60} pos={"fixed"} bottom={20} w={{ base: "90%", md: "35.5%" }} style={{
+               <Box pos={"fixed"} bottom={0} w={{ base: "90%", md: "35.5%" }} style={{
                   zIndex: 999
-            }}>
+               }} bg={WARNA.bgWhite}>
+                  <Box bg={WARNA.bgWhite} >
                      <Group justify="flex-end">
                         <Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
                      </Group>
+                     <Box mb={20} bg={WARNA.bgWhite}>
                         <Grid bg={"white"} style={{
                            border: '1px solid gray',
                            borderRadius: 40
@@ -221,6 +242,8 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                            </Grid.Col>
                         </Grid>
                      </Box>
+                  </Box>
+               </Box>
             }
          </Box>
       </>

src/module/discussion/ui/drawer_detail_discussion.tsx

@@ -66,6 +66,8 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
          <Stack pt={10}>
             <SimpleGrid
                cols={{ base: 3, sm: 3, lg: 3 }}
+               spacing={{ base: 10, sm: 'xl' }}
+               verticalSpacing={{ base: 'md', sm: 'xl' }}
             >
                <Flex onClick={() => setValModal(true)} justify={'center'} align={'center'} direction={'column'} >
                   <Box>

src/module/discussion/ui/form_create_discussion.tsx

@@ -5,24 +5,20 @@ import { Avatar, Box, Button, Center, Grid, Group, Text, Textarea } from "@manti
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { funCreateDiscussion } from "../lib/api_discussion";
+import { useParams, useRouter } from "next/navigation";
 
-export default function FormCreateDiscussion({id}: {id: string}) {
+export default function FormCreateDiscussion({ id }: { id: string }) {
    const [isValModal, setValModal] = useState(false)
+   const router = useRouter()
+   const param = useParams<{ id: string }>()
    const [isData, setData] = useState({
       desc: "",
       idDivision: id
    })
 
-
-   function onTrue(val: boolean) {
-      if (val) {
-         toast.success("Sukses! Data tersimpan");
-      }
-      setValModal(false)
-   }
-
    async function createDiscussion(val: boolean) {
       try {
+         if (val) {
             const response = await funCreateDiscussion({
                desc: isData.desc,
                idDivision: id
@@ -30,10 +26,12 @@ export default function FormCreateDiscussion({id}: {id: string}) {
    
             if (response.success) {
                toast.success(response.message)
-            onTrue(true)
+               router.push(`/division/${response.data.id}/discussion/`)
+               setValModal(false)
             } else {
                toast.error(response.message)
             }
+         }
       } catch (error) {
          console.log(error);
          toast.error("Gagal menambahkan diskusi, coba lagi nanti");
@@ -45,25 +43,30 @@ export default function FormCreateDiscussion({id}: {id: string}) {
 
 
    return (
-      <Box>
+      <Box pos={"relative"} h={"89vh"}>
-         <Box p={20}>
+         <Box p={20} >
-            <Group>
+            <Grid gutter={0} pt={10}>
+               <Grid.Col span={"auto"}>
                   <Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
+               </Grid.Col>
+               <Grid.Col span={10}>
                   <Box>
                      <Textarea
                         placeholder="Tuliskan apa yang ingin anda diskusikan"
-                     w={"100%"}
                         styles={{
                            input: {
                               border: 'none',
                               backgroundColor: 'transparent',
+                              height: "60vh"
                            }
                         }}
+                        value={isData.desc}
                         onChange={(e) => setData({ ...isData, desc: e.target.value })}
                      />
                   </Box>
-            </Group>
+               </Grid.Col>
-            <Box mt="xl">
+            </Grid>
+         <Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
             <Button
                color="white"
                bg={WARNA.biruTua}

src/module/discussion/ui/form_edit_discussion.tsx

@@ -75,7 +75,6 @@ export default function FormEditDiscussion() {
                      />
                   </Box>
                </Grid.Col>
-
             </Grid>
             <Box mt="xl">
                <Button

src/module/discussion/ui/list_discussion.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { WARNA } from "@/module/_global";
-import { Avatar, Badge, Box, Divider, Flex, Group, Skeleton, Text, TextInput } from "@mantine/core";
+import { Avatar, Badge, Box, Divider, Flex, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { GrChatOption } from "react-icons/gr";
@@ -62,20 +62,20 @@ export default function ListDiscussion({ id }: { id: string }) {
                            mt={20}
                         >
                            <Group>
-                              <Skeleton width={40} height={40} radius={"md"} />
+                              <Skeleton width={60} height={60} radius={100} />
                               <Box>
-                                 <Skeleton width={"50%"} height={20} radius={"md"} />
+                                 <Skeleton width={100} height={20} radius={"md"} />
-                                 <Skeleton width={"50%"} height={20} radius={"md"} />
+                                 <Skeleton mt={8} width={60} height={20} radius={"md"} />
                               </Box>
                            </Group>
-                           <Skeleton width={"50%"} height={20} radius={"md"} />
+                           <Skeleton width={"40%"} height={20} radius={"md"} />
                         </Flex>
                         <Box mt={10}>
                            <Skeleton width={"100%"} height={100} radius={"md"} />
                         </Box>
                         <Group justify="space-between" mt={20} c={'#8C8C8C'}>
-                           <Skeleton width={"30%"} height={20} radius={"md"} />
+                           <Skeleton width={"20%"} height={20} radius={"md"} />
-                           <Skeleton width={"30%"} height={20} radius={"md"} />
+                           <Skeleton width={"20%"} height={20} radius={"md"} />
                         </Group>
                         <Box mt={20}>
                            <Skeleton width={"100%"} height={1} radius={"md"} />
@@ -86,15 +86,14 @@ export default function ListDiscussion({ id }: { id: string }) {
             :
             isData.map((v, i) => {
                return (
-                  <Box key={i} pl={10} pr={10}
+                  <Box key={i} pl={10} pr={10}>
-                     onClick={() => {
-                        router.push(`/division/${param.id}/discussion/${v.id}`)
-                     }}
-                  >
                      <Flex
                         justify={"space-between"}
                         align={"center"}
                         mt={20}
+                        onClick={() => {
+                           router.push(`/division/${param.id}/discussion/${v.id}`)
+                        }}
                      >
                         <Group>
                            <Avatar alt="it's me" size="lg" />
@@ -107,8 +106,21 @@ export default function ListDiscussion({ id }: { id: string }) {
                         </Group>
                         <Text c={"grey"} fz={13}>{v.createdAt}</Text>
                      </Flex>
-                     <Box mt={10}>{v.desc}</Box>
+                     <Box mt={10}>
-                     <Group justify="space-between" mt={20} c={'#8C8C8C'}>
+                        <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                           <Text
+                              style={{
+                                 overflowWrap: "break-word"
+                              }}
+                              onClick={() => {
+                                 router.push(`/division/${param.id}/discussion/${v.id}`)
+                              }}
+                           >
+                              {v.desc}
+                           </Text>
+                        </Spoiler>
+                     </Box>
+                     <Group justify="space-between" mt={40} c={'#8C8C8C'}>
                         <Group gap={5} align="center">
                            <GrChatOption size={18} />
                            <Text fz={13}>Diskusikan</Text>

src/module/discussion/ui/navbar_detail_discussion.tsx

@@ -4,12 +4,14 @@ import { ActionIcon } from "@mantine/core";
 import { useState } from "react";
 import { HiMenu } from "react-icons/hi";
 import DrawerDetailDiscussion from "./drawer_detail_discussion";
+import { useParams } from "next/navigation";
 
 export default function NavbarDetailDiscussion({id, status, idDivision}: {id: string, status: number, idDivision:string}) {
    const [openDrawer, setOpenDrawer] = useState(false)
+   const param = useParams<{ id: string }>()
    return (
       <>
-         <LayoutNavbarNew back="" title="Diskusi "
+         <LayoutNavbarNew back={`/division/${param.id}/discussion/`} title="Diskusi "
             menu={
                <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
                   <HiMenu size={20} color='white' />

src/module/discussion/ui/navbar_list_discussion.tsx

@@ -4,12 +4,14 @@ import { ActionIcon } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import { useState } from "react";
 import DrawerListDiscussion from "./drawer_list_discussion";
+import { useParams } from "next/navigation";
 
 export default function NavbarListDiscussion() {
    const [openDrawer, setOpenDrawer] = useState(false)
+   const param = useParams<{ id: string }>()
    return (
       <>
-         <LayoutNavbarNew back="" title="Diskusi"
+         <LayoutNavbarNew back={`/division/${param.id}`} title="Diskusi"
             menu={
                <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
                   <HiMenu size={20} color='white' />

src/module/division_new/ui/edit_division.tsx

@@ -77,18 +77,10 @@ export default function EditDivision() {
   }, [param.id])
 
   return (
-    <Box>
+    <Box pos={"relative"} h={"100vh"}>
       <LayoutNavbarNew back="" title="Edit Divisi" menu />
       <Box p={20}>
-
         <Stack>
-          {/* <Select
-            placeholder="Grup"
-            label="Grup"
-            size="md"
-            required
-            radius={40}
-          /> */}
           <TextInput
             placeholder="Judul"
             label="Judul"
@@ -101,8 +93,14 @@ export default function EditDivision() {
           <Textarea placeholder="Deskripsi" label="Deskripsi" size="md" radius={10}
             value={body.desc}
             onChange={(e) => { setBody({ ...body, desc: e.currentTarget.value }) }}
+            styles={{
+              input: {
+                 height: "40vh"
+              }
+           }}
           />
-          <Box mt="xl">
+        </Stack>
+          <Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
             <Button
               color="white"
               bg={WARNA.biruTua}
@@ -114,7 +112,6 @@ export default function EditDivision() {
               Simpan
             </Button>
           </Box>
-        </Stack>
       </Box>
       <LayoutModal opened={openModal} onClose={() => setOpenModal(false)} description='Apakah Anda yakin ingin edit data'
         onYes={(val) => {

src/module/division_new/ui/information_division.tsx

@@ -141,7 +141,10 @@ export default function InformationDivision() {
                 <Group
                   align="center"
                   style={{
+                    border: `1px solid ${"#DCEED8"}`,
                     padding: 10,
+                    borderRadius: 10,
+                    cursor: "pointer",
                   }}
                 >
                   <Box>