rev: diskusi umum dan diskusi divisi

Deskripsi:
- mengaplikasikan sistem arsip pada diskusi umum
- mengaplikasikan filter pada diskusi umum dg role supadmin
- mengaplikasikan hanya view pada role user dan co admin jika tidak termasuk anggota
- mengaplikasikan fitur mengaktifkan diskusi divisi pada arsip diskusi

No Issues

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

@@ -1,11 +1,14 @@
-import { ListDiscussionGeneral, NavbarDiscussionGeneral } from '@/module/discussion_general';
+import { ViewFilter } from '@/module/_global';
-import React from 'react';
+import { NavbarDiscussionGeneral, TabListDiscussionGeneral } from '@/module/discussion_general';
+
+function Page({ searchParams }: { searchParams: { page: string } }) {
+   if (searchParams.page == "filter")
+      return <ViewFilter linkFilter='discussion' />
 
-function Page() {
    return (
       <div>
          <NavbarDiscussionGeneral />
-         <ListDiscussionGeneral />
+         <TabListDiscussionGeneral />
       </div>
    );
 }

src/app/api/discussion-general/[id]/route.ts

@@ -4,6 +4,7 @@ import { createLogUser } from "@/module/user";
 import _ from "lodash";
 import moment from "moment";
 import { NextResponse } from "next/server";
+import "moment/locale/id";
 
 
 // GET ONE DETAIL DISKUSI UMUM
@@ -22,7 +23,7 @@ export async function GET(request: Request, context: { params: { id: string } })
       const cek = await prisma.discussion.count({
          where: {
             id,
-            isActive: true
+            // isActive: true
          }
       })
 
@@ -34,9 +35,10 @@ export async function GET(request: Request, context: { params: { id: string } })
          const data = await prisma.discussion.findUnique({
             where: {
                id,
-               isActive: true
+               // isActive: true
             },
             select: {
+               isActive: true,
                id: true,
                title: true,
                idGroup: true,
@@ -77,7 +79,7 @@ export async function GET(request: Request, context: { params: { id: string } })
 
          dataFix = data.map((v: any) => ({
             ..._.omit(v, ["createdAt", "User",]),
-            createdAt: moment(v.createdAt).format("lll"),
+            createdAt: moment(v.createdAt).format("lll").replace('pukul', ''),
             username: v.User.name,
             img: v.User.img
          }))

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

@@ -24,6 +24,7 @@ export async function GET(request: Request) {
       const idGroup = searchParams.get("group");
       const search = searchParams.get('search');
       const page = searchParams.get('page');
+      const status = searchParams.get('active');
       const dataSkip = Number(page) * 10 - 10;
 
       if (idGroup == "null" || idGroup == undefined || idGroup == "") {
@@ -43,39 +44,11 @@ export async function GET(request: Request) {
          return NextResponse.json({ success: false, message: "Gagal mendapatkan data kegiatan, data tidak ditemukan", }, { status: 404 });
       }
 
-
-      let kondisi: any = {
-         isActive: true,
-         idVillage: String(villageId),
-         idGroup: grup,
-         title: {
-            contains: (search == undefined || search == "null") ? "" : search,
-            mode: "insensitive"
-         },
-      }
-
-      if (roleUser != "supadmin" && roleUser != "cosupadmin" && roleUser != "admin") {
-         kondisi = {
-            isActive: true,
-            idVillage: String(villageId),
-            idGroup: grup,
-            title: {
-               contains: (search == undefined || search == "null") ? "" : search,
-               mode: "insensitive"
-            },
-            DiscussionMember: {
-               some: {
-                  idUser: String(userId)
-               }
-            }
-         }
-      }
-
       const data = await prisma.discussion.findMany({
          skip: dataSkip,
          take: 10,
          where: {
-            isActive: true,
+            isActive: status == "false" ? false : true,
             idVillage: String(villageId),
             idGroup: grup,
             title: {
@@ -112,7 +85,17 @@ export async function GET(request: Request) {
          createdAt: moment(v.createdAt).format("ll")
       }))
 
-      return NextResponse.json({ success: true, message: "Berhasil mendapatkan diskusi", data: fixData, }, { status: 200 });
+      const filter = await prisma.group.findUnique({
+         where: {
+            id: grup
+         },
+         select: {
+            id: true,
+            name: true
+         }
+      })
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan diskusi", data: fixData, filter }, { status: 200 });
 
    } catch (error) {
       console.error(error);

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

@@ -36,6 +36,7 @@ export async function GET(request: Request, context: { params: { id: string } })
                 id: id
             },
             select: {
+                isActive: true,
                 id: true,
                 title: true,
                 desc: true,
@@ -152,7 +153,7 @@ export async function PUT(request: Request, context: { params: { id: string } })
             return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
         }
         const { id } = context.params
-
+        const { active } = (await request.json());
         const cek = await prisma.divisionDisscussion.count({
             where: {
                 id: id
@@ -169,16 +170,22 @@ export async function PUT(request: Request, context: { params: { id: string } })
                 id: id
             },
             data: {
-                isActive: false
+                isActive: active
             }
         });
-        // create log user
-        const log = await createLogUser({ act: 'DELETE', desc: 'User mengarsipkan data diskusi', table: 'divisionDisscussion', data: id })
 
-        return NextResponse.json({ success: true, message: "Berhasil mengarsipkan diskusi", user: user.id }, { status: 200 });
+        // create log user
+        if (active) {
+            const log = await createLogUser({ act: 'DELETE', desc: 'User mengaktifkan data diskusi', table: 'divisionDisscussion', data: id })
+            return NextResponse.json({ success: true, message: "Berhasil mengaktifkan diskusi", user: user.id }, { status: 200 });
+        } else {
+            const log = await createLogUser({ act: 'DELETE', desc: 'User mengarsipkan data diskusi', table: 'divisionDisscussion', data: id })
+            return NextResponse.json({ success: true, message: "Berhasil mengarsipkan diskusi", user: user.id }, { status: 200 });
+        }
+
     } catch (error) {
         console.error(error);
-        return NextResponse.json({ success: false, message: "Gagal mengarsipkan diskusi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
+        return NextResponse.json({ success: false, message: "Gagal mengubah diskusi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
     }
 }
 

src/module/discussion/lib/api_discussion.ts

@@ -36,9 +36,13 @@ export const funEditStatusDiscussion = async (path: string, data: IStatusDiscuss
    return await response.json().catch(() => null);
 }
 
-export const funDeleteDiscussion = async (path: string) => {
+export const funDeleteDiscussion = async (path: string, data: { active: boolean }) => {
    const response = await fetch(`/api/discussion/${path}`, {
       method: "PUT",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
    });
    return await response.json().catch(() => null);
 }

src/module/discussion/lib/type_discussion.ts

@@ -30,6 +30,7 @@ export interface IDetailDiscussion {
    user_img: string
    totalComments: number
    createdBy: string
+   isActive: boolean
 }
 
 export interface IAllComents {

src/module/discussion/ui/detail_discussion.tsx

@@ -118,7 +118,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
             }
          />
          <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
-            <DrawerDetailDiscussion onSuccess={(val) => setOpenDrawer(false)} id={id} status={Number(isData?.status)} idDivision={idDivision} />
+            <DrawerDetailDiscussion onSuccess={(val) => setOpenDrawer(false)} id={id} status={Number(isData?.status)} idDivision={idDivision} active={isData?.isActive == false ? false : true} />
          </LayoutDrawer>
 
 
@@ -324,7 +324,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                               }}
                               size="md"
                               placeholder="Kirim Komentar"
-                              disabled={(isData?.status === 2 || (!memberDivision.get() && (roleLogin.get() == "user" || roleLogin.get() == "coadmin")))}
+                              disabled={(isData?.status === 2 || !isData?.isActive || (!memberDivision.get() && (roleLogin.get() == "user" || roleLogin.get() == "coadmin")))}
                               onChange={(e) => setIsComent(e.target.value)}
                               value={isComent}
                               maxLength={300}
@@ -335,7 +335,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                            <Center>
                               <ActionIcon
                                  onClick={sendComent}
-                                 variant="subtle" aria-label="submit" disabled={(isData?.status === 2 || (!memberDivision.get() && (roleLogin.get() == "user" || roleLogin.get() == "coadmin")))}>
+                                 variant="subtle" aria-label="submit" disabled={(isData?.status === 2 || !isData?.isActive || (!memberDivision.get() && (roleLogin.get() == "user" || roleLogin.get() == "coadmin")))}>
                                  <VscSend size={30} />
                               </ActionIcon>
                            </Center>

src/module/discussion/ui/drawer_detail_discussion.tsx

@@ -12,7 +12,7 @@ import { useWibuRealtime } from "wibu-realtime";
 import { funDeleteDiscussion, funEditStatusDiscussion } from "../lib/api_discussion";
 import { globalRefreshDiscussion } from "../lib/val_discussion";
 
-export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivision }: { onSuccess: (val: boolean) => void, id: string, status: number, idDivision: string }) {
+export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivision, active }: { onSuccess: (val: boolean) => void, id: string, status: number, idDivision: string, active: boolean }) {
    const [isValModal, setValModal] = useState(false)
    const [isValModalStatus, setValModalStatus] = useState(false)
    const router = useRouter()
@@ -57,7 +57,7 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
       try {
          if (val) {
             setLoadingDelete(true)
-            const response = await funDeleteDiscussion(id)
+            const response = await funDeleteDiscussion(id, { active: !active })
             if (response.success) {
                setDataRealtime([
                   {
@@ -71,14 +71,26 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
                ])
                toast.success(response.message)
                onSuccess(false)
-               router.push(`/division/${param.id}/discussion`)
+               if (active) {
+                  router.push(`/division/${param.id}/discussion`)
+               } else {
+                  refresh.set(!refresh.get())
+                  setDataRealtime([{
+                     category: "discussion-detail",
+                     id: id,
+                  }])
+               }
             } else {
                toast.error(response.message)
             }
          }
       } catch (error) {
          console.error(error);
-         toast.error("Gagal mengarsipkan diskusi, coba lagi nanti");
+         if (!active) {
+            toast.error("Gagal mengarsipkan diskusi, coba lagi nanti");
+         } else {
+            toast.error("Gagal mengaktifkan diskusi, coba lagi nanti");
+         }
       } finally {
          setLoadingDelete(false)
          setValModal(false)
@@ -94,52 +106,73 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
                spacing={{ base: 'xl', sm: 'xl' }}
                verticalSpacing={{ base: 'xl', sm: 'xl' }}
             >
-               <Flex onClick={() => window.location.href = `/division/${param.id}/discussion/update/${param.detail}`} justify={'center'} align={'center'} direction={'column'} >
+               {
-                  <Box>
+                  active &&
-                     <FaPencil size={30} color={tema.get().utama} />
+                  <>
-                  </Box>
+                     <Flex onClick={() => window.location.href = `/division/${param.id}/discussion/update/${param.detail}`} justify={'center'} align={'center'} direction={'column'} >
-                  <Box>
+                        <Box>
-                     <Text c={tema.get().utama}>Edit</Text>
+                           <FaPencil size={30} color={tema.get().utama} />
-                  </Box>
+                        </Box>
-               </Flex>
+                        <Box>
+                           <Text c={tema.get().utama}>Edit</Text>
+                        </Box>
+                     </Flex>
 
-               <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setValModalStatus(true)}  >
+                     <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setValModalStatus(true)}  >
-                     {status === 1 ? (
+                        {status === 1 ? (
-                        <>
+                           <>
-                           <Flex justify={'center'} align={'center'} direction={'column'}>
+                              <Flex justify={'center'} align={'center'} direction={'column'}>
-                              <Box>
+                                 <Box>
-                                 <MdClose size={30} color={tema.get().utama} />
+                                    <MdClose size={30} color={tema.get().utama} />
-                              </Box>
+                                 </Box>
-                              <Text style={{ color: tema.get().utama }}>Tutup Diskusi</Text>
+                                 <Text style={{ color: tema.get().utama }}>Tutup Diskusi</Text>
-                           </Flex>
+                              </Flex>
-                        </>
+                           </>
-                     ) : (
+                        ) : (
-                        <>
+                           <>
-                           <Flex justify={'center'} align={'center'} direction={'column'}>
+                              <Flex justify={'center'} align={'center'} direction={'column'}>
 
-                              <Box>
+                                 <Box>
-                                 <FaCheck size={30} color={tema.get().utama} />
+                                    <FaCheck size={30} color={tema.get().utama} />
-                              </Box>
+                                 </Box>
-                              <Text style={{ color: tema.get().utama }}>Buka Diskusi</Text>
+                                 <Text style={{ color: tema.get().utama }}>Buka Diskusi</Text>
-                           </Flex>
+                              </Flex>
-                        </>
+                           </>
-                     )}
+                        )}
-               </Flex>
+                     </Flex>
+                  </>
+
+               }
+
+
+               {
+                  active ?
+                     <Flex onClick={() => setValModal(true)} justify={'center'} align={'center'} direction={'column'} >
+                        <Box>
+                           <BiArchive size={30} color={tema.get().utama} />
+                        </Box>
+                        <Box>
+                           <Text c={tema.get().utama}>Arsipkan</Text>
+                        </Box>
+                     </Flex>
+                     :
+                     <Flex onClick={() => setValModal(true)} justify={'center'} align={'center'} direction={'column'} >
+                        <Box>
+                           <BiArchive size={30} color={tema.get().utama} />
+                        </Box>
+                        <Box>
+                           <Text c={tema.get().utama}>Aktifkan Diskusi</Text>
+                        </Box>
+                     </Flex>
+
+               }
 
-               <Flex onClick={() => setValModal(true)} justify={'center'} align={'center'} direction={'column'} >
-                  <Box>
-                     <BiArchive size={30} color={tema.get().utama} />
-                  </Box>
-                  <Box>
-                     <Text c={tema.get().utama}>Arsipkan</Text>
-                  </Box>
-               </Flex>
 
             </SimpleGrid>
          </Stack>
 
          <LayoutModal loading={loadingDelete} opened={isValModal} onClose={() => setValModal(false)}
-            description="Apakah Anda yakin ingin mengarsipkan diskusi ini?"
+            description={`Apakah Anda yakin ingin ${active ? "mengarsipkan" : "mengaktifkan"} diskusi ini?`}
             onYes={(val) => { fetchDeleteDiscussion(val) }} />
 
 

src/module/discussion/ui/navbar_detail_discussion.tsx

@@ -21,7 +21,7 @@ export default function NavbarDetailDiscussion({id, status, idDivision}: {id: st
                </ActionIcon>}
          />
          <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
-            <DrawerDetailDiscussion onSuccess={(val) => setOpenDrawer(false)} id={id} status={status} idDivision={idDivision} />
+            <DrawerDetailDiscussion onSuccess={(val) => setOpenDrawer(false)} id={id} status={status} idDivision={idDivision} active={false}/>
          </LayoutDrawer>
       </>
    );

src/module/discussion_general/index.ts

@@ -5,6 +5,7 @@ import FormEditDiscussionGeneral from "./ui/edit_discussion_general";
 import ListDiscussionGeneral from "./ui/list_discussion";
 import MemberDiscussionGeneral from "./ui/member_discussion_general";
 import NavbarDiscussionGeneral from "./ui/navbar_discussion";
+import TabListDiscussionGeneral from "./ui/tab_list_discussion_general";
 
 export { ListDiscussionGeneral }
 export { NavbarDiscussionGeneral }
@@ -13,3 +14,4 @@ export { DetailDiscussionGeneral }
 export { MemberDiscussionGeneral }
 export { FormEditDiscussionGeneral }
 export { AddMemberDiscussionGeneral }
+export { TabListDiscussionGeneral }

src/module/discussion_general/ui/detail_discussion_general.tsx

@@ -81,7 +81,7 @@ export default function DetailDiscussionGeneral() {
       }
 
       if (dataRealTime && dataRealTime.some((i: any) => i.category == 'discussion-general-delete' && i.id == param.id && i.user != isUser)) {
-         toast.error("Data telah di hapus, anda akan beralih ke halaman list diskusi umum")
+         toast.error("Data telah diarsipkan, anda akan beralih ke halaman list diskusi umum")
          setTimeout(() => {
             router.push(`/discussion`)
          }, 1000)
@@ -313,7 +313,7 @@ export default function DetailDiscussionGeneral() {
                                  </Box>
                               </Grid.Col>
                               <Grid.Col span={3}>
-                                 <Text c={"grey"} ta={"end"} fz={13}>{moment(v.createdAt).format('lll').replace('pukul', '')}</Text>
+                                 <Text c={"grey"} ta={"end"} fz={13}>{v.createdAt}</Text>
                               </Grid.Col>
                            </Grid>
                            <Box mt={10}>

src/module/discussion_general/ui/drawer_detail_discussion_general.tsx

@@ -79,7 +79,7 @@ export default function DrawerDetailDiscussionGeneral({ onSuccess, id, status }:
          }
       } catch (error) {
          console.error(error);
-         toast.error("Gagal hapus diskusi umum, coba lagi nanti");
+         toast.error("Gagal mengarsipkan diskusi umum, coba lagi nanti");
       } finally {
          setLoadingDelete(false)
          setValModal(false)
@@ -145,7 +145,7 @@ export default function DrawerDetailDiscussionGeneral({ onSuccess, id, status }:
                               <BsTrash3 size={30} color={tema.get().utama} />
                            </Box>
                            <Box>
-                              <Text c={tema.get().utama}>Hapus</Text>
+                              <Text c={tema.get().utama}>Arsipkan</Text>
                            </Box>
                         </Flex>
                      </>
@@ -157,7 +157,7 @@ export default function DrawerDetailDiscussionGeneral({ onSuccess, id, status }:
          </Stack>
 
          <LayoutModal loading={loadingDelete} opened={isValModal} onClose={() => setValModal(false)}
-            description="Apakah Anda yakin ingin menghapus diskusi ini?"
+            description="Apakah Anda yakin ingin mengarsipkan diskusi ini?"
             onYes={(val) => {
                fetchDeleteDiscussion(val)
             }} />

src/module/discussion_general/ui/drawer_discussion.tsx

@@ -1,16 +1,22 @@
-import { TEMA } from "@/module/_global";
+import { globalRole, TEMA } from "@/module/_global";
 import { useHookstate } from "@hookstate/core";
 import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
+import { useRouter, useSearchParams } from "next/navigation";
+import { HiOutlineFilter } from "react-icons/hi";
 import { IoAddCircle } from "react-icons/io5";
 
 export default function DrawerDiscussionGeneral() {
    const tema = useHookstate(TEMA)
+   const roleLogin = useHookstate(globalRole)
+   const router = useRouter()
+   const searchParams = useSearchParams()
+   const group = searchParams.get('group')
 
    return (
       <Box>
          <Stack pt={10}>
             <SimpleGrid cols={{ base: 2, sm: 2, lg: 3 }} >
-               <Flex onClick={() => window.location.href = "/discussion/create"} justify={'center'} align={'center'} direction={'column'} >
+               <Flex onClick={() => router.push("/discussion/create")} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
                      <IoAddCircle size={30} color={tema.get().utama} />
                   </Box>
@@ -18,6 +24,19 @@ export default function DrawerDiscussionGeneral() {
                      <Text c={tema.get().utama}>Tambah Diskusi</Text>
                   </Box>
                </Flex>
+               {
+                  roleLogin.get() == "supadmin" &&
+                  <Flex onClick={() => {
+                     router.push('/discussion?page=filter&group=' + group)
+                  }} justify={'center'} align={'center'} direction={'column'} >
+                     <Box>
+                        <HiOutlineFilter size={30} color={tema.get().utama} />
+                     </Box>
+                     <Box>
+                        <Text c={tema.get().utama}>Filter</Text>
+                     </Box>
+                  </Flex>
+               }
             </SimpleGrid>
          </Stack>
       </Box>

src/module/discussion_general/ui/list_discussion.tsx

@@ -1,10 +1,10 @@
 'use client'
-import { currentScroll, globalNotifPage, keyWibu, ReloadButtonTop, TEMA } from "@/module/_global";
+import { currentScroll, globalNotifPage, globalRole, keyWibu, ReloadButtonTop, TEMA } from "@/module/_global";
 import { useHookstate } from "@hookstate/core";
 import { ActionIcon, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { BiSolidCommentDetail } from "react-icons/bi";
@@ -20,7 +20,12 @@ export default function ListDiscussionGeneral() {
    const [loading, setLoading] = useState(true)
    const tema = useHookstate(TEMA)
    const router = useRouter()
-   const { value: containerRef } = useHookstate(currentScroll);
+   const { value: containerRef } = useHookstate(currentScroll)
+   const searchParams = useSearchParams()
+   const status = searchParams.get('active')
+   const group = searchParams.get('group')
+   const roleLogin = useHookstate(globalRole)
+   const [nameGroup, setNameGroup] = useState('')
    const [isPage, setPage] = useState(1)
    const notifLoadPage = useHookstate(globalNotifPage)
    const [isRefresh, setRefresh] = useState(false)
@@ -32,8 +37,9 @@ export default function ListDiscussionGeneral() {
    const getData = async (loading: boolean) => {
       try {
          setLoading(loading)
-         const response = await funGetAllDiscussionGeneral('?search=' + searchQuery + '&page=' + isPage)
+         const response = await funGetAllDiscussionGeneral('?active=' + status + '&group=' + group + '&search=' + searchQuery + '&page=' + isPage)
          if (response.success) {
+            setNameGroup(response.filter.name)
             if (isPage == 1) {
                setData(response.data)
             } else {
@@ -56,7 +62,7 @@ export default function ListDiscussionGeneral() {
    useShallowEffect(() => {
       setPage(1)
       getData(true)
-   }, [searchQuery])
+   }, [searchQuery, status])
 
    useEffect(() => {
       const handleScroll = async () => {
@@ -107,7 +113,7 @@ export default function ListDiscussionGeneral() {
 
 
    return (
-      <Box p={20}>
+      <Box py={20}>
          {
             isRefresh &&
             <ReloadButtonTop
@@ -131,6 +137,7 @@ export default function ListDiscussionGeneral() {
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
          />
+         {roleLogin.get() == 'supadmin' && <Text>Filter : {nameGroup}</Text>}
          {loading ?
             Array(3)
                .fill(null)
@@ -214,7 +221,9 @@ export default function ListDiscussionGeneral() {
                                  <Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
                                     {v.title}
                                  </Text>
-                                 <Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>
+                                 {
+                                    status != "false" && <Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>
+                                 }
                               </Box>
                            </Grid.Col>
                            <Grid.Col span={4}>

src/module/discussion_general/ui/navbar_discussion.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
+import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
 import { useHookstate } from "@hookstate/core";
 import { ActionIcon } from "@mantine/core";
 import { useState } from "react";
@@ -9,10 +9,13 @@ import DrawerDiscussionGeneral from "./drawer_discussion";
 export default function NavbarDiscussionGeneral() {
    const [openDrawer, setOpenDrawer] = useState(false)
    const tema = useHookstate(TEMA)
+   const roleLogin = useHookstate(globalRole)
+
    return (
       <>
          <LayoutNavbarNew back={`/home`} title="Diskusi Umum"
             menu={
+               roleLogin.get() != 'user' && roleLogin.get() != 'coadmin' &&
                <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
                   <HiMenu size={20} color='white' />
                </ActionIcon>

src/module/discussion_general/ui/tab_list_discussion_general.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { globalRole, TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { Box, rem, Tabs } from "@mantine/core";
+import { useRouter, useSearchParams } from "next/navigation";
+import { IoMdCheckmarkCircleOutline } from "react-icons/io";
+import { IoCloseCircleOutline } from "react-icons/io5";
+import ListDiscussionGeneral from "./list_discussion";
+
+export default function TabListDiscussionGeneral() {
+   const iconStyle = { width: rem(20), height: rem(20) };
+   const router = useRouter();
+   const searchParams = useSearchParams();
+   const status = searchParams.get("active");
+   const group = searchParams.get("group");
+   const tema = useHookstate(TEMA)
+   const roleLogin = useHookstate(globalRole)
+
+   return (
+      <Box p={20}>
+         <Tabs
+            variant="pills"
+            color={tema.get().bgFiturHome}
+            radius="xl"
+            defaultValue={status == "false" ? "false" : "true"}
+         >
+            {
+               roleLogin.get() != ''
+                  ?
+                  (roleLogin.get() != "user" && roleLogin.get() != "coadmin") ?
+                     <Tabs.List
+                        bg={"white"}
+                        style={{
+                           border: `1px solid ${"#EDEDED"}`,
+                           padding: 5,
+                           borderRadius: 100,
+                        }}
+                     >
+                        <Tabs.Tab
+                           value="true"
+                           w={"45%"}
+                           leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}
+                           onClick={() => {
+                              router.push("?active=true&group=" + group);
+                           }}
+                        >
+                           Aktif
+                        </Tabs.Tab>
+                        <Tabs.Tab
+                           value="false"
+                           w={"53%"}
+                           leftSection={<IoCloseCircleOutline style={iconStyle} />}
+                           onClick={() => {
+                              router.push("?active=false&group=" + group);
+                           }}
+                        >
+                           Arsip
+                        </Tabs.Tab>
+                     </Tabs.List>
+                     :
+                     <></>
+                  : <></>
+            }
+            <ListDiscussionGeneral />
+         </Tabs>
+      </Box>
+   );
+}