upd: diskusi umum

Deskripsi:
- tambah diskusi umum
- list diskusi umum

No Issues

src/app/(application)/discussion/create/page.tsx

@@ -1,10 +1,8 @@
-import { LayoutNavbarNew } from "@/module/_global";
 import { FormCreateDiscussionGeneral } from "@/module/discussion_general";
 
 export default function Page() {
    return (
       <>
-         <LayoutNavbarNew back="" title="Tambah Diskusi Umum" menu={<></>} />
          <FormCreateDiscussionGeneral />
       </>
    )

src/app/api/discussion-general/route.ts

@@ -70,47 +70,37 @@ export async function GET(request: Request) {
          }
       }
 
-      const data = await prisma.discussion.findMany()
+      const data = await prisma.discussion.findMany({
-
+         skip: dataSkip,
-      // const data = await prisma.discussion.findMany({
+         take: 10,
-      //    skip: dataSkip,
+         where: {
-      //    take: 10,
+            isActive: true,
-      //    where: {
+            idVillage: String(villageId),
-      //       isActive: true,
+            idGroup: grup,
-      //       idVillage: String(villageId),
+            title: {
-      //       idGroup: grup,
+               contains: (search == undefined || search == "null") ? "" : search,
-      //       title: {
+               mode: "insensitive"
-      //          contains: (search == undefined || search == "null") ? "" : search,
+            },
-      //          mode: "insensitive"
+         },
-      //       },
+         orderBy: {
-      //    },
+            status: 'desc'
-      //    orderBy: {
+         },
-      //       status: 'desc'
+         select: {
-      //    },
+            id: true,
-      //    select: {
+            title: true,
-      //       id: true,
+            desc: true,
-      //       title: true,
+            status: true,
-      //       desc: true,
+            createdAt: true,
-      //       status: true,
+            DiscussionComment: {
-      //       createdAt: true,
+               select: {
-      //       User: {
+                  id: true,
-      //          select: {
+               }
-      //             name: true,
+            }
-      //             img: true
+         }
-      //          }
+      });
-      //       },
-      //       DiscussionComment: {
-      //          select: {
-      //             id: true,
-      //          }
-      //       }
-      //    }
-      // });
 
       const fixData = data.map((v: any) => ({
-         ..._.omit(v, ["User", "DiscussionComment", "createdAt"]),
+         ..._.omit(v, ["DiscussionComment", "createdAt"]),
-         user_name: v.User.name,
-         img: v.User.img,
          total_komentar: v.DiscussionComment.length,
          createdAt: moment(v.createdAt).format("ll")
       }))

src/module/discussion_general/lib/api_discussion_general.ts

@@ -1,4 +1,17 @@
+import { IFormMemberDisscussionGeneral } from "./type_discussion_general";
+
 export const funGetAllDiscussionGeneral = async (path?: string) => {
    const response = await fetch(`/api/discussion-general${(path) ? path : ''}`, { next: { tags: ['discussion-general'] } });
    return await response.json().catch(() => null);
 }
+
+export const funCreateDiscussionGeneral = async (data: { idGroup: string, title: string, desc: string, member: IFormMemberDisscussionGeneral[] }) => {
+   const response = await fetch(`/api/discussion-general`, {
+      method: "POST",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
+}

src/module/discussion_general/lib/type_discussion_general.ts

@@ -0,0 +1,5 @@
+export interface IFormMemberDisscussionGeneral {
+   idUser: string,
+   name: string,
+   img: string
+ }

src/module/discussion_general/lib/val_discussion_general.ts

@@ -0,0 +1,4 @@
+import { hookstate } from "@hookstate/core";
+import { IFormMemberDisscussionGeneral } from "./type_discussion_general";
+
+export const globalMemberDiscussionGeneral = hookstate<IFormMemberDisscussionGeneral[]>([]);

src/module/discussion_general/ui/choose_user.tsx

@@ -0,0 +1,249 @@
+"use client"
+import { LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
+import { funGetAllmember, TypeUser } from '@/module/user';
+import { useHookstate } from '@hookstate/core';
+import { Carousel } from '@mantine/carousel';
+import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { FaCheck } from 'react-icons/fa6';
+import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
+import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
+import { globalMemberDiscussionGeneral } from '../lib/val_discussion_general';
+
+
+export default function ChooseUsersDiscussion({ grup, onClose }: { grup?: string, onClose: (val: any) => void }) {
+  const member = useHookstate(globalMemberDiscussionGeneral)
+  const [selectedFiles, setSelectedFiles] = useState<any>([]);
+  const [dataMember, setDataMember] = useState<TypeUser>([])
+  const [loading, setLoading] = useState(true)
+  const [onClickSearch, setOnClickSearch] = useState(false)
+  const tema = useHookstate(TEMA)
+  const isMobile2 = useMediaQuery("(max-width: 438px)");
+
+  const handleFileClick = (index: number) => {
+    if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
+      setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != dataMember[index].id))
+    } else {
+      setSelectedFiles([...selectedFiles, { idUser: dataMember[index].id, name: dataMember[index].name, img: dataMember[index].img }])
+    }
+  };
+
+
+  async function loadData(search: string) {
+    try {
+      setLoading(true)
+      const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search);
+      // const user = await funGetUserByCookies();
+      if (res.success) {
+        // setDataMember(res.data.filter((i: any) => i.id != user.id && i.idUserRole != 'supadmin' && i.idUserRole != 'cosupadmin'))
+        setDataMember(res.data.filter((i: any) => i.idUserRole != 'supadmin'))
+        // cek data member sebelumnya
+        if (member.length > 0) {
+          setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
+        }
+      } else {
+        toast.error("Gagal mendapatkan data, coba lagi nanti")
+      }
+    } catch (error) {
+      console.error(error)
+      toast.error("Gagal mendapatkan data, coba lagi nanti")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+
+  function onSubmit() {
+    if (selectedFiles.length == 0) {
+      return toast.error("Error! silahkan pilih anggota")
+    }
+    member.set(selectedFiles)
+    onClose(true)
+  }
+
+  useShallowEffect(() => {
+    loadData("")
+  }, []);
+
+  const handleSearchClick = () => {
+    setOnClickSearch(true);
+  };
+
+  const handleClose = () => {
+    setOnClickSearch(false);
+  };
+
+  function handleXMember(id: number) {
+    setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != id))
+  }
+
+  return (
+    <Box>
+      <LayoutNavbarNew state={
+        <Box>
+          <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
+            <HiChevronLeft size={20} color='white' />
+          </ActionIcon>
+        </Box>
+      } title="Pilih Anggota"
+        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
+          <HiMagnifyingGlass size={20} color='white' />
+        </ActionIcon>}
+      />
+      {/* SEARCH */}
+      {onClickSearch
+        ? (
+          <Box
+            pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
+              maxWidth: rem(550),
+              zIndex: 9999,
+              backgroundColor: `${tema.get().utama}`,
+              borderBottomLeftRadius: 20,
+              borderBottomRightRadius: 20,
+            }}>
+            <Grid justify='center' align='center' gutter={'lg'}>
+              <Grid.Col span={1}>
+                <ActionIcon onClick={handleClose} variant="subtle" color='white' size="lg" mt={5} radius="lg" aria-label="search">
+                  <IoArrowBackOutline size={30} />
+                </ActionIcon>
+              </Grid.Col>
+              <Grid.Col span={11}>
+                <TextInput
+                  styles={{
+                    input: {
+                      color: "white",
+                      borderRadius: '#A3A3A3',
+                      borderColor: `${tema.get().utama}`,
+                      backgroundColor: `${tema.get().utama}`,
+                    },
+                  }}
+                  size="md"
+                  radius={30}
+                  placeholder="Pencarian"
+                  onChange={(e) => loadData(e.target.value)}
+                />
+              </Grid.Col>
+            </Grid>
+          </Box>
+        )
+        : null
+      }
+      {/* Close User */}
+      <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 100,
+        backgroundColor: `${tema.get().bgUtama}`,
+        borderBottom: `1px solid ${"#E0DFDF"}`
+      }}>
+        {selectedFiles.length > 0 ? (
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
+            {selectedFiles.map((v: any, i: any) => {
+              return (
+                <Carousel.Slide key={i}>
+                  <Box w={{
+                    base: 70,
+                    xl: 70
+                  }}
+                    onClick={() => { handleXMember(v.idUser) }}
+                  >
+                    <Center>
+                      <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
+                        <Avatar style={{
+                          border: `2px solid ${tema.get().utama}`
+                        }} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
+                      </Indicator>
+                    </Center>
+                    <Text ta={"center"} lineClamp={1}>{v.name}</Text>
+                  </Box>
+                </Carousel.Slide>
+              )
+            })}
+          </Carousel>
+        ) : (
+          <Box h={rem(81)}>
+            <Flex justify={"center"} align={'center'} h={"100%"}>
+              <Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
+            </Flex>
+          </Box>
+        )}
+      </Box>
+      <Box p={20}>
+        <Stack>
+          <Box pt={100} mb={100}>
+            {loading ?
+              Array(6)
+                .fill(null)
+                .map((_, i) => (
+                  <Box key={i}>
+                    <SkeletonList />
+                  </Box>
+                ))
+              :
+              (dataMember.length === 0) ?
+                <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
+                  <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
+                </Stack>
+                :
+                dataMember.map((v, index) => {
+                  const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
+                  return (
+                    <Box mb={10} key={index} onClick={() => handleFileClick(index)}>
+                      <Grid align='center'>
+                        <Grid.Col span={{
+                          base: 1,
+                          xs: 1,
+                          sm: 1,
+                          md: 1,
+                          lg: 1,
+                          xl: 1,
+                        }}>
+                          <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
+                        </Grid.Col>
+                        <Grid.Col span={{
+                          base: 11,
+                          xs: 11,
+                          sm: 11,
+                          md: 11,
+                          lg: 11,
+                          xl: 11,
+                        }}>
+                          <Flex justify='space-between' align={"center"}>
+                            <Flex direction={'column'} align="flex-start" justify="flex-start">
+                              <Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
+                            </Flex>
+                            {isSelected ? <FaCheck /> : null}
+                          </Flex>
+                        </Grid.Col>
+                      </Grid>
+                      <Box mt={10}>
+                        <Divider my={10} />
+                      </Box>
+                    </Box>
+                  );
+                })
+            }
+          </Box>
+        </Stack>
+      </Box>
+      <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 999,
+        backgroundColor: `${tema.get().bgUtama}`,
+      }}>
+        <Button
+          color="white"
+          bg={tema.get().utama}
+          size="lg"
+          radius={30}
+          fullWidth
+          onClick={() => { onSubmit() }}
+        >
+          Simpan
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+

src/module/discussion_general/ui/create_discussion.tsx

@@ -1,13 +1,53 @@
 'use client'
 import { funGetAllGroup, IDataGroup } from "@/module/group";
-import { Box, Group, Select, Text, TextInput } from "@mantine/core";
+import { Avatar, Box, Button, Divider, Grid, Group, rem, Select, Text, TextInput } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { IoIosArrowDropright } from "react-icons/io";
+import ChooseUsersDiscussion from "./choose_user";
+import { useHookstate } from "@hookstate/core";
+import { globalRole, keyWibu, LayoutNavbarNew, TEMA } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import { globalMemberDiscussionGeneral } from "../lib/val_discussion_general";
+import { IFormMemberDisscussionGeneral } from "../lib/type_discussion_general";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { funCreateDiscussionGeneral } from "../lib/api_discussion_general";
+import { useRouter } from "next/navigation";
+import { useWibuRealtime } from "wibu-realtime";
 
 export default function FormCreateDiscussionGeneral() {
-   const [dataGroup, setDataGroup] = useState<IDataGroup[]>([]);
+   const router = useRouter()
+   const isMobile = useMediaQuery('(max-width: 369px)')
+   const roleLogin = useHookstate(globalRole)
+   const [isModal, setModal] = useState(false)
+   const [dataGroup, setDataGroup] = useState<IDataGroup[]>([])
+   const [isChooseAnggota, setChooseAnggota] = useState(false)
+   const member = useHookstate(globalMemberDiscussionGeneral)
+   const memberValue = member.get() as IFormMemberDisscussionGeneral[]
+   const tema = useHookstate(TEMA)
+   const [loadingModal, setLoadingModal] = useState(false)
+   const [data, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
+   const [body, setBody] = useState<any>({
+      idGroup: "",
+      title: "",
+      desc: ""
+   });
+
+   const [touched, setTouched] = useState({
+      title: false,
+      idGroup: false,
+      desc: false
+   });
+
+   function onToChooseAnggota() {
+      if (roleLogin.get() == "supadmin" && body.idGroup == "")
+         return toast.error("Error! grup harus diisi")
+      setChooseAnggota(true)
+   }
 
    async function loadData() {
       const loadGroup = await funGetAllGroup('?active=true')
@@ -16,71 +56,270 @@ export default function FormCreateDiscussionGeneral() {
       } else {
          toast.error(loadGroup.message);
       }
+
+      if (roleLogin.get() != "supadmin") {
+         const loadUser = await funGetUserByCookies();
+         setBody({ ...body, idGroup: loadUser.idGroup })
+      }
    }
 
    useShallowEffect(() => {
       loadData();
    }, []);
 
+
+   function onCheck() {
+      const cek = checkAll()
+      if (!cek)
+         return false
+
+      if (memberValue.length <= 1)
+         return toast.error("Error! Silahkan pilih anggota lebih dari 1")
+
+      setModal(true)
+   }
+
+   function checkAll() {
+      let nilai = true
+      if (body.idGroup === "" || String(body.idGroup) == "null") {
+         setTouched(touched => ({ ...touched, idGroup: true }))
+         nilai = false
+      }
+      if (body.title === "") {
+         setTouched(touched => ({ ...touched, title: true }))
+         nilai = false
+      }
+      if (body.desc === "") {
+         setTouched(touched => ({ ...touched, desc: true }))
+         nilai = false
+      }
+      return nilai
+   }
+
+
+   function onValidation(kategori: string, val: string) {
+      if (kategori == 'idGroup') {
+         setBody({ ...body, idGroup: val })
+         if (val === "" || String(val) == "null") {
+            setTouched({ ...touched, idGroup: true })
+         } else {
+            setTouched({ ...touched, idGroup: false })
+         }
+      } else if (kategori == 'title') {
+         setBody({ ...body, title: val })
+         if (val === "") {
+            setTouched({ ...touched, title: true })
+         } else {
+            setTouched({ ...touched, title: false })
+         }
+      } else if (kategori == 'diskusi') {
+         setBody({ ...body, desc: val })
+         if (val === "") {
+            setTouched({ ...touched, desc: true })
+         } else {
+            setTouched({ ...touched, desc: false })
+         }
+      }
+   }
+
+   function onChooseGroup(val: any) {
+      member.set([])
+      onValidation('idGroup', val)
+   }
+
+   async function onSubmit() {
+      try {
+         setLoadingModal(true)
+         const res = await funCreateDiscussionGeneral({ idGroup: body.idGroup, title: body.title, desc: body.desc, member: memberValue })
+         if (res.success) {
+            setDataRealtime(res.notif)
+            member.set([])
+            toast.success(res.message)
+            router.push('/discussion')
+         } else {
+            toast.error(res.message)
+         }
+      } catch (error) {
+         console.error(error)
+         toast.error("Gagal membuat diskusi umum, coba lagi nanti")
+      } finally {
+         setLoadingModal(false)
+         setModal(false)
+      }
+   }
+
+   if (isChooseAnggota) return <ChooseUsersDiscussion grup={body.idGroup} onClose={() => setChooseAnggota(false)} />
+
    return (
-      <Box p={20}>
+      <Box>
-         <Box>
+         <LayoutNavbarNew back="" title="Tambah Diskusi Umum" menu={<></>} />
-            <Select
+         <Box p={20}>
-               placeholder="Grup"
+            <Box>
-               label="Grup"
+               {
-               size="md"
+                  (roleLogin.get() == "supadmin") && (
-               styles={{
+                     <Select
-                  input: {
+                        placeholder="Grup"
-                     border: `1px solid ${"#D6D8F6"}`,
+                        label="Grup"
-                     borderRadius: 10,
+                        size="md"
-                  },
+                        styles={{
-               }}
+                           input: {
-               required
+                              border: `1px solid ${"#D6D8F6"}`,
-               data={dataGroup?.map((pro: any) => ({
+                              borderRadius: 10,
-                  value: String(pro.id),
+                           },
-                  label: pro.name
+                        }}
-               }))}
+                        required
-            />
+                        data={dataGroup?.map((pro: any) => ({
-            <TextInput
+                           value: String(pro.id),
-               label="Judul"
+                           label: pro.name
-               styles={{
+                        }))}
-                  input: {
+                        onChange={(val) => {
-                     border: `1px solid ${"#D6D8F6"}`,
+                           onChooseGroup(val)
-                     borderRadius: 10,
+                        }}
-                  },
+                        value={(body.idGroup == "") ? null : body.idGroup}
-               }}
+                        error={
-               mt={10}
+                           touched.idGroup && (
-               required withAsterisk
+                              body.idGroup == "" || String(body.idGroup) == "null" ? "Grup Tidak Boleh Kosong" : null
-               placeholder="Judul"
+                           )
-               size="md"
+                        }
-            />
+                     />
-            <TextInput
+                  )
-               label="Diskusi"
+               }
-               styles={{
+
-                  input: {
+               <TextInput
-                     border: `1px solid ${"#D6D8F6"}`,
+                  label="Judul"
-                     borderRadius: 10,
+                  styles={{
-                  },
+                     input: {
-               }}
+                        border: `1px solid ${"#D6D8F6"}`,
-               mt={10}
+                        borderRadius: 10,
-               required withAsterisk
+                     },
-               placeholder="Hal yg akan didiskusikan"
-               size="md"
-            />
-            <Box mt={15}>
-               <Group
-                  justify="space-between"
-                  p={10}
-                  style={{
-                     border: `1px solid ${"#D6D8F6"}`,
-                     borderRadius: 10,
                   }}
-               >
+                  mt={10}
-                  <Text>Pilih Anggota</Text>
+                  required withAsterisk
-                  <IoIosArrowDropright size={25} />
+                  placeholder="Judul"
-               </Group>
+                  size="md"
+                  value={body.title}
+                  onChange={(e) => { onValidation('title', e.target.value) }}
+                  error={
+                     touched.title && (
+                        body.title == "" ? "Judul Tidak Boleh Kosong" : null
+                     )
+                  }
+               />
+               <TextInput
+                  label="Diskusi"
+                  styles={{
+                     input: {
+                        border: `1px solid ${"#D6D8F6"}`,
+                        borderRadius: 10,
+                     },
+                  }}
+                  mt={10}
+                  required withAsterisk
+                  placeholder="Hal yg akan didiskusikan"
+                  size="md"
+                  value={body.desc}
+                  onChange={(e) => { onValidation('diskusi', e.target.value) }}
+                  error={
+                     touched.desc && (
+                        body.desc == "" ? "Diskusi Tidak Boleh Kosong" : null
+                     )
+                  }
+               />
+               <Box mt={15}>
+                  <Group
+                     onClick={() => onToChooseAnggota()}
+                     justify="space-between"
+                     p={10}
+                     style={{
+                        border: `1px solid ${"#D6D8F6"}`,
+                        borderRadius: 10,
+                     }}
+                  >
+                     <Text>Pilih Anggota</Text>
+                     <IoIosArrowDropright size={25} />
+                  </Group>
+               </Box>
+            </Box>
+            <Box pb={100}>
+               {
+                  member.length > 0 &&
+                  <Box pt={30}>
+                     <Group justify="space-between">
+                        <Text c={tema.get().utama}>Anggota Terpilih</Text>
+                        <Text c={tema.get().utama}>Total {member.length} Anggota</Text>
+                     </Group>
+                     <Box pt={10}>
+                        <Box mb={20}>
+                           <Box
+                              style={{
+                                 border: `1px solid ${"#C7D6E8"}`,
+                                 borderRadius: 10,
+                              }}
+                              px={20}
+                              py={10}
+                           >
+                              {member.get().map((v: any, i: any) => {
+                                 return (
+                                    <Box key={i}>
+                                       <Grid align='center' mt={10} >
+                                          <Grid.Col span={9}>
+                                             <Group>
+                                                <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
+                                                <Box w={{
+                                                   base: isMobile ? 130 : 140,
+                                                   xl: 270
+                                                }}>
+                                                   <Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
+                                                      {v.name}
+                                                   </Text>
+                                                </Box>
+                                             </Group>
+                                          </Grid.Col>
+                                          <Grid.Col span={3}>
+                                             <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
+                                                Anggota
+                                             </Text>
+                                          </Grid.Col>
+                                       </Grid>
+                                       <Box mt={10}>
+                                          <Divider size={"xs"} />
+                                       </Box>
+                                    </Box>
+                                 );
+                              })}
+                           </Box>
+                        </Box>
+                     </Box>
+                  </Box>
+               }
             </Box>
          </Box>
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${tema.get().bgUtama}`,
+         }}>
+            <Button
+               color="white"
+               bg={tema.get().utama}
+               size="lg"
+               radius={30}
+               fullWidth
+               onClick={() => { onCheck() }}>
+               Simpan
+            </Button>
+         </Box>
+
+
+         <LayoutModal loading={loadingModal} opened={isModal} onClose={() => setModal(false)}
+            description="Apakah Anda yakin ingin menambahkan data?"
+            onYes={(val) => {
+               if (val) {
+                  onSubmit()
+               } else {
+                  setModal(false)
+               }
+            }} />
       </Box>
    )
 }

src/module/discussion_general/ui/list_discussion.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { currentScroll, globalNotifPage, keyWibu, ReloadButtonTop, TEMA } from "@/module/_global";
 import { useHookstate } from "@hookstate/core";
-import { Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
+import { ActionIcon, Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { useParams, useRouter } from "next/navigation";
@@ -11,6 +11,7 @@ import { GrChatOption } from "react-icons/gr";
 import { HiMagnifyingGlass } from "react-icons/hi2";
 import { useWibuRealtime } from "wibu-realtime";
 import { funGetAllDiscussionGeneral } from "../lib/api_discussion_general";
+import { BiSolidCommentDetail } from "react-icons/bi";
 
 
 export default function ListDiscussionGeneral() {
@@ -175,7 +176,7 @@ export default function ListDiscussionGeneral() {
                   return (
                      <Box key={i} pl={5} pr={5}>
                         <Grid align="center" mt={20} onClick={() => {
-                           router.push(`/division/${param.id}/discussion/${v.id}`)
+                           router.push(`discussion/${v.id}`)
                         }}>
                            <Grid.Col span={{
                               sm: 2,
@@ -185,7 +186,15 @@ export default function ListDiscussionGeneral() {
                               xs: 1,
                               base: 2
                            }}>
-                              <Avatar alt="it's me" src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} size="lg" />
+                              <ActionIcon
+                                 variant="gradient"
+                                 size={50}
+                                 aria-label="Gradient action icon"
+                                 radius={100}
+                                 bg={tema.get().bgFiturHome}
+                              >
+                                 <BiSolidCommentDetail size={25} color={tema.get().utama} />
+                              </ActionIcon>
                            </Grid.Col>
                            <Grid.Col span={{
                               sm: 6,
@@ -204,7 +213,7 @@ export default function ListDiscussionGeneral() {
                                  base: 10
                               }}>
                                  <Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
-                                    {v.user_name}
+                                    {v.title}
                                  </Text>
                                  <Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>
                               </Box>